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

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

@@ -22,6 +22,11 @@
         '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})',
         'text.no_editor': 'No hay cargado ningún editor de texto "{type}": este texto se puede mover y borrar, pero no editar',
@@ -84,6 +89,7 @@
         'confirm.delete_row': '¿Seguro que quieres borrar esta fila?',
         'confirm.delete_column': '¿Seguro que quieres borrar esta columna?',
         'confirm.delete_text': '¿Seguro que quieres borrar este texto?',
+        'confirm.delete_plain': '¿Seguro que quieres borrar este contenido?',
         'confirm.delete_element': '¿Seguro que quieres borrar este elemento?',
         'confirm.delete_container': '¿Seguro que quieres borrar este contenedor y todo su contenido?',
         'confirm.delete_tab': '¿Seguro que quieres borrar esta pestaña y todo su contenido?',
@@ -158,6 +164,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

@@ -2,8 +2,8 @@
  * CKEditor for grid-editor's content areas.
  *
  * A text editor plugin: load this file after the editor, and CKEditor 4
- * after or before it, and content_types: ['ckeditor'] edits each content area
- * with an inline CKEditor. What it can ask the editor for is the handle its
+ * after or before it, and a text of the ckeditor type is edited with an
+ * inline CKEditor. What it can ask the editor for is the handle its
  * factory is called with, described in docs/plugins.md.
  *
  *   <script src="ckeditor/ckeditor.js"></script>
@@ -11,7 +11,11 @@
  *   <script src="dist/plugins/grideditor.ckeditor.min.js"></script>
  *
  * 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.
+ * 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
+ * src/js/text/grideditor.text.js, installed once however many editors a
+ * page loads.
  */
 (function($) {
 

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

@@ -2,8 +2,8 @@
  * Summernote for grid-editor's content areas.
  *
  * A text editor plugin: load this file after the editor, and summernote
- * after or before it, and content_types: ['summernote'] edits each content
- * area with summernote in air mode. What it can ask the editor for is the
+ * after or before it, and a text of the summernote type is edited with
+ * summernote in air mode. What it can ask the editor for is the
  * handle its factory is called with, described in docs/plugins.md.
  *
  *   <script src="summernote/summernote-bs5.min.js"></script>
@@ -11,7 +11,11 @@
  *   <script src="dist/plugins/grideditor.summernote.min.js"></script>
  *
  * 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.
+ * 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
+ * src/js/text/grideditor.text.js, installed once however many editors a
+ * page loads.
  */
 (function($) {
 

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

@@ -2,8 +2,8 @@
  * tinyMCE for grid-editor's content areas.
  *
  * A text editor plugin: load this file after the editor, and tinyMCE 6
- * after or before it, and content_types: ['tinymce'] edits each content area
- * with an inline tinyMCE. What it can ask the editor for is the handle its
+ * after or before it, and a text of the tinymce type is edited with an
+ * inline tinyMCE. What it can ask the editor for is the handle its
  * factory is called with, described in docs/plugins.md.
  *
  *   <script src="tinymce/tinymce.min.js"></script>
@@ -11,7 +11,11 @@
  *   <script src="dist/plugins/grideditor.tinymce.min.js"></script>
  *
  * 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.
+ * 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
+ * src/js/text/grideditor.text.js, installed once however many editors a
+ * page loads.
  */
 (function($) {
 

package/src/js/plugins/grideditor.visibility.js

@@ -44,7 +44,7 @@ $.fn.gridEditor.utilities.visibility = function(ge) {
     }
 
     function applies(node, kind) {
-        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' ||
+        return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' || kind === 'plain' ||
             node.is('[data-ge-container]');
     }