@portabletext/editor 1.25.0 → 1.26.1

package/src/behaviors/behavior.core.insert-break.ts

@@ -0,0 +1,122 @@
+import * as selectors from '../selectors'
+import {defineBehavior, raise} from './behavior.types'
+
+const atTheEndOfTextBlock = defineBehavior({
+  on: 'insert.break',
+  guard: ({context}) => {
+    const focusTextBlock = selectors.getFocusTextBlock({context})
+    const selectionCollapsed = selectors.isSelectionCollapsed({context})
+
+    if (!context.selection || !focusTextBlock || !selectionCollapsed) {
+      return false
+    }
+
+    const atTheEndOfBlock = selectors.isAtTheEndOfBlock(focusTextBlock)({
+      context,
+    })
+
+    const focusListItem = focusTextBlock.node.listItem
+    const focusLevel = focusTextBlock.node.level
+
+    if (atTheEndOfBlock) {
+      return {focusListItem, focusLevel}
+    }
+
+    return false
+  },
+  actions: [
+    ({context}, {focusListItem, focusLevel}) => [
+      raise({
+        type: 'insert.block',
+        block: {
+          _type: context.schema.block.name,
+          _key: context.keyGenerator(),
+          children: [
+            {
+              _key: context.keyGenerator(),
+              _type: context.schema.span.name,
+              text: '',
+              marks: [],
+            },
+          ],
+          markDefs: [],
+          listItem: focusListItem,
+          level: focusLevel,
+          style: context.schema.styles[0]?.value,
+        },
+        placement: 'after',
+      }),
+    ],
+  ],
+})
+
+const atTheStartOfTextBlock = defineBehavior({
+  on: 'insert.break',
+  guard: ({context}) => {
+    const focusTextBlock = selectors.getFocusTextBlock({context})
+    const selectionCollapsed = selectors.isSelectionCollapsed({context})
+
+    if (!context.selection || !focusTextBlock || !selectionCollapsed) {
+      return false
+    }
+
+    const focusSpan = selectors.getFocusSpan({context})
+
+    const focusDecorators = focusSpan?.node.marks?.filter(
+      (mark) =>
+        context.schema.decorators.some(
+          (decorator) => decorator.value === mark,
+        ) ?? [],
+    )
+    const focusAnnotations =
+      focusSpan?.node.marks?.filter(
+        (mark) =>
+          !context.schema.decorators.some(
+            (decorator) => decorator.value === mark,
+          ),
+      ) ?? []
+    const focusListItem = focusTextBlock.node.listItem
+    const focusLevel = focusTextBlock.node.level
+
+    const atTheStartOfBlock = selectors.isAtTheStartOfBlock(focusTextBlock)({
+      context,
+    })
+
+    if (atTheStartOfBlock) {
+      return {focusAnnotations, focusDecorators, focusListItem, focusLevel}
+    }
+
+    return false
+  },
+  actions: [
+    (
+      {context},
+      {focusAnnotations, focusDecorators, focusListItem, focusLevel},
+    ) => [
+      raise({
+        type: 'insert.block',
+        block: {
+          _key: context.keyGenerator(),
+          _type: context.schema.block.name,
+          children: [
+            {
+              _key: context.keyGenerator(),
+              _type: context.schema.span.name,
+              marks: focusAnnotations.length === 0 ? focusDecorators : [],
+              text: '',
+            },
+          ],
+          listItem: focusListItem,
+          level: focusLevel,
+          style: context.schema.styles[0]?.value,
+        },
+        placement: 'before',
+      }),
+    ],
+  ],
+})
+
+export const coreInsertBreakBehaviors = {
+  atTheEndOfTextBlock,
+  atTheStartOfTextBlock,
+}

package/src/behaviors/behavior.core.ts

@@ -2,14 +2,15 @@ import {coreAnnotationBehaviors} from './behavior.core.annotations'
 import {coreBlockObjectBehaviors} from './behavior.core.block-objects'
 import {coreDecoratorBehaviors} from './behavior.core.decorators'
 import {coreDeserializeBehavior} from './behavior.core.deserialize'
+import {coreInsertBreakBehaviors} from './behavior.core.insert-break'
 import {coreListBehaviors} from './behavior.core.lists'
 import {coreSerializeBehaviors} from './behavior.core.serialize'
 import {coreStyleBehaviors} from './behavior.core.style'
-import {defineBehavior} from './behavior.types'
+import {defineBehavior, raise} from './behavior.types'
 
 const softReturn = defineBehavior({
   on: 'insert.soft break',
-  actions: [() => [{type: 'insert.text', text: '\n'}]],
+  actions: [() => [raise({type: 'insert.text', text: '\n'})]],
 })
 
 /**
@@ -38,6 +39,8 @@ export const coreBehaviors = [
   coreListBehaviors.clearListOnEnter,
   coreListBehaviors.indentListOnTab,
   coreListBehaviors.unindentListOnShiftTab,
+  coreInsertBreakBehaviors.atTheEndOfTextBlock,
+  coreInsertBreakBehaviors.atTheStartOfTextBlock,
   coreSerializeBehaviors.serialize,
   coreSerializeBehaviors['serialization.success'],
   coreStyleBehaviors.toggleStyleOff,
@@ -53,6 +56,7 @@ export const coreBehavior = {
   decorators: coreDecoratorBehaviors,
   deserialize: coreDeserializeBehavior,
   blockObjects: coreBlockObjectBehaviors,
+  insertBreak: coreInsertBreakBehaviors,
   lists: coreListBehaviors,
   ...coreSerializeBehaviors,
   style: coreSerializeBehaviors,

package/src/behaviors/behavior.types.ts

@@ -5,7 +5,7 @@ import type {
 } from '@sanity/types'
 import type {TextUnit} from 'slate'
 import type {TextInsertTextOptions} from 'slate/dist/interfaces/transforms/text'
-import type {ConverterEvent} from '../converters/converter'
+import type {ConverterEvent} from '../converters/converter.types'
 import type {EditorContext} from '../editor/editor-snapshot'
 import type {MIMEType} from '../internal-utils/mime-type'
 import type {OmitFromUnion, PickFromUnion} from '../type-utils'
@@ -35,6 +35,16 @@ export type SyntheticBehaviorEvent =
         value: {[prop: string]: unknown}
       }
     }
+  | {
+      type: 'block.set'
+      at: [KeyedSegment]
+      [props: string]: unknown
+    }
+  | {
+      type: 'block.unset'
+      at: [KeyedSegment]
+      props: Array<string>
+    }
   | {
       type: 'blur'
     }
@@ -101,6 +111,11 @@ export type SyntheticBehaviorEvent =
   | {
       type: 'insert.soft break'
     }
+  | {
+      type: 'insert.block'
+      block: PortableTextBlock
+      placement: 'auto' | 'after' | 'before'
+    }
   | {
       type: 'insert.span'
       text: string

package/src/converters/converter.json.ts

@@ -1,6 +1,7 @@
-import type {Converter} from './converter'
+import {defineConverter} from './converter.types'
 
-export const converterJson: Converter<'application/json'> = {
+export const converterJson = defineConverter({
+  mimeType: 'application/json',
   serialize: ({context, event}) => {
     const portableTextConverter = context.converters.find(
       (converter) => converter.mimeType === 'application/x-portable-text',
@@ -49,5 +50,4 @@ export const converterJson: Converter<'application/json'> = {
       mimeType: 'application/json',
     }
   },
-  mimeType: 'application/json',
-}
+})

package/src/converters/converter.portable-text.deserialize.test.ts

@@ -6,7 +6,7 @@ import {
 } from '../editor/define-schema'
 import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
 import {converterPortableText} from './converter.portable-text'
-import {coreConverters} from './converters'
+import {coreConverters} from './converters.core'
 
 function createContext(schema: SchemaDefinition) {
   return {

package/src/converters/converter.portable-text.ts

@@ -1,8 +1,9 @@
 import {parseBlock} from '../internal-utils/parse-blocks'
 import {sliceBlocks} from '../utils'
-import type {Converter} from './converter'
+import {defineConverter} from './converter.types'
 
-export const converterPortableText: Converter<'application/x-portable-text'> = {
+export const converterPortableText = defineConverter({
+  mimeType: 'application/x-portable-text',
   serialize: ({context, event}) => {
     if (!context.selection) {
       return {
@@ -37,7 +38,11 @@ export const converterPortableText: Converter<'application/x-portable-text'> = {
     }
 
     const parsedBlocks = blocks.flatMap((block) => {
-      const parsedBlock = parseBlock({context, block})
+      const parsedBlock = parseBlock({
+        context,
+        block,
+        options: {refreshKeys: true},
+      })
       return parsedBlock ? [parsedBlock] : []
     })
 
@@ -55,5 +60,4 @@ export const converterPortableText: Converter<'application/x-portable-text'> = {
       mimeType: 'application/x-portable-text',
     }
   },
-  mimeType: 'application/x-portable-text',
-}
+})

package/src/converters/converter.text-html.deserialize.test.ts

@@ -6,7 +6,7 @@ import {
 } from '../editor/define-schema'
 import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
 import {converterTextHtml} from './converter.text-html'
-import {coreConverters} from './converters'
+import {coreConverters} from './converters.core'
 
 function createContext(schema: SchemaDefinition) {
   return {

package/src/converters/converter.text-html.serialize.test.ts

@@ -8,7 +8,7 @@ import {
 import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
 import type {EditorSelection} from '../utils'
 import {converterTextHtml} from './converter.text-html'
-import {coreConverters} from './converters'
+import {coreConverters} from './converters.core'
 
 const decoratedParagraph: PortableTextTextBlock = {
   _key: 'k0',

package/src/converters/converter.text-html.ts

@@ -2,9 +2,10 @@ import {htmlToBlocks} from '@portabletext/block-tools'
 import {toHTML} from '@portabletext/to-html'
 import type {PortableTextBlock} from '@sanity/types'
 import {sliceBlocks} from '../utils'
-import type {Converter} from './converter'
+import {defineConverter} from './converter.types'
 
-export const converterTextHtml: Converter<'text/html'> = {
+export const converterTextHtml = defineConverter({
+  mimeType: 'text/html',
   serialize: ({context, event}) => {
     if (!context.selection) {
       return {
@@ -57,5 +58,4 @@ export const converterTextHtml: Converter<'text/html'> = {
       mimeType: 'text/html',
     }
   },
-  mimeType: 'text/html',
-}
+})

package/src/converters/converter.text-plain.test.ts

@@ -8,7 +8,7 @@ import {
 import type {EditorContext} from '../editor/editor-snapshot'
 import type {EditorSelection} from '../utils'
 import {converterTextPlain} from './converter.text-plain'
-import {coreConverters} from './converters'
+import {coreConverters} from './converters.core'
 
 const b1: PortableTextTextBlock = {
   _type: 'block',

package/src/converters/converter.text-plain.ts

@@ -1,9 +1,9 @@
 import {htmlToBlocks} from '@portabletext/block-tools'
 import {isPortableTextTextBlock, type PortableTextBlock} from '@sanity/types'
 import {sliceBlocks} from '../utils'
-import type {Converter} from './converter'
+import {defineConverter} from './converter.types'
 
-export const converterTextPlain: Converter<'text/plain'> = {
+export const converterTextPlain = defineConverter({
   mimeType: 'text/plain',
   serialize: ({context, event}) => {
     if (!context.selection) {
@@ -73,7 +73,7 @@ export const converterTextPlain: Converter<'text/plain'> = {
       mimeType: 'text/plain',
     }
   },
-}
+})
 
 const entityMap: Record<string, string> = {
   '&': '&amp;',

package/src/converters/{converter.ts → converter.types.ts}

@@ -9,6 +9,12 @@ export type Converter<TMIMEType extends MIMEType = MIMEType> = {
   deserialize: Deserializer<TMIMEType>
 }
 
+export function defineConverter<TMIMEType extends MIMEType>(
+  converter: Converter<TMIMEType>,
+): Converter<TMIMEType> {
+  return converter
+}
+
 export type ConverterEvent<TMIMEType extends MIMEType = MIMEType> =
   | {
       type: 'serialize'

package/src/editor/__tests__/handleClick.test.tsx

@@ -28,7 +28,7 @@ async function getEditableElement(
 describe('adds empty text block if its needed', () => {
   const newBlock = {
     _type: 'myTestBlockType',
-    _key: '3',
+    _key: '1',
     style: 'normal',
     markDefs: [],
     children: [
@@ -96,7 +96,7 @@ describe('adds empty text block if its needed', () => {
       },
       {
         _type: 'myTestBlockType',
-        _key: '3',
+        _key: '1',
         style: 'normal',
         markDefs: [],
         children: [

package/src/editor/__tests__/pteWarningsSelfSolving.test.tsx

@@ -337,7 +337,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
         PortableTextEditor.focus(editorRef.current)
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           {
-            _key: '5',
+            _key: '3',
             _type: 'myTestBlockType',
             children: [{_key: '4', _type: 'span', marks: [], text: ''}],
             markDefs: [],

package/src/editor/create-editor.ts

@@ -12,7 +12,7 @@ import {
   type Snapshot,
 } from 'xstate'
 import type {Behavior, CustomBehaviorEvent} from '../behaviors/behavior.types'
-import {coreConverters} from '../converters/converters'
+import {coreConverters} from '../converters/converters.core'
 import {compileType} from '../internal-utils/schema'
 import type {PickFromUnion} from '../type-utils'
 import type {EditableAPI} from '../types/editor'
@@ -66,6 +66,8 @@ export type EditorEvent =
       | 'annotation.add'
       | 'annotation.remove'
       | 'annotation.toggle'
+      | 'block.set'
+      | 'block.unset'
       | 'blur'
       | 'data transfer.set'
       | 'decorator.add'
@@ -76,6 +78,7 @@ export type EditorEvent =
       | 'deserialization.failure'
       | 'deserialization.success'
       | 'focus'
+      | 'insert.block'
       | 'insert.block object'
       | 'insert.inline object'
       | 'insert.span'

package/src/editor/editor-machine.ts

@@ -20,7 +20,7 @@ import {
   type NativeBehaviorEvent,
   type SyntheticBehaviorEvent,
 } from '../behaviors/behavior.types'
-import type {Converter} from '../converters/converter'
+import type {Converter} from '../converters/converter.types'
 import type {OmitFromUnion, PickFromUnion} from '../type-utils'
 import type {
   EditorSelection,
@@ -172,7 +172,6 @@ export type InternalEditorEmittedEvent =
       description: string
       data: unknown
     }
-  | {type: 'select'; selection: EditorSelection}
   | {type: 'selection'; selection: EditorSelection}
   | {type: 'blurred'; event: FocusEvent<HTMLDivElement, Element>}
   | {type: 'focused'; event: FocusEvent<HTMLDivElement, Element>}
@@ -186,6 +185,8 @@ export type InternalEditorEmittedEvent =
       | 'annotation.add'
       | 'annotation.remove'
       | 'annotation.toggle'
+      | 'block.set'
+      | 'block.unset'
       | 'blur'
       | 'data transfer.set'
       | 'decorator.add'
@@ -198,6 +199,7 @@ export type InternalEditorEmittedEvent =
       | 'deserialization.failure'
       | 'deserialization.success'
       | 'focus'
+      | 'insert.block'
       | 'insert.block object'
       | 'insert.inline object'
       | 'insert.span'
@@ -208,6 +210,7 @@ export type InternalEditorEmittedEvent =
       | 'move.block'
       | 'move.block down'
       | 'move.block up'
+      | 'select'
       | 'select.next block'
       | 'select.previous block'
       | 'serialization.failure'
@@ -596,6 +599,9 @@ export const editorMachine = setup({
             'annotation.*': {
               actions: emit(({event}) => event),
             },
+            'block.*': {
+              actions: emit(({event}) => event),
+            },
             'blur': {
               actions: emit(({event}) => event),
             },

package/src/editor/editor-snapshot.ts

@@ -1,5 +1,5 @@
 import type {PortableTextBlock} from '@sanity/types'
-import type {Converter} from '../converters/converter'
+import type {Converter} from '../converters/converter.types'
 import {toPortableTextRange} from '../internal-utils/ranges'
 import {fromSlateValue} from '../internal-utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'

package/src/editor/plugins/__tests__/withEditableAPIInsert.test.tsx

@@ -111,12 +111,12 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
                 text: 'Block A',
               },
               {
-                _key: '3',
+                _key: '2',
                 _type: 'someObject',
                 color: 'red',
               },
               {
-                _key: '4',
+                _key: '3',
                 _type: 'span',
                 marks: [],
                 text: '',
@@ -155,12 +155,12 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
                 text: 'Block A',
               },
               {
-                _key: '3',
+                _key: '2',
                 _type: 'someObject',
                 color: 'red',
               },
               {
-                _key: '7',
+                _key: '5',
                 _type: 'span',
                 marks: [],
                 text: ' ',
@@ -172,8 +172,8 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
         ])
 
         expect(PortableTextEditor.getSelection(editorRef.current)).toEqual({
-          anchor: {path: [{_key: 'a'}, 'children', {_key: '7'}], offset: 1},
-          focus: {path: [{_key: 'a'}, 'children', {_key: '7'}], offset: 1},
+          anchor: {path: [{_key: 'a'}, 'children', {_key: '5'}], offset: 1},
+          focus: {path: [{_key: 'a'}, 'children', {_key: '5'}], offset: 1},
           backward: false,
         })
       }
@@ -240,7 +240,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
     await waitFor(() => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {_key: '2', _type: 'someObject', color: 'red'},
+          {_key: '1', _type: 'someObject', color: 'red'},
         ])
       }
     })
@@ -292,7 +292,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           ...initialValue,
-          {_key: '2', _type: 'someObject', color: 'red'},
+          {_key: '1', _type: 'someObject', color: 'red'},
         ])
       }
     })
@@ -345,7 +345,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
     await waitFor(() => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {_key: '2', _type: 'someObject', color: 'red'},
+          {_key: '1', _type: 'someObject', color: 'red'},
           ...initialValue,
         ])
       }
@@ -402,7 +402,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           ...value,
-          {_key: '2', _type: 'someObject', color: 'yellow'},
+          {_key: '1', _type: 'someObject', color: 'yellow'},
         ])
       }
     })
@@ -455,7 +455,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           value[0],
-          {_key: '2', _type: 'someObject', color: 'yellow'},
+          {_key: '1', _type: 'someObject', color: 'yellow'},
           value[1],
         ])
       }
@@ -504,7 +504,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           value[0],
-          {_key: '2', _type: 'someObject', color: 'yellow'},
+          {_key: '1', _type: 'someObject', color: 'yellow'},
         ])
       }
     })

package/src/editor/plugins/__tests__/withPortableTextMarkModel.test.tsx

@@ -73,41 +73,34 @@ describe('plugin:withPortableTextMarksModel', () => {
             anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 3},
           })
           PortableTextEditor.toggleMark(editorRef.current, 'strong')
-          expect(PortableTextEditor.getValue(editorRef.current))
-            .toMatchInlineSnapshot(`
-        [
-          {
-            "_key": "a",
-            "_type": "myTestBlockType",
-            "children": [
-              {
-                "_key": "a1",
-                "_type": "span",
-                "marks": [
-                  "strong",
-                ],
-                "text": "1",
-              },
-              {
-                "_key": "2",
-                "_type": "span",
-                "marks": [],
-                "text": "23",
-              },
-              {
-                "_key": "1",
-                "_type": "span",
-                "marks": [
-                  "strong",
-                ],
-                "text": "4",
-              },
-            ],
-            "markDefs": [],
-            "style": "normal",
-          },
-        ]
-      `)
+          expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+            {
+              _key: 'a',
+              _type: 'myTestBlockType',
+              children: [
+                {
+                  _key: 'a1',
+                  _type: 'span',
+                  marks: ['strong'],
+                  text: '1',
+                },
+                {
+                  _key: '2',
+                  _type: 'span',
+                  marks: [],
+                  text: '23',
+                },
+                {
+                  _key: '1',
+                  _type: 'span',
+                  marks: ['strong'],
+                  text: '4',
+                },
+              ],
+              markDefs: [],
+              style: 'normal',
+            },
+          ])
         }
       })
       await waitFor(() => {
@@ -461,7 +454,7 @@ describe('plugin:withPortableTextMarksModel', () => {
               style: 'normal',
             },
             {
-              _key: '3',
+              _key: '1',
               _type: 'myTestBlockType',
               children: [
                 {

package/src/editor/plugins/create-with-event-listeners.ts

@@ -28,6 +28,8 @@ export function createWithEventListeners(
           case 'annotation.add':
           case 'annotation.remove':
           case 'annotation.toggle':
+          case 'block.set':
+          case 'block.unset':
           case 'blur':
           case 'data transfer.set':
           case 'decorator.add':
@@ -40,6 +42,7 @@ export function createWithEventListeners(
           case 'deserialization.failure':
           case 'deserialization.success':
           case 'focus':
+          case 'insert.block':
           case 'insert.block object':
           case 'insert.inline object':
           case 'insert.span':