@richscripts/richtexteditor 2.4.0

package/headless/index.js

@@ -0,0 +1,272 @@
+/*
+ * richtexteditor/headless
+ * ------------------------------------------------------------------
+ * Framework-agnostic, bundler-friendly headless controller. Loads the editor
+ * assets, mounts a chrome-less editor, and returns a controller you drive from
+ * your own UI — the same model as headless editor frameworks.
+ *
+ *   import { createHeadlessEditor } from "@richscripts/richtexteditor/headless";
+ *   const editor = await createHeadlessEditor(el, { value: "<p>Hi</p>" });
+ *   editor.on("update", (s) => setActive(s));
+ *   editor.run("bold");
+ *
+ * The React hook (./react useRichTextEditor) and Svelte action (./svelte) are
+ * thin wrappers over this. Browser-only (needs a DOM); for SSR, render a
+ * placeholder and create the editor in an effect / onMount.
+ */
+var shared = require("../integrations/shared");
+
+var STATE_MAP = {
+    bold: { kind: "state", q: "bold" },
+    italic: { kind: "state", q: "italic" },
+    underline: { kind: "state", q: "underline" },
+    strike: { kind: "state", q: "strikethrough" },
+    strikethrough: { kind: "state", q: "strikethrough" },
+    subscript: { kind: "state", q: "subscript" },
+    superscript: { kind: "state", q: "superscript" },
+    ul: { kind: "state", q: "insertunorderedlist" },
+    ol: { kind: "state", q: "insertorderedlist" },
+    justifyleft: { kind: "state", q: "justifyleft" },
+    justifycenter: { kind: "state", q: "justifycenter" },
+    justifyright: { kind: "state", q: "justifyright" },
+    justifyfull: { kind: "state", q: "justifyfull" },
+    h1: { kind: "block", q: "h1" },
+    h2: { kind: "block", q: "h2" },
+    h3: { kind: "block", q: "h3" },
+    h4: { kind: "block", q: "h4" },
+    h5: { kind: "block", q: "h5" },
+    h6: { kind: "block", q: "h6" },
+    p: { kind: "block", q: "p" },
+    paragraph: { kind: "block", q: "p" },
+    blockquote: { kind: "block", q: "blockquote" },
+    pre: { kind: "block", q: "pre" }
+};
+
+var DEFAULT_STATE_KEYS = [
+    "bold", "italic", "underline", "strike", "ul", "ol",
+    "justifyleft", "justifycenter", "justifyright",
+    "blockquote", "h1", "h2", "h3", "p"
+];
+
+var _cssInjected = false;
+function injectHeadlessCss() {
+    if (_cssInjected || typeof document === "undefined") {
+        return;
+    }
+    _cssInjected = true;
+    var css =
+        ".rte-headless rte-toolbar,.rte-headless rte-subtoolbar,.rte-headless rte-bottom{display:none !important;}" +
+        ".rte-headless{border:0 !important;background:transparent !important;}";
+    var style = document.createElement("style");
+    style.setAttribute("data-rte-headless", "");
+    style.appendChild(document.createTextNode(css));
+    (document.head || document.documentElement).appendChild(style);
+}
+
+function HeadlessController(editor, options) {
+    this.editor = editor;
+    this._opts = options || {};
+    this._handlers = {};
+    this._scheduled = false;
+    this._destroyed = false;
+    this._wire();
+}
+
+HeadlessController.prototype._doc = function () {
+    try {
+        var ifr = this.editor && this.editor.iframe;
+        if (!ifr) {
+            return null;
+        }
+        return ifr.contentDocument || (ifr.contentWindow && ifr.contentWindow.document) || null;
+    } catch (e) {
+        return null;
+    }
+};
+
+HeadlessController.prototype._wire = function () {
+    var self = this;
+    // setTimeout (not requestAnimationFrame): rAF is paused in hidden tabs, which
+    // would latch the coalescing flag and drop every later update.
+    function emitUpdate() {
+        if (self._destroyed || self._scheduled) {
+            return;
+        }
+        self._scheduled = true;
+        setTimeout(function () {
+            self._scheduled = false;
+            if (!self._destroyed) {
+                self._emit("update", self.state());
+            }
+        }, 16);
+    }
+    this._emitUpdate = emitUpdate;
+
+    ["selectionchange", "change", "focus", "blur"].forEach(function (evt) {
+        try {
+            self.editor.attachEvent(evt, function (a, b) {
+                self._emit(evt, a, b);
+                if (evt === "selectionchange" || evt === "change") {
+                    emitUpdate();
+                }
+            });
+        } catch (e) { /* event surface differs by build */ }
+    });
+
+    var doc = this._doc();
+    if (doc && doc.addEventListener) {
+        this._docListeners = [
+            ["selectionchange", function () { emitUpdate(); }],
+            ["mouseup", function () { emitUpdate(); }],
+            ["keyup", function () { emitUpdate(); }],
+            ["input", function () { emitUpdate(); }]
+        ];
+        for (var i = 0; i < this._docListeners.length; i++) {
+            try { doc.addEventListener(this._docListeners[i][0], this._docListeners[i][1], true); } catch (e) {}
+        }
+        this._boundDoc = doc;
+    }
+};
+
+HeadlessController.prototype.on = function (name, cb) {
+    if (typeof cb === "function") {
+        (this._handlers[name] = this._handlers[name] || []).push(cb);
+    }
+    return this;
+};
+HeadlessController.prototype.off = function (name, cb) {
+    var list = this._handlers[name];
+    if (list) {
+        this._handlers[name] = cb ? list.filter(function (f) { return f !== cb; }) : [];
+    }
+    return this;
+};
+HeadlessController.prototype._emit = function (name) {
+    var list = this._handlers[name];
+    if (!list || !list.length) {
+        return;
+    }
+    var args = Array.prototype.slice.call(arguments, 1);
+    for (var i = 0; i < list.length; i++) {
+        try { list[i].apply(this, args); } catch (e) { if (typeof console !== "undefined") { console.error(e); } }
+    }
+};
+
+HeadlessController.prototype.run = function (command, value) {
+    try { this.editor.execCommand(command, value); } catch (e) { if (typeof console !== "undefined") { console.error(e); } }
+    if (this._emitUpdate) { this._emitUpdate(); }
+    return this;
+};
+HeadlessController.prototype.cmd = HeadlessController.prototype.run;
+
+HeadlessController.prototype.isActive = function (name) {
+    var spec = STATE_MAP[String(name || "").toLowerCase()];
+    var doc = this._doc();
+    if (!spec || !doc) {
+        return false;
+    }
+    try {
+        if (spec.kind === "state") {
+            return !!doc.queryCommandState(spec.q);
+        }
+        var v = String(doc.queryCommandValue("formatBlock") || "").toLowerCase().replace(/[<>]/g, "");
+        return v === spec.q;
+    } catch (e) {
+        return false;
+    }
+};
+
+HeadlessController.prototype.can = function (command) {
+    var doc = this._doc();
+    if (!doc) {
+        return false;
+    }
+    try { return !!doc.queryCommandEnabled(command); } catch (e) { return false; }
+};
+
+HeadlessController.prototype.state = function (keys) {
+    keys = keys || DEFAULT_STATE_KEYS;
+    var out = {};
+    for (var i = 0; i < keys.length; i++) {
+        out[keys[i]] = this.isActive(keys[i]);
+    }
+    out.canUndo = this.can("undo");
+    out.canRedo = this.can("redo");
+    return out;
+};
+
+HeadlessController.prototype.getHTML = function () { return this.editor.getHTMLCode ? this.editor.getHTMLCode() : ""; };
+HeadlessController.prototype.setHTML = function (html) { if (this.editor.setHTMLCode) { this.editor.setHTMLCode(html == null ? "" : html); } if (this._emitUpdate) { this._emitUpdate(); } return this; };
+HeadlessController.prototype.getText = function () { return this.editor.getText ? this.editor.getText() : ""; };
+HeadlessController.prototype.setText = function (t) { if (this.editor.setText) { this.editor.setText(t == null ? "" : t); } if (this._emitUpdate) { this._emitUpdate(); } return this; };
+HeadlessController.prototype.getMarkdown = function () { return this.editor.toMarkdown ? this.editor.toMarkdown() : ""; };
+HeadlessController.prototype.setMarkdown = function (md) { if (this.editor.fromMarkdown) { this.editor.fromMarkdown(md == null ? "" : md); } if (this._emitUpdate) { this._emitUpdate(); } return this; };
+HeadlessController.prototype.getJSON = function () { return this.editor.getJSON ? this.editor.getJSON() : null; };
+HeadlessController.prototype.getStatistics = function () { return this.editor.getStatistics ? this.editor.getStatistics() : null; };
+HeadlessController.prototype.isEmpty = function () { return String(this.getText() || "").replace(/\s+/g, "").length === 0; };
+
+HeadlessController.prototype.focus = function () { try { this.editor.focus(); } catch (e) {} return this; };
+
+HeadlessController.prototype.destroy = function () {
+    this._destroyed = true;
+    this._handlers = {};
+    if (this._boundDoc && this._docListeners) {
+        for (var i = 0; i < this._docListeners.length; i++) {
+            try { this._boundDoc.removeEventListener(this._docListeners[i][0], this._docListeners[i][1], true); } catch (e) {}
+        }
+    }
+    this._docListeners = null;
+    this._boundDoc = null;
+    try { if (this.editor.prepareDestroy) { this.editor.prepareDestroy(); } } catch (e) {}
+    return this;
+};
+
+// Build a chrome-less editor and resolve to a controller. Loads assets first.
+function createHeadlessEditor(element, options) {
+    options = options || {};
+    var loadPromise = options.autoload === false
+        ? Promise.resolve(shared.installStructuredContentBridge())
+        : shared.loadRichTextEditorAssets({ basePath: options.assetBasePath });
+
+    return loadPromise.then(function () {
+        if (typeof window === "undefined" || typeof window.RichTextEditor !== "function") {
+            throw new Error("rte-headless: RichTextEditor failed to load.");
+        }
+        var el = (typeof element === "string") ? document.querySelector(element) : element;
+        if (!el) {
+            throw new Error("rte-headless: target element not found.");
+        }
+
+        var cfg = (typeof window.RTE_CreateConfig === "function") ? window.RTE_CreateConfig() : {};
+        if (options.config) {
+            for (var k in options.config) {
+                if (Object.prototype.hasOwnProperty.call(options.config, k)) {
+                    cfg[k] = options.config[k];
+                }
+            }
+        }
+        cfg.toolbar = "headless";
+        cfg.toolbar_headless = " ";
+        cfg.toolbarMobile = "headless";
+        if (options.showStatistics !== true) {
+            cfg.showStatistics = false;
+        }
+
+        injectHeadlessCss();
+        var editor = shared.createEditor(el, cfg);
+        if (editor.container && editor.container.classList) {
+            editor.container.classList.add("rte-headless");
+        }
+        if (options.value != null && editor.setHTMLCode) {
+            editor.setHTMLCode(options.value);
+        }
+        return new HeadlessController(editor, options);
+    });
+}
+
+module.exports = {
+    createHeadlessEditor: createHeadlessEditor,
+    HeadlessController: HeadlessController,
+    STATE_MAP: STATE_MAP,
+    DEFAULT_STATE_KEYS: DEFAULT_STATE_KEYS
+};