Add renderText and leafPosition (#5850)

* feat

* revert

* revert

* docs

* test

* refactor

* test

* revert

* refactor

* doc

* docs

* refactor

* docs

* test

* docs

* docs

* docs

* refactor

docs/libraries/slate-react/editable.md

@@ -122,6 +122,15 @@ export interface RenderLeafProps {
   attributes: {
     'data-slate-leaf': true
   }
+  /**
+   * The position of the leaf within the Text node, only present when the text node is split by decorations.
+   */
+  leafPosition?: {
+    start: number
+    end: number
+    isFirst?: true
+    isLast?: true
+  }
 }
 ```
 
@@ -142,6 +151,38 @@ Example usage:
 />
 ```
 
+#### `renderText?: (props: RenderTextProps) => JSX.Element`
+
+The `renderText` prop allows you to customize the rendering of the container element for a Text node in the Slate editor. This is useful when you need to wrap the entire text node content or add elements associated with the text node as a whole, regardless of how decorations might split the text into multiple leaves.
+
+The `renderText` function receives an object of type `RenderTextProps` as its argument:
+
+```typescript
+export interface RenderTextProps {
+  text: Text
+  children: any
+  attributes: {
+    'data-slate-node': 'text'
+    ref: any
+  }
+}
+```
+
+Example usage:
+
+```jsx
+<Editable
+  renderText={({ attributes, children, text }) => {
+    return (
+      <span {...attributes} className="custom-text">
+        {children}
+        {text.tooltipContent && <Tooltip content={text.tooltipContent} />}
+      </span>
+    )
+  }}
+/>
+```
+
 #### `renderPlaceholder?: (props: RenderPlaceholderProps) => JSX.Element`
 
 The `renderPlaceholder` prop allows you to customize how the placeholder of the Slate.js `Editable` component is rendered when the editor is empty. The placeholder will only be shown when the editor's content is empty.