vuewrite 0.0.18 → 0.0.20

package/dist/vuewrite.d.ts

@@ -213,6 +213,11 @@ declare class TextEditorStore {
     removeNewLine(): void;
     onInput(_e: Event): void;
     addNewLine(): void;
+    addNewLineAfter(): {
+        id: string;
+        text: string;
+        styles: never[];
+    };
     insertText(data: string): void;
     insertBlock(blockData: Partial<Block>): void;
     get startAndEnd(): [{

package/dist/vuewrite.js

@@ -366,6 +366,12 @@ class TextEditorStore {
     this.selection.focus = { blockId: block.id, offset: 0 };
     this.history.push("setText");
   }
+  addNewLineAfter() {
+    const index = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
+    const block = { id: uid(), text: "", styles: [] };
+    this.blocks.splice(index + 1, 0, block);
+    return block;
+  }
   insertText(data) {
     const block = this.currentBlock;
     if (!block)
@@ -388,7 +394,11 @@ class TextEditorStore {
     }
     Object.assign(this.currentBlock, blockData);
     if (blockData.editable === false && this.currentBlock === this.blocks[this.blocks.length - 1]) {
-      this.addNewLine();
+      const newLine = this.addNewLineAfter();
+      this.selection.focus.blockId = newLine.id;
+      this.selection.focus.offset = 0;
+      this.selection.anchor.blockId = newLine.id;
+      this.selection.anchor.offset = 0;
     }
     this.history.push("setText");
   }
@@ -606,12 +616,16 @@ const _sfc_main$2 = defineComponent({
       const markers = [];
       if (block.styles) {
         for (let style of block.styles) {
+          if (style.end <= style.start)
+            continue;
           markers.push([style.start, style]);
           markers.push([style.end, style]);
         }
       }
       if (props.parser) {
         for (let style of props.parser(text)) {
+          if (style.end <= style.start)
+            continue;
           markers.push([style.start, style]);
           markers.push([style.end, style]);
         }
@@ -676,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: {
@@ -842,26 +962,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       store.history.push("setText");
     });
-    const onCopy = (e) => {
-      e.preventDefault();
-      navigator.clipboard.writeText(store.selectedText);
-      store.history.push("setText");
-    };
-    const onCut = (e) => {
-      e.preventDefault();
-      navigator.clipboard.writeText(store.selectedText);
-      store.deleteSelected();
-      store.history.push("setText");
-    };
-    const onPaste = (e) => {
-      var _a;
-      e.preventDefault();
-      const text = (_a = e.clipboardData) == null ? void 0 : _a.getData("Text");
-      if (!text)
-        return;
-      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);
@@ -898,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.18",
+  "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",