vuewrite 0.0.1 → 0.0.2

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,4 +1,5 @@
 import { ComponentOptionsMixin } from 'vue';
+import { ComputedRef } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { HTMLAttributes } from 'vue';
@@ -39,24 +40,58 @@ 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;
 }>, {
-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;
+};
+};
+toggleStyle: (style: string) => void;
+applyStyle: (_style: string, meta?: any) => void;
+removeStyle: (_style: string) => void;
+insertText: (data: string) => 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;
 }>>> & {
 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">;
+
+declare class TextEditorStore {
     blocks: {
         id: string;
         text: string;
@@ -78,9 +113,19 @@ export declare class TextEditorStore {
             offset: number;
         };
     };
-    private _isCollapsed;
+    _isCollapsed: ComputedRef<boolean>;
     get isCollapsed(): boolean;
-    private _currentBlock;
+    _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,7 +150,7 @@ 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;

package/dist/vuewrite.js

@@ -158,6 +158,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)
@@ -516,24 +518,64 @@ 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: {}
   },
-  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();
@@ -600,7 +642,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     watch(() => store.selection, applySelection, { deep: true, flush: "post" });
     __expose({
-      store
+      currentStyles: store._currentStyles,
+      currentBlock: store._currentBlock,
+      isCollapsed: store._isCollapsed,
+      selection: store.selection,
+      toggleStyle: store.toggleStyle.bind(store),
+      applyStyle: store.applyStyle.bind(store),
+      removeStyle: store.removeStyle.bind(store),
+      insertText: store.insertText.bind(store)
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -616,7 +665,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 +675,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.2",
   "type": "module",
+  "license": "MIT",
   "author": "den59k",
   "repository": {
     "type": "git",