slate-vue3 0.15.0 → 1.0.0

package/dist/dom.js

@@ -1,2 +1,2 @@
-import { $ as getSlateFragmentAttribute, A as HAS_BEFORE_INPUT_SUPPORT, B as IS_SAFARI_LEGACY, C as MARK_PLACEHOLDER_SYMBOL, D as NODE_TO_PARENT, E as NODE_TO_KEY, F as IS_CHROME_LEGACY, G as containsShadowAware, H as IS_WEBKIT, I as IS_EDGE_LEGACY, J as getDefaultView, K as getActiveElement, L as IS_FIREFOX, M as IS_ANDROID_CHROME_LEGACY, N as IS_APPLE, O as Key, P as IS_CHROME, Q as getSelection, R as IS_FIREFOX_LEGACY, S as IS_READ_ONLY, T as NODE_TO_INDEX, U as IS_WECHATBROWSER, V as IS_UC_MOBILE, W as closestShadowAware, X as getEditableChildAndIndex, Y as getEditableChild, Z as getPlainText, _ as EDITOR_TO_USER_SELECTION, a as Hotkeys, at as isDOMNode, b as IS_COMPOSING, c as withDOM, ct as isPlainTextOnlyPaste, et as hasShadowRoot, f as DOMEditor, g as EDITOR_TO_USER_MARKS, h as EDITOR_TO_ON_CHANGE, i as splitDecorationsByChild, it as isDOMElement, j as IS_ANDROID, k as CAN_USE_DOM, lt as isTrackedMutation, m as EDITOR_TO_KEY_TO_ELEMENT, n as isTextDecorationsEqual, nt as isBefore, o as applyStringDiff, ot as isDOMSelection, p as EDITOR_TO_ELEMENT, q as getClipboardData, r as shallowCompare, rt as isDOMComment, s as normalizeStringDiff, st as isDOMText, t as isElementDecorationsEqual, tt as isAfter, ut as normalizeDOMPoint, v as EDITOR_TO_WINDOW, w as NODE_TO_ELEMENT, x as IS_FOCUSED, y as ELEMENT_TO_NODE, z as IS_IOS } from "./slate-dom-Bhp4HdEp.js";
-export { CAN_USE_DOM, DOMEditor, EDITOR_TO_ELEMENT, EDITOR_TO_KEY_TO_ELEMENT, EDITOR_TO_ON_CHANGE, EDITOR_TO_USER_MARKS, EDITOR_TO_USER_SELECTION, EDITOR_TO_WINDOW, ELEMENT_TO_NODE, HAS_BEFORE_INPUT_SUPPORT, Hotkeys, IS_ANDROID, IS_ANDROID_CHROME_LEGACY, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_COMPOSING, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_FOCUSED, IS_IOS, IS_READ_ONLY, IS_SAFARI_LEGACY, IS_UC_MOBILE, IS_WEBKIT, IS_WECHATBROWSER, Key, MARK_PLACEHOLDER_SYMBOL, NODE_TO_ELEMENT, NODE_TO_INDEX, NODE_TO_KEY, NODE_TO_PARENT, applyStringDiff, closestShadowAware, containsShadowAware, getActiveElement, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSelection, getSlateFragmentAttribute, hasShadowRoot, isAfter, isBefore, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isElementDecorationsEqual, isPlainTextOnlyPaste, isTextDecorationsEqual, isTrackedMutation, normalizeDOMPoint, normalizeStringDiff, shallowCompare, splitDecorationsByChild, withDOM };
+import { $ as getSelection, A as CAN_USE_DOM, B as IS_IOS, C as MARK_PLACEHOLDER_SYMBOL, D as NODE_TO_PARENT, E as NODE_TO_KEY, F as IS_CHROME, G as closestShadowAware, H as IS_UC_MOBILE, I as IS_CHROME_LEGACY, J as getClipboardData, K as containsShadowAware, L as IS_EDGE_LEGACY, M as IS_ANDROID, N as IS_ANDROID_CHROME_LEGACY, O as PLACEHOLDER_SYMBOL, P as IS_APPLE, Q as getPlainText, R as IS_FIREFOX, S as IS_READ_ONLY, T as NODE_TO_INDEX, U as IS_WEBKIT, V as IS_SAFARI_LEGACY, W as IS_WECHATBROWSER, X as getEditableChild, Y as getDefaultView, Z as getEditableChildAndIndex, _ as EDITOR_TO_USER_SELECTION, a as Hotkeys, at as isDOMElement, b as IS_COMPOSING, c as withDOM, ct as isDOMText, dt as normalizeDOMPoint, et as getSlateFragmentAttribute, f as DOMEditor, g as EDITOR_TO_USER_MARKS, h as EDITOR_TO_ON_CHANGE, i as splitDecorationsByChild, it as isDOMComment, j as HAS_BEFORE_INPUT_SUPPORT, k as Key, lt as isPlainTextOnlyPaste, m as EDITOR_TO_KEY_TO_ELEMENT, n as isTextDecorationsEqual, nt as isAfter, o as applyStringDiff, ot as isDOMNode, p as EDITOR_TO_ELEMENT, q as getActiveElement, r as shallowCompare, rt as isBefore, s as normalizeStringDiff, st as isDOMSelection, t as isElementDecorationsEqual, tt as hasShadowRoot, ut as isTrackedMutation, v as EDITOR_TO_WINDOW, w as NODE_TO_ELEMENT, x as IS_FOCUSED, y as ELEMENT_TO_NODE, z as IS_FIREFOX_LEGACY } from "./slate-dom-CbCA1XcK.js";
+export { CAN_USE_DOM, DOMEditor, EDITOR_TO_ELEMENT, EDITOR_TO_KEY_TO_ELEMENT, EDITOR_TO_ON_CHANGE, EDITOR_TO_USER_MARKS, EDITOR_TO_USER_SELECTION, EDITOR_TO_WINDOW, ELEMENT_TO_NODE, HAS_BEFORE_INPUT_SUPPORT, Hotkeys, IS_ANDROID, IS_ANDROID_CHROME_LEGACY, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_COMPOSING, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_FOCUSED, IS_IOS, IS_READ_ONLY, IS_SAFARI_LEGACY, IS_UC_MOBILE, IS_WEBKIT, IS_WECHATBROWSER, Key, MARK_PLACEHOLDER_SYMBOL, NODE_TO_ELEMENT, NODE_TO_INDEX, NODE_TO_KEY, NODE_TO_PARENT, PLACEHOLDER_SYMBOL, applyStringDiff, closestShadowAware, containsShadowAware, getActiveElement, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSelection, getSlateFragmentAttribute, hasShadowRoot, isAfter, isBefore, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isElementDecorationsEqual, isPlainTextOnlyPaste, isTextDecorationsEqual, isTrackedMutation, normalizeDOMPoint, normalizeStringDiff, shallowCompare, splitDecorationsByChild, withDOM };

package/dist/index.js

@@ -1,3 +1,3 @@
-import { d as reconcileChildren, l as KEY_TO_CHUNK_TREE, u as getChunkTreeForNode } from "./slate-dom-Bhp4HdEp.js";
-import { C as isEventHandled, D as SLATE_USE_FOCUSED, E as SLATE_USE_ELEMENT, O as SLATE_USE_READ_ONLY, S as isDOMEventTargetInput, T as SLATE_USE_EDITOR, _ as DEFAULT_PLACEHOLDER_RENDER, a as useFocused, b as handleNativeHistoryEvents, c as useReadOnly, d as useEditor, f as Slate, g as DEFAULT_LEAF_RENDER, h as DEFAULT_ELEMENT_RENDER, i as useSelected, k as SLATE_USE_SELECTION, l as useElement, m as DEFAULT_DECORATE_FN, n as useInheritRef, o as Editable, p as DEFAULT_CHUNK_RENDER, r as useSelection, s as useComposing, t as createReactiveEditor, u as useElementIf, v as DEFAULT_SCROLL_INTO_VIEW, w as SLATE_USE_COMPOSING, x as isDOMEventHandled, y as DEFAULT_TEXT_RENDER } from "./slate-vue-BAUZN2zq.js";
+import { d as reconcileChildren, l as KEY_TO_CHUNK_TREE, u as getChunkTreeForNode } from "./slate-dom-CbCA1XcK.js";
+import { C as isEventHandled, D as SLATE_USE_FOCUSED, E as SLATE_USE_ELEMENT, O as SLATE_USE_READ_ONLY, S as isDOMEventTargetInput, T as SLATE_USE_EDITOR, _ as DEFAULT_PLACEHOLDER_RENDER, a as useFocused, b as handleNativeHistoryEvents, c as useReadOnly, d as useEditor, f as Slate, g as DEFAULT_LEAF_RENDER, h as DEFAULT_ELEMENT_RENDER, i as useSelected, k as SLATE_USE_SELECTION, l as useElement, m as DEFAULT_DECORATE_FN, n as useInheritRef, o as Editable, p as DEFAULT_CHUNK_RENDER, r as useSelection, s as useComposing, t as createReactiveEditor, u as useElementIf, v as DEFAULT_SCROLL_INTO_VIEW, w as SLATE_USE_COMPOSING, x as isDOMEventHandled, y as DEFAULT_TEXT_RENDER } from "./slate-vue-C5Tp0KRv.js";
 export { DEFAULT_CHUNK_RENDER, DEFAULT_DECORATE_FN, DEFAULT_ELEMENT_RENDER, DEFAULT_LEAF_RENDER, DEFAULT_PLACEHOLDER_RENDER, DEFAULT_SCROLL_INTO_VIEW, DEFAULT_TEXT_RENDER, Editable, KEY_TO_CHUNK_TREE, SLATE_USE_COMPOSING, SLATE_USE_EDITOR, SLATE_USE_ELEMENT, SLATE_USE_FOCUSED, SLATE_USE_READ_ONLY, SLATE_USE_SELECTION, Slate, createReactiveEditor, getChunkTreeForNode, handleNativeHistoryEvents, isDOMEventHandled, isDOMEventTargetInput, isEventHandled, reconcileChildren, useComposing, useEditor, useElement, useElementIf, useFocused, useInheritRef, useReadOnly, useSelected, useSelection };

package/dist/slate-dom/custom-types.d.ts

@@ -2,6 +2,8 @@ import { BaseRange, BaseText } from 'slate';
 declare module "slate" {
     interface CustomTypes {
         Text: BaseText & {
+            placeholder?: string;
+            onPlaceholderResize?: (height?: number) => void;
             [key: string]: unknown;
         };
         Range: BaseRange & {

package/dist/slate-dom/plugin/dom-editor.d.ts

@@ -48,7 +48,9 @@ export interface DOMEditorInterface {
     /**
      * Focus the editor.
      */
-    focus: (editor: DOMEditor) => void;
+    focus: (editor: DOMEditor, options?: {
+        retries: number;
+    }) => void;
     /**
      * Return the host window of the current editor.
      */

package/dist/slate-dom/utils/weak-maps.d.ts

@@ -34,4 +34,5 @@ export declare const EDITOR_TO_ON_CHANGE: WeakMap<import('slate').BaseEditor, (o
     operation?: Operation;
 }) => void>;
 export declare const EDITOR_TO_USER_MARKS: WeakMap<Editor, Partial<Text> | null>;
+export declare const PLACEHOLDER_SYMBOL: string;
 export declare const MARK_PLACEHOLDER_SYMBOL: string;

package/dist/{slate-dom-Bhp4HdEp.js → slate-dom-CbCA1XcK.js}

@@ -4408,11 +4408,6 @@ var getEditableChildAndIndex = (parent, index, direction) => {
 		index = i;
 		i += direction === "forward" ? 1 : -1;
 	}
-	while (child.nodeType === 3 && child.textContent === "") {
-		index += direction === "forward" ? 1 : -1;
-		child = childNodes[index];
-	}
-	if (!child) throw new Error(`Compact on vue3 empty childNode: Failed to find adjacent nodes: ${Scrubber.stringify(child)}`);
 	return [child, index];
 };
 /**
@@ -4598,6 +4593,7 @@ var EDITOR_TO_USER_SELECTION = /* @__PURE__ */ new WeakMap();
 */
 var EDITOR_TO_ON_CHANGE = /* @__PURE__ */ new WeakMap();
 var EDITOR_TO_USER_MARKS = /* @__PURE__ */ new WeakMap();
+var PLACEHOLDER_SYMBOL = Symbol("placeholder");
 var MARK_PLACEHOLDER_SYMBOL = Symbol("mark-placeholder");
 //#endregion
 //#region packages/slate-dom/plugin/dom-editor.ts
@@ -4684,9 +4680,16 @@ var DOMEditor = {
 		}
 		throw new Error(`Unable to find the path for Slate node: ${Scrubber.stringify(node)}`);
 	},
-	focus: (editor) => {
+	focus: (editor, options = { retries: 5 }) => {
 		if (IS_FOCUSED.get(editor)) return;
 		if (!EDITOR_TO_ELEMENT.get(editor)) return;
+		if (options.retries <= 0) throw new Error("Could not set focus, editor seems stuck with pending operations");
+		if (editor.operations.length > 0) {
+			setTimeout(() => {
+				DOMEditor.focus(editor, { retries: options.retries - 1 });
+			}, 10);
+			return;
+		}
 		const el = DOMEditor.toDOMNode(editor, editor);
 		const root = DOMEditor.findDocumentOrShadowRoot(editor);
 		if (root.activeElement !== el) {
@@ -4812,7 +4815,7 @@ var DOMEditor = {
 			const potentialVoidNode = parentNode.closest("[data-slate-void=\"true\"]");
 			const voidNode = potentialVoidNode && containsShadowAware(editorEl, potentialVoidNode) ? potentialVoidNode : null;
 			const potentialNonEditableNode = parentNode.closest("[contenteditable=\"false\"]");
-			const nonEditableNode = potentialNonEditableNode && editorEl.contains(potentialNonEditableNode) ? potentialNonEditableNode : null;
+			const nonEditableNode = potentialNonEditableNode && containsShadowAware(editorEl, potentialNonEditableNode) ? potentialNonEditableNode : null;
 			let leafNode = parentNode.closest("[data-slate-leaf]");
 			let domNode = null;
 			if (leafNode) {
@@ -4929,14 +4932,48 @@ var DOMEditor = {
 		let isCollapsed;
 		if (el) {
 			if (isDOMSelection(domRange)) {
-				anchorNode = domRange.anchorNode;
-				anchorOffset = domRange.anchorOffset;
-				focusNode = domRange.focusNode;
-				focusOffset = domRange.focusOffset;
+				if (IS_FIREFOX && domRange.rangeCount > 1) {
+					focusNode = domRange.focusNode;
+					const firstRange = domRange.getRangeAt(0);
+					const lastRange = domRange.getRangeAt(domRange.rangeCount - 1);
+					if (focusNode instanceof HTMLTableRowElement && firstRange.startContainer instanceof HTMLTableRowElement && lastRange.startContainer instanceof HTMLTableRowElement) {
+						function getLastChildren(element) {
+							if (element.childElementCount > 0) return getLastChildren(element.children[0]);
+							else return element;
+						}
+						const firstNodeRow = firstRange.startContainer;
+						const lastNodeRow = lastRange.startContainer;
+						const firstNode = getLastChildren(firstNodeRow.children[firstRange.startOffset]);
+						const lastNode = getLastChildren(lastNodeRow.children[lastRange.startOffset]);
+						focusOffset = 0;
+						if (lastNode.childNodes.length > 0) anchorNode = lastNode.childNodes[0];
+						else anchorNode = lastNode;
+						if (firstNode.childNodes.length > 0) focusNode = firstNode.childNodes[0];
+						else focusNode = firstNode;
+						if (lastNode instanceof HTMLElement) anchorOffset = lastNode.innerHTML.length;
+						else anchorOffset = 0;
+					} else if (firstRange.startContainer === focusNode) {
+						anchorNode = lastRange.endContainer;
+						anchorOffset = lastRange.endOffset;
+						focusOffset = firstRange.startOffset;
+					} else {
+						anchorNode = firstRange.startContainer;
+						anchorOffset = firstRange.endOffset;
+						focusOffset = lastRange.startOffset;
+					}
+				} else {
+					anchorNode = domRange.anchorNode;
+					anchorOffset = domRange.anchorOffset;
+					focusNode = domRange.focusNode;
+					focusOffset = domRange.focusOffset;
+				}
 				if (IS_FIREFOX) {
-					if ((anchorNode instanceof HTMLElement ? anchorNode.attributes : null)?.getNamedItem("data-slate-editor")) {
-						while (anchorNode instanceof HTMLElement && anchorNode.firstElementChild) anchorNode = anchorNode.firstElementChild;
-						while (focusNode instanceof HTMLElement && focusNode.lastElementChild) focusNode = focusNode.lastElementChild;
+					if (anchorNode instanceof HTMLElement && anchorNode?.attributes?.getNamedItem("data-slate-editor")) {
+						if (focusNode instanceof HTMLElement) {
+							const nodeList = Array.from(anchorNode.querySelectorAll("[data-slate-string=\"true\"]")).filter((node) => !node.querySelector("[data-slate-string=\"true\"]"));
+							anchorNode = nodeList[0];
+							focusNode = nodeList[nodeList.length - 1];
+						}
 						anchorNode = anchorNode?.firstChild;
 						anchorOffset = 0;
 						focusNode = focusNode?.lastChild;
@@ -4954,7 +4991,6 @@ var DOMEditor = {
 						}
 					}
 				}
-				if (!anchorNode || !focusNode) return null;
 				if (IS_CHROME && hasShadowRoot(anchorNode) || IS_FIREFOX) isCollapsed = domRange.anchorNode === domRange.focusNode && domRange.anchorOffset === domRange.focusOffset;
 				else isCollapsed = domRange.isCollapsed;
 			} else {
@@ -6061,7 +6097,7 @@ var shallowCompare = (obj1, obj2) => Object.keys(obj1).length === Object.keys(ob
 var isDecorationFlagsEqual = (range, other) => {
 	const { anchor: rangeAnchor, focus: rangeFocus, ...rangeOwnProps } = range;
 	const { anchor: otherAnchor, focus: otherFocus, ...otherOwnProps } = other;
-	return shallowCompare(rangeOwnProps, otherOwnProps);
+	return range[PLACEHOLDER_SYMBOL] === other[PLACEHOLDER_SYMBOL] && shallowCompare(rangeOwnProps, otherOwnProps);
 };
 /**
 * Check if a list of decorator ranges are equal to another.
@@ -6073,6 +6109,7 @@ var isDecorationFlagsEqual = (range, other) => {
 var isElementDecorationsEqual = (list, another) => {
 	if (list === another) return true;
 	if (!list || !another) return false;
+	if (list.length !== another.length) return false;
 	for (let i = 0; i < list.length; i++) {
 		const range = list[i];
 		const other = another[i];
@@ -6140,4 +6177,4 @@ var splitDecorationsByChild = (editor, node, decorations) => {
 	return decorationsByChild;
 };
 //#endregion
-export { getSlateFragmentAttribute as $, isEnd as $t, HAS_BEFORE_INPUT_SUPPORT as A, select as An, deleteText as At, IS_SAFARI_LEGACY as B, unhangRange as Bn, hasBlocks as Bt, MARK_PLACEHOLDER_SYMBOL as C, positions as Cn, apply as Ct, NODE_TO_PARENT as D, rangeRefs as Dn, deleteBackward as Dt, NODE_TO_KEY as E, rangeRef as En, createEditor as Et, IS_CHROME_LEGACY as F, shouldMergeNodesRemovePrevNode as Fn, first as Ft, containsShadowAware as G, insertFragment as Gt, IS_WEBKIT as H, unwrapNodes as Hn, hasPath as Ht, IS_EDGE_LEGACY as I, shouldNormalize as In, fragment as It, getDefaultView as J, insertSoftBreak as Jt, getActiveElement as K, insertNode as Kt, IS_FIREFOX as L, splitNodes as Ln, getDirtyPaths as Lt, IS_ANDROID_CHROME_LEGACY as M, setNormalizing as Mn, edges as Mt, IS_APPLE as N, setPoint as Nn, elementReadOnly as Nt, Key as O, removeMark as On, deleteForward as Ot, IS_CHROME as P, setSelection as Pn, end as Pt, getSelection as Q, isEmpty as Qt, IS_FIREFOX_LEGACY as R, start as Rn, getFragment as Rt, IS_READ_ONLY as S, pointRefs as Sn, after as St, NODE_TO_INDEX as T, range as Tn, collapse as Tt, IS_WECHATBROWSER as U, withoutNormalizing as Un, hasTexts as Ut, IS_UC_MOBILE as V, unsetNodes as Vn, hasInlines as Vt, closestShadowAware as W, wrapNodes as Wn, insertBreak as Wt, getEditableChildAndIndex as X, isBlock as Xt, getEditableChild as Y, insertText as Yt, getPlainText as Z, isEdge as Zt, EDITOR_TO_USER_SELECTION as _, path as _n, Scrubber as _t, Hotkeys as a, levels as an, isDOMNode as at, IS_COMPOSING as b, point as bn, above as bt, withDOM as c, mergeNodes as cn, isPlainTextOnlyPaste as ct, reconcileChildren as d, next as dn, Editor as dt, isNormalizing as en, hasShadowRoot as et, DOMEditor as f, node as fn, Element as ft, EDITOR_TO_USER_MARKS as g, parent as gn, Range as gt, EDITOR_TO_ON_CHANGE as h, normalizeNode as hn, Path as ht, splitDecorationsByChild as i, leaf as in, isDOMElement as it, IS_ANDROID as j, setNodes as jn, deselect as jt, CAN_USE_DOM as k, removeNodes as kn, deleteFragment as kt, KEY_TO_CHUNK_TREE as l, move as ln, isTrackedMutation as lt, EDITOR_TO_KEY_TO_ELEMENT as m, normalize as mn, Node as mt, isTextDecorationsEqual as n, isStart as nn, isBefore as nt, applyStringDiff as o, liftNodes as on, isDOMSelection as ot, EDITOR_TO_ELEMENT as p, nodes as pn, Location as pt, getClipboardData as q, insertNodes as qt, shallowCompare as r, last as rn, isDOMComment as rt, normalizeStringDiff as s, marks as sn, isDOMText as st, isElementDecorationsEqual as t, isObject as tn, isAfter as tt, getChunkTreeForNode as u, moveNodes as un, normalizeDOMPoint as ut, EDITOR_TO_WINDOW as v, pathRef as vn, Text as vt, NODE_TO_ELEMENT as w, previous as wn, before as wt, IS_FOCUSED as x, pointRef as xn, addMark as xt, ELEMENT_TO_NODE as y, pathRefs as yn, Transforms as yt, IS_IOS as z, string as zn, getVoid as zt };
+export { getSelection as $, isEmpty as $t, CAN_USE_DOM as A, removeNodes as An, deleteFragment as At, IS_IOS as B, string as Bn, getVoid as Bt, MARK_PLACEHOLDER_SYMBOL as C, pointRefs as Cn, after as Ct, NODE_TO_PARENT as D, rangeRef as Dn, createEditor as Dt, NODE_TO_KEY as E, range as En, collapse as Et, IS_CHROME as F, setSelection as Fn, end as Ft, closestShadowAware as G, wrapNodes as Gn, insertBreak as Gt, IS_UC_MOBILE as H, unsetNodes as Hn, hasInlines as Ht, IS_CHROME_LEGACY as I, shouldMergeNodesRemovePrevNode as In, first as It, getClipboardData as J, insertNodes as Jt, containsShadowAware as K, insertFragment as Kt, IS_EDGE_LEGACY as L, shouldNormalize as Ln, fragment as Lt, IS_ANDROID as M, setNodes as Mn, deselect as Mt, IS_ANDROID_CHROME_LEGACY as N, setNormalizing as Nn, edges as Nt, PLACEHOLDER_SYMBOL as O, rangeRefs as On, deleteBackward as Ot, IS_APPLE as P, setPoint as Pn, elementReadOnly as Pt, getPlainText as Q, isEdge as Qt, IS_FIREFOX as R, splitNodes as Rn, getDirtyPaths as Rt, IS_READ_ONLY as S, pointRef as Sn, addMark as St, NODE_TO_INDEX as T, previous as Tn, before as Tt, IS_WEBKIT as U, unwrapNodes as Un, hasPath as Ut, IS_SAFARI_LEGACY as V, unhangRange as Vn, hasBlocks as Vt, IS_WECHATBROWSER as W, withoutNormalizing as Wn, hasTexts as Wt, getEditableChild as X, insertText as Xt, getDefaultView as Y, insertSoftBreak as Yt, getEditableChildAndIndex as Z, isBlock as Zt, EDITOR_TO_USER_SELECTION as _, parent as _n, Range as _t, Hotkeys as a, leaf as an, isDOMElement as at, IS_COMPOSING as b, pathRefs as bn, Transforms as bt, withDOM as c, marks as cn, isDOMText as ct, reconcileChildren as d, moveNodes as dn, normalizeDOMPoint as dt, isEnd as en, getSlateFragmentAttribute as et, DOMEditor as f, next as fn, Editor as ft, EDITOR_TO_USER_MARKS as g, normalizeNode as gn, Path as gt, EDITOR_TO_ON_CHANGE as h, normalize as hn, Node as ht, splitDecorationsByChild as i, last as in, isDOMComment as it, HAS_BEFORE_INPUT_SUPPORT as j, select as jn, deleteText as jt, Key as k, removeMark as kn, deleteForward as kt, KEY_TO_CHUNK_TREE as l, mergeNodes as ln, isPlainTextOnlyPaste as lt, EDITOR_TO_KEY_TO_ELEMENT as m, nodes as mn, Location as mt, isTextDecorationsEqual as n, isObject as nn, isAfter as nt, applyStringDiff as o, levels as on, isDOMNode as ot, EDITOR_TO_ELEMENT as p, node as pn, Element as pt, getActiveElement as q, insertNode as qt, shallowCompare as r, isStart as rn, isBefore as rt, normalizeStringDiff as s, liftNodes as sn, isDOMSelection as st, isElementDecorationsEqual as t, isNormalizing as tn, hasShadowRoot as tt, getChunkTreeForNode as u, move as un, isTrackedMutation as ut, EDITOR_TO_WINDOW as v, path as vn, Scrubber as vt, NODE_TO_ELEMENT as w, positions as wn, apply as wt, IS_FOCUSED as x, point as xn, above as xt, ELEMENT_TO_NODE as y, pathRef as yn, Text as yt, IS_FIREFOX_LEGACY as z, start as zn, getFragment as zt };

package/dist/slate-vue/components/children.d.ts

@@ -1,9 +1,14 @@
-import { Ancestor } from 'slate';
+import { Ancestor, DecoratedRange } from 'slate';
+import { VNode } from 'vue';
 /**
  * Children.
  */
 export declare const ChildrenComp: import('vue').DefineComponent<{
     element: Ancestor;
-}, () => import('vue').VNodeChild[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    decorations: DecoratedRange[];
+}, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> | import('vue').VNodeChild[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
     element: Ancestor;
+    decorations: DecoratedRange[];
 }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/slate-vue/components/chunk.d.ts

@@ -1,4 +1,13 @@
 import { VNode } from 'vue';
-import { RenderChunkProps } from '../utils/interface';
-import { ChunkAncestor } from '../chunking';
-export declare const ChunkCompFc: (ancestor: ChunkAncestor, renderChunk: (props: RenderChunkProps) => VNode, highest?: boolean) => import('vue').VNodeChild[];
+import { ChunkAncestor, ChunkTree } from '../chunking';
+import { Key } from '../../slate-dom/index.ts';
+import { Element } from 'slate';
+export declare const ChunkComp: import('vue').DefineComponent<{
+    root: ChunkTree;
+    ancestor: ChunkAncestor;
+    renderElement: (node: Element, index: number, key: Key) => VNode;
+}, () => import('vue').VNodeChild[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    root: ChunkTree;
+    ancestor: ChunkAncestor;
+    renderElement: (node: Element, index: number, key: Key) => VNode;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/slate-vue/components/element.d.ts

@@ -1,8 +1,10 @@
-import { Element } from 'slate';
+import { DecoratedRange, Element } from 'slate';
 export declare const ElementComp: import('vue').DefineComponent<{
     element: Element;
+    decorations: DecoratedRange[];
 }, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
     element: Element;
+    decorations: DecoratedRange[];
 }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/slate-vue/components/placeholder.d.ts

@@ -1,4 +1,9 @@
-import { VNode } from 'vue';
-export declare const PlaceholderComp: import('vue').DefineComponent<{}, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+export declare const PlaceholderComp: import('vue').DefineComponent<{
+    placeholder?: string | undefined;
+    onPlaceholderResize?: ((height?: number) => void) | undefined;
+}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    placeholder?: string | undefined;
+    onPlaceholderResize?: ((height?: number) => void) | undefined;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/slate-vue/components/text.d.ts

@@ -2,11 +2,11 @@ import { Text, DecoratedRange } from 'slate';
 export declare const TextComp: import('vue').DefineComponent<{
     text: Text;
     isLast: boolean;
-    elementDR: DecoratedRange[];
+    decorations: DecoratedRange[];
 }, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
     text: Text;
     isLast: boolean;
-    elementDR: DecoratedRange[];
+    decorations: DecoratedRange[];
 }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/slate-vue/hooks/use-decorations.d.ts

@@ -0,0 +1,5 @@
+import { DecoratedRange, Descendant } from 'slate';
+export declare const useDecorations: (getNode: () => Descendant) => {
+    decorations: import('vue').ShallowRef<DecoratedRange[], DecoratedRange[]>;
+    update: () => void;
+};

package/dist/slate-vue/render/chunk.d.ts

@@ -1,9 +1,5 @@
 import { VNode } from 'vue';
 import { RenderChunkProps } from '../utils/interface';
-import { ChunkTree } from '../chunking';
-export declare const SLATE_INNER_STATIC_CHUNK_ROOT: unique symbol;
-export declare const provideChunkRoot: (chunkRoot: ChunkTree) => void;
-export declare const useChunkRoot: () => ChunkTree;
 export declare const SLATE_INNER_RENDER_CHUNK: unique symbol;
 export declare const provideRenderChunk: (fn: (props: RenderChunkProps) => VNode) => void;
 export declare const useRenderChunk: () => (props: RenderChunkProps) => VNode;

package/dist/slate-vue/render/decorate.d.ts

@@ -1,7 +1,4 @@
-import { DecoratedRange, Element, NodeEntry } from 'slate';
-import { DOMEditor } from '../../slate-dom/index.ts';
+import { DecoratedRange, NodeEntry } from 'slate';
 export declare const SLATE_INNER_RENDER_DECORATE_FN: unique symbol;
 export declare const provideDecorateFn: (fn: (entry: NodeEntry) => DecoratedRange[]) => void;
 export declare const injectDecorateFn: () => ((entry: NodeEntry) => DecoratedRange[]);
-export declare const SLATE_INNER_RENDER_DECORATE_RANGE: unique symbol;
-export declare const getElementDR: (element: Element, editor: DOMEditor, decorate: (entry: NodeEntry) => DecoratedRange[]) => DecoratedRange[];

package/dist/slate-vue/render/placeholder.d.ts

@@ -1,23 +1,5 @@
-import { BasePoint } from 'slate';
-import { ComputedRef, VNode } from 'vue';
+import { VNode } from 'vue';
 import { RenderPlaceholderProps } from '../utils/interface';
-export declare const SLATE_INNER_PLACEHOLDER: unique symbol;
-export declare const providePlaceholder: (placeholder: ComputedRef<string>) => void;
-export declare const usePlaceholder: () => ComputedRef<string>;
-type MarkPlaceholder = ComputedRef<{
-    anchor: BasePoint;
-    focus: BasePoint;
-} | null>;
-export declare const SLATE_INNER_MARK_PLACEHOLDER: unique symbol;
-export declare const provideMarkPlaceholder: (markPlaceholder: MarkPlaceholder) => void;
-export declare const useMarkPlaceholder: () => MarkPlaceholder;
-export declare const SLATE_INNER_PLACEHOLDER_SHOW: unique symbol;
-export declare const providePlaceholderShow: (show: ComputedRef<boolean>) => void;
-export declare const usePlaceholderShow: () => () => boolean;
-export declare const SLATE_INNER_PLACEHOLDER_RESIZE: unique symbol;
-export declare const providePlaceholderResize: (fn: (height?: number) => void) => void;
-export declare const usePlaceholderResize: () => (height?: number) => void;
 export declare const SLATE_INNER_RENDER_PLACEHOLDER: unique symbol;
 export declare const provideRenderPlaceholder: (fn: (props: RenderPlaceholderProps) => VNode) => void;
 export declare const useRenderPlaceholder: () => (props: RenderPlaceholderProps) => VNode;
-export {};

package/dist/slate-vue/utils/interface.d.ts

@@ -61,7 +61,7 @@ export interface RenderElementProps {
  */
 export interface RenderTextProps {
     text: Text;
-    children: VNodeChild[];
+    children: VNode | VNodeChild[];
     attributes: {
         "data-slate-node": "text";
         ref: VNodeRef;

package/dist/{slate-vue-BAUZN2zq.js → slate-vue-C5Tp0KRv.js}

@@ -1,5 +1,5 @@
-import { $t as isEnd, A as HAS_BEFORE_INPUT_SUPPORT, An as select, At as deleteText, Bn as unhangRange, Bt as hasBlocks, C as MARK_PLACEHOLDER_SYMBOL, Cn as positions, Ct as apply, D as NODE_TO_PARENT, Dn as rangeRefs, Dt as deleteBackward, En as rangeRef, Et as createEditor, Fn as shouldMergeNodesRemovePrevNode, Ft as first, G as containsShadowAware, Gt as insertFragment, H as IS_WEBKIT, Hn as unwrapNodes, Ht as hasPath, In as shouldNormalize, It as fragment, J as getDefaultView, Jt as insertSoftBreak, K as getActiveElement, Kt as insertNode, L as IS_FIREFOX, Ln as splitNodes, Lt as getDirtyPaths, Mn as setNormalizing, Mt as edges, Nn as setPoint, Nt as elementReadOnly, On as removeMark, Ot as deleteForward, P as IS_CHROME, Pn as setSelection, Pt as end, Q as getSelection, Qt as isEmpty, R as IS_FIREFOX_LEGACY, Rn as start, Rt as getFragment, S as IS_READ_ONLY, Sn as pointRefs, St as after, T as NODE_TO_INDEX, Tn as range, Tt as collapse, U as IS_WECHATBROWSER, Un as withoutNormalizing, Ut as hasTexts, V as IS_UC_MOBILE, Vn as unsetNodes, Vt as hasInlines, Wn as wrapNodes, Wt as insertBreak, Xt as isBlock, Yt as insertText, Zt as isEdge, _ as EDITOR_TO_USER_SELECTION, _n as path, _t as Scrubber, a as Hotkeys, an as levels, at as isDOMNode, b as IS_COMPOSING, bn as point, bt as above, c as withDOM, cn as mergeNodes, ct as isPlainTextOnlyPaste, d as reconcileChildren, dn as next, dt as Editor, en as isNormalizing, f as DOMEditor, fn as node, ft as Element, g as EDITOR_TO_USER_MARKS, gn as parent, gt as Range, h as EDITOR_TO_ON_CHANGE, hn as normalizeNode, ht as Path, in as leaf, it as isDOMElement, j as IS_ANDROID, jn as setNodes, jt as deselect, k as CAN_USE_DOM, kn as removeNodes, kt as deleteFragment, ln as move, m as EDITOR_TO_KEY_TO_ELEMENT, mn as normalize, mt as Node, nn as isStart, o as applyStringDiff, on as liftNodes, ot as isDOMSelection, p as EDITOR_TO_ELEMENT, pn as nodes, qt as insertNodes, rn as last, s as normalizeStringDiff, sn as marks, u as getChunkTreeForNode, un as moveNodes, v as EDITOR_TO_WINDOW, vn as pathRef, vt as Text, w as NODE_TO_ELEMENT, wn as previous, wt as before, x as IS_FOCUSED, xn as pointRef, xt as addMark, y as ELEMENT_TO_NODE, yn as pathRefs, yt as Transforms, z as IS_IOS, zn as string, zt as getVoid } from "./slate-dom-Bhp4HdEp.js";
-import { computed, defineComponent, h, inject, onMounted, onUnmounted, onUpdated, provide, reactive, ref, renderList, renderSlot, shallowReactive, toRaw, useAttrs, watch } from "vue";
+import { $ as getSelection, $t as isEmpty, A as CAN_USE_DOM, An as removeNodes, At as deleteFragment, B as IS_IOS, Bn as string, Bt as getVoid, C as MARK_PLACEHOLDER_SYMBOL, Cn as pointRefs, Ct as after, D as NODE_TO_PARENT, Dn as rangeRef, Dt as createEditor, En as range, Et as collapse, F as IS_CHROME, Fn as setSelection, Ft as end, Gn as wrapNodes, Gt as insertBreak, H as IS_UC_MOBILE, Hn as unsetNodes, Ht as hasInlines, In as shouldMergeNodesRemovePrevNode, It as first, Jt as insertNodes, K as containsShadowAware, Kt as insertFragment, Ln as shouldNormalize, Lt as fragment, M as IS_ANDROID, Mn as setNodes, Mt as deselect, Nn as setNormalizing, Nt as edges, O as PLACEHOLDER_SYMBOL, On as rangeRefs, Ot as deleteBackward, Pn as setPoint, Pt as elementReadOnly, Qt as isEdge, R as IS_FIREFOX, Rn as splitNodes, Rt as getDirtyPaths, S as IS_READ_ONLY, Sn as pointRef, St as addMark, T as NODE_TO_INDEX, Tn as previous, Tt as before, U as IS_WEBKIT, Un as unwrapNodes, Ut as hasPath, Vn as unhangRange, Vt as hasBlocks, W as IS_WECHATBROWSER, Wn as withoutNormalizing, Wt as hasTexts, Xt as insertText, Y as getDefaultView, Yt as insertSoftBreak, Zt as isBlock, _ as EDITOR_TO_USER_SELECTION, _n as parent, _t as Range, a as Hotkeys, an as leaf, at as isDOMElement, b as IS_COMPOSING, bn as pathRefs, bt as Transforms, c as withDOM, cn as marks, dn as moveNodes, en as isEnd, f as DOMEditor, fn as next, ft as Editor, g as EDITOR_TO_USER_MARKS, gn as normalizeNode, gt as Path, h as EDITOR_TO_ON_CHANGE, hn as normalize, ht as Node, i as splitDecorationsByChild, in as last, j as HAS_BEFORE_INPUT_SUPPORT, jn as select, jt as deleteText, kn as removeMark, kt as deleteForward, ln as mergeNodes, lt as isPlainTextOnlyPaste, m as EDITOR_TO_KEY_TO_ELEMENT, mn as nodes, n as isTextDecorationsEqual, o as applyStringDiff, on as levels, ot as isDOMNode, p as EDITOR_TO_ELEMENT, pn as node, pt as Element, q as getActiveElement, qt as insertNode, rn as isStart, s as normalizeStringDiff, sn as liftNodes, st as isDOMSelection, t as isElementDecorationsEqual, tn as isNormalizing, u as getChunkTreeForNode, un as move, v as EDITOR_TO_WINDOW, vn as path, vt as Scrubber, w as NODE_TO_ELEMENT, wn as positions, wt as apply, x as IS_FOCUSED, xn as point, xt as above, y as ELEMENT_TO_NODE, yn as pathRef, yt as Text, z as IS_FIREFOX_LEGACY, zn as start, zt as getFragment } from "./slate-dom-CbCA1XcK.js";
+import { computed, defineComponent, h, inject, onMounted, onScopeDispose, onUnmounted, onUpdated, provide, ref, renderList, renderSlot, shallowReactive, shallowRef, toRaw, useAttrs, watch, watchEffect } from "vue";
 //#region packages/slate-vue/utils/constants.ts
 var SLATE_USE_EDITOR = Symbol("SLATE_USE_EDITOR");
 var SLATE_USE_ELEMENT = Symbol("SLATE_USE_ELEMENT");
@@ -188,10 +188,6 @@ var injectDecorateFn = () => {
 	if (decorate === void 0) throw new Error(`The \`injectDecorateFn\` hook must be used inside the <Slate> component's context.`);
 	return decorate;
 };
-var getElementDR = (element, editor, decorate) => {
-	if (!(decorate !== DEFAULT_DECORATE_FN)) return [];
-	return decorate([element, DOMEditor.findPath(editor, element)]);
-};
 //#endregion
 //#region packages/slate-vue/render/fn.ts
 var SLATE_INNER_RENDER_ELEMENT = Symbol("SLATE_INNER_RENDER_ELEMENT");
@@ -226,42 +222,6 @@ var useEditorVersion = () => {
 };
 //#endregion
 //#region packages/slate-vue/render/placeholder.ts
-var SLATE_INNER_PLACEHOLDER = Symbol("SLATE_INNER_PLACEHOLDER");
-var providePlaceholder = (placeholder) => {
-	provide(SLATE_INNER_PLACEHOLDER, placeholder);
-};
-var usePlaceholder = () => {
-	const PLACEHOLDER_INJECT = inject(SLATE_INNER_PLACEHOLDER);
-	if (PLACEHOLDER_INJECT === void 0) throw new Error(`The \`usePlaceholder\` hook must be used inside the <Slate> component's context.`);
-	return PLACEHOLDER_INJECT;
-};
-var SLATE_INNER_MARK_PLACEHOLDER = Symbol("SLATE_INNER_MARK_PLACEHOLDER");
-var provideMarkPlaceholder = (markPlaceholder) => {
-	provide(SLATE_INNER_MARK_PLACEHOLDER, markPlaceholder);
-};
-var useMarkPlaceholder = () => {
-	const MARK_PLACEHOLDER_INJECT = inject(SLATE_INNER_MARK_PLACEHOLDER);
-	if (MARK_PLACEHOLDER_INJECT === void 0) throw new Error(`The \`useMarkPlaceholder\` hook must be used inside the <Slate> component's context.`);
-	return MARK_PLACEHOLDER_INJECT;
-};
-var SLATE_INNER_PLACEHOLDER_SHOW = Symbol("SLATE_INNER_PLACEHOLDER_SHOW");
-var providePlaceholderShow = (show) => {
-	provide(SLATE_INNER_PLACEHOLDER_SHOW, () => show.value);
-};
-var usePlaceholderShow = () => {
-	const PLACEHOLDER_SHOW_INJECT = inject(SLATE_INNER_PLACEHOLDER_SHOW);
-	if (PLACEHOLDER_SHOW_INJECT === void 0) throw new Error(`The \`usePlaceholderShow\` hook must be used inside the <Slate> component's context.`);
-	return PLACEHOLDER_SHOW_INJECT;
-};
-var SLATE_INNER_PLACEHOLDER_RESIZE = Symbol("SLATE_INNER_PLACEHOLDER_RESIZE");
-var providePlaceholderResize = (fn) => {
-	provide(SLATE_INNER_PLACEHOLDER_RESIZE, fn);
-};
-var usePlaceholderResize = () => {
-	const PLACEHOLDER_RESIZE_INJECT = inject(SLATE_INNER_PLACEHOLDER_RESIZE);
-	if (PLACEHOLDER_RESIZE_INJECT === void 0) throw new Error(`The \`usePlaceholderResize\` hook must be used inside the <Slate> component's context.`);
-	return PLACEHOLDER_RESIZE_INJECT;
-};
 var SLATE_INNER_RENDER_PLACEHOLDER = Symbol("SLATE_INNER_RENDER_PLACEHOLDER");
 var provideRenderPlaceholder = (fn) => provide(SLATE_INNER_RENDER_PLACEHOLDER, fn);
 var useRenderPlaceholder = () => {
@@ -271,10 +231,6 @@ var useRenderPlaceholder = () => {
 };
 //#endregion
 //#region packages/slate-vue/render/chunk.ts
-var SLATE_INNER_STATIC_CHUNK_ROOT = Symbol("SLATE_INNER_STATIC_CHUNK_ROOT");
-var provideChunkRoot = (chunkRoot) => {
-	provide(SLATE_INNER_STATIC_CHUNK_ROOT, chunkRoot);
-};
 var SLATE_INNER_RENDER_CHUNK = Symbol("SLATE_INNER_RENDER_CHUNK");
 var provideRenderChunk = (fn) => provide(SLATE_INNER_RENDER_CHUNK, fn);
 var useRenderChunk = () => {
@@ -340,24 +296,6 @@ var Slate = defineComponent({
 		const focusCb = () => isFocus.value = DOMEditor.isFocused(editor);
 		const editorVersion = ref(0);
 		provideEditorVersion(editorVersion);
-		provideMarkPlaceholder(computed(() => {
-			if (editor.selection && Range.isCollapsed(editor.selection) && editor.marks) {
-				const anchor = editor.selection.anchor;
-				const leaf = Node.leaf(editor, anchor.path);
-				const { text, ...rest } = leaf;
-				if (!Text.equals(leaf, editor.marks, { loose: true })) {
-					const unset = Object.fromEntries(Object.keys(rest).map((mark) => [mark, null]));
-					return {
-						[MARK_PLACEHOLDER_SYMBOL]: true,
-						...unset,
-						...editor.marks,
-						anchor,
-						focus: anchor
-					};
-				}
-			}
-			return null;
-		}));
 		onMounted(() => {
 			document.addEventListener("focusin", focusCb);
 			document.addEventListener("focusout", focusCb);
@@ -403,6 +341,31 @@ var useEditor = () => {
 	return editor;
 };
 //#endregion
+//#region packages/slate-vue/hooks/use-decorations.ts
+var useDecorations = (getNode) => {
+	const editor = useEditor();
+	const decorate = injectDecorateFn();
+	const decorations = shallowRef([]);
+	const update = () => {
+		const node = getNode();
+		try {
+			const equalityFn = Node.isText(node) ? isTextDecorationsEqual : isElementDecorationsEqual;
+			const path = DOMEditor.findPath(editor, node);
+			const newDecorations = decorate([node, path]);
+			if (equalityFn(decorations.value, newDecorations)) return;
+			decorations.value = newDecorations;
+		} catch (err) {
+			console.log(err);
+		}
+	};
+	const stop = watchEffect(update);
+	onScopeDispose(stop);
+	return {
+		decorations,
+		update
+	};
+};
+//#endregion
 //#region packages/slate-vue/hooks/use-element.ts
 /**
 * Get the current element.
@@ -484,31 +447,30 @@ var style = {
 };
 var PlaceholderComp = defineComponent({
 	name: "slate-placeholder",
-	setup() {
-		const placeholder = usePlaceholder();
-		const onPlaceholderResize = usePlaceholderResize();
+	props: ["placeholder", "onPlaceholderResize"],
+	setup(props) {
 		const placeholderResizeObserver = ref();
+		const placeholderRef = ref();
+		onMounted(() => {
+			placeholderResizeObserver.value = new ResizeObserver(() => {
+				props.onPlaceholderResize?.(placeholderRef.value?.getBoundingClientRect()?.height);
+			});
+			placeholderResizeObserver.value.observe(placeholderRef.value);
+		});
+		onUnmounted(() => {
+			placeholderResizeObserver.value?.disconnect();
+			placeholderResizeObserver.value = void 0;
+			props.onPlaceholderResize?.();
+		});
 		const attributes = computed(() => ({
 			"data-slate-placeholder": true,
 			style,
 			contenteditable: false,
-			onVnodeMounted(vNode) {
-				if (vNode.el) {
-					placeholderResizeObserver.value = new ResizeObserver(() => {
-						onPlaceholderResize(vNode.el?.getBoundingClientRect()?.height);
-					});
-					placeholderResizeObserver.value.observe(vNode.el);
-				}
-			},
-			onVnodeUnmounted() {
-				placeholderResizeObserver.value?.disconnect();
-				placeholderResizeObserver.value = void 0;
-				onPlaceholderResize();
-			}
+			ref: placeholderRef
 		}));
 		const renderPlaceholder = useRenderPlaceholder();
 		return () => renderPlaceholder({
-			children: placeholder.value,
+			children: props.placeholder,
 			attributes: attributes.value
 		});
 	}
@@ -525,17 +487,20 @@ var LeafComp = defineComponent({
 	],
 	setup(props) {
 		const renderLeaf = useRenderLeaf();
-		const showPlaceholder = usePlaceholderShow();
+		const showPlaceholder = computed(() => props.leaf[PLACEHOLDER_SYMBOL]);
 		return () => renderLeaf({
 			text: props.text,
 			leaf: props.leaf,
 			leafPosition: props.leafPosition,
 			attributes: { "data-slate-leaf": true },
-			children: showPlaceholder() ? [h(StringComp, {
+			children: showPlaceholder.value ? [h(StringComp, {
 				text: props.text,
 				leaf: props.leaf,
 				isLast: true
-			}), h(PlaceholderComp)] : h(StringComp, {
+			}), h(PlaceholderComp, {
+				placeholder: props.leaf.placeholder,
+				onPlaceholderResize: props.leaf.onPlaceholderResize
+			})] : h(StringComp, {
 				text: props.text,
 				leaf: props.leaf,
 				isLast: props.isLast
@@ -550,66 +515,40 @@ var TextComp = defineComponent({
 	props: [
 		"text",
 		"isLast",
-		"elementDR"
+		"decorations"
 	],
 	setup(props) {
 		const editor = useEditor();
 		const textRef = ref();
-		const decorate = injectDecorateFn();
-		const needDecorate = decorate !== DEFAULT_DECORATE_FN;
-		onUnmounted(() => {
-			NODE_TO_ELEMENT.delete(props.text);
-			if (textRef.value) ELEMENT_TO_NODE.delete(textRef.value);
-		});
 		const renderText = useRenderText();
 		const renderTextAttributes = {
 			"data-slate-node": "text",
 			ref: textRef
 		};
-		if (!needDecorate) return () => {
-			const KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor);
-			if (textRef.value) {
-				KEY_TO_ELEMENT?.set(DOMEditor.findKey(editor, props.text), textRef.value);
-				ELEMENT_TO_NODE.set(textRef.value, props.text);
-				NODE_TO_ELEMENT.set(props.text, textRef.value);
-			}
-			return renderText({
-				text: props.text,
-				attributes: renderTextAttributes,
-				children: [h(LeafComp, {
-					text: props.text,
-					leaf: props.text,
-					isLast: props.isLast
-				})]
-			});
-		};
-		const markPlaceholder = useMarkPlaceholder();
 		const editorVersion = useEditorVersion();
-		onUpdated(() => editorVersion.value++);
-		let key = 0;
+		const KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor);
+		const { decorations, update } = useDecorations(() => props.text);
+		onUpdated(() => {
+			editorVersion.value++;
+			update();
+		});
+		const decoratedLeaves = computed(() => Text.decorations(props.text, [...props.decorations, ...decorations.value]));
 		return () => {
-			const KEY_TO_ELEMENT = EDITOR_TO_KEY_TO_ELEMENT.get(editor);
-			if (textRef.value) {
-				KEY_TO_ELEMENT?.set(DOMEditor.findKey(editor, props.text), textRef.value);
+			const key = DOMEditor.findKey(editor, props.text);
+			if (textRef.value && KEY_TO_ELEMENT) {
+				KEY_TO_ELEMENT.set(key, textRef.value);
 				ELEMENT_TO_NODE.set(textRef.value, props.text);
 				NODE_TO_ELEMENT.set(props.text, textRef.value);
 			}
-			const textPath = DOMEditor.findPath(editor, props.text);
-			const textDs = decorate([props.text, textPath]);
-			const range = Editor.range(editor, textPath);
-			for (const dr of props.elementDR) textDs.push(Range.intersection(dr, range));
-			if (markPlaceholder.value) textDs.unshift(markPlaceholder.value);
-			const filterDs = textDs.filter(Boolean);
-			const leaves = Text.decorations(props.text, filterDs.length ? filterDs : []);
 			return renderText({
 				text: props.text,
 				attributes: renderTextAttributes,
-				children: renderList(leaves, (leaf, i) => h(LeafComp, {
+				children: renderList(decoratedLeaves.value, (leaf, i) => h(LeafComp, {
 					text: props.text,
 					leaf: leaf.leaf,
-					isLast: props.isLast && i === leaves.length - 1,
+					isLast: props.isLast && i === decoratedLeaves.value.length - 1,
 					leafPosition: leaf.position,
-					key: key++
+					key: `${props.text.text}-${leaf.position?.end}-${leaf.position?.start}`
 				}))
 			});
 		};
@@ -638,7 +577,7 @@ var VOID_CHILDREN_ATTRS = {
 };
 var ElementComp = defineComponent({
 	name: "slate-element",
-	props: ["element"],
+	props: ["element", "decorations"],
 	setup(props) {
 		const editor = useEditor();
 		provide(SLATE_USE_ELEMENT, props.element);
@@ -652,6 +591,9 @@ var ElementComp = defineComponent({
 			if (nodes[lastIndex].nodeType === 3 && nodes[lastIndex].textContent !== "") nodes[lastIndex].textContent = "";
 		});
 		const renderElement = useRenderElement();
+		const { decorations, update } = useDecorations(() => props.element);
+		onUpdated(update);
+		const decorationsProps = computed(() => [...props.decorations, ...decorations.value]);
 		return () => {
 			const isInline = editor.isInline(props.element);
 			const [[text]] = Node.texts(props.element);
@@ -685,14 +627,17 @@ var ElementComp = defineComponent({
 					children: h(tag, VOID_CHILDREN_ATTRS, h(TextComp, {
 						text,
 						isLast: false,
-						elementDR: []
+						decorations: decorationsProps.value
 					})),
 					element: props.element
 				});
 			}
 			return renderElement({
 				attributes,
-				children: h(ChildrenComp, { element: props.element }),
+				children: h(ChildrenComp, {
+					element: props.element,
+					decorations: decorationsProps.value
+				}),
 				element: props.element
 			});
 		};
@@ -700,65 +645,83 @@ var ElementComp = defineComponent({
 });
 //#endregion
 //#region packages/slate-vue/components/chunk.ts
-var ChunkCompFc = (ancestor, renderChunk, highest) => renderList(ancestor.children, (chunkNode) => {
-	if (chunkNode.type === "chunk") {
-		const lowest = chunkNode.children[0]?.type === "leaf";
-		return renderChunk({
-			highest: !!highest,
-			lowest,
-			attributes: {
-				"data-slate-chunk": true,
-				key: chunkNode.key.id
-			},
-			children: ChunkCompFc(chunkNode, renderChunk, false)
+var ChunkComp = defineComponent({
+	props: [
+		"root",
+		"ancestor",
+		"renderElement"
+	],
+	setup(props) {
+		const renderChunk = useRenderChunk();
+		return () => renderList(props.ancestor.children, (chunkNode) => {
+			if (chunkNode.type === "chunk") return renderChunk({
+				highest: props.ancestor === props.root,
+				lowest: chunkNode.children.some((c) => c.type === "leaf"),
+				attributes: {
+					"data-slate-chunk": true,
+					key: chunkNode.key.id
+				},
+				children: h(ChunkComp, {
+					root: props.root,
+					ancestor: chunkNode,
+					renderElement: props.renderElement
+				})
+			});
+			return props.renderElement(chunkNode.node, chunkNode.index, chunkNode.key);
 		});
 	}
-	return h(ElementComp, {
-		element: chunkNode.node,
-		key: chunkNode.key.id
-	});
 });
 //#endregion
 //#region packages/slate-vue/components/children.ts
+var useDecorationsByChild = (editor, node, decorations) => {
+	const decorationsByChild = splitDecorationsByChild(editor, node, decorations);
+	const mutableDecorationsByChild = decorationsByChild;
+	const childrenToRedecorate = [];
+	mutableDecorationsByChild.length = decorationsByChild.length;
+	for (let i = 0; i < decorationsByChild.length; i++) {
+		const decorations = decorationsByChild[i];
+		const previousDecorations = mutableDecorationsByChild[i] ?? null;
+		if (!isElementDecorationsEqual(previousDecorations, decorations)) {
+			mutableDecorationsByChild[i] = decorations;
+			childrenToRedecorate.push(i);
+		}
+	}
+	return {
+		decorationsByChild: mutableDecorationsByChild,
+		childrenToRedecorate
+	};
+};
 /**
 * Children.
 */
 var ChildrenComp = defineComponent({
 	name: "slate-children",
-	props: ["element"],
+	props: ["element", "decorations"],
 	setup(props) {
 		const editor = useEditor();
 		const isBlock = Node.isElement(props.element) && !editor.isInline(props.element);
 		const chunkSize = Editor.hasInlines(editor, props.element) ? null : editor.getChunkSize(props.element);
-		if (isBlock || chunkSize === null) {
-			provideIsLastEmptyBlock(props.element);
-			const decorate = injectDecorateFn();
-			return () => {
-				const elementDR = getElementDR(props.element, editor, decorate);
-				return renderList(props.element.children, (n, i) => {
-					NODE_TO_INDEX.set(n, i);
-					NODE_TO_PARENT.set(n, props.element);
-					const key = DOMEditor.findKey(editor, n);
-					return Node.isText(n) ? h(TextComp, {
-						text: n,
-						key: key.id,
-						elementDR,
-						isLast: i === props.element.children.length - 1
-					}) : h(ElementComp, {
-						element: n,
-						key: key.id
-					});
-				});
-			};
-		}
-		const cacheTree = getChunkTreeForNode(editor, props.element);
-		provideChunkRoot(cacheTree);
-		const renderChunk = useRenderChunk();
+		if (isBlock || chunkSize === null) provideIsLastEmptyBlock(props.element);
 		return () => {
-			reconcileChildren(editor, {
-				chunkTree: cacheTree,
-				children: props.element.children,
+			const { decorationsByChild, childrenToRedecorate } = useDecorationsByChild(editor, props.element, props.decorations);
+			if (isBlock || chunkSize === null) return renderList(props.element.children, (n, i) => {
+				NODE_TO_INDEX.set(n, i);
+				NODE_TO_PARENT.set(n, props.element);
+				const key = DOMEditor.findKey(editor, n);
+				return Node.isText(n) ? h(TextComp, {
+					text: n,
+					key: key.id,
+					decorations: decorationsByChild[i],
+					isLast: i === props.element.children.length - 1
+				}) : h(ElementComp, {
+					element: n,
+					key: key.id,
+					decorations: decorationsByChild[i]
+				});
+			});
+			const chunkTree = getChunkTreeForNode(editor, props.element, { reconcile: {
 				chunkSize,
+				rerenderChildren: childrenToRedecorate,
 				onInsert: (n, i) => {
 					NODE_TO_INDEX.set(n, i);
 					NODE_TO_PARENT.set(n, props.element);
@@ -770,8 +733,21 @@ var ChildrenComp = defineComponent({
 				onIndexChange: (n, i) => {
 					NODE_TO_INDEX.set(n, i);
 				}
+			} });
+			const renderElementComponent = (n, i, cachedKey) => {
+				const key = cachedKey ?? DOMEditor.findKey(editor, n);
+				return h(ElementComp, {
+					decorations: decorationsByChild[i],
+					element: n,
+					i,
+					key: key.id
+				});
+			};
+			return h(ChunkComp, {
+				root: chunkTree,
+				ancestor: chunkTree,
+				renderElement: renderElementComponent
 			});
-			return ChunkCompFc(cacheTree, renderChunk, true);
 		};
 	}
 });
@@ -1027,10 +1003,11 @@ var Editable = defineComponent({
 			IS_READ_ONLY.set(editor, current);
 			isReadOnly.value = current;
 		});
-		const state = reactive({
+		const state = {
 			isDraggingInternally: false,
-			latestElement: null
-		});
+			latestElement: null,
+			hasMarkPlaceholder: false
+		};
 		const placeholderHeight = ref();
 		const onPlaceholderResize = (h) => placeholderHeight.value = h;
 		const processing = ref(false);
@@ -1084,14 +1061,6 @@ var Editable = defineComponent({
 			EDITOR_TO_ELEMENT.delete(editor);
 			NODE_TO_ELEMENT.delete(editor);
 		});
-		const hasMarkPlaceholder = computed(() => {
-			if (editor.selection && Range.isCollapsed(editor.selection) && editor.marks) {
-				const anchor = editor.selection.anchor;
-				const leaf = Node.leaf(editor, anchor.path);
-				if (!Text.equals(leaf, editor.marks, { loose: true })) return true;
-			}
-			return false;
-		});
 		const setDomSelection = () => {
 			const root = DOMEditor.findDocumentOrShadowRoot(editor);
 			const domSelection = getSelection(root);
@@ -1115,7 +1084,7 @@ var Editable = defineComponent({
 					suppressThrow: true
 				});
 				if (slateRange && Range.equals(slateRange, editor.selection)) {
-					if (!hasMarkPlaceholder.value) return;
+					if (!state.hasMarkPlaceholder) return;
 					if (anchorNode?.parentElement?.hasAttribute("data-slate-mark-placeholder")) return;
 				}
 			}
@@ -1140,7 +1109,6 @@ var Editable = defineComponent({
 		};
 		const editorVersion = useEditorVersion();
 		watch(() => editorVersion.value, () => {
-			console.log(JSON.stringify(editor.selection));
 			const root = DOMEditor.findDocumentOrShadowRoot(editor);
 			const domSelection = getSelection(root);
 			if (!domSelection || !DOMEditor.isFocused(editor)) return;
@@ -1621,39 +1589,74 @@ var Editable = defineComponent({
 		const autocorrect = computed(() => HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM ? attributes.autocorrect : void 0);
 		const autocapitalize = computed(() => HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM ? attributes.autocapitalize : void 0);
 		const showPlaceholder = computed(() => Boolean(placeholder) && editor.children?.length === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === "" && !isComposing.value);
-		providePlaceholder(computed(() => placeholder));
-		providePlaceholderShow(showPlaceholder);
-		providePlaceholderResize(onPlaceholderResize);
-		return () => h(attributes.is || "div", {
-			role: readOnly ? void 0 : "textbox",
-			"aria-multiline": readOnly ? void 0 : true,
-			translate: "no",
-			"data-slate-editor": true,
-			"data-slate-node": "value",
-			zindex: -1,
-			spellcheck: spellcheck.value,
-			autocorrect: autocorrect.value,
-			autocapitalize: autocapitalize.value,
-			contenteditable: !readOnly,
-			ref: editableRef,
-			style: editableStyle.value,
-			onBeforeinput,
-			onInput,
-			onBlur,
-			onClick,
-			onCompositionend,
-			onCompositionupdate,
-			onCompositionstart,
-			onCopy,
-			onCut,
-			onDragover,
-			onDragstart,
-			onDrop,
-			onDragend,
-			onFocus,
-			onKeydown,
-			onPaste
-		}, h(ChildrenComp, { element: editor }));
+		const decorate = injectDecorateFn();
+		const decorations = computed(() => {
+			const _decorations = decorate([editor, []]);
+			if (showPlaceholder.value) {
+				const start = Editor.start(editor, []);
+				_decorations.push({
+					[PLACEHOLDER_SYMBOL]: true,
+					placeholder,
+					onPlaceholderResize,
+					anchor: start,
+					focus: start
+				});
+			}
+			const { marks } = editor;
+			state.hasMarkPlaceholder = false;
+			if (editor.selection && Range.isCollapsed(editor.selection) && marks) {
+				const { anchor } = editor.selection;
+				const leaf = Node.leaf(editor, anchor.path);
+				const { text, ...rest } = leaf;
+				if (!Text.equals(leaf, marks, { loose: true })) {
+					state.hasMarkPlaceholder = true;
+					const unset = Object.fromEntries(Object.keys(rest).map((mark) => [mark, null]));
+					_decorations.push({
+						[MARK_PLACEHOLDER_SYMBOL]: true,
+						...unset,
+						...marks,
+						anchor,
+						focus: anchor
+					});
+				}
+			}
+			return _decorations;
+		});
+		return () => {
+			return h(attributes.is || "div", {
+				role: readOnly ? void 0 : "textbox",
+				"aria-multiline": readOnly ? void 0 : true,
+				translate: "no",
+				"data-slate-editor": true,
+				"data-slate-node": "value",
+				zindex: -1,
+				spellcheck: spellcheck.value,
+				autocorrect: autocorrect.value,
+				autocapitalize: autocapitalize.value,
+				contenteditable: !readOnly,
+				ref: editableRef,
+				style: editableStyle.value,
+				onBeforeinput,
+				onInput,
+				onBlur,
+				onClick,
+				onCompositionend,
+				onCompositionupdate,
+				onCompositionstart,
+				onCopy,
+				onCut,
+				onDragover,
+				onDragstart,
+				onDrop,
+				onDragend,
+				onFocus,
+				onKeydown,
+				onPaste
+			}, h(ChildrenComp, {
+				element: editor,
+				decorations: decorations.value
+			}));
+		};
 	}
 });
 //#endregion

package/dist/yjs.js

@@ -1,5 +1,5 @@
-import { dt as Editor, f as DOMEditor, gt as Range, ht as Path, mt as Node, pt as Location, tn as isObject, yt as Transforms } from "./slate-dom-Bhp4HdEp.js";
-import { a as useFocused, d as useEditor } from "./slate-vue-BAUZN2zq.js";
+import { _t as Range, bt as Transforms, f as DOMEditor, ft as Editor, gt as Path, ht as Node, mt as Location, nn as isObject } from "./slate-dom-CbCA1XcK.js";
+import { a as useFocused, d as useEditor } from "./slate-vue-C5Tp0KRv.js";
 import { computed, onMounted, onUnmounted, onUpdated, ref, watch } from "vue";
 import { UndoManager, XmlText, YTextEvent, compareRelativePositions, createAbsolutePositionFromRelativePosition, createRelativePositionFromJSON, createRelativePositionFromTypeIndex, decodeRelativePosition, encodeRelativePosition } from "yjs";
 //#region packages/slate-yjs/utils/object.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slate-vue3",
-  "version": "0.15.0",
+  "version": "1.0.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",