vuewrite 0.0.21 → 0.0.22-a

package/dist/vuewrite.d.ts

@@ -31,7 +31,7 @@ export declare type Block = {
     id: string;
     text: string;
     type?: string;
-    styles: Style[];
+    styles?: Style[];
     editable?: boolean;
 };
 
@@ -46,7 +46,7 @@ declare type HistoryAction = {
     selection: TextEditorSelection;
 };
 
-declare type Modifier = (block: Block) => HTMLAttributes & {
+declare type Renderer = (block: Block) => HTMLAttributes & {
     tag?: string;
 } | undefined;
 
@@ -59,7 +59,7 @@ export declare type Style = {
 
 export declare const TextEditor: __VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<{
 decorator?: Decorator | undefined;
-modifier?: Modifier | undefined;
+renderer?: Renderer | undefined;
 single?: boolean | undefined;
 modelValue?: string | {
 text: string;
@@ -77,12 +77,12 @@ currentBlock: ComputedRef<    {
 id: string;
 text: string;
 type?: string | undefined;
-styles: {
+styles?: {
 start: number;
 end: number;
 style: string;
 meta?: any;
-}[];
+}[] | undefined;
 editable?: boolean | undefined;
 } | null>;
 isCollapsed: ComputedRef<boolean>;
@@ -104,6 +104,7 @@ insertText: (data: string) => void;
 insertBlock: (blockData: Partial<Block>) => void;
 addNewLine: () => void;
 removeNewLine: () => void;
+removeCurrentBlock: () => void;
 selectAll: () => void;
 pushHistory: (type: string) => void;
 getClientRects: (selection: TextEditorSelection) => DOMRectList;
@@ -113,7 +114,7 @@ keydown: (...args: any[]) => void;
 "update:styles": (...args: any[]) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
 decorator?: Decorator | undefined;
-modifier?: Modifier | undefined;
+renderer?: Renderer | undefined;
 single?: boolean | undefined;
 modelValue?: string | {
 text: string;
@@ -149,7 +150,7 @@ declare class TextEditorHistory {
     redo(): void;
 }
 
-export declare type TextEditorRef = Pick<TextEditorStore, "currentStyles" | "currentBlock" | "isCollapsed" | "selection" | "toggleStyle" | "applyStyle" | "removeStyle" | "insertText" | "insertBlock" | "addNewLine" | "removeNewLine" | "selectAll"> & {
+export declare type TextEditorRef = Pick<TextEditorStore, "currentStyles" | "currentBlock" | "isCollapsed" | "selection" | "toggleStyle" | "applyStyle" | "removeStyle" | "insertText" | "insertBlock" | "addNewLine" | "removeNewLine" | "selectAll" | "removeCurrentBlock"> & {
     isFocused: boolean;
     getClientRects: (selection: TextEditorSelection) => DOMRectList;
     pushHistory: TextEditorHistory["push"];
@@ -172,12 +173,12 @@ declare class TextEditorStore {
         id: string;
         text: string;
         type?: string | undefined;
-        styles: {
+        styles?: {
             start: number;
             end: number;
             style: string;
             meta?: any;
-        }[];
+        }[] | undefined;
         editable?: boolean | undefined;
     }[];
     selection: {
@@ -197,37 +198,39 @@ declare class TextEditorStore {
     id: string;
     text: string;
     type?: string | undefined;
-    styles: {
+    styles?: {
     start: number;
     end: number;
     style: string;
     meta?: any;
-    }[];
+    }[] | undefined;
     editable?: boolean | undefined;
     } | null>;
     get currentBlock(): {
         id: string;
         text: string;
         type?: string | undefined;
-        styles: {
+        styles?: {
             start: number;
             end: number;
             style: string;
             meta?: any;
-        }[];
+        }[] | undefined;
         editable?: boolean | undefined;
     } | null;
     _selectedText: ComputedRef<string>;
     get selectedText(): string;
     moveOffset(newOffset: number): void;
+    private addStyleToBlock;
     concatBlocks(start: Block, end: Block): void;
+    removeCurrentBlock(): void;
     removeNewLine(): void;
     onInput(_e: Event): void;
+    addNewLineBefore(): void;
     addNewLine(): void;
     addNewLineAfter(): {
         id: string;
         text: string;
-        styles: never[];
     };
     insertText(data: string): void;
     insertBlock(blockData: Partial<Block>): void;
@@ -253,7 +256,7 @@ declare class TextEditorStore {
 export declare const TextEditorView: DefineComponent<Readonly<{
 styles?: any;
 decorator?: any;
-modifier?: any;
+renderer?: any;
 parser?: any;
 modelValue?: any;
 }>, () => VNode<RendererNode, RendererElement, {
@@ -261,13 +264,13 @@ modelValue?: any;
 }>, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<Readonly<{
 styles?: any;
 decorator?: any;
-modifier?: any;
+renderer?: any;
 parser?: any;
 modelValue?: any;
 }>>>, {
 readonly styles?: any;
 readonly decorator?: any;
-readonly modifier?: any;
+readonly renderer?: any;
 readonly parser?: any;
 readonly modelValue?: any;
 }, {}>;

package/dist/vuewrite.js

@@ -261,7 +261,10 @@ class TextEditorStore {
       if (startIndex < 0)
         return styles;
       for (let i = startIndex; i <= endIndex; i++) {
-        for (let style of this.blocks[i].styles) {
+        const blockStyles = this.blocks[i].styles;
+        if (!blockStyles)
+          continue;
+        for (let style of blockStyles) {
           if (i === startIndex && start.offset < style.start)
             continue;
           if (i === endIndex && end.offset > style.end)
@@ -289,25 +292,56 @@ class TextEditorStore {
     this.selection.anchor.offset = newOffset;
     this.selection.focus.offset = newOffset;
   }
+  addStyleToBlock(block, style) {
+    if (!block.styles) {
+      block.styles = [style];
+    } else {
+      block.styles.push(style);
+    }
+    block.styles.sort((a, b) => a.start - b.start);
+  }
   concatBlocks(start, end) {
-    for (let style of end.styles) {
-      style.start += start.text.length;
-      style.end += start.text.length;
-      start.styles.push(style);
+    if (end.styles) {
+      for (let style of end.styles) {
+        style.start += start.text.length;
+        style.end += start.text.length;
+        this.addStyleToBlock(start, style);
+      }
     }
     start.text = start.text + end.text;
   }
+  removeCurrentBlock() {
+    const blockIndex = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
+    if (blockIndex < 0)
+      return;
+    this.blocks.splice(blockIndex, 1);
+    if (this.blocks.length === 0) {
+      this.blocks.push({ id: uid(), text: "" });
+    }
+    const newBlockIndex = Math.max(blockIndex - 1, 0);
+    this.selection.anchor.blockId = this.blocks[newBlockIndex].id;
+    this.selection.focus.blockId = this.blocks[newBlockIndex].id;
+    this.selection.anchor.offset = blockIndex === 0 ? 0 : this.blocks[newBlockIndex].text.length;
+    this.selection.focus.offset = blockIndex === 0 ? 0 : this.blocks[newBlockIndex].text.length;
+    this.history.push("removeBlock");
+  }
   removeNewLine() {
     const blockIndex = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
     if (blockIndex < 1)
       return;
-    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;
     if (this.blocks[blockIndex - 1].editable === false) {
-      this.blocks.splice(blockIndex - 1, 1);
+      if (this.blocks[blockIndex].text === "") {
+        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 = 0;
+      this.selection.focus.offset = 0;
     } else {
+      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.concatBlocks(this.blocks[blockIndex - 1], this.blocks[blockIndex]);
       this.blocks.splice(blockIndex, 1);
     }
@@ -358,20 +392,24 @@ class TextEditorStore {
       this.history.push("insertText");
     }
   }
+  addNewLineBefore() {
+    const index = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
+    const block = { id: uid(), text: "" };
+    this.blocks.splice(index, 0, block);
+    this.history.push("addNewLine");
+  }
   addNewLine() {
-    if (this.isCollapsed && this.selection.anchor.offset === 0) {
-      const index2 = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
-      const block2 = { id: uid(), text: "", styles: [] };
-      this.blocks.splice(index2, 0, block2);
-      this.history.push("addNewLine");
+    var _a;
+    if (this.isCollapsed && this.selection.anchor.offset === 0 && ((_a = this.currentBlock) == null ? void 0 : _a.editable) !== false) {
+      this.addNewLineBefore();
       return;
     }
     this.deleteSelected();
     if (!this.currentBlock)
       return;
-    const endText = this.currentBlock.text.slice(this.selection.anchor.offset);
+    const endText = this.currentBlock.editable === false ? "" : this.currentBlock.text.slice(this.selection.anchor.offset);
     this.currentBlock.text = this.currentBlock.text.slice(0, this.selection.anchor.offset);
-    const block = { id: uid(), text: endText || "", styles: [] };
+    const block = { id: uid(), text: endText || "" };
     const index = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
     this.blocks.splice(index + 1, 0, block);
     this.selection.anchor = { blockId: block.id, offset: 0 };
@@ -380,7 +418,7 @@ class TextEditorStore {
   }
   addNewLineAfter() {
     const index = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
-    const block = { id: uid(), text: "", styles: [] };
+    const block = { id: uid(), text: "" };
     this.blocks.splice(index + 1, 0, block);
     return block;
   }
@@ -424,6 +462,8 @@ class TextEditorStore {
     }
   }
   moveStyles(block, offset, delta) {
+    if (!block.styles)
+      return;
     for (let i = 0; i < block.styles.length; i++) {
       const style = block.styles[i];
       if (style.start >= offset)
@@ -468,20 +508,22 @@ class TextEditorStore {
       const _start = i === startIndex ? start.offset : 0;
       const _end = i === endIndex ? end.offset : block.text.length;
       let createNewStyle = true;
-      for (let style of block.styles) {
-        if (style.style !== _style)
-          continue;
-        if (style.start > _end || style.end < _start)
-          continue;
-        if (meta && !isEqual(meta, style.meta) && (style.start !== _start || style.end !== _end)) {
-          if (_start === style.end || _end === style.start)
+      if (block.styles) {
+        for (let style of block.styles) {
+          if (style.style !== _style)
             continue;
-          this.removeStyleAt(block, _start, _end, _style);
-        } else {
-          style.start = Math.min(style.start, _start);
-          style.end = Math.max(style.end, _end);
-          createNewStyle = false;
-          style.meta = meta;
+          if (style.start > _end || style.end < _start)
+            continue;
+          if (meta && !isEqual(meta, style.meta) && (style.start !== _start || style.end !== _end)) {
+            if (_start === style.end || _end === style.start)
+              continue;
+            this.removeStyleAt(block, _start, _end, _style);
+          } else {
+            style.start = Math.min(style.start, _start);
+            style.end = Math.max(style.end, _end);
+            createNewStyle = false;
+            style.meta = meta;
+          }
         }
       }
       if (createNewStyle) {
@@ -491,14 +533,15 @@ class TextEditorStore {
           style: _style,
           meta
         };
-        block.styles.push(newStyle);
-        block.styles.sort((a, b) => a.start - b.start);
+        this.addStyleToBlock(block, newStyle);
       }
     }
     this.history.push("applyStyle");
   }
   removeStyleAt(block, _start, _end, _style) {
     const removeAll = typeof _style !== "string";
+    if (!block.styles)
+      return;
     for (let i = 0; i < block.styles.length; i++) {
       const style = block.styles[i];
       if (!removeAll && style.style !== _style)
@@ -517,6 +560,9 @@ class TextEditorStore {
         style.start = _end;
       }
     }
+    if (block.styles.length === 0) {
+      delete block.styles;
+    }
   }
   removeStyle(_style) {
     const [start, end, startIndex, endIndex] = this.startAndEnd;
@@ -533,7 +579,7 @@ class TextEditorStore {
     for (let i = startIndex; i <= endIndex; i++) {
       const block = this.blocks[i];
       if (i > startIndex && i < endIndex) {
-        block.styles.length = 0;
+        delete block.styles;
         return;
       }
       const _start = i === startIndex ? start.offset : 0;
@@ -557,7 +603,7 @@ class TextEditorStore {
 let uidCounter = 0;
 const uid = () => (uidCounter++).toString();
 const _sfc_main$2 = defineComponent({
-  props: ["block", "slots", "static", "decorator", "modifier", "parser"],
+  props: ["block", "slots", "static", "decorator", "renderer", "parser"],
   emits: ["postrender"],
   setup(props, { emit }) {
     const slot = computed(() => {
@@ -697,7 +743,7 @@ const _sfc_main$2 = defineComponent({
       const blockProps = {
         "data-vw-block-id": props.block.id
       };
-      const additionalProps = props.modifier && props.modifier(props.block);
+      const additionalProps = props.renderer && props.renderer(props.block);
       if (additionalProps) {
         if (additionalProps.tag) {
           elementTag = additionalProps.tag;
@@ -825,7 +871,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "TextEditor",
   props: {
     decorator: { type: Function },
-    modifier: { type: Function },
+    renderer: { type: Function },
     single: { type: Boolean },
     modelValue: {},
     parser: { type: Function },
@@ -852,13 +898,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         return;
       } else {
         for (let i = store.blocks.length; i < newValue.length; i++) {
-          store.blocks.push({ id: uid(), text: "", styles: [] });
+          store.blocks.push({ id: uid(), text: "" });
         }
         store.blocks.length = newValue.length;
         for (let i = 0; i < newValue.length; i++) {
-          store.blocks[i].text = newValue[i].text;
-          store.blocks[i].type = newValue[i].type;
-          store.blocks[i].styles = newValue[i].styles ?? [];
+          store.blocks[i] = { ...newValue[i], id: uid() };
         }
       }
     }, { immediate: true });
@@ -879,12 +923,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         emit("update:styles", styles);
         emit("update:modelValue", modelValue);
       } else {
-        modelValue = store.blocks.map((item) => ({
-          type: item.type,
-          text: item.text,
-          styles: item.styles.length === 0 ? void 0 : item.styles
-        }));
-        emit("update:modelValue", modelValue);
+        emit("update:modelValue", store.blocks);
       }
     }, { deep: true });
     const onKeyDown = (e) => {
@@ -955,15 +994,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return null;
     };
     const applySelection = () => {
+      var _a;
       if (!store.isFocused.value) {
         cachedSelection = JSON.parse(JSON.stringify(store.selection));
         return;
       }
       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();
@@ -973,6 +1010,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           ...calcNodeByOffset(focus, store.selection.focus.offset)
         );
       }
+      if (store.selection.anchor.blockId === store.selection.focus.blockId && ((_a = store.currentBlock) == null ? void 0 : _a.editable) === false) {
+        const innerText = anchor == null ? void 0 : anchor.querySelector("[data-vw-block-id]");
+        if (innerText) {
+          nativeSelection.setBaseAndExtent(innerText, 0, innerText, 0);
+        }
+      }
       cachedSelection = JSON.parse(JSON.stringify(store.selection));
     };
     watch(() => store.selection, applySelection, { deep: true, flush: "post" });
@@ -1013,6 +1056,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       insertBlock: store.insertBlock.bind(store),
       addNewLine: store.addNewLine.bind(store),
       removeNewLine: store.removeNewLine.bind(store),
+      removeCurrentBlock: store.removeCurrentBlock.bind(store),
       selectAll: store.selectAll.bind(store),
       pushHistory: store.history.push.bind(store.history),
       getClientRects
@@ -1037,11 +1081,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             key: block.id,
             block,
             slots: unref(slots),
-            modifier: props.modifier,
+            renderer: props.renderer,
             decorator: props.decorator,
             parser: props.parser,
             onPostrender: onPostRender
-          }, null, 8, ["block", "slots", "modifier", "decorator", "parser"]);
+          }, null, 8, ["block", "slots", "renderer", "decorator", "parser"]);
         }), 128)),
         unref(store).blocks.length === 1 && unref(store).blocks[0].text === "" && !unref(store).blocks[0].type ? renderSlot(_ctx.$slots, "placeholder", { key: 0 }) : createCommentVNode("", true)
       ], 544);
@@ -1049,7 +1093,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const _sfc_main = defineComponent({
-  props: ["modelValue", "decorator", "parser", "styles", "modifier"],
+  props: ["modelValue", "decorator", "parser", "styles", "renderer"],
   setup(props, { slots }) {
     const blocks = computed(() => {
       if (Array.isArray(props.modelValue)) {
@@ -1062,7 +1106,7 @@ const _sfc_main = defineComponent({
       block,
       slots,
       decorator: props.decorator,
-      modifier: props.modifier,
+      renderer: props.renderer,
       parser: props.parser,
       static: true
     })));

package/package.json

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