slate-vue3 0.3.5 → 0.4.1

package/README.md

@@ -6,7 +6,6 @@
 
 <p align="center">
   <a href="https://www.npmjs.com/package/slate-vue3?activeTab=code">
-    <img src="https://img.shields.io/npm/unpacked-size/slate-vue3">
     <img src="https://img.shields.io/bundlephobia/min/slate-vue3">
   </a>
   <a href="https://join.slack.com/t/slate-js/shared_invite/zt-f8t986ip-7dA1DyiqPpzootz1snKXkw">
@@ -38,13 +37,7 @@ npm install slate-vue3
 
 ```vue
 <script setup lang="ts">
-import { h } from "vue";
-import {
-  Slate,
-  Editable,
-  defaultRenderLeaf,
-  defaultRenderPlaceHolder,
-} from "slate-vue3";
+import { Slate, Editable, } from "slate-vue3";
 import { createEditor } from "slate-vue3/core";
 import { withDOM } from "slate-vue3/dom";
 import { withHistory } from "slate-vue3/history";
@@ -55,19 +48,12 @@ const initialValue = [
     children: [{ text: "Let's start" }],
   },
 ];
-const renderElement = ({ attributes, children }) =>
-  h("p", attributes, children);
 const editor = withHistory(withDOM(createEditor()));
 editor.children = initialValue;
 </script>
 
 <template>
-  <Slate
-    :editor="editor"
-    :render-element="renderElement"
-    :render-leaf="defaultRenderLeaf"
-    :render-placeholder="defaultRenderPlaceHolder"
-  >
+  <Slate :editor="editor">
     <Editable />
   </Slate>
 </template>
@@ -113,11 +99,11 @@ Due to the complexity of maintaining multiple packages and the lack of reusabili
 
 | **Package**                                              |                                                                       **Version** | **Description**                                  |
 | :------------------------------------------------------- | --------------------------------------------------------------------------------: | :----------------------------------------------- |
-| [`slate-vue3/core`](./packages/slate)                    | ![](https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=&colorB=007ec6) | slate's core data model logic.                   |
-| [`slate-vue3/dom`](./packages/slate)                     | ![](https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=&colorB=007ec6) | DOM implementation of slate                      |
-| [`slate-vue3/history`](./packages/slate-history)         | ![](https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=&colorB=007ec6) | a plugin that adds undo/redo history to slate.   |
-| [`slate-vue3/hyperscript`](./packages/slate-hyperscript) | ![](https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=&colorB=007ec6) | a hyperscript tool to write JSX slate documents! |
-| [`slate-vue3/yjs`](./packages/slate-yjs)                 | ![](https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=&colorB=007ec6) | integration of `slate-yjs`                       |
+| [`slate-vue3/core`](./packages/slate)                    | ![](https://img.shields.io/npm/v/slate.svg?maxAge=3600&label=&colorB=007ec6) | slate's core data model logic.                   |
+| [`slate-vue3/dom`](./packages/slate-dom)                     | ![](https://img.shields.io/npm/v/slate-dom.svg?maxAge=3600&label=&colorB=007ec6) | DOM implementation of slate                      |
+| [`slate-vue3/history`](./packages/slate-history)         | ![](https://img.shields.io/npm/v/slate-history.svg?maxAge=3600&label=&colorB=007ec6) | a plugin that adds undo/redo history to slate.   |
+| [`slate-vue3/hyperscript`](./packages/slate-hyperscript) | ![](https://img.shields.io/npm/v/slate-hyperscript.svg?maxAge=3600&label=&colorB=007ec6) | a hyperscript tool to write JSX slate documents! |
+| [`slate-vue3/yjs`](./packages/slate-yjs)                 | ![](https://img.shields.io/npm/v/slate-yjs.svg?maxAge=3600&label=&colorB=007ec6) | integration of `slate-yjs`                       |
 
 <br />
 
@@ -128,17 +114,3 @@ Welcome to provide suggestions on the issue, it would be even better if **`PR`**
 `slate-vue3` is [MIT-licensed](./License.md).
 
 <br/>
-
-### FAQ
-
-##### 1. Why do I have to pass renderFunction into <Slate /> component ?
-
-This ensures that your rich text is as expected, and slate-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

package/dist/{batch-dirty-paths-DdGxRyrT.js → batch-dirty-paths-1Ahs6kkr.js}

@@ -2151,7 +2151,9 @@ const Text = {
     return true;
   },
   decorations(node, decorations) {
-    let leaves = [{ ...node }];
+    let leaves = [
+      { leaf: { ...node } }
+    ];
     for (const dec of decorations) {
       const { anchor, focus, merge: mergeDecoration, ...rest } = dec;
       const [start, end] = Range.edges(dec);
@@ -2160,16 +2162,17 @@ const Text = {
       const decorationStart = start.offset;
       const decorationEnd = end.offset;
       const merge = mergeDecoration ?? Object.assign;
-      for (const leaf of leaves) {
+      for (const { leaf } of leaves) {
+        const { length } = leaf.text;
         const leafStart = leafEnd;
-        leafEnd += leaf.text.length;
+        leafEnd += length;
         if (decorationStart <= leafStart && leafEnd <= decorationEnd) {
           merge(leaf, rest);
-          next.push(leaf);
+          next.push({ leaf });
           continue;
         }
         if (decorationStart !== decorationEnd && (decorationStart === leafEnd || decorationEnd === leafStart) || decorationStart > leafEnd || decorationEnd < leafStart || decorationEnd === leafStart && leafStart !== 0) {
-          next.push(leaf);
+          next.push({ leaf });
           continue;
         }
         let middle = leaf;
@@ -2177,25 +2180,37 @@ const Text = {
         let after;
         if (decorationEnd < leafEnd) {
           const off = decorationEnd - leafStart;
-          after = { ...middle, text: middle.text.slice(off) };
+          after = { leaf: { ...middle, text: middle.text.slice(off) } };
           middle = { ...middle, text: middle.text.slice(0, off) };
         }
         if (decorationStart > leafStart) {
           const off = decorationStart - leafStart;
-          before = { ...middle, text: middle.text.slice(0, off) };
+          before = { leaf: { ...middle, text: middle.text.slice(0, off) } };
           middle = { ...middle, text: middle.text.slice(off) };
         }
         merge(middle, rest);
         if (before) {
           next.push(before);
         }
-        next.push(middle);
+        next.push({ leaf: middle });
         if (after) {
           next.push(after);
         }
       }
       leaves = next;
     }
+    if (leaves.length > 1) {
+      let currentOffset = 0;
+      for (const [index, item] of leaves.entries()) {
+        const start = currentOffset;
+        const end = start + item.leaf.text.length;
+        const position = { start, end };
+        if (index === 0) position.isFirst = true;
+        if (index === leaves.length - 1) position.isLast = true;
+        item.position = position;
+        currentOffset = end;
+      }
+    }
     return leaves;
   }
 };

package/dist/core.js

@@ -1,6 +1,6 @@
-import { a6, a7, a8, d, e, f, a, h, aj, c, i, j, k, ap, ak, l, m, o, p, q, g, b, r, t, u, v, w, x, aq, y, a9, z, A, B, C, D, E, F, G, H, I, J, aa, K, ab, al, ac, L, M, N, O, n, P, S, Q, R, V, T, U, W, X, _, Y, Z, $, ad, am, ae, a0, an, ao, a5, s, af, a1, a2, a3, ag, ah, a4, ai } from "./create-editor-BLBmZQoI.js";
-import { E as E2, a as a10, N as N2, O as O2, P as P2, b as b2, R as R2, S as S2, T as T2, c as c2, i as i2 } from "./batch-dirty-paths-DdGxRyrT.js";
-import { L as L2, S as S3 } from "./location-BQJIMGOU.js";
+import { a6, a7, a8, d, e, f, a, h, aj, c, i, j, k, ap, ak, l, m, o, p, q, g, b, r, t, u, v, w, x, aq, y, a9, z, A, B, C, D, E, F, G, H, I, J, aa, K, ab, al, ac, L, M, N, O, n, P, S, Q, R, V, T, U, W, X, _, Y, Z, $, ad, am, ae, a0, an, ao, a5, s, af, a1, a2, a3, ag, ah, a4, ai } from "./create-editor-UR4aFGAf.js";
+import { E as E2, a as a10, N as N2, O as O2, P as P2, b as b2, R as R2, S as S2, T as T2, c as c2, i as i2 } from "./batch-dirty-paths-1Ahs6kkr.js";
+import { L as L2, S as S3 } from "./location-MosjNIh-.js";
 export {
   E2 as Editor,
   a10 as Element,

package/dist/{create-editor-BLBmZQoI.js → create-editor-UR4aFGAf.js}

@@ -1,6 +1,6 @@
-import { P as Path, b as Point, R as Range, E as Editor, D as DIRTY_PATHS, e as DIRTY_PATH_KEYS, f as isBatchingDirtyPaths, c as Transforms, F as FLUSHING, T as Text, N as Node, a as Element, g as NORMALIZING, h as PATH_REFS, j as POINT_REFS, k as RANGE_REFS, l as cloneDeep, m as getDefaultInsertLocation, S as Scrubber, n as batchDirtyPaths } from "./batch-dirty-paths-DdGxRyrT.js";
+import { P as Path, b as Point, R as Range, E as Editor, D as DIRTY_PATHS, e as DIRTY_PATH_KEYS, f as isBatchingDirtyPaths, c as Transforms, F as FLUSHING, T as Text, N as Node, a as Element, g as NORMALIZING, h as PATH_REFS, j as POINT_REFS, k as RANGE_REFS, l as cloneDeep, m as getDefaultInsertLocation, S as Scrubber, n as batchDirtyPaths } from "./batch-dirty-paths-1Ahs6kkr.js";
 import { reactive } from "vue";
-import { S as Span } from "./location-BQJIMGOU.js";
+import { S as Span } from "./location-MosjNIh-.js";
 const PathRef = {
   transform(ref, op) {
     const { current, affinity } = ref;

package/dist/dom.js

@@ -1,6 +1,6 @@
-import { D as DOMEditor, E as EDITOR_TO_KEY_TO_ELEMENT, a as EDITOR_TO_USER_MARKS, b as EDITOR_TO_USER_SELECTION, N as NODE_TO_KEY, i as isDOMText, g as getPlainText, c as getSlateFragmentAttribute, d as EDITOR_TO_ON_CHANGE } from "./hotkeys-CmyQAN4Q.js";
-import { C, F, G, J, H, B, I, u, L, v, w, M, x, O, z, y, A, K, P, Q, R, S, e, f, h, j, k, l, m, o, p, q, r, s, t, n } from "./hotkeys-CmyQAN4Q.js";
-import { E as Editor, R as Range, a as Element, c as Transforms, P as Path, N as Node } from "./batch-dirty-paths-DdGxRyrT.js";
+import { D as DOMEditor, E as EDITOR_TO_KEY_TO_ELEMENT, a as EDITOR_TO_USER_MARKS, b as EDITOR_TO_USER_SELECTION, N as NODE_TO_KEY, i as isDOMText, g as getPlainText, c as getSlateFragmentAttribute, d as EDITOR_TO_ON_CHANGE } from "./hotkeys-BSLjSKb9.js";
+import { C, F, G, J, H, B, I, u, L, v, w, M, x, O, z, y, A, K, P, Q, R, S, e, f, h, j, k, l, m, o, p, q, r, s, t, n } from "./hotkeys-BSLjSKb9.js";
+import { E as Editor, R as Range, a as Element, c as Transforms, P as Path, N as Node } from "./batch-dirty-paths-1Ahs6kkr.js";
 import "vue";
 const doRectsIntersect = (rect, compareRect) => {
   const middle = (compareRect.top + compareRect.bottom) / 2;

package/dist/history.js

@@ -1,4 +1,4 @@
-import { d as isPlainObject, O as Operation, t as toRawWeakMap, E as Editor, c as Transforms, P as Path } from "./batch-dirty-paths-DdGxRyrT.js";
+import { d as isPlainObject, O as Operation, t as toRawWeakMap, E as Editor, c as Transforms, P as Path } from "./batch-dirty-paths-1Ahs6kkr.js";
 import "vue";
 const History = {
   /**

package/dist/{hotkeys-CmyQAN4Q.js → hotkeys-BSLjSKb9.js}

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a, _b;
-import { t as toRawWeakMap, R as Range, E as Editor, S as Scrubber, a as Element, c as Transforms } from "./batch-dirty-paths-DdGxRyrT.js";
+import { t as toRawWeakMap, R as Range, E as Editor, S as Scrubber, a as Element, c as Transforms } from "./batch-dirty-paths-1Ahs6kkr.js";
 import "vue";
 const getDefaultView = (value) => {
   return value && value.ownerDocument && value.ownerDocument.defaultView || null;

package/dist/hyperscript.js

@@ -1,8 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { t as toRawWeakMap, R as Range, N as Node, T as Text, a as Element, d as isPlainObject } from "./batch-dirty-paths-DdGxRyrT.js";
-import { c as createEditor$1 } from "./create-editor-BLBmZQoI.js";
+import { t as toRawWeakMap, R as Range, N as Node, T as Text, a as Element, d as isPlainObject } from "./batch-dirty-paths-1Ahs6kkr.js";
+import { c as createEditor$1 } from "./create-editor-UR4aFGAf.js";
 import "vue";
 const ANCHOR = new toRawWeakMap();
 const FOCUS = new toRawWeakMap();

package/dist/index.js

@@ -1,7 +1,7 @@
-import { S as SLATE_USE_SELECTED, a as SLATE_STATE_SELECTION } from "./use-focused-C0jEAq2w.js";
-import { E, b, d, c, u, g, e, f } from "./use-focused-C0jEAq2w.js";
+import { S as SLATE_USE_SELECTED, a as SLATE_STATE_SELECTION } from "./use-focused-BlttbYui.js";
+import { g, D, c, e, f, d, E, b, u, j, h, i } from "./use-focused-BlttbYui.js";
 import { inject } from "vue";
-import { t } from "./batch-dirty-paths-DdGxRyrT.js";
+import { t } from "./batch-dirty-paths-1Ahs6kkr.js";
 const useSelected = () => {
   const selected = inject(SLATE_USE_SELECTED);
   if (selected === void 0) {
@@ -34,16 +34,20 @@ const useInheritRef = (attribute) => {
   return attribute;
 };
 export {
+  g as DEFAULT_DECORATE_FN,
+  D as DEFAULT_ELEMENT_RENDER,
+  c as DEFAULT_LEAF_RENDER,
+  e as DEFAULT_PLACEHOLDER_RENDER,
+  f as DEFAULT_SCROLL_INTO_VIEW,
+  d as DEFAULT_TEXT_RENDER,
   E as Editable,
   b as Slate,
-  d as defaultRenderLeaf,
-  c as defaultRenderPlaceHolder,
   t as toRawWeakMap,
   u as useComposing,
-  g as useEditor,
-  e as useFocused,
+  j as useEditor,
+  h as useFocused,
   useInheritRef,
-  f as useReadOnly,
+  i as useReadOnly,
   useSelected,
   useSelection
 };

package/dist/{location-BQJIMGOU.js → location-MosjNIh-.js}

@@ -1,4 +1,4 @@
-import { P as Path, b as Point, R as Range } from "./batch-dirty-paths-DdGxRyrT.js";
+import { P as Path, b as Point, R as Range } from "./batch-dirty-paths-1Ahs6kkr.js";
 import "vue";
 const Location = {
   isLocation(value) {

package/dist/slate/interfaces/text.d.ts

@@ -7,8 +7,15 @@ import { ExtendedType } from '../types/custom-types';
  */
 export interface BaseText {
     text: string;
+    decoration?: number[];
 }
 export type Text = ExtendedType<'Text', BaseText>;
+export interface LeafPosition {
+    start: number;
+    end: number;
+    isFirst?: true;
+    isLast?: true;
+}
 export interface TextEqualsOptions {
     loose?: boolean;
 }
@@ -49,6 +56,9 @@ export interface TextInterface {
     /**
      * Get the leaves for a text node given decorations.
      */
-    decorations: (node: Text, decorations: DecoratedRange[]) => Text[];
+    decorations: (node: Text, decorations: DecoratedRange[]) => {
+        leaf: Text;
+        position?: LeafPosition;
+    }[];
 }
 export declare const Text: TextInterface;

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

@@ -1,12 +1,13 @@
 import { VNode } from 'vue';
 import { DecoratedRange, NodeEntry } from '../../slate/index.ts';
-import { RenderElementProps, RenderLeafProps, RenderPlaceholderProps } from '../utils/interface';
+import { RenderElementProps, RenderLeafProps, RenderPlaceholderProps, RenderTextProps } from '../utils/interface';
 import { DOMEditor } from '../../slate-dom/index.ts';
 export declare const Slate: import('vue').DefineComponent<{
     editor: DOMEditor;
     decorate: (entry: NodeEntry) => DecoratedRange[];
     renderElement: (props: RenderElementProps) => VNode;
     renderLeaf: (props: RenderLeafProps) => VNode;
+    renderText?: ((props: RenderTextProps) => VNode) | undefined;
     renderPlaceholder: (props: RenderPlaceholderProps) => VNode;
 }, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
@@ -15,6 +16,7 @@ export declare const Slate: import('vue').DefineComponent<{
     decorate: (entry: NodeEntry) => DecoratedRange[];
     renderElement: (props: RenderElementProps) => VNode;
     renderLeaf: (props: RenderLeafProps) => VNode;
+    renderText?: ((props: RenderTextProps) => VNode) | undefined;
     renderPlaceholder: (props: RenderPlaceholderProps) => VNode;
 }> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
@@ -22,4 +24,8 @@ export declare const Slate: import('vue').DefineComponent<{
     onValuechange?: ((...args: any[]) => any) | undefined;
 }>, {
     decorate: Function;
+    renderElement: Function;
+    renderLeaf: Function;
+    renderText: Function;
+    renderPlaceholder: Function;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -1,6 +1,6 @@
 import { Editor } from '../../slate/index.ts';
 import { DOMEditor } from '../../slate-dom/index.ts';
-import { RenderLeafProps, RenderPlaceholderProps } from '../utils/interface';
+import { RenderElementProps, RenderTextProps, RenderLeafProps, RenderPlaceholderProps } from '../utils/interface';
 /**
  * Check if an event is overrided by a handler.
  */
@@ -17,11 +17,17 @@ export declare const handleNativeHistoryEvents: (editor: Editor, event: InputEve
 /**
  * A default implement to scroll dom range into view.
  */
-export declare const defaultScrollSelectionIntoView: (editor: DOMEditor, domRange: globalThis.Range) => void;
-export declare const defaultRenderLeaf: ({ attributes, children, }: RenderLeafProps) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+export declare const DEFAULT_SCROLL_INTO_VIEW: (editor: DOMEditor, domRange: globalThis.Range) => void;
+export declare const DEFAULT_ELEMENT_RENDER: ({ attributes, children, }: RenderElementProps) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>;
-export declare const defaultRenderPlaceHolder: ({ attributes, children }: RenderPlaceholderProps) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+export declare const DEFAULT_LEAF_RENDER: ({ attributes, children, }: RenderLeafProps) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+export declare const DEFAULT_TEXT_RENDER: ({ attributes, children, }: RenderTextProps) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+export declare const DEFAULT_PLACEHOLDER_RENDER: ({ attributes, children, }: RenderPlaceholderProps) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>;
 export declare const DEFAULT_DECORATE_FN: () => never[];

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

@@ -1,9 +1,10 @@
 import { ComputedRef, Ref, VNode } from 'vue';
-import { RenderElementProps, RenderPlaceholderProps, RenderLeafProps } from '../utils/interface';
+import { RenderElementProps, RenderPlaceholderProps, RenderLeafProps, RenderTextProps } from '../utils/interface';
 import { BasePoint } from '../../slate/index.ts';
 export declare const useRenderElement: () => (props: RenderElementProps) => VNode;
 export declare const useRenderLeaf: () => (props: RenderLeafProps) => VNode;
 export declare const useRenderPlaceholder: () => (props: RenderPlaceholderProps) => VNode;
+export declare const useRenderText: () => (props: RenderTextProps) => VNode;
 export declare const useChangeEffect: (fn: () => void) => Ref<number, number>;
 export declare const useMarkPlaceholder: () => ComputedRef<{
     anchor: BasePoint;

package/dist/slate-vue/index.d.ts

@@ -1,8 +1,7 @@
 export type { RenderElementProps, RenderLeafProps, RenderPlaceholderProps, } from './utils/interface';
 export { Slate } from './components/slate';
 export { Editable } from './components/editable';
-export { defaultRenderLeaf } from './components/utils';
-export { defaultRenderPlaceHolder } from './components/utils';
+export { DEFAULT_ELEMENT_RENDER, DEFAULT_LEAF_RENDER, DEFAULT_TEXT_RENDER, DEFAULT_PLACEHOLDER_RENDER, DEFAULT_SCROLL_INTO_VIEW, DEFAULT_DECORATE_FN, } from './components/utils';
 export { useComposing } from './hooks/use-composing';
 export { useFocused } from './hooks/use-focused';
 export { useReadOnly } from './hooks/use-read-only';

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

@@ -9,5 +9,6 @@ export declare const SLATE_STATE_SELECTION: unique symbol;
 export declare const SLATE_INNER_RENDER_ELEMENT: unique symbol;
 export declare const SLATE_INNER_RENDER_LEAF: unique symbol;
 export declare const SLATE_INNER_RENDER_PLACEHOLDER: unique symbol;
+export declare const SLATE_INNER_RENDER_TEXT: unique symbol;
 export declare const SLATE_INNER_CHANGE_EFFECT_INJECT: unique symbol;
 export declare const SLATE_INNER_MARK_PLACEHOLDER: unique symbol;

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

@@ -1,5 +1,5 @@
-import { Text, Element } from '../../slate/index.ts';
-import { HTMLAttributes, VNode, VNodeProps } from 'vue';
+import { Text, Element, LeafPosition } from '../../slate/index.ts';
+import { HTMLAttributes, VNode, VNodeChild, VNodeProps, VNodeRef } from 'vue';
 /**
  * The props that get passed to renderPlaceholder
  */
@@ -15,11 +15,19 @@ export interface RenderPlaceholderProps {
  */
 export interface RenderLeafProps {
     children: VNode;
+    /**
+     * The leaf node with any applied decorations.
+     * If no decorations are applied, it will be identical to the `text` property.
+     */
     leaf: Text;
     text: Text;
     attributes: HTMLAttributes & {
         "data-slate-leaf": true;
     };
+    /**
+     * The position of the leaf within the Text node, only present when the text node is split by decorations.
+     */
+    leafPosition?: LeafPosition;
 }
 /**
  * `RenderElementProps` are passed to the `renderElement` handler.
@@ -32,6 +40,17 @@ export interface RenderElementProps {
         "data-slate-inline"?: true;
         "data-slate-void"?: true;
         dir?: "rtl";
-        ref: any;
+        ref: VNodeRef;
+    };
+}
+/**
+ * `RenderTextProps` are passed to the `renderText` handler.
+ */
+export interface RenderTextProps {
+    text: Text;
+    children: VNodeChild[];
+    attributes: {
+        'data-slate-node': 'text';
+        ref: VNodeRef;
     };
 }

package/dist/{use-focused-C0jEAq2w.js → use-focused-BlttbYui.js}

@@ -1,6 +1,6 @@
 import { h, defineComponent, provide, ref, computed, onMounted, onUnmounted, renderSlot, inject, watch, renderList, Fragment, useAttrs, reactive, toRaw } from "vue";
-import { R as Range, N as Node, S as Scrubber, T as Text, P as Path, E as Editor, a as Element, c as Transforms } from "./batch-dirty-paths-DdGxRyrT.js";
-import { p as isDOMNode, I as IS_ANDROID, D as DOMEditor, P as MARK_PLACEHOLDER_SYMBOL, d as EDITOR_TO_ON_CHANGE, x as IS_IOS, E as EDITOR_TO_KEY_TO_ELEMENT, J as ELEMENT_TO_NODE, Q as NODE_TO_ELEMENT, R as NODE_TO_INDEX, S as NODE_TO_PARENT, y as IS_WEBKIT, e as applyStringDiff, q as isDOMSelection, n as normalizeStringDiff, O as IS_READ_ONLY, h as getDefaultView, G as EDITOR_TO_WINDOW, F as EDITOR_TO_ELEMENT, H as HAS_BEFORE_INPUT_SUPPORT, C as CAN_USE_DOM, f as getActiveElement, j as getSelection, M as IS_FOCUSED, r as isPlainTextOnlyPaste, L as IS_COMPOSING, B as Hotkeys, u as IS_CHROME, v as IS_FIREFOX, w as IS_FIREFOX_LEGACY, A as IS_WECHATBROWSER, z as IS_UC_MOBILE, a as EDITOR_TO_USER_MARKS, o as isDOMElement, b as EDITOR_TO_USER_SELECTION } from "./hotkeys-CmyQAN4Q.js";
+import { R as Range, N as Node, S as Scrubber, T as Text, P as Path, E as Editor, a as Element, c as Transforms } from "./batch-dirty-paths-1Ahs6kkr.js";
+import { I as IS_ANDROID, p as isDOMNode, D as DOMEditor, P as MARK_PLACEHOLDER_SYMBOL, d as EDITOR_TO_ON_CHANGE, x as IS_IOS, E as EDITOR_TO_KEY_TO_ELEMENT, J as ELEMENT_TO_NODE, Q as NODE_TO_ELEMENT, R as NODE_TO_INDEX, S as NODE_TO_PARENT, y as IS_WEBKIT, e as applyStringDiff, q as isDOMSelection, n as normalizeStringDiff, O as IS_READ_ONLY, h as getDefaultView, G as EDITOR_TO_WINDOW, F as EDITOR_TO_ELEMENT, H as HAS_BEFORE_INPUT_SUPPORT, C as CAN_USE_DOM, f as getActiveElement, j as getSelection, M as IS_FOCUSED, r as isPlainTextOnlyPaste, L as IS_COMPOSING, B as Hotkeys, u as IS_CHROME, v as IS_FIREFOX, w as IS_FIREFOX_LEGACY, A as IS_WECHATBROWSER, z as IS_UC_MOBILE, a as EDITOR_TO_USER_MARKS, o as isDOMElement, b as EDITOR_TO_USER_SELECTION } from "./hotkeys-BSLjSKb9.js";
 const SLATE_USE_EDITOR = Symbol("SLATE_USE_EDITOR");
 const SLATE_USE_DECORATE = Symbol("SLATE_USE_DECORATE");
 const SLATE_USE_SELECTED = Symbol("SLATE_USE_SELECTED");
@@ -11,6 +11,7 @@ const SLATE_STATE_SELECTION = Symbol("SLATE_STATE_SELECTION");
 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_RENDER_TEXT = Symbol("SLATE_INNER_RENDER_TEXT");
 const SLATE_INNER_CHANGE_EFFECT_INJECT = Symbol("SLATE_INNER_CHANGE_EFFECT_INJECT");
 const SLATE_INNER_MARK_PLACEHOLDER = Symbol("SLATE_INNER_MARK_PLACEHOLDER");
 const t = (t2) => "object" == typeof t2 && null != t2 && 1 === t2.nodeType, e$1 = (t2, e2) => (!e2 || "hidden" !== t2) && ("visible" !== t2 && "clip" !== t2), n = (t2, n2) => {
@@ -120,7 +121,7 @@ const handleNativeHistoryEvents = (editor, event) => {
     editor.redo();
   }
 };
-const defaultScrollSelectionIntoView = (editor, domRange) => {
+const DEFAULT_SCROLL_INTO_VIEW = (editor, domRange) => {
   if (domRange.getBoundingClientRect && (!editor.selection || editor.selection && Range.isCollapsed(editor.selection))) {
     const leafEl = domRange.startContainer.parentElement;
     leafEl.getBoundingClientRect = domRange.getBoundingClientRect.bind(domRange);
@@ -130,19 +131,22 @@ const defaultScrollSelectionIntoView = (editor, domRange) => {
     delete leafEl.getBoundingClientRect;
   }
 };
-const defaultRenderLeaf = ({ attributes, children }) => {
-  return h(
-    "span",
-    attributes,
-    children
-  );
-};
-const defaultRenderPlaceHolder = ({ attributes, children }) => {
-  return h("span", attributes, [
-    children,
-    IS_ANDROID ? h("br") : void 0
-  ]);
-};
+const DEFAULT_ELEMENT_RENDER = ({
+  attributes,
+  children
+}) => h("p", attributes, children);
+const DEFAULT_LEAF_RENDER = ({
+  attributes,
+  children
+}) => h("span", attributes, children);
+const DEFAULT_TEXT_RENDER = ({
+  attributes,
+  children
+}) => h("span", attributes, children);
+const DEFAULT_PLACEHOLDER_RENDER = ({
+  attributes,
+  children
+}) => h("span", attributes, [children, IS_ANDROID ? h("br") : void 0]);
 const DEFAULT_DECORATE_FN = () => [];
 const Slate = defineComponent({
   name: "slate-editor",
@@ -158,19 +162,23 @@ const Slate = defineComponent({
     },
     renderElement: {
       type: Function,
-      required: true
+      default: DEFAULT_ELEMENT_RENDER
     },
     renderLeaf: {
       type: Function,
-      required: true
+      default: DEFAULT_LEAF_RENDER
+    },
+    renderText: {
+      type: Function,
+      default: DEFAULT_TEXT_RENDER
     },
     renderPlaceholder: {
       type: Function,
-      required: true
+      default: DEFAULT_PLACEHOLDER_RENDER
     }
   },
   setup(props, { slots, emit }) {
-    const { editor, decorate, renderElement, renderLeaf, renderPlaceholder } = props;
+    const { editor, decorate, renderElement, renderLeaf, renderPlaceholder, renderText } = props;
     if (!Node.isNodeList(editor.children)) {
       throw new Error(
         `[Slate] initialValue is invalid! Expected a list of elements but got: ${Scrubber.stringify(
@@ -182,6 +190,7 @@ const Slate = defineComponent({
     provide(SLATE_USE_DECORATE, decorate);
     provide(SLATE_INNER_RENDER_ELEMENT, renderElement);
     provide(SLATE_INNER_RENDER_LEAF, renderLeaf);
+    provide(SLATE_INNER_RENDER_TEXT, renderText);
     provide(SLATE_INNER_RENDER_PLACEHOLDER, renderPlaceholder);
     const isFocus = ref(DOMEditor.isFocused(editor));
     const selection = computed(() => editor.selection);
@@ -329,6 +338,17 @@ const useRenderPlaceholder = () => {
   }
   return PLACEHOLDER_RENDER;
 };
+const useRenderText = () => {
+  const TEXT_RENDER = inject(
+    SLATE_INNER_RENDER_TEXT
+  );
+  if (TEXT_RENDER === void 0) {
+    throw new Error(
+      `The \`useRenderText\` hook must be used inside the <Slate> component's context.`
+    );
+  }
+  return TEXT_RENDER;
+};
 const useChangeEffect = (fn) => {
   const CHANGE_EFFECT_INJECT = inject(
     SLATE_INNER_CHANGE_EFFECT_INJECT
@@ -361,7 +381,7 @@ const TextComp = defineComponent({
     const markPlaceholder = useMarkPlaceholder();
     const leaves = computed(() => {
       if (decorate === DEFAULT_DECORATE_FN) {
-        return [text];
+        return [{ leaf: text }];
       }
       const elemPath = DOMEditor.findPath(editor, element);
       const textPath = DOMEditor.findPath(editor, text);
@@ -398,25 +418,27 @@ const TextComp = defineComponent({
       return !isVoid && isLeafBlock && NODE_TO_INDEX.get(text) === element.children.length - 1;
     });
     const renderLeaf = useRenderLeaf();
-    return () => h(
-      "span",
-      { "data-slate-node": "text", ref: spanRef },
-      renderList(
+    const renderText = useRenderText();
+    return () => renderText({
+      text,
+      attributes: { "data-slate-node": "text", ref: spanRef },
+      children: renderList(
         leaves.value,
         (leaf, i) => renderLeaf({
           text,
-          leaf,
+          leaf: leaf.leaf,
+          leafPosition: leaf.position,
           attributes: { "data-slate-leaf": true },
           children: h(StringComp, {
             text,
             element,
-            leaf,
+            leaf: leaf.leaf,
             isLast: isLastText.value && i === leaves.value.length - 1,
-            key: `${text.text}-${leaf.text}-${i}`
+            key: `${text.text}-${leaf.leaf.text}-${i}`
           })
         })
       )
-    );
+    });
   }
 });
 const useReadOnly = () => {
@@ -864,7 +886,7 @@ const Editable = defineComponent({
     scrollSelectionIntoView: {
       type: Function,
       required: false,
-      default: defaultScrollSelectionIntoView
+      default: DEFAULT_SCROLL_INTO_VIEW
     },
     placeholder: { type: String },
     readOnly: {
@@ -1092,10 +1114,6 @@ const Editable = defineComponent({
     const deferredOperations = ref([]);
     const onBeforeinput = (event) => {
       var _a, _b, _c, _d, _e;
-      const isInputEvent = event instanceof InputEvent;
-      if (!isInputEvent) {
-        return;
-      }
       if (HAS_BEFORE_INPUT_SUPPORT) {
         handleNativeHistoryEvents(editor, event);
         const el = DOMEditor.toDOMNode(editor, editor);
@@ -1763,14 +1781,18 @@ const useFocused = () => {
   return isFocus;
 };
 export {
+  DEFAULT_ELEMENT_RENDER as D,
   Editable as E,
   SLATE_USE_SELECTED as S,
   SLATE_STATE_SELECTION as a,
   Slate as b,
-  defaultRenderPlaceHolder as c,
-  defaultRenderLeaf as d,
-  useFocused as e,
-  useReadOnly as f,
-  useEditor as g,
+  DEFAULT_LEAF_RENDER as c,
+  DEFAULT_TEXT_RENDER as d,
+  DEFAULT_PLACEHOLDER_RENDER as e,
+  DEFAULT_SCROLL_INTO_VIEW as f,
+  DEFAULT_DECORATE_FN as g,
+  useFocused as h,
+  useReadOnly as i,
+  useEditor as j,
   useComposing as u
 };

package/dist/yjs.js

@@ -1,9 +1,9 @@
-import { d as isPlainObject, T as Text, N as Node, P as Path, E as Editor, t as toRawWeakMap, c as Transforms, R as Range } from "./batch-dirty-paths-DdGxRyrT.js";
+import { d as isPlainObject, T as Text, N as Node, P as Path, E as Editor, t as toRawWeakMap, c as Transforms, R as Range } from "./batch-dirty-paths-1Ahs6kkr.js";
 import { toRaw, ref, onMounted, onUnmounted, watch, onUpdated, computed } from "vue";
 import { XmlText, YTextEvent, createRelativePositionFromTypeIndex, createAbsolutePositionFromRelativePosition, createRelativePositionFromJSON, decodeRelativePosition, encodeRelativePosition, UndoManager, compareRelativePositions } from "yjs";
-import { L as Location } from "./location-BQJIMGOU.js";
-import { g as useEditor, e as useFocused } from "./use-focused-C0jEAq2w.js";
-import { D as DOMEditor } from "./hotkeys-CmyQAN4Q.js";
+import { L as Location } from "./location-MosjNIh-.js";
+import { j as useEditor, h as useFocused } from "./use-focused-BlttbYui.js";
+import { D as DOMEditor } from "./hotkeys-BSLjSKb9.js";
 function deepEquals(node, another) {
   for (const key in node) {
     const a = node[key];

package/package.json

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