vuewrite 0.0.2 → 0.0.4

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;
@@ -137,6 +145,8 @@ declare class TextEditorStore {
             meta?: any;
         }[];
     } | null;
+    _selectedText: ComputedRef<string>;
+    get selectedText(): string;
     moveOffset(newOffset: number): void;
     onInput(_e: Event): void;
     addNewLine(): void;
@@ -157,6 +167,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,11 +150,24 @@ 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;
       return this.blocks.find((item) => item.id === this.selection.anchor.blockId) ?? null;
     }));
+    __publicField(this, "_selectedText", computed(() => {
+      if (this.isCollapsed)
+        return "";
+      const [start, end, startIndex, endIndex] = this.startAndEnd;
+      if (startIndex === endIndex) {
+        return this.blocks[startIndex].text.slice(start.offset, end.offset);
+      }
+      const startText = this.blocks[startIndex].text.slice(start.offset);
+      const endText = this.blocks[endIndex].text.slice(0, end.offset);
+      const arr = [startText, ...this.blocks.slice(startIndex + 1, endIndex).map((block) => block.text), endText];
+      return arr.join("\n");
+    }));
     __publicField(this, "_currentStyles", computed(() => {
       const [start, end, startIndex, endIndex] = this.startAndEnd;
       const styles = /* @__PURE__ */ new Map();
@@ -178,6 +191,9 @@ class TextEditorStore {
   get currentBlock() {
     return this._currentBlock.value;
   }
+  get selectedText() {
+    return this._selectedText.value;
+  }
   moveOffset(newOffset) {
     const delta = newOffset - this.selection.anchor.offset;
     if (delta === 0)
@@ -374,6 +390,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 +542,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 +627,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 +645,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 +671,41 @@ 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();
+      }
+    });
+    const onCopy = (e) => {
+      e.preventDefault();
+      navigator.clipboard.writeText(store.selectedText);
+    };
+    const onCut = (e) => {
+      e.preventDefault();
+      navigator.clipboard.writeText(store.selectedText);
+      store.deleteSelected();
+    };
+    const onPaste = (e) => {
+      var _a;
+      e.preventDefault();
+      const text = (_a = e.clipboardData) == null ? void 0 : _a.getData("Text");
+      if (!text)
+        return;
+      store.insertText(text);
+    };
     __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", {
@@ -658,7 +714,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         contenteditable: "",
         onInput: _cache[0] || (_cache[0] = //@ts-ignore
         (...args) => unref(store).onInput && unref(store).onInput(...args)),
-        onKeydown: onKeyDown
+        onKeydown: onKeyDown,
+        onCopy,
+        onPaste,
+        onCut
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(store).blocks, (block) => {
           return openBlock(), createBlock(_sfc_main$1, {

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.4",
   "type": "module",
   "license": "MIT",
   "author": "den59k",