@portabletext/editor 1.24.0 → 1.26.0

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'
@@ -65,14 +65,40 @@ export type EditorEvent =
       'type',
       | 'annotation.add'
       | 'annotation.remove'
+      | 'annotation.toggle'
+      | 'block.set'
+      | 'block.unset'
       | 'blur'
+      | 'data transfer.set'
+      | 'decorator.add'
+      | 'decorator.remove'
       | 'decorator.toggle'
+      | 'delete.block'
+      | 'delete.text'
+      | 'deserialization.failure'
+      | 'deserialization.success'
       | 'focus'
+      | 'insert.block'
       | 'insert.block object'
       | 'insert.inline object'
+      | 'insert.span'
+      | 'insert.text block'
+      | 'list item.add'
+      | 'list item.remove'
       | 'list item.toggle'
+      | 'move.block'
+      | 'move.block down'
+      | 'move.block up'
       | 'select'
+      | 'select.next block'
+      | 'select.previous block'
+      | 'serialization.failure'
+      | 'serialization.success'
+      | 'style.add'
+      | 'style.remove'
       | 'style.toggle'
+      | 'text block.set'
+      | 'text block.unset'
       | 'patches'
       | 'update behaviors'
       | 'update key generator'
@@ -160,12 +186,29 @@ function createEditorFromActor(editorActor: EditorActor): Editor {
     send: (event) => {
       editorActor.send(event)
     },
-    on: (event, listener) =>
-      editorActor.on(
-        event,
-        // @ts-expect-error
-        listener,
-      ),
+    on: (event, listener) => {
+      const subscription = editorActor.on(event, (event) => {
+        switch (event.type) {
+          case 'blurred':
+          case 'done loading':
+          case 'editable':
+          case 'error':
+          case 'focused':
+          case 'invalid value':
+          case 'loading':
+          case 'mutation':
+          case 'patch':
+          case 'read only':
+          case 'ready':
+          case 'selection':
+          case 'value changed':
+            listener(event)
+            break
+        }
+      })
+
+      return subscription
+    },
     _internal: {
       editable,
       editorActor,

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>}
@@ -185,13 +184,42 @@ export type InternalEditorEmittedEvent =
       'type',
       | 'annotation.add'
       | 'annotation.remove'
+      | 'annotation.toggle'
+      | 'block.set'
+      | 'block.unset'
       | 'blur'
+      | 'data transfer.set'
+      | 'decorator.add'
+      | 'decorator.remove'
       | 'decorator.toggle'
+      | 'delete.backward'
+      | 'delete.block'
+      | 'delete.forward'
+      | 'delete.text'
+      | 'deserialization.failure'
+      | 'deserialization.success'
+      | 'focus'
+      | 'insert.block'
       | 'insert.block object'
       | 'insert.inline object'
+      | 'insert.span'
+      | 'insert.text block'
+      | 'list item.add'
+      | 'list item.remove'
       | 'list item.toggle'
-      | 'focus'
+      | 'move.block'
+      | 'move.block down'
+      | 'move.block up'
+      | 'select'
+      | 'select.next block'
+      | 'select.previous block'
+      | 'serialization.failure'
+      | 'serialization.success'
+      | 'style.add'
+      | 'style.remove'
       | 'style.toggle'
+      | 'text block.set'
+      | 'text block.unset'
     >
   | {
       type: 'custom.*'
@@ -571,6 +599,9 @@ export const editorMachine = setup({
             'annotation.*': {
               actions: emit(({event}) => event),
             },
+            'block.*': {
+              actions: emit(({event}) => event),
+            },
             'blur': {
               actions: emit(({event}) => event),
             },
@@ -580,6 +611,9 @@ export const editorMachine = setup({
             'decorator.*': {
               actions: emit(({event}) => event),
             },
+            'delete.*': {
+              actions: emit(({event}) => event),
+            },
             'focus': {
               actions: emit(({event}) => event),
             },
@@ -589,12 +623,21 @@ export const editorMachine = setup({
             'list item.*': {
               actions: emit(({event}) => event),
             },
+            'move.*': {
+              actions: emit(({event}) => event),
+            },
             'select': {
               actions: emit(({event}) => event),
             },
+            'select.*': {
+              actions: emit(({event}) => event),
+            },
             'style.*': {
               actions: emit(({event}) => event),
             },
+            'text block.*': {
+              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

@@ -17,123 +17,58 @@ export function createWithEventListeners(
     subscriptions.push(() => {
       const subscription = editorActor.on('*', (event) => {
         switch (event.type) {
-          case 'annotation.add': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'annotation.add',
-                annotation: event.annotation,
-              },
-              editor,
-            })
-            break
-          }
-          case 'annotation.remove': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'annotation.remove',
-                annotation: event.annotation,
-              },
-              editor,
-            })
-            break
-          }
-          case 'blur': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'blur',
-              },
-              editor,
-            })
-            break
-          }
-          case 'custom.*': {
+          case 'custom.*':
             editorActor.send({
               type: 'custom behavior event',
               behaviorEvent: event.event,
               editor,
             })
             break
-          }
-          case 'decorator.toggle': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'decorator.toggle',
-                decorator: event.decorator,
-              },
-              editor,
-            })
-            break
-          }
-          case 'focus': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'focus',
-              },
-              editor,
-            })
-            break
-          }
-          case 'insert.block object': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'insert.block object',
-                placement: event.placement,
-                blockObject: event.blockObject,
-              },
-              editor,
-            })
-            break
-          }
-          case 'insert.inline object': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'insert.inline object',
-                inlineObject: event.inlineObject,
-              },
-              editor,
-            })
-            break
-          }
-          case 'list item.toggle': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'list item.toggle',
-                listItem: event.listItem,
-              },
-              editor,
-            })
-            break
-          }
-          case 'select': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'select',
-                selection: event.selection,
-              },
-              editor,
-            })
-            break
-          }
-          case 'style.toggle': {
+
+          case 'annotation.add':
+          case 'annotation.remove':
+          case 'annotation.toggle':
+          case 'block.set':
+          case 'block.unset':
+          case 'blur':
+          case 'data transfer.set':
+          case 'decorator.add':
+          case 'decorator.remove':
+          case 'decorator.toggle':
+          case 'delete.backward':
+          case 'delete.block':
+          case 'delete.forward':
+          case 'delete.text':
+          case 'deserialization.failure':
+          case 'deserialization.success':
+          case 'focus':
+          case 'insert.block':
+          case 'insert.block object':
+          case 'insert.inline object':
+          case 'insert.span':
+          case 'insert.text block':
+          case 'list item.add':
+          case 'list item.remove':
+          case 'list item.toggle':
+          case 'move.block':
+          case 'move.block down':
+          case 'move.block up':
+          case 'select':
+          case 'select.next block':
+          case 'select.previous block':
+          case 'serialization.failure':
+          case 'serialization.success':
+          case 'style.add':
+          case 'style.remove':
+          case 'style.toggle':
+          case 'text block.set':
+          case 'text block.unset':
             editorActor.send({
               type: 'behavior event',
-              behaviorEvent: {
-                type: 'style.toggle',
-                style: event.style,
-              },
+              behaviorEvent: event,
               editor,
             })
             break
-          }
         }
       })
 

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)
+  )
+}