@tailor-cms/ce-html-edit 0.1.1 → 0.1.2

package/dist/components/actions/AddTooltip.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    editor: any;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/extensions/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Node<import("@tiptap/extension-paragraph").ParagraphOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-subscript").SubscriptExtensionOptions, any>)[];
+declare const _default: (import("@tiptap/core").Mark<any, any> | import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Node<import("@tiptap/extension-paragraph").ParagraphOptions, any>)[];
 export default _default;

package/dist/components/extensions/tooltip.d.ts

@@ -0,0 +1,14 @@
+import { Mark } from '@tiptap/vue-3';
+declare module '@tiptap/vue-3' {
+    interface Commands<ReturnType> {
+        tooltip: {
+            setTooltip: (attributes: {
+                tooltip?: string;
+                text?: string;
+            }) => ReturnType;
+            unsetTooltip: () => ReturnType;
+        };
+    }
+}
+declare const _default: Mark<any, any>;
+export default _default;

package/dist/index.cjs

@@ -26198,12 +26198,50 @@ const Paragraph = Paragraph$1.extend({
     ];
   }
 });
+const Tooltip = Mark2.create({
+  name: "tooltip",
+  addAttributes() {
+    return {
+      "data-tooltip": {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-tooltip"),
+        renderHTML: (attributes) => ({
+          "data-tooltip": attributes["data-tooltip"]
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-tooltip]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes({ class: "has-tooltip" }, HTMLAttributes),
+      0
+    ];
+  },
+  addCommands() {
+    return {
+      setTooltip: ({ tooltip, text } = {}) => ({ chain }) => {
+        return chain().setMark(this.name, { "data-tooltip": tooltip }).command(({ tr: tr2 }) => {
+          tr2.insertText(text);
+          return true;
+        }).run();
+      },
+      unsetTooltip: () => ({ chain }) => {
+        return chain().unsetMark(this.name).run();
+      }
+    };
+  }
+});
 const extensions = [
   Color,
   FontFamily$1,
   FontSize$1,
   Image,
   Link.configure({ openOnClick: false }),
+  Tooltip,
   StarterKit.configure({ paragraph: false }),
   Subscript,
   Superscript,
@@ -26223,7 +26261,7 @@ const extensions = [
     placeholder: "Enter your text..."
   })
 ];
-const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "IconButton",
   props: {
     active: { type: Boolean },
@@ -26268,8 +26306,8 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const IconButton = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-5f000959"]]);
-const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+const IconButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-5f000959"]]);
+const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "ImageMenu",
   props: {
     editor: {}
@@ -26324,8 +26362,8 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ImageMenu = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-cb530515"]]);
-const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+const ImageMenu = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-cb530515"]]);
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "TableMenu",
   props: {
     editor: {}
@@ -26424,10 +26462,10 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TableMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-e73020ec"]]);
-const _hoisted_1$3 = { class: "tce-container" };
+const TableMenu = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-e73020ec"]]);
+const _hoisted_1$4 = { class: "tce-container" };
 const SAVE_DEBOUNCE = 3e3;
-const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "Edit",
   props: {
     element: {},
@@ -26471,7 +26509,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
         vue.unref(editor) ? (vue.openBlock(), vue.createBlock(ImageMenu, {
           key: 0,
           editor: vue.unref(editor)
@@ -26488,7 +26526,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Edit = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-e677fca4"]]);
+const Edit = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-c46e1fb5"]]);
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -26888,8 +26926,8 @@ function requireIsURL() {
 }
 var isURLExports = /* @__PURE__ */ requireIsURL();
 const isURL = /* @__PURE__ */ getDefaultExportFromCjs(isURLExports);
-const _hoisted_1$2 = { class: "actions d-flex justify-end" };
-const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$3 = { class: "actions d-flex justify-end" };
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   __name: "AddImage",
   props: {
     editor: {}
@@ -26996,7 +27034,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
                     label: "Url",
                     variant: "outlined"
                   }, null, 8, ["modelValue", "rules"]),
-                  vue.createElementVNode("div", _hoisted_1$2, [
+                  vue.createElementVNode("div", _hoisted_1$3, [
                     vue.createVNode(_component_VBtn, {
                       color: "primary",
                       type: "submit",
@@ -27021,9 +27059,9 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const AddImage = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-8e6263e8"]]);
-const _hoisted_1$1 = { class: "actions d-flex justify-end" };
-const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+const AddImage = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-8e6263e8"]]);
+const _hoisted_1$2 = { class: "actions d-flex justify-end" };
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "AddLink",
   props: {
     editor: {}
@@ -27095,7 +27133,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
                 default: vue.withCtx(() => [
                   vue.createVNode(_component_VIcon, { size: "24" }, {
                     default: vue.withCtx(() => _cache[3] || (_cache[3] = [
-                      vue.createTextVNode("mdi-link")
+                      vue.createTextVNode("mdi-link-variant-plus")
                     ])),
                     _: 1,
                     __: [3]
@@ -27143,11 +27181,12 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
                     label: "Url",
                     variant: "outlined"
                   }, null, 8, ["modelValue", "rules"]),
-                  vue.createElementVNode("div", _hoisted_1$1, [
+                  vue.createElementVNode("div", _hoisted_1$2, [
                     _ctx.editor.isActive("link") ? (vue.openBlock(), vue.createBlock(_component_VBtn, {
                       key: 0,
                       class: "mr-2",
-                      variant: "plain",
+                      color: "primary-darken-3",
+                      variant: "text",
                       onClick: unlink
                     }, {
                       default: vue.withCtx(() => _cache[5] || (_cache[5] = [
@@ -27157,12 +27196,12 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
                       __: [5]
                     })) : vue.createCommentVNode("", true),
                     vue.createVNode(_component_VBtn, {
-                      color: "primary",
+                      color: "primary-darken-3",
                       type: "submit",
                       variant: "tonal"
                     }, {
                       default: vue.withCtx(() => _cache[6] || (_cache[6] = [
-                        vue.createTextVNode("Confirm")
+                        vue.createTextVNode(" Confirm ")
                       ])),
                       _: 1,
                       __: [6]
@@ -27180,11 +27219,11 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const AddLink = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-148650fc"]]);
-const _hoisted_1 = { class: "text-body-2" };
+const AddLink = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-8c3b7b32"]]);
+const _hoisted_1$1 = { class: "text-body-2" };
 const INIT_SIZE = 5;
 const MAX_SIZE = 10;
-const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "AddTable",
   props: {
     editor: {}
@@ -27294,7 +27333,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
                   }), 128))
                 ]);
               }), 128)),
-              vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(selectedSize.rows) + "x" + vue.toDisplayString(selectedSize.cols), 1)
+              vue.createElementVNode("span", _hoisted_1$1, vue.toDisplayString(selectedSize.rows) + "x" + vue.toDisplayString(selectedSize.cols), 1)
             ]),
             _: 1
           })
@@ -27304,7 +27343,161 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const AddTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-86386e2b"]]);
+const AddTable = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-86386e2b"]]);
+const _hoisted_1 = { class: "actions d-flex justify-end" };
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  __name: "AddTooltip",
+  props: {
+    editor: {}
+  },
+  setup(__props) {
+    const rules = {
+      required: (val) => !!val || "The field is required"
+    };
+    const props = __props;
+    const form = vue.ref();
+    const getText2 = () => {
+      const { view, state } = props.editor;
+      const { from: from2, to } = view.state.selection;
+      return state.doc.textBetween(from2, to, " ");
+    };
+    const tooltip = vue.ref("");
+    const text = vue.ref("");
+    const show = vue.ref(false);
+    function unset() {
+      props.editor.chain().focus().unsetTooltip().run();
+      tooltip.value = "";
+      show.value = false;
+    }
+    async function setTooltip() {
+      const { valid } = await form.value.validate();
+      if (!valid) return;
+      if (tooltip.value) {
+        const attributes = { tooltip: tooltip.value, text: text.value };
+        console.log("Setting tooltip with attributes:", attributes);
+        props.editor.chain().focus().setTooltip(attributes).run();
+      } else props.editor.chain().focus().unsetTooltip().run();
+      show.value = false;
+      form.value.resetValidation();
+    }
+    vue.watch(show, (val) => {
+      if (!val) return;
+      tooltip.value = props.editor.getAttributes("tooltip")["data-tooltip"] ?? "";
+      text.value = getText2() ?? "";
+      form.value?.resetValidation();
+    });
+    return (_ctx, _cache) => {
+      const _component_VIcon = vue.resolveComponent("VIcon");
+      const _component_VBtn = vue.resolveComponent("VBtn");
+      const _component_VTooltip = vue.resolveComponent("VTooltip");
+      const _component_VTextField = vue.resolveComponent("VTextField");
+      const _component_VSheet = vue.resolveComponent("VSheet");
+      const _component_VForm = vue.resolveComponent("VForm");
+      const _component_VMenu = vue.resolveComponent("VMenu");
+      return vue.openBlock(), vue.createBlock(_component_VMenu, {
+        modelValue: show.value,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => show.value = $event),
+        "close-on-content-click": false
+      }, {
+        activator: vue.withCtx(({ props: menu }) => [
+          vue.createVNode(_component_VTooltip, { location: "bottom" }, {
+            activator: vue.withCtx(({ props: tooltipProps }) => [
+              vue.createVNode(_component_VBtn, vue.mergeProps({
+                active: _ctx.editor.isActive("tooltip"),
+                disabled: !_ctx.editor.can().chain().focus().setTooltip().run(),
+                "aria-label": "Add tooltip",
+                rounded: "lg",
+                size: "32"
+              }, vue.mergeProps(menu, tooltipProps)), {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_VIcon, { size: "24" }, {
+                    default: vue.withCtx(() => _cache[3] || (_cache[3] = [
+                      vue.createTextVNode("mdi-tooltip-text")
+                    ])),
+                    _: 1,
+                    __: [3]
+                  })
+                ]),
+                _: 2
+              }, 1040, ["active", "disabled"])
+            ]),
+            default: vue.withCtx(() => [
+              _cache[4] || (_cache[4] = vue.createTextVNode(" Add tooltip "))
+            ]),
+            _: 2,
+            __: [4]
+          }, 1024)
+        ]),
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_VForm, {
+            ref_key: "form",
+            ref: form,
+            onSubmit: vue.withModifiers(setTooltip, ["prevent"])
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_VSheet, {
+                class: "pa-3",
+                elevation: "8",
+                width: "240",
+                rounded: ""
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_VTextField, {
+                    modelValue: text.value,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => text.value = $event),
+                    rules: [rules.required],
+                    density: "compact",
+                    "hide-details": "auto",
+                    label: "Text",
+                    variant: "outlined"
+                  }, null, 8, ["modelValue", "rules"]),
+                  vue.createVNode(_component_VTextField, {
+                    modelValue: tooltip.value,
+                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => tooltip.value = $event),
+                    rules: [rules.required],
+                    density: "compact",
+                    "hide-details": "auto",
+                    label: "Tooltip",
+                    variant: "outlined"
+                  }, null, 8, ["modelValue", "rules"]),
+                  vue.createElementVNode("div", _hoisted_1, [
+                    _ctx.editor.isActive("tooltip") ? (vue.openBlock(), vue.createBlock(_component_VBtn, {
+                      key: 0,
+                      class: "mr-2",
+                      variant: "plain",
+                      onClick: unset
+                    }, {
+                      default: vue.withCtx(() => _cache[5] || (_cache[5] = [
+                        vue.createTextVNode(" Remove ")
+                      ])),
+                      _: 1,
+                      __: [5]
+                    })) : vue.createCommentVNode("", true),
+                    vue.createVNode(_component_VBtn, {
+                      color: "primary",
+                      type: "submit",
+                      variant: "tonal"
+                    }, {
+                      default: vue.withCtx(() => _cache[6] || (_cache[6] = [
+                        vue.createTextVNode("Confirm")
+                      ])),
+                      _: 1,
+                      __: [6]
+                    })
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 512)
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+const AddTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-9f5b7855"]]);
 const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "FontFamily",
   props: {
@@ -27999,6 +28192,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
         { component: AddLink },
         { component: AddTable },
         { component: AddImage },
+        { component: AddTooltip },
         {
           label: "Horizontal line",
           action: ["setHorizontalRule"],
@@ -28112,7 +28306,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-b4ffaa29"]]);
+const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-62e3d651"]]);
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "TopToolbar",
   props: {

package/dist/index.css

@@ -11,93 +11,93 @@
 }
 [data-v-e73020ec] .v-btn.v-btn--active {
   color: rgba(var(--v-theme-primary));
-}.tce-container[data-v-e677fca4] {
+}.tce-container[data-v-c46e1fb5] {
   text-align: left;
 }
-[data-v-e677fca4] .ProseMirror {
+[data-v-c46e1fb5] .ProseMirror {
   min-height: 5rem;
   padding: 0.5rem;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1rem;
   outline: none;
 }
-[data-v-e677fca4] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-c46e1fb5] .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   height: 0;
   opacity: 0.5;
   float: left;
   pointer-events: none;
 }
-[data-v-e677fca4] .ProseMirror > * + * {
+[data-v-c46e1fb5] .ProseMirror > * + * {
   margin-top: 0.75em;
 }
-[data-v-e677fca4] .ProseMirror h1,[data-v-e677fca4] .ProseMirror h2,[data-v-e677fca4] .ProseMirror h3,[data-v-e677fca4] .ProseMirror h4,[data-v-e677fca4] .ProseMirror h5,[data-v-e677fca4] .ProseMirror h6 {
+[data-v-c46e1fb5] .ProseMirror h1,[data-v-c46e1fb5] .ProseMirror h2,[data-v-c46e1fb5] .ProseMirror h3,[data-v-c46e1fb5] .ProseMirror h4,[data-v-c46e1fb5] .ProseMirror h5,[data-v-c46e1fb5] .ProseMirror h6 {
   line-height: 1.1;
 }
-[data-v-e677fca4] .ProseMirror h1 {
+[data-v-c46e1fb5] .ProseMirror h1 {
   font-size: 2.5rem;
 }
-[data-v-e677fca4] .ProseMirror h2 {
+[data-v-c46e1fb5] .ProseMirror h2 {
   font-size: 2.25rem;
 }
-[data-v-e677fca4] .ProseMirror h3 {
+[data-v-c46e1fb5] .ProseMirror h3 {
   font-size: 2rem;
 }
-[data-v-e677fca4] .ProseMirror h4 {
+[data-v-c46e1fb5] .ProseMirror h4 {
   font-size: 1.75rem;
 }
-[data-v-e677fca4] .ProseMirror h5 {
+[data-v-c46e1fb5] .ProseMirror h5 {
   font-size: 1.5rem;
 }
-[data-v-e677fca4] .ProseMirror h6 {
+[data-v-c46e1fb5] .ProseMirror h6 {
   font-size: 1.25rem;
 }
-[data-v-e677fca4] .ProseMirror blockquote {
+[data-v-c46e1fb5] .ProseMirror blockquote {
   padding: 0.25rem 1rem;
   border-left: 2px solid rgba(13, 13, 13, 0.1);
   font-family: Georgia, "Times New Roman", Times, serif;
   font-style: italic;
 }
-[data-v-e677fca4] .ProseMirror ul,[data-v-e677fca4] .ProseMirror ol {
+[data-v-c46e1fb5] .ProseMirror ul,[data-v-c46e1fb5] .ProseMirror ol {
   padding: 0 1.25rem;
 }
-[data-v-e677fca4] .ProseMirror code {
+[data-v-c46e1fb5] .ProseMirror code {
   font-family: "Source Code Pro", monospace !important;
   background: #eee;
   padding: 0.125rem 0.5rem;
   border-radius: 8px;
 }
-[data-v-e677fca4] .ProseMirror pre {
+[data-v-c46e1fb5] .ProseMirror pre {
   padding: 0.5rem 1rem;
   border-radius: 8px;
   background: #eee;
   white-space: pre-wrap;
 }
-[data-v-e677fca4] .ProseMirror pre code {
+[data-v-c46e1fb5] .ProseMirror pre code {
   padding: 0;
   font-size: 0.875rem;
   background: none;
 }
-[data-v-e677fca4] .ProseMirror img {
+[data-v-c46e1fb5] .ProseMirror img {
   max-width: 100%;
   height: auto;
 }
-[data-v-e677fca4] .ProseMirror img.ProseMirror-selectednode {
+[data-v-c46e1fb5] .ProseMirror img.ProseMirror-selectednode {
   outline: 2px solid #68cef8;
 }
-[data-v-e677fca4] .ProseMirror hr {
+[data-v-c46e1fb5] .ProseMirror hr {
   border: none;
   border-top: 2px solid rgba(13, 13, 13, 0.1);
   margin: 2rem 0;
 }
-[data-v-e677fca4] .ProseMirror table {
+[data-v-c46e1fb5] .ProseMirror table {
   border-collapse: collapse;
   table-layout: fixed;
   width: 100%;
   margin: 0;
   overflow: hidden;
 }
-[data-v-e677fca4] .ProseMirror table td,[data-v-e677fca4] .ProseMirror table th {
+[data-v-c46e1fb5] .ProseMirror table td,[data-v-c46e1fb5] .ProseMirror table th {
   min-width: 1em;
   border: 2px solid #ced4da;
   padding: 3px 5px;
@@ -105,15 +105,15 @@
   box-sizing: border-box;
   position: relative;
 }
-[data-v-e677fca4] .ProseMirror table td > *,[data-v-e677fca4] .ProseMirror table th > * {
+[data-v-c46e1fb5] .ProseMirror table td > *,[data-v-c46e1fb5] .ProseMirror table th > * {
   margin-bottom: 0;
 }
-[data-v-e677fca4] .ProseMirror table th {
+[data-v-c46e1fb5] .ProseMirror table th {
   font-weight: bold;
   text-align: left;
   background-color: #f1f3f5;
 }
-[data-v-e677fca4] .ProseMirror table .selectedCell:after {
+[data-v-c46e1fb5] .ProseMirror table .selectedCell:after {
   z-index: 2;
   position: absolute;
   content: "";
@@ -124,7 +124,7 @@
   background: rgba(200, 200, 255, 0.4);
   pointer-events: none;
 }
-[data-v-e677fca4] .ProseMirror table .column-resize-handle {
+[data-v-c46e1fb5] .ProseMirror table .column-resize-handle {
   position: absolute;
   right: -2px;
   top: 0;
@@ -133,13 +133,53 @@
   background-color: #adf;
   pointer-events: none;
 }
-[data-v-e677fca4] .ProseMirror table p {
+[data-v-c46e1fb5] .ProseMirror table p {
   margin: 0;
+}
+[data-v-c46e1fb5] .has-tooltip {
+  position: relative;
+  display: inline-block;
+  background: rgba(205, 215, 220, 0.7);
+  text-decoration: underline dashed rgba(33, 33, 33, 0.8);
+  cursor: help;
+}
+[data-v-c46e1fb5] .has-tooltip::before {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid rgba(33, 33, 33, 0.8);
+}
+[data-v-c46e1fb5] .has-tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: -0.625rem;
+  border-radius: 4px;
+  max-width: 14rem;
+  padding: 0.375rem 0.675rem;
+  background: rgba(33, 33, 33, 0.8);
+  font-size: 0.875rem;
+  color: #fff;
+  font-weight: normal;
+  width: max-content;
+}
+[data-v-c46e1fb5] .has-tooltip::before,[data-v-c46e1fb5] .has-tooltip::after {
+  text-decoration: none;
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.3s ease-out;
+}
+[data-v-c46e1fb5] .has-tooltip:hover::after,[data-v-c46e1fb5] .has-tooltip:hover::before {
+  visibility: visible;
+  opacity: 1;
+  margin-bottom: 0.25rem;
 }.v-sheet[data-v-8e6263e8] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-}.v-sheet[data-v-148650fc] {
+}.v-sheet[data-v-8c3b7b32] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -148,6 +188,10 @@
 }
 .v-input--density-compact[data-v-86386e2b] {
   --v-input-control-height: unset;
+}.v-sheet[data-v-9f5b7855] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }.v-list-item + .v-list-item[data-v-13c3b0cc] {
   margin-top: 0.125rem;
 }.v-list-item + .v-list-item[data-v-70882e8a] {
@@ -181,14 +225,14 @@
   border: 1px solid #dadce0;
 }.v-list-item + .v-list-item[data-v-eb5927ce] {
   margin-top: 0.125rem;
-}.v-btn-group[data-v-b4ffaa29] {
+}.v-btn-group[data-v-62e3d651] {
   display: flex;
   flex-wrap: wrap;
   height: unset;
 }
-[data-v-b4ffaa29] .v-btn + .v-btn {
+[data-v-62e3d651] .v-btn + .v-btn {
   margin-left: 0.125rem;
 }
-[data-v-b4ffaa29] .v-btn.v-btn--active {
+[data-v-62e3d651] .v-btn.v-btn--active {
   color: rgba(var(--v-theme-primary));
 }

package/dist/index.js

@@ -26196,12 +26196,50 @@ const Paragraph = Paragraph$1.extend({
     ];
   }
 });
+const Tooltip = Mark2.create({
+  name: "tooltip",
+  addAttributes() {
+    return {
+      "data-tooltip": {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-tooltip"),
+        renderHTML: (attributes) => ({
+          "data-tooltip": attributes["data-tooltip"]
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-tooltip]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes({ class: "has-tooltip" }, HTMLAttributes),
+      0
+    ];
+  },
+  addCommands() {
+    return {
+      setTooltip: ({ tooltip, text } = {}) => ({ chain }) => {
+        return chain().setMark(this.name, { "data-tooltip": tooltip }).command(({ tr: tr2 }) => {
+          tr2.insertText(text);
+          return true;
+        }).run();
+      },
+      unsetTooltip: () => ({ chain }) => {
+        return chain().unsetMark(this.name).run();
+      }
+    };
+  }
+});
 const extensions = [
   Color,
   FontFamily$1,
   FontSize$1,
   Image,
   Link.configure({ openOnClick: false }),
+  Tooltip,
   StarterKit.configure({ paragraph: false }),
   Subscript,
   Superscript,
@@ -26221,7 +26259,7 @@ const extensions = [
     placeholder: "Enter your text..."
   })
 ];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "IconButton",
   props: {
     active: { type: Boolean },
@@ -26266,8 +26304,8 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const IconButton = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-5f000959"]]);
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const IconButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-5f000959"]]);
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "ImageMenu",
   props: {
     editor: {}
@@ -26322,8 +26360,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ImageMenu = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-cb530515"]]);
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const ImageMenu = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-cb530515"]]);
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "TableMenu",
   props: {
     editor: {}
@@ -26422,10 +26460,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TableMenu = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-e73020ec"]]);
-const _hoisted_1$3 = { class: "tce-container" };
+const TableMenu = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-e73020ec"]]);
+const _hoisted_1$4 = { class: "tce-container" };
 const SAVE_DEBOUNCE = 3e3;
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "Edit",
   props: {
     element: {},
@@ -26469,7 +26507,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
         unref(editor) ? (openBlock(), createBlock(ImageMenu, {
           key: 0,
           editor: unref(editor)
@@ -26486,7 +26524,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Edit = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-e677fca4"]]);
+const Edit = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-c46e1fb5"]]);
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -26886,8 +26924,8 @@ function requireIsURL() {
 }
 var isURLExports = /* @__PURE__ */ requireIsURL();
 const isURL = /* @__PURE__ */ getDefaultExportFromCjs(isURLExports);
-const _hoisted_1$2 = { class: "actions d-flex justify-end" };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = { class: "actions d-flex justify-end" };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "AddImage",
   props: {
     editor: {}
@@ -26994,7 +27032,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                     label: "Url",
                     variant: "outlined"
                   }, null, 8, ["modelValue", "rules"]),
-                  createElementVNode("div", _hoisted_1$2, [
+                  createElementVNode("div", _hoisted_1$3, [
                     createVNode(_component_VBtn, {
                       color: "primary",
                       type: "submit",
@@ -27019,9 +27057,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AddImage = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-8e6263e8"]]);
-const _hoisted_1$1 = { class: "actions d-flex justify-end" };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const AddImage = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-8e6263e8"]]);
+const _hoisted_1$2 = { class: "actions d-flex justify-end" };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "AddLink",
   props: {
     editor: {}
@@ -27093,7 +27131,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createVNode(_component_VIcon, { size: "24" }, {
                     default: withCtx(() => _cache[3] || (_cache[3] = [
-                      createTextVNode("mdi-link")
+                      createTextVNode("mdi-link-variant-plus")
                     ])),
                     _: 1,
                     __: [3]
@@ -27141,11 +27179,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                     label: "Url",
                     variant: "outlined"
                   }, null, 8, ["modelValue", "rules"]),
-                  createElementVNode("div", _hoisted_1$1, [
+                  createElementVNode("div", _hoisted_1$2, [
                     _ctx.editor.isActive("link") ? (openBlock(), createBlock(_component_VBtn, {
                       key: 0,
                       class: "mr-2",
-                      variant: "plain",
+                      color: "primary-darken-3",
+                      variant: "text",
                       onClick: unlink
                     }, {
                       default: withCtx(() => _cache[5] || (_cache[5] = [
@@ -27155,12 +27194,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                       __: [5]
                     })) : createCommentVNode("", true),
                     createVNode(_component_VBtn, {
-                      color: "primary",
+                      color: "primary-darken-3",
                       type: "submit",
                       variant: "tonal"
                     }, {
                       default: withCtx(() => _cache[6] || (_cache[6] = [
-                        createTextVNode("Confirm")
+                        createTextVNode(" Confirm ")
                       ])),
                       _: 1,
                       __: [6]
@@ -27178,11 +27217,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AddLink = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-148650fc"]]);
-const _hoisted_1 = { class: "text-body-2" };
+const AddLink = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-8c3b7b32"]]);
+const _hoisted_1$1 = { class: "text-body-2" };
 const INIT_SIZE = 5;
 const MAX_SIZE = 10;
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "AddTable",
   props: {
     editor: {}
@@ -27292,7 +27331,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                   }), 128))
                 ]);
               }), 128)),
-              createElementVNode("span", _hoisted_1, toDisplayString(selectedSize.rows) + "x" + toDisplayString(selectedSize.cols), 1)
+              createElementVNode("span", _hoisted_1$1, toDisplayString(selectedSize.rows) + "x" + toDisplayString(selectedSize.cols), 1)
             ]),
             _: 1
           })
@@ -27302,7 +27341,161 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AddTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-86386e2b"]]);
+const AddTable = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-86386e2b"]]);
+const _hoisted_1 = { class: "actions d-flex justify-end" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "AddTooltip",
+  props: {
+    editor: {}
+  },
+  setup(__props) {
+    const rules = {
+      required: (val) => !!val || "The field is required"
+    };
+    const props = __props;
+    const form = ref();
+    const getText2 = () => {
+      const { view, state } = props.editor;
+      const { from: from2, to } = view.state.selection;
+      return state.doc.textBetween(from2, to, " ");
+    };
+    const tooltip = ref("");
+    const text = ref("");
+    const show = ref(false);
+    function unset() {
+      props.editor.chain().focus().unsetTooltip().run();
+      tooltip.value = "";
+      show.value = false;
+    }
+    async function setTooltip() {
+      const { valid } = await form.value.validate();
+      if (!valid) return;
+      if (tooltip.value) {
+        const attributes = { tooltip: tooltip.value, text: text.value };
+        console.log("Setting tooltip with attributes:", attributes);
+        props.editor.chain().focus().setTooltip(attributes).run();
+      } else props.editor.chain().focus().unsetTooltip().run();
+      show.value = false;
+      form.value.resetValidation();
+    }
+    watch(show, (val) => {
+      if (!val) return;
+      tooltip.value = props.editor.getAttributes("tooltip")["data-tooltip"] ?? "";
+      text.value = getText2() ?? "";
+      form.value?.resetValidation();
+    });
+    return (_ctx, _cache) => {
+      const _component_VIcon = resolveComponent("VIcon");
+      const _component_VBtn = resolveComponent("VBtn");
+      const _component_VTooltip = resolveComponent("VTooltip");
+      const _component_VTextField = resolveComponent("VTextField");
+      const _component_VSheet = resolveComponent("VSheet");
+      const _component_VForm = resolveComponent("VForm");
+      const _component_VMenu = resolveComponent("VMenu");
+      return openBlock(), createBlock(_component_VMenu, {
+        modelValue: show.value,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => show.value = $event),
+        "close-on-content-click": false
+      }, {
+        activator: withCtx(({ props: menu }) => [
+          createVNode(_component_VTooltip, { location: "bottom" }, {
+            activator: withCtx(({ props: tooltipProps }) => [
+              createVNode(_component_VBtn, mergeProps({
+                active: _ctx.editor.isActive("tooltip"),
+                disabled: !_ctx.editor.can().chain().focus().setTooltip().run(),
+                "aria-label": "Add tooltip",
+                rounded: "lg",
+                size: "32"
+              }, mergeProps(menu, tooltipProps)), {
+                default: withCtx(() => [
+                  createVNode(_component_VIcon, { size: "24" }, {
+                    default: withCtx(() => _cache[3] || (_cache[3] = [
+                      createTextVNode("mdi-tooltip-text")
+                    ])),
+                    _: 1,
+                    __: [3]
+                  })
+                ]),
+                _: 2
+              }, 1040, ["active", "disabled"])
+            ]),
+            default: withCtx(() => [
+              _cache[4] || (_cache[4] = createTextVNode(" Add tooltip "))
+            ]),
+            _: 2,
+            __: [4]
+          }, 1024)
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_VForm, {
+            ref_key: "form",
+            ref: form,
+            onSubmit: withModifiers(setTooltip, ["prevent"])
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_VSheet, {
+                class: "pa-3",
+                elevation: "8",
+                width: "240",
+                rounded: ""
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_VTextField, {
+                    modelValue: text.value,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => text.value = $event),
+                    rules: [rules.required],
+                    density: "compact",
+                    "hide-details": "auto",
+                    label: "Text",
+                    variant: "outlined"
+                  }, null, 8, ["modelValue", "rules"]),
+                  createVNode(_component_VTextField, {
+                    modelValue: tooltip.value,
+                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => tooltip.value = $event),
+                    rules: [rules.required],
+                    density: "compact",
+                    "hide-details": "auto",
+                    label: "Tooltip",
+                    variant: "outlined"
+                  }, null, 8, ["modelValue", "rules"]),
+                  createElementVNode("div", _hoisted_1, [
+                    _ctx.editor.isActive("tooltip") ? (openBlock(), createBlock(_component_VBtn, {
+                      key: 0,
+                      class: "mr-2",
+                      variant: "plain",
+                      onClick: unset
+                    }, {
+                      default: withCtx(() => _cache[5] || (_cache[5] = [
+                        createTextVNode(" Remove ")
+                      ])),
+                      _: 1,
+                      __: [5]
+                    })) : createCommentVNode("", true),
+                    createVNode(_component_VBtn, {
+                      color: "primary",
+                      type: "submit",
+                      variant: "tonal"
+                    }, {
+                      default: withCtx(() => _cache[6] || (_cache[6] = [
+                        createTextVNode("Confirm")
+                      ])),
+                      _: 1,
+                      __: [6]
+                    })
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 512)
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+const AddTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-9f5b7855"]]);
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "FontFamily",
   props: {
@@ -27997,6 +28190,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         { component: AddLink },
         { component: AddTable },
         { component: AddImage },
+        { component: AddTooltip },
         {
           label: "Horizontal line",
           action: ["setHorizontalRule"],
@@ -28110,7 +28304,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-b4ffaa29"]]);
+const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-62e3d651"]]);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TopToolbar",
   props: {

package/package.json

@@ -3,7 +3,7 @@
   "description": "Tailor CMS HTML editor authoring component",
   "author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -26,7 +26,7 @@
     "typescript": "^5.8.3",
     "vite": "^7.0.3",
     "vue-tsc": "^3.0.1",
-    "@tailor-cms/ce-html-manifest": "0.1.1"
+    "@tailor-cms/ce-html-manifest": "0.1.2"
   },
   "dependencies": {
     "@tiptap/extension-color": "^2.25.0",