@domternal/vue 0.6.1 → 0.6.2

package/dist/index.d.ts

@@ -356,21 +356,21 @@ declare const DomternalEditor: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     "onUpdate:modelValue"?: (_value: Content) => any;
 }>, {
-    onBlur: (props: {
+    onCreate: (editor: _domternal_core.Editor) => void;
+    onUpdate: (props: {
         editor: _domternal_core.Editor;
-        event: FocusEvent;
     }) => void;
     onFocus: (props: {
         editor: _domternal_core.Editor;
         event: FocusEvent;
     }) => void;
-    class: string;
-    onCreate: (editor: _domternal_core.Editor) => void;
-    onUpdate: (props: {
+    onBlur: (props: {
         editor: _domternal_core.Editor;
+        event: FocusEvent;
     }) => void;
     onDestroy: () => void;
     content: Content;
+    class: string;
     onSelectionChange: (props: {
         editor: _domternal_core.Editor;
     }) => void;
@@ -459,8 +459,8 @@ declare const DomternalToolbar: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{}>, {
     editor: Editor;
-    icons: IconSet;
     layout: ToolbarLayoutEntry[];
+    icons: IconSet;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 interface DomternalBubbleMenuProps {
@@ -534,6 +534,8 @@ declare const DomternalBubbleMenu: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{}>, {
     editor: Editor;
+    placement: "top" | "bottom";
+    items: string[];
     shouldShow: (props: {
         editor: Editor;
         view: prosemirror_view.EditorView;
@@ -541,10 +543,8 @@ declare const DomternalBubbleMenu: vue.DefineComponent<vue.ExtractPropTypes<{
         from: number;
         to: number;
     }) => boolean;
-    placement: "top" | "bottom";
     offset: number;
     updateDelay: number;
-    items: string[];
     contexts: Record<string, true | string[] | null>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, watchEffect, h, watch, computed, Fragment, onMounted, onScopeDispose, inject, shallowRef, provide, getCurrentInstance, markRaw, customRef, shallowReactive, render } from 'vue';
-import { PluginKey, ToolbarController, createFloatingMenuPlugin, Editor, Document, Paragraph, Text, BaseKeymap, History, positionFloatingOnce, defaultIcons, createBubbleMenuPlugin } from '@domternal/core';
+import { defineComponent, h, computed, Fragment, ref, onMounted, watch, onScopeDispose, watchEffect, inject, shallowRef, provide, getCurrentInstance, customRef, markRaw, shallowReactive, render } from 'vue';
+import { PluginKey, ToolbarController, createFloatingMenuPlugin, positionFloatingOnce, defaultIcons, createBubbleMenuPlugin, Editor, Document, Paragraph, Text, BaseKeymap, History } from '@domternal/core';
 export { Editor, generateHTML, generateJSON, generateText } from '@domternal/core';
 
 // src/useEditor.ts
@@ -259,189 +259,6 @@ function useCurrentEditor() {
   const editor = inject(EDITOR_KEY, shallowRef(null));
   return { editor };
 }
-var Domternal = defineComponent({
-  name: "Domternal",
-  props: {
-    extensions: { type: Array, default: void 0 },
-    content: { type: [String, Object], default: "" },
-    editable: { type: Boolean, default: true },
-    autofocus: { type: [Boolean, String, Number], default: false },
-    outputFormat: { type: String, default: "html" },
-    immediatelyRender: { type: Boolean, default: false },
-    onCreate: { type: Function, default: void 0 },
-    onUpdate: { type: Function, default: void 0 },
-    onSelectionChange: { type: Function, default: void 0 },
-    onFocus: { type: Function, default: void 0 },
-    onBlur: { type: Function, default: void 0 },
-    onDestroy: { type: Function, default: void 0 }
-  },
-  setup(props, { slots }) {
-    const { editor } = useEditor({
-      ...props.extensions && { extensions: props.extensions },
-      content: props.content,
-      editable: props.editable,
-      autofocus: props.autofocus,
-      outputFormat: props.outputFormat,
-      immediatelyRender: props.immediatelyRender,
-      ...props.onCreate && { onCreate: props.onCreate },
-      ...props.onUpdate && { onUpdate: props.onUpdate },
-      ...props.onSelectionChange && { onSelectionChange: props.onSelectionChange },
-      ...props.onFocus && { onFocus: props.onFocus },
-      ...props.onBlur && { onBlur: props.onBlur },
-      ...props.onDestroy && { onDestroy: props.onDestroy }
-    });
-    provideEditor(editor);
-    return () => slots["default"]?.();
-  }
-});
-var DomternalContent = defineComponent({
-  name: "DomternalContent",
-  props: {
-    class: { type: String, default: void 0 }
-  },
-  setup(props) {
-    const { editor } = useCurrentEditor();
-    const containerRef = ref();
-    watchEffect(() => {
-      const container = containerRef.value;
-      const ed = editor.value;
-      if (!container || !ed || ed.isDestroyed) return;
-      const editorDom = ed.view.dom;
-      if (editorDom.parentElement !== container) {
-        container.appendChild(editorDom);
-      }
-    });
-    return () => {
-      const classes = props.class ? `dm-editor ${props.class}` : "dm-editor";
-      return h("div", { class: classes, "data-dm-editor-ui": "" }, [h("div", { ref: containerRef })]);
-    };
-  }
-});
-var DomternalLoading = defineComponent({
-  name: "DomternalLoading",
-  setup(_props, { slots }) {
-    const { editor } = useCurrentEditor();
-    return () => editor.value ? null : slots["default"]?.();
-  }
-});
-Domternal.Content = DomternalContent;
-Domternal.Loading = DomternalLoading;
-var DomternalEditor = defineComponent({
-  name: "DomternalEditor",
-  props: {
-    extensions: { type: Array, default: void 0 },
-    content: { type: [String, Object], default: void 0 },
-    editable: { type: Boolean, default: true },
-    autofocus: { type: [Boolean, String, Number], default: false },
-    immediatelyRender: { type: Boolean, default: false },
-    outputFormat: { type: String, default: "html" },
-    modelValue: { type: [String, Object], default: void 0 },
-    class: { type: String, default: void 0 },
-    onCreate: { type: Function, default: void 0 },
-    onUpdate: { type: Function, default: void 0 },
-    onSelectionChange: { type: Function, default: void 0 },
-    onFocus: { type: Function, default: void 0 },
-    onBlur: { type: Function, default: void 0 },
-    onDestroy: { type: Function, default: void 0 }
-  },
-  emits: {
-    "update:modelValue": (_value) => true
-  },
-  setup(props, { slots, emit, expose }) {
-    const { editor, editorRef } = useEditor({
-      ...props.extensions && { extensions: props.extensions },
-      content: props.modelValue ?? props.content ?? "",
-      editable: props.editable,
-      autofocus: props.autofocus,
-      immediatelyRender: props.immediatelyRender,
-      outputFormat: props.outputFormat,
-      ...props.onCreate && { onCreate: props.onCreate },
-      ...props.onUpdate && { onUpdate: props.onUpdate },
-      ...props.onSelectionChange && { onSelectionChange: props.onSelectionChange },
-      ...props.onFocus && { onFocus: props.onFocus },
-      ...props.onBlur && { onBlur: props.onBlur },
-      ...props.onDestroy && { onDestroy: props.onDestroy }
-    });
-    const state = useEditorState(editor);
-    expose({
-      editor,
-      htmlContent: state.htmlContent,
-      jsonContent: state.jsonContent,
-      isEmpty: state.isEmpty,
-      isFocused: state.isFocused
-    });
-    provideEditor(editor);
-    const prevModelValue = ref(props.modelValue);
-    watch(
-      () => props.modelValue,
-      (newValue) => {
-        if (newValue === void 0) return;
-        const ed = editor.value;
-        if (!ed || ed.isDestroyed) return;
-        if (newValue === prevModelValue.value) return;
-        prevModelValue.value = newValue;
-        if (props.outputFormat === "html") {
-          if (newValue !== ed.getHTML()) {
-            ed.setContent(newValue, false);
-          }
-        } else {
-          if (JSON.stringify(newValue) !== JSON.stringify(ed.getJSON())) {
-            ed.setContent(newValue, false);
-          }
-        }
-      },
-      { flush: "post" }
-    );
-    watch(editor, (ed, _oldEd, onCleanup) => {
-      if (!ed || ed.isDestroyed) return;
-      const handler = () => {
-        const val = props.outputFormat === "html" ? ed.getHTML() : ed.getJSON();
-        prevModelValue.value = val;
-        emit("update:modelValue", val);
-      };
-      ed.on("update", handler);
-      onCleanup(() => {
-        ed.off("update", handler);
-      });
-    }, { immediate: true });
-    return () => {
-      const classes = props.class ? `dm-editor ${props.class}` : "dm-editor";
-      return [
-        h("div", { class: classes, "data-dm-editor-ui": "" }, [h("div", { ref: editorRef })]),
-        slots["default"]?.()
-      ];
-    };
-  }
-});
-var EditorContent = defineComponent({
-  name: "EditorContent",
-  props: {
-    editor: {
-      type: Object,
-      default: null
-    },
-    class: {
-      type: String,
-      default: void 0
-    }
-  },
-  setup(props) {
-    const containerRef = ref();
-    watchEffect(() => {
-      const container = containerRef.value;
-      const editor = props.editor;
-      if (!container || !editor || editor.isDestroyed) return;
-      const editorDom = editor.view.dom;
-      if (editorDom.parentElement !== container) {
-        container.appendChild(editorDom);
-      }
-    });
-    return () => h("div", {
-      ref: containerRef,
-      class: props.class
-    });
-  }
-});
 function useToolbarController(editor, layout) {
   const groups = shallowRef([]);
   const focusedIndex = ref(0);
@@ -1855,6 +1672,210 @@ var DomternalEmojiPicker = defineComponent({
     };
   }
 });
+
+// src/Domternal.ts
+var Domternal = defineComponent({
+  name: "Domternal",
+  props: {
+    extensions: { type: Array, default: void 0 },
+    content: { type: [String, Object], default: "" },
+    editable: { type: Boolean, default: true },
+    autofocus: { type: [Boolean, String, Number], default: false },
+    outputFormat: { type: String, default: "html" },
+    immediatelyRender: { type: Boolean, default: false },
+    onCreate: { type: Function, default: void 0 },
+    onUpdate: { type: Function, default: void 0 },
+    onSelectionChange: { type: Function, default: void 0 },
+    onFocus: { type: Function, default: void 0 },
+    onBlur: { type: Function, default: void 0 },
+    onDestroy: { type: Function, default: void 0 }
+  },
+  setup(props, { slots }) {
+    const { editor } = useEditor({
+      ...props.extensions && { extensions: props.extensions },
+      content: props.content,
+      editable: props.editable,
+      autofocus: props.autofocus,
+      outputFormat: props.outputFormat,
+      immediatelyRender: props.immediatelyRender,
+      ...props.onCreate && { onCreate: props.onCreate },
+      ...props.onUpdate && { onUpdate: props.onUpdate },
+      ...props.onSelectionChange && { onSelectionChange: props.onSelectionChange },
+      ...props.onFocus && { onFocus: props.onFocus },
+      ...props.onBlur && { onBlur: props.onBlur },
+      ...props.onDestroy && { onDestroy: props.onDestroy }
+    });
+    provideEditor(editor);
+    watch(
+      () => props.editable,
+      (newEditable) => {
+        const ed = editor.value;
+        if (ed && !ed.isDestroyed) ed.setEditable(newEditable);
+      }
+    );
+    return () => slots["default"]?.();
+  }
+});
+var DomternalContent = defineComponent({
+  name: "DomternalContent",
+  props: {
+    class: { type: String, default: void 0 }
+  },
+  setup(props) {
+    const { editor } = useCurrentEditor();
+    const containerRef = ref();
+    watchEffect(() => {
+      const container = containerRef.value;
+      const ed = editor.value;
+      if (!container || !ed || ed.isDestroyed) return;
+      const editorDom = ed.view.dom;
+      if (editorDom.parentElement !== container) {
+        container.appendChild(editorDom);
+      }
+    });
+    return () => {
+      const classes = props.class ? `dm-editor ${props.class}` : "dm-editor";
+      return h("div", { class: classes, "data-dm-editor-ui": "" }, [h("div", { ref: containerRef })]);
+    };
+  }
+});
+var DomternalLoading = defineComponent({
+  name: "DomternalLoading",
+  setup(_props, { slots }) {
+    const { editor } = useCurrentEditor();
+    return () => editor.value ? null : slots["default"]?.();
+  }
+});
+Domternal.Content = DomternalContent;
+Domternal.Loading = DomternalLoading;
+Domternal.Toolbar = DomternalToolbar;
+Domternal.BubbleMenu = DomternalBubbleMenu;
+Domternal.FloatingMenu = DomternalFloatingMenu;
+Domternal.EmojiPicker = DomternalEmojiPicker;
+var DomternalEditor = defineComponent({
+  name: "DomternalEditor",
+  props: {
+    extensions: { type: Array, default: void 0 },
+    content: { type: [String, Object], default: void 0 },
+    editable: { type: Boolean, default: true },
+    autofocus: { type: [Boolean, String, Number], default: false },
+    immediatelyRender: { type: Boolean, default: false },
+    outputFormat: { type: String, default: "html" },
+    modelValue: { type: [String, Object], default: void 0 },
+    class: { type: String, default: void 0 },
+    onCreate: { type: Function, default: void 0 },
+    onUpdate: { type: Function, default: void 0 },
+    onSelectionChange: { type: Function, default: void 0 },
+    onFocus: { type: Function, default: void 0 },
+    onBlur: { type: Function, default: void 0 },
+    onDestroy: { type: Function, default: void 0 }
+  },
+  emits: {
+    "update:modelValue": (_value) => true
+  },
+  setup(props, { slots, emit, expose }) {
+    const { editor, editorRef } = useEditor({
+      ...props.extensions && { extensions: props.extensions },
+      content: props.modelValue ?? props.content ?? "",
+      editable: props.editable,
+      autofocus: props.autofocus,
+      immediatelyRender: props.immediatelyRender,
+      outputFormat: props.outputFormat,
+      ...props.onCreate && { onCreate: props.onCreate },
+      ...props.onUpdate && { onUpdate: props.onUpdate },
+      ...props.onSelectionChange && { onSelectionChange: props.onSelectionChange },
+      ...props.onFocus && { onFocus: props.onFocus },
+      ...props.onBlur && { onBlur: props.onBlur },
+      ...props.onDestroy && { onDestroy: props.onDestroy }
+    });
+    const state = useEditorState(editor);
+    expose({
+      editor,
+      htmlContent: state.htmlContent,
+      jsonContent: state.jsonContent,
+      isEmpty: state.isEmpty,
+      isFocused: state.isFocused
+    });
+    provideEditor(editor);
+    watch(
+      () => props.editable,
+      (newEditable) => {
+        const ed = editor.value;
+        if (ed && !ed.isDestroyed) ed.setEditable(newEditable);
+      }
+    );
+    const prevModelValue = ref(props.modelValue);
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        if (newValue === void 0) return;
+        const ed = editor.value;
+        if (!ed || ed.isDestroyed) return;
+        if (newValue === prevModelValue.value) return;
+        prevModelValue.value = newValue;
+        if (props.outputFormat === "html") {
+          if (newValue !== ed.getHTML()) {
+            ed.setContent(newValue, false);
+          }
+        } else {
+          if (JSON.stringify(newValue) !== JSON.stringify(ed.getJSON())) {
+            ed.setContent(newValue, false);
+          }
+        }
+      },
+      { flush: "post" }
+    );
+    watch(editor, (ed, _oldEd, onCleanup) => {
+      if (!ed || ed.isDestroyed) return;
+      const handler = () => {
+        const val = props.outputFormat === "html" ? ed.getHTML() : ed.getJSON();
+        prevModelValue.value = val;
+        emit("update:modelValue", val);
+      };
+      ed.on("update", handler);
+      onCleanup(() => {
+        ed.off("update", handler);
+      });
+    }, { immediate: true });
+    return () => {
+      const classes = props.class ? `dm-editor ${props.class}` : "dm-editor";
+      return [
+        h("div", { class: classes, "data-dm-editor-ui": "" }, [h("div", { ref: editorRef })]),
+        slots["default"]?.()
+      ];
+    };
+  }
+});
+var EditorContent = defineComponent({
+  name: "EditorContent",
+  props: {
+    editor: {
+      type: Object,
+      default: null
+    },
+    class: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const containerRef = ref();
+    watchEffect(() => {
+      const container = containerRef.value;
+      const editor = props.editor;
+      if (!container || !editor || editor.isDestroyed) return;
+      const editorDom = editor.view.dom;
+      if (editorDom.parentElement !== container) {
+        container.appendChild(editorDom);
+      }
+    });
+    return () => h("div", {
+      ref: containerRef,
+      class: props.class,
+      "data-dm-editor-ui": ""
+    });
+  }
+});
 var NODE_VIEW_ON_DRAG_START = /* @__PURE__ */ Symbol("domternal-node-view-drag");
 var NODE_VIEW_CONTENT_REF = /* @__PURE__ */ Symbol("domternal-node-view-content");
 function useVueNodeView() {
@@ -2036,10 +2057,6 @@ var NodeViewContent = defineComponent({
     };
   }
 });
-Domternal.Toolbar = DomternalToolbar;
-Domternal.BubbleMenu = DomternalBubbleMenu;
-Domternal.FloatingMenu = DomternalFloatingMenu;
-Domternal.EmojiPicker = DomternalEmojiPicker;
 
 export { DEFAULT_EXTENSIONS, Domternal, DomternalBubbleMenu, DomternalEditor, DomternalEmojiPicker, DomternalFloatingMenu, DomternalToolbar, EDITOR_KEY, EditorContent, NodeViewContent, NodeViewWrapper, VueNodeViewRenderer, provideEditor, useCurrentEditor, useEditor, useEditorState, useVueNodeView };
 //# sourceMappingURL=index.js.map