vuewrite 0.0.19 → 0.0.20

package/dist/vuewrite.js

@@ -690,6 +690,112 @@ const _sfc_main$2 = defineComponent({
     };
   }
 });
+const createClipboardEvents = (store, props) => {
+  const getSelected = () => {
+    const [start, end, startIndex, endIndex] = store.startAndEnd;
+    if (startIndex === endIndex) {
+      const text2 = store.blocks[startIndex].text.slice(start.offset, end.offset);
+      return [
+        new ClipboardItem({
+          "text/plain": new Blob([text2], { type: "text/plain" })
+        })
+      ];
+    }
+    const startText = store.blocks[startIndex].text.slice(start.offset);
+    const endText = store.blocks[endIndex].text.slice(0, end.offset);
+    const arr = [
+      { type: store.blocks[startIndex].type, text: startText },
+      ...store.blocks.slice(startIndex + 1, endIndex),
+      { type: store.blocks[endIndex].type, text: endText }
+    ];
+    const html = arr.map((item) => `<div>${item.text}</div>`).join("\n");
+    const text = arr.map((item) => item.text).join("\n");
+    return [
+      new ClipboardItem({
+        "text/html": new Blob([html], { type: "text/html" }),
+        "text/plain": new Blob([text], { type: "text/plain" })
+      })
+    ];
+  };
+  const onCopy = (e) => {
+    if (e.defaultPrevented)
+      return;
+    e.preventDefault();
+    navigator.clipboard.write(getSelected());
+    store.history.push("setText");
+  };
+  const onCut = (e) => {
+    if (e.defaultPrevented)
+      return;
+    e.preventDefault();
+    navigator.clipboard.write(getSelected());
+    store.deleteSelected();
+    store.history.push("setText");
+  };
+  const insertText = (text) => {
+    if (props.preventMultiline) {
+      const blocks = text.split("\n");
+      store.insertText(blocks[0]);
+      for (let i = 1; i < blocks.length; i++) {
+        store.addNewLine();
+        store.insertText(blocks[i]);
+      }
+    } else {
+      store.insertText(text);
+    }
+  };
+  const parseHtml = (node) => {
+    var _a;
+    let isTextNode = false;
+    for (let _node of node.childNodes) {
+      if (_node.nodeType === Node.TEXT_NODE && ((_a = _node.textContent) == null ? void 0 : _a.trim()) || _node.nodeType == Node.ELEMENT_NODE && _node.tagName === "SPAN") {
+        isTextNode = true;
+        break;
+      }
+    }
+    if (isTextNode) {
+      const text = node.textContent;
+      if (!text)
+        return;
+      insertText(text);
+      store.addNewLine();
+      return;
+    }
+    for (let child of node.children) {
+      if (child.tagName === "DIV") {
+        parseHtml(child);
+      } else {
+        insertText(child.textContent ?? "");
+        store.addNewLine();
+      }
+    }
+  };
+  const parser = new DOMParser();
+  const onPaste = (e) => {
+    var _a, _b;
+    if (e.defaultPrevented)
+      return;
+    e.preventDefault();
+    const html = (_a = e.clipboardData) == null ? void 0 : _a.getData("text/html");
+    if (html) {
+      store.deleteSelected();
+      const dom = parser.parseFromString(html, "text/html");
+      parseHtml(dom.body);
+    } else {
+      const text = (_b = e.clipboardData) == null ? void 0 : _b.getData("text");
+      if (!text)
+        return;
+      store.deleteSelected();
+      insertText(text);
+    }
+    store.history.push("setText");
+  };
+  return {
+    onCopy,
+    onCut,
+    onPaste
+  };
+};
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "TextEditor",
   props: {
@@ -856,41 +962,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       store.history.push("setText");
     });
-    const onCopy = (e) => {
-      if (e.defaultPrevented)
-        return;
-      e.preventDefault();
-      navigator.clipboard.writeText(store.selectedText);
-      store.history.push("setText");
-    };
-    const onCut = (e) => {
-      if (e.defaultPrevented)
-        return;
-      e.preventDefault();
-      navigator.clipboard.writeText(store.selectedText);
-      store.deleteSelected();
-      store.history.push("setText");
-    };
-    const onPaste = (e) => {
-      var _a;
-      if (e.defaultPrevented)
-        return;
-      e.preventDefault();
-      const text = (_a = e.clipboardData) == null ? void 0 : _a.getData("Text");
-      if (!text)
-        return;
-      if (props.preventMultiline) {
-        const blocks = text.split("\n");
-        store.insertText(blocks[0]);
-        for (let i = 1; i < blocks.length; i++) {
-          store.addNewLine();
-          store.insertText(blocks[i]);
-        }
-      } else {
-        store.insertText(text);
-      }
-      store.history.push("setText");
-    };
+    const { onCut, onCopy, onPaste } = createClipboardEvents(store, props);
     const getClientRects = (selection) => {
       const anchor = getNode(selection.anchor.blockId);
       const focus = getNode(selection.focus.blockId);
@@ -927,9 +999,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         onBeforeinput: _cache[0] || (_cache[0] = //@ts-ignore
         (...args) => unref(store).onInput && unref(store).onInput(...args)),
         onKeydown: onKeyDown,
-        onCopy,
-        onPaste,
-        onCut
+        onCopy: _cache[1] || (_cache[1] = //@ts-ignore
+        (...args) => unref(onCopy) && unref(onCopy)(...args)),
+        onPaste: _cache[2] || (_cache[2] = //@ts-ignore
+        (...args) => unref(onPaste) && unref(onPaste)(...args)),
+        onCut: _cache[3] || (_cache[3] = //@ts-ignore
+        (...args) => unref(onCut) && unref(onCut)(...args))
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(store).blocks, (block) => {
           return openBlock(), createBlock(_sfc_main$2, {

package/package.json

@@ -2,7 +2,7 @@
   "name": "vuewrite",
   "description": "Rich Text Editor based on Vue3 reactivity",
   "private": false,
-  "version": "0.0.19",
+  "version": "0.0.20",
   "type": "module",
   "license": "MIT",
   "author": "den59k",
@@ -19,7 +19,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3"
+    "vue": "^3",
+    "vuewrite": "^0.0.19"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",