@portabletext/editor 1.24.0 → 1.26.0

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.lists.ts

@@ -2,10 +2,38 @@ import {createGuards} from '../behavior-actions/behavior.guards'
 import {isHotkey} from '../internal-utils/is-hotkey'
 import * as selectors from '../selectors'
 import {isEmptyTextBlock} from '../utils/util.is-empty-text-block'
-import {defineBehavior} from './behavior.types'
+import {defineBehavior, raise} from './behavior.types'
 
 const MAX_LIST_LEVEL = 10
 
+const toggleListItemOff = defineBehavior({
+  on: 'list item.toggle',
+  guard: ({context, event}) =>
+    selectors.isActiveListItem(event.listItem)({context}),
+  actions: [
+    ({event}) => [
+      raise({
+        type: 'list item.remove',
+        listItem: event.listItem,
+      }),
+    ],
+  ],
+})
+
+const toggleListItemOn = defineBehavior({
+  on: 'list item.toggle',
+  guard: ({context, event}) =>
+    !selectors.isActiveListItem(event.listItem)({context}),
+  actions: [
+    ({event}) => [
+      raise({
+        type: 'list item.add',
+        listItem: event.listItem,
+      }),
+    ],
+  ],
+})
+
 const clearListOnBackspace = defineBehavior({
   on: 'delete.backward',
   guard: ({context}) => {
@@ -29,11 +57,11 @@ const clearListOnBackspace = defineBehavior({
   },
   actions: [
     (_, {focusTextBlock}) => [
-      {
+      raise({
         type: 'text block.unset',
         props: ['listItem', 'level'],
         at: focusTextBlock.path,
-      },
+      }),
     ],
   ],
 })
@@ -65,11 +93,11 @@ const unindentListOnBackspace = defineBehavior({
   },
   actions: [
     (_, {focusTextBlock, level}) => [
-      {
+      raise({
         type: 'text block.set',
         level,
         at: focusTextBlock.path,
-      },
+      }),
     ],
   ],
 })
@@ -92,11 +120,11 @@ const clearListOnEnter = defineBehavior({
   },
   actions: [
     (_, {focusListBlock}) => [
-      {
+      raise({
         type: 'text block.unset',
         props: ['listItem', 'level'],
         at: focusListBlock.path,
-      },
+      }),
     ],
   ],
 })
@@ -131,14 +159,16 @@ const indentListOnTab = defineBehavior({
   },
   actions: [
     (_, {selectedListBlocks}) =>
-      selectedListBlocks.map((selectedListBlock) => ({
-        type: 'text block.set',
-        level: Math.min(
-          MAX_LIST_LEVEL,
-          Math.max(1, selectedListBlock.node.level + 1),
-        ),
-        at: selectedListBlock.path,
-      })),
+      selectedListBlocks.map((selectedListBlock) =>
+        raise({
+          type: 'text block.set',
+          level: Math.min(
+            MAX_LIST_LEVEL,
+            Math.max(1, selectedListBlock.node.level + 1),
+          ),
+          at: selectedListBlock.path,
+        }),
+      ),
   ],
 })
 
@@ -172,18 +202,22 @@ const unindentListOnShiftTab = defineBehavior({
   },
   actions: [
     (_, {selectedListBlocks}) =>
-      selectedListBlocks.map((selectedListBlock) => ({
-        type: 'text block.set',
-        level: Math.min(
-          MAX_LIST_LEVEL,
-          Math.max(1, selectedListBlock.node.level - 1),
-        ),
-        at: selectedListBlock.path,
-      })),
+      selectedListBlocks.map((selectedListBlock) =>
+        raise({
+          type: 'text block.set',
+          level: Math.min(
+            MAX_LIST_LEVEL,
+            Math.max(1, selectedListBlock.node.level - 1),
+          ),
+          at: selectedListBlock.path,
+        }),
+      ),
   ],
 })
 
 export const coreListBehaviors = {
+  toggleListItemOff,
+  toggleListItemOn,
   clearListOnBackspace,
   unindentListOnBackspace,
   clearListOnEnter,

package/src/behaviors/behavior.core.style.ts

@@ -0,0 +1,19 @@
+import * as selectors from '../selectors'
+import {defineBehavior, raise} from './behavior.types'
+
+const toggleStyleOff = defineBehavior({
+  on: 'style.toggle',
+  guard: ({context, event}) => selectors.isActiveStyle(event.style)({context}),
+  actions: [({event}) => [raise({type: 'style.remove', style: event.style})]],
+})
+
+const toggleStyleOn = defineBehavior({
+  on: 'style.toggle',
+  guard: ({context, event}) => !selectors.isActiveStyle(event.style)({context}),
+  actions: [({event}) => [raise({type: 'style.add', style: event.style})]],
+})
+
+export const coreStyleBehaviors = {
+  toggleStyleOff,
+  toggleStyleOn,
+}

package/src/behaviors/behavior.core.ts

@@ -1,13 +1,16 @@
+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 {defineBehavior} from './behavior.types'
+import {coreStyleBehaviors} from './behavior.core.style'
+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'})]],
 })
 
 /**
@@ -15,6 +18,10 @@ const softReturn = defineBehavior({
  */
 export const coreBehaviors = [
   softReturn,
+  coreAnnotationBehaviors.toggleAnnotationOff,
+  coreAnnotationBehaviors.toggleAnnotationOn,
+  coreDecoratorBehaviors.toggleDecoratorOff,
+  coreDecoratorBehaviors.toggleDecoratorOn,
   coreDecoratorBehaviors.strongShortcut,
   coreDecoratorBehaviors.emShortcut,
   coreDecoratorBehaviors.underlineShortcut,
@@ -25,13 +32,19 @@ export const coreBehaviors = [
   coreBlockObjectBehaviors.breakingBlockObject,
   coreBlockObjectBehaviors.deletingEmptyTextBlockAfterBlockObject,
   coreBlockObjectBehaviors.deletingEmptyTextBlockBeforeBlockObject,
+  coreListBehaviors.toggleListItemOff,
+  coreListBehaviors.toggleListItemOn,
   coreListBehaviors.clearListOnBackspace,
   coreListBehaviors.unindentListOnBackspace,
   coreListBehaviors.clearListOnEnter,
   coreListBehaviors.indentListOnTab,
   coreListBehaviors.unindentListOnShiftTab,
+  coreInsertBreakBehaviors.atTheEndOfTextBlock,
+  coreInsertBreakBehaviors.atTheStartOfTextBlock,
   coreSerializeBehaviors.serialize,
   coreSerializeBehaviors['serialization.success'],
+  coreStyleBehaviors.toggleStyleOff,
+  coreStyleBehaviors.toggleStyleOn,
 ]
 
 /**
@@ -39,9 +52,12 @@ export const coreBehaviors = [
  */
 export const coreBehavior = {
   softReturn,
+  annotation: coreAnnotationBehaviors,
   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'
@@ -28,6 +28,23 @@ export type SyntheticBehaviorEvent =
         name: string
       }
     }
+  | {
+      type: 'annotation.toggle'
+      annotation: {
+        name: string
+        value: {[prop: string]: unknown}
+      }
+    }
+  | {
+      type: 'block.set'
+      at: [KeyedSegment]
+      [props: string]: unknown
+    }
+  | {
+      type: 'block.unset'
+      at: [KeyedSegment]
+      props: Array<string>
+    }
   | {
       type: 'blur'
     }
@@ -37,6 +54,14 @@ export type SyntheticBehaviorEvent =
       dataTransfer: DataTransfer
       mimeType: MIMEType
     }
+  | {
+      type: 'decorator.add'
+      decorator: string
+    }
+  | {
+      type: 'decorator.remove'
+      decorator: string
+    }
   | {
       type: 'decorator.toggle'
       decorator: string
@@ -45,10 +70,19 @@ export type SyntheticBehaviorEvent =
       type: 'delete.backward'
       unit: TextUnit
     }
+  | {
+      type: 'delete.block'
+      blockPath: [KeyedSegment]
+    }
   | {
       type: 'delete.forward'
       unit: TextUnit
     }
+  | {
+      type: 'delete.text'
+      anchor: BlockOffset
+      focus: BlockOffset
+    }
   | {
       type: 'focus'
     }
@@ -77,23 +111,91 @@ export type SyntheticBehaviorEvent =
   | {
       type: 'insert.soft break'
     }
+  | {
+      type: 'insert.block'
+      block: PortableTextBlock
+      placement: 'auto' | 'after' | 'before'
+    }
+  | {
+      type: 'insert.span'
+      text: string
+      annotations?: Array<{
+        name: string
+        value: {[prop: string]: unknown}
+      }>
+      decorators?: Array<string>
+    }
   | {
       type: 'insert.text'
       text: string
       options?: TextInsertTextOptions
     }
+  | {
+      type: 'insert.text block'
+      placement: 'auto' | 'after' | 'before'
+      textBlock?: {
+        children?: PortableTextTextBlock['children']
+      }
+    }
+  | {
+      type: 'list item.add'
+      listItem: string
+    }
+  | {
+      type: 'list item.remove'
+      listItem: string
+    }
   | {
       type: 'list item.toggle'
       listItem: string
     }
+  | {
+      type: 'move.block'
+      at: [KeyedSegment]
+      to: [KeyedSegment]
+    }
+  | {
+      type: 'move.block down'
+      at: [KeyedSegment]
+    }
+  | {
+      type: 'move.block up'
+      at: [KeyedSegment]
+    }
   | {
       type: 'select'
       selection: EditorSelection
     }
+  | {
+      type: 'select.previous block'
+    }
+  | {
+      type: 'select.next block'
+    }
+  | {
+      type: 'style.add'
+      style: string
+    }
+  | {
+      type: 'style.remove'
+      style: string
+    }
   | {
       type: 'style.toggle'
       style: string
     }
+  | {
+      type: 'text block.set'
+      at: [KeyedSegment]
+      level?: number
+      listItem?: string
+      style?: string
+    }
+  | {
+      type: 'text block.unset'
+      at: [KeyedSegment]
+      props: Array<'level' | 'listItem' | 'style'>
+    }
   | (PickFromUnion<
       ConverterEvent,
       'type',
@@ -165,100 +267,13 @@ export type BehaviorActionIntend =
       type: 'raise'
       event: SyntheticBehaviorEvent | CustomBehaviorEvent
     }
-  | {
-      type: 'annotation.toggle'
-      annotation: {
-        name: string
-        value: {[prop: string]: unknown}
-      }
-    }
-  | {
-      type: 'decorator.add'
-      decorator: string
-    }
-  | {
-      type: 'decorator.remove'
-      decorator: string
-    }
-  | {
-      type: 'insert.span'
-      text: string
-      annotations?: Array<{
-        name: string
-        value: {[prop: string]: unknown}
-      }>
-      decorators?: Array<string>
-    }
-  | {
-      type: 'insert.text block'
-      placement: 'auto' | 'after' | 'before'
-      textBlock?: {
-        children?: PortableTextTextBlock['children']
-      }
-    }
-  | {
-      type: 'list item.add'
-      listItem: string
-    }
-  | {
-      type: 'list item.remove'
-      listItem: string
-    }
-  | {
-      type: 'move.block'
-      at: [KeyedSegment]
-      to: [KeyedSegment]
-    }
-  | {
-      type: 'move.block down'
-      at: [KeyedSegment]
-    }
-  | {
-      type: 'move.block up'
-      at: [KeyedSegment]
-    }
   | {
       type: 'noop'
     }
-  | {
-      type: 'delete.block'
-      blockPath: [KeyedSegment]
-    }
-  | {
-      type: 'delete.text'
-      anchor: BlockOffset
-      focus: BlockOffset
-    }
   | {
       type: 'effect'
       effect: () => void
     }
-  | {
-      type: 'select.previous block'
-    }
-  | {
-      type: 'select.next block'
-    }
-  | {
-      type: 'style.add'
-      style: string
-    }
-  | {
-      type: 'style.remove'
-      style: string
-    }
-  | {
-      type: 'text block.set'
-      at: [KeyedSegment]
-      level?: number
-      listItem?: string
-      style?: string
-    }
-  | {
-      type: 'text block.unset'
-      at: [KeyedSegment]
-      props: Array<'level' | 'listItem' | 'style'>
-    }
 
 /**
  * @beta

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 {
@@ -55,5 +56,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',