@richscripts/richtexteditor 2.4.0

package/vue/index.js

@@ -0,0 +1,291 @@
+var vue = require("vue");
+var shared = require("../integrations/shared");
+var headless = require("../headless");
+
+function editorMethodAccessor(editorRef, name, emptyValue) {
+    return function () {
+        var ed = editorRef.value;
+        if (!ed || typeof ed[name] !== "function") {
+            return emptyValue;
+        }
+        return ed[name].apply(ed, arguments);
+    };
+}
+
+var RichTextEditorVue = vue.defineComponent({
+    name: "RichTextEditorVue",
+    inheritAttrs: false,
+    props: {
+        assetBasePath: {
+            type: String,
+            default: "/richtexteditor"
+        },
+        autoload: {
+            type: Boolean,
+            default: true
+        },
+        config: {
+            type: Object,
+            default: function () {
+                return {};
+            }
+        },
+        defaultValue: {
+            type: [String, Object],
+            default: undefined
+        },
+        modelValue: {
+            type: [String, Object],
+            default: undefined
+        },
+        tagName: {
+            type: String,
+            default: "div"
+        },
+        valueFormat: {
+            type: String,
+            default: "html"
+        }
+    },
+    emits: ["change", "error", "ready", "update:modelValue"],
+    setup: function (props, context) {
+        var hostRef = vue.ref(null);
+        var editorRef = vue.ref(null);
+        var changeHandler = null;
+
+        function syncEditor(nextValue) {
+            if (!editorRef.value) {
+                return;
+            }
+
+            var nextHtml = shared.normalizeStructuredContent(nextValue);
+            if (editorRef.value.getHTMLCode() !== nextHtml) {
+                shared.setEditorValue(editorRef.value, nextValue, props.valueFormat);
+            }
+        }
+
+        vue.onMounted(async function () {
+            try {
+                if (props.autoload === false) {
+                    shared.installStructuredContentBridge();
+                } else {
+                    await shared.loadRichTextEditorAssets({ basePath: props.assetBasePath });
+                }
+
+                if (!hostRef.value) {
+                    return;
+                }
+
+                var editor = shared.createEditor(hostRef.value, props.config || {});
+                editorRef.value = editor;
+
+                var initialValue = props.modelValue !== undefined ? props.modelValue : props.defaultValue;
+                if (initialValue !== undefined) {
+                    shared.setEditorValue(editor, initialValue, props.valueFormat);
+                }
+
+                changeHandler = function () {
+                    var nextValue = shared.getEditorValue(editor, props.valueFormat);
+                    context.emit("update:modelValue", nextValue);
+                    context.emit("change", nextValue, editor);
+                };
+
+                editor.attachEvent("change", changeHandler);
+                context.emit("ready", editor);
+            } catch (error) {
+                context.emit("error", error);
+            }
+        });
+
+        vue.watch(function () {
+            return props.modelValue;
+        }, function (nextValue) {
+            if (props.modelValue === undefined) {
+                return;
+            }
+
+            syncEditor(nextValue);
+        }, { deep: true });
+
+        vue.watch(function () {
+            return props.valueFormat;
+        }, function () {
+            if (props.modelValue === undefined) {
+                return;
+            }
+
+            syncEditor(props.modelValue);
+        });
+
+        vue.onBeforeUnmount(function () {
+            var ed = editorRef.value;
+            if (ed) {
+                if (changeHandler && typeof ed.detachEvent === "function") {
+                    ed.detachEvent("change", changeHandler);
+                }
+                if (typeof ed.destroy === "function") {
+                    try { ed.destroy(); } catch (e) { /* ignore */ }
+                }
+            }
+
+            if (hostRef.value) {
+                hostRef.value.innerHTML = "";
+            }
+
+            editorRef.value = null;
+        });
+
+        function pluginAccessor(name) {
+            return function () {
+                var ed = editorRef.value;
+                if (!ed) return null;
+                return ed[name];
+            };
+        }
+
+        context.expose({
+            getEditor: function () {
+                return editorRef.value;
+            },
+            focus: function () {
+                if (editorRef.value) {
+                    editorRef.value.focus();
+                }
+            },
+            getHTMLCode: function () {
+                return editorRef.value ? editorRef.value.getHTMLCode() : "";
+            },
+            setHTMLCode: function (value) {
+                if (editorRef.value) {
+                    editorRef.value.setHTMLCode(value || "");
+                }
+            },
+            getJSON: function () {
+                return editorRef.value ? editorRef.value.getJSON() : null;
+            },
+            setJSON: function (value) {
+                if (editorRef.value) {
+                    editorRef.value.setJSON(value);
+                }
+            },
+            getTextStatistics: editorMethodAccessor(editorRef, "getTextStatistics", null),
+            getSelectionStatistics: editorMethodAccessor(editorRef, "getSelectionStatistics", null),
+            getDocumentMetrics: editorMethodAccessor(editorRef, "getDocumentMetrics", null),
+            getDocumentPageSetup: editorMethodAccessor(editorRef, "getDocumentPageSetup", null),
+            setDocumentPageSetup: editorMethodAccessor(editorRef, "setDocumentPageSetup", null),
+            getDocumentOutline: function () {
+                if (!editorRef.value) {
+                    return [];
+                }
+                return shared.getDocumentOutline(editorRef.value.getJSON());
+            },
+            getFootnotes: function () {
+                if (!editorRef.value) {
+                    return [];
+                }
+                return shared.getFootnotes(editorRef.value.getJSON());
+            },
+            getTableOfContents: function (options) {
+                if (!editorRef.value) {
+                    return [];
+                }
+                return shared.getTableOfContents(editorRef.value.getJSON(), options);
+            },
+            syncTableOfContents: function (options) {
+                if (!editorRef.value) {
+                    return null;
+                }
+                var documentModel = shared.syncTableOfContents(editorRef.value.getJSON(), options);
+                editorRef.value.setJSON(documentModel);
+                return documentModel;
+            },
+            auditAccessibility: function () {
+                if (!editorRef.value) {
+                    return null;
+                }
+                return shared.auditAccessibility(editorRef.value.getJSON());
+            },
+            auditLinks: function (options) {
+                if (!editorRef.value) {
+                    return null;
+                }
+                return shared.auditLinks(editorRef.value.getJSON(), options);
+            },
+            // v2.0 plugin convenience accessors. Each returns the underlying
+            // namespace, or `undefined` when the plugin isn't bundled.
+            getAiToolkit: pluginAccessor("aiToolkit"),
+            getDictation: pluginAccessor("dictation"),
+            getRevisionHistory: pluginAccessor("revisionHistory"),
+            getCollab: pluginAccessor("collab"),
+            getSlashCommands: pluginAccessor("slashCommands"),
+            getMentions: pluginAccessor("mentions"),
+            getComments: pluginAccessor("comments"),
+            getReviewLedger: pluginAccessor("reviewLedger")
+        });
+
+        return function () {
+            return vue.h(props.tagName, Object.assign({}, context.attrs, { ref: hostRef }));
+        };
+    }
+});
+
+// ---- Headless composable: bring-your-own-UI, Tiptap-style ----
+// const { mountRef, editor, state } = useRichTextEditor({ value: "<p>Hi</p>" });
+// <template>
+//   <button @mousedown.prevent="state.bold && 0; editor && editor.run('bold')"
+//           :class="{ 'is-active': state.bold }">B</button>
+//   <div ref="mountRef"></div>
+// </template>
+function useRichTextEditor(options) {
+    options = options || {};
+    var mountRef = vue.ref(null);
+    var editor = vue.shallowRef(null);
+    var state = vue.ref({});
+    var controller = null;
+
+    vue.onMounted(function () {
+        headless.createHeadlessEditor(mountRef.value, options)
+            .then(function (ctl) {
+                controller = ctl;
+                editor.value = ctl;
+                state.value = ctl.state();
+                ctl.on("update", function (snapshot) { state.value = snapshot; });
+                if (options.onReady) { options.onReady(ctl); }
+            })
+            .catch(function (error) {
+                if (options.onError) { options.onError(error); }
+            });
+    });
+
+    vue.onBeforeUnmount(function () {
+        if (controller) { controller.destroy(); }
+        controller = null;
+        editor.value = null;
+    });
+
+    return { mountRef: mountRef, editor: editor, state: state };
+}
+
+module.exports = {
+    auditAccessibility: shared.auditAccessibility,
+    auditLinks: shared.auditLinks,
+    createStructuredDocument: shared.createStructuredDocument,
+    RichTextEditor: RichTextEditorVue,
+    RichTextEditorVue: RichTextEditorVue,
+    useRichTextEditor: useRichTextEditor,
+    createHeadlessEditor: headless.createHeadlessEditor,
+    createStructuredContent: shared.createStructuredContent,
+    fromMarkdown: shared.fromMarkdown,
+    getDocumentPageSetup: shared.getDocumentPageSetup,
+    getDocumentMetrics: shared.getDocumentMetrics,
+    getDocumentOutline: shared.getDocumentOutline,
+    getFootnotes: shared.getFootnotes,
+    getTableOfContents: shared.getTableOfContents,
+    getTextStatistics: shared.getTextStatistics,
+    loadRichTextEditorAssets: shared.loadRichTextEditorAssets,
+    renderHTML: shared.renderHTML,
+    setDocumentPageSetup: shared.setDocumentPageSetup,
+    syncTableOfContents: shared.syncTableOfContents,
+    toMarkdown: shared.toMarkdown,
+    validateStructuredContent: shared.validateStructuredContent
+};