@portabletext/editor 1.17.1 → 1.18.0

package/src/behaviors/behavior.core.ts

@@ -9,7 +9,7 @@ const softReturn = defineBehavior({
 })
 
 /**
- * @alpha
+ * @beta
  */
 export const coreBehaviors = [
   softReturn,
@@ -29,7 +29,7 @@ export const coreBehaviors = [
 ]
 
 /**
- * @alpha
+ * @beta
  */
 export const coreBehavior = {
   softReturn,

package/src/behaviors/behavior.emoji-picker.ts

@@ -8,7 +8,7 @@ const incompleteEmojiRegEx = /:([a-zA-Z-_0-9]+)$/
 const emojiRegEx = /:([a-zA-Z-_0-9]+):$/
 
 /**
- * @alpha
+ * @beta
  */
 export type EmojiPickerBehaviorsConfig<TEmojiMatch> = {
   /**
@@ -24,7 +24,7 @@ export type EmojiPickerBehaviorsConfig<TEmojiMatch> = {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export function createEmojiPickerBehaviors<TEmojiMatch>(
   config: EmojiPickerBehaviorsConfig<TEmojiMatch>,
@@ -146,6 +146,12 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
     defineBehavior({
       on: 'key.down',
       guard: ({context, event}) => {
+        const matches = emojiPickerActor.getSnapshot().context.matches
+
+        if (matches.length === 0) {
+          return false
+        }
+
         const isShift = isHotkey('Shift', event.keyboardEvent)
         const isColon = event.keyboardEvent.key === ':'
         const isEmojiChar = emojiCharRegEx.test(event.keyboardEvent.key)
@@ -158,7 +164,6 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
         const isArrowUp = isHotkey('ArrowUp', event.keyboardEvent)
         const isEnter = isHotkey('Enter', event.keyboardEvent)
         const isTab = isHotkey('Tab', event.keyboardEvent)
-        const matches = emojiPickerActor.getSnapshot().context.matches
 
         if (isEnter || isTab) {
           const selectedIndex =

package/src/behaviors/behavior.links.ts

@@ -3,7 +3,7 @@ import * as selectors from '../selectors'
 import {defineBehavior} from './behavior.types'
 
 /**
- * @alpha
+ * @beta
  */
 export type LinkBehaviorsConfig = {
   linkAnnotation?: (context: {
@@ -13,7 +13,7 @@ export type LinkBehaviorsConfig = {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export function createLinkBehaviors(config: LinkBehaviorsConfig) {
   const pasteLinkOnSelection = defineBehavior({

package/src/behaviors/behavior.markdown.ts

@@ -7,7 +7,7 @@ import {getBlockTextBefore} from '../selectors/selector.get-text-before'
 import {defineBehavior} from './behavior.types'
 
 /**
- * @alpha
+ * @beta
  */
 export type MarkdownBehaviorsConfig = {
   horizontalRuleObject?: (context: {
@@ -24,7 +24,7 @@ export type MarkdownBehaviorsConfig = {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
   const automaticBlockquoteOnSpace = defineBehavior({

package/src/behaviors/behavior.types.ts

@@ -6,7 +6,7 @@ import type {PickFromUnion} from '../type-utils'
 import type {EditorSelection, PortableTextSlateEditor} from '../types/editor'
 
 /**
- * @alpha
+ * @beta
  */
 export type SyntheticBehaviorEvent =
   | {
@@ -91,7 +91,7 @@ export type SyntheticBehaviorEvent =
     }
 
 /**
- * @alpha
+ * @beta
  */
 export type NativeBehaviorEvent =
   | {
@@ -118,7 +118,7 @@ export type NativeBehaviorEvent =
     }
 
 /**
- * @alpha
+ * @beta
  */
 export type BehaviorActionIntend =
   | SyntheticBehaviorEvent
@@ -210,19 +210,19 @@ export type BehaviorActionIntend =
     }
 
 /**
- * @alpha
+ * @beta
  */
 export type BehaviorAction = BehaviorActionIntend & {
   editor: PortableTextSlateEditor
 }
 
 /**
- * @alpha
+ * @beta
  */
 export type BehaviorEvent = SyntheticBehaviorEvent | NativeBehaviorEvent
 
 /**
- * @alpha
+ * @beta
  */
 export type Behavior<
   TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
@@ -248,7 +248,7 @@ export type Behavior<
 }
 
 /**
- * @alpha
+ * @beta
  */
 export type BehaviorGuard<
   TBehaviorEvent extends BehaviorEvent,
@@ -262,7 +262,7 @@ export type BehaviorGuard<
 }) => TGuardResponse | false
 
 /**
- * @alpha
+ * @beta
  */
 export type BehaviorActionIntendSet<
   TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
@@ -279,7 +279,7 @@ export type BehaviorActionIntendSet<
 ) => Array<BehaviorActionIntend>
 
 /**
- * @alpha
+ * @beta
  */
 export function defineBehavior<
   TAnyBehaviorEventType extends BehaviorEvent['type'],
@@ -289,7 +289,7 @@ export function defineBehavior<
 }
 
 /**
- * @alpha
+ * @beta
  */
 export type BlockOffset = {
   path: [KeyedSegment]

package/src/editor/PortableTextEditor.tsx

@@ -42,6 +42,7 @@ const debug = debugWithName('component:PortableTextEditor')
  * Props for the PortableTextEditor component
  *
  * @public
+ * @deprecated Use `EditorProvider` instead
  */
 export type PortableTextEditorProps<
   TEditor extends Editor | undefined = undefined,
@@ -106,6 +107,7 @@ export type PortableTextEditorProps<
 /**
  * The main Portable Text Editor component.
  * @public
+ * @deprecated Use `EditorProvider` instead
  */
 export class PortableTextEditor extends Component<
   PortableTextEditorProps<Editor | undefined>

package/src/editor/__tests__/self-solving.test.tsx

@@ -169,6 +169,20 @@ describe('Feature: Self-solving', () => {
               markDefs: [],
             }),
           ],
+          value: [
+            block({
+              _key: 'b1',
+              children: [
+                span({
+                  _key: 's1',
+                  text: 'foo',
+                  marks: ['strong'],
+                }),
+              ],
+              style: 'normal',
+              markDefs: [],
+            }),
+          ],
         })
       }
     })

package/src/editor/components/Synchronizer.tsx

@@ -51,7 +51,12 @@ export function Synchronizer(props: SynchronizerProps) {
       }
       if (event.type === 'mutation') {
         syncActorRef.send({type: 'mutation'})
-        editorActor.send(event)
+        editorActor.send({
+          type: 'mutation',
+          patches: event.patches,
+          snapshot: event.snapshot,
+          value: event.snapshot,
+        })
       }
     })
 

package/src/editor/create-editor.ts

@@ -24,13 +24,18 @@ import {
   type EditorEmittedEvent,
   type InternalEditorEvent,
 } from './editor-machine'
+import {getEditorSnapshot} from './editor-selector'
+import type {EditorSnapshot} from './editor-snapshot'
 import {defaultKeyGenerator} from './key-generator'
 import {createEditableAPI} from './plugins/createWithEditableAPI'
 
 /**
- * @alpha
+ * @public
  */
 export type EditorConfig = {
+  /**
+   * @beta
+   */
   behaviors?: Array<Behavior>
   keyGenerator?: () => string
   /**
@@ -51,7 +56,7 @@ export type EditorConfig = {
 )
 
 /**
- * @alpha
+ * @public
  */
 export type EditorEvent = PickFromUnion<
   InternalEditorEvent,
@@ -75,9 +80,10 @@ export type EditorEvent = PickFromUnion<
 >
 
 /**
- * @alpha
+ * @public
  */
 export type Editor = {
+  getSnapshot: () => EditorSnapshot
   send: (event: EditorEvent) => void
   on: ActorRef<Snapshot<unknown>, EventObject, EditorEmittedEvent>['on']
   _internal: {
@@ -126,6 +132,11 @@ function createEditorFromActor(editorActor: EditorActor): Editor {
   const editable = createEditableAPI(slateEditor.instance, editorActor)
 
   return {
+    getSnapshot: () =>
+      getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: slateEditor.instance,
+      }),
     send: (event) => {
       editorActor.send(event)
     },

package/src/editor/define-schema.ts

@@ -10,7 +10,7 @@ import type {PortableTextMemberSchemaTypes} from '../types/editor'
 import {createEditorSchema} from './create-editor-schema'
 
 /**
- * @alpha
+ * @public
  */
 export type BaseDefinition = {
   name: string
@@ -19,7 +19,7 @@ export type BaseDefinition = {
 }
 
 /**
- * @alpha
+ * @public
  */
 export type SchemaDefinition<
   TBaseDefinition extends BaseDefinition = BaseDefinition,
@@ -33,7 +33,7 @@ export type SchemaDefinition<
 }
 
 /**
- * @alpha
+ * @public
  */
 export function defineSchema<const TSchemaDefinition extends SchemaDefinition>(
   definition: TSchemaDefinition,
@@ -42,7 +42,7 @@ export function defineSchema<const TSchemaDefinition extends SchemaDefinition>(
 }
 
 /**
- * @alpha
+ * @public
  */
 export type EditorSchema = PortableTextMemberSchemaTypes
 

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

@@ -4,7 +4,7 @@ import type {EditorEmittedEvent} from './editor-machine'
 import {useEditor} from './editor-provider'
 
 /**
- * @alpha
+ * @public
  */
 export function EditorEventListener(props: {
   on: (event: EditorEmittedEvent) => void

package/src/editor/editor-machine.ts

@@ -15,7 +15,6 @@ import {coreBehaviors} from '../behaviors/behavior.core'
 import type {
   Behavior,
   BehaviorAction,
-  BehaviorActionIntend,
   NativeBehaviorEvent,
   SyntheticBehaviorEvent,
 } from '../behaviors/behavior.types'
@@ -59,7 +58,11 @@ export type PatchesEvent = {
 export type MutationEvent = {
   type: 'mutation'
   patches: Array<Patch>
+  /**
+   * @deprecated Use `value` instead
+   */
   snapshot: Array<PortableTextBlock> | undefined
+  value: Array<PortableTextBlock> | undefined
 }
 
 /**
@@ -75,11 +78,6 @@ export type InternalEditorEvent =
       editor: PortableTextSlateEditor
       nativeEvent?: {preventDefault: () => void}
     }
-  | {
-      type: 'behavior action intends'
-      editor: PortableTextSlateEditor
-      actionIntends: Array<BehaviorActionIntend>
-    }
   | {
       type: 'update readOnly'
       readOnly: boolean
@@ -107,7 +105,7 @@ export type InternalEditorEvent =
     >
 
 /**
- * @alpha
+ * @public
  */
 export type EditorEmittedEvent = PickFromUnion<
   InternalEditorEmittedEvent,
@@ -265,11 +263,13 @@ export const editorMachine = setup({
           return
         }
 
-        enqueue.raise({
-          type: 'behavior action intends',
-          editor: event.editor,
-          actionIntends: [defaultAction],
+        Editor.withoutNormalizing(event.editor, () => {
+          performAction({
+            context,
+            action: defaultAction,
+          })
         })
+        event.editor.onChange()
         return
       }
 
@@ -324,11 +324,32 @@ export const editorMachine = setup({
                 (actionIntend) => actionIntend.type !== 'effect',
               ))
 
-          enqueue.raise({
-            type: 'behavior action intends',
-            editor: event.editor,
-            actionIntends,
+          Editor.withoutNormalizing(event.editor, () => {
+            for (const actionIntend of actionIntends) {
+              const action = {
+                ...actionIntend,
+                editor: event.editor,
+              }
+
+              performAction({context, action})
+            }
           })
+          event.editor.onChange()
+
+          if (
+            actionIntends.some(
+              (actionIntend) => actionIntend.type === 'reselect',
+            )
+          ) {
+            enqueue.raise({
+              type: 'selection',
+              selection: toPortableTextRange(
+                event.editor.children,
+                event.editor.selection,
+                context.schema,
+              ),
+            })
+          }
         }
 
         if (behaviorOverwritten) {
@@ -342,11 +363,13 @@ export const editorMachine = setup({
           return
         }
 
-        enqueue.raise({
-          type: 'behavior action intends',
-          editor: event.editor,
-          actionIntends: [defaultAction],
+        Editor.withoutNormalizing(event.editor, () => {
+          performAction({
+            context,
+            action: defaultAction,
+          })
         })
+        event.editor.onChange()
       }
     }),
   },
@@ -384,39 +407,6 @@ export const editorMachine = setup({
     'update maxBlocks': {
       actions: assign({maxBlocks: ({event}) => event.maxBlocks}),
     },
-    'behavior action intends': {
-      actions: [
-        ({context, event}) => {
-          Editor.withoutNormalizing(event.editor, () => {
-            for (const actionIntend of event.actionIntends) {
-              const action = {
-                ...actionIntend,
-                editor: event.editor,
-              }
-
-              performAction({context, action})
-            }
-          })
-          event.editor.onChange()
-        },
-        enqueueActions(({context, event, enqueue}) => {
-          if (
-            event.actionIntends.some(
-              (actionIntend) => actionIntend.type === 'reselect',
-            )
-          ) {
-            enqueue.raise({
-              type: 'selection',
-              selection: toPortableTextRange(
-                event.editor.children,
-                event.editor.selection,
-                context.schema,
-              ),
-            })
-          }
-        }),
-      ],
-    },
   },
   type: 'parallel',
   states: {

package/src/editor/editor-provider.tsx

@@ -14,7 +14,7 @@ import {
 const EditorContext = React.createContext<Editor | undefined>(undefined)
 
 /**
- * @alpha
+ * @public
  */
 export type EditorProviderProps = {
   initialConfig: EditorConfig
@@ -22,7 +22,7 @@ export type EditorProviderProps = {
 }
 
 /**
- * @alpha
+ * @public
  */
 export function EditorProvider(props: EditorProviderProps) {
   const editor = useCreateEditor(props.initialConfig)
@@ -65,7 +65,7 @@ export function EditorProvider(props: EditorProviderProps) {
 }
 
 /**
- * @alpha
+ * @public
  */
 export function useEditor() {
   const editor = React.useContext(EditorContext)

package/src/editor/editor-selector.ts

@@ -1,5 +1,7 @@
 import {useSelector} from '@xstate/react'
+import type {PortableTextSlateEditor} from '../types/editor'
 import type {Editor} from './create-editor'
+import type {EditorActor} from './editor-machine'
 import type {EditorSnapshot} from './editor-snapshot'
 import {getActiveDecorators} from './get-active-decorators'
 import {getValue} from './get-value'
@@ -9,12 +11,12 @@ function defaultCompare<T>(a: T, b: T) {
 }
 
 /**
- * @alpha
+ * @public
  */
 export type EditorSelector<TSelected> = (snapshot: EditorSnapshot) => TSelected
 
 /**
- * @alpha
+ * @public
  */
 export function useEditorSelector<TSelected>(
   editor: Editor,
@@ -23,20 +25,35 @@ export function useEditorSelector<TSelected>(
 ) {
   return useSelector(
     editor._internal.editorActor,
-    (snapshot) => {
-      const context = {
-        activeDecorators: getActiveDecorators({
-          schema: snapshot.context.schema,
-          slateEditorInstance: editor._internal.slateEditor.instance,
-        }),
-        keyGenerator: snapshot.context.keyGenerator,
-        schema: snapshot.context.schema,
-        selection: snapshot.context.selection,
-        value: getValue(editor),
-      }
+    (editorActorSnapshot) => {
+      const snapshot = getEditorSnapshot({
+        editorActorSnapshot,
+        slateEditorInstance: editor._internal.slateEditor.instance,
+      })
 
-      return selector({context})
+      return selector(snapshot)
     },
     compare,
   )
 }
+
+export function getEditorSnapshot({
+  editorActorSnapshot,
+  slateEditorInstance,
+}: {
+  editorActorSnapshot: ReturnType<EditorActor['getSnapshot']>
+  slateEditorInstance: PortableTextSlateEditor
+}): EditorSnapshot {
+  return {
+    context: {
+      activeDecorators: getActiveDecorators({
+        schema: editorActorSnapshot.context.schema,
+        slateEditorInstance,
+      }),
+      keyGenerator: editorActorSnapshot.context.keyGenerator,
+      schema: editorActorSnapshot.context.schema,
+      selection: editorActorSnapshot.context.selection,
+      value: getValue({editorActorSnapshot, slateEditorInstance}),
+    },
+  }
+}

package/src/editor/editor-snapshot.ts

@@ -3,7 +3,7 @@ import type {EditorSelection} from '../types/editor'
 import type {EditorSchema} from './define-schema'
 
 /**
- * @alpha
+ * @public
  */
 export type EditorContext = {
   activeDecorators: Array<string>
@@ -14,7 +14,7 @@ export type EditorContext = {
 }
 
 /**
- * @alpha
+ * @public
  */
 export type EditorSnapshot = {
   context: EditorContext

package/src/editor/get-value.ts

@@ -1,11 +1,18 @@
+import type {PortableTextSlateEditor} from '../types/editor'
 import {fromSlateValue} from '../utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
-import type {Editor} from './create-editor'
+import type {EditorActor} from './editor-machine'
 
-export function getValue(editor: Editor) {
+export function getValue({
+  editorActorSnapshot,
+  slateEditorInstance,
+}: {
+  editorActorSnapshot: ReturnType<EditorActor['getSnapshot']>
+  slateEditorInstance: PortableTextSlateEditor
+}) {
   return fromSlateValue(
-    editor._internal.slateEditor.instance.children,
-    editor._internal.editorActor.getSnapshot().context.schema.block.name,
-    KEY_TO_VALUE_ELEMENT.get(editor._internal.slateEditor.instance),
+    slateEditorInstance.children,
+    editorActorSnapshot.context.schema.block.name,
+    KEY_TO_VALUE_ELEMENT.get(slateEditorInstance),
   )
 }

package/src/editor/hooks/usePortableTextEditor.ts

@@ -8,6 +8,7 @@ export const PortableTextEditorContext =
   createContext<PortableTextEditor | null>(null)
 
 /**
+ * @deprecated Use `useEditor` to get the current editor instance.
  * @public
  * Get the current editor object from the React context.
  */

package/src/editor/hooks/usePortableTextEditorSelection.tsx

@@ -16,6 +16,7 @@ const PortableTextEditorSelectionContext =
   createContext<EditorSelection | null>(null)
 
 /**
+ * @deprecated Use `useEditorSelector` to get the current editor selection.
  * @public
  * Get the current editor selection from the React context.
  */

package/src/selectors/selector.get-active-list-item.ts

@@ -4,7 +4,7 @@ import type {EditorSelector} from '../editor/editor-selector'
 import {getSelectedBlocks} from './selectors'
 
 /**
- * @alpha
+ * @public
  */
 export const getActiveListItem: EditorSelector<
   PortableTextListBlock['listItem'] | undefined

package/src/selectors/selector.get-active-style.ts

@@ -4,7 +4,7 @@ import type {EditorSelector} from '../editor/editor-selector'
 import {getSelectedBlocks} from './selectors'
 
 /**
- * @alpha
+ * @public
  */
 export const getActiveStyle: EditorSelector<PortableTextTextBlock['style']> = ({
   context,

package/src/selectors/selector.get-selected-spans.ts

@@ -8,7 +8,7 @@ import {
 import type {EditorSelector} from '../editor/editor-selector'
 
 /**
- * @alpha
+ * @public
  */
 export const getSelectedSpans: EditorSelector<
   Array<{

package/src/selectors/selector.get-selection-text.ts

@@ -4,7 +4,7 @@ import {isKeyedSegment} from '../editor/utils/utils.is-keyed-segment'
 import {reverseSelection} from '../editor/utils/utils.reverse-selection'
 
 /**
- * @alpha
+ * @public
  */
 export const getSelectionText: EditorSelector<string> = ({context}) => {
   let text = ''