vuewrite 0.0.1 → 0.0.3

package/README.md

@@ -11,26 +11,33 @@ You can watch the demo [here](https://vuewrite.easix.ru)
 
 ```vue
 <template>
-<TextEditor 
-  :store="textEditorStore" 
-  class="text-editor"
-  :decorator="decorator" 
-  @keydown="onKeyDown"
-/>
+  <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 = ref("")
 
 const onKeyDown = (e: KeyboardEvent) => {
+  if (!textEditorRef.value) return
   if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
     if (e.code === "KeyB") {
-      textEditorStore.toggleStyle("bold")
+      textEditorRef.value.toggleStyle("bold")
     }
     if (e.code === "KeyI") {
-      textEditorStore.toggleStyle("italic")
+      textEditorRef.value.toggleStyle("italic")
     }
     if (e.code === "KeyU") {
-      textEditorStore.toggleStyle("underline")
+      textEditorRef.value.toggleStyle("underline")
     }
   }
 }

package/dist/vuewrite.d.ts

@@ -1,9 +1,11 @@
 import { ComponentOptionsMixin } from 'vue';
+import { ComputedRef } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { HTMLAttributes } from 'vue';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
+import { Ref } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -39,24 +41,64 @@ export declare type Style = {
 };
 
 export declare const TextEditor: __VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<{
-store: TextEditorStore;
-placeholder?: string | undefined;
 decorator?: Decorator | undefined;
+single?: boolean | undefined;
+modelValue?: string | string[] | undefined;
+styles?: Style[] | Style[][] | undefined;
+autofocus?: boolean | undefined;
 }>, {
-store: TextEditorStore;
+currentStyles: ComputedRef<Map<string, Style>>;
+currentBlock: ComputedRef<    {
+id: string;
+text: string;
+type?: string | undefined;
+styles: {
+start: number;
+end: number;
+style: string;
+meta?: any;
+}[];
+} | null>;
+isCollapsed: ComputedRef<boolean>;
+selection: {
+anchor: {
+blockId: string;
+offset: number;
+};
+focus: {
+blockId: string;
+offset: number;
+};
+};
+isFocused: Ref<boolean>;
+toggleStyle: (style: string) => void;
+applyStyle: (_style: string, meta?: any) => void;
+removeStyle: (_style: string) => void;
+insertText: (data: string) => void;
+selectAll: () => void;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 keydown: (...args: any[]) => void;
+"update:modelValue": (...args: any[]) => void;
+"update:styles": (...args: any[]) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-store: TextEditorStore;
-placeholder?: string | undefined;
 decorator?: Decorator | undefined;
+single?: boolean | undefined;
+modelValue?: string | string[] | undefined;
+styles?: Style[] | Style[][] | undefined;
+autofocus?: boolean | undefined;
 }>>> & {
 onKeydown?: ((...args: any[]) => any) | undefined;
+"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+"onUpdate:styles"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>, {
     placeholder?(_: {}): any;
 }>;
 
-export declare class TextEditorStore {
+export declare type TextEditorRef = Pick<TextEditorStore, "currentStyles" | "currentBlock" | "isCollapsed" | "selection" | "toggleStyle" | "applyStyle" | "removeStyle" | "insertText" | "selectAll"> & {
+    isFocused: boolean;
+};
+
+declare class TextEditorStore {
     blocks: {
         id: string;
         text: string;
@@ -78,9 +120,20 @@ export declare class TextEditorStore {
             offset: number;
         };
     };
-    private _isCollapsed;
+    _isCollapsed: ComputedRef<boolean>;
     get isCollapsed(): boolean;
-    private _currentBlock;
+    isFocused: Ref<boolean>;
+    _currentBlock: ComputedRef<    {
+    id: string;
+    text: string;
+    type?: string | undefined;
+    styles: {
+    start: number;
+    end: number;
+    style: string;
+    meta?: any;
+    }[];
+    } | null>;
     get currentBlock(): {
         id: string;
         text: string;
@@ -105,13 +158,14 @@ export declare class TextEditorStore {
     }, number, number];
     private moveStyles;
     deleteSelected(): void;
-    private _currentStyles;
+    _currentStyles: ComputedRef<Map<string, Style>>;
     get currentStyles(): Map<string, Style>;
     applyStyle(_style: string, meta?: any): void;
     removeStyleAt(block: Block, _start: number, _end: number, _style?: string): void;
     removeStyle(_style: string): void;
     removeAllStyles(): void;
     toggleStyle(style: string): void;
+    selectAll(): void;
 }
 
 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, defineComponent, getCurrentInstance, openBlock, createBlock, resolveDynamicComponent, createElementBlock, normalizeProps, mergeProps, h, nextTick, useSlots, ref, Fragment, renderList, renderSlot, createCommentVNode } from "vue";
+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";
 function tryOnScopeDispose(fn) {
   if (getCurrentScope()) {
     onScopeDispose(fn);
@@ -150,6 +150,7 @@ class TextEditorStore {
     __publicField(this, "_isCollapsed", computed(() => {
       return this.selection.anchor.blockId === this.selection.focus.blockId && this.selection.anchor.offset === this.selection.focus.offset;
     }));
+    __publicField(this, "isFocused", ref(false));
     __publicField(this, "_currentBlock", computed(() => {
       if (this.selection.anchor.blockId !== this.selection.focus.blockId)
         return null;
@@ -158,6 +159,8 @@ class TextEditorStore {
     __publicField(this, "_currentStyles", computed(() => {
       const [start, end, startIndex, endIndex] = this.startAndEnd;
       const styles = /* @__PURE__ */ new Map();
+      if (startIndex < 0)
+        return styles;
       for (let i = startIndex; i <= endIndex; i++) {
         for (let style of this.blocks[i].styles) {
           if (i === startIndex && start.offset < style.start)
@@ -372,6 +375,11 @@ class TextEditorStore {
       this.applyStyle(style);
     }
   }
+  selectAll() {
+    this.selection.anchor = { blockId: this.blocks[0].id, offset: 0 };
+    const lastBlock = this.blocks[this.blocks.length - 1];
+    this.selection.focus = { blockId: lastBlock.id, offset: lastBlock.text.length };
+  }
 }
 let uidCounter = 0;
 const uid = () => (uidCounter++).toString();
@@ -516,24 +524,65 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TextEditor",
   props: {
-    store: {},
-    placeholder: {},
-    decorator: { type: Function }
+    decorator: { type: Function },
+    single: { type: Boolean },
+    modelValue: {},
+    styles: {},
+    autofocus: { type: Boolean }
   },
-  emits: ["keydown"],
+  emits: ["keydown", "update:modelValue", "update:styles"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const slots = useSlots();
     const textEditorRef = ref();
-    const store = props.store ?? new TextEditorStore();
+    const store = new TextEditorStore();
+    let modelValue = "";
+    watch(() => props.modelValue, (newValue) => {
+      if (newValue === void 0 || newValue === null || newValue === modelValue)
+        return;
+      if (!Array.isArray(newValue)) {
+        store.blocks[0].text = newValue;
+        return;
+      } else {
+        for (let i = store.blocks.length; i < newValue.length; i++) {
+          store.blocks.push({ id: uid(), text: "", styles: [] });
+        }
+        store.blocks.length = newValue.length;
+        for (let i = 0; i < newValue.length; i++) {
+          store.blocks[i].text = newValue[i];
+        }
+      }
+    }, { immediate: true });
+    let styles;
+    watch(() => props.styles, (newStyles) => {
+      if (!newStyles || newStyles.length === 0 || newStyles === styles)
+        return;
+      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;
+      }
+    }, { immediate: true });
+    watch(() => store.blocks, () => {
+      if (props.single) {
+        modelValue = store.blocks[0].text;
+        styles = store.blocks[0].styles;
+      } else {
+        modelValue = store.blocks.map((item) => item.text);
+        styles = store.blocks.map((item) => item.styles);
+      }
+      emit("update:modelValue", modelValue);
+      emit("update:styles", styles);
+    }, { deep: true });
     const onKeyDown = (e) => {
       emit("keydown", e);
       if (e.defaultPrevented)
         return;
       if (e.code === "Enter") {
         e.preventDefault();
-        if (e.shiftKey) {
+        if (e.shiftKey || props.single) {
           store.insertText("\n");
         } else {
           store.addNewLine();
@@ -563,7 +612,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const offset = anchor === sel.focusNode ? 0 : calcOffsetToNode(focus, sel.focusNode) + sel.focusOffset;
         store.selection.focus = { blockId: focus.getAttribute("data-block-id"), offset };
       }
-      cachedSelection = JSON.parse(JSON.stringify(store.selection));
+      if (store.isFocused.value !== !!focus || !!anchor) {
+        store.isFocused.value = !!focus || !!anchor;
+      }
+      if (!anchor && !focus)
+        cachedSelection = JSON.parse(JSON.stringify(store.selection));
     });
     let postRendered = false;
     const onPostRender = () => {
@@ -577,6 +630,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     };
     const applySelection = () => {
+      if (!store.isFocused.value) {
+        cachedSelection = JSON.parse(JSON.stringify(store.selection));
+        return;
+      }
       if (isEqual(store.selection, cachedSelection))
         return;
       const nativeSelection = window.getSelection();
@@ -599,8 +656,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       cachedSelection = JSON.parse(JSON.stringify(store.selection));
     };
     watch(() => store.selection, applySelection, { deep: true, flush: "post" });
+    onMounted(() => {
+      var _a;
+      if (props.autofocus) {
+        (_a = textEditorRef.value) == null ? void 0 : _a.focus();
+        applySelection();
+      }
+    });
     __expose({
-      store
+      currentStyles: store._currentStyles,
+      currentBlock: store._currentBlock,
+      isCollapsed: store._isCollapsed,
+      selection: store.selection,
+      isFocused: store.isFocused,
+      toggleStyle: store.toggleStyle.bind(store),
+      applyStyle: store.applyStyle.bind(store),
+      removeStyle: store.removeStyle.bind(store),
+      insertText: store.insertText.bind(store),
+      selectAll: store.selectAll.bind(store)
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -616,7 +689,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: block.id,
             block,
             slots: unref(slots),
-            decorator: _ctx.decorator,
+            decorator: props.decorator,
             onPostrender: onPostRender
           }, null, 8, ["block", "slots", "decorator"]);
         }), 128)),
@@ -626,6 +699,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  _sfc_main as TextEditor,
-  TextEditorStore
+  _sfc_main as TextEditor
 };

package/package.json

@@ -2,8 +2,9 @@
   "name": "vuewrite",
   "description": "Rich Text Editor based on Vue3 reactivity",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
+  "license": "MIT",
   "author": "den59k",
   "repository": {
     "type": "git",