slate-vue3 0.0.25 → 0.0.26

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,277 +1,277 @@
-[<img src="https://github.com/Guan-Erjia/slate-vue3/blob/master/public/banner.png" />](https://github.com/ianstormtaylor/slate)
-
-<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/">vue3</a>
-</p>
-
-<p align="center">
-  <a href="https://unpkg.com/slate-vue3/dist/index.js">
-    <img src="http://img.badgesize.io/https://unpkg.com/slate-vue3/dist/index.js?compression=gzip&amp;label=size">
-  </a>
-  <a href="https://join.slack.com/t/slate-js/shared_invite/zt-f8t986ip-7dA1DyiqPpzootz1snKXkw">
-    <img src="https://img.shields.io/badge/slack-slate--js-brightgreen.svg?logo=slack">
-  </a>
-  <a href="./packages/slate-vue3/package.json">
-    <img src="https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=version&colorB=007ec6">
-  </a>
-</p>
-<br/>
-
-
-# Why use it?
-1. :sparkles: Highly customizable features, use slate core at the bottom level  
-2. :zap: The latest version of the core, use vue to reduce the number of re-renderings  
-3. :coffee: This library provides the same usage as slate-react, design tends to be stable
-4. :point_right: Check out the [**live demo**](https://guan-erjia.github.io/slate-vue3/) of all of the examples
-
-# How to use?
-
-## 1. Install slate-vue3
-```sh
-npm install slate-vue3
-```
-## 2. Now, you can use it in vue-sfc :point_right: [**live demo**](https://guan-erjia.github.io/slate-vue3/)
-```vue
-<script setup lang="ts">
-import { withDOM, Slate, Editable, defaultRenderLeaf, defaultRenderPlaceHolder, createEditor, withHistory } from "slate-vue3"
-import { h } from "vue"
-
-const initialValue = [
-  {
-    type: "paragraph",
-    children: [{ text: "Let's start"}]
-  }
-]
-const renderElement = ({ attributes, children }) => h("p", attributes, children)
-const editor = withHistory(withDOM(createEditor(initialValue)))
-</script>
-
-<template>
-  <Slate :editor="editor" :render-element="renderElement" :render-leaf="defaultRenderLeaf"
-    :render-placeholder="defaultRenderPlaceHolder">
-    <Editable />
-  </Slate>
-</template>
-```
-
-# Component Props
-## Slate
-### editor
-> slate-editor instance, add DOM specific behaviors to the editor
-```typescript
-const initialValue: Descendant[] = [{
-  type: 'paragraph',
-  children: [ { text: 'This is editable plain text, just like a <textarea>!' } ]
-}]
-const editor: DOMEditor = withDOM(createEditor(initialValue))
-```
-
-### decorate
-> another type of text-level formatting, split text into leaves
-```typescript
-function (entry: NodeEntry) => DecoratedRange[]
-```
-
-### renderElement
-> a function used to render a custom component for a specific type of Element node in the Slate.js document model
-```typescript
-export interface RenderElementProps {
-  children: VNode
-  element: Element
-  attributes: HTMLAttributes & {
-    "data-slate-node": "element"
-    "data-slate-inline"?: true
-    "data-slate-void"?: true
-    dir?: "rtl"
-    ref: any
-  };
-}
-
-function renderElement (props: RenderElementProps) => VNode
-```
-
-### renderLeaf
-> customize the rendering of leaf nodes in the document tree of your Slate editor
-```typescript
-export interface RenderLeafProps {
-  children: VNode
-  leaf: Text
-  text: Text
-  attributes: HTMLAttributes & {
-    "data-slate-leaf": true
-  };
-}
-```
-
-### renderPlaceholder
-> customize how the placeholder of the Slate.js Editable component is rendered when the editor is empty
-```typescript
-export interface RenderPlaceholderProps {
-  children?: string
-  attributes: HTMLAttributes & VNodeProps & {
-    "data-slate-placeholder": boolean
-    dir?: "rtl"
-  };
-}
-```
-
-## Editable
-> customize style of editablearea, you can inherient other HTMLAttribute on it
-```typescript
-export interface EditableProps extends HTMLAttributes {
-  role?: string
-  readOnly: boolean
-  placeholder?: string
-  style?: CSSProperties
-  scrollSelectionIntoView: (
-    editor: DOMEditor,
-    domRange: globalThis.Range
-  ) => void
-  is: string
-}
-```
-
-# Component Emits
-
-## onchange
-> any change in slate will trigger it
-```typescript
-const onchange: (event: Descendant[]) => void
-```
-
-## onvaluechange
-> slate children change in slate will trigger it
-```typescript
-const onvaluechange: (event: Descendant[]) => void
-```
-
-## onselectionchange
-> slate selection change in slate will trigger it
-```typescript
-const onselectionchange: (event: Selection) => void
-```
-
-# Hooks in slate-vue3
-
-## [useComposing](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-composing.ts)
-> Get the current composing state of the editor. It deals with compositionstart, compositionupdate, compositionend events
-```typescript
-const useComposing: () => Ref<boolean, boolean>
-
-const composing = useComposing()
-```
-
-## [useFocused](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-focus.ts)
-> Get the current focused state of the editor
-```typescript
-const useFocused: () => Ref<boolean, boolean>
-
-const focused = useFocused()
-```
-
-## [useReadOnly](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-read-only.ts)
-> Get the current readOnly state of the editor
-```typescript
-const useReadOnly: () => Ref<boolean, boolean>
-
-const readonly = useReadOnly()
-```
-
-## [useSelected](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-selected.ts)
-> Get the current selected state of an element
-```typescript
-const useSelected: () => ComputedRef<boolean>
-
-const selected = useSelected()
-```
-
-## [useEditor](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-editor.ts)
-> Get the current editor object from the context. Context whenever changes occur in the editor
-```typescript
-const useEditor: () => DOMEditor
-
-const editor = useEditor()
-```
-
-## [useSelection](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-selection.ts)
-> Get the current editor selection from the context
-
-```typescript
-const useSelection: () => ComputedRef<BaseSelection>
-
-const selection = useSelection()
-```
-
-
-## [useInheritRef](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-inherit-ref.ts)
-> Automatically bind ref to the real node when the component is mounted，This is important when rendering element nodes directly
-```typescript
-const useInheritRef: (attribute: VNodeProps) => VNodeProps & {
-    inheritRef?: VNodeRef
-};
-
-const renderElement = (props: RenderElementProps) => {
-  const { attributes, children, element } = props
-  switch (element.type) {
-    case 'image':
-      return h(ImageComp, { element, ...useInheritRef(attributes) }, () => children)
-    default:
-      return h('p', attributes, children)
-  }
-}
-```
-
-# FAQ
-### 1. Why do I have to pass renderFunction into <Slate /> component ?
-This ensures that your rich text is as expected, and slave-vue3 provides some default rendering functions, you can directly use the default rendering behavior
-
-### 2. Can I use jsx in slate-vue3 ?
-Of coures yes, but we do not recommend it unless you have already configured jsx in the project, as a branch, using the h function directly is already simple enough
-
-### 3. Why do rendering functions not use Vue components ?
-Vue uses lazy updates, rendering with components generates additional state, which can cause unexpected results during updates, it would be better to use functions as branches directly
-
-# Directory Structure
-
-- [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
-- [slate-history](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate-history)
-  Provide undo redo functions, replace Weakmap to UnProxyWeakmap
-- [share-tools](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/share-tools)
-  for special processing of Proxy data, obtain the raw pointer, isPlainObject declare
-
-# Compact 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
-4. packages/slate/src/interfaces/text.ts 116:116
-
-**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/share-tools/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
-
-**other compact**
-
-1. packages/slate/src/core/normalize-node.ts
-2. packages/slate-dom/src/plugin/dom-editor.ts 421:441
+[<img src="https://github.com/Guan-Erjia/slate-vue3/blob/master/public/banner.png" />](https://github.com/ianstormtaylor/slate)
+
+<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/">vue3</a>
+</p>
+
+<p align="center">
+  <a href="https://unpkg.com/slate-vue3/dist/index.js">
+    <img src="http://img.badgesize.io/https://unpkg.com/slate-vue3/dist/index.js?compression=gzip&amp;label=size">
+  </a>
+  <a href="https://join.slack.com/t/slate-js/shared_invite/zt-f8t986ip-7dA1DyiqPpzootz1snKXkw">
+    <img src="https://img.shields.io/badge/slack-slate--js-brightgreen.svg?logo=slack">
+  </a>
+  <a href="./packages/slate-vue3/package.json">
+    <img src="https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=version&colorB=007ec6">
+  </a>
+</p>
+<br/>
+
+
+# Why use it?
+1. :sparkles: Highly customizable features, use slate core at the bottom level  
+2. :zap: The latest version of the core, use vue to reduce the number of re-renderings  
+3. :coffee: This library provides the same usage as slate-react, design tends to be stable
+4. :point_right: Check out the [**live demo**](https://guan-erjia.github.io/slate-vue3/) of all of the examples
+
+# How to use?
+
+## 1. Install slate-vue3
+```sh
+npm install slate-vue3
+```
+## 2. Now, you can use it in vue-sfc :point_right: [**live demo**](https://guan-erjia.github.io/slate-vue3/)
+```vue
+<script setup lang="ts">
+import { withDOM, Slate, Editable, defaultRenderLeaf, defaultRenderPlaceHolder, createEditor, withHistory } from "slate-vue3"
+import { h } from "vue"
+
+const initialValue = [
+  {
+    type: "paragraph",
+    children: [{ text: "Let's start"}]
+  }
+]
+const renderElement = ({ attributes, children }) => h("p", attributes, children)
+const editor = withHistory(withDOM(createEditor(initialValue)))
+</script>
+
+<template>
+  <Slate :editor="editor" :render-element="renderElement" :render-leaf="defaultRenderLeaf"
+    :render-placeholder="defaultRenderPlaceHolder">
+    <Editable />
+  </Slate>
+</template>
+```
+
+# Component Props
+## Slate
+### editor
+> slate-editor instance, add DOM specific behaviors to the editor
+```typescript
+const initialValue: Descendant[] = [{
+  type: 'paragraph',
+  children: [ { text: 'This is editable plain text, just like a <textarea>!' } ]
+}]
+const editor: DOMEditor = withDOM(createEditor(initialValue))
+```
+
+### decorate
+> another type of text-level formatting, split text into leaves
+```typescript
+function (entry: NodeEntry) => DecoratedRange[]
+```
+
+### renderElement
+> a function used to render a custom component for a specific type of Element node in the Slate.js document model
+```typescript
+export interface RenderElementProps {
+  children: VNode
+  element: Element
+  attributes: HTMLAttributes & {
+    "data-slate-node": "element"
+    "data-slate-inline"?: true
+    "data-slate-void"?: true
+    dir?: "rtl"
+    ref: any
+  };
+}
+
+function renderElement (props: RenderElementProps) => VNode
+```
+
+### renderLeaf
+> customize the rendering of leaf nodes in the document tree of your Slate editor
+```typescript
+export interface RenderLeafProps {
+  children: VNode
+  leaf: Text
+  text: Text
+  attributes: HTMLAttributes & {
+    "data-slate-leaf": true
+  };
+}
+```
+
+### renderPlaceholder
+> customize how the placeholder of the Slate.js Editable component is rendered when the editor is empty
+```typescript
+export interface RenderPlaceholderProps {
+  children?: string
+  attributes: HTMLAttributes & VNodeProps & {
+    "data-slate-placeholder": boolean
+    dir?: "rtl"
+  };
+}
+```
+
+## Editable
+> customize style of editablearea, you can inherient other HTMLAttribute on it
+```typescript
+export interface EditableProps extends HTMLAttributes {
+  role?: string
+  readOnly: boolean
+  placeholder?: string
+  style?: CSSProperties
+  scrollSelectionIntoView: (
+    editor: DOMEditor,
+    domRange: globalThis.Range
+  ) => void
+  is: string
+}
+```
+
+# Component Emits
+
+## onchange
+> any change in slate will trigger it
+```typescript
+const onchange: (event: Descendant[]) => void
+```
+
+## onvaluechange
+> slate children change in slate will trigger it
+```typescript
+const onvaluechange: (event: Descendant[]) => void
+```
+
+## onselectionchange
+> slate selection change in slate will trigger it
+```typescript
+const onselectionchange: (event: Selection) => void
+```
+
+# Hooks in slate-vue3
+
+## [useComposing](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-composing.ts)
+> Get the current composing state of the editor. It deals with compositionstart, compositionupdate, compositionend events
+```typescript
+const useComposing: () => Ref<boolean, boolean>
+
+const composing = useComposing()
+```
+
+## [useFocused](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-focus.ts)
+> Get the current focused state of the editor
+```typescript
+const useFocused: () => Ref<boolean, boolean>
+
+const focused = useFocused()
+```
+
+## [useReadOnly](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-read-only.ts)
+> Get the current readOnly state of the editor
+```typescript
+const useReadOnly: () => Ref<boolean, boolean>
+
+const readonly = useReadOnly()
+```
+
+## [useSelected](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-selected.ts)
+> Get the current selected state of an element
+```typescript
+const useSelected: () => ComputedRef<boolean>
+
+const selected = useSelected()
+```
+
+## [useEditor](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-editor.ts)
+> Get the current editor object from the context. Context whenever changes occur in the editor
+```typescript
+const useEditor: () => DOMEditor
+
+const editor = useEditor()
+```
+
+## [useSelection](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-selection.ts)
+> Get the current editor selection from the context
+
+```typescript
+const useSelection: () => ComputedRef<BaseSelection>
+
+const selection = useSelection()
+```
+
+
+## [useInheritRef](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-inherit-ref.ts)
+> Automatically bind ref to the real node when the component is mounted，This is important when rendering element nodes directly
+```typescript
+const useInheritRef: (attribute: VNodeProps) => VNodeProps & {
+    inheritRef?: VNodeRef
+};
+
+const renderElement = (props: RenderElementProps) => {
+  const { attributes, children, element } = props
+  switch (element.type) {
+    case 'image':
+      return h(ImageComp, { element, ...useInheritRef(attributes) }, () => children)
+    default:
+      return h('p', attributes, children)
+  }
+}
+```
+
+# FAQ
+### 1. Why do I have to pass renderFunction into <Slate /> component ?
+This ensures that your rich text is as expected, and slave-vue3 provides some default rendering functions, you can directly use the default rendering behavior
+
+### 2. Can I use jsx in slate-vue3 ?
+Of coures yes, but we do not recommend it unless you have already configured jsx in the project, as a branch, using the h function directly is already simple enough
+
+### 3. Why do rendering functions not use Vue components ?
+Vue uses lazy updates, rendering with components generates additional state, which can cause unexpected results during updates, it would be better to use functions as branches directly
+
+# Directory Structure
+
+- [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
+- [slate-history](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate-history)
+  Provide undo redo functions, replace Weakmap to UnProxyWeakmap
+- [share-tools](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/share-tools)
+  for special processing of Proxy data, obtain the raw pointer, isPlainObject declare
+
+# Compact 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
+4. packages/slate/src/interfaces/text.ts 116:116
+
+**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/share-tools/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
+
+**other compact**
+
+1. packages/slate/src/core/normalize-node.ts
+2. packages/slate-dom/src/plugin/dom-editor.ts 421:441

package/dist/index.d.ts

@@ -506,9 +506,6 @@ export declare type DOMText = globalThis.Text;
 
 export declare const edges: EditorInterface['edges'];
 
-/**
- * Editable.
- */
 export declare const Editable: DefineComponent<    {
 role?: string | undefined;
 readOnly: boolean;

package/dist/index.js

@@ -1792,12 +1792,12 @@ function last$1(array) {
   var length = array == null ? 0 : array.length;
   return length ? array[length - 1] : void 0;
 }
-function parent$1(object, path2) {
+function parent$2(object, path2) {
   return path2.length < 2 ? object : baseGet(object, baseSlice(path2, 0, -1));
 }
 function baseUnset(object, path2) {
   path2 = castPath(path2, object);
-  object = parent$1(object, path2);
+  object = parent$2(object, path2);
   return object == null || delete object[toKey(last$1(path2))];
 }
 function customOmitClone(value) {
@@ -3630,7 +3630,7 @@ const normalize = (editor, options = {}) => {
     }
   });
 };
-const parent = (editor, at, options = {}) => {
+const parent$1 = (editor, at, options = {}) => {
   const path2 = Editor.path(editor, at, options);
   const parentPath = Path.parent(path2);
   const entry = Editor.node(editor, parentPath);
@@ -5106,7 +5106,7 @@ const createEditor = (children) => {
     node: (...args) => node(editor, ...args),
     nodes: (...args) => nodes(editor, ...args),
     normalize: (...args) => normalize(editor, ...args),
-    parent: (...args) => parent(editor, ...args),
+    parent: (...args) => parent$1(editor, ...args),
     path: (...args) => path(editor, ...args),
     pathRef: (...args) => pathRef(editor, ...args),
     pathRefs: (...args) => pathRefs(editor, ...args),
@@ -5148,7 +5148,7 @@ const isDOMElement = (value) => {
 };
 const isDOMNode = (value) => {
   const window2 = getDefaultView(value);
-  return !!window2 && value instanceof window2.Node;
+  return !!window2 && (value instanceof window2.Node || value instanceof globalThis.Node);
 };
 const isDOMSelection = (value) => {
   const window2 = value && value.anchorNode && getDefaultView(value.anchorNode);
@@ -7385,9 +7385,9 @@ const useEditor = () => {
 };
 const StringComp = defineComponent({
   name: "slate-string",
-  props: ["isLast", "leaf", "parent", "text"],
+  props: ["isLast", "leaf", "element", "text"],
   setup(props) {
-    const { isLast, leaf: leaf2, parent: parent2, text } = props;
+    const { isLast, leaf: leaf2, element, text } = props;
     const editor = useEditor();
     const getTextContent = computed(() => {
       const text2 = leaf2.text;
@@ -7395,12 +7395,12 @@ const StringComp = defineComponent({
     });
     const isLineBreak = 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.text === "" && element.children[element.children.length - 1] === text && !editor.isInline(element) && Editor.string(editor, pathParent) === "";
     });
     const zeroStringAttrs = computed(() => {
-      const length = Node.string(parent2).length || 0;
+      const length = Node.string(element).length || 0;
       const isMarkPlaceholder = Boolean(leaf2[MARK_PLACEHOLDER_SYMBOL]) || false;
-      const isVoidParent = editor.isVoid(parent2);
+      const isVoidParent = editor.isVoid(element);
       if (isVoidParent || isLineBreak.value || leaf2.text === "") {
         return {
           "data-slate-zero-width": isLineBreak.value ? "n" : "z",
@@ -7474,9 +7474,9 @@ const useParentDescoration = () => {
 };
 const TextComp = defineComponent({
   name: "slate-text",
-  props: ["text", "parent"],
+  props: ["text", "element"],
   setup(props) {
-    const { text, parent: parent2 } = props;
+    const { text, element } = props;
     const editor = useEditor();
     const spanRef = ref();
     const decorate = useDecorate();
@@ -7509,7 +7509,8 @@ const TextComp = defineComponent({
       decorations.value.forEach((dec) => {
         ds.push(Range.intersection(dec, range2));
       });
-      return Text.decorations(text, ds.filter(Boolean).length ? ds : []);
+      const filterDs = ds.filter(Boolean);
+      return Text.decorations(text, filterDs.length ? filterDs : []);
     });
     onMounted(() => {
       const key = DOMEditor.findKey(editor, text);
@@ -7530,9 +7531,9 @@ const TextComp = defineComponent({
       }
     });
     const isLastText = 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;
+      const isVoid = Editor.isVoid(editor, element);
+      const isLeafBlock = Element.isElement(parent) && !editor.isInline(parent) && Editor.hasInlines(editor, parent);
+      return !isVoid && isLeafBlock && NODE_TO_INDEX.get(text) === element.children.length - 1;
     });
     const renderLeaf = useRenderLeaf();
     return () => h(
@@ -7547,7 +7548,7 @@ const TextComp = defineComponent({
           children: h(StringComp, {
             isLast: isLastText.value && i === leaves.value.length - 1,
             leaf: leaf2,
-            parent: parent2,
+            element,
             text,
             key: `${text.text}-${leaf2.text}-${i}`
           })
@@ -7648,7 +7649,7 @@ const ElementComp = defineComponent({
               position: "absolute"
             }
           },
-          h(TextComp, { parent: element, text })
+          h(TextComp, { element, text })
         );
       }
       return h(Fragment, ChildrenFC(element, editor));
@@ -7677,7 +7678,7 @@ const ChildrenFC = (element, editor) => renderList(element.children, (child, i)
   const key = DOMEditor.findKey(editor, child);
   NODE_TO_INDEX.set(child, i);
   NODE_TO_PARENT.set(child, element);
-  return Element.isElement(child) ? h(ElementComp, { element: child, key: key.id }) : h(TextComp, { text: child, parent: element, key: key.id });
+  return Element.isElement(child) ? h(ElementComp, { element: child, key: key.id }) : h(TextComp, { text: child, element, key: key.id });
 });
 const MUTATION_OBSERVER_CONFIG = {
   subtree: true,
@@ -9263,7 +9264,7 @@ export {
   normalizePoint,
   normalizeRange,
   normalizeStringDiff,
-  parent,
+  parent$1 as parent,
   path,
   pathRef,
   pathRefs,

package/package.json

@@ -1,68 +1,71 @@
-{
-  "name": "slate-vue3",
-  "version": "0.0.25",
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "description": "slate-react library implemented with vue3",
-  "license": "MIT",
-  "files": [
-    "dist/"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "build-all": "vite build --mode=lib",
-    "e2e": "playwright test",
-    "e2e-ui": "playwright test --ui",
-    "test": "vitest"
-  },
-  "dependencies": {
-    "direction": "^2.0.1",
-    "is-hotkey": "^0.2.0",
-    "lodash-es": "^4.17.21",
-    "scroll-into-view-if-needed": "^3.1.0"
-  },
-  "peerDependencies": {
-    "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@faker-js/faker": "^9.4.0",
-    "@playwright/test": "^1.50.1",
-    "@testing-library/vue": "^8.1.0",
-    "@types/is-hotkey": "^0.1.10",
-    "@types/is-url": "^1.2.32",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.13.1",
-    "@types/prismjs": "^1.26.5",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "image-extensions": "^1.1.0",
-    "is-url": "^1.2.4",
-    "jsdom": "^26.0.0",
-    "prismjs": "^1.29.0",
-    "slate-hyperscript": "^0.100.0",
-    "typescript": "~5.7.2",
-    "vite": "^6.2.0",
-    "vite-plugin-dts": "^4.5.0",
-    "vitest": "^3.0.5",
-    "vue-router": "^4.5.0"
-  },
-  "keywords": [
-    "slate-vue3",
-    "slate-vue",
-    "slate",
-    "editor",
-    "contenteditable",
-    "richtext",
-    "rich",
-    "editable",
-    "markdown",
-    "html"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Guan-Erjia/slate-vue3.git"
-  }
-}
+{
+  "name": "slate-vue3",
+  "version": "0.0.26",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "description": "slate-react library implemented with vue3",
+  "license": "MIT",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "build-all": "vite build --mode=lib",
+    "e2e": "playwright test",
+    "e2e-ui": "playwright test --ui",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "direction": "^2.0.1",
+    "is-hotkey": "^0.2.0",
+    "lodash-es": "^4.17.21",
+    "scroll-into-view-if-needed": "^3.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^9.4.0",
+    "@playwright/test": "^1.50.1",
+    "@testing-library/vue": "^8.1.0",
+    "@types/is-hotkey": "^0.1.10",
+    "@types/is-url": "^1.2.32",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.13.1",
+    "@types/prismjs": "^1.26.5",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "image-extensions": "^1.1.0",
+    "is-url": "^1.2.4",
+    "jsdom": "^26.0.0",
+    "prismjs": "^1.29.0",
+    "slate-hyperscript": "^0.100.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.0.5",
+    "vue-router": "^4.5.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Guan-Erjia/slate-vue3.git"
+  },
+  "keywords": [
+    "slate-vue3",
+    "slate-vue",
+    "slate",
+    "editor",
+    "contenteditable",
+    "richtext",
+    "rich",
+    "editable",
+    "markdown",
+    "html"
+  ]
+}