vuewrite 0.0.1

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/README.md

@@ -0,0 +1,61 @@
+# VueWrite
+
+VueWrite is another text editor that takes full advantage of Vue3's features. 
+It contains no pre-made styles and blocks as its main goal is complete customization and extension
+
+## Demo
+
+You can watch the demo [here](https://vuewrite.easix.ru)
+
+## Quickstart
+
+```vue
+<template>
+<TextEditor 
+  :store="textEditorStore" 
+  class="text-editor"
+  :decorator="decorator" 
+  @keydown="onKeyDown"
+/>
+</template>
+
+<script lang="ts">
+
+const onKeyDown = (e: KeyboardEvent) => {
+  if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
+    if (e.code === "KeyB") {
+      textEditorStore.toggleStyle("bold")
+    }
+    if (e.code === "KeyI") {
+      textEditorStore.toggleStyle("italic")
+    }
+    if (e.code === "KeyU") {
+      textEditorStore.toggleStyle("underline")
+    }
+  }
+}
+
+const decorator = (style: Style) => {
+  if (style.style === 'bold' || style.style === "underline" || style.style === "italic") {
+    return { class: style.style }
+  }
+}
+
+</script>
+
+<style lang="css">
+.text-editor {
+  white-space: pre-wrap;
+}
+.text-editor .bold {
+  font-weight: 700
+}
+.text-editor .italic {
+  font-style: italic
+}
+.text-editor .underline {
+  text-decoration: underline
+}
+</style>
+
+```

package/dist/vuewrite.d.ts

@@ -0,0 +1,117 @@
+import { ComponentOptionsMixin } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { HTMLAttributes } from 'vue';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+
+declare type __VLS_NonUndefinedable<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]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare type Block = {
+    id: string;
+    text: string;
+    type?: string;
+    styles: Style[];
+};
+
+export declare type Decorator = (style: Style) => HTMLAttributes | undefined;
+
+export declare type Style = {
+    start: number;
+    end: number;
+    style: string;
+    meta?: any;
+};
+
+export declare const TextEditor: __VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<{
+store: TextEditorStore;
+placeholder?: string | undefined;
+decorator?: Decorator | undefined;
+}>, {
+store: TextEditorStore;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+keydown: (...args: any[]) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+store: TextEditorStore;
+placeholder?: string | undefined;
+decorator?: Decorator | undefined;
+}>>> & {
+onKeydown?: ((...args: any[]) => any) | undefined;
+}, {}, {}>, {
+    placeholder?(_: {}): any;
+}>;
+
+export declare class TextEditorStore {
+    blocks: {
+        id: string;
+        text: string;
+        type?: string | undefined;
+        styles: {
+            start: number;
+            end: number;
+            style: string;
+            meta?: any;
+        }[];
+    }[];
+    selection: {
+        anchor: {
+            blockId: string;
+            offset: number;
+        };
+        focus: {
+            blockId: string;
+            offset: number;
+        };
+    };
+    private _isCollapsed;
+    get isCollapsed(): boolean;
+    private _currentBlock;
+    get currentBlock(): {
+        id: string;
+        text: string;
+        type?: string | undefined;
+        styles: {
+            start: number;
+            end: number;
+            style: string;
+            meta?: any;
+        }[];
+    } | null;
+    moveOffset(newOffset: number): void;
+    onInput(_e: Event): void;
+    addNewLine(): void;
+    insertText(data: string): void;
+    get startAndEnd(): [{
+        blockId: string;
+        offset: number;
+    }, {
+        blockId: string;
+        offset: number;
+    }, number, number];
+    private moveStyles;
+    deleteSelected(): void;
+    private _currentStyles;
+    get currentStyles(): Map<string, Style>;
+    applyStyle(_style: string, meta?: any): void;
+    removeStyleAt(block: Block, _start: number, _end: number, _style?: string): void;
+    removeStyle(_style: string): void;
+    removeAllStyles(): void;
+    toggleStyle(style: string): void;
+}
+
+export { }

package/dist/vuewrite.js

@@ -0,0 +1,631 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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";
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+function toValue(r) {
+  return typeof r === "function" ? r() : unref(r);
+}
+const isClient = typeof window !== "undefined" && typeof document !== "undefined";
+typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+const toString = Object.prototype.toString;
+const isObject = (val) => toString.call(val) === "[object Object]";
+const noop = () => {
+};
+function unrefElement(elRef) {
+  var _a;
+  const plain = toValue(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+const defaultWindow = isClient ? window : void 0;
+function useEventListener(...args) {
+  let target;
+  let events;
+  let listeners;
+  let options;
+  if (typeof args[0] === "string" || Array.isArray(args[0])) {
+    [events, listeners, options] = args;
+    target = defaultWindow;
+  } else {
+    [target, events, listeners, options] = args;
+  }
+  if (!target)
+    return noop;
+  if (!Array.isArray(events))
+    events = [events];
+  if (!Array.isArray(listeners))
+    listeners = [listeners];
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener, options2) => {
+    el.addEventListener(event, listener, options2);
+    return () => el.removeEventListener(event, listener, options2);
+  };
+  const stopWatch = watch(
+    () => [unrefElement(target), toValue(options)],
+    ([el, options2]) => {
+      cleanup();
+      if (!el)
+        return;
+      const optionsClone = isObject(options2) ? { ...options2 } : options2;
+      cleanups.push(
+        ...events.flatMap((event) => {
+          return listeners.map((listener) => register(el, event, listener, optionsClone));
+        })
+      );
+    },
+    { immediate: true, flush: "post" }
+  );
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+const findParent = (el, callback) => {
+  if (!el)
+    return null;
+  if (el.nodeType === Node.ELEMENT_NODE) {
+    if (callback(el))
+      return el;
+  }
+  if (!el.parentElement)
+    return null;
+  return findParent(el.parentElement, callback);
+};
+const calcOffsetToNode = (parent, target) => {
+  let offset = 0;
+  for (let child of parent.childNodes) {
+    if (child.nodeName === "BR")
+      continue;
+    const ch = child.nodeType === Node.TEXT_NODE ? child : child.childNodes[0];
+    if (ch === target)
+      return offset;
+    offset += ch.length;
+  }
+  return offset;
+};
+const calcNodeByOffset = (parent, offset) => {
+  let currentOffset = offset;
+  if (offset === 0)
+    return [parent, 0];
+  for (let child of parent.childNodes) {
+    if (child.nodeName === "BR")
+      continue;
+    const ch = child.nodeType === Node.TEXT_NODE ? child : child.childNodes[0];
+    if (currentOffset - ch.length <= 0) {
+      return [ch, currentOffset];
+    }
+    currentOffset -= ch.length;
+  }
+  return [parent, 0];
+};
+const clamp = (val, min, max) => {
+  if (val > max)
+    return max;
+  if (val < min)
+    return min;
+  return val;
+};
+const isEqual = (a, b) => {
+  if (a === b)
+    return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
+    return false;
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length)
+      return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!isEqual(a[i], b[i]))
+        return false;
+    }
+    return true;
+  }
+  for (let key in a) {
+    if (!isEqual(a[key], b[key]))
+      return false;
+  }
+  return true;
+};
+class TextEditorStore {
+  constructor() {
+    __publicField(this, "blocks", reactive([{ id: uid(), text: "", styles: [] }]));
+    __publicField(this, "selection", reactive({
+      anchor: { blockId: this.blocks[0].id, offset: 0 },
+      focus: { blockId: this.blocks[0].id, offset: 0 }
+    }));
+    __publicField(this, "_isCollapsed", computed(() => {
+      return this.selection.anchor.blockId === this.selection.focus.blockId && this.selection.anchor.offset === this.selection.focus.offset;
+    }));
+    __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, "_currentStyles", computed(() => {
+      const [start, end, startIndex, endIndex] = this.startAndEnd;
+      const styles = /* @__PURE__ */ new Map();
+      for (let i = startIndex; i <= endIndex; i++) {
+        for (let style of this.blocks[i].styles) {
+          if (i === startIndex && start.offset < style.start)
+            continue;
+          if (i === endIndex && end.offset > style.end)
+            continue;
+          styles.set(style.style, style);
+        }
+      }
+      return styles;
+    }));
+  }
+  get isCollapsed() {
+    return this._isCollapsed.value;
+  }
+  get currentBlock() {
+    return this._currentBlock.value;
+  }
+  moveOffset(newOffset) {
+    const delta = newOffset - this.selection.anchor.offset;
+    if (delta === 0)
+      return;
+    this.moveStyles(this.currentBlock, this.selection.focus.offset, -delta);
+    this.selection.anchor.offset = newOffset;
+    this.selection.focus.offset = newOffset;
+  }
+  onInput(_e) {
+    const ev = _e;
+    ev.preventDefault();
+    const collapsed = this.isCollapsed;
+    if (!collapsed)
+      this.deleteSelected();
+    const block = this.currentBlock;
+    if (!block)
+      return;
+    if ((ev.inputType === "deleteContentBackward" || ev.inputType === "deleteContentForward") && collapsed) {
+      const blockIndex = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
+      if (ev.inputType === "deleteContentBackward") {
+        if (this.selection.anchor.offset === 0) {
+          if (blockIndex > 0) {
+            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.blocks.splice(blockIndex, 1);
+          }
+        } else {
+          const offset = Math.max(0, this.selection.focus.offset - 1);
+          block.text = block.text.slice(0, offset) + block.text.slice(this.selection.focus.offset);
+          this.moveOffset(offset);
+        }
+      }
+      if (ev.inputType === "deleteContentForward") {
+        if (this.selection.anchor.offset === this.blocks[blockIndex].text.length) {
+          this.blocks.splice(blockIndex + 1, 1);
+        } else {
+          block.text = block.text.slice(0, this.selection.focus.offset) + block.text.slice(this.selection.focus.offset + 1);
+          this.moveStyles(block, this.selection.focus.offset + 1, 1);
+        }
+      }
+    }
+    if (ev.inputType === "insertText") {
+      this.insertText(ev.data);
+    }
+  }
+  addNewLine() {
+    this.deleteSelected();
+    if (!this.currentBlock)
+      return;
+    const endText = this.currentBlock.text.slice(this.selection.anchor.offset);
+    this.currentBlock.text = this.currentBlock.text.slice(0, this.selection.anchor.offset);
+    const block = { id: uid(), text: endText || "", styles: [] };
+    const index = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
+    this.blocks.splice(index + 1, 0, block);
+    this.selection.anchor = { blockId: block.id, offset: 0 };
+    this.selection.focus = { blockId: block.id, offset: 0 };
+  }
+  insertText(data) {
+    const block = this.currentBlock;
+    if (!block)
+      return;
+    block.text = block.text.slice(0, this.selection.focus.offset) + data + block.text.slice(this.selection.focus.offset);
+    this.moveOffset(clamp(this.selection.focus.offset + data.length, 0, block.text.length));
+  }
+  get startAndEnd() {
+    const a = this.blocks.findIndex((block) => block.id === this.selection.anchor.blockId);
+    const f = this.blocks.findIndex((block) => block.id === this.selection.focus.blockId);
+    if (a < f || a === f && this.selection.anchor.offset < this.selection.focus.offset) {
+      return [this.selection.anchor, this.selection.focus, a, f];
+    } else {
+      return [this.selection.focus, this.selection.anchor, f, a];
+    }
+  }
+  moveStyles(block, offset, delta) {
+    for (let i = 0; i < block.styles.length; i++) {
+      const style = block.styles[i];
+      if (style.start >= offset)
+        style.start -= delta;
+      if (style.end >= offset)
+        style.end -= delta;
+      if (style.end <= style.start) {
+        block.styles.splice(i, 1);
+        i--;
+      }
+    }
+  }
+  deleteSelected() {
+    if (this.isCollapsed)
+      return;
+    const [start, end, startIndex, endIndex] = this.startAndEnd;
+    const startText = this.blocks[startIndex].text.slice(0, start.offset);
+    const endText = this.blocks[endIndex].text.slice(end.offset);
+    this.removeAllStyles();
+    const delta = end.offset - (startIndex === endIndex ? start.offset : 0);
+    this.moveStyles(this.blocks[endIndex], end.offset, delta);
+    if (this.selection.anchor.blockId !== this.selection.focus.blockId) {
+      this.blocks.splice(startIndex + 1, endIndex - startIndex);
+    }
+    if (start !== this.selection.anchor) {
+      this.selection.anchor = { ...start };
+    }
+    if (start !== this.selection.focus) {
+      this.selection.focus = { ...start };
+    }
+    this.blocks[startIndex].text = startText + endText;
+  }
+  get currentStyles() {
+    return this._currentStyles.value;
+  }
+  applyStyle(_style, meta) {
+    const [start, end, startIndex, endIndex] = this.startAndEnd;
+    for (let i = startIndex; i <= endIndex; i++) {
+      const block = this.blocks[i];
+      const _start = i === startIndex ? start.offset : 0;
+      const _end = i === endIndex ? end.offset : block.text.length;
+      let createNewStyle = true;
+      for (let style of block.styles) {
+        if (style.style !== _style)
+          continue;
+        if (style.start > _end || style.end < _start)
+          continue;
+        if (meta && !isEqual(meta, style.meta) && (style.start !== _start || style.end !== _end)) {
+          if (_start === style.end || _end === style.start)
+            continue;
+          this.removeStyleAt(block, _start, _end, _style);
+        } else {
+          style.start = Math.min(style.start, _start);
+          style.end = Math.max(style.end, _end);
+          createNewStyle = false;
+          style.meta = meta;
+        }
+      }
+      if (createNewStyle) {
+        const newStyle = {
+          start: i === startIndex ? start.offset : 0,
+          end: i === endIndex ? end.offset : block.text.length,
+          style: _style,
+          meta
+        };
+        block.styles.push(newStyle);
+        block.styles.sort((a, b) => a.start - b.start);
+      }
+    }
+  }
+  removeStyleAt(block, _start, _end, _style) {
+    const removeAll = typeof _style !== "string";
+    for (let i = 0; i < block.styles.length; i++) {
+      const style = block.styles[i];
+      if (!removeAll && style.style !== _style)
+        continue;
+      if (style.start > _end || style.end < _start)
+        continue;
+      if (style.start >= _start && style.end <= _end) {
+        block.styles.splice(i, 1);
+        i--;
+      } else if (style.start < _start && style.end > _end) {
+        block.styles.push({ ...style, start: _end });
+        style.end = _start;
+      } else if (style.start < _start) {
+        style.end = _start;
+      } else if (style.end > _end) {
+        style.start = _end;
+      }
+    }
+  }
+  removeStyle(_style) {
+    const [start, end, startIndex, endIndex] = this.startAndEnd;
+    for (let i = startIndex; i <= endIndex; i++) {
+      const block = this.blocks[i];
+      const _start = i === startIndex ? start.offset : 0;
+      const _end = i === endIndex ? end.offset : block.text.length;
+      this.removeStyleAt(block, _start, _end, _style);
+    }
+  }
+  removeAllStyles() {
+    const [start, end, startIndex, endIndex] = this.startAndEnd;
+    for (let i = startIndex; i <= endIndex; i++) {
+      const block = this.blocks[i];
+      if (i > startIndex && i < endIndex) {
+        block.styles.length = 0;
+        return;
+      }
+      const _start = i === startIndex ? start.offset : 0;
+      const _end = i === endIndex ? end.offset : block.text.length;
+      this.removeStyleAt(block, _start, _end);
+    }
+  }
+  toggleStyle(style) {
+    if (this.currentStyles.has(style)) {
+      this.removeStyle(style);
+    } else {
+      this.applyStyle(style);
+    }
+  }
+}
+let uidCounter = 0;
+const uid = () => (uidCounter++).toString();
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "TextEditorBlock",
+  props: {
+    block: {},
+    slots: {},
+    decorator: { type: Function }
+  },
+  emits: ["postrender"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slot = computed(() => {
+      if (!props.block.type)
+        return null;
+      return props.slots[props.block.type] ?? null;
+    });
+    const blockProps = {
+      "data-block-id": props.block.id
+    };
+    const renderBlockPart = (text, styles) => {
+      if (!props.decorator)
+        return text;
+      const attrs = {};
+      for (let style of styles) {
+        const partProps = props.decorator(style);
+        if (!partProps)
+          continue;
+        const { class: _class, style: _style, ...otherProps } = partProps;
+        Object.assign(attrs, otherProps);
+        if (_class) {
+          attrs.class = attrs.class ? attrs.class + " " + _class : _class;
+        }
+        if (_style) {
+          attrs.style = attrs.style ? attrs.style + " " + _style : _style;
+        }
+      }
+      if (Object.keys(attrs).length === 0)
+        return text;
+      return h("span", attrs, text);
+    };
+    const instance = getCurrentInstance();
+    const getRef = () => {
+      if (!instance)
+        return null;
+      const el = instance.vnode.el;
+      if (!el)
+        return null;
+      if (el.nodeType === Node.TEXT_NODE && el.nextSibling !== null) {
+        return el.nextSibling;
+      }
+      return el;
+    };
+    const cacheNodes = [];
+    let cacheEl = null;
+    const cleanTree = (count) => {
+      const el = getRef();
+      if (!el)
+        return;
+      if (el === cacheEl && cacheNodes.length > 0) {
+        el.prepend(cacheNodes[0]);
+        el.append(cacheNodes[1]);
+      }
+      nextTick(() => {
+        var _a;
+        cacheEl = getRef();
+        if (el === cacheEl) {
+          if (el.childNodes.length > count + 2) {
+            for (let i = 0; i < el.childNodes.length; i++) {
+              const child = el.childNodes[i];
+              if (i === 0 && child.nodeType === Node.TEXT_NODE && child.textContent === "")
+                continue;
+              if ("__vnode" in child)
+                continue;
+              if (child.nodeType === Node.TEXT_NODE && ((_a = child.textContent) == null ? void 0 : _a.endsWith("\n")))
+                continue;
+              el.removeChild(child);
+              break;
+            }
+          }
+        }
+        if (cacheEl) {
+          cacheNodes[0] = cacheEl.childNodes[0];
+          cacheNodes[1] = cacheEl.childNodes[cacheEl.childNodes.length - 1];
+        }
+        emit("postrender");
+      });
+    };
+    const content = () => {
+      const block = props.block;
+      if (block.text.length === 0) {
+        cleanTree(1);
+        return [h("br")];
+      }
+      let text = block.text;
+      if (text.endsWith("\n")) {
+        text = text + "\n";
+      }
+      const markers = [];
+      for (let style of block.styles) {
+        markers.push([style.start, style]);
+        markers.push([style.end, style]);
+      }
+      markers.sort((a, b) => a[0] - b[0]);
+      let currentIndex = 0;
+      const activeStyles = /* @__PURE__ */ new Set();
+      const blocks = [];
+      for (let marker of markers) {
+        if (currentIndex !== marker[0]) {
+          const str = text.slice(currentIndex, marker[0]);
+          blocks.push(renderBlockPart(str, Array.from(activeStyles.values())));
+          currentIndex = marker[0];
+        }
+        if (marker[0] === marker[1].start) {
+          activeStyles.add(marker[1]);
+        }
+        if (marker[0] === marker[1].end) {
+          activeStyles.delete(marker[1]);
+        }
+      }
+      if (currentIndex !== text.length) {
+        const str = text.slice(currentIndex, text.length);
+        blocks.push(renderBlockPart(str, Array.from(activeStyles.values())));
+      }
+      cleanTree(blocks.length);
+      return blocks;
+    };
+    return (_ctx, _cache) => {
+      return slot.value ? (openBlock(), createBlock(resolveDynamicComponent(slot.value), {
+        key: 0,
+        content,
+        props: blockProps,
+        block: _ctx.block
+      }, null, 8, ["block"])) : (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 1 }, blockProps)), [
+        (openBlock(), createBlock(resolveDynamicComponent(content)))
+      ], 16));
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TextEditor",
+  props: {
+    store: {},
+    placeholder: {},
+    decorator: { type: Function }
+  },
+  emits: ["keydown"],
+  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 onKeyDown = (e) => {
+      emit("keydown", e);
+      if (e.defaultPrevented)
+        return;
+      if (e.code === "Enter") {
+        e.preventDefault();
+        if (e.shiftKey) {
+          store.insertText("\n");
+        } else {
+          store.addNewLine();
+        }
+      }
+      if (e.code === "Backspace") {
+        if (store.isCollapsed && store.currentBlock === store.blocks[0] && store.selection.anchor.offset === 0) {
+          e.preventDefault();
+        }
+      }
+      if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
+        if (e.code === "KeyB" || e.code === "KeyI" || e.code === "KeyU") {
+          e.preventDefault();
+        }
+      }
+    };
+    let cachedSelection = {};
+    useEventListener(document, "selectionchange", () => {
+      const sel = window.getSelection();
+      const anchor = findParent(sel.anchorNode, (el) => el.hasAttribute("data-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 };
+      }
+      const focus = findParent(sel.focusNode, (el) => el.hasAttribute("data-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 };
+      }
+      cachedSelection = JSON.parse(JSON.stringify(store.selection));
+    });
+    let postRendered = false;
+    const onPostRender = () => {
+      if (postRendered)
+        return;
+      cachedSelection = {};
+      postRendered = true;
+      applySelection();
+      nextTick(() => {
+        postRendered = false;
+      });
+    };
+    const applySelection = () => {
+      if (isEqual(store.selection, cachedSelection))
+        return;
+      const nativeSelection = window.getSelection();
+      let anchor = null;
+      let focus = null;
+      for (let item of textEditorRef.value.children) {
+        if (item.getAttribute("data-block-id") === store.selection.anchor.blockId) {
+          anchor = item;
+        }
+        if (item.getAttribute("data-block-id") === store.selection.focus.blockId) {
+          focus = item;
+        }
+      }
+      if (anchor && focus) {
+        nativeSelection.setBaseAndExtent(
+          ...calcNodeByOffset(anchor, store.selection.anchor.offset),
+          ...calcNodeByOffset(focus, store.selection.focus.offset)
+        );
+      }
+      cachedSelection = JSON.parse(JSON.stringify(store.selection));
+    };
+    watch(() => store.selection, applySelection, { deep: true, flush: "post" });
+    __expose({
+      store
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "textEditorRef",
+        ref: textEditorRef,
+        contenteditable: "",
+        onInput: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => unref(store).onInput && unref(store).onInput(...args)),
+        onKeydown: onKeyDown
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(store).blocks, (block) => {
+          return openBlock(), createBlock(_sfc_main$1, {
+            key: block.id,
+            block,
+            slots: unref(slots),
+            decorator: _ctx.decorator,
+            onPostrender: onPostRender
+          }, null, 8, ["block", "slots", "decorator"]);
+        }), 128)),
+        unref(store).blocks.length === 1 && unref(store).blocks[0].text === "" ? renderSlot(_ctx.$slots, "placeholder", { key: 0 }) : createCommentVNode("", true)
+      ], 544);
+    };
+  }
+});
+export {
+  _sfc_main as TextEditor,
+  TextEditorStore
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "vuewrite",
+  "description": "Rich Text Editor based on Vue3 reactivity",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "author": "den59k",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/den59k/vuewrite.git"
+  },
+  "main": "dist/vuewrite.js",
+  "types": "dist/vuewrite.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "build:app": "vue-tsc && vite build -c vite-app.config.ts",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vueuse/core": "^10.10.0",
+    "color2k": "^2.0.3",
+    "sass": "^1.77.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1",
+    "vue-tsc": "^2.0.6",
+    "vuesix": "^1.0.12"
+  },
+  "files": [
+    "dist"
+  ]
+}