vuewrite 0.0.25 → 0.0.27

package/dist/markdown.d.ts

@@ -0,0 +1,14 @@
+import { Block } from 'vuewrite-markdown';
+import { blocksToMarkdown } from 'vuewrite-markdown';
+import { markdownToBlocks } from 'vuewrite-markdown';
+import { Style } from 'vuewrite-markdown';
+
+export { Block }
+
+export { blocksToMarkdown }
+
+export { markdownToBlocks }
+
+export { Style }
+
+export { }

package/dist/markdown.js

@@ -0,0 +1,358 @@
+let _counter = 0;
+const uid = () => (++_counter).toString();
+function blockContentKey(block) {
+  const { id: _id, ...rest } = block;
+  return JSON.stringify(rest);
+}
+function lcsIndices(oldKeys, newKeys) {
+  const m = oldKeys.length;
+  const n = newKeys.length;
+  const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+  for (let i2 = 1; i2 <= m; i2++) {
+    for (let j2 = 1; j2 <= n; j2++) {
+      dp[i2][j2] = oldKeys[i2 - 1] === newKeys[j2 - 1] ? dp[i2 - 1][j2 - 1] + 1 : Math.max(dp[i2 - 1][j2], dp[i2][j2 - 1]);
+    }
+  }
+  const pairs = [];
+  let i = m;
+  let j = n;
+  while (i > 0 && j > 0) {
+    if (oldKeys[i - 1] === newKeys[j - 1]) {
+      pairs.unshift([i - 1, j - 1]);
+      i--;
+      j--;
+    } else if (dp[i - 1][j] >= dp[i][j - 1]) {
+      i--;
+    } else {
+      j--;
+    }
+  }
+  return pairs;
+}
+function markdownToBlocks(markdown, previousBlocks = []) {
+  const lines = markdown.split("\n");
+  const blocks = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const customFenceMatch = line.match(/^:::\s*(\S+)/);
+    if (customFenceMatch) {
+      const type = customFenceMatch[1];
+      const bodyLines = [];
+      i++;
+      while (i < lines.length && lines[i].trim() !== ":::") {
+        bodyLines.push(lines[i]);
+        i++;
+      }
+      const { text: text2, styles: styles2 } = parseInline(bodyLines.join("\n"));
+      const block2 = { id: uid(), text: text2, type };
+      if (styles2.length > 0) block2.styles = styles2;
+      blocks.push(block2);
+      i++;
+      continue;
+    }
+    const xmlPairedMatch = line.match(/^<(\w[\w-]*)(\s[^>]*)?>(.+)<\/\1>$/);
+    if (xmlPairedMatch) {
+      const attrs = parseAttributes(xmlPairedMatch[2] ?? "");
+      const { text: text2, styles: styles2 } = parseInline(xmlPairedMatch[3]);
+      const block2 = { id: uid(), text: text2, type: xmlPairedMatch[1], ...attrs };
+      if (styles2.length > 0) block2.styles = styles2;
+      blocks.push(block2);
+      i++;
+      continue;
+    }
+    const xmlSelfMatch = line.match(/^<(\w[\w-]*)(\s[^>]*)?\s*\/?>$/);
+    if (xmlSelfMatch) {
+      const attrs = parseAttributes(xmlSelfMatch[2] ?? "");
+      const block2 = { id: uid(), text: "", type: xmlSelfMatch[1], editable: false, ...attrs };
+      blocks.push(block2);
+      i++;
+      continue;
+    }
+    if (line.startsWith("```")) {
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith("```")) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      blocks.push({ id: uid(), text: codeLines.join("\n"), type: "code", editable: false });
+      i++;
+      continue;
+    }
+    const headingMatch = line.match(/^(#{1,3}) (.+)$/);
+    if (headingMatch) {
+      const level = headingMatch[1].length;
+      const type = level === 1 ? "h1" : level === 2 ? "h2" : "h3";
+      const { text: text2, styles: styles2 } = parseInline(headingMatch[2]);
+      const block2 = { id: uid(), text: text2, type };
+      if (styles2.length > 0) block2.styles = styles2;
+      blocks.push(block2);
+      i++;
+      continue;
+    }
+    const ulMatch = line.match(/^[-*] (.+)$/);
+    if (ulMatch) {
+      const { text: text2, styles: styles2 } = parseInline(ulMatch[1]);
+      const block2 = { id: uid(), text: text2, type: "li" };
+      if (styles2.length > 0) block2.styles = styles2;
+      blocks.push(block2);
+      i++;
+      continue;
+    }
+    const olMatch = line.match(/^\d+\. (.+)$/);
+    if (olMatch) {
+      const { text: text2, styles: styles2 } = parseInline(olMatch[1]);
+      const block2 = { id: uid(), text: text2, type: "ol" };
+      if (styles2.length > 0) block2.styles = styles2;
+      blocks.push(block2);
+      i++;
+      continue;
+    }
+    if (line === "") {
+      if (blocks.length > 0 && i < lines.length - 1) {
+        blocks.push({ id: uid(), text: "" });
+      }
+      i++;
+      continue;
+    }
+    const { text, styles } = parseInline(line);
+    const block = { id: uid(), text };
+    if (styles.length > 0) block.styles = styles;
+    blocks.push(block);
+    i++;
+  }
+  if (blocks.length === 0) {
+    blocks.push({ id: uid(), text: "" });
+  }
+  if (previousBlocks.length === 0) return blocks;
+  const oldKeys = previousBlocks.map(blockContentKey);
+  const newKeys = blocks.map(blockContentKey);
+  const pairs = lcsIndices(oldKeys, newKeys);
+  const oldIdByNewIndex = new Map(pairs.map(([i2, j]) => [j, previousBlocks[i2].id]));
+  return blocks.map((block, j) => {
+    const oldId = oldIdByNewIndex.get(j);
+    return oldId !== void 0 ? { ...block, id: oldId } : block;
+  });
+}
+function parseAttributes(attrStr) {
+  const result = {};
+  const re = /(\w[\w-]*)(?:=(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
+  let m;
+  while ((m = re.exec(attrStr)) !== null) {
+    result[m[1]] = m[2] ?? m[3] ?? m[4] ?? true;
+  }
+  return result;
+}
+function parseInline(md) {
+  let plainText = "";
+  const styles = [];
+  function recurse(inner, extraStyles, linkMeta) {
+    const start = plainText.length;
+    const result = parseInline(inner);
+    plainText += result.text;
+    const end = plainText.length;
+    for (const styleName of extraStyles) {
+      styles.push({ start, end, style: styleName, ...linkMeta ? { meta: linkMeta } : {} });
+    }
+    for (const s of result.styles) {
+      styles.push({ ...s, start: start + s.start, end: start + s.end });
+    }
+  }
+  let i = 0;
+  while (i < md.length) {
+    const rest = md.slice(i);
+    const boldItalicM = rest.match(/^\*\*\*([\s\S]*?)\*\*\*/);
+    if (boldItalicM) {
+      recurse(boldItalicM[1], ["bold", "italic"]);
+      i += boldItalicM[0].length;
+      continue;
+    }
+    const boldM = rest.match(/^\*\*([\s\S]*?)\*\*/);
+    if (boldM) {
+      recurse(boldM[1], ["bold"]);
+      i += boldM[0].length;
+      continue;
+    }
+    const underlineM = rest.match(/^__([\s\S]*?)__/);
+    if (underlineM) {
+      recurse(underlineM[1], ["underline"]);
+      i += underlineM[0].length;
+      continue;
+    }
+    const italicAsteriskM = rest.match(/^\*([\s\S]*?)\*/);
+    if (italicAsteriskM) {
+      recurse(italicAsteriskM[1], ["italic"]);
+      i += italicAsteriskM[0].length;
+      continue;
+    }
+    const italicUnderscoreM = rest.match(/^_([\s\S]*?)_/);
+    if (italicUnderscoreM) {
+      recurse(italicUnderscoreM[1], ["italic"]);
+      i += italicUnderscoreM[0].length;
+      continue;
+    }
+    const codeM = rest.match(/^`([\s\S]*?)`/);
+    if (codeM) {
+      const start = plainText.length;
+      plainText += codeM[1];
+      styles.push({ start, end: plainText.length, style: "code" });
+      i += codeM[0].length;
+      continue;
+    }
+    const linkM = rest.match(/^\[([\s\S]*?)\]\(([\s\S]*?)\)/);
+    if (linkM) {
+      recurse(linkM[1], ["link"], { href: linkM[2] });
+      i += linkM[0].length;
+      continue;
+    }
+    if (md[i] === "\\" && i + 1 < md.length) {
+      plainText += md[i + 1];
+      i += 2;
+      continue;
+    }
+    plainText += md[i];
+    i++;
+  }
+  return { text: plainText, styles };
+}
+const MARKERS = {
+  bold: { open: "**", close: "**" },
+  italic: { open: "*", close: "*" },
+  underline: { open: "__", close: "__" },
+  code: { open: "`", close: "`" }
+};
+const STANDARD_FIELDS = /* @__PURE__ */ new Set(["id", "text", "type", "styles", "editable"]);
+function blocksToMarkdown(blocks) {
+  const lines = [];
+  let olCounter = 0;
+  for (const block of blocks) {
+    if (block.type === "code") {
+      lines.push("```");
+      lines.push(block.text);
+      lines.push("```");
+      olCounter = 0;
+      continue;
+    }
+    const extraKeys = Object.keys(block).filter((k) => !STANDARD_FIELDS.has(k));
+    if (block.type && extraKeys.length > 0) {
+      const attrStr = extraKeys.map((k) => {
+        const v = block[k];
+        return v === true ? k : `${k}="${v}"`;
+      }).join(" ");
+      const prefix = attrStr ? ` ${attrStr}` : "";
+      if (block.editable === false || !block.text) {
+        lines.push(`<${block.type}${prefix}/>`);
+      } else {
+        lines.push(`<${block.type}${prefix}>${renderInline(block.text, block.styles ?? [])}</${block.type}>`);
+      }
+      olCounter = 0;
+      continue;
+    }
+    const inline = renderInline(block.text, block.styles ?? []);
+    switch (block.type) {
+      case "h1":
+        lines.push(`# ${inline}`);
+        olCounter = 0;
+        break;
+      case "h2":
+        lines.push(`## ${inline}`);
+        olCounter = 0;
+        break;
+      case "h3":
+        lines.push(`### ${inline}`);
+        olCounter = 0;
+        break;
+      case "li":
+        lines.push(`- ${inline}`);
+        olCounter = 0;
+        break;
+      case "ol":
+        lines.push(`${++olCounter}. ${inline}`);
+        break;
+      default:
+        if (block.type) {
+          lines.push(`:::${block.type}`);
+          lines.push(inline);
+          lines.push(":::");
+        } else {
+          lines.push(inline);
+        }
+        olCounter = 0;
+        break;
+    }
+  }
+  return lines.join("\n");
+}
+function escapeMarkdown(text) {
+  return text.replace(/[\\*_`\[\]]/g, "\\$&");
+}
+function buildSegments(text, styles) {
+  var _a;
+  const linkStyles = styles.filter((s) => s.style === "link");
+  const formatStyles = styles.filter((s) => s.style in MARKERS);
+  const bpSet = /* @__PURE__ */ new Set([0, text.length]);
+  for (const s of [...linkStyles, ...formatStyles]) {
+    bpSet.add(s.start);
+    bpSet.add(s.end);
+  }
+  const breakpoints = [...bpSet].sort((a, b) => a - b);
+  const segments = [];
+  for (let i = 0; i < breakpoints.length - 1; i++) {
+    const start = breakpoints[i];
+    const end = breakpoints[i + 1];
+    const formats = formatStyles.filter((s) => s.start <= start && s.end >= end).map((s) => s.style).sort((a, b) => MARKERS[b].open.length - MARKERS[a].open.length);
+    const link = linkStyles.find((l) => l.start <= start && l.end >= end);
+    segments.push({ start, end, formats, linkHref: (_a = link == null ? void 0 : link.meta) == null ? void 0 : _a.href });
+  }
+  return segments;
+}
+function renderSegments(text, segments) {
+  let result = "";
+  let activeFormats = [];
+  for (const seg of segments) {
+    const toClose = activeFormats.filter((f) => !seg.formats.includes(f));
+    if (toClose.length > 0) {
+      for (const f of [...activeFormats].reverse()) result += MARKERS[f].close;
+      for (const f of seg.formats) result += MARKERS[f].open;
+    } else {
+      for (const f of seg.formats) {
+        if (!activeFormats.includes(f)) result += MARKERS[f].open;
+      }
+    }
+    activeFormats = seg.formats;
+    result += seg.formats.includes("code") ? text.slice(seg.start, seg.end) : escapeMarkdown(text.slice(seg.start, seg.end));
+  }
+  for (const f of [...activeFormats].reverse()) result += MARKERS[f].close;
+  return result;
+}
+function renderInline(text, styles) {
+  if (styles.length === 0) return escapeMarkdown(text);
+  const segments = buildSegments(text, styles);
+  let result = "";
+  let i = 0;
+  while (i < segments.length) {
+    const seg = segments[i];
+    if (seg.linkHref !== void 0) {
+      const href = seg.linkHref;
+      const linkSegs = [];
+      while (i < segments.length && segments[i].linkHref === href) {
+        linkSegs.push(segments[i]);
+        i++;
+      }
+      result += `[${renderSegments(text, linkSegs)}](${href})`;
+    } else {
+      const plainSegs = [];
+      while (i < segments.length && segments[i].linkHref === void 0) {
+        plainSegs.push(segments[i]);
+        i++;
+      }
+      result += renderSegments(text, plainSegs);
+    }
+  }
+  return result;
+}
+export {
+  blocksToMarkdown,
+  markdownToBlocks
+};

package/dist/vuewrite.d.ts

@@ -1,10 +1,12 @@
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { ComputedRef } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { HTMLAttributes } from 'vue';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
+import { Reactive } from 'vue';
 import { Ref } from 'vue';
 import { RendererElement } from 'vue';
 import { RendererNode } from 'vue';
@@ -57,22 +59,23 @@ export declare type Style = {
     meta?: any;
 };
 
-export declare const TextEditor: __VLS_WithTemplateSlots<DefineComponent<__VLS_TypePropsToRuntimeProps<{
-decorator?: Decorator | undefined;
-renderer?: Renderer | undefined;
-single?: boolean | undefined;
-modelValue?: string | {
+export declare const TextEditor: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+decorator?: Decorator;
+renderer?: Renderer;
+single?: boolean;
+modelValue?: {
+id?: string;
 text: string;
-styles?: Style[] | undefined;
-type?: string | undefined;
-}[] | undefined;
-parser?: TextParser | undefined;
-styles?: Style[] | undefined;
-autofocus?: boolean | undefined;
-autoselect?: boolean | undefined;
-preventMultiline?: boolean | undefined;
-htmlParser?: ((el: Element) => string | null | void) | undefined;
-}>, {
+styles?: Style[];
+type?: string;
+}[] | string;
+parser?: TextParser;
+styles?: Style[];
+autofocus?: boolean;
+autoselect?: boolean;
+preventMultiline?: boolean;
+htmlParser?: (el: Element) => string | null | void;
+}>>, {
 currentStyles: ComputedRef<Map<string, Style>>;
 currentBlock: ComputedRef<    {
 id: string;
@@ -97,8 +100,8 @@ blockId: string;
 offset: number;
 };
 };
-isFocused: Ref<boolean>;
-getCurrentBlocks: () => Generator<Block, any, unknown>;
+isFocused: Ref<boolean, boolean>;
+getCurrentBlocks: () => Generator<Block>;
 toggleStyle: (style: string) => void;
 applyStyle: (_style: string, meta?: any) => void;
 removeStyle: (_style: string) => void;
@@ -110,30 +113,31 @@ removeCurrentBlock: () => void;
 selectAll: () => void;
 pushHistory: (type: string) => void;
 getClientRects: (selection: TextEditorSelection) => DOMRectList;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 keydown: (...args: any[]) => void;
 "update:modelValue": (...args: any[]) => void;
 "update:styles": (...args: any[]) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-decorator?: Decorator | undefined;
-renderer?: Renderer | undefined;
-single?: boolean | undefined;
-modelValue?: string | {
+decorator?: Decorator;
+renderer?: Renderer;
+single?: boolean;
+modelValue?: {
+id?: string;
 text: string;
-styles?: Style[] | undefined;
-type?: string | undefined;
-}[] | undefined;
-parser?: TextParser | undefined;
-styles?: Style[] | undefined;
-autofocus?: boolean | undefined;
-autoselect?: boolean | undefined;
-preventMultiline?: boolean | undefined;
-htmlParser?: ((el: Element) => string | null | void) | undefined;
-}>>> & {
+styles?: Style[];
+type?: string;
+}[] | string;
+parser?: TextParser;
+styles?: Style[];
+autofocus?: boolean;
+autoselect?: boolean;
+preventMultiline?: boolean;
+htmlParser?: (el: Element) => string | null | void;
+}>>> & Readonly<{
 onKeydown?: ((...args: any[]) => any) | undefined;
 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 "onUpdate:styles"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>, {
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     placeholder?(_: {}): any;
 }>;
 
@@ -172,18 +176,7 @@ declare type TextEditorSelection = {
 
 declare class TextEditorStore {
     history: TextEditorHistory;
-    blocks: {
-        id: string;
-        text: string;
-        type?: string | undefined;
-        styles?: {
-            start: number;
-            end: number;
-            style: string;
-            meta?: any;
-        }[] | undefined;
-        editable?: boolean | undefined;
-    }[];
+    blocks: Reactive<Block[]>;
     selection: {
         anchor: {
             blockId: string;
@@ -196,7 +189,7 @@ declare class TextEditorStore {
     };
     _isCollapsed: ComputedRef<boolean>;
     get isCollapsed(): boolean;
-    isFocused: Ref<boolean>;
+    isFocused: Ref<boolean, boolean>;
     _currentBlock: ComputedRef<    {
     id: string;
     text: string;
@@ -257,31 +250,26 @@ declare class TextEditorStore {
     selectAll(): void;
 }
 
-export declare const TextEditorView: DefineComponent<Readonly<{
-styles?: any;
-decorator?: any;
-renderer?: any;
-parser?: any;
-modelValue?: any;
-listParser?: any;
-}>, () => VNode<RendererNode, RendererElement, {
+export declare const TextEditorView: DefineComponent<    {
+modelValue: Block[] | string;
+decorator?: Decorator | undefined;
+renderer?: Renderer | undefined;
+parser?: TextParser | undefined;
+styles?: Style[] | undefined;
+listParser?: ((block: Block) => string | undefined | void) | undefined;
+}, () => VNode<RendererNode, RendererElement, {
 [key: string]: any;
-}>, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<Readonly<{
-styles?: any;
-decorator?: any;
-renderer?: any;
-parser?: any;
-modelValue?: any;
-listParser?: any;
-}>>>, {
-readonly styles?: any;
-readonly decorator?: any;
-readonly renderer?: any;
-readonly parser?: any;
-readonly modelValue?: any;
-readonly listParser?: any;
-}, {}>;
+}>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
+modelValue: Block[] | string;
+decorator?: Decorator | undefined;
+renderer?: Renderer | undefined;
+parser?: TextParser | undefined;
+styles?: Style[] | undefined;
+listParser?: ((block: Block) => string | undefined | void) | undefined;
+}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 declare type TextParser = (text: string) => Style[];
 
+export declare const uid: () => string;
+
 export { }

package/dist/vuewrite.js

@@ -1,110 +1,30 @@
 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, ref, defineComponent, getCurrentInstance, h, nextTick, useSlots, isProxy, toRaw, onMounted, openBlock, createElementBlock, Fragment, renderList, createBlock, 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;
-}
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { reactive, computed, ref, defineComponent, getCurrentInstance, h, nextTick, useSlots, watch, isProxy, toRaw, onMounted, onUnmounted, openBlock, createElementBlock, unref, Fragment, renderList, createBlock, renderSlot, createCommentVNode } from "vue";
 const findParent = (el, callback) => {
-  if (!el)
-    return null;
+  if (!el) return null;
   if (el.nodeType === Node.ELEMENT_NODE) {
-    if (callback(el))
-      return el;
+    if (callback(el)) return el;
   }
-  if (!el.parentElement)
-    return null;
+  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;
+    if (child.nodeName === "BR") continue;
     const ch = child.nodeType === Node.TEXT_NODE ? child : child.childNodes[0];
-    if (ch === target)
-      return offset;
+    if (ch === target) return offset;
     offset += ch.length;
   }
   return offset;
 };
 const calcNodeByOffset = (parent, offset) => {
   let currentOffset = offset;
-  if (offset === 0)
-    return [parent, 0];
+  if (offset === 0) return [parent, 0];
   for (let child of parent.childNodes) {
-    if (child.nodeName === "BR")
-      continue;
+    if (child.nodeName === "BR") continue;
     const ch = child.nodeType === Node.TEXT_NODE ? child : child.childNodes[0];
     if (currentOffset - ch.length <= 0) {
       return [ch, currentOffset];
@@ -114,29 +34,22 @@ const calcNodeByOffset = (parent, offset) => {
   return [parent, 0];
 };
 const clamp = (val, min, max) => {
-  if (val > max)
-    return max;
-  if (val < min)
-    return min;
+  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 (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;
+    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;
+      if (!isEqual(a[i], b[i])) return false;
     }
     return true;
   }
   for (let key in a) {
-    if (!isEqual(a[key], b[key]))
-      return false;
+    if (!isEqual(a[key], b[key])) return false;
   }
   return true;
 };
@@ -214,14 +127,12 @@ class TextEditorHistory {
     this.cacheBlockIds();
   }
   undo() {
-    if (this.currentCursor === 0)
-      return;
+    if (this.currentCursor === 0) return;
     this.currentCursor--;
     this.applyAction(this.actions[this.currentCursor]);
   }
   redo() {
-    if (this.currentCursor >= this.actions.length - 1)
-      return;
+    if (this.currentCursor >= this.actions.length - 1) return;
     this.currentCursor++;
     this.applyAction(this.actions[this.currentCursor]);
   }
@@ -239,13 +150,11 @@ class TextEditorStore {
     }));
     __publicField(this, "isFocused", ref(false));
     __publicField(this, "_currentBlock", computed(() => {
-      if (this.selection.anchor.blockId !== this.selection.focus.blockId)
-        return null;
+      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 "";
+      if (this.isCollapsed) return "";
       const [start, end, startIndex, endIndex] = this.startAndEnd;
       if (startIndex === endIndex) {
         return this.blocks[startIndex].text.slice(start.offset, end.offset);
@@ -258,17 +167,13 @@ class TextEditorStore {
     __publicField(this, "_currentStyles", computed(() => {
       const [start, end, startIndex, endIndex] = this.startAndEnd;
       const styles = /* @__PURE__ */ new Map();
-      if (startIndex < 0)
-        return styles;
+      if (startIndex < 0) return styles;
       for (let i = startIndex; i <= endIndex; i++) {
         const blockStyles = this.blocks[i].styles;
-        if (!blockStyles)
-          continue;
+        if (!blockStyles) continue;
         for (let style of blockStyles) {
-          if (i === startIndex && start.offset < style.start)
-            continue;
-          if (i === endIndex && end.offset > style.end)
-            continue;
+          if (i === startIndex && start.offset < style.start) continue;
+          if (i === endIndex && end.offset > style.end) continue;
           styles.set(style.style, style);
         }
       }
@@ -284,8 +189,7 @@ class TextEditorStore {
   *getCurrentBlocks() {
     const blockAnchorIndex = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
     const focusAnchorIndex = this.blocks.findIndex((item) => item.id === this.selection.focus.blockId);
-    if (blockAnchorIndex === -1 || focusAnchorIndex === -1)
-      return;
+    if (blockAnchorIndex === -1 || focusAnchorIndex === -1) return;
     const start = Math.min(blockAnchorIndex, focusAnchorIndex);
     const end = Math.max(blockAnchorIndex, focusAnchorIndex);
     for (let i = start; i <= end; i++) {
@@ -297,8 +201,7 @@ class TextEditorStore {
   }
   moveOffset(newOffset) {
     const delta = newOffset - this.selection.anchor.offset;
-    if (delta === 0)
-      return;
+    if (delta === 0) return;
     this.moveStyles(this.currentBlock, this.selection.focus.offset, -delta);
     this.selection.anchor.offset = newOffset;
     this.selection.focus.offset = newOffset;
@@ -323,8 +226,7 @@ class TextEditorStore {
   }
   removeCurrentBlock() {
     const blockIndex = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
-    if (blockIndex < 0)
-      return;
+    if (blockIndex < 0) return;
     this.blocks.splice(blockIndex, 1);
     if (this.blocks.length === 0) {
       this.blocks.push({ id: uid(), text: "" });
@@ -338,8 +240,7 @@ class TextEditorStore {
   }
   removeNewLine() {
     const blockIndex = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
-    if (blockIndex < 1)
-      return;
+    if (blockIndex < 1) return;
     if (this.blocks[blockIndex - 1].editable === false) {
       if (this.blocks[blockIndex].text === "") {
         this.blocks.splice(blockIndex, 1);
@@ -359,15 +260,12 @@ class TextEditorStore {
   }
   onInput(_e) {
     const ev = _e;
-    if (ev.defaultPrevented)
-      return;
+    if (ev.defaultPrevented) return;
     ev.preventDefault();
     const collapsed = this.isCollapsed;
-    if (!collapsed)
-      this.deleteSelected();
+    if (!collapsed) this.deleteSelected();
     const block = this.currentBlock;
-    if (!block)
-      return;
+    if (!block) return;
     if ((ev.inputType === "deleteContentBackward" || ev.inputType === "deleteContentForward") && collapsed) {
       if (ev.inputType === "deleteContentBackward") {
         if (this.selection.anchor.offset === 0) {
@@ -416,8 +314,7 @@ class TextEditorStore {
       return;
     }
     this.deleteSelected();
-    if (!this.currentBlock)
-      return;
+    if (!this.currentBlock) return;
     const endText = this.currentBlock.editable === false ? "" : 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 || "" };
@@ -435,15 +332,13 @@ class TextEditorStore {
   }
   insertText(data) {
     const block = this.currentBlock;
-    if (!block)
-      return;
+    if (!block) return;
     const text = data.replace(/\r/g, "");
     block.text = block.text.slice(0, this.selection.focus.offset) + text + block.text.slice(this.selection.focus.offset);
     this.moveOffset(clamp(this.selection.focus.offset + text.length, 0, block.text.length));
   }
   insertBlock(blockData) {
-    if (!this.currentBlock)
-      return;
+    if (!this.currentBlock) return;
     this.deleteSelected();
     if (this.currentBlock.text !== "") {
       this.addNewLine();
@@ -473,14 +368,11 @@ class TextEditorStore {
     }
   }
   moveStyles(block, offset, delta) {
-    if (!block.styles)
-      return;
+    if (!block.styles) return;
     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.start >= offset) style.start -= delta;
+      if (style.end >= offset) style.end -= delta;
       if (style.end <= style.start) {
         block.styles.splice(i, 1);
         i--;
@@ -488,8 +380,7 @@ class TextEditorStore {
     }
   }
   deleteSelected() {
-    if (this.isCollapsed)
-      return;
+    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);
@@ -511,8 +402,7 @@ class TextEditorStore {
     return this._currentStyles.value;
   }
   applyStyle(_style, meta) {
-    if (this.isCollapsed)
-      return;
+    if (this.isCollapsed) return;
     const [start, end, startIndex, endIndex] = this.startAndEnd;
     for (let i = startIndex; i <= endIndex; i++) {
       const block = this.blocks[i];
@@ -521,13 +411,10 @@ class TextEditorStore {
       let createNewStyle = true;
       if (block.styles) {
         for (let style of block.styles) {
-          if (style.style !== _style)
-            continue;
-          if (style.start > _end || style.end < _start)
-            continue;
+          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;
+            if (_start === style.end || _end === style.start) continue;
             this.removeStyleAt(block, _start, _end, _style);
           } else {
             style.start = Math.min(style.start, _start);
@@ -551,14 +438,11 @@ class TextEditorStore {
   }
   removeStyleAt(block, _start, _end, _style) {
     const removeAll = typeof _style !== "string";
-    if (!block.styles)
-      return;
+    if (!block.styles) return;
     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 (!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--;
@@ -618,17 +502,14 @@ const _sfc_main$2 = defineComponent({
   emits: ["postrender"],
   setup(props, { emit }) {
     const slot = computed(() => {
-      if (!props.block.type)
-        return props.slots["default"] ?? null;
+      if (!props.block.type) return props.slots["default"] ?? null;
       return props.slots[props.block.type] ?? null;
     });
     const instance = getCurrentInstance();
     const getRef = () => {
-      if (!instance)
-        return null;
+      if (!instance) return null;
       const el = instance.vnode.el;
-      if (!el)
-        return null;
+      if (!el) return null;
       if (el.nodeType === Node.TEXT_NODE && el.nextSibling !== null) {
         return el.nextSibling;
       }
@@ -637,11 +518,9 @@ const _sfc_main$2 = defineComponent({
     const cacheNodes = [];
     let cacheEl = null;
     const cleanTree = (count) => {
-      if (props.static === true)
-        return;
+      if (props.static === true) return;
       const el = getRef();
-      if (!el)
-        return;
+      if (!el) return;
       if (el === cacheEl && cacheNodes.length > 0) {
         el.prepend(cacheNodes[0]);
         el.append(cacheNodes[1]);
@@ -653,12 +532,9 @@ const _sfc_main$2 = defineComponent({
           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;
+              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;
             }
@@ -673,8 +549,7 @@ const _sfc_main$2 = defineComponent({
     };
     const content = () => {
       const block = props.block;
-      if (block.editable === false)
-        return [];
+      if (block.editable === false) return [];
       if (block.text.length === 0) {
         cleanTree(1);
         return [h("br")];
@@ -686,16 +561,14 @@ const _sfc_main$2 = defineComponent({
       const markers = [];
       if (block.styles) {
         for (let style of block.styles) {
-          if (style.end <= style.start)
-            continue;
+          if (style.end <= style.start) continue;
           markers.push([style.start, style]);
           markers.push([style.end, style]);
         }
       }
       if (props.parser) {
         for (let style of props.parser(text)) {
-          if (style.end <= style.start)
-            continue;
+          if (style.end <= style.start) continue;
           markers.push([style.start, style]);
           markers.push([style.end, style]);
         }
@@ -725,14 +598,12 @@ const _sfc_main$2 = defineComponent({
       return blocks;
     };
     const renderBlockPart = (text, styles) => {
-      if (!props.decorator)
-        return text;
+      if (!props.decorator) return text;
       let elementTag = "span";
       const attrs = {};
       for (let style of styles) {
         const partProps = props.decorator(style);
-        if (!partProps)
-          continue;
+        if (!partProps) continue;
         const { class: _class, style: _style, tag, ...otherProps } = partProps;
         Object.assign(attrs, otherProps);
         if (_class) {
@@ -745,8 +616,7 @@ const _sfc_main$2 = defineComponent({
           elementTag = tag;
         }
       }
-      if (Object.keys(attrs).length === 0 && elementTag === "span")
-        return text;
+      if (Object.keys(attrs).length === 0 && elementTag === "span") return text;
       return h(elementTag, attrs, text);
     };
     return () => {
@@ -764,8 +634,7 @@ const _sfc_main$2 = defineComponent({
       }
       if (slot.value) {
         const component = slot.value({ content, props: blockProps, block: props.block });
-        if (Array.isArray(component) && component.length === 1)
-          return component[0];
+        if (Array.isArray(component) && component.length === 1) return component[0];
         return component;
       }
       return h(elementTag, blockProps, content());
@@ -800,15 +669,13 @@ const createClipboardEvents = (store, props) => {
     ];
   };
   const onCopy = (e) => {
-    if (e.defaultPrevented)
-      return;
+    if (e.defaultPrevented) return;
     e.preventDefault();
     navigator.clipboard.write(getSelected());
     store.history.push("setText");
   };
   const onCut = (e) => {
-    if (e.defaultPrevented)
-      return;
+    if (e.defaultPrevented) return;
     e.preventDefault();
     navigator.clipboard.write(getSelected());
     store.deleteSelected();
@@ -840,8 +707,7 @@ const createClipboardEvents = (store, props) => {
     }
     if (isTextNode) {
       const text = node.textContent;
-      if (!text)
-        return;
+      if (!text) return;
       insertText(text, type ?? ((_b = props.htmlParser) == null ? void 0 : _b.call(props, node)) ?? void 0);
       store.addNewLine();
       return;
@@ -849,7 +715,7 @@ const createClipboardEvents = (store, props) => {
     for (let child of node.children) {
       if (child.tagName === "DIV") {
         parseHtml(child, type);
-      } else if (child.tagName === "UL") {
+      } else if (child.tagName === "UL" || child.tagName === "OL") {
         for (let li of child.children) {
           parseHtml(li, ((_c = props.htmlParser) == null ? void 0 : _c.call(props, li)) ?? void 0);
         }
@@ -862,8 +728,7 @@ const createClipboardEvents = (store, props) => {
   const parser = new DOMParser();
   const onPaste = (e) => {
     var _a, _b;
-    if (e.defaultPrevented)
-      return;
+    if (e.defaultPrevented) return;
     e.preventDefault();
     const html = (_a = e.clipboardData) == null ? void 0 : _a.getData("text/html");
     if (html) {
@@ -872,8 +737,7 @@ const createClipboardEvents = (store, props) => {
       parseHtml(dom.body);
     } else {
       const text = (_b = e.clipboardData) == null ? void 0 : _b.getData("text");
-      if (!text)
-        return;
+      if (!text) return;
       store.deleteSelected();
       insertText(text);
     }
@@ -908,10 +772,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const store = new TextEditorStore();
     let modelValue = "";
     watch(() => props.modelValue, (newValue) => {
-      if (isProxy(newValue) && toRaw(newValue) === modelValue)
-        return;
-      if (newValue === void 0 || newValue === null || newValue === modelValue)
-        return;
+      if (isProxy(newValue) && toRaw(newValue) === modelValue) return;
+      if (newValue === void 0 || newValue === null || newValue === modelValue) return;
       if (!Array.isArray(newValue)) {
         store.blocks[0].text = newValue;
         return;
@@ -921,17 +783,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
         store.blocks.length = newValue.length;
         for (let i = 0; i < newValue.length; i++) {
-          store.blocks[i] = { ...newValue[i], id: uid() };
+          store.blocks[i] = { ...newValue[i], id: newValue[i].id ?? uid() };
         }
       }
     }, { immediate: true });
     let styles;
     watch(() => props.styles, (newStyles) => {
-      if (!newStyles || newStyles.length === 0 || newStyles === styles)
-        return;
+      if (!newStyles || newStyles.length === 0 || newStyles === styles) return;
       for (let i = 0; i < store.blocks.length; i++) {
-        if (newStyles.length <= i)
-          break;
+        if (newStyles.length <= i) break;
         store.blocks[i].styles = newStyles;
       }
     }, { immediate: true });
@@ -948,8 +808,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     }, { deep: true });
     const onKeyDown = (e) => {
       emit("keydown", e);
-      if (e.defaultPrevented)
-        return;
+      if (e.defaultPrevented) return;
       if (e.code === "Enter") {
         e.preventDefault();
         if (!props.preventMultiline && (e.shiftKey || props.single)) {
@@ -973,7 +832,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     };
     let cachedSelection = {};
-    useEventListener(document, "selectionchange", () => {
+    const onSelectionChange = () => {
       const sel = window.getSelection();
       const anchor = findParent(sel.anchorNode, (el) => el.hasAttribute("data-vw-block-id") && el.parentElement === textEditorRef.value);
       if (anchor) {
@@ -993,11 +852,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       if (anchor && focus) {
         cachedSelection = JSON.parse(JSON.stringify(store.selection));
       }
-    });
+    };
+    onMounted(() => document.addEventListener("selectionchange", onSelectionChange));
+    onUnmounted(() => document.removeEventListener("selectionchange", onSelectionChange));
     let postRendered = false;
     const onPostRender = () => {
-      if (postRendered)
-        return;
+      if (postRendered) return;
       cachedSelection = {};
       postRendered = true;
       applySelection();
@@ -1019,8 +879,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         cachedSelection = JSON.parse(JSON.stringify(store.selection));
         return;
       }
-      if (isEqual(store.selection, cachedSelection))
-        return;
+      if (isEqual(store.selection, cachedSelection)) return;
       const anchor = getNode(store.selection.anchor.blockId);
       const focus = getNode(store.selection.focus.blockId);
       const nativeSelection = window.getSelection();
@@ -1172,5 +1031,6 @@ const _sfc_main = defineComponent({
 });
 export {
   _sfc_main$1 as TextEditor,
-  _sfc_main as TextEditorView
+  _sfc_main as TextEditorView,
+  uid
 };

package/package.json

@@ -1,38 +1,42 @@
-{
-  "name": "vuewrite",
-  "description": "Rich Text Editor based on Vue3 reactivity",
-  "private": false,
-  "version": "0.0.25",
-  "type": "module",
-  "license": "MIT",
-  "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"
-  ]
-}
+{
+  "name": "vuewrite",
+  "description": "Rich Text Editor based on Vue3 reactivity",
+  "private": false,
+  "version": "0.0.27",
+  "type": "module",
+  "license": "MIT",
+  "author": "den59k",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/den59k/vuewrite.git"
+  },
+  "main": "dist/vuewrite.js",
+  "types": "dist/vuewrite.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/vuewrite.js",
+      "types": "./dist/vuewrite.d.ts"
+    },
+    "./markdown": {
+      "import": "./dist/markdown.js",
+      "types": "./dist/markdown.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vue-tsc && vite build",
+    "dev": "vite build --watch"
+  },
+  "dependencies": {
+    "vue": "^3",
+    "vuewrite-markdown": "0.0.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1",
+    "vuesix": "^1.0.12",
+    "vue-tsc": "^2.0.6"
+  },
+  "files": ["dist"]
+}

package/README.md

@@ -1,68 +0,0 @@
-# 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 
-    ref="textEditorRef" 
-    v-model="modelValue"
-    single
-    class="text-editor"
-    :decorator="decorator" 
-    @keydown="onKeyDown"
-  />
-</template>
-
-<script lang="ts">
-import { TextEditor, TextEditorRef } from 'vuewrite'
-
-const textEditorRef = shallowRef<TextEditorRef>()
-const modelValue = shallowRef("")
-
-const onKeyDown = (e: KeyboardEvent) => {
-  if (!textEditorRef.value) return
-  if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
-    if (e.code === "KeyB") {
-      textEditorRef.value.toggleStyle("bold")
-    }
-    if (e.code === "KeyI") {
-      textEditorRef.value.toggleStyle("italic")
-    }
-    if (e.code === "KeyU") {
-      textEditorRef.value.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>
-
-```