vuewrite 0.0.2 → 0.0.3

package/dist/vuewrite.d.ts

@@ -5,6 +5,7 @@ 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;
 
@@ -44,6 +45,7 @@ decorator?: Decorator | undefined;
 single?: boolean | undefined;
 modelValue?: string | string[] | undefined;
 styles?: Style[] | Style[][] | undefined;
+autofocus?: boolean | undefined;
 }>, {
 currentStyles: ComputedRef<Map<string, Style>>;
 currentBlock: ComputedRef<    {
@@ -68,10 +70,12 @@ 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;
@@ -81,6 +85,7 @@ 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;
@@ -89,7 +94,9 @@ onKeydown?: ((...args: any[]) => any) | undefined;
     placeholder?(_: {}): any;
 }>;
 
-export declare type TextEditorRef = Pick<TextEditorStore, "currentStyles" | "currentBlock" | "isCollapsed" | "selection" | "toggleStyle" | "applyStyle" | "removeStyle" | "insertText">;
+export declare type TextEditorRef = Pick<TextEditorStore, "currentStyles" | "currentBlock" | "isCollapsed" | "selection" | "toggleStyle" | "applyStyle" | "removeStyle" | "insertText" | "selectAll"> & {
+    isFocused: boolean;
+};
 
 declare class TextEditorStore {
     blocks: {
@@ -115,6 +122,7 @@ declare class TextEditorStore {
     };
     _isCollapsed: ComputedRef<boolean>;
     get isCollapsed(): boolean;
+    isFocused: Ref<boolean>;
     _currentBlock: ComputedRef<    {
     id: string;
     text: string;
@@ -157,6 +165,7 @@ declare class TextEditorStore {
     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;
@@ -374,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();
@@ -521,7 +527,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     decorator: { type: Function },
     single: { type: Boolean },
     modelValue: {},
-    styles: {}
+    styles: {},
+    autofocus: { type: Boolean }
   },
   emits: ["keydown", "update:modelValue", "update:styles"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -605,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 = () => {
@@ -619,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();
@@ -641,15 +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({
       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)
+      insertText: store.insertText.bind(store),
+      selectAll: store.selectAll.bind(store)
     });
     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.2",
+  "version": "0.0.3",
   "type": "module",
   "license": "MIT",
   "author": "den59k",