@portabletext/editor 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -43,7 +43,7 @@
   ],
   "dependencies": {
     "@portabletext/patches": "1.1.0",
-    "@xstate/react": "^4.1.3",
+    "@xstate/react": "^5.0.0",
     "debug": "^4.3.4",
     "get-random-values-esm": "^1.0.2",
     "is-hotkey-esm": "^1.0.0",
@@ -54,15 +54,15 @@
     "slate-dom": "^0.111.0",
     "slate-react": "0.111.0",
     "use-effect-event": "^1.0.2",
-    "xstate": "^5.18.2"
+    "xstate": "^5.19.0"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.16",
-    "@sanity/block-tools": "^3.63.0",
+    "@sanity/block-tools": "^3.64.0",
     "@sanity/diff-match-patch": "^3.1.1",
     "@sanity/pkg-utils": "^6.11.10",
-    "@sanity/schema": "^3.63.0",
-    "@sanity/types": "^3.63.0",
+    "@sanity/schema": "^3.64.0",
+    "@sanity/types": "^3.64.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/debug": "^4.1.5",
@@ -90,9 +90,9 @@
     "@sanity/gherkin-driver": "^0.0.1"
   },
   "peerDependencies": {
-    "@sanity/block-tools": "^3.63.0",
-    "@sanity/schema": "^3.63.0",
-    "@sanity/types": "^3.63.0",
+    "@sanity/block-tools": "^3.64.0",
+    "@sanity/schema": "^3.64.0",
+    "@sanity/types": "^3.64.0",
     "react": "^16.9 || ^17 || ^18",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13"

package/src/editor/PortableTextEditor.tsx

@@ -136,6 +136,7 @@ export class PortableTextEditor extends Component<
     if (props.editor) {
       const editor = props.editor as Editor
       this.editorActor = editor._internal.editorActor
+      this.slateEditor = editor._internal.slateEditor
       this.editorActor.start()
       this.schemaTypes = this.editorActor.getSnapshot().context.schema
     } else {
@@ -163,6 +164,10 @@ export class PortableTextEditor extends Component<
       })
       this.editorActor.start()
 
+      this.slateEditor = createSlateEditor({
+        editorActor: this.editorActor,
+      })
+
       if (props.readOnly) {
         this.editorActor.send({
           type: 'toggle readOnly',
@@ -179,9 +184,6 @@ export class PortableTextEditor extends Component<
         })
       }
     }
-    this.slateEditor = createSlateEditor({
-      editorActor: this.editorActor,
-    })
     this.editable = createEditableAPI(
       this.slateEditor.instance,
       this.editorActor,
@@ -230,10 +232,6 @@ export class PortableTextEditor extends Component<
     }
   }
 
-  componentWillUnmount(): void {
-    this.slateEditor.destroy()
-  }
-
   public setEditable = (editable: EditableAPI) => {
     this.editable = {...this.editable, ...editable}
   }

package/src/editor/behavior/behavior.actions.ts

@@ -10,6 +10,7 @@ import type {PortableTextMemberSchemaTypes} from '../../types/editor'
 import {toSlateRange} from '../../utils/ranges'
 import {
   addAnnotationActionImplementation,
+  insertBlockObjectActionImplementation,
   removeAnnotationActionImplementation,
   toggleAnnotationActionImplementation,
 } from '../plugins/createWithEditableAPI'
@@ -112,6 +113,7 @@ const behaviorActionImplementations: BehaviourActionImplementations = {
       })
     }
   },
+  'insert block object': insertBlockObjectActionImplementation,
   'insert break': insertBreakActionImplementation,
   'insert soft break': insertSoftBreakActionImplementation,
   'insert text': ({action}) => {
@@ -169,6 +171,13 @@ export function performAction({
       })
       break
     }
+    case 'insert block object': {
+      behaviorActionImplementations['insert block object']({
+        context,
+        action,
+      })
+      break
+    }
     case 'insert text block': {
       behaviorActionImplementations['insert text block']({
         context,

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

@@ -1,3 +1,4 @@
+import {isPortableTextSpan} from '@portabletext/toolkit'
 import type {PortableTextMemberSchemaTypes} from '../../types/editor'
 import {defineBehavior} from './behavior.types'
 import {
@@ -10,18 +11,23 @@ import {
  * @alpha
  */
 export type MarkdownBehaviorsConfig = {
-  mapDefaultStyle: (schema: PortableTextMemberSchemaTypes) => string | undefined
-  mapHeadingStyle: (
+  mapBreakObject?: (
+    schema: PortableTextMemberSchemaTypes,
+  ) => {name: string; value?: {[prop: string]: unknown}} | undefined
+  mapDefaultStyle?: (
+    schema: PortableTextMemberSchemaTypes,
+  ) => string | undefined
+  mapHeadingStyle?: (
     schema: PortableTextMemberSchemaTypes,
     level: number,
   ) => string | undefined
-  mapBlockquoteStyle: (
+  mapBlockquoteStyle?: (
     schema: PortableTextMemberSchemaTypes,
   ) => string | undefined
-  mapUnorderedListStyle: (
+  mapUnorderedListStyle?: (
     schema: PortableTextMemberSchemaTypes,
   ) => string | undefined
-  mapOrderedListStyle: (
+  mapOrderedListStyle?: (
     schema: PortableTextMemberSchemaTypes,
   ) => string | undefined
 }
@@ -49,7 +55,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
 
       const caretAtTheEndOfQuote = context.selection.focus.offset === 1
       const looksLikeMarkdownQuote = /^>/.test(focusSpan.node.text)
-      const blockquoteStyle = config.mapBlockquoteStyle(context.schema)
+      const blockquoteStyle = config.mapBlockquoteStyle?.(context.schema)
 
       if (
         caretAtTheEndOfQuote &&
@@ -95,6 +101,66 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       ],
     ],
   })
+  const automaticBreak = defineBehavior({
+    on: 'insert text',
+    guard: ({context, event}) => {
+      const isDash = event.text === '-'
+
+      if (!isDash) {
+        return false
+      }
+
+      const breakObject = config.mapBreakObject?.(context.schema)
+      const focusBlock = getFocusTextBlock(context)
+      const selectionCollapsed = selectionIsCollapsed(context)
+
+      if (!breakObject || !focusBlock || !selectionCollapsed) {
+        return false
+      }
+
+      const onlyText = focusBlock.node.children.every(isPortableTextSpan)
+      const blockText = focusBlock.node.children
+        .map((child) => child.text ?? '')
+        .join('')
+
+      if (onlyText && blockText === '--') {
+        return {breakObject, focusBlock}
+      }
+
+      return false
+    },
+    actions: [
+      () => [
+        {
+          type: 'insert text',
+          text: '-',
+        },
+      ],
+      (_, {breakObject, focusBlock}) => [
+        {
+          type: 'insert block object',
+          ...breakObject,
+        },
+        {
+          type: 'delete',
+          selection: {
+            anchor: {
+              path: focusBlock.path,
+              offset: 0,
+            },
+            focus: {
+              path: focusBlock.path,
+              offset: 0,
+            },
+          },
+        },
+        {
+          type: 'insert text block',
+          decorators: [],
+        },
+      ],
+    ],
+  })
   const automaticHeadingOnSpace = defineBehavior({
     on: 'insert text',
     guard: ({context, event}) => {
@@ -125,7 +191,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
 
       const headingStyle =
         headingLevel !== undefined
-          ? config.mapHeadingStyle(context.schema, headingLevel)
+          ? config.mapHeadingStyle?.(context.schema, headingLevel)
           : undefined
 
       if (headingLevel !== undefined && headingStyle !== undefined) {
@@ -188,7 +254,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         focusTextBlock.node.children[0]._key === focusSpan.node._key &&
         context.selection.focus.offset === 0
 
-      const defaultStyle = config.mapDefaultStyle(context.schema)
+      const defaultStyle = config.mapDefaultStyle?.(context.schema)
 
       if (
         atTheBeginningOfBLock &&
@@ -227,9 +293,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const defaultStyle = config.mapDefaultStyle(context.schema)
+      const defaultStyle = config.mapDefaultStyle?.(context.schema)
       const looksLikeUnorderedList = /^(-|\*)/.test(focusSpan.node.text)
-      const unorderedListStyle = config.mapUnorderedListStyle(context.schema)
+      const unorderedListStyle = config.mapUnorderedListStyle?.(context.schema)
       const caretAtTheEndOfUnorderedList = context.selection.focus.offset === 1
 
       if (
@@ -248,7 +314,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       }
 
       const looksLikeOrderedList = /^1./.test(focusSpan.node.text)
-      const orderedListStyle = config.mapOrderedListStyle(context.schema)
+      const orderedListStyle = config.mapOrderedListStyle?.(context.schema)
       const caretAtTheEndOfOrderedList = context.selection.focus.offset === 2
 
       if (
@@ -302,6 +368,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
 
   const markdownBehaviors = [
     automaticBlockquoteOnSpace,
+    automaticBreak,
     automaticHeadingOnSpace,
     clearStyleOnBackspace,
     automaticListOnSpace,

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

@@ -94,6 +94,11 @@ export type BehaviorGuard<
  */
 export type BehaviorActionIntend =
   | BehaviorEvent
+  | {
+      type: 'insert block object'
+      name: string
+      value?: {[prop: string]: unknown}
+    }
   | {
       type: 'insert text block'
       decorators: Array<string>

package/src/editor/create-slate-editor.tsx

@@ -12,10 +12,12 @@ type SlateEditorConfig = {
   editorActor: EditorActor
 }
 
+/**
+ * @internal
+ */
 export type SlateEditor = {
   instance: PortableTextSlateEditor
   initialValue: Array<Descendant>
-  destroy: () => void
 }
 
 const slateEditors = new WeakMap<EditorActor, SlateEditor>()
@@ -45,12 +47,8 @@ export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
     unsubscriptions.push(subscription())
   }
 
-  const initialValue = [instance.pteCreateTextBlock({decorators: []})]
-
-  const slateEditor: SlateEditor = {
-    instance,
-    initialValue,
-    destroy: () => {
+  config.editorActor.subscribe((snapshot) => {
+    if (snapshot.status !== 'active') {
       debug('Destroying Slate editor')
       instance.destroy()
       for (const unsubscribe of unsubscriptions) {
@@ -58,7 +56,14 @@ export function createSlateEditor(config: SlateEditorConfig): SlateEditor {
       }
       subscriptions = []
       unsubscriptions = []
-    },
+    }
+  })
+
+  const initialValue = [instance.pteCreateTextBlock({decorators: []})]
+
+  const slateEditor: SlateEditor = {
+    instance,
+    initialValue,
   }
 
   slateEditors.set(config.editorActor, slateEditor)

package/src/editor/plugins/createWithEditableAPI.ts

@@ -206,77 +206,18 @@ export function createEditableAPI(
       type: TSchemaType,
       value?: {[prop: string]: any},
     ): Path => {
-      const block = toSlateValue(
-        [
-          {
-            _key: editorActor.getSnapshot().context.keyGenerator(),
-            _type: type.name,
-            ...(value ? value : {}),
-          },
-        ],
-        {schemaTypes: editorActor.getSnapshot().context.schema},
-      )[0] as unknown as Node
-
-      if (!editor.selection) {
-        const lastBlock = Array.from(
-          Editor.nodes(editor, {
-            match: (n) => !Editor.isEditor(n),
-            at: [],
-            reverse: true,
-          }),
-        )[0]
-
-        // If there is no selection, let's just insert the new block at the
-        // end of the document
-        Editor.insertNode(editor, block)
-
-        if (lastBlock && isEqualToEmptyEditor([lastBlock[0]], types)) {
-          // And if the last block was an empty text block, let's remove
-          // that too
-          Transforms.removeNodes(editor, {at: lastBlock[1]})
-        }
-
-        editor.onChange()
-
-        return (
-          toPortableTextRange(
-            fromSlateValue(
-              editor.children,
-              types.block.name,
-              KEY_TO_VALUE_ELEMENT.get(editor),
-            ),
-            editor.selection,
-            types,
-          )?.focus.path ?? []
-        )
-      }
-
-      const focusBlock = Array.from(
-        Editor.nodes(editor, {
-          at: editor.selection.focus.path.slice(0, 1),
-          match: (n) => n._type === types.block.name,
-        }),
-      )[0]
-
-      Editor.insertNode(editor, block)
-
-      if (focusBlock && isEqualToEmptyEditor([focusBlock[0]], types)) {
-        Transforms.removeNodes(editor, {at: focusBlock[1]})
-      }
-
-      editor.onChange()
-
-      return (
-        toPortableTextRange(
-          fromSlateValue(
-            editor.children,
-            types.block.name,
-            KEY_TO_VALUE_ELEMENT.get(editor),
-          ),
-          editor.selection,
-          types,
-        )?.focus.path || []
-      )
+      return insertBlockObjectActionImplementation({
+        context: {
+          keyGenerator: editorActor.getSnapshot().context.keyGenerator,
+          schema: types,
+        },
+        action: {
+          type: 'insert block object',
+          name: type.name,
+          value,
+          editor,
+        },
+      })
     },
     hasBlockStyle: (style: string): boolean => {
       try {
@@ -546,6 +487,85 @@ export function createEditableAPI(
   return editableApi
 }
 
+export const insertBlockObjectActionImplementation: BehaviourActionImplementation<
+  'insert block object',
+  Path
+> = ({context, action}) => {
+  const editor = action.editor
+  const types = context.schema
+  const block = toSlateValue(
+    [
+      {
+        _key: context.keyGenerator(),
+        _type: action.name,
+        ...(action.value ? action.value : {}),
+      },
+    ],
+    {schemaTypes: context.schema},
+  )[0] as unknown as Node
+
+  if (!editor.selection) {
+    const lastBlock = Array.from(
+      Editor.nodes(editor, {
+        match: (n) => !Editor.isEditor(n),
+        at: [],
+        reverse: true,
+      }),
+    )[0]
+
+    // If there is no selection, let's just insert the new block at the
+    // end of the document
+    Editor.insertNode(editor, block)
+
+    if (lastBlock && isEqualToEmptyEditor([lastBlock[0]], types)) {
+      // And if the last block was an empty text block, let's remove
+      // that too
+      Transforms.removeNodes(editor, {at: lastBlock[1]})
+    }
+
+    editor.onChange()
+
+    return (
+      toPortableTextRange(
+        fromSlateValue(
+          editor.children,
+          types.block.name,
+          KEY_TO_VALUE_ELEMENT.get(editor),
+        ),
+        editor.selection,
+        types,
+      )?.focus.path ?? []
+    )
+  }
+
+  const focusBlock = Array.from(
+    Editor.nodes(editor, {
+      at: editor.selection.focus.path.slice(0, 1),
+      match: (n) => n._type === types.block.name,
+    }),
+  )[0]
+
+  Editor.insertNode(editor, block)
+
+  if (focusBlock && isEqualToEmptyEditor([focusBlock[0]], types)) {
+    Transforms.removeNodes(editor, {at: focusBlock[1]})
+  }
+
+  editor.onChange()
+
+  return (
+    toPortableTextRange(
+      fromSlateValue(
+        editor.children,
+        types.block.name,
+        KEY_TO_VALUE_ELEMENT.get(editor),
+      ),
+      editor.selection,
+      types,
+    )?.focus.path || []
+  )
+}
+
 function isAnnotationActive({
   editor,
   annotation,

package/src/editor/plugins/with-plugins.ts

@@ -1,7 +1,7 @@
 import type {BaseOperation, Editor, Node, NodeEntry} from 'slate'
 import type {PortableTextSlateEditor} from '../../types/editor'
-import type {createEditorOptions} from '../../types/options'
 import {createOperationToPatches} from '../../utils/operationToPatches'
+import type {EditorActor} from '../editor-machine'
 import {createWithEventListeners} from './create-with-event-listeners'
 import {createWithMaxBlocks} from './createWithMaxBlocks'
 import {createWithObjectKeys} from './createWithObjectKeys'
@@ -26,9 +26,14 @@ const originalFnMap = new WeakMap<
   OriginalEditorFunctions
 >()
 
+type PluginsOptions = {
+  editorActor: EditorActor
+  subscriptions: Array<() => () => void>
+}
+
 export const withPlugins = <T extends Editor>(
   editor: T,
-  options: createEditorOptions,
+  options: PluginsOptions,
 ): PortableTextSlateEditor => {
   const e = editor as T & PortableTextSlateEditor
   const {editorActor} = options

package/src/editor/use-editor.ts

@@ -7,6 +7,7 @@ import {useActorRef, useSelector} from '@xstate/react'
 import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
 import {compileType} from '../utils/schema'
 import type {Behavior, PickFromUnion} from './behavior/behavior.types'
+import {createSlateEditor, type SlateEditor} from './create-slate-editor'
 import {compileSchemaDefinition, type SchemaDefinition} from './define-schema'
 import {
   editorMachine,
@@ -54,6 +55,7 @@ export type Editor = {
   readOnly: boolean
   _internal: {
     editorActor: EditorActor
+    slateEditor: SlateEditor
   }
 }
 
@@ -74,6 +76,7 @@ export function useEditor(config: EditorConfig): Editor {
           ),
     },
   })
+  const slateEditor = createSlateEditor({editorActor})
   const readOnly = useSelector(editorActor, (s) => s.context.readOnly)
 
   return {
@@ -84,6 +87,7 @@ export function useEditor(config: EditorConfig): Editor {
     readOnly,
     _internal: {
       editorActor,
+      slateEditor,
     },
   }
 }

package/src/index.ts

@@ -15,6 +15,7 @@ export {
   type BehaviorGuard,
   type PickFromUnion,
 } from './editor/behavior/behavior.types'
+export type {SlateEditor} from './editor/create-slate-editor'
 export {
   defineSchema,
   type BaseDefinition,
@@ -44,4 +45,4 @@ export {
   type EditorEvent,
 } from './editor/use-editor'
 export * from './types/editor'
-export * from './types/options'
+export type {HotkeyOptions} from './types/options'

package/src/types/options.ts

@@ -1,15 +1,6 @@
 import type {BaseSyntheticEvent} from 'react'
-import type {EditorActor} from '../editor/editor-machine'
 import type {PortableTextEditor} from '../editor/PortableTextEditor'
 
-/**
- * @internal
- */
-export type createEditorOptions = {
-  editorActor: EditorActor
-  subscriptions: Array<() => () => void>
-}
-
 /**
  * @beta
  */

package/src/utils/__tests__/operationToPatches.test.ts

@@ -2,9 +2,9 @@ import type {PortableTextTextBlock} from '@sanity/types'
 import {createEditor, type Descendant} from 'slate'
 import {beforeEach, describe, expect, it} from 'vitest'
 import {createActor} from 'xstate'
-import {editorMachine} from '../..'
 import {schemaType} from '../../editor/__tests__/PortableTextEditorTester'
 import {coreBehaviors} from '../../editor/behavior/behavior.core'
+import {editorMachine} from '../../editor/editor-machine'
 import {defaultKeyGenerator} from '../../editor/key-generator'
 import {withPlugins} from '../../editor/plugins/with-plugins'
 import {getPortableTextMemberSchemaTypes} from '../getPortableTextMemberSchemaTypes'

package/src/utils/__tests__/patchToOperations.test.ts

@@ -2,9 +2,9 @@ import type {Patch} from '@portabletext/patches'
 import {createEditor, type Descendant} from 'slate'
 import {beforeEach, describe, expect, it} from 'vitest'
 import {createActor} from 'xstate'
-import {editorMachine} from '../..'
 import {schemaType} from '../../editor/__tests__/PortableTextEditorTester'
 import {coreBehaviors} from '../../editor/behavior/behavior.core'
+import {editorMachine} from '../../editor/editor-machine'
 import {defaultKeyGenerator} from '../../editor/key-generator'
 import {withPlugins} from '../../editor/plugins/with-plugins'
 import {createApplyPatch} from '../applyPatch'