vuewrite 0.0.8 → 0.0.10

package/dist/vuewrite.d.ts

@@ -9,6 +9,8 @@ import { Ref } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
+
 declare type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: PropType<__VLS_NonUndefinedable<T[K]>>;
@@ -18,6 +20,15 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_2<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_2<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -34,6 +45,12 @@ export declare type Block = {
 
 export declare type Decorator = (style: Style) => HTMLAttributes | undefined;
 
+declare type HistoryAction = {
+    type: "insertText" | "setText";
+    blocks: Block[];
+    selection: TextEditorSelection;
+};
+
 export declare type Style = {
     start: number;
     end: number;
@@ -49,9 +66,11 @@ text: string;
 styles?: Style[] | undefined;
 type?: string | undefined;
 }[] | undefined;
+parser?: TextParser | undefined;
 styles?: Style[] | undefined;
 autofocus?: boolean | undefined;
 autoselect?: boolean | undefined;
+preventMultiline?: boolean | undefined;
 }>, {
 currentStyles: ComputedRef<Map<string, Style>>;
 currentBlock: ComputedRef<    {
@@ -86,6 +105,7 @@ insertBlock: (blockData: Partial<Block>) => void;
 addNewLine: () => void;
 removeNewLine: () => void;
 selectAll: () => void;
+pushHistory: (type: "insertText" | "setText") => void;
 getClientRects: (selection: TextEditorSelection) => DOMRectList;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 keydown: (...args: any[]) => void;
@@ -99,9 +119,11 @@ text: string;
 styles?: Style[] | undefined;
 type?: string | undefined;
 }[] | undefined;
+parser?: TextParser | undefined;
 styles?: Style[] | undefined;
 autofocus?: boolean | undefined;
 autoselect?: boolean | undefined;
+preventMultiline?: boolean | undefined;
 }>>> & {
 onKeydown?: ((...args: any[]) => any) | undefined;
 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -110,9 +132,22 @@ onKeydown?: ((...args: any[]) => any) | undefined;
     placeholder?(_: {}): any;
 }>;
 
+declare class TextEditorHistory {
+    actions: HistoryAction[];
+    currentCursor: number;
+    private store;
+    constructor(store: TextEditorStore);
+    tickStarted: boolean;
+    push(type: HistoryAction["type"]): void;
+    private applyAction;
+    undo(): void;
+    redo(): void;
+}
+
 export declare type TextEditorRef = Pick<TextEditorStore, "currentStyles" | "currentBlock" | "isCollapsed" | "selection" | "toggleStyle" | "applyStyle" | "removeStyle" | "insertText" | "insertBlock" | "addNewLine" | "removeNewLine" | "selectAll"> & {
     isFocused: boolean;
     getClientRects: (selection: TextEditorSelection) => DOMRectList;
+    pushHistory: TextEditorHistory["push"];
 };
 
 declare type TextEditorSelection = {
@@ -127,6 +162,7 @@ declare type TextEditorSelection = {
 };
 
 declare class TextEditorStore {
+    history: TextEditorHistory;
     blocks: {
         id: string;
         text: string;
@@ -204,4 +240,26 @@ declare class TextEditorStore {
     selectAll(): void;
 }
 
+export declare const TextEditorView: DefineComponent<__VLS_TypePropsToRuntimeProps_2<{
+modelValue: {
+text: string;
+styles?: Style[];
+type?: string;
+}[] | string;
+decorator?: Decorator | undefined;
+parser?: TextParser | undefined;
+styles?: Style[] | undefined;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_2<{
+modelValue: {
+text: string;
+styles?: Style[];
+type?: string;
+}[] | string;
+decorator?: Decorator | undefined;
+parser?: TextParser | undefined;
+styles?: Style[] | undefined;
+}>>>, {}, {}>;
+
+declare type TextParser = (text: string) => Style[];
+
 export { }

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, reactive, computed, ref, defineComponent, getCurrentInstance, openBlock, createBlock, resolveDynamicComponent, createElementBlock, normalizeProps, mergeProps, h, nextTick, useSlots, onMounted, Fragment, renderList, renderSlot, createCommentVNode } from "vue";
+import { getCurrentScope, onScopeDispose, unref, watch, nextTick, reactive, computed, ref, defineComponent, getCurrentInstance, openBlock, createBlock, resolveDynamicComponent, createElementBlock, normalizeProps, mergeProps, h, useSlots, onMounted, Fragment, renderList, renderSlot, createCommentVNode } from "vue";
 function tryOnScopeDispose(fn) {
   if (getCurrentScope()) {
     onScopeDispose(fn);
@@ -140,8 +140,85 @@ const isEqual = (a, b) => {
   }
   return true;
 };
+class TextEditorHistory {
+  constructor(store) {
+    __publicField(this, "actions", []);
+    __publicField(this, "currentCursor", 0);
+    __publicField(this, "store");
+    __publicField(this, "tickStarted", false);
+    this.store = store;
+    window.showHistory = () => console.log(this.actions);
+  }
+  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 selection = JSON.parse(JSON.stringify(this.store.selection));
+    if (type === "insertText") {
+      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) {
+        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.currentCursor = this.actions.length - 1;
+    if (!this.tickStarted && type === "setText") {
+      this.tickStarted = true;
+      nextTick(() => {
+        this.tickStarted = false;
+      });
+    }
+  }
+  applyAction(action) {
+    if (action.type === "setText") {
+      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]);
+        }
+      }
+      if (this.store.blocks.length > action.blocks.length) {
+        this.store.blocks.length = action.blocks.length;
+      }
+    } else {
+      for (let _block of action.blocks) {
+        const block = this.store.blocks.find((block2) => block2.id === _block.id);
+        if (block) {
+          block.text = _block.text;
+        }
+      }
+    }
+    Object.assign(this.store.selection, action.selection);
+  }
+  undo() {
+    if (this.currentCursor === 0)
+      return;
+    this.currentCursor--;
+    this.applyAction(this.actions[this.currentCursor]);
+  }
+  redo() {
+    if (this.currentCursor >= this.actions.length - 1)
+      return;
+    this.currentCursor++;
+    this.applyAction(this.actions[this.currentCursor]);
+  }
+}
 class TextEditorStore {
   constructor() {
+    __publicField(this, "history", new TextEditorHistory(this));
     __publicField(this, "blocks", reactive([{ id: uid(), text: "", styles: [] }]));
     __publicField(this, "selection", reactive({
       anchor: { blockId: this.blocks[0].id, offset: 0 },
@@ -214,16 +291,17 @@ class TextEditorStore {
     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);
     } 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.history.push("setText");
   }
   onInput(_e) {
     const ev = _e;
@@ -266,6 +344,7 @@ class TextEditorStore {
     }
     if (ev.inputType === "insertText") {
       this.insertText(ev.data);
+      this.history.push("insertText");
     }
   }
   addNewLine() {
@@ -279,13 +358,15 @@ 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");
   }
   insertText(data) {
     const block = this.currentBlock;
     if (!block)
       return;
-    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));
+    const text = data.replace(/\r/g, "");
+    block.text = block.text.slice(0, this.selection.focus.offset) + text + block.text.slice(this.selection.focus.offset);
+    this.moveOffset(clamp(this.selection.focus.offset + text.length, 0, block.text.length));
   }
   insertBlock(blockData) {
     if (!this.currentBlock)
@@ -303,6 +384,7 @@ class TextEditorStore {
     if (blockData.editable === false && this.currentBlock === this.blocks[this.blocks.length - 1]) {
       this.addNewLine();
     }
+    this.history.push("setText");
   }
   get startAndEnd() {
     const a = this.blocks.findIndex((block) => block.id === this.selection.anchor.blockId);
@@ -442,12 +524,13 @@ class TextEditorStore {
 }
 let uidCounter = 0;
 const uid = () => (uidCounter++).toString();
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "TextEditorBlock",
   props: {
     block: {},
     slots: {},
-    decorator: { type: Function }
+    decorator: { type: Function },
+    parser: {}
   },
   emits: ["postrender"],
   setup(__props, { emit: __emit }) {
@@ -542,9 +625,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         text = text + "\n";
       }
       const markers = [];
-      for (let style of block.styles) {
-        markers.push([style.start, style]);
-        markers.push([style.end, style]);
+      if (block.styles) {
+        for (let style of block.styles) {
+          markers.push([style.start, style]);
+          markers.push([style.end, style]);
+        }
+      }
+      if (props.parser) {
+        for (let style of props.parser(text)) {
+          markers.push([style.start, style]);
+          markers.push([style.end, style]);
+        }
       }
       markers.sort((a, b) => a[0] - b[0]);
       let currentIndex = 0;
@@ -582,15 +673,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "TextEditor",
   props: {
     decorator: { type: Function },
     single: { type: Boolean },
     modelValue: {},
+    parser: { type: Function },
     styles: {},
     autofocus: { type: Boolean },
-    autoselect: { type: Boolean }
+    autoselect: { type: Boolean },
+    preventMultiline: { type: Boolean }
   },
   emits: ["keydown", "update:modelValue", "update:styles"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -649,7 +742,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       if (e.code === "Enter") {
         e.preventDefault();
-        if (e.shiftKey || props.single) {
+        if (!props.preventMultiline && (e.shiftKey || props.single)) {
           store.insertText("\n");
         } else {
           store.addNewLine();
@@ -660,24 +753,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           e.preventDefault();
         }
       }
+      if ((e.ctrlKey || e.metaKey) && e.code === "KeyZ" && !e.shiftKey) {
+        e.preventDefault();
+        store.history.undo();
+      }
+      if ((e.ctrlKey || e.metaKey) && (e.code === "KeyY" || e.shiftKey && e.code === "KeyZ")) {
+        e.preventDefault();
+        store.history.redo();
+      }
     };
     let cachedSelection = {};
     useEventListener(document, "selectionchange", () => {
       const sel = window.getSelection();
       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;
+        const isNonEditable = anchor.getAttribute("contenteditable") === "false";
+        const offset = isNonEditable || anchor === sel.focusNode ? 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") && el.parentElement === textEditorRef.value);
       if (focus) {
-        const offset = anchor === sel.focusNode ? 0 : calcOffsetToNode(focus, sel.focusNode) + sel.focusOffset;
+        const isNonEditable = focus.getAttribute("contenteditable") === "false";
+        const offset = isNonEditable || focus === 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)) {
         store.isFocused.value = !!focus || !!anchor;
       }
-      if (!anchor && !focus) {
+      if (anchor && focus) {
         cachedSelection = JSON.parse(JSON.stringify(store.selection));
       }
     });
@@ -732,15 +835,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (_b = textEditorRef.value) == null ? void 0 : _b.focus();
         store.selectAll();
       }
+      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;
@@ -749,6 +855,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!text)
         return;
       store.insertText(text);
+      store.history.push("setText");
     };
     const getClientRects = (selection) => {
       const anchor = getNode(selection.anchor.blockId);
@@ -775,6 +882,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       addNewLine: store.addNewLine.bind(store),
       removeNewLine: store.removeNewLine.bind(store),
       selectAll: store.selectAll.bind(store),
+      pushHistory: store.history.push.bind(store.history),
       getClientRects
     });
     return (_ctx, _cache) => {
@@ -790,19 +898,53 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onCut
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(store).blocks, (block) => {
-          return openBlock(), createBlock(_sfc_main$1, {
+          return openBlock(), createBlock(_sfc_main$2, {
             key: block.id,
             block,
             slots: unref(slots),
             decorator: props.decorator,
+            parser: props.parser,
             onPostrender: onPostRender
-          }, null, 8, ["block", "slots", "decorator"]);
+          }, null, 8, ["block", "slots", "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);
     };
   }
 });
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TextEditorView",
+  props: {
+    modelValue: {},
+    decorator: { type: Function },
+    parser: {},
+    styles: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const blocks = computed(() => {
+      if (Array.isArray(props.modelValue)) {
+        return props.modelValue;
+      }
+      return [{ text: props.modelValue, styles: props.styles ?? [] }];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(blocks.value, (block) => {
+          return openBlock(), createBlock(_sfc_main$2, {
+            key: block.id,
+            block,
+            slots: unref(slots),
+            decorator: props.decorator,
+            parser: props.parser
+          }, null, 8, ["block", "slots", "decorator", "parser"]);
+        }), 128))
+      ]);
+    };
+  }
+});
 export {
-  _sfc_main as TextEditor
+  _sfc_main$1 as TextEditor,
+  _sfc_main as TextEditorView
 };

package/package.json

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