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

package/src/js/plugins/grideditor.clipboard.js

@@ -8,7 +8,7 @@
  * What it can ask the editor for is the handle its factory is called with,
  * described in docs/plugins.md.
  *
- *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.clipboard.min.js"></script>
  *
  * What is copied is kept in localStorage, so it survives a reload and can be
@@ -18,9 +18,10 @@
  * A paste is an add like any other - before-add-* and after-add-*, with
  * `source: 'paste'` - so a host can turn one away.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'tool.copy': 'Copy',
     'tool.paste': 'Paste',
     'clipboard.paste_row': 'Paste row',
@@ -33,7 +34,6 @@ var VERSION = 1;
 
 /** Where nothing can be stored, what was copied lives here, for this page. */
 var memory = null;
-var editors = 0;
 
 /**
  * What each drawer takes when something is pasted into it, by the kind of the
@@ -83,18 +83,23 @@ function write(clip) {
         memory = clip;
     }
 
-    $(document).trigger(CHANGE);
+    announce();
+}
+
+/** Every editor on the page looks at the clipboard again. */
+function announce() {
+    document.dispatchEvent(new CustomEvent(CHANGE));
 }
 
 // Another tab copied something: every editor here looks again
-$(window).on('storage', function(e) {
-    if (e.originalEvent && e.originalEvent.key === STORAGE_ITEM) { $(document).trigger(CHANGE); }
+window.addEventListener('storage', function(e) {
+    if (e.key === STORAGE_ITEM) { announce(); }
 });
 
-$.fn.gridEditor.features.clipboard = function(ge) {
+GridEditor.features.clipboard = function(ge) {
 
-    var namespace = '.ge-clipboard-' + (++editors);
     var shown = null; // What the toolbar's paste buttons stand for
+    var listening = false; // Whether refresh is on the document's change event
 
     function used(name) {
         return !ge.settings.plugins || ge.settings.plugins.indexOf(name) !== -1;
@@ -103,10 +108,10 @@ $.fn.gridEditor.features.clipboard = function(ge) {
     /** A category this editor can take: the plugin that makes it is here. */
     function available(clip) {
         if (clip.category === 'container') {
-            return !!$.fn.gridEditor.containers[clip.kind] && used(clip.kind);
+            return !!GridEditor.containers[clip.kind] && used(clip.kind);
         }
-        if (clip.category === 'section') { return !!$.fn.gridEditor.features.sections && used('sections'); }
-        if (clip.category === 'element') { return !!$.fn.gridEditor.features.elements && used('elements'); }
+        if (clip.category === 'section') { return !!GridEditor.features.sections && used('sections'); }
+        if (clip.category === 'element') { return !!GridEditor.features.elements && used('elements'); }
 
         return true;
     }
@@ -116,7 +121,7 @@ $.fn.gridEditor.features.clipboard = function(ge) {
     }
 
     function categoryOf(kind) {
-        if ($.fn.gridEditor.containers[kind]) { return 'container'; }
+        if (GridEditor.containers[kind]) { return 'container'; }
 
         return ['row', 'column', 'section', 'text', 'element'].indexOf(kind) !== -1 ? kind : null;
     }
@@ -129,10 +134,15 @@ $.fn.gridEditor.features.clipboard = function(ge) {
 
         // The canvas came back with new drawers: the one to flash is the
         // node's new copy tool
-        var tool = ge.drawerOf(node).find('> .ge-copy');
-        tool.addClass('ge-copied').find('i').attr('class', 'bi bi-check2');
+        var tool = dom.child(ge.drawerOf(node), '.ge-copy');
+        if (!tool) { return; }
+
+        var icon = dom.one(tool, 'i');
+        dom.addClass(tool, 'ge-copied');
+        if (icon) { icon.setAttribute('class', 'bi bi-check2'); }
         setTimeout(function() {
-            tool.removeClass('ge-copied').find('i').attr('class', 'bi bi-copy');
+            dom.removeClass(tool, 'ge-copied');
+            if (icon) { icon.setAttribute('class', 'bi bi-copy'); }
         }, 1200);
     }
 
@@ -148,9 +158,12 @@ $.fn.gridEditor.features.clipboard = function(ge) {
      * them: two copies of a tab strip pointing at one set of panes is a tab
      * strip that opens the other copy's tabs. An id the page does not have
      * is kept, so pasting into another page changes nothing.
+     *
+     * Parsed the way innerHTML parses, so a <script> in what was copied is
+     * markup, pasted like the rest, and does not run in the editor.
      */
     function fresh(html) {
-        var node = $($.parseHTML(html.trim(), document, true)).first();
+        var node = dom.create(html);
         var renamed = {};
         var taken = function(id) {
             return !!document.getElementById(id) || Object.keys(renamed).some(function(old) {
@@ -158,8 +171,8 @@ $.fn.gridEditor.features.clipboard = function(ge) {
             });
         };
 
-        node.find('[id]').addBack('[id]').each(function() {
-            var id = this.id;
+        dom.selfAndAll(node, '[id]').forEach(function(element) {
+            var id = element.id;
             if (!document.getElementById(id)) { return; }
 
             var generated = GENERATED_ID.exec(id);
@@ -174,14 +187,12 @@ $.fn.gridEditor.features.clipboard = function(ge) {
             }
 
             renamed[id] = next;
-            this.id = next;
+            element.id = next;
         });
 
         if (!Object.keys(renamed).length) { return node; }
 
-        node.find('*').addBack().each(function() {
-            var element = this;
-
+        dom.selfAndAll(node, '*').forEach(function(element) {
             REFERENCES.forEach(function(name) {
                 var value = element.getAttribute(name);
                 if (value === null) { return; }
@@ -205,13 +216,13 @@ $.fn.gridEditor.features.clipboard = function(ge) {
     function refresh() {
         var clip = read();
 
-        ge.canvas.find('.ge-paste').each(function() {
-            $(this).toggle(fits(clip, $(this).attr('data-ge-paste').split(' ')));
+        dom.all(ge.canvas, '.ge-paste').forEach(function(tool) {
+            dom.toggle(tool, fits(clip, tool.getAttribute('data-ge-paste').split(' ')));
         });
 
-        ge.toolbarItems('clipboard').each(function() {
-            var item = TOOLBAR[parseInt($(this).attr('data-ge-item'), 10)];
-            $(this).toggle(fits(clip, [item.kind]));
+        ge.toolbarItems('clipboard').forEach(function(button) {
+            var item = TOOLBAR[parseInt(button.getAttribute('data-ge-item'), 10)];
+            dom.toggle(button, fits(clip, [item.kind]));
         });
 
         shown = clip;
@@ -221,7 +232,7 @@ $.fn.gridEditor.features.clipboard = function(ge) {
         { kind: 'row', labelKey: 'clipboard.paste_row' },
         { kind: 'section', labelKey: 'clipboard.paste_section' },
     ].map(function(item) {
-        return $.extend(item, {
+        return Object.assign(item, {
             iconClass: 'bi bi-clipboard-plus',
             // On the right, as an icon: pasting is not one of the things
             // the add buttons make
@@ -244,25 +255,26 @@ $.fn.gridEditor.features.clipboard = function(ge) {
             var categories = TARGETS[kind];
             if (!categories) { return; }
 
-            ge.createTool(drawer, ge.t('tool.paste'), 'ge-paste', 'bi bi-clipboard-plus', function() {
+            var tool = ge.createTool(drawer, ge.t('tool.paste'), 'ge-paste', 'bi bi-clipboard-plus', function() {
                 paste(node, categories);
             });
-            drawer.children('.ge-paste').last()
-                .attr('data-ge-paste', categories.join(' '))
-                .toggle(fits(read(), categories));
+            tool.setAttribute('data-ge-paste', categories.join(' '));
+            dom.toggle(tool, fits(read(), categories));
         },
 
         toolbar: TOOLBAR,
 
         onInit: function() {
             refresh();
-            $(document).off(CHANGE + namespace).on(CHANGE + namespace, refresh);
+            if (!listening) {
+                document.addEventListener(CHANGE, refresh);
+                listening = true;
+            }
         },
 
         onDeinit: function() {
-            $(document).off(CHANGE + namespace);
+            document.removeEventListener(CHANGE, refresh);
+            listening = false;
         },
     };
 };
-
-})(jQuery);

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

@@ -16,15 +16,16 @@
  *   <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/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($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'tool.edit_html': 'Edit html',
     'codemirror.apply': 'Apply',
     'codemirror.cancel': 'Cancel',
@@ -33,14 +34,14 @@ $.extend($.fn.gridEditor.locales.en, {
 /** 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) {
+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({
+        return Object.assign({
             mode: 'htmlmixed',
             lineNumbers: true,
             lineWrapping: true,
@@ -53,29 +54,29 @@ $.fn.gridEditor.features['codemirror-inline'] = function(ge) {
 
     /** 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;
+        var textBlock = node.parentElement;
+        return dom.hasClass(textBlock, 'ge-text-block') ? textBlock : node;
     }
 
     function entryOf(node) {
-        return open.filter(function(entry) { return entry.node[0] === node[0]; })[0] || null;
+        return open.filter(function(entry) { return entry.node === node; })[0] || null;
     }
 
     function editable(node, kind) {
-        return KINDS.indexOf(kind) !== -1 || node.is('[data-ge-container]');
+        return KINDS.indexOf(kind) !== -1 || dom.is(node, '[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);
+        var anchor = dom.addClass(anchorOf(entry.node), 'ge-code-hidden');
+        dom.insertAfter(entry.wrapper, 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');
+        entry.wrapper.remove();
+        dom.removeClass(anchorOf(entry.node), 'ge-code-hidden');
+        dom.removeClass(entry.node, 'ge-code-hidden');
     }
 
     function close(entry) {
@@ -94,30 +95,33 @@ $.fn.gridEditor.features['codemirror-inline'] = function(ge) {
             // 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" />'),
+            wrapper: dom.element('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);
+        entry.textarea = entry.wrapper.appendChild(dom.element('textarea', { 'class': 'ge-code-inline-source' }));
+        entry.textarea.value = entry.from;
+
+        var bar = entry.wrapper.appendChild(dom.element('div', { 'class': 'ge-code-inline-bar' }));
+        var applyButton = bar.appendChild(dom.element('button', {
+            type: 'button',
+            'class': 'btn btn-sm btn-primary ge-code-apply',
+        }, ge.t('codemirror.apply')));
+        applyButton.addEventListener('click', function() { apply(entry); });
+        var cancelButton = bar.appendChild(dom.element('button', {
+            type: 'button',
+            'class': 'btn btn-sm btn-outline-secondary ge-code-cancel',
+        }, ge.t('codemirror.cancel')));
+        cancelButton.addEventListener('click', function() { close(entry); });
 
         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 = window.CodeMirror.fromTextArea(entry.textarea, options());
+            dom.addClass(entry.editor.getWrapperElement(), 'ge-code-editor');
             entry.editor.focus();
         } else {
-            entry.textarea.trigger('focus');
+            entry.textarea.focus();
         }
     }
 
@@ -127,7 +131,7 @@ $.fn.gridEditor.features['codemirror-inline'] = function(ge) {
      * 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 to = entry.editor ? entry.editor.getValue() : entry.textarea.value;
         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
@@ -135,15 +139,26 @@ $.fn.gridEditor.features['codemirror-inline'] = function(ge) {
 
         close(entry);
 
-        var instance = ge.canvas.data('grideditor');
+        var instance = GridEditor.get(ge.canvas);
         instance.deinit();
 
-        var made = $('<div />').html(to).contents();
-        entry.node.replaceWith(made);
+        // Parsed as innerHTML parses: a <script> written here is markup,
+        // and does not run in the editor
+        var made = dom.parse(to);
+        var parent = entry.node.parentElement;
+        entry.node.replaceWith.apply(entry.node, made);
 
         instance.init();
 
-        ge.emit('after-edit-html', ge.payloadFor(entry.kind, made.filter('*'), {
+        // The node is the first element written, or none when only text was;
+        // `nodes` is every element written, which may be several
+        var written = made.filter(function(node) { return node.nodeType === 1; });
+        var first = written[0] || null;
+
+        ge.emit('after-edit-html', ge.payloadFor(entry.kind, first || entry.node, {
+            node: first,
+            nodes: written,
+            parent: first ? first.parentElement : parent,
             source: 'tool',
             from: entry.from,
             to: to,
@@ -174,7 +189,7 @@ $.fn.gridEditor.features['codemirror-inline'] = function(ge) {
 
         onInit: function() {
             open.slice().forEach(function(entry) {
-                if (!$.contains(document.documentElement, entry.node[0])) {
+                if (!dom.attached(entry.node)) {
                     if (entry.editor) { entry.editor.toTextArea(); }
                     entry.wrapper.remove();
                     open.splice(open.indexOf(entry), 1);
@@ -186,5 +201,3 @@ $.fn.gridEditor.features['codemirror-inline'] = function(ge) {
         },
     };
 };
-
-})(jQuery);

package/src/js/plugins/grideditor.codemirror.js

@@ -13,7 +13,7 @@
  *   <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/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,
@@ -21,13 +21,14 @@
  * CodeMirror on the page the source view is the textarea, as before, and
  * the console says why.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(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) {
+GridEditor.features.codemirror = function(ge) {
 
     var editor = null;
     var warned = false;
@@ -35,7 +36,7 @@ $.fn.gridEditor.features.codemirror = function(ge) {
     function options() {
         var own = (ge.settings.codemirror && ge.settings.codemirror.config) || {};
 
-        return $.extend({
+        return Object.assign({
             mode: 'htmlmixed',
             lineNumbers: true,
             lineWrapping: true,
@@ -56,10 +57,10 @@ $.fn.gridEditor.features.codemirror = function(ge) {
                 return;
             }
 
-            var height = textarea.height();
+            var height = dom.outerHeight(textarea);
 
-            editor = window.CodeMirror.fromTextArea(textarea[0], options());
-            $(editor.getWrapperElement()).addClass('ge-code-editor');
+            editor = window.CodeMirror.fromTextArea(textarea, options());
+            dom.addClass(editor.getWrapperElement(), 'ge-code-editor');
             editor.setSize(null, height);
             editor.focus();
         },
@@ -75,5 +76,3 @@ $.fn.gridEditor.features.codemirror = function(ge) {
         },
     };
 };
-
-})(jQuery);

package/src/js/plugins/grideditor.elements.js

@@ -6,16 +6,17 @@
  * beside the texts, instead of rich text. What it can ask the editor for is
  * the handle its factory is called with, described in docs/plugins.md.
  *
- *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.elements.min.js"></script>
  *
  * Up to 5.x an element lived inside a content area, among the text. Markup
  * saved that way still loads: the editor takes each element out of the text
  * it sits in, which is what `cuts` is for.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'tool.delete_element': 'Remove element',
     'tool.element_info': 'Element: {name}',
     'confirm.delete_element': 'Delete element?',
@@ -24,47 +25,49 @@ $.extend($.fn.gridEditor.locales.en, {
 /** A column's children that are something else than an element, whatever elements.auto says. */
 var NOT_ELEMENTS = '.row, .ge-content, .ge-text-block, [data-ge-container], .ge-tools-drawer, .ge-resize-handle';
 
-$.fn.gridEditor.features.elements = function(ge) {
+GridEditor.features.elements = function(ge) {
 
     var warnedIntoText = false;
 
     function elementsEnabled() {
         if (ge.settings.elements.enabled !== 'auto') { return !!ge.settings.elements.enabled; }
 
-        return ge.settings.elements.auto || ge.canvas.find(ge.settings.elements.selector).length > 0;
+        return ge.settings.elements.auto || !!ge.canvas.querySelector(ge.settings.elements.selector);
     }
 
     /** Whether a child of a column is an element. */
     function isElement(node) {
         return ge.settings.elements.auto
-            ? !node.is(NOT_ELEMENTS)
-            : node.is(ge.settings.elements.selector);
+            ? !node.matches(NOT_ELEMENTS)
+            : node.matches(ge.settings.elements.selector);
     }
 
     function markElements() {
         if (!elementsEnabled()) { return; }
 
-        ge.canvas.find('.column').children().each(function() {
-            var element = $(this);
-            if (!element.hasClass('ge-element') && !isElement(element)) { return; }
+        dom.all(ge.canvas, '.column').forEach(function(column) {
+            dom.children(column).forEach(function(element) {
+                if (!dom.hasClass(element, 'ge-element') && !isElement(element)) { return; }
 
-            element.addClass('ge-element');
-            if (!element.find('> .ge-tools-drawer').length) { createElementControls(element); }
+                dom.addClass(element, 'ge-element');
+                if (!dom.child(element, '.ge-tools-drawer')) { createElementControls(element); }
+            });
         });
     }
 
     function unmarkElements() {
-        ge.canvas.find('.ge-element').each(function() {
-            var element = $(this).removeClass('ge-element');
+        dom.all(ge.canvas, '.ge-element').forEach(function(element) {
+            dom.removeClass(element, 'ge-element');
 
             // A host element that had no class of its own should not come
             // back from getHtml carrying an empty one
-            if (!element.attr('class')) { element.removeAttr('class'); }
+            dom.dropEmptyClass(element);
         });
     }
 
     function createElementControls(element) {
-        var drawer = $('<div class="ge-tools-drawer ge-element-drawer" />').prependTo(element);
+        var drawer = dom.element('div', { 'class': 'ge-tools-drawer ge-element-drawer' });
+        element.insertBefore(drawer, element.firstChild);
 
         ge.createMoveTool(drawer);
         ge.createTool(drawer, ge.t('tool.element_info', { name: elementName(element) }),
@@ -78,18 +81,18 @@ $.fn.gridEditor.features.elements = function(ge) {
 
         ge.createTool(drawer, ge.t('tool.delete_element'), 'ge-delete-element', 'bi bi-trash', function() {
             ge.deleteNode('element', element, ge.t('confirm.delete_element'), function(removed) {
-                element.animate({ opacity: 'hide', height: 'hide' }, 300, removed);
+                dom.shrinkAway(element, 300, removed);
             });
         });
     }
 
     function elementName(element) {
-        var type = element.attr('data-ge-element');
-        var label = element.attr('data-ge-label');
+        var type = element.getAttribute('data-ge-element');
+        var label = element.getAttribute('data-ge-label');
 
         if (label && type) { return label + ' (' + type + ')'; }
 
-        return label || type || element[0].tagName.toLowerCase();
+        return label || type || element.tagName.toLowerCase();
     }
 
     /**
@@ -99,11 +102,11 @@ $.fn.gridEditor.features.elements = function(ge) {
      * prependTo - with a word to the host.
      */
     function placementBesideText(options) {
-        var placed = $.extend({}, options);
+        var placed = Object.assign({}, options);
 
         [['appendTo', 'insertAfter'], ['prependTo', 'insertBefore']].forEach(function(pair) {
-            var target = options[pair[0]] !== undefined ? $(options[pair[0]]) : null;
-            if (!target || !target.is('.ge-content')) { return; }
+            var target = options[pair[0]] !== undefined ? nodeFrom(options[pair[0]]) : null;
+            if (!target || !target.matches('.ge-content')) { return; }
 
             if (!warnedIntoText) {
                 warnedIntoText = true;
@@ -112,21 +115,44 @@ $.fn.gridEditor.features.elements = function(ge) {
             }
 
             delete placed[pair[0]];
-            placed[pair[1]] = target.parent('.ge-text-block').length ? target.parent() : target;
+            placed[pair[1]] = dom.hasClass(target.parentElement, 'ge-text-block') ? target.parentElement : target;
         });
 
         return placed;
     }
 
+    /** A place a caller named: an element, or the first one a selector matches. */
+    function nodeFrom(node) {
+        if (typeof node === 'string') { return document.querySelector(node); }
+        return node && node.nodeType === 1 ? node : null;
+    }
+
+    /**
+     * What the element holds: html, which is parsed as innerHTML parses so
+     * no <script> in it runs, or a node, or a list of nodes.
+     */
+    function fill(element, content) {
+        if (content === undefined || content === null) { return; }
+
+        if (typeof content === 'string') {
+            dom.parse(content).forEach(function(node) { element.appendChild(node); });
+        } else if (content.nodeType) {
+            element.appendChild(content);
+        } else if (typeof content.length === 'number') {
+            Array.prototype.slice.call(content).forEach(function(node) { element.appendChild(node); });
+        }
+    }
+
     function apiCreateElement(content, options) {
         options = options || {};
 
-        var element = $('<div class="ge-element" />')
-            .attr('data-ge-element', options.type || 'element')
-            .append(content)
-        ;
+        var element = dom.element('div', {
+            'class': 'ge-element',
+            'data-ge-element': options.type || 'element',
+        });
+        fill(element, content);
         if (options.label !== undefined) {
-            element.attr('data-ge-label', options.label);
+            element.setAttribute('data-ge-label', options.label);
         }
 
         return ge.place(element, 'element', placementBesideText(options));
@@ -139,7 +165,7 @@ $.fn.gridEditor.features.elements = function(ge) {
 
         /** A node this plugin marked is an element, whatever else it is. */
         kindOf: function(node) {
-            return node.hasClass('ge-element') ? 'element' : null;
+            return dom.hasClass(node, 'ge-element') ? 'element' : null;
         },
 
         /**
@@ -156,7 +182,7 @@ $.fn.gridEditor.features.elements = function(ge) {
         // containers - and only the columns
         blocks: '.ge-element',
         accepts: function(region, node) {
-            if (node.hasClass('ge-element')) { return region.is('.column'); }
+            if (dom.hasClass(node, 'ge-element')) { return dom.is(region, '.column'); }
 
             return true;
         },
@@ -165,5 +191,3 @@ $.fn.gridEditor.features.elements = function(ge) {
         onDeinit: unmarkElements,
     };
 };
-
-})(jQuery);