@portabletext/editor 1.17.0 → 1.18.0

package/src/behaviors/behavior.code-editor.ts

@@ -3,7 +3,7 @@ import {isHotkey} from '../utils/is-hotkey'
 import {defineBehavior} from './behavior.types'
 
 /**
- * @alpha
+ * @beta
  */
 export type CodeEditorBehaviorsConfig = {
   moveBlockUpShortcut: string
@@ -11,7 +11,7 @@ export type CodeEditorBehaviorsConfig = {
 }
 
 /**
- * @alpha
+ * @beta
  */
 export function createCodeEditorBehaviors(config: CodeEditorBehaviorsConfig) {
   return [

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>,
@@ -37,6 +37,43 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
   })
 
   return [
+    defineBehavior({
+      on: 'insert.text',
+      guard: ({context, event}) => {
+        const isEmojiChar = emojiCharRegEx.test(event.text)
+
+        if (!isEmojiChar) {
+          return {emojis: []}
+        }
+
+        const focusBlock = selectors.getFocusTextBlock({context})
+        const textBefore = selectors.getBlockTextBefore({context})
+        const emojiKeyword = `${textBefore}${event.text}`.match(
+          incompleteEmojiRegEx,
+        )?.[1]
+
+        if (!focusBlock || emojiKeyword === undefined) {
+          return {emojis: []}
+        }
+
+        const emojis = config.matchEmojis({keyword: emojiKeyword})
+
+        return {emojis}
+      },
+      actions: [
+        (_, params) => [
+          {
+            type: 'effect',
+            effect: () => {
+              emojiPickerActor.send({
+                type: 'emojis found',
+                matches: params.emojis,
+              })
+            },
+          },
+        ],
+      ],
+    }),
     defineBehavior({
       on: 'insert.text',
       guard: ({context, event}) => {
@@ -107,45 +144,14 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
       ],
     }),
     defineBehavior({
-      on: 'insert.text',
+      on: 'key.down',
       guard: ({context, event}) => {
-        const isEmojiChar = emojiCharRegEx.test(event.text)
-
-        if (!isEmojiChar) {
-          return {emojis: []}
-        }
-
-        const focusBlock = selectors.getFocusTextBlock({context})
-        const textBefore = selectors.getBlockTextBefore({context})
-        const emojiKeyword = `${textBefore}${event.text}`.match(
-          incompleteEmojiRegEx,
-        )?.[1]
+        const matches = emojiPickerActor.getSnapshot().context.matches
 
-        if (!focusBlock || emojiKeyword === undefined) {
-          return {emojis: []}
+        if (matches.length === 0) {
+          return false
         }
 
-        const emojis = config.matchEmojis({keyword: emojiKeyword})
-
-        return {emojis}
-      },
-      actions: [
-        (_, params) => [
-          {
-            type: 'effect',
-            effect: () => {
-              emojiPickerActor.send({
-                type: 'emojis found',
-                matches: params.emojis,
-              })
-            },
-          },
-        ],
-      ],
-    }),
-    defineBehavior({
-      on: 'key.down',
-      guard: ({context, event}) => {
         const isShift = isHotkey('Shift', event.keyboardEvent)
         const isColon = event.keyboardEvent.key === ':'
         const isEmojiChar = emojiCharRegEx.test(event.keyboardEvent.key)
@@ -160,7 +166,6 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
         const isTab = isHotkey('Tab', event.keyboardEvent)
 
         if (isEnter || isTab) {
-          const matches = emojiPickerActor.getSnapshot().context.matches
           const selectedIndex =
             emojiPickerActor.getSnapshot().context.selectedIndex
 
@@ -195,11 +200,11 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
           return false
         }
 
-        if (isArrowDown) {
+        if (isArrowDown && matches.length > 0) {
           return {action: 'navigate down' as const}
         }
 
-        if (isArrowUp) {
+        if (isArrowUp && matches.length > 0) {
           return {action: 'navigate up' as const}
         }
 
@@ -283,6 +288,12 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
           return false
         }
 
+        const matches = emojiPickerActor.getSnapshot().context.matches
+
+        if (matches.length === 0) {
+          return false
+        }
+
         const focusBlock = selectors.getFocusTextBlock({context})
         const textBefore = selectors.getBlockTextBefore({context})
         const emojiKeyword = textBefore
@@ -290,7 +301,7 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
           .match(incompleteEmojiRegEx)?.[1]
 
         if (!focusBlock || emojiKeyword === undefined) {
-          return {emojis: [], event}
+          return {emojis: []}
         }
 
         const emojis = config.matchEmojis({keyword: emojiKeyword})

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)