@portabletext/editor 1.13.0 → 1.14.1

package/src/editor/behavior/behavior.markdown.ts

@@ -1,15 +1,15 @@
 import {isPortableTextTextBlock} from '@sanity/types'
-import type {PortableTextMemberSchemaTypes} from '../../types/editor'
-import {defineBehavior} from './behavior.types'
+import {getBlockTextBefore} from '../../selectors/selector.get-text-before'
 import {
   getFocusBlock,
   getFocusSpan,
   getFocusTextBlock,
-  getTextBlockText,
   selectionIsCollapsed,
-} from './behavior.utils'
-import {spanSelectionPointToBlockOffset} from './behavior.utils.block-offset'
-import {getBlockTextBefore} from './behavior.utilts.get-text-before'
+} from '../../selectors/selectors'
+import type {PortableTextMemberSchemaTypes} from '../../types/editor'
+import {getTextBlockText} from '../utils/utils'
+import {spanSelectionPointToBlockOffset} from '../utils/utils.block-offset'
+import {defineBehavior} from './behavior.types'
 
 /**
  * @alpha
@@ -41,7 +41,7 @@ export type MarkdownBehaviorsConfig = {
  */
 export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
   const automaticBlockquoteOnSpace = defineBehavior({
-    on: 'insert text',
+    on: 'insert.text',
     guard: ({context, event}) => {
       const isSpace = event.text === ' '
 
@@ -49,9 +49,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const selectionCollapsed = selectionIsCollapsed(context)
-      const focusTextBlock = getFocusTextBlock(context)
-      const focusSpan = getFocusSpan(context)
+      const selectionCollapsed = selectionIsCollapsed({context})
+      const focusTextBlock = getFocusTextBlock({context})
+      const focusSpan = getFocusSpan({context})
 
       if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
         return false
@@ -76,7 +76,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       const blockText = getTextBlockText(focusTextBlock.node)
       const caretAtTheEndOfQuote = blockOffset.offset === 1
       const looksLikeMarkdownQuote = /^>/.test(blockText)
-      const blockquoteStyle = config.blockquoteStyle?.({schema: context.schema})
+      const blockquoteStyle = config.blockquoteStyle?.(context)
 
       if (
         caretAtTheEndOfQuote &&
@@ -91,23 +91,23 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
     actions: [
       () => [
         {
-          type: 'insert text',
+          type: 'insert.text',
           text: ' ',
         },
       ],
-      (_, {focusTextBlock, style}) => [
+      ({focusTextBlock, style}) => [
         {
-          type: 'unset block',
+          type: 'text block.unset',
           props: ['listItem', 'level'],
-          paths: [focusTextBlock.path],
+          at: focusTextBlock.path,
         },
         {
-          type: 'set block',
+          type: 'text block.set',
           style,
-          paths: [focusTextBlock.path],
+          at: focusTextBlock.path,
         },
         {
-          type: 'delete text',
+          type: 'delete.text',
           anchor: {
             path: focusTextBlock.path,
             offset: 0,
@@ -121,7 +121,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
     ],
   })
   const automaticHr = defineBehavior({
-    on: 'insert text',
+    on: 'insert.text',
     guard: ({context, event}) => {
       const hrCharacter =
         event.text === '-'
@@ -136,20 +136,15 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const hrObject = config.horizontalRuleObject?.({
-        schema: context.schema,
-      })
-      const focusBlock = getFocusTextBlock(context)
-      const selectionCollapsed = selectionIsCollapsed(context)
+      const hrObject = config.horizontalRuleObject?.(context)
+      const focusBlock = getFocusTextBlock({context})
+      const selectionCollapsed = selectionIsCollapsed({context})
 
       if (!hrObject || !focusBlock || !selectionCollapsed) {
         return false
       }
 
-      const textBefore = getBlockTextBefore({
-        value: context.value,
-        point: context.selection.focus,
-      })
+      const textBefore = getBlockTextBefore({context})
       const hrBlockOffsets = {
         anchor: {
           path: focusBlock.path,
@@ -168,20 +163,20 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       return false
     },
     actions: [
-      (_, {hrCharacter}) => [
+      ({hrCharacter}) => [
         {
-          type: 'insert text',
+          type: 'insert.text',
           text: hrCharacter,
         },
       ],
-      (_, {hrObject, hrBlockOffsets}) => [
+      ({hrObject, hrBlockOffsets}) => [
         {
-          type: 'insert block object',
+          type: 'insert.block object',
           placement: 'before',
           blockObject: hrObject,
         },
         {
-          type: 'delete text',
+          type: 'delete.text',
           ...hrBlockOffsets,
         },
       ],
@@ -193,10 +188,8 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       const text = event.data.getData('text/plain')
       const hrRegExp = /^(---)$|(___)$|(\*\*\*)$/gm
       const hrCharacters = text.match(hrRegExp)?.[0]
-      const hrObject = config.horizontalRuleObject?.({
-        schema: context.schema,
-      })
-      const focusBlock = getFocusBlock(context)
+      const hrObject = config.horizontalRuleObject?.(context)
+      const focusBlock = getFocusBlock({context})
 
       if (!hrCharacters || !hrObject || !focusBlock) {
         return false
@@ -205,30 +198,30 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       return {hrCharacters, hrObject, focusBlock}
     },
     actions: [
-      (_, {hrCharacters}) => [
+      ({hrCharacters}) => [
         {
-          type: 'insert text',
+          type: 'insert.text',
           text: hrCharacters,
         },
       ],
-      (_, {hrObject, focusBlock}) =>
+      ({hrObject, focusBlock}) =>
         isPortableTextTextBlock(focusBlock.node)
           ? [
               {
-                type: 'insert text block',
+                type: 'insert.text block',
                 textBlock: {children: focusBlock.node.children},
                 placement: 'after',
               },
               {
-                type: 'insert block object',
+                type: 'insert.block object',
                 blockObject: hrObject,
                 placement: 'after',
               },
-              {type: 'delete block', blockPath: focusBlock.path},
+              {type: 'delete.block', blockPath: focusBlock.path},
             ]
           : [
               {
-                type: 'insert block object',
+                type: 'insert.block object',
                 blockObject: hrObject,
                 placement: 'after',
               },
@@ -236,7 +229,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
     ],
   })
   const automaticHeadingOnSpace = defineBehavior({
-    on: 'insert text',
+    on: 'insert.text',
     guard: ({context, event}) => {
       const isSpace = event.text === ' '
 
@@ -244,9 +237,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const selectionCollapsed = selectionIsCollapsed(context)
-      const focusTextBlock = getFocusTextBlock(context)
-      const focusSpan = getFocusSpan(context)
+      const selectionCollapsed = selectionIsCollapsed({context})
+      const focusTextBlock = getFocusTextBlock({context})
+      const focusSpan = getFocusSpan({context})
 
       if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
         return false
@@ -297,23 +290,23 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
     actions: [
       () => [
         {
-          type: 'insert text',
+          type: 'insert.text',
           text: ' ',
         },
       ],
-      (_, {focusTextBlock, style, level}) => [
+      ({focusTextBlock, style, level}) => [
         {
-          type: 'unset block',
+          type: 'text block.unset',
           props: ['listItem', 'level'],
-          paths: [focusTextBlock.path],
+          at: focusTextBlock.path,
         },
         {
-          type: 'set block',
+          type: 'text block.set',
           style,
-          paths: [focusTextBlock.path],
+          at: focusTextBlock.path,
         },
         {
-          type: 'delete text',
+          type: 'delete.text',
           anchor: {
             path: focusTextBlock.path,
             offset: 0,
@@ -327,11 +320,11 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
     ],
   })
   const clearStyleOnBackspace = defineBehavior({
-    on: 'delete backward',
+    on: 'delete.backward',
     guard: ({context}) => {
-      const selectionCollapsed = selectionIsCollapsed(context)
-      const focusTextBlock = getFocusTextBlock(context)
-      const focusSpan = getFocusSpan(context)
+      const selectionCollapsed = selectionIsCollapsed({context})
+      const focusTextBlock = getFocusTextBlock({context})
+      const focusSpan = getFocusSpan({context})
 
       if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
         return false
@@ -341,7 +334,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         focusTextBlock.node.children[0]._key === focusSpan.node._key &&
         context.selection.focus.offset === 0
 
-      const defaultStyle = config.defaultStyle?.({schema: context.schema})
+      const defaultStyle = config.defaultStyle?.(context)
 
       if (
         atTheBeginningOfBLock &&
@@ -354,17 +347,17 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       return false
     },
     actions: [
-      (_, {defaultStyle, focusTextBlock}) => [
+      ({defaultStyle, focusTextBlock}) => [
         {
-          type: 'set block',
+          type: 'text block.set',
           style: defaultStyle,
-          paths: [focusTextBlock.path],
+          at: focusTextBlock.path,
         },
       ],
     ],
   })
   const automaticListOnSpace = defineBehavior({
-    on: 'insert text',
+    on: 'insert.text',
     guard: ({context, event}) => {
       const isSpace = event.text === ' '
 
@@ -372,9 +365,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const selectionCollapsed = selectionIsCollapsed(context)
-      const focusTextBlock = getFocusTextBlock(context)
-      const focusSpan = getFocusSpan(context)
+      const selectionCollapsed = selectionIsCollapsed({context})
+      const focusTextBlock = getFocusTextBlock({context})
+      const focusSpan = getFocusSpan({context})
 
       if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
         return false
@@ -397,11 +390,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       }
 
       const blockText = getTextBlockText(focusTextBlock.node)
-      const defaultStyle = config.defaultStyle?.({schema: context.schema})
+      const defaultStyle = config.defaultStyle?.(context)
       const looksLikeUnorderedList = /^(-|\*)/.test(blockText)
-      const unorderedListStyle = config.unorderedListStyle?.({
-        schema: context.schema,
-      })
+      const unorderedListStyle = config.unorderedListStyle?.(context)
       const caretAtTheEndOfUnorderedList = blockOffset.offset === 1
 
       if (
@@ -419,9 +410,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       }
 
       const looksLikeOrderedList = /^1\./.test(blockText)
-      const orderedListStyle = config.orderedListStyle?.({
-        schema: context.schema,
-      })
+      const orderedListStyle = config.orderedListStyle?.(context)
       const caretAtTheEndOfOrderedList = blockOffset.offset === 2
 
       if (
@@ -443,20 +432,20 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
     actions: [
       () => [
         {
-          type: 'insert text',
+          type: 'insert.text',
           text: ' ',
         },
       ],
-      (_, {focusTextBlock, style, listItem, listItemLength}) => [
+      ({focusTextBlock, style, listItem, listItemLength}) => [
         {
-          type: 'set block',
+          type: 'text block.set',
           listItem,
           level: 1,
           style,
-          paths: [focusTextBlock.path],
+          at: focusTextBlock.path,
         },
         {
-          type: 'delete text',
+          type: 'delete.text',
           anchor: {
             path: focusTextBlock.path,
             offset: 0,

package/src/editor/behavior/behavior.types.ts

@@ -1,25 +1,8 @@
-import type {
-  KeyedSegment,
-  PortableTextBlock,
-  PortableTextTextBlock,
-} from '@sanity/types'
+import type {KeyedSegment, PortableTextTextBlock} from '@sanity/types'
 import type {TextUnit} from 'slate'
 import type {TextInsertTextOptions} from 'slate/dist/interfaces/transforms/text'
-import type {
-  EditorSelection,
-  PortableTextMemberSchemaTypes,
-  PortableTextSlateEditor,
-} from '../../types/editor'
-import type {BlockOffset} from './behavior.utils.block-offset'
-
-/**
- * @alpha
- */
-export type BehaviorContext = {
-  schema: PortableTextMemberSchemaTypes
-  value: Array<PortableTextBlock>
-  selection: NonNullable<EditorSelection>
-}
+import type {EditorSelection, PortableTextSlateEditor} from '../../types/editor'
+import type {EditorContext} from '../editor-snapshot'
 
 /**
  * @alpha
@@ -45,6 +28,9 @@ export type BehaviorEvent =
         value: {[prop: string]: unknown}
       }
     }
+  | {
+      type: 'blur'
+    }
   | {
       type: 'copy'
       data: DataTransfer
@@ -62,24 +48,39 @@ export type BehaviorEvent =
       decorator: string
     }
   | {
-      type: 'delete backward'
+      type: 'delete.backward'
       unit: TextUnit
     }
   | {
-      type: 'delete forward'
+      type: 'delete.forward'
       unit: TextUnit
     }
   | {
       type: 'focus'
     }
   | {
-      type: 'insert soft break'
+      type: 'insert.block object'
+      placement: 'auto' | 'after' | 'before'
+      blockObject: {
+        name: string
+        value?: {[prop: string]: unknown}
+      }
     }
   | {
-      type: 'insert break'
+      type: 'insert.inline object'
+      inlineObject: {
+        name: string
+        value?: {[prop: string]: unknown}
+      }
     }
   | {
-      type: 'insert text'
+      type: 'insert.soft break'
+    }
+  | {
+      type: 'insert.break'
+    }
+  | {
+      type: 'insert.text'
       text: string
       options?: TextInsertTextOptions
     }
@@ -101,6 +102,14 @@ export type BehaviorEvent =
         'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
       >
     }
+  | {
+      type: 'list item.toggle'
+      listItem: string
+    }
+  | {
+      type: 'style.toggle'
+      style: string
+    }
 
 /**
  * @alpha
@@ -112,8 +121,8 @@ export type BehaviorGuard<
   context,
   event,
 }: {
+  context: EditorContext
   event: TBehaviorEvent
-  context: BehaviorContext
 }) => TGuardResponse | false
 
 /**
@@ -122,15 +131,7 @@ export type BehaviorGuard<
 export type BehaviorActionIntend =
   | BehaviorEvent
   | {
-      type: 'insert block object'
-      placement: 'auto' | 'after' | 'before'
-      blockObject: {
-        name: string
-        value?: {[prop: string]: unknown}
-      }
-    }
-  | {
-      type: 'insert span'
+      type: 'insert.span'
       text: string
       annotations?: Array<{
         name: string
@@ -139,35 +140,42 @@ export type BehaviorActionIntend =
       decorators?: Array<string>
     }
   | {
-      type: 'insert text block'
+      type: 'insert.text block'
       placement: 'auto' | 'after' | 'before'
       textBlock?: {
         children?: PortableTextTextBlock['children']
       }
     }
   | {
-      type: 'move block'
-      blockPath: [KeyedSegment]
+      type: 'list item.add'
+      listItem: string
+    }
+  | {
+      type: 'list item.remove'
+      listItem: string
+    }
+  | {
+      type: 'move.block'
+      at: [KeyedSegment]
       to: [KeyedSegment]
     }
   | {
-      type: 'set block'
-      paths: Array<[KeyedSegment]>
-      style?: string
-      listItem?: string
-      level?: number
+      type: 'move.block down'
+      at: [KeyedSegment]
+    }
+  | {
+      type: 'move.block up'
+      at: [KeyedSegment]
     }
   | {
-      type: 'unset block'
-      paths: Array<[KeyedSegment]>
-      props: Array<'style' | 'listItem' | 'level'>
+      type: 'noop'
     }
   | {
-      type: 'delete block'
+      type: 'delete.block'
       blockPath: [KeyedSegment]
     }
   | {
-      type: 'delete text'
+      type: 'delete.text'
       anchor: BlockOffset
       focus: BlockOffset
     }
@@ -188,6 +196,26 @@ export type BehaviorActionIntend =
   | {
       type: 'reselect'
     }
+  | {
+      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'>
+    }
 
 /**
  * @alpha
@@ -219,23 +247,13 @@ export type Behavior<
   /**
    * Array of behavior action sets.
    */
-  actions: Array<BehaviorActionIntendSet<TBehaviorEventType, TGuardResponse>>
+  actions: Array<BehaviorActionIntendSet<TGuardResponse>>
 }
 
 /**
  * @alpha
  */
-export type BehaviorActionIntendSet<
-  TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
-  TGuardResponse = true,
-> = (
-  {
-    context,
-    event,
-  }: {
-    context: BehaviorContext
-    event: PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
-  },
+export type BehaviorActionIntendSet<TGuardResponse = true> = (
   guardResponse: TGuardResponse,
 ) => Array<
   OmitFromUnion<
@@ -255,6 +273,14 @@ export function defineBehavior<
   return behavior as unknown as Behavior
 }
 
+/**
+ * @alpha
+ */
+export type BlockOffset = {
+  path: [KeyedSegment]
+  offset: number
+}
+
 /**
  * @alpha
  */

package/src/editor/{use-editor.ts → create-editor.ts}

@@ -53,7 +53,15 @@ export type EditorEvent = PickFromUnion<
   InternalEditorEvent,
   'type',
   | 'annotation.toggle'
+  | 'blur'
+  | 'decorator.add'
+  | 'decorator.remove'
+  | 'decorator.toggle'
   | 'focus'
+  | 'insert.block object'
+  | 'insert.inline object'
+  | 'list item.toggle'
+  | 'style.toggle'
   | 'patches'
   | 'toggle readOnly'
   | 'update behaviors'
@@ -66,15 +74,15 @@ export type EditorEvent = PickFromUnion<
 export type Editor = {
   send: (event: EditorEvent) => void
   on: ActorRef<Snapshot<unknown>, EventObject, EditorEmittedEvent>['on']
-  editable: EditableAPI
   _internal: {
+    editable: EditableAPI
     editorActor: EditorActor
     slateEditor: SlateEditor
   }
 }
 
 /**
- * @alpha
+ * @internal
  */
 export function createEditor(config: EditorConfig): Editor {
   const editorActor = createActor(editorMachine, {
@@ -96,18 +104,15 @@ export function createEditor(config: EditorConfig): Editor {
         // @ts-ignore
         listener,
       ),
-    editable,
     _internal: {
+      editable,
       editorActor,
       slateEditor,
     },
   }
 }
 
-/**
- * @alpha
- */
-export function useEditor(config: EditorConfig): Editor {
+export function useCreateEditor(config: EditorConfig): Editor {
   const editorActor = useActorRef(editorMachine, {
     input: editorConfigToMachineInput(config),
   })
@@ -135,8 +140,8 @@ export function useEditor(config: EditorConfig): Editor {
     () => ({
       send,
       on,
-      editable,
       _internal: {
+        editable,
         editorActor,
         slateEditor,
       },

package/src/editor/editor-event-listener.tsx

@@ -1,7 +1,7 @@
 import {useEffect} from 'react'
 import {useEffectEvent} from 'use-effect-event'
 import type {EditorEmittedEvent} from './editor-machine'
-import {useEditorContext} from './editor-provider'
+import {useEditor} from './editor-provider'
 
 /**
  * @alpha
@@ -9,7 +9,7 @@ import {useEditorContext} from './editor-provider'
 export function EditorEventListener(props: {
   on: (event: EditorEmittedEvent) => void
 }) {
-  const editor = useEditorContext()
+  const editor = useEditor()
   const on = useEffectEvent(props.on)
 
   useEffect(() => {