@portabletext/editor 1.25.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.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 {
@@ -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',

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/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__/withPortableTextMarkModel.test.tsx

@@ -461,11 +461,11 @@ describe('plugin:withPortableTextMarksModel', () => {
               style: 'normal',
             },
             {
-              _key: '3',
+              _key: '5',
               _type: 'myTestBlockType',
               children: [
                 {
-                  _key: '2',
+                  _key: '3',
                   _type: 'span',
                   marks: [],
                   text: '',

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':

package/src/selectors/index.ts

@@ -17,6 +17,8 @@ export {isActiveAnnotation} from './selector.is-active-annotation'
 export {isActiveDecorator} from './selector.is-active-decorator'
 export {isActiveListItem} from './selector.is-active-list-item'
 export {isActiveStyle} from './selector.is-active-style'
+export {isAtTheEndOfBlock} from './selector.is-at-the-end-of-block'
+export {isAtTheStartOfBlock} from './selector.is-at-the-start-of-block'
 export {isPointAfterSelection} from './selector.is-point-after-selection'
 export {isPointBeforeSelection} from './selector.is-point-before-selection'
 export {isSelectionCollapsed} from './selector.is-selection-collapsed'

package/src/selectors/selector.is-at-the-end-of-block.ts

@@ -0,0 +1,22 @@
+import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import * as utils from '../utils'
+import {isSelectionCollapsed} from './selector.is-selection-collapsed'
+
+/**
+ * @public
+ */
+export function isAtTheEndOfBlock(block: {
+  node: PortableTextBlock
+  path: [KeyedSegment]
+}): EditorSelector<boolean> {
+  return ({context}) => {
+    if (!context.selection || !isSelectionCollapsed({context})) {
+      return false
+    }
+
+    const blockEndPoint = utils.getBlockEndPoint(block)
+
+    return utils.isEqualSelectionPoints(context.selection.focus, blockEndPoint)
+  }
+}

package/src/selectors/selector.is-at-the-start-of-block.ts

@@ -0,0 +1,25 @@
+import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
+import type {EditorSelector} from '../editor/editor-selector'
+import * as utils from '../utils'
+import {isSelectionCollapsed} from './selector.is-selection-collapsed'
+
+/**
+ * @public
+ */
+export function isAtTheStartOfBlock(block: {
+  node: PortableTextBlock
+  path: [KeyedSegment]
+}): EditorSelector<boolean> {
+  return ({context}) => {
+    if (!context.selection || !isSelectionCollapsed({context})) {
+      return false
+    }
+
+    const blockStartPoint = utils.getBlockStartPoint(block)
+
+    return utils.isEqualSelectionPoints(
+      context.selection.focus,
+      blockStartPoint,
+    )
+  }
+}

package/src/selectors/selector.is-selection-collapsed.ts

@@ -4,9 +4,13 @@ import type {EditorSelector} from '../editor/editor-selector'
  * @public
  */
 export const isSelectionCollapsed: EditorSelector<boolean> = ({context}) => {
+  if (!context.selection) {
+    return false
+  }
+
   return (
-    JSON.stringify(context.selection?.anchor.path) ===
-      JSON.stringify(context.selection?.focus.path) &&
+    JSON.stringify(context.selection.anchor.path) ===
+      JSON.stringify(context.selection.focus.path) &&
     context.selection?.anchor.offset === context.selection?.focus.offset
   )
 }

package/src/utils/index.ts

@@ -4,9 +4,11 @@ export {
   blockOffsetToSpanSelectionPoint,
   spanSelectionPointToBlockOffset,
 } from './util.block-offset'
+export {getBlockEndPoint} from './util.get-block-end-point'
 export {getBlockStartPoint} from './util.get-block-start-point'
 export {getTextBlockText} from './util.get-text-block-text'
 export {isEmptyTextBlock} from './util.is-empty-text-block'
+export {isEqualSelectionPoints} from './util.is-equal-selection-points'
 export {isKeyedSegment} from './util.is-keyed-segment'
 export {reverseSelection} from './util.reverse-selection'
 export {sliceBlocks} from './util.slice-blocks'

package/src/utils/util.get-block-end-point.ts

@@ -0,0 +1,34 @@
+import {
+  isPortableTextSpan,
+  isPortableTextTextBlock,
+  type KeyedSegment,
+  type PortableTextBlock,
+} from '@sanity/types'
+import type {EditorSelectionPoint} from '../types/editor'
+
+/**
+ * @public
+ */
+export function getBlockEndPoint({
+  node,
+  path,
+}: {
+  node: PortableTextBlock
+  path: [KeyedSegment]
+}): EditorSelectionPoint {
+  if (isPortableTextTextBlock(node)) {
+    const lastChild = node.children[node.children.length - 1]
+
+    if (lastChild) {
+      return {
+        path: [...path, 'children', {_key: lastChild._key}],
+        offset: isPortableTextSpan(lastChild) ? lastChild.text.length : 0,
+      }
+    }
+  }
+
+  return {
+    path,
+    offset: 0,
+  }
+}

package/src/utils/util.is-equal-selection-points.ts

@@ -0,0 +1,13 @@
+import type {EditorSelectionPoint} from '../types/editor'
+
+/**
+ * @public
+ */
+export function isEqualSelectionPoints(
+  a: EditorSelectionPoint,
+  b: EditorSelectionPoint,
+) {
+  return (
+    a.offset === b.offset && JSON.stringify(a.path) === JSON.stringify(b.path)
+  )
+}