@portabletext/editor 1.18.7 → 1.20.0

package/src/editor/components/Element.tsx

@@ -30,11 +30,6 @@ import {debugWithName} from '../../utils/debug'
 import {fromSlateValue} from '../../utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
 import ObjectNode from '../nodes/DefaultObject'
-import {
-  DefaultBlockObject,
-  DefaultListItem,
-  DefaultListItemInner,
-} from '../nodes/index'
 import {DraggableBlock} from './DraggableBlock'
 
 const debug = debugWithName('components:Element')
@@ -185,12 +180,14 @@ export const Element: FunctionComponent<ElementProps> = ({
       })
     }
     let level: number | undefined
+
     if (isListItem) {
       if (typeof element.level === 'number') {
         level = element.level
       }
       className += ` pt-list-item pt-list-item-${element.listItem} pt-list-item-level-${level || 1}`
     }
+
     if (editor.isListBlock(value) && isListItem && element.listItem) {
       const listType = schemaTypes.lists.find(
         (item) => item.value === element.listItem,
@@ -207,17 +204,9 @@ export const Element: FunctionComponent<ElementProps> = ({
           level: value.level || 1,
           editorElementRef: blockRef,
         })
-      } else {
-        renderedBlock = (
-          <DefaultListItem
-            listStyle={value.listItem || schemaTypes.lists[0].value}
-            listLevel={value.level || 1}
-          >
-            <DefaultListItemInner>{renderedBlock}</DefaultListItemInner>
-          </DefaultListItem>
-        )
       }
     }
+
     const renderProps: Omit<BlockRenderProps, 'type'> = Object.defineProperty(
       {
         children: renderedBlock,
@@ -263,24 +252,31 @@ export const Element: FunctionComponent<ElementProps> = ({
       </div>
     )
   }
+
   const schemaType = schemaTypes.blockObjects.find(
     (_type) => _type.name === element._type,
   )
+
   if (!schemaType) {
     throw new Error(
       `Could not find schema type for block element of _type ${element._type}`,
     )
   }
+
   if (debugRenders) {
     debug(`Render ${element._key} (object block)`)
   }
+
   className = 'pt-block pt-object-block'
+
   const block = fromSlateValue(
     [element],
     schemaTypes.block.name,
     KEY_TO_VALUE_ELEMENT.get(editor),
   )[0]
+
   let renderedBlockFromProps: JSX.Element | undefined
+
   if (renderBlock) {
     const _props: Omit<BlockRenderProps, 'type'> = Object.defineProperty(
       {
@@ -305,20 +301,18 @@ export const Element: FunctionComponent<ElementProps> = ({
     )
     renderedBlockFromProps = renderBlock(_props as BlockRenderProps)
   }
+
   return (
     <div key={element._key} {...attributes} className={className}>
       {children}
       <DraggableBlock element={element} readOnly={readOnly} blockRef={blockRef}>
-        {renderedBlockFromProps && (
-          <div ref={blockRef} contentEditable={false}>
-            {renderedBlockFromProps}
-          </div>
-        )}
-        {!renderedBlockFromProps && (
-          <DefaultBlockObject selected={selected}>
+        <div ref={blockRef} contentEditable={false}>
+          {renderedBlockFromProps ? (
+            renderedBlockFromProps
+          ) : (
             <ObjectNode value={value} />
-          </DefaultBlockObject>
-        )}
+          )}
+        </div>
       </DraggableBlock>
     </div>
   )

package/src/editor/create-editor.ts

@@ -63,15 +63,13 @@ export type EditorEvent = PickFromUnion<
   'type',
   | 'annotation.add'
   | 'annotation.remove'
-  | 'annotation.toggle'
   | 'blur'
-  | 'decorator.add'
-  | 'decorator.remove'
   | 'decorator.toggle'
   | 'focus'
   | 'insert.block object'
   | 'insert.inline object'
   | 'list item.toggle'
+  | 'select'
   | 'style.toggle'
   | 'patches'
   | 'update behaviors'
@@ -84,6 +82,10 @@ export type EditorEvent = PickFromUnion<
  */
 export type Editor = {
   getSnapshot: () => EditorSnapshot
+  /**
+   * @beta
+   */
+  registerBehavior: (config: {behavior: Behavior}) => () => void
   send: (event: EditorEvent) => void
   on: ActorRef<Snapshot<unknown>, EventObject, EditorEmittedEvent>['on']
   _internal: {
@@ -137,6 +139,19 @@ function createEditorFromActor(editorActor: EditorActor): Editor {
         editorActorSnapshot: editorActor.getSnapshot(),
         slateEditorInstance: slateEditor.instance,
       }),
+    registerBehavior: (config) => {
+      editorActor.send({
+        type: 'add behavior',
+        behavior: config.behavior,
+      })
+
+      return () => {
+        editorActor.send({
+          type: 'remove behavior',
+          behavior: config.behavior,
+        })
+      }
+    },
     send: (event) => {
       editorActor.send(event)
     },

package/src/editor/editor-machine.ts

@@ -30,6 +30,7 @@ import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
 import type {EditorSchema} from './define-schema'
 import type {EditorContext} from './editor-snapshot'
 import {getActiveDecorators} from './get-active-decorators'
+import {withApplyingBehaviorActions} from './with-applying-behavior-actions'
 
 export * from 'xstate/guards'
 
@@ -78,6 +79,14 @@ export type InternalEditorEvent =
       editor: PortableTextSlateEditor
       nativeEvent?: {preventDefault: () => void}
     }
+  | {
+      type: 'add behavior'
+      behavior: Behavior
+    }
+  | {
+      type: 'remove behavior'
+      behavior: Behavior
+    }
   | {
       type: 'update readOnly'
       readOnly: boolean
@@ -152,6 +161,7 @@ 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>}
@@ -164,10 +174,7 @@ export type InternalEditorEmittedEvent =
       'type',
       | 'annotation.add'
       | 'annotation.remove'
-      | 'annotation.toggle'
       | 'blur'
-      | 'decorator.add'
-      | 'decorator.remove'
       | 'decorator.toggle'
       | 'insert.block object'
       | 'insert.inline object'
@@ -182,7 +189,7 @@ export type InternalEditorEmittedEvent =
 export const editorMachine = setup({
   types: {
     context: {} as {
-      behaviors: Array<Behavior>
+      behaviors: Set<Behavior>
       keyGenerator: () => string
       pendingEvents: Array<PatchEvent | MutationEvent>
       schema: EditorSchema
@@ -203,10 +210,26 @@ export const editorMachine = setup({
     },
   },
   actions: {
+    'add behavior to context': assign({
+      behaviors: ({context, event}) => {
+        assertEvent(event, 'add behavior')
+
+        return new Set([...context.behaviors, event.behavior])
+      },
+    }),
+    'remove behavior from context': assign({
+      behaviors: ({context, event}) => {
+        assertEvent(event, 'remove behavior')
+
+        context.behaviors.delete(event.behavior)
+
+        return new Set([...context.behaviors])
+      },
+    }),
     'assign behaviors': assign({
       behaviors: ({event}) => {
         assertEvent(event, 'update behaviors')
-        return event.behaviors
+        return new Set(event.behaviors)
       },
     }),
     'assign schema': assign({
@@ -254,7 +277,7 @@ export const editorMachine = setup({
               editor: event.editor,
             } satisfies BehaviorAction)
 
-      const eventBehaviors = context.behaviors.filter(
+      const eventBehaviors = [...context.behaviors.values()].filter(
         (behavior) => behavior.on === event.behaviorEvent.type,
       )
 
@@ -263,10 +286,12 @@ export const editorMachine = setup({
           return
         }
 
-        Editor.withoutNormalizing(event.editor, () => {
-          performAction({
-            context,
-            action: defaultAction,
+        withApplyingBehaviorActions(event.editor, () => {
+          Editor.withoutNormalizing(event.editor, () => {
+            performAction({
+              context,
+              action: defaultAction,
+            })
           })
         })
         event.editor.onChange()
@@ -324,32 +349,28 @@ export const editorMachine = setup({
                 (actionIntend) => actionIntend.type !== 'effect',
               ))
 
-          Editor.withoutNormalizing(event.editor, () => {
-            for (const actionIntend of actionIntends) {
-              const action = {
-                ...actionIntend,
-                editor: event.editor,
-              }
+          withApplyingBehaviorActions(event.editor, () => {
+            Editor.withoutNormalizing(event.editor, () => {
+              for (const actionIntend of actionIntends) {
+                if (actionIntend.type === 'raise') {
+                  enqueue.raise({
+                    type: 'behavior event',
+                    behaviorEvent: actionIntend.event,
+                    editor: event.editor,
+                  })
+                  continue
+                }
 
-              performAction({context, action})
-            }
-          })
-          event.editor.onChange()
+                const action = {
+                  ...actionIntend,
+                  editor: event.editor,
+                }
 
-          if (
-            actionIntends.some(
-              (actionIntend) => actionIntend.type === 'reselect',
-            )
-          ) {
-            enqueue.raise({
-              type: 'selection',
-              selection: toPortableTextRange(
-                event.editor.children,
-                event.editor.selection,
-                context.schema,
-              ),
+                performAction({context, action})
+              }
             })
-          }
+          })
+          event.editor.onChange()
         }
 
         if (behaviorOverwritten) {
@@ -363,10 +384,12 @@ export const editorMachine = setup({
           return
         }
 
-        Editor.withoutNormalizing(event.editor, () => {
-          performAction({
-            context,
-            action: defaultAction,
+        withApplyingBehaviorActions(event.editor, () => {
+          Editor.withoutNormalizing(event.editor, () => {
+            performAction({
+              context,
+              action: defaultAction,
+            })
           })
         })
         event.editor.onChange()
@@ -376,7 +399,7 @@ export const editorMachine = setup({
 }).createMachine({
   id: 'editor',
   context: ({input}) => ({
-    behaviors: input.behaviors ?? coreBehaviors,
+    behaviors: new Set(input.behaviors ?? coreBehaviors),
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
     schema: input.schema,
@@ -386,6 +409,8 @@ export const editorMachine = setup({
     value: input.value,
   }),
   on: {
+    'add behavior': {actions: 'add behavior to context'},
+    'remove behavior': {actions: 'remove behavior from context'},
     'unset': {actions: emit(({event}) => event)},
     'value changed': {actions: emit(({event}) => event)},
     'invalid value': {actions: emit(({event}) => event)},
@@ -450,13 +475,7 @@ export const editorMachine = setup({
             'behavior event': {
               actions: 'handle behavior event',
             },
-            'annotation.add': {
-              actions: emit(({event}) => event),
-            },
-            'annotation.remove': {
-              actions: emit(({event}) => event),
-            },
-            'annotation.toggle': {
+            'annotation.*': {
               actions: emit(({event}) => event),
             },
             'blur': {
@@ -474,6 +493,9 @@ export const editorMachine = setup({
             'list item.*': {
               actions: emit(({event}) => event),
             },
+            'select': {
+              actions: emit(({event}) => event),
+            },
             'style.*': {
               actions: emit(({event}) => event),
             },

package/src/editor/nodes/DefaultObject.tsx

@@ -7,8 +7,8 @@ type Props = {
 
 const DefaultObject = (props: Props): JSX.Element => {
   return (
-    <div>
-      <pre>{JSON.stringify(props.value, null, 2)}</pre>
+    <div style={{userSelect: 'none'}}>
+      [{props.value._type}: {props.value._key}]
     </div>
   )
 }

package/src/editor/plugins/create-with-event-listeners.ts

@@ -1,5 +1,9 @@
-import type {Editor} from 'slate'
+import {Editor} from 'slate'
+import {toPortableTextRange} from '../../utils/ranges'
+import {fromSlateValue} from '../../utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
 import type {EditorActor} from '../editor-machine'
+import {isApplyingBehaviorActions} from '../with-applying-behavior-actions'
 
 export function createWithEventListeners(
   editorActor: EditorActor,
@@ -35,17 +39,6 @@ export function createWithEventListeners(
             })
             break
           }
-          case 'annotation.toggle': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'annotation.toggle',
-                annotation: event.annotation,
-              },
-              editor,
-            })
-            break
-          }
           case 'blur': {
             editorActor.send({
               type: 'behavior event',
@@ -56,28 +49,6 @@ export function createWithEventListeners(
             })
             break
           }
-          case 'decorator.add': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'decorator.add',
-                decorator: event.decorator,
-              },
-              editor,
-            })
-            break
-          }
-          case 'decorator.remove': {
-            editorActor.send({
-              type: 'behavior event',
-              behaviorEvent: {
-                type: 'decorator.remove',
-                decorator: event.decorator,
-              },
-              editor,
-            })
-            break
-          }
           case 'decorator.toggle': {
             editorActor.send({
               type: 'behavior event',
@@ -133,6 +104,17 @@ export function createWithEventListeners(
             })
             break
           }
+          case 'select': {
+            editorActor.send({
+              type: 'behavior event',
+              behaviorEvent: {
+                type: 'select',
+                selection: event.selection,
+              },
+              editor,
+            })
+            break
+          }
           case 'style.toggle': {
             editorActor.send({
               type: 'behavior event',
@@ -152,29 +134,7 @@ export function createWithEventListeners(
       }
     })
 
-    editor.addMark = (mark) => {
-      editorActor.send({
-        type: 'behavior event',
-        behaviorEvent: {
-          type: 'decorator.add',
-          decorator: mark,
-        },
-        editor,
-      })
-      return
-    }
-
-    editor.removeMark = (mark) => {
-      editorActor.send({
-        type: 'behavior event',
-        behaviorEvent: {
-          type: 'decorator.remove',
-          decorator: mark,
-        },
-        editor,
-      })
-      return
-    }
+    const {select} = editor
 
     editor.deleteBackward = (unit) => {
       editorActor.send({
@@ -235,6 +195,33 @@ export function createWithEventListeners(
       return
     }
 
+    editor.select = (location) => {
+      if (isApplyingBehaviorActions(editor)) {
+        select(location)
+        return
+      }
+
+      const range = Editor.range(editor, location)
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'select',
+          selection: toPortableTextRange(
+            fromSlateValue(
+              editor.children,
+              editorActor.getSnapshot().context.schema.block.name,
+              KEY_TO_VALUE_ELEMENT.get(editor),
+            ),
+            range,
+            editorActor.getSnapshot().context.schema,
+          ),
+        },
+        editor,
+      })
+      return
+    }
+
     return editor
   }
 }

package/src/editor/plugins/createWithHotKeys.ts

@@ -9,16 +9,6 @@ import type {PortableTextEditor} from '../PortableTextEditor'
 
 const debug = debugWithName('plugin:withHotKeys')
 
-const DEFAULT_HOTKEYS: HotkeyOptions = {
-  marks: {
-    'mod+b': 'strong',
-    'mod+i': 'em',
-    'mod+u': 'underline',
-    "mod+'": 'code',
-  },
-  custom: {},
-}
-
 /**
  * This plugin takes care of all hotkeys in the editor
  *
@@ -29,7 +19,7 @@ export function createWithHotkeys(
   hotkeysFromOptions?: HotkeyOptions,
 ): (editor: PortableTextSlateEditor & ReactEditor) => any {
   const reservedHotkeys = ['enter', 'tab', 'shift', 'delete', 'end']
-  const activeHotkeys = hotkeysFromOptions || DEFAULT_HOTKEYS // TODO: Merge where possible? A union?
+  const activeHotkeys = hotkeysFromOptions ?? {}
   return function withHotKeys(editor: PortableTextSlateEditor & ReactEditor) {
     editor.pteWithHotKeys = (event: KeyboardEvent<HTMLDivElement>): void => {
       // Wire up custom marks hotkeys

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -741,7 +741,12 @@ export const addDecoratorActionImplementation: BehaviorActionImplementation<
         editor.marks = marks as Text
       }
     }
-    editor.onChange()
+
+    if (editor.selection) {
+      // Reselect
+      const selection = editor.selection
+      editor.selection = {...selection}
+    }
   }
 }
 
@@ -823,6 +828,12 @@ export const removeDecoratorActionImplementation: BehaviorActionImplementation<
         editor.marks = {marks: marks.marks, _type: 'span'} as Text
       }
     }
+
+    if (editor.selection) {
+      // Reselect
+      const selection = editor.selection
+      editor.selection = {...selection}
+    }
   }
 }
 

package/src/editor/plugins/createWithPortableTextSelections.ts

@@ -55,12 +55,8 @@ export function createWithPortableTextSelections(
 
     const {onChange} = editor
     editor.onChange = () => {
-      const hasChanges = editor.operations.length > 0
       onChange()
-      if (
-        hasChanges &&
-        !editorActor.getSnapshot().matches({setup: 'setting up'})
-      ) {
+      if (!editorActor.getSnapshot().matches({setup: 'setting up'})) {
         emitPortableTextSelection()
       }
     }

package/src/editor/with-applying-behavior-actions.ts

@@ -0,0 +1,15 @@
+import type {Editor} from 'slate'
+
+const IS_APPLYING_BEHAVIOR_ACTIONS: WeakMap<Editor, boolean | undefined> =
+  new WeakMap()
+
+export function withApplyingBehaviorActions(editor: Editor, fn: () => void) {
+  const prev = isApplyingBehaviorActions(editor)
+  IS_APPLYING_BEHAVIOR_ACTIONS.set(editor, true)
+  fn()
+  IS_APPLYING_BEHAVIOR_ACTIONS.set(editor, prev)
+}
+
+export function isApplyingBehaviorActions(editor: Editor) {
+  return IS_APPLYING_BEHAVIOR_ACTIONS.get(editor) ?? false
+}