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

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() {

package/src/js/locales/grideditor.es.js

@@ -19,10 +19,11 @@
         'tool.move': 'Mover',
         'tool.settings': 'Configuración',
         'tool.add_row': 'Añadir fila',
-        'tool.add_text': 'Añadir texto',
-        'tool.add_text_type': 'Añadir texto con {editor}',
         'tool.delete_text': 'Quitar texto',
         'tool.delete_plain': 'Quitar contenido',
+        'tool.edit_html': 'Editar html',
+        'codemirror.apply': 'Aplicar',
+        'codemirror.cancel': 'Cancelar',
         'tool.convert_type': 'Editar como texto de {editor}',
         'text.add': 'Texto',
         'text.add_type': 'Texto ({editor})',
@@ -161,6 +162,7 @@
         'warning.setting_removed': 'El ajuste {setting} se eliminó en la 4.0. Usa {replacement} en su lugar.',
         'error.tinymce_missing': '¡tinyMCE no está disponible! Asegúrate de haber cargado el archivo js de tinyMCE.',
         'error.ckeditor_missing': '¡CKEditor no está disponible! Asegúrate de haber cargado los archivos js de ckeditor y del adaptador de jQuery.',
+        'error.codemirror_missing': '¡CodeMirror no está disponible! Asegúrate de haber cargado el archivo js de CodeMirror; sin él el código se edita en un textarea normal.',
         'error.summernote_missing': '¡Summernote no está disponible! Asegúrate de haber cargado el archivo js de Summernote.',
     };
 

package/src/js/plugins/grideditor.ckeditor.js

@@ -12,8 +12,8 @@
  *
  * Up to 5.x the main bundle carried a copy of this file; since 6.0 it is
  * loaded on its own, like every plugin. The built file starts with what
- * every text editor shares - text blocks, the Text button and the Add text
- * tool, createText, making the host's plain content a text - from
+ * every text editor shares - text blocks, the Text button, createText,
+ * making the host's plain content a text - from
  * src/js/text/grideditor.text.js, installed once however many editors a
  * page loads.
  */

package/src/js/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/src/js/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/src/js/plugins/grideditor.summernote.js

@@ -12,8 +12,8 @@
  *
  * Up to 5.x the main bundle carried a copy of this file; since 6.0 it is
  * loaded on its own, like every plugin. The built file starts with what
- * every text editor shares - text blocks, the Text button and the Add text
- * tool, createText, making the host's plain content a text - from
+ * every text editor shares - text blocks, the Text button, createText,
+ * making the host's plain content a text - from
  * src/js/text/grideditor.text.js, installed once however many editors a
  * page loads.
  */

package/src/js/plugins/grideditor.tinymce.js

@@ -12,8 +12,8 @@
  *
  * Up to 5.x the main bundle carried a copy of this file; since 6.0 it is
  * loaded on its own, like every plugin. The built file starts with what
- * every text editor shares - text blocks, the Text button and the Add text
- * tool, createText, making the host's plain content a text - from
+ * every text editor shares - text blocks, the Text button, createText,
+ * making the host's plain content a text - from
  * src/js/text/grideditor.text.js, installed once however many editors a
  * page loads.
  */

package/src/js/text/grideditor.text.js

@@ -8,10 +8,10 @@
  *
  * It is a feature plugin, `text`, that the `plugins` setting does not choose
  * (content_types does), and it is everything a text is to the editor: the
- * text block's drawer, the Text buttons in the toolbar and the Add text tool
- * in each column, createText, opening an editor on a click and closing it
- * again with the host's attributes put back, and making the host's plain
- * content a text through the core's `textTypes` hook.
+ * text block's drawer, the Text buttons in the toolbar, createText, opening
+ * an editor on a click and closing it again with the host's attributes put
+ * back, and making the host's plain content a text through the core's
+ * `textTypes` hook.
  *
  * Each editor registers under $.fn.gridEditor.texts, which is this file's own
  * registry and not a contract: an editor of a host's own is a feature plugin
@@ -22,8 +22,6 @@
     if ($.fn.gridEditor.features.text) { return; }
 
     $.extend($.fn.gridEditor.locales.en, {
-        'tool.add_text': 'Add text',
-        'tool.add_text_type': 'Add {editor} text',
         'text.add': 'Text',
         'text.add_type': 'Text ({editor})',
         'panel.editor': 'Editor',
@@ -119,11 +117,6 @@
                 .html(content !== undefined ? content : (text && text.initialContent) || '');
         }
 
-        /** A text block at the end of a column, through the add events. */
-        function addTextTo(col, type) {
-            return ge.place(makeText(type), 'text', { appendTo: col, source: 'tool' });
-        }
-
         /**
          * createText(type?, options?): a content area of a text editor's,
          * detached unless a placement is given. The type is the first one
@@ -262,44 +255,6 @@
             });
         }
 
-        /**
-         * The add text tool, in each column's drawer before its add row tool:
-         * a text of the first editor offered, or, held, of the one chosen.
-         */
-        function addTextTools() {
-            var texts = offeredTexts();
-            if (!texts.length) { return; }
-
-            ge.canvas.find('.column').each(function() {
-                var col = $(this);
-                var drawer = col.children('.ge-tools-drawer');
-                if (!drawer.length || drawer.children('.ge-add-text').length) { return; }
-
-                ge.createTool(drawer, ge.t('tool.add_text'), 'ge-add-text', 'bi bi-type', function() {
-                    if (ge.closePicker()) { return; } // The picker was open: that was the answer
-
-                    addTextTo(col, texts[0]);
-                });
-
-                var tool = drawer.children('.ge-add-text');
-                var addRow = drawer.children('.ge-add-row');
-                if (addRow.length) { tool.insertBefore(addRow); }
-
-                if (texts.length > 1) {
-                    ge.attachPicker(tool, function() {
-                        ge.openPicker(tool, texts.map(function(type) {
-                            return {
-                                label: textLabel(type),
-                                title: ge.t('tool.add_text_type', { editor: textLabel(type) }),
-                                attributes: { 'data-ge-content-type': type },
-                                choose: function() { addTextTo(col, type); },
-                            };
-                        }), 'ge-text-picker');
-                    });
-                }
-            });
-        }
-
         var texts = offeredTexts();
 
         return {
@@ -354,7 +309,6 @@
 
             onInit: function() {
                 markTexts();
-                addTextTools();
 
                 ge.canvas.off('click.ge-text').on('click.ge-text', '.ge-content', onClick);
             },

package/src/less/grideditor.less

@@ -94,6 +94,60 @@
     display: none;
 }
 
+/* A block's html edited in place, with the codemirror-inline plugin: the
+   block is hidden behind its editor while it is open */
+.ge-canvas.ge-editing {
+    .ge-code-hidden {
+        display: none !important;
+    }
+
+    .ge-tools-drawer.ge-code-inline {
+        position: relative;
+        width: 100%;
+        margin: 0 0 @editGutter;
+        padding: 4px;
+        background: #f8f9fa;
+        border: 1px solid #ced4da;
+        border-radius: 4px;
+        cursor: auto;
+        -webkit-user-select: text;
+        user-select: text;
+
+        > .ge-code-inline-source {
+            width: 100%;
+            min-height: 120px;
+            font-family: monospace;
+            font-size: 13px;
+        }
+
+        .CodeMirror {
+            height: auto;
+            border: 1px solid #ced4da;
+            font-size: 13px;
+        }
+        .CodeMirror-scroll {
+            min-height: 120px;
+            max-height: 60vh;
+        }
+
+        > .ge-code-inline-bar {
+            display: flex;
+            gap: 4px;
+            justify-content: flex-end;
+            padding-top: 4px;
+        }
+    }
+}
+
+/* The source view in a code editor, with the codemirror plugin: where the
+   textarea was, and as wide */
+.ge-code-editor {
+    width: 100%;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    font-size: 13px;
+}
+
 /* Not editing */
 .ge-canvas {
     .ge-tools-drawer {