vuewrite 0.0.5 → 0.0.7

package/dist/vuewrite.d.ts

@@ -43,9 +43,14 @@ export declare type Style = {
 export declare const TextEditor: __VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<{
 decorator?: Decorator | undefined;
 single?: boolean | undefined;
-modelValue?: string | string[] | undefined;
-styles?: Style[] | Style[][] | undefined;
+modelValue?: string | {
+text: string;
+styles?: Style[] | undefined;
+type?: string | undefined;
+}[] | undefined;
+styles?: Style[] | undefined;
 autofocus?: boolean | undefined;
+autoselect?: boolean | undefined;
 }>, {
 currentStyles: ComputedRef<Map<string, Style>>;
 currentBlock: ComputedRef<    {
@@ -75,7 +80,11 @@ toggleStyle: (style: string) => void;
 applyStyle: (_style: string, meta?: any) => void;
 removeStyle: (_style: string) => void;
 insertText: (data: string) => void;
+insertBlock: (blockData: Partial<Block>) => void;
+addNewLine: () => void;
+removeNewLine: () => void;
 selectAll: () => void;
+getClientRects: (selection: TextEditorSelection) => DOMRectList;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 keydown: (...args: any[]) => void;
 "update:modelValue": (...args: any[]) => void;
@@ -83,9 +92,14 @@ keydown: (...args: any[]) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
 decorator?: Decorator | undefined;
 single?: boolean | undefined;
-modelValue?: string | string[] | undefined;
-styles?: Style[] | Style[][] | undefined;
+modelValue?: string | {
+text: string;
+styles?: Style[] | undefined;
+type?: string | undefined;
+}[] | undefined;
+styles?: Style[] | undefined;
 autofocus?: boolean | undefined;
+autoselect?: boolean | undefined;
 }>>> & {
 onKeydown?: ((...args: any[]) => any) | undefined;
 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -94,8 +108,20 @@ onKeydown?: ((...args: any[]) => any) | undefined;
     placeholder?(_: {}): any;
 }>;
 
-export declare type TextEditorRef = Pick<TextEditorStore, "currentStyles" | "currentBlock" | "isCollapsed" | "selection" | "toggleStyle" | "applyStyle" | "removeStyle" | "insertText" | "selectAll"> & {
+export declare type TextEditorRef = Pick<TextEditorStore, "currentStyles" | "currentBlock" | "isCollapsed" | "selection" | "toggleStyle" | "applyStyle" | "removeStyle" | "insertText" | "insertBlock" | "addNewLine" | "removeNewLine" | "selectAll"> & {
     isFocused: boolean;
+    getClientRects: (selection: TextEditorSelection) => DOMRectList;
+};
+
+declare type TextEditorSelection = {
+    anchor: {
+        blockId: string;
+        offset: number;
+    };
+    focus: {
+        blockId: string;
+        offset: number;
+    };
 };
 
 declare class TextEditorStore {
@@ -148,9 +174,11 @@ declare class TextEditorStore {
     _selectedText: ComputedRef<string>;
     get selectedText(): string;
     moveOffset(newOffset: number): void;
+    removeNewLine(): void;
     onInput(_e: Event): void;
     addNewLine(): void;
     insertText(data: string): void;
+    insertBlock(blockData: Partial<Block>): void;
     get startAndEnd(): [{
         blockId: string;
         offset: number;

package/dist/vuewrite.js

@@ -202,6 +202,16 @@ class TextEditorStore {
     this.selection.anchor.offset = newOffset;
     this.selection.focus.offset = newOffset;
   }
+  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;
+    this.blocks.splice(blockIndex, 1);
+  }
   onInput(_e) {
     const ev = _e;
     ev.preventDefault();
@@ -212,16 +222,9 @@ class TextEditorStore {
     if (!block)
       return;
     if ((ev.inputType === "deleteContentBackward" || ev.inputType === "deleteContentForward") && collapsed) {
-      const blockIndex = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
       if (ev.inputType === "deleteContentBackward") {
         if (this.selection.anchor.offset === 0) {
-          if (blockIndex > 0) {
-            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);
-          }
+          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);
@@ -229,6 +232,7 @@ 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);
         } else {
@@ -260,6 +264,20 @@ class TextEditorStore {
     block.text = block.text.slice(0, this.selection.focus.offset) + data + block.text.slice(this.selection.focus.offset);
     this.moveOffset(clamp(this.selection.focus.offset + data.length, 0, block.text.length));
   }
+  insertBlock(blockData) {
+    if (!this.currentBlock)
+      return;
+    this.deleteSelected();
+    if (this.currentBlock.text !== "") {
+      this.addNewLine();
+    }
+    if (this.currentBlock.text !== "") {
+      const selection = JSON.parse(JSON.stringify(this.selection));
+      this.addNewLine();
+      Object.assign(this.selection, selection);
+    }
+    Object.assign(this.currentBlock, blockData);
+  }
   get startAndEnd() {
     const a = this.blocks.findIndex((block) => block.id === this.selection.anchor.blockId);
     const f = this.blocks.findIndex((block) => block.id === this.selection.focus.blockId);
@@ -415,7 +433,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return props.slots[props.block.type] ?? null;
     });
     const blockProps = {
-      "data-block-id": props.block.id
+      "data-vw-block-id": props.block.id
     };
     const renderBlockPart = (text, styles) => {
       if (!props.decorator)
@@ -543,7 +561,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     single: { type: Boolean },
     modelValue: {},
     styles: {},
-    autofocus: { type: Boolean }
+    autofocus: { type: Boolean },
+    autoselect: { type: Boolean }
   },
   emits: ["keydown", "update:modelValue", "update:styles"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -565,7 +584,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
         store.blocks.length = newValue.length;
         for (let i = 0; i < newValue.length; i++) {
-          store.blocks[i].text = newValue[i];
+          store.blocks[i].text = newValue[i].text;
+          store.blocks[i].type = newValue[i].type;
+          store.blocks[i].text = newValue[i].text;
         }
       }
     }, { immediate: true });
@@ -576,20 +597,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       for (let i = 0; i < store.blocks.length; i++) {
         if (newStyles.length <= i)
           break;
-        const style = props.single ? newStyles : newStyles[i];
-        store.blocks[i].styles = style;
+        store.blocks[i].styles = newStyles;
       }
     }, { immediate: true });
     watch(() => store.blocks, () => {
       if (props.single) {
         modelValue = store.blocks[0].text;
         styles = store.blocks[0].styles;
+        emit("update:styles", styles);
+        emit("update:modelValue", modelValue);
       } else {
-        modelValue = store.blocks.map((item) => item.text);
-        styles = store.blocks.map((item) => item.styles);
+        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", modelValue);
-      emit("update:styles", styles);
     }, { deep: true });
     const onKeyDown = (e) => {
       emit("keydown", e);
@@ -604,8 +628,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
       if (e.code === "Backspace") {
-        if (store.isCollapsed && store.currentBlock === store.blocks[0] && store.selection.anchor.offset === 0) {
+        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) {
@@ -617,15 +646,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let cachedSelection = {};
     useEventListener(document, "selectionchange", () => {
       const sel = window.getSelection();
-      const anchor = findParent(sel.anchorNode, (el) => el.hasAttribute("data-block-id"));
+      const anchor = findParent(sel.anchorNode, (el) => el.hasAttribute("data-vw-block-id"));
       if (anchor) {
         const offset = anchor === sel.anchorNode ? 0 : calcOffsetToNode(anchor, sel.anchorNode) + sel.anchorOffset;
-        store.selection.anchor = { blockId: anchor.getAttribute("data-block-id"), offset };
+        store.selection.anchor = { blockId: anchor.getAttribute("data-vw-block-id"), offset };
       }
-      const focus = findParent(sel.focusNode, (el) => el.hasAttribute("data-block-id"));
+      const focus = findParent(sel.focusNode, (el) => el.hasAttribute("data-vw-block-id"));
       if (focus) {
         const offset = anchor === sel.focusNode ? 0 : calcOffsetToNode(focus, sel.focusNode) + sel.focusOffset;
-        store.selection.focus = { blockId: focus.getAttribute("data-block-id"), offset };
+        store.selection.focus = { blockId: focus.getAttribute("data-vw-block-id"), offset };
       }
       if (store.isFocused.value !== !!focus || !!anchor) {
         store.isFocused.value = !!focus || !!anchor;
@@ -644,6 +673,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         postRendered = false;
       });
     };
+    const getNode = (blockId) => {
+      for (let item of textEditorRef.value.children) {
+        if (item.getAttribute("data-vw-block-id") === blockId) {
+          return item;
+        }
+      }
+      return null;
+    };
     const applySelection = () => {
       if (!store.isFocused.value) {
         cachedSelection = JSON.parse(JSON.stringify(store.selection));
@@ -651,17 +688,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       if (isEqual(store.selection, cachedSelection))
         return;
+      const anchor = getNode(store.selection.anchor.blockId);
+      const focus = getNode(store.selection.focus.blockId);
       const nativeSelection = window.getSelection();
-      let anchor = null;
-      let focus = null;
-      for (let item of textEditorRef.value.children) {
-        if (item.getAttribute("data-block-id") === store.selection.anchor.blockId) {
-          anchor = item;
-        }
-        if (item.getAttribute("data-block-id") === store.selection.focus.blockId) {
-          focus = item;
-        }
-      }
       if (anchor && focus) {
         nativeSelection.setBaseAndExtent(
           ...calcNodeByOffset(anchor, store.selection.anchor.offset),
@@ -672,11 +701,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     watch(() => store.selection, applySelection, { deep: true, flush: "post" });
     onMounted(() => {
-      var _a;
+      var _a, _b;
       if (props.autofocus) {
         (_a = textEditorRef.value) == null ? void 0 : _a.focus();
         applySelection();
       }
+      if (props.autoselect) {
+        (_b = textEditorRef.value) == null ? void 0 : _b.focus();
+        store.selectAll();
+      }
     });
     const onCopy = (e) => {
       e.preventDefault();
@@ -695,6 +728,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       store.insertText(text);
     };
+    const getClientRects = (selection) => {
+      const anchor = getNode(selection.anchor.blockId);
+      const focus = getNode(selection.focus.blockId);
+      if (anchor && focus) {
+        const range = new Range();
+        range.setStart(...calcNodeByOffset(anchor, selection.anchor.offset));
+        range.setEnd(...calcNodeByOffset(focus, selection.focus.offset));
+        return range.getClientRects();
+      }
+      return new DOMRectList();
+    };
     __expose({
       currentStyles: store._currentStyles,
       currentBlock: store._currentBlock,
@@ -705,7 +749,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       applyStyle: store.applyStyle.bind(store),
       removeStyle: store.removeStyle.bind(store),
       insertText: store.insertText.bind(store),
-      selectAll: store.selectAll.bind(store)
+      insertBlock: store.insertBlock.bind(store),
+      addNewLine: store.addNewLine.bind(store),
+      removeNewLine: store.removeNewLine.bind(store),
+      selectAll: store.selectAll.bind(store),
+      getClientRects
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {

package/package.json

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