@themarioga/grid-editor 6.0.0-beta.4 → 6.0.0-beta.5

package/dist/plugins/grideditor.codemirror-inline.js

@@ -0,0 +1,190 @@
+/**
+ * A block's html, edited in place with CodeMirror.
+ *
+ * A feature plugin: load this file after the editor, and CodeMirror 5 with
+ * its html mode after or before it, and every drawer of a row, a column, a
+ * text, the host's plain content, an element, a section or a container has a
+ * </> tool. It opens the block's html - the block itself and everything in
+ * it, as getHtml would give it - in CodeMirror where the block was, and
+ * Apply puts what was written in the block's place. What it can ask the
+ * editor for is the handle its factory is called with, described in
+ * docs/plugins.md.
+ *
+ *   <link rel="stylesheet" href="codemirror/lib/codemirror.css">
+ *   <script src="codemirror/lib/codemirror.js"></script>
+ *   <script src="codemirror/mode/xml/xml.js"></script>
+ *   <script src="codemirror/mode/javascript/javascript.js"></script>
+ *   <script src="codemirror/mode/css/css.js"></script>
+ *   <script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.codemirror-inline.min.js"></script>
+ *
+ * Without CodeMirror on the page the html is edited in a plain textarea.
+ * CodeMirror's options are the codemirror plugin's, codemirror.config.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'tool.edit_html': 'Edit html',
+    'codemirror.apply': 'Apply',
+    'codemirror.cancel': 'Cancel',
+});
+
+/** What has html of its own to edit: a pane's is split between its button and its body. */
+var KINDS = ['row', 'column', 'text', 'plain', 'element', 'section'];
+
+$.fn.gridEditor.features['codemirror-inline'] = function(ge) {
+
+    var open = []; // The blocks being edited: { node, kind, from, wrapper, textarea, editor }
+
+    function options() {
+        var own = (ge.settings.codemirror && ge.settings.codemirror.config) || {};
+
+        return $.extend({
+            mode: 'htmlmixed',
+            lineNumbers: true,
+            lineWrapping: true,
+            tabSize: 2,
+            indentUnit: 2,
+            // As tall as what it holds, up to the css's limit
+            viewportMargin: Infinity,
+        }, own);
+    }
+
+    /** What stands for the node in its column: a text's text block, or the node. */
+    function anchorOf(node) {
+        var textBlock = node.parent('.ge-text-block');
+        return textBlock.length ? textBlock : node;
+    }
+
+    function entryOf(node) {
+        return open.filter(function(entry) { return entry.node[0] === node[0]; })[0] || null;
+    }
+
+    function editable(node, kind) {
+        return KINDS.indexOf(kind) !== -1 || node.is('[data-ge-container]');
+    }
+
+    /** The editor where the block was, the block hidden behind it. */
+    function show(entry) {
+        var anchor = anchorOf(entry.node).addClass('ge-code-hidden');
+        entry.wrapper.insertAfter(anchor);
+        if (entry.editor) { entry.editor.refresh(); }
+    }
+
+    function hide(entry) {
+        entry.wrapper.detach();
+        anchorOf(entry.node).removeClass('ge-code-hidden');
+        entry.node.removeClass('ge-code-hidden');
+    }
+
+    function close(entry) {
+        hide(entry);
+        if (entry.editor) { entry.editor.toTextArea(); }
+        entry.wrapper.remove();
+        open.splice(open.indexOf(entry), 1);
+    }
+
+    function openEditor(node) {
+        if (entryOf(node)) { return; }
+
+        var entry = {
+            node: node,
+            kind: ge.kindOf(node),
+            // As getHtml gives it: no drawers, no editor open in it
+            from: ge.nodeHtml(node),
+            // A drawer, to the editor: never content, never a block to move
+            wrapper: $('<div class="ge-tools-drawer ge-code-inline" />'),
+            editor: null,
+        };
+        entry.textarea = $('<textarea class="ge-code-inline-source" />').val(entry.from).appendTo(entry.wrapper);
+
+        var bar = $('<div class="ge-code-inline-bar" />').appendTo(entry.wrapper);
+        $('<button type="button" class="btn btn-sm btn-primary ge-code-apply" />')
+            .text(ge.t('codemirror.apply'))
+            .on('click', function() { apply(entry); })
+            .appendTo(bar);
+        $('<button type="button" class="btn btn-sm btn-outline-secondary ge-code-cancel" />')
+            .text(ge.t('codemirror.cancel'))
+            .on('click', function() { close(entry); })
+            .appendTo(bar);
+
+        open.push(entry);
+        show(entry);
+
+        if (window.CodeMirror) {
+            entry.editor = window.CodeMirror.fromTextArea(entry.textarea[0], options());
+            $(entry.editor.getWrapperElement()).addClass('ge-code-editor');
+            entry.editor.focus();
+        } else {
+            entry.textarea.trigger('focus');
+        }
+    }
+
+    /**
+     * What was written, in the block's place, through the edit-html events.
+     * The canvas leaves editing to take it in and comes back, as it does for
+     * getHtml, so what was written is read as the editor reads any markup.
+     */
+    function apply(entry) {
+        var to = entry.editor ? entry.editor.getValue() : entry.textarea.val();
+        var payload = ge.payloadFor(entry.kind, entry.node, { source: 'tool', from: entry.from, to: to });
+
+        // Canceled, the editor stays open with what was written in it
+        if (!ge.emit('before-edit-html', payload)) { return; }
+
+        close(entry);
+
+        var instance = ge.canvas.data('grideditor');
+        instance.deinit();
+
+        var made = $('<div />').html(to).contents();
+        entry.node.replaceWith(made);
+
+        instance.init();
+
+        ge.emit('after-edit-html', ge.payloadFor(entry.kind, made.filter('*'), {
+            source: 'tool',
+            from: entry.from,
+            to: to,
+        }));
+    }
+
+    function tool(drawer, node) {
+        ge.createTool(drawer, ge.t('tool.edit_html'), 'ge-edit-html', 'bi bi-code-slash', function() {
+            openEditor(node);
+        });
+    }
+
+    return {
+        drawerTools: function(drawer, node, kind) {
+            if (editable(node, kind)) { tool(drawer, node); }
+        },
+
+        // Plain content has no gear, and so none of the drawerTools: its
+        // html is what there is to edit about it
+        plainTools: tool,
+
+        // Every deinit - getHtml's among them - takes the editors off the
+        // canvas, whatever is in them, and every init puts them back where
+        // their block is. A block that is gone takes its editor with it.
+        onBeforeDeinit: function() {
+            open.forEach(hide);
+        },
+
+        onInit: function() {
+            open.slice().forEach(function(entry) {
+                if (!$.contains(document.documentElement, entry.node[0])) {
+                    if (entry.editor) { entry.editor.toTextArea(); }
+                    entry.wrapper.remove();
+                    open.splice(open.indexOf(entry), 1);
+                    return;
+                }
+
+                show(entry);
+            });
+        },
+    };
+};
+
+})(jQuery);

package/dist/plugins/grideditor.codemirror-inline.min.js

@@ -0,0 +1,2 @@
+(l=>{l.extend(l.fn.gridEditor.locales.en,{"tool.edit_html":"Edit html","codemirror.apply":"Apply","codemirror.cancel":"Cancel"});var s=["row","column","text","plain","element","section"];l.fn.gridEditor.features["codemirror-inline"]=function(i){var t=[];function r(e){var o=e.parent(".ge-text-block");return o.length?o:e}function d(e){var o=r(e.node).addClass("ge-code-hidden");e.wrapper.insertAfter(o),e.editor&&e.editor.refresh()}function o(e){e.wrapper.detach(),r(e.node).removeClass("ge-code-hidden"),e.node.removeClass("ge-code-hidden")}function a(e){o(e),e.editor&&e.editor.toTextArea(),e.wrapper.remove(),t.splice(t.indexOf(e),1)}function n(e){var o,n;o=e,t.filter(function(e){return e.node[0]===o[0]})[0]||((n={node:e,kind:i.kindOf(e),from:i.nodeHtml(e),wrapper:l('<div class="ge-tools-drawer ge-code-inline" />'),editor:null}).textarea=l('<textarea class="ge-code-inline-source" />').val(n.from).appendTo(n.wrapper),e=l('<div class="ge-code-inline-bar" />').appendTo(n.wrapper),l('<button type="button" class="btn btn-sm btn-primary ge-code-apply" />').text(i.t("codemirror.apply")).on("click",function(){var e,o,t,r;t=(e=n).editor?e.editor.getValue():e.textarea.val(),r=i.payloadFor(e.kind,e.node,{source:"tool",from:e.from,to:t}),i.emit("before-edit-html",r)&&(a(e),(r=i.canvas.data("grideditor")).deinit(),o=l("<div />").html(t).contents(),e.node.replaceWith(o),r.init(),i.emit("after-edit-html",i.payloadFor(e.kind,o.filter("*"),{source:"tool",from:e.from,to:t})))}).appendTo(e),l('<button type="button" class="btn btn-sm btn-outline-secondary ge-code-cancel" />').text(i.t("codemirror.cancel")).on("click",function(){a(n)}).appendTo(e),t.push(n),d(n),window.CodeMirror?(n.editor=window.CodeMirror.fromTextArea(n.textarea[0],(e=i.settings.codemirror&&i.settings.codemirror.config||{},l.extend({mode:"htmlmixed",lineNumbers:!0,lineWrapping:!0,tabSize:2,indentUnit:2,viewportMargin:1/0},e))),l(n.editor.getWrapperElement()).addClass("ge-code-editor"),n.editor.focus()):n.textarea.trigger("focus"))}function c(e,o){i.createTool(e,i.t("tool.edit_html"),"ge-edit-html","bi bi-code-slash",function(){n(o)})}return{drawerTools:function(e,o,t){var r;r=o,-1===s.indexOf(t)&&!r.is("[data-ge-container]")||c(e,o)},plainTools:c,onBeforeDeinit:function(){t.forEach(o)},onInit:function(){t.slice().forEach(function(e){l.contains(document.documentElement,e.node[0])?d(e):(e.editor&&e.editor.toTextArea(),e.wrapper.remove(),t.splice(t.indexOf(e),1))})}}}})(jQuery);
+//# sourceMappingURL=grideditor.codemirror-inline.min.js.map

package/dist/plugins/grideditor.codemirror-inline.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grideditor.codemirror-inline.min.js","sources":["../../src/js/plugins/grideditor.codemirror-inline.js"],"names":["$","extend","fn","gridEditor","locales","en","tool.edit_html","codemirror.apply","codemirror.cancel","KINDS","features","ge","open","anchorOf","node","textBlock","parent","length","show","entry","anchor","addClass","wrapper","insertAfter","editor","refresh","hide","detach","removeClass","close","toTextArea","remove","splice","indexOf","openEditor","filter","kind","kindOf","from","nodeHtml","textarea","val","appendTo","bar","text","t","on","made","to","payload","getValue","payloadFor","source","emit","instance","canvas","data","deinit","html","contents","replaceWith","init","push","window","CodeMirror","fromTextArea","own","settings","codemirror","config","mode","lineNumbers","lineWrapping","tabSize","indentUnit","viewportMargin","Infinity","getWrapperElement","focus","trigger","tool","drawer","createTool","drawerTools","is","plainTools","onBeforeDeinit","forEach","onInit","slice","contains","document","documentElement","jQuery"],"mappings":"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"}

package/dist/plugins/grideditor.codemirror.js

@@ -0,0 +1,79 @@
+/**
+ * CodeMirror for grid-editor's source view.
+ *
+ * A feature plugin: load this file after the editor, and CodeMirror 5 with
+ * its html mode after or before it, and the toolbar's source button edits the
+ * canvas's html in CodeMirror - highlighted, with line numbers - rather than
+ * in a plain textarea. What it can ask the editor for is the handle its
+ * factory is called with, described in docs/plugins.md.
+ *
+ *   <link rel="stylesheet" href="codemirror/lib/codemirror.css">
+ *   <script src="codemirror/lib/codemirror.js"></script>
+ *   <script src="codemirror/mode/xml/xml.js"></script>
+ *   <script src="codemirror/mode/javascript/javascript.js"></script>
+ *   <script src="codemirror/mode/css/css.js"></script>
+ *   <script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.codemirror.min.js"></script>
+ *
+ * CodeMirror 5 rather than 6: 6 comes as ES modules only, for a bundler,
+ * where 5 loads from a script tag like the rest of the page. Without
+ * CodeMirror on the page the source view is the textarea, as before, and
+ * the console says why.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'error.codemirror_missing': 'CodeMirror not available! Make sure you loaded the CodeMirror js file; the source is edited in a plain textarea without it.',
+});
+
+$.fn.gridEditor.features.codemirror = function(ge) {
+
+    var editor = null;
+    var warned = false;
+
+    function options() {
+        var own = (ge.settings.codemirror && ge.settings.codemirror.config) || {};
+
+        return $.extend({
+            mode: 'htmlmixed',
+            lineNumbers: true,
+            lineWrapping: true,
+            tabSize: 2,
+            indentUnit: 2,
+        }, own);
+    }
+
+    return {
+        // Over the textarea the editor fills with the canvas's html: it goes
+        // where the textarea was, as tall as the editor made the textarea
+        onSourceOpen: function(textarea) {
+            if (!window.CodeMirror) {
+                if (!warned) {
+                    warned = true;
+                    ge.warn(ge.t('error.codemirror_missing'));
+                }
+                return;
+            }
+
+            var height = textarea.height();
+
+            editor = window.CodeMirror.fromTextArea(textarea[0], options());
+            $(editor.getWrapperElement()).addClass('ge-code-editor');
+            editor.setSize(null, height);
+            editor.focus();
+        },
+
+        // What it holds goes back in the textarea, which is what the canvas
+        // is made of again, and the textarea is left as it found it
+        onSourceClose: function() {
+            if (!editor) { return; }
+
+            editor.save();
+            editor.toTextArea();
+            editor = null;
+        },
+    };
+};
+
+})(jQuery);

package/dist/plugins/grideditor.codemirror.min.js

@@ -0,0 +1,2 @@
+(t=>{t.extend(t.fn.gridEditor.locales.en,{"error.codemirror_missing":"CodeMirror not available! Make sure you loaded the CodeMirror js file; the source is edited in a plain textarea without it."}),t.fn.gridEditor.features.codemirror=function(o){var i=null,n=!1;return{onSourceOpen:function(e){var r;window.CodeMirror?(r=e.height(),i=window.CodeMirror.fromTextArea(e[0],(e=o.settings.codemirror&&o.settings.codemirror.config||{},t.extend({mode:"htmlmixed",lineNumbers:!0,lineWrapping:!0,tabSize:2,indentUnit:2},e))),t(i.getWrapperElement()).addClass("ge-code-editor"),i.setSize(null,r),i.focus()):n||(n=!0,o.warn(o.t("error.codemirror_missing")))},onSourceClose:function(){i&&(i.save(),i.toTextArea(),i=null)}}}})(jQuery);
+//# sourceMappingURL=grideditor.codemirror.min.js.map

package/dist/plugins/grideditor.codemirror.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grideditor.codemirror.min.js","sources":["../../src/js/plugins/grideditor.codemirror.js"],"names":["$","extend","fn","gridEditor","locales","en","error.codemirror_missing","features","codemirror","ge","editor","warned","onSourceOpen","textarea","height","window","CodeMirror","fromTextArea","own","settings","config","mode","lineNumbers","lineWrapping","tabSize","indentUnit","getWrapperElement","addClass","setSize","focus","warn","t","onSourceClose","save","toTextArea","jQuery"],"mappings":"CAuBUA,IAEVA,EAAEC,OAAOD,EAAEE,GAAGC,WAAWC,QAAQC,GAAI,CACjCC,2BAA4B,6HAChC,CAAC,EAEDN,EAAEE,GAAGC,WAAWI,SAASC,WAAa,SAASC,GAE3C,IAAIC,EAAS,KACTC,EAAS,CAAA,EAcb,MAAO,CAGHC,aAAc,SAASC,GACnB,IAQIC,EARCC,OAAOC,YAQRF,EAASD,EAASC,OAAO,EAE7BJ,EAASK,OAAOC,WAAWC,aAAaJ,EAAS,IAzBjDK,EAAOT,EAAGU,SAASX,YAAcC,EAAGU,SAASX,WAAWY,QAAW,GAEhEpB,EAAEC,OAAO,CACZoB,KAAM,YACNC,YAAa,CAAA,EACbC,aAAc,CAAA,EACdC,QAAS,EACTC,WAAY,CAChB,EAAGP,CAAG,EAiB4D,EAC9DlB,EAAEU,EAAOgB,kBAAkB,CAAC,EAAEC,SAAS,gBAAgB,EACvDjB,EAAOkB,QAAQ,KAAMd,CAAM,EAC3BJ,EAAOmB,MAAM,GAZJlB,IACDA,EAAS,CAAA,EACTF,EAAGqB,KAAKrB,EAAGsB,EAAE,0BAA0B,CAAC,EAWpD,EAIAC,cAAe,WACNtB,IAELA,EAAOuB,KAAK,EACZvB,EAAOwB,WAAW,EAClBxB,EAAS,KACb,CACJ,CACJ,CAEC,GAAEyB,MAAM"}

package/docs/events.md

@@ -51,6 +51,8 @@ about every insertion can bind `grideditor:before-add` and switch on
 | `grideditor:after-add-text` | `grideditor:after-add` | no | |
 | `grideditor:before-convert` | — | yes | before the host's plain content is made a text, on a click, with the type chosen |
 | `grideditor:after-convert` | — | no | once the type is on it, before its editor has finished opening |
+| `grideditor:before-edit-html` | — | yes | with the codemirror-inline plugin, before a block's html is replaced with what was written; canceled, the editor stays open |
+| `grideditor:after-edit-html` | — | no | once it is, and the canvas is editing again; `node` is what was written, which may be several nodes or none |
 | `grideditor:before-delete` | — | yes | before any node is removed, whatever its kind |
 | `grideditor:after-delete` | — | no | after removal completes, animation included |
 | `grideditor:before-move` | — | yes | on drag start (see *Canceling*) |
@@ -104,6 +106,10 @@ The payload
     from: 'plain',
     to: 'tinymce',        // the text type it is made
 
+    // edit-html only
+    from: '<div class="row">…</div>',   // the block's html as it was
+    to: '<div class="row">…</div>',     // what was written
+
     // popup-orphan only
     missing: 'ge-popup-3-a91',   // the id the trigger pointed at
 

package/docs/locale-keys.md

@@ -165,6 +165,18 @@ The clipboard plugin: copy and paste.
 | `clipboard.paste_section` | Paste section | Title of the toolbar's paste button, while a section is copied |
 
 
+codemirror.*
+------------
+
+The codemirror-inline plugin: a block's html, edited in place.
+
+| Key | English | Where |
+| --- | --- | --- |
+| `tool.edit_html` | Edit html | The </> tool, in the drawers of rows, columns, texts, plain content, elements, sections and containers |
+| `codemirror.apply` | Apply | Under the editor: the block's place takes what was written |
+| `codemirror.cancel` | Cancel | Under the editor: the block stays as it was |
+
+
 confirm.*
 ---------
 
@@ -289,6 +301,7 @@ all the same: the developer reading them is the one who chose the locale.
 | `error.tinymce_missing` | tinyMCE not available! … | `content_types: ['tinymce']` with no tinyMCE loaded |
 | `error.ckeditor_missing` | CKEditor not available! … | `content_types: ['ckeditor']` with no CKEditor loaded |
 | `error.summernote_missing` | Summernote not available! … | `content_types: ['summernote']` with no Summernote loaded |
+| `error.codemirror_missing` | CodeMirror not available! … | The codemirror plugin's source view with no CodeMirror loaded: the textarea is used |
 
 
 Namespaces not in use yet

package/docs/plugins.md

@@ -161,8 +161,11 @@ $.fn.gridEditor.features.elements = function(ge) {
         onInit: function() { … },        // every init: put the furniture in
         onDeinit: function() { … },      // every deinit: take it out again
         onBeforeDeinit: function() { … },  // every deinit, before the drawers come off: close what you opened
+        onSourceOpen: function(textarea) { … },   // the source view opened: the canvas's html is in the textarea
+        onSourceClose: function(textarea) { … },  // and is closing: put what you edited back in the textarea
         onContentReady: function(area) { … },  // a rich text editor just took over, or rewrote a text
         textTypes: function() { … },      // the text types this plugin edits, see "Text"
+        plainTools: function(drawer, block) { … },  // tools for the host's plain content, which has no drawerTools
 
         cuts: '[data-my-block]',          // what cuts a text: a block of the column, never part of a text
         onSortable: function(sortable) { … },  // declare your own sortable lists
@@ -253,6 +256,17 @@ rather than remembering anything about it.
   Leaving `group` out makes a list that sorts only within itself, which is what
   a tab strip wants. Group names are scoped to the editor instance, so two
   editors on one page never drag into each other.
+- **`onSourceOpen(textarea)`** and **`onSourceClose(textarea)`** are the
+  toolbar's source view: it opens with the canvas's html in the textarea, and
+  closing it makes the canvas of what is in the textarea then. A code editor
+  goes over the textarea on open and puts its value back in it on close, which
+  is all the codemirror plugin does; `destroy` with the source open closes it
+  first.
+- **`plainTools(drawer, block)`** puts tools in the drawer of the host's plain
+  content, between move and delete. That drawer has no gear, so
+  `drawerTools` never runs for it: plain content gets no utility, no copy and
+  no host tool, only what a plugin gives it here - the codemirror-inline
+  plugin's </> tool.
 - **`methods`** are added to the instance handle. A method the editor
   documents but a plugin implements — `createElement` — warns and returns null
   when the plugin is not loaded.
@@ -285,9 +299,10 @@ Text
 What the editor finds in a column that is not the grid's - loose markup, the
 page it was started on before it had a row - it wraps in a content area with
 no type: the host's **plain content**, `<div class="ge-content">`. While
-editing it is a block with a drawer of two tools, move and delete, and no
-gear; it is edited in the source, with the toolbar's code button, and nothing
-in the editor makes a new one. `getHtml` saves it as it is, and it is plain
+editing it is a block with a drawer of move and delete - and what a plugin's
+`plainTools` add between them - and no gear; it is edited in the source, with
+the toolbar's code button or the codemirror-inline plugin's </> tool, and
+nothing in the editor makes a new one. `getHtml` saves it as it is, and it is plain
 content again when the page comes back. Events call it `kind: 'plain'`.
 
 A text is a content area with a type on it - `data-ge-content-type` and the

package/example/codemirror.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <!-- CSS dependencies -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/lib/codemirror.min.css">
+
+    <!-- Javascript dependencies -->
+    <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.6/tinymce.min.js"></script>
+
+    <!-- CodeMirror 5 and its html mode, which is made of the xml, javascript
+         and css modes -->
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/lib/codemirror.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/mode/xml/xml.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/mode/javascript/javascript.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/mode/css/css.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/mode/htmlmixed/htmlmixed.min.js"></script>
+
+    <!-- Grid editor CSS -->
+    <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
+    <!-- Grid editor javascript -->
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+    <script src="../dist/jquery.grideditor.min.js"></script>
+    <script src="../dist/plugins/grideditor.tinymce.min.js"></script>
+    <!-- The source view in CodeMirror, a plugin of its own -->
+    <script src="../dist/plugins/grideditor.codemirror.min.js"></script>
+    <!-- And each block's html, in place, from the </> tool in its drawer -->
+    <script src="../dist/plugins/grideditor.codemirror-inline.min.js"></script>
+
+    <script>
+        $(function() {
+            function start() {
+                if ($('#myGrid').data('grideditor')) { $('#myGrid').gridEditor('destroy'); }
+
+                $('#myGrid').gridEditor({
+                    new_row_layouts: [[12], [6, 6], [4, 4, 4]],
+                    // false leaves the toolbar's source button out
+                    edit_source: $('#editSource').prop('checked'),
+                    // Anything CodeMirror.fromTextArea takes, over the
+                    // plugin's own defaults
+                    codemirror: {
+                        config: { lineNumbers: true },
+                    },
+                });
+            }
+
+            $('#editSource').on('change', start);
+            start();
+        });
+    </script>
+
+    <title>Grid Editor example - the source in CodeMirror</title>
+</head>
+<body>
+    <!-- Back to the demo index -->
+    <div class="container pt-3">
+        <a class="link-secondary" href="index.html"><i class="bi bi-arrow-left"></i> All demos</a>
+    </div>
+
+    <div class="container py-3">
+        <h2>The source in CodeMirror</h2>
+        <p class="text-body-secondary">
+            The toolbar's <i class="bi bi-code-slash"></i> button turns the
+            canvas into its html, to edit by hand. With the codemirror plugin
+            loaded that html is in <a href="https://codemirror.net/5/">CodeMirror</a>,
+            highlighted and with line numbers, instead of a plain textarea; the
+            same button brings the canvas back with what you wrote.
+            <code>edit_source: false</code> leaves the button out.
+        </p>
+        <p class="text-body-secondary">
+            The codemirror-inline plugin puts a <i class="bi bi-code-slash"></i>
+            tool in the drawer of every row, column, text, element and
+            container, and of the page's plain content: it opens that block's
+            html, the block itself and all that is in it, in CodeMirror where
+            the block was. <em>Apply</em> puts what you wrote in its place.
+        </p>
+
+        <div class="form-check mb-3">
+            <input class="form-check-input" type="checkbox" id="editSource" checked>
+            <label class="form-check-label" for="editSource"><code>edit_source</code></label>
+        </div>
+
+        <div id="myGrid">
+            <div class="row">
+                <div class="col-lg-6">
+                    <h3>Edit me as html</h3>
+                    <p>Press the code button in the toolbar and this is CodeMirror.</p>
+                </div>
+                <div class="col-lg-6">
+                    <div class="ge-content ge-content-type-tinymce" data-ge-content-type="tinymce">
+                        <p>A text, saved as one: a click edits it in tinyMCE.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

package/example/index.html

@@ -61,6 +61,14 @@
                 <span class="text-body-secondary">The plugin model, with a container plugin written in the page itself</span>
             </a>
 
+            <a class="list-group-item list-group-item-action" href="codemirror.html">
+                <div class="d-flex justify-content-between">
+                    <strong>The source in CodeMirror</strong>
+                    <code class="text-body-secondary">codemirror.html</code>
+                </div>
+                <span class="text-body-secondary">The source button's html in a code editor, and edit_source to leave the button out</span>
+            </a>
+
             <a class="list-group-item list-group-item-action" href="custom_editor.html">
                 <div class="d-flex justify-content-between">
                     <strong>A text editor of your own</strong>

package/package.json

@@ -34,7 +34,7 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "6.0.0-beta.4",
+  "version": "6.0.0-beta.5",
   "main": "dist/jquery.grideditor.js",
   "files": [
     "dist",

package/src/js/jquery.grideditor.js

@@ -358,6 +358,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             'default_view'      : ALL_VIEW,
             'resize'            : NESTED_SETTINGS.resize, // Resizing a column by dragging its edge
             'source_textarea'   : '',
+            'edit_source'       : true, // The toolbar's button to edit the canvas as html
             'locale'            : 'en', // Code of a locale in $.fn.gridEditor.locales
             'locale_strings'    : {}, // Overrides for individual keys
             'callbacks'         : {}, // before_*/after_* functions, the events by another route
@@ -397,6 +398,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         var curView = settings.default_view; // Breakpoint key, or 'all'
         var confirmDialog = null; // The delete confirmation, built when first needed
         var sizePicker = null; // The open column size picker, if there is one
+        var sourceOpen = false; // Whether the canvas is being edited as html
         var dropMarker = null; // The line showing where a dragged toolbar button would land
         var warnedHere = {}; // Deprecations are worth saying once per instance, not once per call
         var sortables = []; // Every list made sortable, so deinit destroys exactly those
@@ -1003,27 +1005,23 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             var btnGroup = $('<div class="btn-group pull-right"/>')
                 .appendTo(wrapper)
             ;
-            var htmlButton = $('<button type="button" class="btn btn-sm btn-primary gm-edit-mode"><i class="bi bi-code-slash"></i></button>')
-                .attr('title', t('tool.edit_source'))
-                .on('click', function() {
-                    if (htmlButton.hasClass('active')) {
-                        canvas.empty().html(htmlTextArea.val()).show();
-                        init();
-                        htmlTextArea.hide();
-                    } else {
-                        deinit();
-                        htmlTextArea
-                            .height(0.8 * $(window).height())
-                            .val(canvas.html())
-                            .show()
-                        ;
-                        canvas.hide();
-                    }
+            if (settings.edit_source) {
+                // Built again by setLocale, maybe with the source open
+                var htmlButton = $('<button type="button" class="btn btn-sm btn-primary gm-edit-mode"><i class="bi bi-code-slash"></i></button>')
+                    .attr('title', t('tool.edit_source'))
+                    .toggleClass('active btn-danger', sourceOpen)
+                    .on('click', function() {
+                        if (sourceOpen) {
+                            closeSource();
+                        } else {
+                            openSource();
+                        }
 
-                    htmlButton.toggleClass('active btn-danger');
-                })
-                .appendTo(btnGroup)
-            ;
+                        htmlButton.toggleClass('active btn-danger', sourceOpen);
+                    })
+                    .appendTo(btnGroup)
+                ;
+            }
             var previewButton = $('<button type="button" class="btn btn-sm btn-primary gm-preview"><i class="bi bi-eye-fill"></i></button>')
                 .attr('title', t('tool.preview'))
                 .on('mouseenter', function() {
@@ -1584,6 +1582,32 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             init();
         }
 
+        /**
+         * The canvas as html, in the textarea in its place, to edit by hand.
+         * A feature plugin's onSourceOpen may put a code editor over the
+         * textarea; its onSourceClose puts what it holds back in it, which is
+         * what the canvas is made of again.
+         */
+        function openSource() {
+            deinit();
+            htmlTextArea
+                .height(0.8 * $(window).height())
+                .val(canvas.html())
+                .show()
+            ;
+            canvas.hide();
+            sourceOpen = true;
+            plugins('onSourceOpen', htmlTextArea);
+        }
+
+        function closeSource() {
+            plugins('onSourceClose', htmlTextArea);
+            sourceOpen = false;
+            canvas.empty().html(htmlTextArea.val()).show();
+            init();
+            htmlTextArea.hide();
+        }
+
         function init() {
             // The node whose settings were open is gone - deleted, say - and
             // its panel with it
@@ -1662,6 +1686,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         function destroy() {
+            // The html being edited is what the canvas is left with
+            if (sourceOpen) { closeSource(); }
             deinit();
             removeConfirmModal();
             removeSettingsPanels();
@@ -4581,6 +4607,13 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             textBlock.addClass('ge-plain-block');
 
             createMoveTool(drawer);
+
+            // The tools a feature plugin gives plain content, which is not
+            // every plugin's drawerTools: no gear, no utilities, no copy
+            $.each(FEATURES, function(name, feature) {
+                if (feature.plainTools) { feature.plainTools(drawer, block); }
+            });
+
             createTool(drawer, t('tool.delete_plain'), 'ge-delete-plain', 'bi bi-trash', function() {
                 deleteNode('plain', block, t('confirm.delete_plain'), function(removed) {
                     textBlock.slideUp(function() {