vuewrite 0.0.3 → 0.0.5-a

package/dist/vuewrite.d.ts

@@ -46,6 +46,7 @@ single?: boolean | undefined;
 modelValue?: string | string[] | undefined;
 styles?: Style[] | Style[][] | undefined;
 autofocus?: boolean | undefined;
+autoselect?: boolean | undefined;
 }>, {
 currentStyles: ComputedRef<Map<string, Style>>;
 currentBlock: ComputedRef<    {
@@ -86,6 +87,7 @@ single?: boolean | undefined;
 modelValue?: string | string[] | undefined;
 styles?: Style[] | Style[][] | undefined;
 autofocus?: boolean | undefined;
+autoselect?: boolean | undefined;
 }>>> & {
 onKeydown?: ((...args: any[]) => any) | undefined;
 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -145,6 +147,8 @@ declare class TextEditorStore {
             meta?: any;
         }[];
     } | null;
+    _selectedText: ComputedRef<string>;
+    get selectedText(): string;
     moveOffset(newOffset: number): void;
     onInput(_e: Event): void;
     addNewLine(): void;

package/dist/vuewrite.js

@@ -156,6 +156,18 @@ class TextEditorStore {
         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();
@@ -179,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)
@@ -400,7 +415,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return props.slots[props.block.type] ?? null;
     });
     const blockProps = {
-      "data-block-id": props.block.id
+      "data-vw-block-id": props.block.id
     };
     const renderBlockPart = (text, styles) => {
       if (!props.decorator)
@@ -528,7 +543,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     single: { type: Boolean },
     modelValue: {},
     styles: {},
-    autofocus: { type: Boolean }
+    autofocus: { type: Boolean },
+    autoselect: { type: Boolean }
   },
   emits: ["keydown", "update:modelValue", "update:styles"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -602,15 +618,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let cachedSelection = {};
     useEventListener(document, "selectionchange", () => {
       const sel = window.getSelection();
-      const anchor = findParent(sel.anchorNode, (el) => el.hasAttribute("data-block-id"));
+      const anchor = findParent(sel.anchorNode, (el) => el.hasAttribute("data-vw-block-id"));
       if (anchor) {
         const offset = anchor === sel.anchorNode ? 0 : calcOffsetToNode(anchor, sel.anchorNode) + sel.anchorOffset;
-        store.selection.anchor = { blockId: anchor.getAttribute("data-block-id"), offset };
+        store.selection.anchor = { blockId: anchor.getAttribute("data-vw-block-id"), offset };
       }
-      const focus = findParent(sel.focusNode, (el) => el.hasAttribute("data-block-id"));
+      const focus = findParent(sel.focusNode, (el) => el.hasAttribute("data-vw-block-id"));
       if (focus) {
         const offset = anchor === sel.focusNode ? 0 : calcOffsetToNode(focus, sel.focusNode) + sel.focusOffset;
-        store.selection.focus = { blockId: focus.getAttribute("data-block-id"), offset };
+        store.selection.focus = { blockId: focus.getAttribute("data-vw-block-id"), offset };
       }
       if (store.isFocused.value !== !!focus || !!anchor) {
         store.isFocused.value = !!focus || !!anchor;
@@ -640,10 +656,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       let anchor = null;
       let focus = null;
       for (let item of textEditorRef.value.children) {
-        if (item.getAttribute("data-block-id") === store.selection.anchor.blockId) {
+        if (item.getAttribute("data-vw-block-id") === store.selection.anchor.blockId) {
           anchor = item;
         }
-        if (item.getAttribute("data-block-id") === store.selection.focus.blockId) {
+        if (item.getAttribute("data-vw-block-id") === store.selection.focus.blockId) {
           focus = item;
         }
       }
@@ -657,12 +673,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     watch(() => store.selection, applySelection, { deep: true, flush: "post" });
     onMounted(() => {
-      var _a;
+      var _a, _b;
       if (props.autofocus) {
         (_a = textEditorRef.value) == null ? void 0 : _a.focus();
         applySelection();
       }
+      if (props.autoselect) {
+        (_b = textEditorRef.value) == null ? void 0 : _b.focus();
+        store.selectAll();
+      }
     });
+    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,
@@ -682,7 +719,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.3",
+  "version": "0.0.5-a",
   "type": "module",
   "license": "MIT",
   "author": "den59k",