@lofcz/platejs-core 53.1.6 → 53.1.8

package/dist/react/index.js

@@ -1,19 +1,20 @@
-import { Ht as BaseParagraphPlugin, at as DOMPlugin, cn as createSlatePlugin, lt as ChunkingPlugin, n as withSlate, p as isEditOnly, s as SlateExtensionPlugin, sn as getEditorPlugin$1, tn as getPluginByType, vt as getSlateClass, y as NavigationFeedbackPlugin$1, yt as getPluginNodeProps } from "../withSlate-Ck8dLhUt.js";
+import { Ht as BaseParagraphPlugin, b as NavigationFeedbackPlugin$1, bt as getPluginNodeProps, cn as createSlatePlugin, n as withSlate, ot as DOMPlugin, p as isEditOnly, s as SlateExtensionPlugin, sn as getEditorPlugin$1, tn as getPluginByType, ut as ChunkingPlugin, yt as getSlateClass } from "../withSlate-NVP0S9vL.js";
 import { t as Hotkeys } from "../hotkeys-DI1HPO2Q.js";
-import { A as pipeInjectNodeProps, C as createStaticEditor, k as pipeDecorate, s as PlateStatic } from "../static-DAs0P1Ms.js";
-import { PathApi, createEditor } from "@platejs/slate";
+import { A as pipeInjectNodeProps, C as createStaticEditor, k as pipeDecorate, s as PlateStatic } from "../static-KMalmfNw.js";
+import { NodeApi, PathApi, createEditor } from "@platejs/slate";
 import { isDefined } from "@udecode/utils";
 import { DefaultPlaceholder, Editable, Slate, useComposing, useFocused, useReadOnly, useSelected, useSlateStatic, withReact } from "slate-react";
 import { c } from "react-compiler-runtime";
 import React, { useEffect, useId, useRef } from "react";
 import { Key, useHotkeys } from "@udecode/react-hotkeys";
-import { createAtomStore, useAtomStoreSet, useAtomStoreState, useAtomStoreValue, useStoreAtomState, useStoreAtomValue, useStoreAtomValue as useStoreAtomValue$1, useStoreSetAtom } from "jotai-x";
 import { atom, atom as atom$1 } from "jotai";
+import { createAtomStore, useAtomStoreSet, useAtomStoreState, useAtomStoreValue, useStoreAtomState, useStoreAtomValue, useStoreAtomValue as useStoreAtomValue$1, useStoreSetAtom } from "jotai-x";
 import { createZustandStore, createZustandStore as createZustandStore$1, useStoreSelect, useStoreSelect as useStoreSelect$1, useStoreState, useStoreValue, useStoreValue as useStoreValue$1, useTracked, useTrackedStore } from "zustand-x";
 import clsx$1, { clsx } from "clsx";
 import omit from "lodash/omit.js";
 import { useDeepCompareMemo } from "use-deep-compare";
-import { useComposedRef, useMemoizedSelector, useStableFn } from "@udecode/react-utils";
+import { useComposedRef, useStableFn } from "@udecode/react-utils";
+import { createStore } from "jotai/vanilla";
 import { selectAtom } from "jotai/utils";
 import { focusAtom } from "jotai-optics";
 
@@ -583,16 +584,30 @@ const DOM_HANDLERS = [
 * `props.element.attributes` are passed into `props.attributes`. Extend the
 * class name with the node type.
 */
-const getRenderNodeProps = ({ attributes: nodeAttributes, disableInjectNodeProps, editor, plugin, props, readOnly }) => {
+const getRenderNodeProps = ({ attributes: nodeAttributes, disableInjectNodeProps, editor, plugin, pluginContext, props, readOnly }) => {
+	const hasInjectNodeProps = !disableInjectNodeProps && editor.meta.pluginCache.inject.nodeProps.length > 0;
+	const canSkipPluginNodeProps = !hasInjectNodeProps && !plugin?.node.props && !plugin?.node.dangerouslyAllowAttributes?.length;
+	const resolvedPluginContext = pluginContext ? pluginContext : plugin ? getEditorPlugin(editor, plugin) : {
+		api: editor.api,
+		editor,
+		tf: editor.transforms
+	};
+	const { className } = props;
 	let newProps = {
 		...props,
-		...plugin ? getEditorPlugin(editor, plugin) : {
-			api: editor.api,
-			editor,
-			tf: editor.transforms
-		}
+		...resolvedPluginContext
 	};
-	const { className } = props;
+	if (canSkipPluginNodeProps) {
+		newProps = {
+			...newProps,
+			attributes: {
+				...props.attributes,
+				className: clsx(getSlateClass(plugin?.node.type), props.attributes?.className, className) || void 0
+			}
+		};
+		if (newProps.attributes?.style && Object.keys(newProps.attributes.style).length === 0) newProps.attributes.style = void 0;
+		return newProps;
+	}
 	const pluginProps = getPluginNodeProps({
 		attributes: nodeAttributes,
 		plugin,
@@ -605,7 +620,7 @@ const getRenderNodeProps = ({ attributes: nodeAttributes, disableInjectNodeProps
 			className: clsx(getSlateClass(plugin?.node.type), pluginProps.attributes?.className, className) || void 0
 		}
 	};
-	if (!disableInjectNodeProps) newProps = pipeInjectNodeProps(editor, newProps, (node) => editor.api.findPath(node), readOnly);
+	if (hasInjectNodeProps) newProps = pipeInjectNodeProps(editor, newProps, (node) => editor.api.findPath(node), readOnly);
 	if (newProps.attributes?.style && Object.keys(newProps.attributes.style).length === 0) newProps.attributes.style = void 0;
 	return newProps;
 };
@@ -693,6 +708,21 @@ const pipeOnChange = (editor, value) => {
 
 //#endregion
 //#region src/react/components/plate-nodes.tsx
+const VOID_HTML_TAGS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"source",
+	"track",
+	"wbr"
+]);
 const useNodeAttributes = (props, ref) => {
 	const $ = c(11);
 	const t0 = props.attributes;
@@ -731,81 +761,137 @@ const useNodeAttributes = (props, ref) => {
 	} else t5 = $[10];
 	return t5;
 };
+const isHtmlVoidElementTag = (tag) => VOID_HTML_TAGS.has(tag);
+const useBlockIdAttributeRef = (blockId, ref) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== blockId) {
+		t0 = (node) => {
+			if (!node) return;
+			if (blockId) node.setAttribute("data-block-id", String(blockId));
+			else node.removeAttribute("data-block-id");
+		};
+		$[0] = blockId;
+		$[1] = t0;
+	} else t0 = $[1];
+	return useComposedRef(t0, ref);
+};
 const PlateElement = React.forwardRef(function PlateElement$1(t0, ref) {
-	const $ = c(22);
+	const $ = c(15);
+	let Tag;
 	let children;
 	let insetProp;
 	let props;
 	let t1;
 	if ($[0] !== t0) {
-		({as: t1, children, insetProp, ...props} = t0);
+		const { as: t2$1, children: t3$1, insetProp: t4, ...t5 } = t0;
+		children = t3$1;
+		insetProp = t4;
+		props = t5;
+		Tag = t2$1 === void 0 ? "div" : t2$1;
+		t1 = props.element.id && props.editor.api.isBlock(props.element) ? props.element.id : void 0;
 		$[0] = t0;
-		$[1] = children;
-		$[2] = insetProp;
-		$[3] = props;
-		$[4] = t1;
+		$[1] = Tag;
+		$[2] = children;
+		$[3] = insetProp;
+		$[4] = props;
+		$[5] = t1;
 	} else {
-		children = $[1];
-		insetProp = $[2];
-		props = $[3];
-		t1 = $[4];
+		Tag = $[1];
+		children = $[2];
+		insetProp = $[3];
+		props = $[4];
+		t1 = $[5];
 	}
-	const Tag = t1 === void 0 ? "div" : t1;
-	const attributes = useNodeAttributes(props, ref);
-	const block = useEditorMounted() && !!props.element.id && !!props.editor.api.isBlock(props.element);
+	const blockIdRef = useBlockIdAttributeRef(t1, ref);
+	let t2;
+	if ($[6] !== props.attributes || $[7] !== props.className || $[8] !== props.style) {
+		t2 = {
+			attributes: props.attributes,
+			className: props.className,
+			style: props.style
+		};
+		$[6] = props.attributes;
+		$[7] = props.className;
+		$[8] = props.style;
+		$[9] = t2;
+	} else t2 = $[9];
+	const attributes = useNodeAttributes(t2, blockIdRef);
 	const inset = insetProp ?? props.plugin?.rules.selection?.affinity === "directional";
+	let t3;
+	if ($[10] !== Tag || $[11] !== attributes || $[12] !== children || $[13] !== inset) {
+		t3 = /* @__PURE__ */ React.createElement(PlateElementBody, {
+			attributes,
+			inset,
+			tag: Tag
+		}, children);
+		$[10] = Tag;
+		$[11] = attributes;
+		$[12] = children;
+		$[13] = inset;
+		$[14] = t3;
+	} else t3 = $[14];
+	return t3;
+});
+function PlateElementBody(t0) {
+	const $ = c(17);
+	const { attributes, children, inset, tag: Tag } = t0;
+	let t1;
+	if ($[0] !== Tag) {
+		t1 = isHtmlVoidElementTag(Tag);
+		$[0] = Tag;
+		$[1] = t1;
+	} else t1 = $[1];
+	const isVoidTag = t1;
 	let t2;
-	if ($[5] !== inset) {
+	if ($[2] !== inset) {
 		t2 = inset && /* @__PURE__ */ React.createElement(NonBreakingSpace, null);
-		$[5] = inset;
-		$[6] = t2;
-	} else t2 = $[6];
-	const t3 = attributes["data-slate-inline"];
-	const t4 = block ? props.element.id : void 0;
-	const t5 = attributes?.style;
-	let t6;
-	if ($[7] !== t5) {
-		t6 = {
-			position: "relative",
-			...t5
-		};
-		$[7] = t5;
-		$[8] = t6;
-	} else t6 = $[8];
-	const t7 = t6;
-	let t8;
-	if ($[9] !== inset) {
-		t8 = inset && /* @__PURE__ */ React.createElement(NonBreakingSpace, null);
-		$[9] = inset;
-		$[10] = t8;
-	} else t8 = $[10];
-	let t9;
-	if ($[11] !== Tag || $[12] !== attributes || $[13] !== children || $[14] !== t3 || $[15] !== t4 || $[16] !== t7 || $[17] !== t8) {
-		t9 = /* @__PURE__ */ React.createElement(Tag, {
+		$[2] = inset;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== Tag || $[5] !== attributes || $[6] !== children || $[7] !== inset || $[8] !== isVoidTag) {
+		t3 = isVoidTag ? /* @__PURE__ */ React.createElement("div", {
 			"data-slate-node": "element",
-			"data-slate-inline": t3,
-			"data-block-id": t4,
+			"data-slate-inline": attributes["data-slate-inline"],
 			...attributes,
-			style: t7
-		}, children, t8);
-		$[11] = Tag;
-		$[12] = attributes;
-		$[13] = children;
+			style: {
+				position: "relative",
+				...attributes?.style
+			}
+		}, /* @__PURE__ */ React.createElement(Tag, { contentEditable: false }), children) : /* @__PURE__ */ React.createElement(Tag, {
+			"data-slate-node": "element",
+			"data-slate-inline": attributes["data-slate-inline"],
+			...attributes,
+			style: {
+				position: "relative",
+				...attributes?.style
+			}
+		}, children, inset && /* @__PURE__ */ React.createElement(NonBreakingSpace, null));
+		$[4] = Tag;
+		$[5] = attributes;
+		$[6] = children;
+		$[7] = inset;
+		$[8] = isVoidTag;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== inset || $[11] !== isVoidTag) {
+		t4 = inset && isVoidTag && /* @__PURE__ */ React.createElement(NonBreakingSpace, null);
+		$[10] = inset;
+		$[11] = isVoidTag;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ React.createElement(React.Fragment, null, t2, t3, t4);
+		$[13] = t2;
 		$[14] = t3;
 		$[15] = t4;
-		$[16] = t7;
-		$[17] = t8;
-		$[18] = t9;
-	} else t9 = $[18];
-	let t10;
-	if ($[19] !== t2 || $[20] !== t9) {
-		t10 = /* @__PURE__ */ React.createElement(React.Fragment, null, t2, t9);
-		$[19] = t2;
-		$[20] = t9;
-		$[21] = t10;
-	} else t10 = $[21];
-	return t10;
-});
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+}
 const PlateText = React.forwardRef((t0, ref) => {
 	const $ = c(8);
 	let children;
@@ -909,18 +995,55 @@ const PlateLeaf = React.forwardRef((t0, ref) => {
 
 //#endregion
 //#region src/react/utils/pluginRenderLeaf.tsx
+const HARD_AFFINITY_SPACE$1 = String.fromCodePoint(160);
+const HARD_AFFINITY_SPACER_STYLE$1 = {
+	fontSize: 0,
+	lineHeight: 0
+};
+const isActiveHardAffinityBoundary$1 = (editor, text) => {
+	if (!editor.api.isCollapsed()) return false;
+	const focus = editor.selection?.focus;
+	if (!focus) return false;
+	if (NodeApi.get(editor, focus.path) !== text) return false;
+	return focus.offset === 0 || focus.offset === text.text.length;
+};
+const getSimpleLeafAttributes = (props, className) => {
+	const attributes = props.attributes ?? props.leaf.attributes ?? {};
+	return {
+		...attributes,
+		className: [className, attributes.className].filter(Boolean).join(" ") || void 0
+	};
+};
 /**
 * Get a `Editable.renderLeaf` handler for `plugin.node.type`. If the type is
 * equals to the slate leaf type, render `plugin.render.node`. Else, return
 * `children`.
 */
 const pluginRenderLeaf = (editor, plugin) => function render(props) {
-	const { render: { leaf: leafComponent, node } } = plugin;
-	const { children, leaf } = props;
 	const readOnly = useReadOnly();
+	const { render: { leaf: leafComponent, node } } = plugin;
+	const { children, leaf, text } = props;
+	const Component = leafComponent ?? node;
 	if (isEditOnly(readOnly, plugin, "render")) return children;
 	if (leaf[plugin.node.type]) {
-		const Component = leafComponent ?? node;
+		const canUseSimpleLeaf = !Component && editor.meta.pluginCache.inject.nodeProps.length === 0 && !plugin.node.props && !plugin.node.dangerouslyAllowAttributes?.length;
+		if (canUseSimpleLeaf && !plugin.rules.selection?.affinity) {
+			const Tag = plugin.render?.as ?? "span";
+			const attributes = getSimpleLeafAttributes(props, getSlateClass(plugin.node.type) || void 0);
+			return /* @__PURE__ */ React.createElement(Tag, attributes, children);
+		}
+		if (canUseSimpleLeaf && plugin.rules.selection?.affinity === "hard") {
+			const Tag = plugin.render?.as ?? "span";
+			const attributes = getSimpleLeafAttributes(props, getSlateClass(plugin.node.type) || void 0);
+			if (!isActiveHardAffinityBoundary$1(editor, text)) return /* @__PURE__ */ React.createElement(Tag, attributes, children);
+			return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
+				contentEditable: false,
+				style: HARD_AFFINITY_SPACER_STYLE$1
+			}, HARD_AFFINITY_SPACE$1), /* @__PURE__ */ React.createElement(Tag, attributes, children, /* @__PURE__ */ React.createElement("span", {
+				contentEditable: false,
+				style: HARD_AFFINITY_SPACER_STYLE$1
+			}, HARD_AFFINITY_SPACE$1)));
+		}
 		const Leaf = Component ?? PlateLeaf;
 		const ctxProps = getRenderNodeProps({
 			attributes: leaf.attributes,
@@ -940,24 +1063,96 @@ const pluginRenderLeaf = (editor, plugin) => function render(props) {
 
 //#endregion
 //#region src/react/utils/pipeRenderLeaf.tsx
+const HARD_AFFINITY_SPACE = String.fromCodePoint(160);
+const HARD_AFFINITY_SPACER_STYLE = {
+	fontSize: 0,
+	lineHeight: 0
+};
+const isActiveHardAffinityBoundary = (editor, text) => {
+	if (!editor.api.isCollapsed()) return false;
+	const focus = editor.selection?.focus;
+	if (!focus) return false;
+	if (NodeApi.get(editor, focus.path) !== text) return false;
+	return focus.offset === 0 || focus.offset === text.text.length;
+};
 /** @see {@link RenderLeaf} */
 const pipeRenderLeaf = (editor, renderLeafProp) => {
-	const renderLeafs = [];
+	const complexRenderLeafEntries = [];
+	const complexRenderLeafEntryByKey = /* @__PURE__ */ new Map();
+	const renderLeafEntries = [];
+	const renderLeafEntryByKey = /* @__PURE__ */ new Map();
 	const leafPropsPlugins = [];
+	const hasInjectNodeProps = editor.meta.pluginCache.inject.nodeProps.length > 0;
 	editor.meta.pluginCache.node.isLeaf.forEach((key) => {
 		const plugin = editor.getPlugin({ key });
-		if (plugin) renderLeafs.push(pluginRenderLeaf(editor, plugin));
+		if (plugin) {
+			const leafKey = plugin.node.type ?? key;
+			if (editor.meta.pluginCache.inject.nodeProps.length === 0 && !plugin.render?.leaf && !plugin.render?.node && !plugin.node.props && !plugin.node.dangerouslyAllowAttributes?.length && (!plugin.rules.selection?.affinity || plugin.rules.selection?.affinity === "hard")) {
+				const entry = {
+					className: plugin.node.type ? `slate-${plugin.node.type}` : void 0,
+					editOnly: plugin.editOnly,
+					key: leafKey,
+					selectionAffinity: plugin.rules.selection?.affinity,
+					tag: plugin.render?.as ?? "span"
+				};
+				renderLeafEntries.push(entry);
+				renderLeafEntryByKey.set(leafKey, true);
+			} else {
+				const entry = {
+					key: leafKey,
+					renderLeaf: pluginRenderLeaf(editor, plugin)
+				};
+				complexRenderLeafEntries.push(entry);
+				complexRenderLeafEntryByKey.set(leafKey, entry.renderLeaf);
+			}
+		}
 	});
 	editor.meta.pluginCache.node.leafProps.forEach((key) => {
 		const plugin = editor.getPlugin({ key });
 		if (plugin) leafPropsPlugins.push(plugin);
 	});
+	if (!hasInjectNodeProps && renderLeafEntries.length === 0 && complexRenderLeafEntries.length === 0 && leafPropsPlugins.length === 0) {
+		if (renderLeafProp) return renderLeafProp;
+		return function render({ attributes, ...props }) {
+			return /* @__PURE__ */ React.createElement("span", attributes, props.children);
+		};
+	}
+	const canUsePlainOuterLeaf = !hasInjectNodeProps && !renderLeafProp && leafPropsPlugins.length === 0;
 	return function render({ attributes, ...props }) {
 		const readOnly = useReadOnly();
-		renderLeafs.forEach((renderLeaf) => {
+		const leaf = props.leaf;
+		let hasActiveSimpleRenderLeaf = false;
+		let hasActiveComplexRenderLeaf = false;
+		for (const key in leaf) {
+			if (!Object.hasOwn(leaf, key)) continue;
+			if (!hasActiveSimpleRenderLeaf && renderLeafEntryByKey.has(key)) hasActiveSimpleRenderLeaf = true;
+			if (!hasActiveComplexRenderLeaf && complexRenderLeafEntryByKey.has(key)) hasActiveComplexRenderLeaf = true;
+			if (hasActiveSimpleRenderLeaf && hasActiveComplexRenderLeaf) break;
+		}
+		if (hasActiveSimpleRenderLeaf) for (const { className, editOnly, key, selectionAffinity, tag: Tag } of renderLeafEntries) {
+			if (!leaf[key]) continue;
+			if (editOnly && isEditOnly(readOnly, { editOnly }, "render")) continue;
+			if (selectionAffinity === "hard") {
+				if (!isActiveHardAffinityBoundary(editor, props.text)) {
+					props.children = /* @__PURE__ */ React.createElement(Tag, { className }, props.children);
+					continue;
+				}
+				props.children = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
+					contentEditable: false,
+					style: HARD_AFFINITY_SPACER_STYLE
+				}, HARD_AFFINITY_SPACE), /* @__PURE__ */ React.createElement(Tag, { className }, props.children, /* @__PURE__ */ React.createElement("span", {
+					contentEditable: false,
+					style: HARD_AFFINITY_SPACER_STYLE
+				}, HARD_AFFINITY_SPACE)));
+				continue;
+			}
+			props.children = /* @__PURE__ */ React.createElement(Tag, { className }, props.children);
+		}
+		if (hasActiveComplexRenderLeaf) for (const { key, renderLeaf } of complexRenderLeafEntries) {
+			if (!leaf[key]) continue;
 			const newChildren = renderLeaf(props);
 			if (newChildren !== void 0) props.children = newChildren;
-		});
+		}
 		leafPropsPlugins.forEach((plugin) => {
 			if (props.leaf[plugin.node.type]) {
 				const pluginLeafProps = typeof plugin.node.leafProps === "function" ? plugin.node.leafProps(props) : plugin.node.leafProps ?? {};
@@ -968,6 +1163,7 @@ const pipeRenderLeaf = (editor, renderLeafProp) => {
 				};
 			}
 		});
+		if (canUsePlainOuterLeaf) return /* @__PURE__ */ React.createElement("span", attributes, props.children);
 		if (renderLeafProp) return renderLeafProp({
 			attributes,
 			...props
@@ -986,17 +1182,30 @@ const pipeRenderLeaf = (editor, renderLeafProp) => {
 
 //#endregion
 //#region src/react/utils/pluginRenderText.tsx
+const getSimpleTextAttributes = (props, className) => {
+	const attributes = props.attributes ?? {};
+	return {
+		...attributes,
+		className: [className, attributes.className].filter(Boolean).join(" ") || void 0
+	};
+};
 /**
 * Get a `Editable.renderText` handler for `plugin.node.type`. If the type is
 * equals to the slate text type and isDecoration is false, render
 * `plugin.render.node`. Else, return the default text rendering.
 */
 const pluginRenderText = (editor, plugin) => function render(nodeProps) {
+	const readOnly = useReadOnly();
 	const { render: { node } } = plugin;
 	const { children, text } = nodeProps;
-	const readOnly = useReadOnly();
+	const textKey = plugin.node.type ?? plugin.key;
 	if (isEditOnly(readOnly, plugin, "render")) return children;
-	if (text[plugin.node.type ?? plugin.key]) {
+	if (text[textKey]) {
+		if (!node && editor.meta.pluginCache.inject.nodeProps.length === 0 && !plugin.node.props && !plugin.node.dangerouslyAllowAttributes?.length) {
+			const Tag = plugin.render?.as ?? "span";
+			const attributes = getSimpleTextAttributes(nodeProps, getSlateClass(plugin.node.type) || void 0);
+			return /* @__PURE__ */ React.createElement(Tag, attributes, children);
+		}
 		const Text = node ?? PlateText;
 		const ctxProps = getRenderNodeProps({
 			attributes: nodeProps.attributes,
@@ -1019,17 +1228,59 @@ const pluginRenderText = (editor, plugin) => function render(nodeProps) {
 /** @see {@link RenderText} */
 const pipeRenderText = (editor, renderTextProp) => {
 	const renderTexts = [];
+	const renderTextByKey = /* @__PURE__ */ new Map();
+	const simpleRenderTexts = [];
+	const simpleRenderTextByKey = /* @__PURE__ */ new Map();
 	const textPropsPlugins = [];
+	const hasInjectNodeProps = editor.meta.pluginCache.inject.nodeProps.length > 0;
 	editor.meta.pluginList.forEach((plugin) => {
-		if (plugin.node.isLeaf && plugin.node.isDecoration === false) renderTexts.push(pluginRenderText(editor, plugin));
+		if (plugin.node.isLeaf && plugin.node.isDecoration === false) if (!plugin.render.node && !plugin.node.component && !plugin.node.props && !plugin.node.dangerouslyAllowAttributes?.length) {
+			const entry = {
+				className: getSlateClass(plugin.node.type) || void 0,
+				plugin,
+				tag: plugin.render?.as ?? "span",
+				textKey: plugin.node.type ?? plugin.key
+			};
+			simpleRenderTexts.push(entry);
+			simpleRenderTextByKey.set(entry.textKey, true);
+		} else {
+			const entry = {
+				renderText: pluginRenderText(editor, plugin),
+				textKey: plugin.node.type ?? plugin.key
+			};
+			renderTexts.push(entry);
+			renderTextByKey.set(entry.textKey, true);
+		}
 		if (plugin.node.textProps) textPropsPlugins.push(plugin);
 	});
+	if (!hasInjectNodeProps && simpleRenderTexts.length === 0 && renderTexts.length === 0 && textPropsPlugins.length === 0) {
+		if (renderTextProp) return renderTextProp;
+		return function render({ attributes, ...props }) {
+			return /* @__PURE__ */ React.createElement("span", attributes, props.children);
+		};
+	}
+	const canUsePlainOuterText = !hasInjectNodeProps && !renderTextProp && textPropsPlugins.length === 0;
 	return function render({ attributes, ...props }) {
 		const readOnly = useReadOnly();
-		renderTexts.forEach((renderText) => {
+		const text = props.text;
+		let hasActiveSimpleRenderText = false;
+		let hasActiveRenderText = false;
+		for (const textKey in text) {
+			if (!Object.hasOwn(text, textKey)) continue;
+			if (!hasActiveSimpleRenderText && simpleRenderTextByKey.has(textKey)) hasActiveSimpleRenderText = true;
+			if (!hasActiveRenderText && renderTextByKey.has(textKey)) hasActiveRenderText = true;
+			if (hasActiveSimpleRenderText && hasActiveRenderText) break;
+		}
+		if (hasActiveSimpleRenderText) for (const { className, plugin, tag: Tag, textKey } of simpleRenderTexts) {
+			if (!text[textKey]) continue;
+			if (isEditOnly(readOnly, plugin, "render")) continue;
+			props.children = /* @__PURE__ */ React.createElement(Tag, { className }, props.children);
+		}
+		if (hasActiveRenderText) for (const { renderText, textKey } of renderTexts) {
+			if (!text[textKey]) continue;
 			const newChildren = renderText(props);
 			if (newChildren !== void 0) props.children = newChildren;
-		});
+		}
 		textPropsPlugins.forEach((plugin) => {
 			if (props.text[plugin.node.type ?? plugin.key]) {
 				const pluginTextProps = typeof plugin.node.textProps === "function" ? plugin.node.textProps(props) : plugin.node.textProps ?? {};
@@ -1040,6 +1291,7 @@ const pipeRenderText = (editor, renderTextProp) => {
 				};
 			}
 		});
+		if (canUsePlainOuterText) return /* @__PURE__ */ React.createElement("span", attributes, props.children);
 		if (renderTextProp) return renderTextProp({
 			attributes,
 			...props
@@ -1147,27 +1399,17 @@ const useEditableProps = ({ disabled, readOnly, ...editableProps } = {}) => {
 * will not return the new path.
 */
 const useNodePath = (node) => {
-	const $ = c(6);
+	const $ = c(3);
 	const editor = useEditorRef();
 	let t0;
 	if ($[0] !== editor.api || $[1] !== node) {
-		t0 = () => editor.api.findPath(node);
+		t0 = editor.api.findPath(node);
 		$[0] = editor.api;
 		$[1] = node;
 		$[2] = t0;
 	} else t0 = $[2];
-	let t1;
-	if ($[3] !== editor || $[4] !== node) {
-		t1 = [editor, node];
-		$[3] = editor;
-		$[4] = node;
-		$[5] = t1;
-	} else t1 = $[5];
-	return useMemoizedSelector(t0, t1, _temp);
+	return t0;
 };
-function _temp(a, b) {
-	return !!a && !!b && PathApi.equals(a, b);
-}
 
 //#endregion
 //#region src/react/hooks/useSlateProps.ts
@@ -1251,44 +1493,193 @@ const useSlateProps = (t0) => {
 	return t6;
 };
 
-//#endregion
-//#region src/react/stores/element/usePath.ts
-/** Get the memoized path of the closest element. */
-const usePath = (pluginKey) => {
-	const editor = useEditorRef();
-	const value = useAtomStoreValue(useElementStore(pluginKey), "path");
-	if (!value) {
-		editor.api.debug.warn(`usePath(${pluginKey}) hook must be used inside the node component's context`, "USE_ELEMENT_CONTEXT");
-		return;
-	}
-	return value;
-};
-
 //#endregion
 //#region src/react/stores/element/useElementStore.tsx
 const SCOPE_ELEMENT = "element";
-const initialState = {
+const { elementStore, useElementStore: useElementStoreAtom } = createAtomStore({
 	element: null,
 	entry: null,
 	path: null
-};
-const { ElementProvider, elementStore, useElementStore } = createAtomStore(initialState, {
-	effect: Effect,
+}, {
 	name: "element",
 	suppressWarnings: true
 });
-function Effect() {
-	const $ = c(1);
-	const path = usePath();
-	if (path && PathApi.equals(path, [0])) {
-		let t0;
-		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t0 = /* @__PURE__ */ React.createElement(FirstBlockEffect, null);
-			$[0] = t0;
-		} else t0 = $[0];
-		return t0;
+const ElementContext = React.createContext(null);
+const ElementStoreContext = React.createContext(null);
+let currentElementContext = null;
+const syncElementStore = (store, nextState, prevState) => {
+	if (!prevState || !Object.is(prevState.element, nextState.element)) store.set(elementStore.atom.element, nextState.element);
+	if (!prevState || !Object.is(prevState.entry, nextState.entry)) store.set(elementStore.atom.entry, nextState.entry);
+	if (!prevState || !Object.is(prevState.path, nextState.path)) store.set(elementStore.atom.path, nextState.path);
+};
+const createElementJotaiStore = (state) => {
+	const store = createStore();
+	syncElementStore(store, state);
+	return store;
+};
+const createElementRuntimeStore = (initialState) => {
+	let jotaiStore = null;
+	const listeners = /* @__PURE__ */ new Set();
+	let state = initialState;
+	return {
+		getJotaiStore: () => {
+			if (!jotaiStore) jotaiStore = createElementJotaiStore(state);
+			return jotaiStore;
+		},
+		getState: () => state,
+		setState: (nextState) => {
+			if (Object.is(state.element, nextState.element) && Object.is(state.entry, nextState.entry) && Object.is(state.path, nextState.path)) return;
+			const prevState = state;
+			state = nextState;
+			if (jotaiStore) syncElementStore(jotaiStore, nextState, prevState);
+			listeners.forEach((listener) => {
+				listener();
+			});
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+};
+const findElementContext = (context, scope) => {
+	if (!context) return null;
+	if (!scope) return context;
+	let current = context;
+	while (current) {
+		if (current.scope === scope) return current;
+		current = current.parent;
+	}
+	return context;
+};
+const findMatchingElementContext = (context, scope) => {
+	if (!context || !scope) return context;
+	let current = context;
+	while (current) {
+		if (current.scope === scope) return current;
+		current = current.parent;
 	}
 	return null;
+};
+const withElementContext = (context, callback) => {
+	const previousContext = currentElementContext;
+	const nextContext = {};
+	Object.defineProperties(nextContext, Object.getOwnPropertyDescriptors(context));
+	nextContext.parent = previousContext;
+	currentElementContext = nextContext;
+	try {
+		return callback();
+	} finally {
+		currentElementContext = previousContext;
+	}
+};
+const useElementContext = (scope) => {
+	const $ = c(8);
+	const context = React.useContext(ElementContext);
+	let t0;
+	if ($[0] !== scope) {
+		t0 = findMatchingElementContext(currentElementContext, scope);
+		$[0] = scope;
+		$[1] = t0;
+	} else t0 = $[1];
+	const renderContext = t0;
+	if (renderContext) return renderContext;
+	let t1;
+	if ($[2] !== context || $[3] !== scope) {
+		t1 = findMatchingElementContext(context, scope);
+		$[2] = context;
+		$[3] = scope;
+		$[4] = t1;
+	} else t1 = $[4];
+	const providerContext = t1;
+	if (providerContext) return providerContext;
+	if (currentElementContext) return currentElementContext;
+	let t2;
+	if ($[5] !== context || $[6] !== scope) {
+		t2 = findElementContext(context, scope);
+		$[5] = context;
+		$[6] = scope;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+const useElementStoreContext = (scope) => {
+	const context = React.useContext(ElementStoreContext);
+	if (!context) return null;
+	if (!scope) return context;
+	let current = context;
+	while (current) {
+		if (current.scope === scope) return current;
+		current = current.parent;
+	}
+	return context;
+};
+const useElementStore = (scope) => {
+	const $ = c(3);
+	const context = useElementStoreContext(scope);
+	let t0;
+	if ($[0] !== context || $[1] !== scope) {
+		t0 = context ? {
+			scope,
+			store: context.store
+		} : scope;
+		$[0] = context;
+		$[1] = scope;
+		$[2] = t0;
+	} else t0 = $[2];
+	return useElementStoreAtom(t0);
+};
+function ElementProvider({ children, path, scope, ...props }) {
+	const element = props.element ?? null;
+	const entry = props.entry ?? null;
+	const elementPath = path ?? null;
+	const [runtime] = React.useState(() => createElementRuntimeStore({
+		element,
+		entry,
+		path: elementPath
+	}));
+	const parent = React.useContext(ElementContext);
+	const parentStore = React.useContext(ElementStoreContext);
+	const contextValue = React.useMemo(() => ({
+		element,
+		entry,
+		parent,
+		path: elementPath,
+		scope
+	}), [
+		element,
+		elementPath,
+		entry,
+		parent,
+		scope
+	]);
+	const storeContextValue = React.useMemo(() => ({
+		parent: parentStore,
+		runtime,
+		scope,
+		get store() {
+			return runtime.getJotaiStore();
+		}
+	}), [
+		parentStore,
+		runtime,
+		scope
+	]);
+	React.useLayoutEffect(() => {
+		runtime.setState({
+			element,
+			entry,
+			path: elementPath
+		});
+	}, [
+		element,
+		elementPath,
+		entry,
+		runtime
+	]);
+	return /* @__PURE__ */ React.createElement(ElementStoreContext.Provider, { value: storeContextValue }, /* @__PURE__ */ React.createElement(ElementContext.Provider, { value: contextValue }, path && PathApi.equals(path, [0]) ? /* @__PURE__ */ React.createElement(FirstBlockEffect, null) : null, children));
 }
 function FirstBlockEffect() {
 	const editor = useEditorRef();
@@ -1307,18 +1698,18 @@ function FirstBlockEffect() {
 //#region src/react/utils/pluginRenderElement.tsx
 function ElementContent(t0) {
 	const $ = c(3);
-	const { editor, plugin, ...t1 } = t0;
+	const { editor, plugin, pluginContext, ...t1 } = t0;
 	let props = t1;
-	const element = useElement();
 	const readOnly = useReadOnly();
 	if (isEditOnly(readOnly, plugin, "render")) return null;
 	const { children: _children } = props;
 	const Component = plugin.render?.node;
 	const Element = Component ?? PlateElement;
 	props = getRenderNodeProps({
-		attributes: element.attributes,
+		attributes: props.element.attributes,
 		editor,
 		plugin,
+		pluginContext,
 		props,
 		readOnly
 	});
@@ -1364,13 +1755,19 @@ function ElementContent(t0) {
 	});
 	return component;
 }
-function BelowRootNodes(props) {
-	const $ = c(6);
+function BelowRootNodes(t0) {
+	const $ = c(8);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else props = $[1];
 	const editor = useEditorRef();
 	const readOnly = useReadOnly();
-	let t0;
-	if ($[0] !== editor || $[1] !== props || $[2] !== readOnly) {
-		t0 = editor.meta.pluginCache.render.belowRootNodes.map((key) => {
+	let t1;
+	if ($[2] !== editor || $[3] !== props || $[4] !== readOnly) {
+		t1 = editor.meta.pluginCache.render.belowRootNodes.map((key) => {
 			const plugin = editor.getPlugin({ key });
 			if (isEditOnly(readOnly, plugin, "render")) return null;
 			const Component = plugin.render.belowRootNodes;
@@ -1379,55 +1776,338 @@ function BelowRootNodes(props) {
 				...props
 			});
 		});
-		$[0] = editor;
-		$[1] = props;
-		$[2] = readOnly;
-		$[3] = t0;
-	} else t0 = $[3];
-	let t1;
-	if ($[4] !== t0) {
-		t1 = /* @__PURE__ */ React.createElement(React.Fragment, null, t0);
-		$[4] = t0;
+		$[2] = editor;
+		$[3] = props;
+		$[4] = readOnly;
 		$[5] = t1;
 	} else t1 = $[5];
-	return t1;
+	let t2;
+	if ($[6] !== t1) {
+		t2 = /* @__PURE__ */ React.createElement(React.Fragment, null, t1);
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 }
 /**
 * Get a `Editable.renderElement` handler for `plugin.node.type`. If the type is
 * equals to the slate element type, render `plugin.render.node`. Else, return
 * `undefined` so the pipeline can check the next plugin.
 */
-const pluginRenderElement = (editor, plugin) => function render(props) {
-	const { element, path } = props;
-	return /* @__PURE__ */ React.createElement(ElementProvider, {
-		element,
-		entry: [element, path],
-		path,
-		scope: plugin.key
-	}, /* @__PURE__ */ React.createElement(ElementContent, {
-		editor,
-		plugin,
-		...props
-	}));
+const pluginRenderElement = (editor, plugin) => {
+	const pluginContext = getEditorPlugin(editor, plugin);
+	return function render(props) {
+		const { element, path } = props;
+		return /* @__PURE__ */ React.createElement(ElementProvider, {
+			element,
+			entry: [element, path],
+			path,
+			scope: plugin.key
+		}, /* @__PURE__ */ React.createElement(ElementContent, {
+			editor,
+			plugin,
+			pluginContext,
+			...props
+		}));
+	};
 };
 
 //#endregion
 //#region src/react/utils/pipeRenderElement.tsx
-/** @see {@link RenderElement} */
-const pipeRenderElement = (editor, renderElementProp) => {
-	return function render(props) {
-		const readOnly = useReadOnly();
-		const path = useNodePath(props.element);
-		const plugin = getPluginByType(editor, props.element.type);
-		if (plugin?.node.isElement) return pluginRenderElement(editor, plugin)({
+function FastElementWithPath(t0) {
+	const $ = c(16);
+	const { attributes, children, editor, element, plugin } = t0;
+	const path = useNodePath(element);
+	let t1;
+	if ($[0] !== element || $[1] !== path) {
+		t1 = [element, path];
+		$[0] = element;
+		$[1] = path;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== attributes || $[4] !== children || $[5] !== editor || $[6] !== element || $[7] !== path || $[8] !== plugin) {
+		t2 = /* @__PURE__ */ React.createElement(FastElementBody, {
+			attributes,
+			editor,
+			element,
+			path,
+			plugin
+		}, children);
+		$[3] = attributes;
+		$[4] = children;
+		$[5] = editor;
+		$[6] = element;
+		$[7] = path;
+		$[8] = plugin;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== element || $[11] !== path || $[12] !== plugin.key || $[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ React.createElement(ElementProvider, {
+			element,
+			entry: t1,
+			path,
+			scope: plugin.key
+		}, t2);
+		$[10] = element;
+		$[11] = path;
+		$[12] = plugin.key;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+}
+function useFastInjectedAttributes({ attributes, editor, element, path, readOnly }) {
+	if (editor.meta.pluginCache.inject.nodeProps.length === 0) return attributes;
+	return pipeInjectNodeProps(editor, {
+		attributes,
+		element
+	}, (node) => node === element ? path : editor.api.findPath(node), readOnly).attributes;
+}
+function FastElementBody(t0) {
+	const $ = c(16);
+	const { attributes, children, editor, element, path, plugin } = t0;
+	const readOnly = useReadOnly();
+	let t1;
+	if ($[0] !== attributes || $[1] !== editor || $[2] !== element || $[3] !== path || $[4] !== readOnly) {
+		t1 = {
+			attributes,
+			editor,
+			element,
+			path,
+			readOnly
+		};
+		$[0] = attributes;
+		$[1] = editor;
+		$[2] = element;
+		$[3] = path;
+		$[4] = readOnly;
+		$[5] = t1;
+	} else t1 = $[5];
+	const injectedAttributes = useFastInjectedAttributes(t1);
+	const t2 = plugin.render?.as;
+	let t3;
+	if ($[6] !== children || $[7] !== editor || $[8] !== element || $[9] !== injectedAttributes || $[10] !== path || $[11] !== plugin || $[12] !== t2) {
+		t3 = {
+			as: t2,
+			attributes: injectedAttributes,
+			children,
+			editor,
+			element,
+			path,
+			plugin
+		};
+		$[6] = children;
+		$[7] = editor;
+		$[8] = element;
+		$[9] = injectedAttributes;
+		$[10] = path;
+		$[11] = plugin;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	const t4 = t3;
+	let t5;
+	if ($[14] !== t4) {
+		t5 = /* @__PURE__ */ React.createElement(PlateElement, t4);
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+function FastIntrinsicElement(t0) {
+	const $ = c(20);
+	const { attributes, blockId, children, editor, element, isVoidTag, plugin, renderBelowNodes, tag: Tag } = t0;
+	const path = useNodePath(element);
+	let t1;
+	if ($[0] !== element || $[1] !== path) {
+		t1 = [element, path];
+		$[0] = element;
+		$[1] = path;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== Tag || $[4] !== attributes || $[5] !== blockId || $[6] !== children || $[7] !== editor || $[8] !== element || $[9] !== isVoidTag || $[10] !== path || $[11] !== plugin || $[12] !== renderBelowNodes) {
+		t2 = /* @__PURE__ */ React.createElement(FastIntrinsicElementBody, {
+			attributes,
+			blockId,
+			editor,
+			element,
+			isVoidTag,
+			path,
+			plugin,
+			renderBelowNodes,
+			tag: Tag
+		}, children);
+		$[3] = Tag;
+		$[4] = attributes;
+		$[5] = blockId;
+		$[6] = children;
+		$[7] = editor;
+		$[8] = element;
+		$[9] = isVoidTag;
+		$[10] = path;
+		$[11] = plugin;
+		$[12] = renderBelowNodes;
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] !== element || $[15] !== path || $[16] !== plugin.key || $[17] !== t1 || $[18] !== t2) {
+		t3 = /* @__PURE__ */ React.createElement(ElementProvider, {
+			element,
+			entry: t1,
+			path,
+			scope: plugin.key
+		}, t2);
+		$[14] = element;
+		$[15] = path;
+		$[16] = plugin.key;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+	} else t3 = $[19];
+	return t3;
+}
+function FastIntrinsicElementBody(t0) {
+	const $ = c(27);
+	const { attributes, blockId, children, editor, element, isVoidTag, path, plugin, renderBelowNodes, tag: Tag } = t0;
+	const readOnly = useReadOnly();
+	let t1;
+	if ($[0] !== attributes || $[1] !== editor || $[2] !== element || $[3] !== path || $[4] !== readOnly) {
+		t1 = {
+			attributes,
+			editor,
+			element,
+			path,
+			readOnly
+		};
+		$[0] = attributes;
+		$[1] = editor;
+		$[2] = element;
+		$[3] = path;
+		$[4] = readOnly;
+		$[5] = t1;
+	} else t1 = $[5];
+	const injectedAttributes = useFastInjectedAttributes(t1);
+	const ref = useBlockIdAttributeRef(blockId, injectedAttributes.ref);
+	let elementChildren;
+	if ($[6] !== attributes || $[7] !== children || $[8] !== editor || $[9] !== element || $[10] !== path || $[11] !== plugin || $[12] !== readOnly || $[13] !== renderBelowNodes) {
+		elementChildren = children;
+		if (renderBelowNodes) {
+			const nodeProps = {
+				attributes,
+				children,
+				editor,
+				element,
+				path,
+				plugin
+			};
+			editor.meta.pluginCache.render.belowNodes.forEach((key) => {
+				const wrapperPlugin = editor.getPlugin({ key });
+				if (isEditOnly(readOnly, wrapperPlugin, "render")) return;
+				const hoc = wrapperPlugin.render.belowNodes({
+					...nodeProps,
+					key
+				});
+				if (hoc) elementChildren = hoc({
+					...nodeProps,
+					children: elementChildren
+				});
+			});
+		}
+		$[6] = attributes;
+		$[7] = children;
+		$[8] = editor;
+		$[9] = element;
+		$[10] = path;
+		$[11] = plugin;
+		$[12] = readOnly;
+		$[13] = renderBelowNodes;
+		$[14] = elementChildren;
+	} else elementChildren = $[14];
+	const t2 = injectedAttributes["data-slate-inline"];
+	let t3;
+	if ($[15] !== injectedAttributes.style) {
+		t3 = {
+			position: "relative",
+			...injectedAttributes.style
+		};
+		$[15] = injectedAttributes.style;
+		$[16] = t3;
+	} else t3 = $[16];
+	const t4 = t3;
+	let t5;
+	if ($[17] !== injectedAttributes || $[18] !== ref || $[19] !== t2 || $[20] !== t4) {
+		t5 = {
+			"data-slate-inline": t2,
+			"data-slate-node": "element",
+			...injectedAttributes,
+			ref,
+			style: t4
+		};
+		$[17] = injectedAttributes;
+		$[18] = ref;
+		$[19] = t2;
+		$[20] = t4;
+		$[21] = t5;
+	} else t5 = $[21];
+	const fastElementProps = t5;
+	let t6;
+	if ($[22] !== Tag || $[23] !== elementChildren || $[24] !== fastElementProps || $[25] !== isVoidTag) {
+		t6 = isVoidTag ? /* @__PURE__ */ React.createElement("div", fastElementProps, /* @__PURE__ */ React.createElement(Tag, { contentEditable: false }), elementChildren) : /* @__PURE__ */ React.createElement(Tag, fastElementProps, elementChildren);
+		$[22] = Tag;
+		$[23] = elementChildren;
+		$[24] = fastElementProps;
+		$[25] = isVoidTag;
+		$[26] = t6;
+	} else t6 = $[26];
+	return t6;
+}
+function PluginElementWithPath(t0) {
+	const $ = c(5);
+	const { editor, plugin, props } = t0;
+	const path = useNodePath(props.element);
+	let t1;
+	if ($[0] !== editor || $[1] !== path || $[2] !== plugin || $[3] !== props) {
+		t1 = pluginRenderElement(editor, plugin)({
 			...props,
 			path
 		});
-		if (renderElementProp) return renderElementProp({
+		$[0] = editor;
+		$[1] = path;
+		$[2] = plugin;
+		$[3] = props;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+function RenderElementPropWithPath(t0) {
+	const $ = c(4);
+	const { props, renderElementProp } = t0;
+	const path = useNodePath(props.element);
+	let t1;
+	if ($[0] !== path || $[1] !== props || $[2] !== renderElementProp) {
+		t1 = renderElementProp({
 			...props,
 			path
 		});
-		const ctxProps = getRenderNodeProps({
+		$[0] = path;
+		$[1] = props;
+		$[2] = renderElementProp;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+function DefaultElementWithPath(t0) {
+	const $ = c(20);
+	const { editor, props } = t0;
+	const readOnly = useReadOnly();
+	const path = useNodePath(props.element);
+	let t1;
+	if ($[0] !== editor || $[1] !== path || $[2] !== props || $[3] !== readOnly) {
+		t1 = getRenderNodeProps({
 			disableInjectNodeProps: true,
 			editor,
 			props: {
@@ -1436,12 +2116,121 @@ const pipeRenderElement = (editor, renderElementProp) => {
 			},
 			readOnly
 		});
-		return /* @__PURE__ */ React.createElement(ElementProvider, {
+		$[0] = editor;
+		$[1] = path;
+		$[2] = props;
+		$[3] = readOnly;
+		$[4] = t1;
+	} else t1 = $[4];
+	const ctxProps = t1;
+	let t2;
+	if ($[5] !== ctxProps.element || $[6] !== path) {
+		t2 = [ctxProps.element, path];
+		$[5] = ctxProps.element;
+		$[6] = path;
+		$[7] = t2;
+	} else t2 = $[7];
+	const t3 = ctxProps.element.type ?? "default";
+	let t4;
+	if ($[8] !== ctxProps) {
+		t4 = /* @__PURE__ */ React.createElement(BelowRootNodes, ctxProps);
+		$[8] = ctxProps;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== ctxProps || $[11] !== props.children || $[12] !== t4) {
+		t5 = /* @__PURE__ */ React.createElement(PlateElement, ctxProps, props.children, t4);
+		$[10] = ctxProps;
+		$[11] = props.children;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== ctxProps.element || $[15] !== path || $[16] !== t2 || $[17] !== t3 || $[18] !== t5) {
+		t6 = /* @__PURE__ */ React.createElement(ElementProvider, {
 			element: ctxProps.element,
-			entry: [ctxProps.element, path],
+			entry: t2,
 			path,
-			scope: ctxProps.element.type ?? "default"
-		}, /* @__PURE__ */ React.createElement(PlateElement, ctxProps, props.children, /* @__PURE__ */ React.createElement(BelowRootNodes, ctxProps)));
+			scope: t3
+		}, t5);
+		$[14] = ctxProps.element;
+		$[15] = path;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
+}
+/** @see {@link RenderElement} */
+const pipeRenderElement = (editor, renderElementProp) => {
+	const hasAboveNodes = editor.meta.pluginCache.render.aboveNodes.length > 0;
+	const hasBelowRootNodes = editor.meta.pluginCache.render.belowRootNodes.length > 0;
+	return function render(props) {
+		const plugin = getPluginByType(editor, props.element.type);
+		if (plugin?.node.isElement) {
+			if (!hasAboveNodes && !hasBelowRootNodes && !plugin.render.node && !plugin.node.props && !plugin.node.dangerouslyAllowAttributes?.length) {
+				const readOnly = editor.dom.readOnly;
+				if (isEditOnly(readOnly, plugin, "render")) return null;
+				const blockId = props.element.id && editor.api.isBlock(props.element) ? props.element.id : void 0;
+				const inset = plugin.rules.selection?.affinity === "directional";
+				const attributes = {
+					...props.attributes,
+					className: [getSlateClass(plugin.node.type), props.attributes?.className].filter(Boolean).join(" ") || void 0
+				};
+				const renderAs = plugin.render?.as ?? "div";
+				const isIntrinsicTag = typeof renderAs === "string";
+				const Tag = renderAs;
+				const isVoidTag = isIntrinsicTag && isHtmlVoidElementTag(Tag);
+				const hasBelowNodeWrappers = editor.meta.pluginCache.render.belowNodes.some((key) => {
+					return !isEditOnly(readOnly, editor.getPlugin({ key }), "render");
+				});
+				if (!inset && !hasBelowNodeWrappers && isIntrinsicTag) return /* @__PURE__ */ React.createElement(FastIntrinsicElement, {
+					attributes,
+					blockId,
+					editor,
+					element: props.element,
+					isVoidTag,
+					plugin,
+					renderBelowNodes: false,
+					tag: Tag
+				}, props.children);
+				if (!inset && hasBelowNodeWrappers && isIntrinsicTag) return /* @__PURE__ */ React.createElement(FastIntrinsicElement, {
+					attributes,
+					blockId,
+					editor,
+					element: props.element,
+					isVoidTag,
+					plugin,
+					renderBelowNodes: true,
+					tag: Tag
+				}, props.children);
+				if (!hasBelowNodeWrappers && isIntrinsicTag) return /* @__PURE__ */ React.createElement(FastElementWithPath, {
+					attributes,
+					editor,
+					element: props.element,
+					plugin
+				}, props.children);
+				return /* @__PURE__ */ React.createElement(PluginElementWithPath, {
+					editor,
+					plugin,
+					props
+				});
+			}
+			return /* @__PURE__ */ React.createElement(PluginElementWithPath, {
+				editor,
+				plugin,
+				props
+			});
+		}
+		if (renderElementProp) return /* @__PURE__ */ React.createElement(RenderElementPropWithPath, {
+			props,
+			renderElementProp
+		});
+		return /* @__PURE__ */ React.createElement(DefaultElementWithPath, {
+			editor,
+			props
+		});
 	};
 };
 
@@ -1780,7 +2569,7 @@ const useElement = (t0) => {
 	const $ = c(1);
 	const pluginKey = t0 === void 0 ? SCOPE_ELEMENT : t0;
 	const editor = useEditorRef();
-	const value = useAtomStoreValue(useElementStore(pluginKey), "element");
+	const value = useElementContext(pluginKey)?.element;
 	if (!value) {
 		editor.api.debug.warn(`useElement(${pluginKey}) hook must be used inside the node component's context`, "USE_ELEMENT_CONTEXT");
 		let t1;
@@ -1796,8 +2585,62 @@ const useElement = (t0) => {
 //#endregion
 //#region src/react/stores/element/useElementSelector.ts
 const useElementSelector = (selector, deps, { key, equalityFn = (a, b) => a === b } = {}) => {
-	const selectorAtom = React.useMemo(() => selectAtom(elementStore.atom.entry, (entry, prev) => selector(entry, prev), equalityFn), deps);
-	return useStoreAtomValue$1(useElementStore(key), selectorAtom);
+	const context = useElementStoreContext(key);
+	const [memoizedSelector, memoizedEqualityFn] = React.useMemo(() => [selector, equalityFn], deps);
+	const cacheRef = React.useRef({
+		entry: null,
+		hasValue: false,
+		runtime: null,
+		selector: null,
+		value: void 0
+	});
+	const subscribe = React.useCallback((onStoreChange) => context?.runtime.subscribe(onStoreChange) ?? (() => {}), [context]);
+	const getSnapshot = React.useCallback(() => {
+		const runtime = context?.runtime ?? null;
+		const cache = cacheRef.current;
+		if (cache.runtime !== runtime || cache.selector !== memoizedSelector) {
+			cache.entry = null;
+			cache.hasValue = false;
+			cache.runtime = runtime;
+			cache.selector = memoizedSelector;
+			cache.value = void 0;
+		}
+		const entry = runtime?.getState().entry ?? null;
+		if (cache.entry === entry && cache.hasValue) return cache.value;
+		if (!entry) {
+			cache.entry = null;
+			cache.hasValue = false;
+			cache.value = void 0;
+			return;
+		}
+		const nextValue = memoizedSelector(entry, cache.hasValue ? cache.value : void 0);
+		if (cache.hasValue && memoizedEqualityFn(cache.value, nextValue)) {
+			cache.entry = entry;
+			return cache.value;
+		}
+		cache.entry = entry;
+		cache.hasValue = true;
+		cache.value = nextValue;
+		return nextValue;
+	}, [
+		context,
+		memoizedEqualityFn,
+		memoizedSelector
+	]);
+	return React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
+
+//#endregion
+//#region src/react/stores/element/usePath.ts
+/** Get the memoized path of the closest element. */
+const usePath = (pluginKey) => {
+	const editor = useEditorRef();
+	const value = useElementContext(pluginKey)?.path;
+	if (!value) {
+		editor.api.debug.warn(`usePath(${pluginKey}) hook must be used inside the node component's context`, "USE_ELEMENT_CONTEXT");
+		return;
+	}
+	return value;
 };
 
 //#endregion
@@ -2621,4 +3464,4 @@ const withHOC = (HOC, Component, hocProps, hocRef) => React.forwardRef((props, c
 });
 
 //#endregion
-export { BLUR_EDITOR_EVENT, BelowRootNodes, ContentVisibilityChunk, DOM_HANDLERS, DefaultPlaceholder, Editable, EditorHotkeysEffect, EditorMethodsEffect, EditorRefEffect, EditorRefPluginEffect, ElementProvider, EventEditorPlugin, EventEditorStore, FOCUS_EDITOR_EVENT, GLOBAL_PLATE_SCOPE, NavigationFeedbackPlugin, PLATE_SCOPE, ParagraphPlugin, Plate, PlateContainer, PlateContent, PlateController, PlateControllerEffect, PlateElement, PlateLeaf, PlateSlate, PlateStoreProvider, PlateTest, PlateText, PlateView, ReactPlugin, SCOPE_ELEMENT, Slate, SlateReactExtensionPlugin, atom, convertDomEventToSyntheticEvent, createAtomStore, createPlateEditor, createPlateFallbackEditor, createPlatePlugin, createPlateStore, createTPlatePlugin, createZustandStore, elementStore, getEditorPlugin, getEventPlateId, getPlateCorePlugins, getPlugin, getRenderNodeProps, isEventHandled, omitPluginContext, pipeHandler, pipeOnChange, pipeRenderElement, pipeRenderLeaf, pipeRenderText, plateControllerStore, plateStore, pluginRenderElement, pluginRenderLeaf, pluginRenderText, toPlatePlugin, toTPlatePlugin, useComposing, useEditableProps, useEditorComposing, useEditorContainerRef, useEditorId, useEditorMounted, useEditorPlugin, useEditorPluginOption, useEditorPluginOptions, useEditorReadOnly, useEditorRef, useEditorScrollRef, useEditorSelection, useEditorSelector, useEditorState, useEditorValue, useEditorVersion, useElement, useElementSelector, useElementStore, useEventEditorValue, useEventPlateId, useFocusEditorEvents, useFocused, useFocusedLast, useIncrementVersion, useNavigationHighlight, useNodeAttributes, useNodePath, usePath, usePlateControllerExists, usePlateControllerLocalStore, usePlateControllerStore, usePlateEditor, usePlateLocalStore, usePlateSet, usePlateState, usePlateStore, usePlateValue, usePlateViewEditor, usePluginOption, usePluginOptions, useReadOnly, useRedecorate, useScrollRef, useSelected, useSelectionVersion, useSlateProps, useSlateStatic, useStoreAtomState, useStoreAtomValue, useStoreSelect, useStoreSetAtom, useStoreState, useStoreValue, useTracked, useTrackedStore, useValueVersion, withHOC, withPlate, withPlateReact, withReact };
+export { BLUR_EDITOR_EVENT, BelowRootNodes, ContentVisibilityChunk, DOM_HANDLERS, DefaultPlaceholder, Editable, EditorHotkeysEffect, EditorMethodsEffect, EditorRefEffect, EditorRefPluginEffect, ElementProvider, EventEditorPlugin, EventEditorStore, FOCUS_EDITOR_EVENT, FirstBlockEffect, GLOBAL_PLATE_SCOPE, NavigationFeedbackPlugin, PLATE_SCOPE, ParagraphPlugin, Plate, PlateContainer, PlateContent, PlateController, PlateControllerEffect, PlateElement, PlateLeaf, PlateSlate, PlateStoreProvider, PlateTest, PlateText, PlateView, ReactPlugin, SCOPE_ELEMENT, Slate, SlateReactExtensionPlugin, atom, convertDomEventToSyntheticEvent, createAtomStore, createPlateEditor, createPlateFallbackEditor, createPlatePlugin, createPlateStore, createTPlatePlugin, createZustandStore, elementStore, getEditorPlugin, getEventPlateId, getPlateCorePlugins, getPlugin, getRenderNodeProps, isEventHandled, isHtmlVoidElementTag, omitPluginContext, pipeHandler, pipeOnChange, pipeRenderElement, pipeRenderLeaf, pipeRenderText, plateControllerStore, plateStore, pluginRenderElement, pluginRenderLeaf, pluginRenderText, toPlatePlugin, toTPlatePlugin, useBlockIdAttributeRef, useComposing, useEditableProps, useEditorComposing, useEditorContainerRef, useEditorId, useEditorMounted, useEditorPlugin, useEditorPluginOption, useEditorPluginOptions, useEditorReadOnly, useEditorRef, useEditorScrollRef, useEditorSelection, useEditorSelector, useEditorState, useEditorValue, useEditorVersion, useElement, useElementContext, useElementSelector, useElementStore, useElementStoreContext, useEventEditorValue, useEventPlateId, useFocusEditorEvents, useFocused, useFocusedLast, useIncrementVersion, useNavigationHighlight, useNodeAttributes, useNodePath, usePath, usePlateControllerExists, usePlateControllerLocalStore, usePlateControllerStore, usePlateEditor, usePlateLocalStore, usePlateSet, usePlateState, usePlateStore, usePlateValue, usePlateViewEditor, usePluginOption, usePluginOptions, useReadOnly, useRedecorate, useScrollRef, useSelected, useSelectionVersion, useSlateProps, useSlateStatic, useStoreAtomState, useStoreAtomValue, useStoreSelect, useStoreSetAtom, useStoreState, useStoreValue, useTracked, useTrackedStore, useValueVersion, withElementContext, withHOC, withPlate, withPlateReact, withReact };