vuewrite 0.0.20 → 0.0.21-a

package/.vscode/extensions.json

@@ -1,3 +1,3 @@
-{
-  "recommendations": ["Vue.volar"]
-}
+{
+  "recommendations": ["Vue.volar"]
+}

package/README.md

@@ -1,68 +1,68 @@
-# VueWrite
-
-VueWrite is another text editor that takes full advantage of Vue3's features. 
-It contains no pre-made styles and blocks as its main goal is complete customization and extension
-
-## Demo
-
-You can watch the demo [here](https://vuewrite.easix.ru)
-
-## Quickstart
-
-```vue
-<template>
-  <TextEditor 
-    ref="textEditorRef" 
-    v-model="modelValue"
-    single
-    class="text-editor"
-    :decorator="decorator" 
-    @keydown="onKeyDown"
-  />
-</template>
-
-<script lang="ts">
-import { TextEditor, TextEditorRef } from 'vuewrite'
-
-const textEditorRef = shallowRef<TextEditorRef>()
-const modelValue = shallowRef("")
-
-const onKeyDown = (e: KeyboardEvent) => {
-  if (!textEditorRef.value) return
-  if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
-    if (e.code === "KeyB") {
-      textEditorRef.value.toggleStyle("bold")
-    }
-    if (e.code === "KeyI") {
-      textEditorRef.value.toggleStyle("italic")
-    }
-    if (e.code === "KeyU") {
-      textEditorRef.value.toggleStyle("underline")
-    }
-  }
-}
-
-const decorator = (style: Style) => {
-  if (style.style === 'bold' || style.style === "underline" || style.style === "italic") {
-    return { class: style.style }
-  }
-}
-
-</script>
-
-<style lang="css">
-.text-editor {
-  white-space: pre-wrap;
-}
-.text-editor .bold {
-  font-weight: 700
-}
-.text-editor .italic {
-  font-style: italic
-}
-.text-editor .underline {
-  text-decoration: underline
-}
-</style>
-
+# VueWrite
+
+VueWrite is another text editor that takes full advantage of Vue3's features. 
+It contains no pre-made styles and blocks as its main goal is complete customization and extension
+
+## Demo
+
+You can watch the demo [here](https://vuewrite.easix.ru)
+
+## Quickstart
+
+```vue
+<template>
+  <TextEditor 
+    ref="textEditorRef" 
+    v-model="modelValue"
+    single
+    class="text-editor"
+    :decorator="decorator" 
+    @keydown="onKeyDown"
+  />
+</template>
+
+<script lang="ts">
+import { TextEditor, TextEditorRef } from 'vuewrite'
+
+const textEditorRef = shallowRef<TextEditorRef>()
+const modelValue = shallowRef("")
+
+const onKeyDown = (e: KeyboardEvent) => {
+  if (!textEditorRef.value) return
+  if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
+    if (e.code === "KeyB") {
+      textEditorRef.value.toggleStyle("bold")
+    }
+    if (e.code === "KeyI") {
+      textEditorRef.value.toggleStyle("italic")
+    }
+    if (e.code === "KeyU") {
+      textEditorRef.value.toggleStyle("underline")
+    }
+  }
+}
+
+const decorator = (style: Style) => {
+  if (style.style === 'bold' || style.style === "underline" || style.style === "italic") {
+    return { class: style.style }
+  }
+}
+
+</script>
+
+<style lang="css">
+.text-editor {
+  white-space: pre-wrap;
+}
+.text-editor .bold {
+  font-weight: 700
+}
+.text-editor .italic {
+  font-style: italic
+}
+.text-editor .underline {
+  text-decoration: underline
+}
+</style>
+
 ```

package/dist/vuewrite.d.ts

@@ -40,11 +40,16 @@ export declare type Decorator = (style: Style) => HTMLAttributes & {
 } | undefined;
 
 declare type HistoryAction = {
-    type: "insertText" | "setText";
+    type: string;
     blocks: Block[];
+    fullUpdate: boolean;
     selection: TextEditorSelection;
 };
 
+declare type Renderer = (block: Block) => HTMLAttributes & {
+    tag?: string;
+} | undefined;
+
 export declare type Style = {
     start: number;
     end: number;
@@ -54,6 +59,7 @@ export declare type Style = {
 
 export declare const TextEditor: __VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<{
 decorator?: Decorator | undefined;
+renderer?: Renderer | undefined;
 single?: boolean | undefined;
 modelValue?: string | {
 text: string;
@@ -99,7 +105,7 @@ insertBlock: (blockData: Partial<Block>) => void;
 addNewLine: () => void;
 removeNewLine: () => void;
 selectAll: () => void;
-pushHistory: (type: "insertText" | "setText") => void;
+pushHistory: (type: string) => void;
 getClientRects: (selection: TextEditorSelection) => DOMRectList;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 keydown: (...args: any[]) => void;
@@ -107,6 +113,7 @@ keydown: (...args: any[]) => void;
 "update:styles": (...args: any[]) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
 decorator?: Decorator | undefined;
+renderer?: Renderer | undefined;
 single?: boolean | undefined;
 modelValue?: string | {
 text: string;
@@ -129,8 +136,12 @@ onKeydown?: ((...args: any[]) => any) | undefined;
 declare class TextEditorHistory {
     actions: HistoryAction[];
     currentCursor: number;
+    private blocksIds;
+    private cachedBlocksJson;
     private store;
     constructor(store: TextEditorStore);
+    private cacheBlockIds;
+    private blockIdsChanged;
     tickStarted: boolean;
     push(type: HistoryAction["type"]): void;
     private applyAction;
@@ -242,6 +253,7 @@ declare class TextEditorStore {
 export declare const TextEditorView: DefineComponent<Readonly<{
 styles?: any;
 decorator?: any;
+renderer?: any;
 parser?: any;
 modelValue?: any;
 }>, () => VNode<RendererNode, RendererElement, {
@@ -249,11 +261,13 @@ modelValue?: any;
 }>, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<Readonly<{
 styles?: any;
 decorator?: any;
+renderer?: any;
 parser?: any;
 modelValue?: any;
 }>>>, {
 readonly styles?: any;
 readonly decorator?: any;
+readonly renderer?: any;
 readonly parser?: any;
 readonly modelValue?: any;
 }, {}>;

package/dist/vuewrite.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { getCurrentScope, onScopeDispose, unref, watch, nextTick, reactive, computed, ref, defineComponent, getCurrentInstance, h, useSlots, isProxy, toRaw, onMounted, openBlock, createElementBlock, Fragment, renderList, createBlock, renderSlot, createCommentVNode } from "vue";
+import { getCurrentScope, onScopeDispose, unref, watch, reactive, computed, ref, defineComponent, getCurrentInstance, h, nextTick, useSlots, isProxy, toRaw, onMounted, openBlock, createElementBlock, Fragment, renderList, createBlock, renderSlot, createCommentVNode } from "vue";
 function tryOnScopeDispose(fn) {
   if (getCurrentScope()) {
     onScopeDispose(fn);
@@ -144,50 +144,57 @@ class TextEditorHistory {
   constructor(store) {
     __publicField(this, "actions", []);
     __publicField(this, "currentCursor", 0);
+    __publicField(this, "blocksIds", "");
+    __publicField(this, "cachedBlocksJson", "");
     __publicField(this, "store");
     __publicField(this, "tickStarted", false);
     this.store = store;
     window.showHistory = () => console.log(this.actions);
   }
+  cacheBlockIds() {
+    this.blocksIds = this.store.blocks.map((item) => item.id).join(",");
+  }
+  blockIdsChanged() {
+    return this.blocksIds !== this.store.blocks.map((item) => item.id).join(",");
+  }
   push(type) {
     var _a;
     if (this.currentCursor + 1 < this.actions.length) {
       this.actions.length = this.currentCursor + 1;
     }
-    const lastAction = this.actions.length > 0 && this.currentCursor === this.actions.length - 1 ? this.actions[this.actions.length - 1] : null;
+    const lastAction = this.actions.length > 0 ? this.actions[this.actions.length - 1] : null;
     const selection = JSON.parse(JSON.stringify(this.store.selection));
-    if (type === "insertText") {
+    const fullUpdate = type === "setText" || type === "addNewLine" || this.blockIdsChanged();
+    const blocksJson = JSON.stringify(this.store.blocks);
+    if (!fullUpdate && this.store.currentBlock) {
       const currentBlock = JSON.parse(JSON.stringify(this.store.currentBlock));
-      if (lastAction && lastAction.type === type && ((_a = lastAction.blocks[0]) == null ? void 0 : _a.id) === currentBlock.id) {
+      if (lastAction && lastAction.type === type && ((_a = lastAction.blocks[0]) == null ? void 0 : _a.id) === currentBlock.id && (lastAction.type === "insertText" || lastAction.type === "deleteContentBackward" || lastAction.type === "deleteContentForward")) {
         lastAction.blocks = [currentBlock];
         lastAction.selection = selection;
       } else {
-        this.actions.push({ type, blocks: [currentBlock], selection });
-      }
-    } else if (type === "setText") {
-      const blocks = JSON.parse(JSON.stringify(this.store.blocks));
-      if (this.tickStarted && lastAction) {
-        lastAction.blocks = blocks;
-        lastAction.selection = selection;
-      } else {
-        this.actions.push({ type: "setText", blocks, selection });
+        this.actions.push({ type, blocks: [currentBlock], selection, fullUpdate });
       }
+    } else {
+      this.actions.push({ type, blocks: JSON.parse(blocksJson), selection, fullUpdate });
     }
     this.currentCursor = this.actions.length - 1;
-    if (!this.tickStarted && type === "setText") {
-      this.tickStarted = true;
-      nextTick(() => {
-        this.tickStarted = false;
-      });
+    if (fullUpdate) {
+      if (lastAction && !lastAction.fullUpdate) {
+        lastAction.fullUpdate = true;
+        lastAction.blocks = JSON.parse(this.cachedBlocksJson);
+      }
+      this.cacheBlockIds();
     }
+    this.cachedBlocksJson = blocksJson;
   }
   applyAction(action) {
-    if (action.type === "setText") {
+    if (action.fullUpdate) {
       for (let i = 0; i < action.blocks.length; i++) {
         if (i >= this.store.blocks.length) {
           this.store.blocks.push({ ...action.blocks[i] });
         } else {
           Object.assign(this.store.blocks[i], action.blocks[i]);
+          this.store.blocks[i].type = action.blocks[i].type;
         }
       }
       if (this.store.blocks.length > action.blocks.length) {
@@ -198,10 +205,13 @@ class TextEditorHistory {
         const block = this.store.blocks.find((block2) => block2.id === _block.id);
         if (block) {
           block.text = _block.text;
+          block.styles = _block.styles;
+          block.type = _block.type;
         }
       }
     }
     Object.assign(this.store.selection, action.selection);
+    this.cacheBlockIds();
   }
   undo() {
     if (this.currentCursor === 0)
@@ -301,7 +311,6 @@ class TextEditorStore {
       this.concatBlocks(this.blocks[blockIndex - 1], this.blocks[blockIndex]);
       this.blocks.splice(blockIndex, 1);
     }
-    this.history.push("setText");
   }
   onInput(_e) {
     const ev = _e;
@@ -327,6 +336,7 @@ class TextEditorStore {
           block.text = block.text.slice(0, offset) + block.text.slice(this.selection.focus.offset);
           this.moveOffset(offset);
         }
+        this.history.push("deleteContentBackward");
       }
       if (ev.inputType === "deleteContentForward") {
         const blockIndex = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
@@ -334,12 +344,13 @@ class TextEditorStore {
           const nextBlock = this.blocks[blockIndex + 1];
           if (nextBlock) {
             this.blocks.splice(blockIndex + 1, 1);
-            this.concatBlocks(this.blocks[blockIndex - 1], this.blocks[blockIndex]);
+            this.concatBlocks(this.blocks[blockIndex], nextBlock);
           }
         } 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);
         }
+        this.history.push("deleteContentForward");
       }
     }
     if (ev.inputType === "insertText") {
@@ -352,6 +363,7 @@ class TextEditorStore {
       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");
       return;
     }
     this.deleteSelected();
@@ -364,7 +376,7 @@ class TextEditorStore {
     this.blocks.splice(index + 1, 0, block);
     this.selection.anchor = { blockId: block.id, offset: 0 };
     this.selection.focus = { blockId: block.id, offset: 0 };
-    this.history.push("setText");
+    this.history.push("addNewLine");
   }
   addNewLineAfter() {
     const index = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
@@ -448,6 +460,8 @@ class TextEditorStore {
     return this._currentStyles.value;
   }
   applyStyle(_style, meta) {
+    if (this.isCollapsed)
+      return;
     const [start, end, startIndex, endIndex] = this.startAndEnd;
     for (let i = startIndex; i <= endIndex; i++) {
       const block = this.blocks[i];
@@ -481,6 +495,7 @@ class TextEditorStore {
         block.styles.sort((a, b) => a.start - b.start);
       }
     }
+    this.history.push("applyStyle");
   }
   removeStyleAt(block, _start, _end, _style) {
     const removeAll = typeof _style !== "string";
@@ -511,6 +526,7 @@ class TextEditorStore {
       const _end = i === endIndex ? end.offset : block.text.length;
       this.removeStyleAt(block, _start, _end, _style);
     }
+    this.history.push("applyStyle");
   }
   removeAllStyles() {
     const [start, end, startIndex, endIndex] = this.startAndEnd;
@@ -541,7 +557,7 @@ class TextEditorStore {
 let uidCounter = 0;
 const uid = () => (uidCounter++).toString();
 const _sfc_main$2 = defineComponent({
-  props: ["block", "slots", "static", "decorator", "parser"],
+  props: ["block", "slots", "static", "decorator", "renderer", "parser"],
   emits: ["postrender"],
   setup(props, { emit }) {
     const slot = computed(() => {
@@ -549,9 +565,6 @@ const _sfc_main$2 = defineComponent({
         return props.slots["default"] ?? null;
       return props.slots[props.block.type] ?? null;
     });
-    const blockProps = {
-      "data-vw-block-id": props.block.id
-    };
     const instance = getCurrentInstance();
     const getRef = () => {
       if (!instance)
@@ -675,18 +688,30 @@ const _sfc_main$2 = defineComponent({
           elementTag = tag;
         }
       }
-      if (Object.keys(attrs).length === 0)
+      if (Object.keys(attrs).length === 0 && elementTag === "span")
         return text;
       return h(elementTag, attrs, text);
     };
     return () => {
+      let elementTag = "div";
+      const blockProps = {
+        "data-vw-block-id": props.block.id
+      };
+      const additionalProps = props.renderer && props.renderer(props.block);
+      if (additionalProps) {
+        if (additionalProps.tag) {
+          elementTag = additionalProps.tag;
+          delete additionalProps.tag;
+        }
+        Object.assign(blockProps, additionalProps);
+      }
       if (slot.value) {
         const component = slot.value({ content, props: blockProps, block: props.block });
         if (Array.isArray(component) && component.length === 1)
           return component[0];
         return component;
       }
-      return h("div", blockProps, content());
+      return h(elementTag, blockProps, content());
     };
   }
 });
@@ -800,6 +825,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "TextEditor",
   props: {
     decorator: { type: Function },
+    renderer: { type: Function },
     single: { type: Boolean },
     modelValue: {},
     parser: { type: Function },
@@ -1011,10 +1037,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             key: block.id,
             block,
             slots: unref(slots),
+            renderer: props.renderer,
             decorator: props.decorator,
             parser: props.parser,
             onPostrender: onPostRender
-          }, null, 8, ["block", "slots", "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);
@@ -1022,7 +1049,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const _sfc_main = defineComponent({
-  props: ["modelValue", "decorator", "parser", "styles"],
+  props: ["modelValue", "decorator", "parser", "styles", "renderer"],
   setup(props, { slots }) {
     const blocks = computed(() => {
       if (Array.isArray(props.modelValue)) {
@@ -1035,6 +1062,7 @@ const _sfc_main = defineComponent({
       block,
       slots,
       decorator: props.decorator,
+      renderer: props.renderer,
       parser: props.parser,
       static: true
     })));

package/package.json

@@ -1,39 +1,39 @@
-{
-  "name": "vuewrite",
-  "description": "Rich Text Editor based on Vue3 reactivity",
-  "private": false,
-  "version": "0.0.20",
-  "type": "module",
-  "license": "MIT",
-  "author": "den59k",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/den59k/vuewrite.git"
-  },
-  "main": "dist/vuewrite.js",
-  "types": "dist/vuewrite.d.ts",
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "build:app": "vue-tsc && vite build -c vite-app.config.ts",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "vue": "^3",
-    "vuewrite": "^0.0.19"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vueuse/core": "^10.10.0",
-    "color2k": "^2.0.3",
-    "sass": "^1.77.2",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0",
-    "vite-plugin-dts": "^3.9.1",
-    "vue-tsc": "^2.0.6",
-    "vuesix": "^1.0.12"
-  },
-  "files": [
-    "dist"
-  ]
-}
+{
+  "name": "vuewrite",
+  "description": "Rich Text Editor based on Vue3 reactivity",
+  "private": false,
+  "version": "0.0.21-a",
+  "type": "module",
+  "license": "MIT",
+  "author": "den59k",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/den59k/vuewrite.git"
+  },
+  "main": "dist/vuewrite.js",
+  "types": "dist/vuewrite.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "build:app": "vue-tsc && vite build -c vite-app.config.ts",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3",
+    "vuewrite": "^0.0.19"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vueuse/core": "^10.10.0",
+    "color2k": "^2.0.3",
+    "sass": "^1.77.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1",
+    "vue-tsc": "^2.0.6",
+    "vuesix": "^1.0.12"
+  },
+  "files": [
+    "dist"
+  ]
+}