vuewrite 0.0.9 → 0.0.11

package/dist/vuewrite.d.ts

@@ -9,6 +9,8 @@ import { Ref } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
+
 declare type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: PropType<__VLS_NonUndefinedable<T[K]>>;
@@ -18,6 +20,15 @@ declare type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_2<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_2<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -229,6 +240,26 @@ declare class TextEditorStore {
     selectAll(): void;
 }
 
+export declare const TextEditorView: DefineComponent<__VLS_TypePropsToRuntimeProps_2<{
+modelValue: {
+text: string;
+styles?: Style[];
+type?: string;
+}[] | string;
+decorator?: Decorator | undefined;
+parser?: TextParser | undefined;
+styles?: Style[] | undefined;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_2<{
+modelValue: {
+text: string;
+styles?: Style[];
+type?: string;
+}[] | string;
+decorator?: Decorator | undefined;
+parser?: TextParser | undefined;
+styles?: Style[] | undefined;
+}>>>, {}, {}>;
+
 declare type TextParser = (text: string) => Style[];
 
 export { }

package/dist/vuewrite.js

@@ -291,16 +291,16 @@ class TextEditorStore {
     const blockIndex = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
     if (blockIndex < 1)
       return;
+    this.selection.anchor.blockId = this.blocks[blockIndex - 1].id;
+    this.selection.focus.blockId = this.blocks[blockIndex - 1].id;
+    this.selection.anchor.offset = this.blocks[blockIndex - 1].text.length;
+    this.selection.focus.offset = this.blocks[blockIndex - 1].text.length;
     if (this.blocks[blockIndex - 1].editable === false) {
       this.blocks.splice(blockIndex - 1, 1);
     } else {
       this.concatBlocks(this.blocks[blockIndex - 1], this.blocks[blockIndex]);
       this.blocks.splice(blockIndex, 1);
     }
-    this.selection.anchor.blockId = this.blocks[blockIndex - 1].id;
-    this.selection.focus.blockId = this.blocks[blockIndex - 1].id;
-    this.selection.anchor.offset = this.blocks[blockIndex - 1].text.length;
-    this.selection.focus.offset = this.blocks[blockIndex - 1].text.length;
     this.history.push("setText");
   }
   onInput(_e) {
@@ -348,6 +348,12 @@ class TextEditorStore {
     }
   }
   addNewLine() {
+    if (this.isCollapsed && this.selection.anchor.offset === 0) {
+      const index2 = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
+      const block2 = { id: uid(), text: "", styles: [] };
+      this.blocks.splice(index2, 0, block2);
+      return;
+    }
     this.deleteSelected();
     if (!this.currentBlock)
       return;
@@ -524,7 +530,7 @@ class TextEditorStore {
 }
 let uidCounter = 0;
 const uid = () => (uidCounter++).toString();
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "TextEditorBlock",
   props: {
     block: {},
@@ -538,7 +544,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const slot = computed(() => {
       if (!props.block.type)
-        return null;
+        return props.slots["default"] ?? null;
       return props.slots[props.block.type] ?? null;
     });
     const blockProps = {
@@ -625,9 +631,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         text = text + "\n";
       }
       const markers = [];
-      for (let style of block.styles) {
-        markers.push([style.start, style]);
-        markers.push([style.end, style]);
+      if (block.styles) {
+        for (let style of block.styles) {
+          markers.push([style.start, style]);
+          markers.push([style.end, style]);
+        }
       }
       if (props.parser) {
         for (let style of props.parser(text)) {
@@ -671,7 +679,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "TextEditor",
   props: {
     decorator: { type: Function },
@@ -705,7 +713,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         for (let i = 0; i < newValue.length; i++) {
           store.blocks[i].text = newValue[i].text;
           store.blocks[i].type = newValue[i].type;
-          store.blocks[i].text = newValue[i].text;
+          store.blocks[i].styles = newValue[i].styles ?? [];
         }
       }
     }, { immediate: true });
@@ -896,7 +904,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onCut
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(store).blocks, (block) => {
-          return openBlock(), createBlock(_sfc_main$1, {
+          return openBlock(), createBlock(_sfc_main$2, {
             key: block.id,
             block,
             slots: unref(slots),
@@ -910,6 +918,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TextEditorView",
+  props: {
+    modelValue: {},
+    decorator: { type: Function },
+    parser: {},
+    styles: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const blocks = computed(() => {
+      if (Array.isArray(props.modelValue)) {
+        return props.modelValue;
+      }
+      return [{ text: props.modelValue, styles: props.styles ?? [] }];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(blocks.value, (block) => {
+          return openBlock(), createBlock(_sfc_main$2, {
+            key: block.id,
+            block,
+            slots: unref(slots),
+            decorator: props.decorator,
+            parser: props.parser
+          }, null, 8, ["block", "slots", "decorator", "parser"]);
+        }), 128))
+      ]);
+    };
+  }
+});
 export {
-  _sfc_main as TextEditor
+  _sfc_main$1 as TextEditor,
+  _sfc_main as TextEditorView
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "vuewrite",
   "description": "Rich Text Editor based on Vue3 reactivity",
   "private": false,
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "license": "MIT",
   "author": "den59k",