[ADD] web_widget_text_markdown: adds markdown editor widget for text fields.

web_widget_text_markdown/README.rst

@@ -0,0 +1,55 @@
+Web Widget Text Markdown
+========================
+
+This module adds a `markdown` widget for the text fields.
+
+It uses `bootstrap-markdown <https://github.com/toopay/bootstrap-markdown>`_
+to create an editor on edit mode, and `showdown <https://github.com/showdownjs/showdown>`_
+to convert the markdown into HTML while on preview or readonly mode.
+
+- Edit mode:
+
+.. image:: /web_widget_text_markdown/static/src/img/demo_editor.png
+   :alt: Edit mode
+
+- Preview mode:
+
+.. image:: /web_widget_text_markdown/static/src/img/demo_preview.png
+   :alt: Preview mode
+
+Usage
+=====
+
+Add the markdown widget attribute to any text field like so:
+
+.. code-block::
+
+   <field name="textfield" widget="markdown"/>
+
+Supports translatable fields, and all views (form, tree, kanban...).
+
+Credits
+=======
+
+This module was inspired by original module at version 10.0 located at:
+
+https://github.com/OCA/web/tree/10.0/web_widget_text_markdown#credits
+
+Contributors
+------------
+
+- Tomas Alvarez <tomas@vauxoo.com>
+
+Maintainer
+----------
+
+.. image:: http://odoo-community.org/logo.png
+   :alt: Odoo Community Association
+
+This module is maintained by the OCA.
+
+OCA, or the Odoo Community Association, is a nonprofit organization
+whose mission is to support the collaborative development of
+Odoo features and promote its widespread use.
+
+To contribute to this module, please visit http://odoo-community.org.

web_widget_text_markdown/__manifest__.py

@@ -0,0 +1,24 @@
+# Copyright 2019 Vauxoo - Tomas Alvarez
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+
+{
+    "name": "Web Widget Text Markdown",
+    "version": "12.0.1.0.0",
+    "author": "Tomas Alvarez, Vauxoo, Odoo Community Association (OCA)",
+    "license": "AGPL-3",
+    "category": "Web",
+    "summary": "Markdown editor widget for text fields",
+    "website": "https://github.com/OCA/web",
+    "icon": "/web_widget_text_markdown/static/src/img/icon.png",
+    "depends": [
+        'web',
+    ],
+    "data": [
+        'views/assets.xml',
+    ],
+    "qweb": [
+    ],
+    "installable": True,
+    "auto_install": False,
+    "application": False,
+}

web_widget_text_markdown/static/src/js/web_widget_text_markdown.js

@@ -0,0 +1,69 @@
+odoo.define('web_widget_text_markdown.markdown', function (require) {
+    "use strict";
+
+    var fieldRegistry = require('web.field_registry');
+    var FieldText = require('web.basic_fields').FieldText;
+
+    var mdConverter = new showdown.Converter();
+
+    var FieldMarkdown = FieldText.extend({
+        className: 'o_field_text_markdown',
+
+        _initMarkdown: function () {
+            var self = this;
+            if (!this.$el.is(':visible')) {
+                /** We need to init the markdown editor after
+                 * the base textarea is visible on the page,
+                 * so we call it on a recursive timeout,
+                 * checking that the element is visible
+                 * each time. **/
+                return setTimeout(function () {
+                    self._initMarkdown();
+                }, 0);
+            }
+            var txtarea = this.$el.filter('textarea');
+            txtarea.markdown({
+                autofocus: false,
+                savable: false,
+                iconlibrary: 'fa',
+                fullscreen: {
+                    enable: false,
+                },
+                onPreview: function () {
+                    return self._getHtmlValue();
+                },
+            });
+            /** If the field is translatable we move the button
+             * to the toolbar of the editor and set the correct
+             * classes. **/
+            var translate = this.$el.filter('.o_field_translate');
+            if (translate) {
+                translate.attr('class', 'btn btn-sm btn-default fa fa-globe');
+                var btngrp = $('<div class="btn-group"></div>');
+                btngrp.append(translate);
+                txtarea.parent().find('.md-header.btn-toolbar').append(btngrp);
+            }
+        },
+
+        start: function () {
+            var self = this;
+            return this._super.apply(this, arguments).then(function () {
+                if (self.mode === 'edit') {
+                    self._initMarkdown();
+                }
+            });
+        },
+
+        _getHtmlValue: function () {
+            var val = this.mode === 'edit' ?
+                this._getValue() : this.value;
+            return mdConverter.makeHtml(val);
+        },
+
+        _renderReadonly: function () {
+            this.$el.html(this._getHtmlValue());
+        },
+    });
+
+    fieldRegistry.add('markdown', FieldMarkdown);
+});

web_widget_text_markdown/static/src/scss/web_widget_text_markdown.scss

@@ -0,0 +1,33 @@
+.md-editor {
+  border: 1px $gray-400 solid;
+
+  .md-header.btn-toolbar {
+    padding: 5px;
+    border-bottom: 1px $gray-300 dashed;
+    background: $gray-100;
+
+    .btn-group {
+      padding-right: 5px;
+
+      .btn-default {
+        background: white;
+        border: 1px $gray-400 solid;
+      }
+    }
+  }
+
+  .md-input {
+    margin: 0;
+    padding: 5px;
+    border: none;
+  }
+
+  .md-preview {
+    padding: 5px;
+  }
+}
+
+blockquote {
+  border-left: 1px solid $gray-400;
+  padding-left: 10px;
+}

web_widget_text_markdown/views/assets.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+
+  <template id="assets_backend" name="Backend Assets for Web Widget Text Markdown" inherit_id="web.assets_backend">
+    <xpath expr="//link[last()]" position="after">
+      <link rel="stylesheet" href="/web_widget_text_markdown/static/src/scss/web_widget_text_markdown.scss"/>
+    </xpath>
+    <xpath expr="//script[last()]" position="after">
+      <script type="text/javascript" src="/web_widget_text_markdown/static/lib/js/bootstrap-markdown.js"/>
+      <script type="text/javascript" src="/web_widget_text_markdown/static/lib/js/showdown/showdown.min.js"/>
+      <script type="text/javascript" src="/web_widget_text_markdown/static/src/js/web_widget_text_markdown.js"/>
+    </xpath>
+  </template>
+
+</odoo>