vuewrite 0.0.7 → 0.0.8

package/dist/vuewrite.d.ts

@@ -29,6 +29,7 @@ export declare type Block = {
     text: string;
     type?: string;
     styles: Style[];
+    editable?: boolean;
 };
 
 export declare type Decorator = (style: Style) => HTMLAttributes | undefined;
@@ -63,6 +64,7 @@ end: number;
 style: string;
 meta?: any;
 }[];
+editable?: boolean | undefined;
 } | null>;
 isCollapsed: ComputedRef<boolean>;
 selection: {
@@ -135,6 +137,7 @@ declare class TextEditorStore {
             style: string;
             meta?: any;
         }[];
+        editable?: boolean | undefined;
     }[];
     selection: {
         anchor: {
@@ -159,6 +162,7 @@ declare class TextEditorStore {
     style: string;
     meta?: any;
     }[];
+    editable?: boolean | undefined;
     } | null>;
     get currentBlock(): {
         id: string;
@@ -170,10 +174,12 @@ declare class TextEditorStore {
             style: string;
             meta?: any;
         }[];
+        editable?: boolean | undefined;
     } | null;
     _selectedText: ComputedRef<string>;
     get selectedText(): string;
     moveOffset(newOffset: number): void;
+    concatBlocks(start: Block, end: Block): void;
     removeNewLine(): void;
     onInput(_e: Event): void;
     addNewLine(): void;

package/dist/vuewrite.js

@@ -202,18 +202,33 @@ class TextEditorStore {
     this.selection.anchor.offset = newOffset;
     this.selection.focus.offset = newOffset;
   }
+  concatBlocks(start, end) {
+    for (let style of end.styles) {
+      style.start += start.text.length;
+      style.end += start.text.length;
+      start.styles.push(style);
+    }
+    start.text = start.text + end.text;
+  }
   removeNewLine() {
     const blockIndex = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
     if (blockIndex < 1)
       return;
+    if (this.blocks[blockIndex - 1].editable === false) {
+      this.blocks.splice(blockIndex - 1, 1);
+    } else {
+      this.concatBlocks(this.blocks[blockIndex - 1], this.blocks[blockIndex]);
+      this.blocks.splice(blockIndex, 1);
+    }
     this.selection.anchor.blockId = this.blocks[blockIndex - 1].id;
     this.selection.focus.blockId = this.blocks[blockIndex - 1].id;
     this.selection.anchor.offset = this.blocks[blockIndex - 1].text.length;
     this.selection.focus.offset = this.blocks[blockIndex - 1].text.length;
-    this.blocks.splice(blockIndex, 1);
   }
   onInput(_e) {
     const ev = _e;
+    if (ev.defaultPrevented)
+      return;
     ev.preventDefault();
     const collapsed = this.isCollapsed;
     if (!collapsed)
@@ -224,7 +239,11 @@ class TextEditorStore {
     if ((ev.inputType === "deleteContentBackward" || ev.inputType === "deleteContentForward") && collapsed) {
       if (ev.inputType === "deleteContentBackward") {
         if (this.selection.anchor.offset === 0) {
-          this.removeNewLine();
+          if (block.type) {
+            delete block.type;
+          } else {
+            this.removeNewLine();
+          }
         } else {
           const offset = Math.max(0, this.selection.focus.offset - 1);
           block.text = block.text.slice(0, offset) + block.text.slice(this.selection.focus.offset);
@@ -234,7 +253,11 @@ class TextEditorStore {
       if (ev.inputType === "deleteContentForward") {
         const blockIndex = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
         if (this.selection.anchor.offset === this.blocks[blockIndex].text.length) {
-          this.blocks.splice(blockIndex + 1, 1);
+          const nextBlock = this.blocks[blockIndex + 1];
+          if (nextBlock) {
+            this.blocks.splice(blockIndex + 1, 1);
+            this.concatBlocks(this.blocks[blockIndex - 1], this.blocks[blockIndex]);
+          }
         } else {
           block.text = block.text.slice(0, this.selection.focus.offset) + block.text.slice(this.selection.focus.offset + 1);
           this.moveStyles(block, this.selection.focus.offset + 1, 1);
@@ -277,6 +300,9 @@ class TextEditorStore {
       Object.assign(this.selection, selection);
     }
     Object.assign(this.currentBlock, blockData);
+    if (blockData.editable === false && this.currentBlock === this.blocks[this.blocks.length - 1]) {
+      this.addNewLine();
+    }
   }
   get startAndEnd() {
     const a = this.blocks.findIndex((block) => block.id === this.selection.anchor.blockId);
@@ -505,6 +531,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     const content = () => {
       const block = props.block;
+      if (block.editable === false)
+        return null;
       if (block.text.length === 0) {
         cleanTree(1);
         return [h("br")];
@@ -627,16 +655,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           store.addNewLine();
         }
       }
-      if (e.code === "Backspace") {
-        if (store.isCollapsed && store.selection.anchor.offset === 0) {
-          e.preventDefault();
-          if (store.currentBlock && store.currentBlock.type) {
-            delete store.currentBlock.type;
-          } else {
-            store.removeNewLine();
-          }
-        }
-      }
       if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
         if (e.code === "KeyB" || e.code === "KeyI" || e.code === "KeyU") {
           e.preventDefault();
@@ -646,21 +664,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let cachedSelection = {};
     useEventListener(document, "selectionchange", () => {
       const sel = window.getSelection();
-      const anchor = findParent(sel.anchorNode, (el) => el.hasAttribute("data-vw-block-id"));
+      const anchor = findParent(sel.anchorNode, (el) => el.hasAttribute("data-vw-block-id") && el.parentElement === textEditorRef.value);
       if (anchor) {
         const offset = anchor === sel.anchorNode ? 0 : calcOffsetToNode(anchor, sel.anchorNode) + sel.anchorOffset;
         store.selection.anchor = { blockId: anchor.getAttribute("data-vw-block-id"), offset };
       }
-      const focus = findParent(sel.focusNode, (el) => el.hasAttribute("data-vw-block-id"));
+      const focus = findParent(sel.focusNode, (el) => el.hasAttribute("data-vw-block-id") && el.parentElement === textEditorRef.value);
       if (focus) {
         const offset = anchor === sel.focusNode ? 0 : calcOffsetToNode(focus, sel.focusNode) + sel.focusOffset;
         store.selection.focus = { blockId: focus.getAttribute("data-vw-block-id"), offset };
       }
-      if (store.isFocused.value !== !!focus || !!anchor) {
+      if (store.isFocused.value !== (!!focus || !!anchor)) {
         store.isFocused.value = !!focus || !!anchor;
       }
-      if (!anchor && !focus)
+      if (!anchor && !focus) {
         cachedSelection = JSON.parse(JSON.stringify(store.selection));
+      }
     });
     let postRendered = false;
     const onPostRender = () => {
@@ -688,6 +707,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       if (isEqual(store.selection, cachedSelection))
         return;
+      if (store.selection.anchor.blockId === store.selection.focus.blockId && store.currentBlock && store.currentBlock.editable === false) {
+        return;
+      }
       const anchor = getNode(store.selection.anchor.blockId);
       const focus = getNode(store.selection.focus.blockId);
       const nativeSelection = window.getSelection();
@@ -760,7 +782,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "textEditorRef",
         ref: textEditorRef,
         contenteditable: "",
-        onInput: _cache[0] || (_cache[0] = //@ts-ignore
+        onBeforeinput: _cache[0] || (_cache[0] = //@ts-ignore
         (...args) => unref(store).onInput && unref(store).onInput(...args)),
         onKeydown: onKeyDown,
         onCopy,
@@ -776,7 +798,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onPostrender: onPostRender
           }, null, 8, ["block", "slots", "decorator"]);
         }), 128)),
-        unref(store).blocks.length === 1 && unref(store).blocks[0].text === "" ? renderSlot(_ctx.$slots, "placeholder", { key: 0 }) : createCommentVNode("", true)
+        unref(store).blocks.length === 1 && unref(store).blocks[0].text === "" && !unref(store).blocks[0].type ? renderSlot(_ctx.$slots, "placeholder", { key: 0 }) : createCommentVNode("", true)
       ], 544);
     };
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "vuewrite",
   "description": "Rich Text Editor based on Vue3 reactivity",
   "private": false,
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "license": "MIT",
   "author": "den59k",