@domternal/vue 1.0.2 → 1.1.0

package/README.md

@@ -19,7 +19,7 @@ editor is created in `onMounted`. Requires Vue 3.3+ and the Composition API.
 pnpm add @domternal/vue @domternal/core @domternal/theme vue
 ```
 
-`vue` (>=3.3) and `@domternal/core` (>=1.0.0 <2.0.0) are peer dependencies. `@domternal/theme`
+`vue` (>=3.3) and `@domternal/core` (>=1.1.0 <2.0.0) are peer dependencies. `@domternal/theme`
 supplies the editor styles.
 
 ## Usage

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, computed, Fragment, ref, watch, shallowRef, onMounted, nextTick, onScopeDispose, watchEffect, Teleport, inject, provide, getCurrentInstance, customRef, markRaw, shallowReactive, render } from 'vue';
+import { defineComponent, h, computed, Fragment, ref, watch, shallowRef, onMounted, nextTick, onScopeDispose, Teleport, inject, provide, getCurrentInstance, watchEffect, customRef, markRaw, shallowReactive, render } from 'vue';
 import { positionFloatingOnce, PluginKey, positionFloating, ToolbarController, refocusEditorAfterCommand, createFloatingMenuPlugin, FloatingMenuController, defaultIcons, defaultBubbleContexts, buildBubbleItemMaps, createBubbleShouldShow, createBubbleMenuPlugin, resolveBubbleNames, Document, Paragraph, Text, BaseKeymap, History, Editor, resolveBubbleMenuItems } from '@domternal/core';
 export { Editor, generateHTML, generateJSON, generateText } from '@domternal/core';
 
@@ -68,10 +68,7 @@ function useEditor(options = {}) {
     const ed = editor.value;
     if (ed) {
       const mount = editorRef.value;
-      if (mount && ed.view.dom.parentElement !== mount) {
-        mount.appendChild(ed.view.dom);
-        ed.adoptPresetClass();
-      }
+      if (mount) ed.adoptDom(mount);
       return;
     }
     const element = editorRef.value ?? document.createElement("div");
@@ -701,6 +698,7 @@ var ToolbarDropdownPanel = defineComponent({
   },
   emits: ["itemClick"],
   setup(props, { emit }) {
+    const { getTooltip } = useTooltip();
     return () => {
       const { dropdown, isActive, getCachedItemContent } = props;
       if (dropdown.layout === "grid") {
@@ -719,7 +717,7 @@ var ToolbarDropdownPanel = defineComponent({
               role: "menuitem",
               tabindex: -1,
               "aria-label": sub.label,
-              title: sub.label,
+              title: getTooltip(sub),
               style: { backgroundColor: sub.color },
               onMousedown: (e) => {
                 e.preventDefault();
@@ -734,6 +732,7 @@ var ToolbarDropdownPanel = defineComponent({
               role: "menuitem",
               tabindex: -1,
               "aria-label": sub.label,
+              title: getTooltip(sub),
               innerHTML: getCachedItemContent(sub.icon, sub.label),
               onMousedown: (e) => {
                 e.preventDefault();
@@ -760,7 +759,7 @@ var ToolbarDropdownPanel = defineComponent({
             role: "menuitem",
             tabindex: -1,
             "aria-label": sub.label,
-            title: sub.label,
+            title: getTooltip(sub),
             innerHTML: getCachedItemContent(sub.icon, sub.label, dropdown.displayMode),
             onVnodeMounted: (vnode) => {
               if (sub.style && vnode.el) vnode.el.setAttribute("style", sub.style);
@@ -1669,7 +1668,10 @@ var DomternalFloatingMenu = defineComponent({
                       "aria-hidden": "true",
                       innerHTML: iconHtml
                     }) : null,
-                    h("span", { class: "dm-floating-menu-item-label" }, item.label),
+                    item.description ? h("span", { class: "dm-floating-menu-item-text" }, [
+                      h("span", { class: "dm-floating-menu-item-label" }, item.label),
+                      h("span", { class: "dm-floating-menu-item-description" }, item.description)
+                    ]) : h("span", { class: "dm-floating-menu-item-label" }, item.label),
                     item.shortcut ? h("span", { class: "dm-floating-menu-item-shortcut", "aria-hidden": "true" }, item.shortcut) : null
                   ]
                 );
@@ -2119,16 +2121,15 @@ var DomternalContent = defineComponent({
   setup(props) {
     const { editor } = useCurrentEditor();
     const containerRef = ref();
-    watchEffect(() => {
-      const container = containerRef.value;
-      const ed = editor.value;
+    watch([containerRef, editor], ([container, ed], _previous, onCleanup) => {
       if (!container || !ed || ed.isDestroyed) return;
-      const editorDom = ed.view.dom;
-      if (editorDom.parentElement !== container) {
-        container.appendChild(editorDom);
-        ed.adoptPresetClass();
-      }
-    });
+      ed.adoptDom(container);
+      onCleanup(() => {
+        if (!ed.isDestroyed && ed.view.dom.parentElement === container) {
+          ed.adoptDom(document.createElement("div"));
+        }
+      });
+    }, { 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: containerRef })]);
@@ -2258,16 +2259,15 @@ var EditorContent = defineComponent({
   },
   setup(props) {
     const containerRef = ref();
-    watchEffect(() => {
-      const container = containerRef.value;
-      const editor = props.editor;
+    watch([containerRef, () => props.editor], ([container, editor], _previous, onCleanup) => {
       if (!container || !editor || editor.isDestroyed) return;
-      const editorDom = editor.view.dom;
-      if (editorDom.parentElement !== container) {
-        container.appendChild(editorDom);
-        editor.adoptPresetClass();
-      }
-    });
+      editor.adoptDom(container);
+      onCleanup(() => {
+        if (!editor.isDestroyed && editor.view.dom.parentElement === container) {
+          editor.adoptDom(document.createElement("div"));
+        }
+      });
+    }, { immediate: true });
     return () => h("div", {
       ref: containerRef,
       class: props.class,