slate-vue3 0.0.3 → 0.0.4

package/License.md

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

package/README.md

@@ -1,108 +1,108 @@
-[<img src="https://raw.githubusercontent.com/ianstormtaylor/slate/main/docs/images/banner.png" />](https://github.com/ianstormtaylor/slate/raw/main/docs/images/banner.png)
-
-<p align="center">
-  slate-<a style="color: #087ea4" href="https://react.dev/">react</a> library implemented with <a style="color: #42b883" href="https://vuejs.org/">vue</a>
-</p>
-<br/>
-
-# Why use it?
-
-1. Use vue internal response implementation to reduce the number of re-renderings
-2. You can easily use vue-devtools to debug in a vue project
-3. This library provides the same usage as slate-react
-
-# Demo
-
-Check out the [**live demo**](https://guan-erjia.github.io/slate-vue3/) of all of the examples
-
-# Hooks
-
-## [useComposing](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-composing.ts)
-
-```
-const useFocused: () => Ref<boolean, boolean>
-```
-
-Get the current composing state of the editor. It deals with compositionstart, compositionupdate, compositionend events.
-
-Composition events are triggered by typing (composing) with a language that uses a composition character (e.g. Chinese, Japanese, Korean, etc.) example.
-Some basic Git commands are:
-
-## [useFocused](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-focus.ts)
-
-```
-const useFocused: () => Ref<boolean, boolean>
-```
-
-Get the current focused state of the editor.
-
-## [useReadOnly](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-read-only.ts)
-
-```
-const useReadOnly: () => Ref<boolean, boolean>
-```
-
-Get the current readOnly state of the editor.
-
-## [useSelected](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-selected.ts)
-
-```
-const useSelected: () => ComputedRef<boolean>
-```
-
-Get the current selected state of an element.
-
-## [useEditor](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-editor.ts)
-
-```
-const useSlate: () => Editor;
-```
-
-Get the current editor object from the React context. Re-renders the context whenever changes occur in the editor.
-
-## [useSelection](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-selection.ts)
-
-```
-const useSelection: () => ComputedRef<boolean>
-```
-
-Get the current editor selection from the React context.
-
-# Packages
-
-**slate's codebase is monorepo managed with pnpm workspace**
-
-- [slate](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate)
-  slate core logic, update synchronously with slate
-- [slate-dom](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate-dom)
-  Implementation of slate on dom, update synchronously with slate-dom
-- [slate-vue](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate-vue)
-  Vue components for rendering slate editors
-- [un-proxy-weakmap](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/un-proxy-weakmap)
-  for special processing of proxy type data, obtain the raw pointer
-
-# compact files of slate
-
-**reactive implement**
-
-1. packages/slate/src/interfaces/text.ts 115:115
-2. packages/slate/src/create-editor.ts 94:94
-3. packages/slate/src/transforms-node/set-nodes.ts 18:18
-
-**remove immer**
-
-1. packages/slate/src/interfaces/node.ts 365:365
-2. packages/slate/src/interfaces/point.ts 103:103
-3. packages/slate/src/interfaces/range.ts 224:224
-4. packages/slate/src/interfaces/transforms/general.ts 322:333
-
-**rewrite implement for WeakMap**
-
-1. packages/un-proxy-weakmap/src/index.ts
-2. packages/slate-dom/src/utils/weak-maps.ts
-
-**import types from globalThis in slate-dom**
-1. packages/slate-dom/src/index.ts
-2. packages/slate-dom/src/plugin/dom-editor.ts
-3. packages/slate-dom/src/utils/dom.ts
-
+[<img src="https://raw.githubusercontent.com/ianstormtaylor/slate/main/docs/images/banner.png" />](https://github.com/ianstormtaylor/slate/raw/main/docs/images/banner.png)
+
+<p align="center">
+  slate-<a style="color: #087ea4" href="https://react.dev/">react</a> library implemented with <a style="color: #42b883" href="https://vuejs.org/">vue</a>
+</p>
+<br/>
+
+# Why use it?
+
+1. Use vue internal response implementation to reduce the number of re-renderings
+2. You can easily use vue-devtools to debug in a vue project
+3. This library provides the same usage as slate-react
+
+# Demo
+
+Check out the [**live demo**](https://guan-erjia.github.io/slate-vue3/) of all of the examples
+
+# Hooks
+
+## [useComposing](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-composing.ts)
+
+```
+const useFocused: () => Ref<boolean, boolean>
+```
+
+Get the current composing state of the editor. It deals with compositionstart, compositionupdate, compositionend events.
+
+Composition events are triggered by typing (composing) with a language that uses a composition character (e.g. Chinese, Japanese, Korean, etc.) example.
+Some basic Git commands are:
+
+## [useFocused](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-focus.ts)
+
+```
+const useFocused: () => Ref<boolean, boolean>
+```
+
+Get the current focused state of the editor.
+
+## [useReadOnly](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-read-only.ts)
+
+```
+const useReadOnly: () => Ref<boolean, boolean>
+```
+
+Get the current readOnly state of the editor.
+
+## [useSelected](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-selected.ts)
+
+```
+const useSelected: () => ComputedRef<boolean>
+```
+
+Get the current selected state of an element.
+
+## [useEditor](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-editor.ts)
+
+```
+const useSlate: () => Editor;
+```
+
+Get the current editor object from the React context. Re-renders the context whenever changes occur in the editor.
+
+## [useSelection](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-selection.ts)
+
+```
+const useSelection: () => ComputedRef<boolean>
+```
+
+Get the current editor selection from the React context.
+
+# Packages
+
+**slate's codebase is monorepo managed with pnpm workspace**
+
+- [slate](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate)
+  slate core logic, update synchronously with slate
+- [slate-dom](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate-dom)
+  Implementation of slate on dom, update synchronously with slate-dom
+- [slate-vue](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate-vue)
+  Vue components for rendering slate editors
+- [share-tools](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/share-tools)
+  for special processing of proxy type data, obtain the raw pointer, isPlainObject declare
+
+# compact files of slate
+
+**reactive implement**
+
+1. packages/slate/src/interfaces/text.ts 115:115
+2. packages/slate/src/create-editor.ts 94:94
+3. packages/slate/src/transforms-node/set-nodes.ts 18:18
+
+**remove immer**
+
+1. packages/slate/src/interfaces/node.ts 365:365
+2. packages/slate/src/interfaces/point.ts 103:103
+3. packages/slate/src/interfaces/range.ts 224:224
+4. packages/slate/src/interfaces/transforms/general.ts 322:333
+
+**rewrite implement for WeakMap**
+
+1. packages/un-proxy-weakmap/src/index.ts
+2. packages/slate-dom/src/utils/weak-maps.ts
+
+**import types from globalThis in slate-dom**
+1. packages/slate-dom/src/index.ts
+2. packages/slate-dom/src/plugin/dom-editor.ts
+3. packages/slate-dom/src/utils/dom.ts
+

package/dist/index.d.ts

@@ -2506,7 +2506,7 @@ editor: DOMEditor;
 decorate: (entry: NodeEntry) => DecoratedRange[];
 renderElement: (props: RenderElementProps) => VNode;
 renderLeaf: (props: RenderLeafProps) => VNode;
-renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element;
+renderPlaceholder: (props: RenderPlaceholderProps) => VNode;
 }, () => VNode<RendererNode, RendererElement, {
 [key: string]: any;
 }>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("change" | "selectionchange" | "valuechange")[], "change" | "selectionchange" | "valuechange", PublicProps, Readonly<{
@@ -2514,7 +2514,7 @@ editor: DOMEditor;
 decorate: (entry: NodeEntry) => DecoratedRange[];
 renderElement: (props: RenderElementProps) => VNode;
 renderLeaf: (props: RenderLeafProps) => VNode;
-renderPlaceholder: (props: RenderPlaceholderProps) => JSX.Element;
+renderPlaceholder: (props: RenderPlaceholderProps) => VNode;
 }> & Readonly<{
 onChange?: ((...args: any[]) => any) | undefined;
 onSelectionchange?: ((...args: any[]) => any) | undefined;

package/dist/slate-vue3.js

@@ -3404,7 +3404,6 @@ if (!!(process.env.NODE_ENV !== "production")) {
 const SLATE_USE_EDITOR = Symbol("SLATE_USE_EDITOR");
 const SLATE_USE_DECORATE = Symbol("SLATE_USE_DECORATE");
 const SLATE_USE_SELECTED = Symbol("SLATE_USE_SELECTED");
-const SLATE_CHANGE_EFFECT_INJECT = Symbol("SLATE_CHANGE_EFFECT_INJECT");
 const SLATE_STATE_FOCUS = Symbol("SLATE_STATE_FOCUS");
 const SLATE_STATE_COMPOSING = Symbol("SLATE_STATE_COMPOSING");
 const SLATE_STATE_READ_ONLY = Symbol("SLATE_STATE_READ_ONLY");
@@ -3413,6 +3412,7 @@ const SLATE_INNER_RENDER_ELEMENT = Symbol("SLATE_INNER_RENDER_ELEMENT");
 const SLATE_INNER_RENDER_LEAF = Symbol("SLATE_INNER_RENDER_LEAF");
 const SLATE_INNER_RENDER_PLACEHOLDER = Symbol("SLATE_INNER_RENDER_PLACEHOLDER");
 const SLATE_INNER_PLACEHOLDER_CONTEXT = Symbol("SLATE_INNER_PLACEHOLDER_CONTEXT");
+const SLATE_INNER_CHANGE_EFFECT_INJECT = Symbol("SLATE_INNER_CHANGE_EFFECT_INJECT");
 const PathRef = {
   transform(ref2, op) {
     const { current, affinity } = ref2;
@@ -10056,24 +10056,21 @@ const Slate = /* @__PURE__ */ defineComponent({
     provide(SLATE_INNER_RENDER_LEAF, renderLeaf);
     provide(SLATE_INNER_RENDER_PLACEHOLDER, renderPlaceholder);
     const isFocus = ref(DOMEditor.isFocused(editor));
-    const isComposing = ref(false);
-    const isReadOnly = ref(false);
     const selection = computed(() => editor.selection);
     provide(SLATE_STATE_FOCUS, isFocus);
-    provide(SLATE_STATE_COMPOSING, isComposing);
-    provide(SLATE_STATE_READ_ONLY, isReadOnly);
+    provide(SLATE_STATE_COMPOSING, ref(false));
+    provide(SLATE_STATE_READ_ONLY, ref(false));
     provide(SLATE_STATE_SELECTION, selection);
     const focusCb = () => isFocus.value = DOMEditor.isFocused(editor);
-    let changeEffect = () => {
-    };
-    provide(SLATE_CHANGE_EFFECT_INJECT, (fn) => changeEffect = fn);
+    const changeEffect = ref(0);
+    provide(SLATE_INNER_CHANGE_EFFECT_INJECT, changeEffect);
     onMounted(() => {
       document.addEventListener("focusin", focusCb);
       document.addEventListener("focusout", focusCb);
       EDITOR_TO_ON_CHANGE.set(editor, (options) => {
         var _a2;
         emit("change", editor.children);
-        changeEffect();
+        changeEffect.value++;
         switch ((_a2 = options == null ? void 0 : options.operation) == null ? void 0 : _a2.type) {
           case "set_selection":
             emit("selectionchange", editor.selection);
@@ -10680,37 +10677,36 @@ const useEditor = () => {
 };
 const StringComp = /* @__PURE__ */ defineComponent({
   name: "slate-string",
-  props: ["leaf", "parent", "text", "isLastIndex"],
+  props: ["isLast", "leaf", "parent", "text"],
   setup(props) {
     const {
-      text,
+      isLast,
       leaf: leaf2,
       parent: parent2,
-      isLastIndex
+      text
     } = props;
     const editor = useEditor();
-    const getTextContent = computed(() => {
-      const isLast = !Editor.isVoid(editor, parent2) && Element.isElement(parent2) && !editor.isInline(parent2) && Editor.hasInlines(editor, parent2) && NODE_TO_INDEX.get(text) === parent2.children.length - 1 && isLastIndex;
-      return (leaf2.text ?? "") + (isLast && leaf2.text.slice(-1) === "\n" ? "\n" : "");
-    });
+    const getTextContent = computed(() => (leaf2.value.text ?? "") + (isLast.value && leaf2.value.text.slice(-1) === "\n" ? "\n" : ""));
     const isVoidParent = computed(() => editor.isVoid(parent2));
     const isInlineBreak = computed(() => {
       const pathParent = Path.parent(DOMEditor.findPath(editor, text));
-      return leaf2.text === "" && parent2.children[parent2.children.length - 1] === text && !editor.isInline(parent2) && Editor.string(editor, pathParent) === "";
+      return leaf2.value.text === "" && parent2.children[parent2.children.length - 1] === text && !editor.isInline(parent2) && Editor.string(editor, pathParent) === "";
     });
     return () => isVoidParent.value ? h(ZeroWidthString, {
       length: Node.string(parent2).length
     }) : isInlineBreak.value ? h(ZeroWidthString, {
       isLineBreak: true,
-      isMarkPlaceholder: Boolean(leaf2[MARK_PLACEHOLDER_SYMBOL])
-    }) : leaf2.text === "" ? h(ZeroWidthString, {
+      isMarkPlaceholder: Boolean(leaf2.value[MARK_PLACEHOLDER_SYMBOL])
+    }) : (
       // COMPAT: If the text is empty, it's because it's on the edge of an inline
       // node, so we render a zero-width space so that the selection can be
       // inserted next to it still.
-      isMarkPlaceholder: Boolean(leaf2[MARK_PLACEHOLDER_SYMBOL])
-    }) : h("span", {
-      "data-slate-string": true
-    }, getTextContent.value);
+      leaf2.value.text === "" ? h(ZeroWidthString, {
+        isMarkPlaceholder: Boolean(leaf2.value[MARK_PLACEHOLDER_SYMBOL])
+      }) : h("span", {
+        "data-slate-string": true
+      }, getTextContent.value)
+    );
   }
 });
 const ZeroWidthString = /* @__PURE__ */ defineComponent({
@@ -10771,6 +10767,18 @@ const usePlaceholderContext = () => {
   }
   return PLACEHOLDER_CONTEXT;
 };
+const useChangeEffect = (fn) => {
+  const CHANGE_EFFECT_INJECT = inject(
+    SLATE_INNER_CHANGE_EFFECT_INJECT
+  );
+  if (CHANGE_EFFECT_INJECT === void 0) {
+    throw new Error(
+      `The \`useChangeEffect\` hook must be used inside the <Slate> component's context.`
+    );
+  }
+  watch(() => CHANGE_EFFECT_INJECT.value, fn);
+  return CHANGE_EFFECT_INJECT;
+};
 const style = {
   position: "absolute",
   top: 0,
@@ -10786,15 +10794,21 @@ const style = {
 };
 const LeafComp = /* @__PURE__ */ defineComponent({
   name: "slate-leaf",
-  props: ["text", "parent", "leaf", "isLastIndex"],
+  props: ["text", "parent", "leaves", "leafIndex"],
   setup(props) {
     const {
       text,
       parent: parent2,
-      leaf: leaf2,
-      isLastIndex
+      leaves,
+      leafIndex
     } = props;
     const editor = useEditor();
+    const leaf2 = computed(() => leaves.value[leafIndex]);
+    const isLast = computed(() => {
+      const isVoid = Editor.isVoid(editor, parent2);
+      const isLeafBlock = Element.isElement(parent2) && !editor.isInline(parent2) && Editor.hasInlines(editor, parent2);
+      return !isVoid && isLeafBlock && NODE_TO_INDEX.get(text) === parent2.children.length - 1 && leafIndex === leaves.value.length - 1;
+    });
     const placeholderResizeObserver = ref(null);
     const placeholderRef = ref(null);
     const placeholderContext = usePlaceholderContext();
@@ -10829,12 +10843,12 @@ const LeafComp = /* @__PURE__ */ defineComponent({
           ref: placeholderRef
         }
       }), h(StringComp, {
+        isLast,
         leaf: leaf2,
         parent: parent2,
-        text,
-        isLastIndex
+        text
       })]),
-      leaf: leaf2,
+      leaf: leaf2.value,
       text
     });
   }
@@ -10859,7 +10873,7 @@ const TextComp = /* @__PURE__ */ defineComponent({
     const editor = useEditor();
     const spanRef = ref();
     const decorate = useDecorate();
-    const parentDecorations = computed(() => {
+    const decorations = computed(() => {
       const path2 = DOMEditor.findPath(editor, props.parent);
       const range2 = Editor.range(editor, path2);
       const ds = decorate([props.parent, path2]);
@@ -10897,7 +10911,7 @@ const TextComp = /* @__PURE__ */ defineComponent({
       const path2 = DOMEditor.findPath(editor, text);
       const range2 = Editor.range(editor, path2);
       const ds = decorate([text, path2]);
-      parentDecorations.value.forEach((dec) => {
+      decorations.value.forEach((dec) => {
         ds.push(Range.intersection(dec, range2));
       });
       return Text.decorations(text, ds.filter(Boolean).length ? ds : []);
@@ -10928,8 +10942,8 @@ const TextComp = /* @__PURE__ */ defineComponent({
       }, leaves.value.map((leaf2, i) => h(LeafComp, {
         text,
         parent: parent2,
-        leaf: leaf2,
-        isLastIndex: i === leaves.value.length - 1,
+        leafIndex: i,
+        leaves,
         key: `${key.id}-${i}-${text.text}`
       })));
     };
@@ -10946,21 +10960,32 @@ const useReadOnly = () => {
 };
 const ElementComp = /* @__PURE__ */ defineComponent({
   name: "slate-element",
-  props: ["element", "childSelection"],
+  props: ["element"],
   setup(props) {
     const {
-      element,
-      childSelection
+      element
     } = props;
     const editor = useEditor();
     const selection = computed(() => {
       const path2 = DOMEditor.findPath(editor, element);
-      const range2 = Editor.range(editor, path2);
-      return childSelection.value && Range.intersection(range2, childSelection.value);
+      const elemList = [[element, path2]];
+      let parent2 = Editor.parent(editor, path2);
+      while (parent2[1].length) {
+        elemList.unshift(parent2);
+        parent2 = Editor.parent(editor, parent2[1]);
+      }
+      let sel = editor.selection;
+      for (const item of elemList) {
+        if (sel) {
+          sel = Range.intersection(Editor.range(editor, item[1]), sel);
+        } else {
+          break;
+        }
+      }
+      return sel;
     });
     const selected = computed(() => !!selection.value);
     provide(SLATE_USE_SELECTED, selected);
-    const readOnly = useReadOnly();
     const elementRef = ref(null);
     onMounted(() => {
       const key = DOMEditor.findKey(editor, element);
@@ -10978,6 +11003,7 @@ const ElementComp = /* @__PURE__ */ defineComponent({
       NODE_TO_ELEMENT.delete(element);
     });
     const isInline = computed(() => editor.isInline(element));
+    const readOnly = useReadOnly();
     const attributes = computed(() => {
       const attr = {
         "data-slate-node": "element",
@@ -11001,61 +11027,54 @@ const ElementComp = /* @__PURE__ */ defineComponent({
       }
       return attr;
     });
-    let children = createVNode(Children, {
-      "node": element,
-      "selection": selection
-    }, null);
-    if (Editor.isVoid(editor, element)) {
-      const Tag = isInline.value ? "span" : "div";
-      const [[text]] = Node.texts(element);
-      children = createVNode(Tag, {
-        "data-slate-spacer": true,
-        "style": {
-          height: "0",
-          color: "transparent",
-          outline: "none",
-          position: "absolute"
-        }
-      }, {
-        default: () => [createVNode(TextComp, {
-          "parent": element,
-          "text": text
-        }, null)]
+    const children = computed(() => {
+      if (Editor.isVoid(editor, element)) {
+        const [[text]] = Node.texts(element);
+        NODE_TO_INDEX.set(text, 0);
+        NODE_TO_PARENT.set(text, element);
+        return h(isInline.value ? "span" : "div", {
+          "data-slate-spacer": true,
+          style: {
+            height: "0",
+            color: "transparent",
+            outline: "none",
+            position: "absolute"
+          }
+        }, h(TextComp, {
+          parent: element,
+          text
+        }));
+      }
+      return h(Children, {
+        node: element
       });
-      NODE_TO_INDEX.set(text, 0);
-      NODE_TO_PARENT.set(text, element);
-    }
+    });
     const renderElement = useRenderElement();
     return () => renderElement({
       attributes: attributes.value,
-      children,
+      children: children.value,
       element
     });
   }
 });
 const Children = /* @__PURE__ */ defineComponent({
   name: "Children",
-  props: ["node", "decorations", "selection"],
+  props: ["node"],
   setup(props) {
-    const {
-      node: node2,
-      selection
-    } = props;
     const editor = useEditor();
     onUpdated(() => {
       IS_NODE_MAP_DIRTY.set(editor, false);
     });
-    return () => node2.children.map((child, i) => {
+    return () => props.node.children.map((child, i) => {
       const key = DOMEditor.findKey(editor, child);
       NODE_TO_INDEX.set(child, i);
-      NODE_TO_PARENT.set(child, node2);
+      NODE_TO_PARENT.set(child, props.node);
       return Element.isElement(child) ? createVNode(ElementComp, {
         "element": child,
-        "childSelection": selection,
         "key": key.id
       }, null) : createVNode(TextComp, {
         "text": child,
-        "parent": node2,
+        "parent": props.node,
         "key": key.id
       }, null);
     });
@@ -11315,7 +11334,6 @@ const Editable = /* @__PURE__ */ defineComponent({
     }
   },
   setup(props) {
-    var _a2;
     const {
       placeholder,
       readOnly,
@@ -11340,8 +11358,8 @@ const Editable = /* @__PURE__ */ defineComponent({
     });
     const placeholderHeight = ref();
     const placeholderContext = computed(() => {
-      var _a3;
-      const showPlaceholder = placeholder && ((_a3 = editor.children) == null ? void 0 : _a3.length) === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === "" && !isComposing.value;
+      var _a2;
+      const showPlaceholder = placeholder && ((_a2 = editor.children) == null ? void 0 : _a2.length) === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === "" && !isComposing.value;
       if (!showPlaceholder) {
         placeholderHeight.value = void 0;
         return null;
@@ -11349,9 +11367,9 @@ const Editable = /* @__PURE__ */ defineComponent({
       return {
         placeholder,
         onPlaceholderResize: (placeholderEl) => {
-          var _a4;
+          var _a3;
           if (placeholderEl && showPlaceholder) {
-            placeholderHeight.value = (_a4 = placeholderEl.getBoundingClientRect()) == null ? void 0 : _a4.height;
+            placeholderHeight.value = (_a3 = placeholderEl.getBoundingClientRect()) == null ? void 0 : _a3.height;
           } else {
             placeholderHeight.value = void 0;
           }
@@ -11460,7 +11478,7 @@ const Editable = /* @__PURE__ */ defineComponent({
       }
     });
     const setDomSelection = (forceChange) => {
-      var _a3;
+      var _a2;
       const root2 = DOMEditor.findDocumentOrShadowRoot(editor);
       const domSelection = getSelection(root2);
       if (!domSelection) {
@@ -11499,7 +11517,7 @@ const Editable = /* @__PURE__ */ defineComponent({
           if (!hasMarkPlaceholder.value) {
             return;
           }
-          if ((_a3 = anchorNode == null ? void 0 : anchorNode.parentElement) == null ? void 0 : _a3.hasAttribute("data-slate-mark-placeholder")) {
+          if ((_a2 = anchorNode == null ? void 0 : anchorNode.parentElement) == null ? void 0 : _a2.hasAttribute("data-slate-mark-placeholder")) {
             return;
           }
         }
@@ -11541,10 +11559,10 @@ const Editable = /* @__PURE__ */ defineComponent({
     };
     const animationFrameId = ref();
     const changeEffect = () => {
-      var _a3, _b2;
+      var _a2, _b2;
       const root2 = DOMEditor.findDocumentOrShadowRoot(editor);
       const domSelection = getSelection(root2);
-      if (!domSelection || !DOMEditor.isFocused(editor) || ((_a3 = androidInputManagerRef.value) == null ? void 0 : _a3.hasPendingAction())) {
+      if (!domSelection || !DOMEditor.isFocused(editor) || ((_a2 = androidInputManagerRef.value) == null ? void 0 : _a2.hasPendingAction())) {
         return;
       }
       if (domSelection.rangeCount <= 1) {
@@ -11567,7 +11585,7 @@ const Editable = /* @__PURE__ */ defineComponent({
         }
       });
     };
-    (_a2 = inject(SLATE_CHANGE_EFFECT_INJECT)) == null ? void 0 : _a2(changeEffect);
+    useChangeEffect(changeEffect);
     onUnmounted(() => {
       animationFrameId.value && cancelAnimationFrame(animationFrameId.value);
       if (timeoutId) {
@@ -11588,7 +11606,7 @@ const Editable = /* @__PURE__ */ defineComponent({
       window2.document.removeEventListener("drop", stoppedDragging);
     });
     const onBeforeinput = (event) => {
-      var _a3, _b2, _c, _d;
+      var _a2, _b2, _c, _d;
       const isInputEvent = event instanceof InputEvent;
       if (!isInputEvent) {
         return;
@@ -11646,7 +11664,7 @@ const Editable = /* @__PURE__ */ defineComponent({
                 anchor
               } = selection;
               const [node2, offset] = DOMEditor.toDOMPoint(editor, anchor);
-              const anchorNode = (_a3 = node2.parentElement) == null ? void 0 : _a3.closest("a");
+              const anchorNode = (_a2 = node2.parentElement) == null ? void 0 : _a2.closest("a");
               const window2 = DOMEditor.getWindow(editor);
               if (native && anchorNode && DOMEditor.hasDOMNode(editor, anchorNode)) {
                 const lastText = window2 == null ? void 0 : window2.document.createTreeWalker(anchorNode, NodeFilter.SHOW_TEXT).lastChild();
@@ -11893,7 +11911,7 @@ const Editable = /* @__PURE__ */ defineComponent({
       }
     };
     const onCompositionend = (event) => {
-      var _a3;
+      var _a2;
       if (DOMEditor.hasSelectableTarget(editor, event.target)) {
         if (DOMEditor.isComposing(editor)) {
           Promise.resolve().then(() => {
@@ -11901,7 +11919,7 @@ const Editable = /* @__PURE__ */ defineComponent({
             IS_COMPOSING.set(editor, false);
           });
         }
-        (_a3 = androidInputManagerRef.value) == null ? void 0 : _a3.handleCompositionEnd(event);
+        (_a2 = androidInputManagerRef.value) == null ? void 0 : _a2.handleCompositionEnd(event);
         if (isEventHandled(event, attributes.onCompositionend) || IS_ANDROID) {
           return;
         }
@@ -11930,9 +11948,9 @@ const Editable = /* @__PURE__ */ defineComponent({
       }
     };
     const onCompositionstart = (event) => {
-      var _a3;
+      var _a2;
       if (DOMEditor.hasSelectableTarget(editor, event.target)) {
-        (_a3 = androidInputManagerRef.value) == null ? void 0 : _a3.handleCompositionStart(event);
+        (_a2 = androidInputManagerRef.value) == null ? void 0 : _a2.handleCompositionStart(event);
         if (isEventHandled(event, attributes.onCompositionstart) || IS_ANDROID) {
           return;
         }
@@ -12034,9 +12052,9 @@ const Editable = /* @__PURE__ */ defineComponent({
       }
     };
     const onKeydown = (event) => {
-      var _a3;
+      var _a2;
       if (!readOnly && DOMEditor.hasEditableTarget(editor, event.target)) {
-        (_a3 = androidInputManagerRef.value) == null ? void 0 : _a3.handleKeyDown(event);
+        (_a2 = androidInputManagerRef.value) == null ? void 0 : _a2.handleKeyDown(event);
         if (DOMEditor.isComposing(editor) && event.isComposing === false) {
           IS_COMPOSING.set(editor, false);
           isComposing.value = false;
@@ -12286,7 +12304,6 @@ const Editable = /* @__PURE__ */ defineComponent({
     const spellcheck = computed(() => HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM ? attributes.spellcheck : false);
     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 editorSelection = computed(() => editor.selection);
     return () => createVNode("div", mergeProps({
       "is": is,
       "role": readOnly ? void 0 : "textbox",
@@ -12317,8 +12334,7 @@ const Editable = /* @__PURE__ */ defineComponent({
       "onKeydown": onKeydown,
       "onPaste": onPaste
     }), [createVNode(Children, {
-      "node": editor,
-      "selection": editorSelection
+      "node": editor
     }, null)]);
   }
 });

package/package.json

@@ -1,77 +1,77 @@
-{
-  "name": "slate-vue3",
-  "version": "0.0.3",
-  "type": "module",
-  "workspaces": [
-    "packages/*"
-  ],
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist/"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "build-all": "vite build --mode=lib"
-  },
-  "dependencies": {
-    "direction": "^2.0.1",
-    "is-hotkey": "^0.2.0",
-    "lodash-es": "^4.17.21",
-    "scroll-into-view-if-needed": "^3.1.0",
-    "slate": "workspace:*",
-    "slate-dom": "workspace:*",
-    "slate-history": "^0.110.3",
-    "slate-hyperscript": "^0.100.0",
-    "slate-vue": "workspace:*",
-    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
-  },
-  "devDependencies": {
-    "@faker-js/faker": "^9.4.0",
-    "@types/is-hotkey": "^0.1.10",
-    "@types/is-url": "^1.2.32",
-    "@types/lodash-es": "^4.17.12",
-    "@types/prismjs": "^1.26.5",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vitejs/plugin-vue-jsx": "^4.1.1",
-    "@vue/tsconfig": "^0.7.0",
-    "image-extensions": "^1.1.0",
-    "is-url": "^1.2.4",
-    "prismjs": "^1.29.0",
-    "typescript": "~5.7.2",
-    "vite": "^6.0.11",
-    "vite-plugin-dts": "^4.5.0",
-    "vue-tsc": "^2.2.0"
-  },
-  "keywords": [
-    "canvas",
-    "contenteditable",
-    "docs",
-    "document",
-    "edit",
-    "editor",
-    "editable",
-    "html",
-    "immutable",
-    "markdown",
-    "medium",
-    "paper",
-    "react",
-    "rich",
-    "richtext",
-    "richtext",
-    "slate",
-    "slate-vue3",
-    "text",
-    "wysiwyg",
-    "wysiwym"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Guan-Erjia/slate-vue3"
-  }
-}
+{
+  "name": "slate-vue3",
+  "version": "0.0.4",
+  "type": "module",
+  "workspaces": [
+    "packages/*"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "build-all": "vite build --mode=lib"
+  },
+  "dependencies": {
+    "direction": "^2.0.1",
+    "is-hotkey": "^0.2.0",
+    "lodash-es": "^4.17.21",
+    "scroll-into-view-if-needed": "^3.1.0",
+    "slate": "workspace:*",
+    "slate-dom": "workspace:*",
+    "slate-history": "^0.110.3",
+    "slate-hyperscript": "^0.100.0",
+    "slate-vue": "workspace:*",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^9.4.0",
+    "@types/is-hotkey": "^0.1.10",
+    "@types/is-url": "^1.2.32",
+    "@types/lodash-es": "^4.17.12",
+    "@types/prismjs": "^1.26.5",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vue/tsconfig": "^0.7.0",
+    "image-extensions": "^1.1.0",
+    "is-url": "^1.2.4",
+    "prismjs": "^1.29.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.11",
+    "vite-plugin-dts": "^4.5.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "keywords": [
+    "canvas",
+    "contenteditable",
+    "docs",
+    "document",
+    "edit",
+    "editor",
+    "editable",
+    "html",
+    "immutable",
+    "markdown",
+    "medium",
+    "paper",
+    "react",
+    "rich",
+    "richtext",
+    "richtext",
+    "slate",
+    "slate-vue3",
+    "text",
+    "wysiwyg",
+    "wysiwym"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Guan-Erjia/slate-vue3"
+  }
+}