vuewrite 0.0.29 → 1.0.0

package/API.md

@@ -0,0 +1,116 @@
+# API
+
+## Exports
+
+`vuewrite`
+
+- `TextEditor` — editable component
+- `TextViewer` — read-only renderer
+- `uid()` — incremental string id generator for new blocks
+- types: `Block`, `Style`, `Decorator`, `Renderer`, `TextParser`, `TextEditorRef`
+
+`vuewrite/markdown`
+
+- `markdownToBlocks`, `blocksToMarkdown`
+- types: `Block`, `Style`
+
+## Types
+
+```ts
+type Style = { start: number; end: number; style: string; meta?: any }
+type Block = { id: string; text: string; type?: string; styles?: Style[]; editable?: boolean }
+type Decorator  = (style: Style) => (HTMLAttributes & { tag?: string }) | undefined
+type Renderer   = (block: Block) => (HTMLAttributes & { tag?: string }) | undefined
+type TextParser = (text: string) => Style[]
+```
+
+- `Style` — an inline range `[start, end)` with a style name and optional `meta` (e.g. a link's `href`).
+- `Block` — one line/paragraph. `type` is your own label (`h1`, `li`, `code`, …). `editable: false` marks an atomic block (image, divider) the caret skips over.
+- `Decorator` — maps an active style to the element it renders as: `tag` (defaults to `span`) plus any attributes, `class`, `style`.
+- `Renderer` — maps a block to its container element (`tag` plus attributes).
+- `TextParser` — derives inline styles from text at render time (syntax highlighting, mentions). Not stored in the model.
+
+## `<TextEditor>`
+
+### Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `modelValue` | `Block[] \| string` | `v-model`. Array of blocks, or a string in `single` mode. |
+| `single` | `boolean` | Treat content as a single block; emits a string plus `update:styles`. |
+| `styles` | `Style[]` | Style ranges for `single`/string mode (`v-model:styles`). |
+| `decorator` | `Decorator` | Renders inline styles. |
+| `renderer` | `Renderer` | Renders block containers. |
+| `parser` | `TextParser` | Inline styles derived at render, not stored. |
+| `htmlParser` | `(el: Element) => string \| null \| void` | On paste, maps an HTML element to a block type. |
+| `autofocus` | `boolean` | Focus on mount. |
+| `autoselect` | `boolean` | Focus and select all on mount. |
+| `preventMultiline` | `boolean` | Disables soft `\n` breaks: every Enter starts a new block, and pasted newlines split into blocks. |
+
+### Emits
+
+| Event | Payload |
+|---|---|
+| `update:modelValue` | `Block[]`, or `string` in `single` mode |
+| `update:styles` | `Style[]` (`single` mode) |
+| `keydown` | `KeyboardEvent`, fired before built-in handling — call `preventDefault()` to take over |
+
+Built-in keys: Enter (new block), Shift+Enter (soft break), Ctrl/Cmd+Z and Ctrl/Cmd+Y (undo/redo). Copy, cut and paste are handled — clipboard HTML carries inline styles, with a plain-text fallback.
+
+### Slots
+
+| Slot | Rendered for | Scope |
+|---|---|---|
+| `default` | untyped blocks | `{ content, props, block }` |
+| `[type]` | blocks whose `type` matches the slot name (e.g. `#code`) | `{ content, props, block }` |
+| `placeholder` | the empty editor | — |
+
+Inside a slot, bind `props` to your root element and call `content()` to render the block's editable text.
+
+### Ref — `TextEditorRef`
+
+Grab it with a template ref. Reactive getters plus methods that act on the current selection:
+
+| Member | Type | Description |
+|---|---|---|
+| `selection` | `{ anchor, focus }` | Each end is `{ blockId, offset }`. |
+| `isFocused` | `boolean` | |
+| `isCollapsed` | `boolean` | Selection is a caret, not a range. |
+| `currentBlock` | `Block \| null` | Block under the caret; `null` when the selection spans blocks. |
+| `currentStyles` | `Map<string, Style>` | Styles active across the whole selection. |
+| `getCurrentBlocks()` | `Iterable<Block>` | Blocks the selection touches. |
+| `toggleStyle(name)` | `void` | |
+| `applyStyle(name, meta?)` | `void` | |
+| `removeStyle(name)` | `void` | |
+| `insertText(text)` | `void` | Insert at the caret. |
+| `insertBlock(block)` | `void` | `Partial<Block>` — split and insert a typed or atomic block. |
+| `addNewLine()` | `void` | |
+| `removeNewLine()` | `void` | Merge with the previous block. |
+| `removeCurrentBlock()` | `void` | |
+| `selectAll()` | `void` | |
+| `pushHistory(type)` | `void` | Record an undo step after mutating blocks directly. |
+| `getClientRects(selection)` | `DOMRectList` | Selection geometry, for positioning popovers. |
+
+When you mutate blocks directly (for example, changing a block's `type`), call `pushHistory(...)` so the change becomes undoable.
+
+## `<TextViewer>`
+
+Read-only renderer for the same blocks (previews, read views). Takes `modelValue`, `decorator`, `renderer`, `parser`, `styles`, and:
+
+| Prop | Type | Description |
+|---|---|---|
+| `listParser` | `(block: Block) => string \| void` | Return a wrapper tag (`ul`/`ol`) to group consecutive blocks into a list. |
+
+Slots: `default` and `[type]`, with the same scope as the editor (without editing).
+
+## Markdown — `vuewrite/markdown`
+
+```ts
+markdownToBlocks(markdown: string, previousBlocks?: Block[], options?: { softBreaks?: boolean }): Block[]
+blocksToMarkdown(blocks: Block[], options?: { softBreaks?: boolean }): string
+```
+
+- `previousBlocks` — pass the result of a prior parse to reuse ids, so unchanged blocks keep stable keys across edits.
+- `softBreaks` — when `true`, a single newline is a soft break inside a block and blank lines separate paragraphs; `blocksToMarkdown` mirrors this (blank line between blocks, consecutive list items stay tight). Both default to `false`, where blocks join with a single newline and empty blocks act as blank lines.
+
+Supported syntax: `#`/`##`/`###` headings, `-`/`*` and `1.` lists, fenced ` ``` ` code, `---` divider, inline `**bold**` `*italic*` `__underline__` `` `code` `` `[text](url)`, `::: type … :::` custom blocks, and `<tag attrs>…</tag>` / `<tag/>` XML blocks.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 den59k
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# VueWrite
+
+Another rich text editor, built on Vue 3 reactivity. It ships no styles and no block types — you decide how everything renders, and it handles the editing model, selection, history and clipboard. About 11 kB gzipped, Vue 3 the only dependency.
+
+[Demo](https://vuewrite.easix.ru) · [API reference](./API.md)
+
+## Install
+
+```sh
+npm install vuewrite
+```
+
+## How it works
+
+A document is a flat array of blocks. A block is plain `text` plus a list of style ranges:
+
+```ts
+{ id: "1", text: "Hello world", styles: [{ start: 0, end: 5, style: "bold" }] }
+```
+
+Nothing is styled out of the box. A `decorator` turns a style into a tag/class/attributes; a `renderer` turns a block into its element. Bold, headings, lists, links, code blocks, images — you map them however you want.
+
+## Quickstart
+
+```vue
+<template>
+  <TextEditor ref="editor" v-model="text" :decorator="decorator" class="editor" @keydown="onKeyDown" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TextEditor } from 'vuewrite'
+import type { TextEditorRef, Style } from 'vuewrite'
+
+const editor = ref<TextEditorRef>()
+const text = ref([{ id: '1', text: '' }])
+
+const decorator = (style: Style) => ({ class: style.style })
+
+const onKeyDown = (e: KeyboardEvent) => {
+  if ((e.ctrlKey || e.metaKey) && e.code === 'KeyB') {
+    e.preventDefault()
+    editor.value?.toggleStyle('bold')
+  }
+}
+</script>
+
+<style>
+.editor { white-space: pre-wrap; outline: none; }
+.editor .bold { font-weight: 700; }
+</style>
+```
+
+## Components
+
+- `TextEditor` — the editable, contenteditable component (`v-model` of blocks, or a string in `single` mode).
+- `TextViewer` — a read-only renderer for the same blocks, for previews and read paths.
+
+## Markdown
+
+`vuewrite/markdown` converts between Markdown and blocks:
+
+```ts
+import { markdownToBlocks, blocksToMarkdown } from 'vuewrite/markdown'
+```
+
+Full props, the editor ref, slots, types and the Markdown options are in the [API reference](./API.md).

package/dist/markdown.js

@@ -42,6 +42,11 @@ function parseBlocks(lines, softBreaks) {
       i++;
       continue;
     }
+    if (/^-{3,}$/.test(line)) {
+      push({ text: "", type: "hr", editable: false });
+      i++;
+      continue;
+    }
     const headingMatch = line.match(/^(#{1,3}) (.+)$/);
     if (headingMatch) {
       push({ type: `h${headingMatch[1].length}`, ...withStyles(parseInline(headingMatch[2])) });
@@ -221,14 +226,18 @@ const MARKERS = {
   code: { open: "`", close: "`" }
 };
 const STANDARD_FIELDS = /* @__PURE__ */ new Set(["id", "text", "type", "styles", "editable"]);
-function blocksToMarkdown(blocks) {
-  const lines = [];
+const isListType = (type) => type === "li" || type === "ol";
+function blocksToMarkdown(blocks, options = {}) {
+  const parts = [];
   let olCounter = 0;
   for (const block of blocks) {
     if (block.type === "code") {
-      lines.push("```");
-      lines.push(block.text);
-      lines.push("```");
+      parts.push({ md: "```\n" + block.text + "\n```", type: "code" });
+      olCounter = 0;
+      continue;
+    }
+    if (block.type === "hr") {
+      parts.push({ md: "---", type: "hr" });
       olCounter = 0;
       continue;
     }
@@ -240,9 +249,9 @@ function blocksToMarkdown(blocks) {
       }).join(" ");
       const prefix = attrStr ? ` ${attrStr}` : "";
       if (block.editable === false || !block.text) {
-        lines.push(`<${block.type}${prefix}/>`);
+        parts.push({ md: `<${block.type}${prefix}/>`, type: block.type });
       } else {
-        lines.push(`<${block.type}${prefix}>${renderInline(block.text, block.styles ?? [])}</${block.type}>`);
+        parts.push({ md: `<${block.type}${prefix}>${renderInline(block.text, block.styles ?? [])}</${block.type}>`, type: block.type });
       }
       olCounter = 0;
       continue;
@@ -250,37 +259,46 @@ function blocksToMarkdown(blocks) {
     const inline = renderInline(block.text, block.styles ?? []);
     switch (block.type) {
       case "h1":
-        lines.push(`# ${inline}`);
+        parts.push({ md: `# ${inline}`, type: "h1" });
         olCounter = 0;
         break;
       case "h2":
-        lines.push(`## ${inline}`);
+        parts.push({ md: `## ${inline}`, type: "h2" });
         olCounter = 0;
         break;
       case "h3":
-        lines.push(`### ${inline}`);
+        parts.push({ md: `### ${inline}`, type: "h3" });
         olCounter = 0;
         break;
       case "li":
-        lines.push(`- ${inline}`);
+        parts.push({ md: `- ${inline}`, type: "li" });
         olCounter = 0;
         break;
       case "ol":
-        lines.push(`${++olCounter}. ${inline}`);
+        parts.push({ md: `${++olCounter}. ${inline}`, type: "ol" });
         break;
       default:
         if (block.type) {
-          lines.push(`:::${block.type}`);
-          lines.push(inline);
-          lines.push(":::");
+          parts.push({ md: `:::${block.type}
+${inline}
+:::`, type: block.type });
         } else {
-          lines.push(inline);
+          parts.push({ md: inline, type: void 0 });
         }
         olCounter = 0;
         break;
     }
   }
-  return lines.join("\n");
+  if (!options.softBreaks) return parts.map((p) => p.md).join("\n");
+  let result = "";
+  for (let i = 0; i < parts.length; i++) {
+    if (i > 0) {
+      const tight = isListType(parts[i - 1].type) && isListType(parts[i].type);
+      result += tight ? "\n" : "\n\n";
+    }
+    result += parts[i].md;
+  }
+  return result;
 }
 function escapeMarkdown(text) {
   return text.replace(/[\\*_`\[\]]/g, "\\$&");

package/dist/vuewrite.d.ts

@@ -48,7 +48,7 @@ declare type HistoryAction = {
     selection: TextEditorSelection;
 };
 
-declare type Renderer = (block: Block) => HTMLAttributes & {
+export declare type Renderer = (block: Block) => HTMLAttributes & {
     tag?: string;
 } | undefined;
 
@@ -144,13 +144,16 @@ onKeydown?: ((...args: any[]) => any) | undefined;
 declare class TextEditorHistory {
     actions: HistoryAction[];
     currentCursor: number;
-    private blocksIds;
-    private cachedBlocksJson;
+    /** Block ids as of the last full snapshot — used to detect structural changes. */
+    private cachedBlockIds;
+    /** Independent deep copy of the document as of the previous push. */
+    private cachedBlocks;
     private store;
     constructor(store: TextEditorStore);
     private cacheBlockIds;
     private blockIdsChanged;
-    tickStarted: boolean;
+    /** Keep the cached document copy in sync after an incremental, single-block edit. */
+    private syncCachedBlock;
     push(type: HistoryAction["type"]): void;
     private applyAction;
     undo(): void;
@@ -190,6 +193,9 @@ declare class TextEditorStore {
     _isCollapsed: ComputedRef<boolean>;
     get isCollapsed(): boolean;
     isFocused: Ref<boolean, boolean>;
+    /** True while an IME composition is in progress (CJK, dead keys, mobile suggestions). */
+    isComposing: boolean;
+    private compositionSelection;
     _currentBlock: ComputedRef<    {
     id: string;
     text: string;
@@ -223,6 +229,14 @@ declare class TextEditorStore {
     removeCurrentBlock(): void;
     removeNewLine(): void;
     onInput(_e: Event): void;
+    /** Called on `compositionstart`: remember where composition begins so the
+     *  committed text can be applied there once the browser is done. */
+    startComposition(): void;
+    /** Called on `compositionend` with the committed text. The browser already
+     *  inserted it into the DOM during composition; we re-apply it through the
+     *  model (from the remembered start position) so the model — and the re-render
+     *  it triggers — become the source of truth again, preserving styles/offsets. */
+    endComposition(data: string): void;
     addNewLineBefore(): void;
     addNewLine(): void;
     addNewLineAfter(): {
@@ -250,7 +264,9 @@ declare class TextEditorStore {
     selectAll(): void;
 }
 
-export declare const TextEditorView: DefineComponent<    {
+export declare type TextParser = (text: string) => Style[];
+
+export declare const TextViewer: DefineComponent<    {
 modelValue: Block[] | string;
 decorator?: Decorator | undefined;
 renderer?: Renderer | undefined;
@@ -268,8 +284,6 @@ 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

@@ -53,22 +53,50 @@ const isEqual = (a, b) => {
   }
   return true;
 };
+const deepClone = (value) => JSON.parse(JSON.stringify(value));
+const cloneStyle = (style) => {
+  const out = { start: style.start, end: style.end, style: style.style };
+  if (style.meta !== void 0) out.meta = deepClone(style.meta);
+  return out;
+};
+const cloneBlock = (block) => {
+  const out = { id: block.id, text: block.text };
+  if (block.type !== void 0) out.type = block.type;
+  if (block.editable !== void 0) out.editable = block.editable;
+  if (block.styles) out.styles = block.styles.map(cloneStyle);
+  return out;
+};
+const cloneBlocks = (blocks) => blocks.map(cloneBlock);
+const cloneSelection = (selection) => ({
+  anchor: { blockId: selection.anchor.blockId, offset: selection.anchor.offset },
+  focus: { blockId: selection.focus.blockId, offset: selection.focus.offset }
+});
 class TextEditorHistory {
   constructor(store) {
     __publicField(this, "actions", []);
     __publicField(this, "currentCursor", 0);
-    __publicField(this, "blocksIds", "");
-    __publicField(this, "cachedBlocksJson", "");
+    /** Block ids as of the last full snapshot — used to detect structural changes. */
+    __publicField(this, "cachedBlockIds", []);
+    /** Independent deep copy of the document as of the previous push. */
+    __publicField(this, "cachedBlocks", []);
     __publicField(this, "store");
-    __publicField(this, "tickStarted", false);
     this.store = store;
-    window.showHistory = () => console.log(this.actions);
   }
   cacheBlockIds() {
-    this.blocksIds = this.store.blocks.map((item) => item.id).join(",");
+    this.cachedBlockIds = this.store.blocks.map((item) => item.id);
   }
   blockIdsChanged() {
-    return this.blocksIds !== this.store.blocks.map((item) => item.id).join(",");
+    const blocks = this.store.blocks;
+    if (blocks.length !== this.cachedBlockIds.length) return true;
+    for (let i = 0; i < blocks.length; i++) {
+      if (blocks[i].id !== this.cachedBlockIds[i]) return true;
+    }
+    return false;
+  }
+  /** Keep the cached document copy in sync after an incremental, single-block edit. */
+  syncCachedBlock(block) {
+    const idx = this.cachedBlocks.findIndex((item) => item.id === block.id);
+    if (idx >= 0) this.cachedBlocks[idx] = cloneBlock(block);
   }
   push(type) {
     var _a;
@@ -76,29 +104,28 @@ class TextEditorHistory {
       this.actions.length = this.currentCursor + 1;
     }
     const lastAction = this.actions.length > 0 ? this.actions[this.actions.length - 1] : null;
-    const selection = JSON.parse(JSON.stringify(this.store.selection));
+    const selection = cloneSelection(this.store.selection);
     const fullUpdate = type === "setText" || type === "addNewLine" || this.blockIdsChanged();
-    const blocksJson = JSON.stringify(this.store.blocks);
     if (!fullUpdate && this.store.currentBlock) {
-      const currentBlock = JSON.parse(JSON.stringify(this.store.currentBlock));
-      if (lastAction && lastAction.type === type && ((_a = lastAction.blocks[0]) == null ? void 0 : _a.id) === currentBlock.id && (lastAction.type === "insertText" || lastAction.type === "deleteContentBackward" || lastAction.type === "deleteContentForward")) {
+      const currentBlock = cloneBlock(this.store.currentBlock);
+      const canCoalesce = lastAction !== null && lastAction.type === type && ((_a = lastAction.blocks[0]) == null ? void 0 : _a.id) === currentBlock.id && (type === "insertText" || type === "deleteContentBackward" || type === "deleteContentForward");
+      if (canCoalesce) {
         lastAction.blocks = [currentBlock];
         lastAction.selection = selection;
       } else {
-        this.actions.push({ type, blocks: [currentBlock], selection, fullUpdate });
+        this.actions.push({ type, blocks: [currentBlock], selection, fullUpdate: false });
       }
+      this.syncCachedBlock(currentBlock);
     } else {
-      this.actions.push({ type, blocks: JSON.parse(blocksJson), selection, fullUpdate });
-    }
-    this.currentCursor = this.actions.length - 1;
-    if (fullUpdate) {
+      this.actions.push({ type, blocks: cloneBlocks(this.store.blocks), selection, fullUpdate: true });
       if (lastAction && !lastAction.fullUpdate) {
         lastAction.fullUpdate = true;
-        lastAction.blocks = JSON.parse(this.cachedBlocksJson);
+        lastAction.blocks = this.cachedBlocks;
       }
+      this.cachedBlocks = cloneBlocks(this.store.blocks);
       this.cacheBlockIds();
     }
-    this.cachedBlocksJson = blocksJson;
+    this.currentCursor = this.actions.length - 1;
   }
   applyAction(action) {
     if (action.fullUpdate) {
@@ -149,6 +176,9 @@ class TextEditorStore {
       return this.selection.anchor.blockId === this.selection.focus.blockId && this.selection.anchor.offset === this.selection.focus.offset;
     }));
     __publicField(this, "isFocused", ref(false));
+    /** True while an IME composition is in progress (CJK, dead keys, mobile suggestions). */
+    __publicField(this, "isComposing", false);
+    __publicField(this, "compositionSelection", null);
     __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;
@@ -261,6 +291,9 @@ class TextEditorStore {
   onInput(_e) {
     const ev = _e;
     if (ev.defaultPrevented) return;
+    if (this.isComposing || ev.inputType === "insertCompositionText" || ev.inputType === "deleteCompositionText") {
+      return;
+    }
     ev.preventDefault();
     const collapsed = this.isCollapsed;
     if (!collapsed) this.deleteSelected();
@@ -301,6 +334,31 @@ class TextEditorStore {
       this.history.push("insertText");
     }
   }
+  /** Called on `compositionstart`: remember where composition begins so the
+   *  committed text can be applied there once the browser is done. */
+  startComposition() {
+    this.isComposing = true;
+    this.compositionSelection = {
+      anchor: { ...this.selection.anchor },
+      focus: { ...this.selection.focus }
+    };
+  }
+  /** Called on `compositionend` with the committed text. The browser already
+   *  inserted it into the DOM during composition; we re-apply it through the
+   *  model (from the remembered start position) so the model — and the re-render
+   *  it triggers — become the source of truth again, preserving styles/offsets. */
+  endComposition(data) {
+    this.isComposing = false;
+    const start = this.compositionSelection;
+    this.compositionSelection = null;
+    if (!start) return;
+    Object.assign(this.selection.anchor, start.anchor);
+    Object.assign(this.selection.focus, start.focus);
+    const hadSelection = !this.isCollapsed;
+    if (hadSelection) this.deleteSelected();
+    if (data) this.insertText(data);
+    if (data || hadSelection) this.history.push("insertText");
+  }
   addNewLineBefore() {
     const index = this.blocks.findIndex((item) => item.id === this.selection.anchor.blockId);
     const block = { id: uid(), text: "" };
@@ -543,6 +601,8 @@ const _sfc_main$2 = defineComponent({
         if (cacheEl) {
           cacheNodes[0] = cacheEl.childNodes[0];
           cacheNodes[1] = cacheEl.childNodes[cacheEl.childNodes.length - 1];
+        } else {
+          cacheNodes.length = 0;
         }
         emit("postrender");
       });
@@ -641,25 +701,219 @@ const _sfc_main$2 = defineComponent({
     };
   }
 });
+const BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "DIV",
+  "P",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "LI",
+  "BLOCKQUOTE",
+  "PRE",
+  "SECTION",
+  "ARTICLE",
+  "HEADER",
+  "FOOTER"
+]);
+const INLINE_STYLE_TAGS = {
+  B: "bold",
+  STRONG: "bold",
+  I: "italic",
+  EM: "italic",
+  U: "underline",
+  CODE: "code"
+};
+const STYLE_TO_TAG = { bold: "b", italic: "i", underline: "u", code: "code" };
+const isContainerChild = (el) => BLOCK_TAGS.has(el.tagName) || el.tagName === "UL" || el.tagName === "OL" || el.tagName === "HR";
+const parseColor = (styleAttr) => {
+  if (!styleAttr) return void 0;
+  const match = styleAttr.match(/(?:^|;)\s*color\s*:\s*([^;]+)/i);
+  return match ? match[1].trim() : void 0;
+};
+const recordInlineStyles = (styles, el, start, end) => {
+  if (end <= start) return;
+  const name = INLINE_STYLE_TAGS[el.tagName];
+  if (name) styles.push({ start, end, style: name });
+  if (el.tagName === "A") {
+    const href = el.getAttribute("href");
+    styles.push(href ? { start, end, style: "link", meta: { href } } : { start, end, style: "link" });
+  }
+  const color = parseColor(el.getAttribute("style"));
+  if (color) styles.push({ start, end, style: "color", meta: { color } });
+};
+const append = (acc, node, preserve) => {
+  for (const child of node.childNodes) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      const value = child.textContent ?? "";
+      acc.text += preserve ? value : value.replace(/\s+/g, " ");
+      continue;
+    }
+    if (child.nodeType !== Node.ELEMENT_NODE) continue;
+    const el = child;
+    if (el.tagName === "BR") {
+      acc.text += "\n";
+      continue;
+    }
+    const start = acc.text.length;
+    append(acc, el, preserve);
+    recordInlineStyles(acc.styles, el, start, acc.text.length);
+  }
+};
+const trimWithStyles = (text, styles) => {
+  const leading = text.length - text.replace(/^\s+/, "").length;
+  const trimmed = text.trim();
+  if (leading === 0 && trimmed.length === text.length) return { text, styles };
+  const adjusted = [];
+  for (const s of styles) {
+    const start = Math.max(0, s.start - leading);
+    const end = Math.min(trimmed.length, s.end - leading);
+    if (end > start) adjusted.push({ ...s, start, end });
+  }
+  return { text: trimmed, styles: adjusted };
+};
+const makeBlock = (result, type) => {
+  const block = type !== void 0 ? { text: result.text, type } : { text: result.text };
+  if (result.styles.length) block.styles = result.styles;
+  return block;
+};
+const htmlToBlocks = (root, htmlParser) => {
+  const out = [];
+  const walk = (node) => {
+    let buffer = { text: "", styles: [] };
+    const flush = () => {
+      const trimmed = trimWithStyles(buffer.text, buffer.styles);
+      if (trimmed.text) out.push(makeBlock(trimmed));
+      buffer = { text: "", styles: [] };
+    };
+    for (const child of node.childNodes) {
+      if (child.nodeType === Node.TEXT_NODE) {
+        buffer.text += (child.textContent ?? "").replace(/\s+/g, " ");
+        continue;
+      }
+      if (child.nodeType !== Node.ELEMENT_NODE) continue;
+      const el = child;
+      const tag = el.tagName;
+      if (tag === "BR") {
+        buffer.text += "\n";
+        continue;
+      }
+      if (tag === "HR") {
+        flush();
+        out.push({ text: "", type: (htmlParser == null ? void 0 : htmlParser(el)) ?? "hr", editable: false });
+        continue;
+      }
+      if (tag === "UL" || tag === "OL") {
+        flush();
+        const defaultType = tag === "OL" ? "ol" : "li";
+        for (const li of el.children) {
+          const acc = { text: "", styles: [] };
+          append(acc, li, false);
+          out.push(makeBlock(trimWithStyles(acc.text, acc.styles), (htmlParser == null ? void 0 : htmlParser(li)) ?? defaultType));
+        }
+        continue;
+      }
+      if (BLOCK_TAGS.has(tag)) {
+        flush();
+        if (Array.from(el.children).some(isContainerChild)) {
+          walk(el);
+        } else {
+          const preserve = tag === "PRE";
+          const acc = { text: "", styles: [] };
+          append(acc, el, preserve);
+          const result = preserve ? acc : trimWithStyles(acc.text, acc.styles);
+          out.push(makeBlock(result, (htmlParser == null ? void 0 : htmlParser(el)) ?? void 0));
+        }
+        continue;
+      }
+      const start = buffer.text.length;
+      append(buffer, el, false);
+      recordInlineStyles(buffer.styles, el, start, buffer.text.length);
+    }
+    flush();
+  };
+  walk(root);
+  return out;
+};
+const escapeText = (text) => text.replace(/[&<>]/g, (c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : "&gt;").replace(/\n/g, "<br>");
+const escapeAttr = (value) => value.replace(/[&<>"]/g, (c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : "&quot;");
+const tagFor = (style) => {
+  var _a, _b;
+  if (style.style === "link") {
+    const href = ((_a = style.meta) == null ? void 0 : _a.href) ?? "";
+    return { open: href ? `<a href="${escapeAttr(href)}">` : "<a>", close: "</a>" };
+  }
+  if (style.style === "color") {
+    const color = ((_b = style.meta) == null ? void 0 : _b.color) ?? "";
+    return color ? { open: `<span style="color: ${escapeAttr(color)}">`, close: "</span>" } : null;
+  }
+  const tag = STYLE_TO_TAG[style.style];
+  return tag ? { open: `<${tag}>`, close: `</${tag}>` } : null;
+};
+const stylesToHtml = (text, styles) => {
+  if (!styles || styles.length === 0) return escapeText(text);
+  const bounds = /* @__PURE__ */ new Set([0, text.length]);
+  for (const s of styles) {
+    bounds.add(s.start);
+    bounds.add(s.end);
+  }
+  const points = [...bounds].sort((a, b) => a - b);
+  let html = "";
+  for (let i = 0; i < points.length - 1; i++) {
+    const from = points[i];
+    const to = points[i + 1];
+    if (to <= from) continue;
+    let chunk = escapeText(text.slice(from, to));
+    for (const s of styles) {
+      if (s.start <= from && s.end >= to) {
+        const wrap = tagFor(s);
+        if (wrap) chunk = wrap.open + chunk + wrap.close;
+      }
+    }
+    html += chunk;
+  }
+  return html;
+};
+const sliceStyles = (styles, from, to) => {
+  if (!styles) return [];
+  const out = [];
+  for (const s of styles) {
+    const start = Math.max(s.start, from);
+    const end = Math.min(s.end, to);
+    if (end > start) out.push({ ...s, start: start - from, end: end - from });
+  }
+  return out;
+};
 const createClipboardEvents = (store, props) => {
   const getSelected = () => {
     const [start, end, startIndex, endIndex] = store.startAndEnd;
     if (startIndex === endIndex) {
-      const text2 = store.blocks[startIndex].text.slice(start.offset, end.offset);
+      const block = store.blocks[startIndex];
+      const text2 = block.text.slice(start.offset, end.offset);
+      const styles = sliceStyles(block.styles, start.offset, end.offset);
       return [
         new ClipboardItem({
+          "text/html": new Blob([stylesToHtml(text2, styles)], { type: "text/html" }),
           "text/plain": new Blob([text2], { type: "text/plain" })
         })
       ];
     }
-    const startText = store.blocks[startIndex].text.slice(start.offset);
-    const endText = store.blocks[endIndex].text.slice(0, end.offset);
     const arr = [
-      { type: store.blocks[startIndex].type, text: startText },
-      ...store.blocks.slice(startIndex + 1, endIndex),
-      { type: store.blocks[endIndex].type, text: endText }
+      {
+        type: store.blocks[startIndex].type,
+        text: store.blocks[startIndex].text.slice(start.offset),
+        styles: sliceStyles(store.blocks[startIndex].styles, start.offset, store.blocks[startIndex].text.length)
+      },
+      ...store.blocks.slice(startIndex + 1, endIndex).map((b) => ({ type: b.type, text: b.text, styles: b.styles ?? [] })),
+      {
+        type: store.blocks[endIndex].type,
+        text: store.blocks[endIndex].text.slice(0, end.offset),
+        styles: sliceStyles(store.blocks[endIndex].styles, 0, end.offset)
+      }
     ];
-    const html = arr.map((item) => `<div>${item.text}</div>`).join("\n");
+    const html = arr.map((item) => item.type === "hr" ? "<hr>" : `<div>${stylesToHtml(item.text, item.styles)}</div>`).join("\n");
     const text = arr.map((item) => item.text).join("\n");
     return [
       new ClipboardItem({
@@ -681,49 +935,42 @@ const createClipboardEvents = (store, props) => {
     store.deleteSelected();
     store.history.push("setText");
   };
-  const insertText = (text, type) => {
-    if (props.preventMultiline) {
-      const blocks = text.split("\n");
-      store.insertText(blocks[0]);
-      for (let i = 1; i < blocks.length; i++) {
-        store.addNewLine();
-        store.insertText(blocks[i]);
-      }
-    } else {
-      if (type && store.currentBlock) {
-        store.currentBlock.type = type;
-      }
+  const insertMultilineText = (text) => {
+    if (!props.preventMultiline) {
       store.insertText(text);
+      return;
     }
-  };
-  const parseHtml = (node, type) => {
-    var _a, _b, _c, _d;
-    let isTextNode = false;
-    for (let _node of node.childNodes) {
-      if (_node.nodeType === Node.TEXT_NODE && ((_a = _node.textContent) == null ? void 0 : _a.trim()) || _node.nodeType == Node.ELEMENT_NODE && _node.tagName === "SPAN") {
-        isTextNode = true;
-        break;
-      }
-    }
-    if (isTextNode) {
-      const text = node.textContent;
-      if (!text) return;
-      insertText(text, type ?? ((_b = props.htmlParser) == null ? void 0 : _b.call(props, node)) ?? void 0);
+    const lines = text.split("\n");
+    store.insertText(lines[0]);
+    for (let i = 1; i < lines.length; i++) {
       store.addNewLine();
-      return;
+      store.insertText(lines[i]);
     }
-    for (let child of node.children) {
-      if (child.tagName === "DIV") {
-        parseHtml(child, type);
-      } 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);
-        }
-      } else {
-        insertText(child.textContent ?? "", type ?? ((_d = props.htmlParser) == null ? void 0 : _d.call(props, child)) ?? void 0);
+  };
+  const applyBlocks = (blocks) => {
+    blocks.forEach((block, i) => {
+      const atomic = block.editable === false;
+      if (i > 0 || atomic && store.currentBlock !== null && store.currentBlock.text !== "") {
         store.addNewLine();
       }
-    }
+      if (store.currentBlock) {
+        if (block.type !== void 0) store.currentBlock.type = block.type;
+        if (block.editable !== void 0) store.currentBlock.editable = block.editable;
+      }
+      if (block.text) {
+        const at = store.selection.focus.offset;
+        insertMultilineText(block.text);
+        const target = store.currentBlock;
+        if (target && block.styles && block.styles.length && !props.preventMultiline) {
+          if (!target.styles) target.styles = [];
+          for (const s of block.styles) {
+            target.styles.push({ ...s, start: s.start + at, end: s.end + at });
+          }
+        }
+      }
+    });
+    const last = blocks[blocks.length - 1];
+    if (last && last.editable === false) store.addNewLine();
   };
   const parser = new DOMParser();
   const onPaste = (e) => {
@@ -734,12 +981,12 @@ const createClipboardEvents = (store, props) => {
     if (html) {
       store.deleteSelected();
       const dom = parser.parseFromString(html, "text/html");
-      parseHtml(dom.body);
+      applyBlocks(htmlToBlocks(dom.body, props.htmlParser));
     } else {
       const text = (_b = e.clipboardData) == null ? void 0 : _b.getData("text");
       if (!text) return;
       store.deleteSelected();
-      insertText(text);
+      insertMultilineText(text);
     }
     store.history.push("setText");
   };
@@ -807,6 +1054,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     }, { deep: true });
     const onKeyDown = (e) => {
+      if (e.isComposing || store.isComposing) return;
       emit("keydown", e);
       if (e.defaultPrevented) return;
       if (e.code === "Enter") {
@@ -833,6 +1081,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     let cachedSelection = {};
     const onSelectionChange = () => {
+      if (store.isComposing) return;
       const sel = window.getSelection();
       const anchor = findParent(sel.anchorNode, (el) => el.hasAttribute("data-vw-block-id") && el.parentElement === textEditorRef.value);
       if (anchor) {
@@ -875,6 +1124,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     const applySelection = () => {
       var _a;
+      if (store.isComposing) return;
       if (!store.isFocused.value) {
         cachedSelection = JSON.parse(JSON.stringify(store.selection));
         return;
@@ -910,6 +1160,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       store.history.push("setText");
     });
+    const onCompositionEnd = (e) => {
+      store.endComposition(e.data ?? "");
+    };
     const { onCut, onCopy, onPaste } = createClipboardEvents(store, props);
     const getClientRects = (selection) => {
       const anchor = getNode(selection.anchor.blockId);
@@ -949,11 +1202,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         onBeforeinput: _cache[0] || (_cache[0] = //@ts-ignore
         (...args) => unref(store).onInput && unref(store).onInput(...args)),
         onKeydown: onKeyDown,
-        onCopy: _cache[1] || (_cache[1] = //@ts-ignore
+        onCompositionstart: _cache[1] || (_cache[1] = ($event) => unref(store).startComposition()),
+        onCompositionend: onCompositionEnd,
+        onCopy: _cache[2] || (_cache[2] = //@ts-ignore
         (...args) => unref(onCopy) && unref(onCopy)(...args)),
-        onPaste: _cache[2] || (_cache[2] = //@ts-ignore
+        onPaste: _cache[3] || (_cache[3] = //@ts-ignore
         (...args) => unref(onPaste) && unref(onPaste)(...args)),
-        onCut: _cache[3] || (_cache[3] = //@ts-ignore
+        onCut: _cache[4] || (_cache[4] = //@ts-ignore
         (...args) => unref(onCut) && unref(onCut)(...args))
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(store).blocks, (block) => {
@@ -1031,6 +1286,6 @@ const _sfc_main = defineComponent({
 });
 export {
   _sfc_main$1 as TextEditor,
-  _sfc_main as TextEditorView,
+  _sfc_main as TextViewer,
   uid
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "vuewrite",
   "description": "Rich Text Editor based on Vue3 reactivity",
   "private": false,
-  "version": "0.0.29",
+  "version": "1.0.0",
   "type": "module",
   "license": "MIT",
   "author": "den59k",
@@ -24,19 +24,23 @@
   },
   "scripts": {
     "build": "vue-tsc && vite build",
-    "dev": "vite build --watch"
+    "dev": "vite build --watch",
+    "test": "vitest run"
   },
   "dependencies": {
     "vue": "^3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/test-utils": "^2.4.11",
+    "happy-dom": "^20.10.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1",
+    "vitest": "^4.1.7",
+    "vue-tsc": "^2.0.6",
     "vuesix": "^1.0.12",
-    "vuewrite-markdown": "0.0.1",
-    "vue-tsc": "^2.0.6"
+    "vuewrite-markdown": "0.0.1"
   },
-  "files": ["dist"]
+  "files": ["dist", "README.md", "API.md", "LICENSE"]
 }