@portabletext/editor 3.0.2 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/editor/PortableTextEditor.tsx

@@ -694,7 +694,7 @@ export class PortableTextEditor extends Component<
    * ```
    * import * as selectors from '@portabletext/editor/selectors'
    * const editor = useEditor()
-   * const selectedSlice = useEditorSelector(editor, selectors.getSelectedSlice)
+   * const selectedValue = useEditorSelector(editor, selectors.getSelectedValue)
    * ```
    */
   static getFragment = (

package/src/editor/create-slate-editor.tsx

@@ -3,7 +3,7 @@ import {withReact} from 'slate-react'
 import {buildIndexMaps} from '../internal-utils/build-index-maps'
 import {createPlaceholderBlock} from '../internal-utils/create-placeholder-block'
 import {debugWithName} from '../internal-utils/debug'
-import {toSlateValue} from '../internal-utils/values'
+import {toSlateBlock} from '../internal-utils/values'
 import type {PortableTextSlateEditor} from '../types/editor'
 import type {EditorActor} from './editor-machine'
 import {withPlugins} from './plugins/with-plugins'
@@ -56,9 +56,11 @@ export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
     },
   )
 
-  const initialValue = toSlateValue(instance.value, {
-    schemaTypes: config.editorActor.getSnapshot().context.schema,
-  })
+  const initialValue = [
+    toSlateBlock(placeholderBlock, {
+      schemaTypes: config.editorActor.getSnapshot().context.schema,
+    }),
+  ]
 
   const slateEditor: SlateEditor = {
     instance,

package/src/editor/plugins/createWithEditableAPI.ts

@@ -25,7 +25,7 @@ import {
   slateRangeToSelection,
 } from '../../internal-utils/slate-utils'
 import {toSlateRange} from '../../internal-utils/to-slate-range'
-import {fromSlateValue} from '../../internal-utils/values'
+import {fromSlateBlock, fromSlateValue} from '../../internal-utils/values'
 import {getActiveAnnotationsMarks} from '../../selectors/selector.get-active-annotation-marks'
 import {getActiveDecorators} from '../../selectors/selector.get-active-decorators'
 import {getFocusBlock} from '../../selectors/selector.get-focus-block'
@@ -157,11 +157,11 @@ export function createEditableAPI(
           editor.selection.focus.path.slice(0, 1),
         )
         if (block) {
-          return fromSlateValue(
-            [block],
+          return fromSlateBlock(
+            block,
             types.block.name,
             KEY_TO_VALUE_ELEMENT.get(editor),
-          )[0]
+          )
         }
       }
       return undefined
@@ -173,11 +173,11 @@ export function createEditableAPI(
           editor.selection.focus.path.slice(0, 1),
         )
         if (block && editor.isTextBlock(block)) {
-          const ptBlock = fromSlateValue(
-            [block],
+          const ptBlock = fromSlateBlock(
+            block,
             types.block.name,
             KEY_TO_VALUE_ELEMENT.get(editor),
-          )[0] as PortableTextTextBlock
+          ) as PortableTextTextBlock
           return ptBlock.children[editor.selection.focus.path[1]]
         }
       }
@@ -274,15 +274,15 @@ export function createEditableAPI(
         if (block && blockPath && typeof block._key === 'string') {
           if (path.length === 1 && slatePath.focus.path.length === 1) {
             return [
-              fromSlateValue([block], types.block.name)[0],
+              fromSlateBlock(block, types.block.name),
               [{_key: block._key}],
             ]
           }
-          const ptBlock = fromSlateValue(
-            [block],
+          const ptBlock = fromSlateBlock(
+            block,
             types.block.name,
             KEY_TO_VALUE_ELEMENT.get(editor),
-          )[0]
+          )
           if (editor.isTextBlock(ptBlock)) {
             const ptChild = ptBlock.children[slatePath.focus.path[1]]
             if (ptChild) {
@@ -559,7 +559,12 @@ export function createEditableAPI(
       editor.onChange()
     },
     getFragment: () => {
-      return fromSlateValue(editor.getFragment(), types.block.name)
+      const snapshot = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: editor,
+      })
+
+      return getSelectedValue(snapshot)
     },
     isSelectionsOverlapping: (
       selectionA: EditorSelection,

package/src/internal-utils/__tests__/values.test.ts

@@ -1,139 +1,113 @@
 import {compileSchema, defineSchema} from '@portabletext/schema'
 import {describe, expect, it} from 'vitest'
-import {fromSlateValue, toSlateValue} from '../values'
+import {fromSlateValue, toSlateBlock} from '../values'
 
 const schemaTypes = compileSchema(defineSchema({}))
 
-describe('toSlateValue', () => {
-  it('checks undefined', () => {
-    const result = toSlateValue(undefined, {schemaTypes})
-    expect(result).toHaveLength(0)
-  })
-
-  it('runs given empty array', () => {
-    const result = toSlateValue([], {schemaTypes})
-    expect(result).toHaveLength(0)
-  })
-
+describe(toSlateBlock.name, () => {
   it('given type is custom with no custom properties, should include an empty text property in children and an empty value', () => {
-    const result = toSlateValue(
-      [
+    const result = toSlateBlock(
+      {
+        _type: 'image',
+        _key: '123',
+      },
+      {schemaTypes},
+    )
+
+    expect(result).toMatchObject({
+      _key: '123',
+      _type: 'image',
+      children: [
         {
-          _type: 'image',
-          _key: '123',
+          text: '',
         },
       ],
-      {schemaTypes},
-    )
+      value: {},
+    })
+  })
 
-    expect(result).toMatchObject([
+  it('given type is block', () => {
+    const result = toSlateBlock(
       {
+        _type: schemaTypes.block.name,
         _key: '123',
-        _type: 'image',
         children: [
           {
-            text: '',
+            _type: 'span',
+            _key: '1231',
+            text: '123',
           },
         ],
-        value: {},
       },
-    ])
-  })
-
-  it('given type is block', () => {
-    const result = toSlateValue(
-      [
+      {schemaTypes},
+    )
+    expect(result).toEqual({
+      _key: '123',
+      _type: 'block',
+      children: [
         {
-          _type: schemaTypes.block.name,
-          _key: '123',
-          children: [
-            {
-              _type: 'span',
-              _key: '1231',
-              text: '123',
-            },
-          ],
+          _key: '1231',
+          _type: 'span',
+          text: '123',
         },
       ],
-      {schemaTypes},
-    )
-    expect(result).toMatchInlineSnapshot(`
-[
-  {
-    "_key": "123",
-    "_type": "block",
-    "children": [
-      {
-        "_key": "1231",
-        "_type": "span",
-        "text": "123",
-      },
-    ],
-    "style": "normal",
-  },
-]
-`)
+      style: 'normal',
+    })
   })
 
   it('given type is block and has custom in children', () => {
-    const result = toSlateValue(
-      [
+    const result = toSlateBlock(
+      {
+        _type: schemaTypes.block.name,
+        _key: '123',
+        children: [
+          {
+            _type: 'span',
+            _key: '1231',
+            text: '123',
+          },
+          {
+            _type: 'image',
+            _key: '1232',
+            asset: {
+              _ref: 'ref-123',
+            },
+          },
+        ],
+      },
+      {schemaTypes},
+    )
+
+    expect(result).toEqual({
+      _key: '123',
+      _type: 'block',
+      children: [
+        {
+          _key: '1231',
+          _type: 'span',
+          text: '123',
+        },
         {
-          _type: schemaTypes.block.name,
-          _key: '123',
+          __inline: true,
+          _key: '1232',
+          _type: 'image',
           children: [
             {
+              _key: 'void-child',
               _type: 'span',
-              _key: '1231',
-              text: '123',
-            },
-            {
-              _type: 'image',
-              _key: '1232',
-              asset: {
-                _ref: 'ref-123',
-              },
+              marks: [],
+              text: '',
             },
           ],
-        },
-      ],
-      {schemaTypes},
-    )
-
-    expect(result).toMatchInlineSnapshot(`
-[
-  {
-    "_key": "123",
-    "_type": "block",
-    "children": [
-      {
-        "_key": "1231",
-        "_type": "span",
-        "text": "123",
-      },
-      {
-        "__inline": true,
-        "_key": "1232",
-        "_type": "image",
-        "children": [
-          {
-            "_key": "void-child",
-            "_type": "span",
-            "marks": [],
-            "text": "",
-          },
-        ],
-        "value": {
-          "asset": {
-            "_ref": "ref-123",
+          value: {
+            asset: {
+              _ref: 'ref-123',
+            },
           },
         },
-      },
-    ],
-    "style": "normal",
-  },
-]
-`)
+      ],
+      style: 'normal',
+    })
   })
 })
 
@@ -240,8 +214,12 @@ describe('fromSlateValue', () => {
         style: 'normal',
       },
     ]
-    const toSlate1 = toSlateValue(value, {schemaTypes}, keyMap)
-    const toSlate2 = toSlateValue(value, {schemaTypes}, keyMap)
+    const toSlate1 = value.map((block) =>
+      toSlateBlock(block, {schemaTypes}, keyMap),
+    )
+    const toSlate2 = value.map((block) =>
+      toSlateBlock(block, {schemaTypes}, keyMap),
+    )
     expect(toSlate1[0]).toBe(toSlate2[0])
     expect(toSlate1[1]).toBe(toSlate2[1])
     const fromSlate1 = fromSlateValue(toSlate1, 'block', keyMap)

package/src/internal-utils/applyPatch.ts

@@ -21,7 +21,7 @@ import type {EditorSchema} from '../editor/editor-schema'
 import {KEY_TO_SLATE_ELEMENT} from '../editor/weakMaps'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {isKeyedSegment} from '../utils/util.is-keyed-segment'
-import {isEqualToEmptyEditor, toSlateValue} from './values'
+import {isEqualToEmptyEditor, toSlateBlock} from './values'
 
 /**
  * Creates a function that can apply a patch onto a PortableTextSlateEditor.
@@ -134,11 +134,13 @@ function insertPatch(
   // Insert blocks
   if (patch.path.length === 1) {
     const {items, position} = patch
-    const blocksToInsert = toSlateValue(
-      items as PortableTextBlock[],
-      {schemaTypes: schema},
-      KEY_TO_SLATE_ELEMENT.get(editor),
-    ) as Descendant[]
+    const blocksToInsert = items.map((item) =>
+      toSlateBlock(
+        item as PortableTextBlock,
+        {schemaTypes: schema},
+        KEY_TO_SLATE_ELEMENT.get(editor),
+      ),
+    )
     const targetBlockIndex = block.index
     const normalizedIdx =
       position === 'after' ? targetBlockIndex + 1 : targetBlockIndex
@@ -153,7 +155,11 @@ function insertPatch(
       patch.path[0] === 0
     ) {
       Transforms.removeNodes(editor, {
-        at: [position === 'before' ? targetBlockIndex + 1 : targetBlockIndex],
+        at: [
+          position === 'before'
+            ? targetBlockIndex + blocksToInsert.length
+            : targetBlockIndex,
+        ],
       })
     }
 
@@ -169,8 +175,8 @@ function insertPatch(
     return false
   }
 
-  const childrenToInsert = toSlateValue(
-    [{...block.node, children: items as PortableTextChild[]}],
+  const childrenToInsert = toSlateBlock(
+    {...block.node, children: items as PortableTextChild[]},
     {schemaTypes: schema},
     KEY_TO_SLATE_ELEMENT.get(editor),
   )
@@ -178,8 +184,8 @@ function insertPatch(
     position === 'after' ? targetChild.index + 1 : targetChild.index
   const childInsertPath = [block.index, normalizedIdx]
 
-  if (childrenToInsert && Element.isElement(childrenToInsert[0])) {
-    Transforms.insertNodes(editor, childrenToInsert[0].children, {
+  if (childrenToInsert && Element.isElement(childrenToInsert)) {
+    Transforms.insertNodes(editor, childrenToInsert.children, {
       at: childInsertPath,
     })
   }

package/src/internal-utils/operation-to-patches.ts

@@ -23,7 +23,7 @@ import {
   type SplitNodeOperation,
 } from 'slate'
 import type {EditorSchema} from '../editor/editor-schema'
-import {fromSlateValue} from './values'
+import {fromSlateBlock} from './values'
 
 export function insertTextPatch(
   schema: EditorSchema,
@@ -281,12 +281,7 @@ export function insertNodePatch(
     if (targetKey) {
       return [
         insert(
-          [
-            fromSlateValue(
-              [operation.node as Descendant],
-              schema.block.name,
-            )[0],
-          ],
+          [fromSlateBlock(operation.node as Descendant, schema.block.name)],
           position,
           [{_key: targetKey}],
         ),
@@ -295,7 +290,7 @@ export function insertNodePatch(
     return [
       setIfMissing(beforeValue, []),
       insert(
-        [fromSlateValue([operation.node as Descendant], schema.block.name)[0]],
+        [fromSlateBlock(operation.node as Descendant, schema.block.name)],
         'before',
         [operation.path[0]],
       ),
@@ -365,10 +360,10 @@ export function splitNodePatch(
   if (operation.path.length === 1) {
     const oldBlock = beforeValue[operation.path[0]]
     if (isTextBlock({schema}, oldBlock)) {
-      const targetValue = fromSlateValue(
-        [children[operation.path[0] + 1]],
+      const targetValue = fromSlateBlock(
+        children[operation.path[0] + 1],
         schema.block.name,
-      )[0]
+      )
       if (targetValue) {
         patches.push(insert([targetValue], 'after', [{_key: splitBlock._key}]))
         const spansToUnset = oldBlock.children.slice(operation.position)
@@ -384,18 +379,16 @@ export function splitNodePatch(
     const splitSpan = splitBlock.children[operation.path[1]]
     if (isSpan({schema}, splitSpan)) {
       const targetSpans = (
-        fromSlateValue(
-          [
-            {
-              ...splitBlock,
-              children: splitBlock.children.slice(
-                operation.path[1] + 1,
-                operation.path[1] + 2,
-              ),
-            } as Descendant,
-          ],
+        fromSlateBlock(
+          {
+            ...splitBlock,
+            children: splitBlock.children.slice(
+              operation.path[1] + 1,
+              operation.path[1] + 2,
+            ),
+          } as Descendant,
           schema.block.name,
-        )[0] as PortableTextTextBlock
+        ) as PortableTextTextBlock
       ).children
 
       patches.push(
@@ -470,10 +463,10 @@ export function mergeNodePatch(
 
   if (operation.path.length === 1) {
     if (block?._key) {
-      const newBlock = fromSlateValue(
-        [children[operation.path[0] - 1]],
+      const newBlock = fromSlateBlock(
+        children[operation.path[0] - 1],
         schema.block.name,
-      )[0]
+      )
       patches.push(set(newBlock, [{_key: newBlock._key}]))
       patches.push(unset([{_key: block._key}]))
     } else {
@@ -555,7 +548,7 @@ export function moveNodePatch(
       operation.path[0] > operation.newPath[0] ? 'before' : 'after'
     patches.push(unset([{_key: block._key}]))
     patches.push(
-      insert([fromSlateValue([block], schema.block.name)[0]], position, [
+      insert([fromSlateBlock(block, schema.block.name)], position, [
         {_key: targetBlock._key},
       ]),
     )
@@ -569,7 +562,7 @@ export function moveNodePatch(
     const position =
       operation.newPath[1] === targetBlock.children.length ? 'after' : 'before'
     const childToInsert = (
-      fromSlateValue([block], schema.block.name)[0] as PortableTextTextBlock
+      fromSlateBlock(block, schema.block.name) as PortableTextTextBlock
     ).children[operation.path[1]]
     patches.push(unset([{_key: block._key}, 'children', {_key: child._key}]))
     patches.push(

package/src/internal-utils/slate-utils.ts

@@ -2,7 +2,7 @@ import type {PortableTextSpan} from '@sanity/types'
 import {Editor, Element, Node, Range, type Path, type Point} from 'slate'
 import type {EditorSchema} from '../editor/editor-schema'
 import type {EditorSelection, PortableTextSlateEditor} from '../types/editor'
-import {fromSlateValue} from './values'
+import {fromSlateBlock} from './values'
 
 export function getBlockPath({
   editor,
@@ -284,7 +284,7 @@ function elementToBlock({
   schema: EditorSchema
   element: Element
 }) {
-  return fromSlateValue([element], schema.block.name)?.at(0)
+  return fromSlateBlock(element, schema.block.name)
 }
 
 function isBlockElement(