@portabletext/toolbar 0.0.0

package/src/use-annotation-button.ts

@@ -0,0 +1,302 @@
+import {useEditor, type Editor} from '@portabletext/editor'
+import {defineBehavior, effect, raise} from '@portabletext/editor/behaviors'
+import * as selectors from '@portabletext/editor/selectors'
+import {useActor} from '@xstate/react'
+import {fromCallback, setup, type AnyEventObject} from 'xstate'
+import {disableListener, type DisableListenerEvent} from './disable-listener'
+import type {ToolbarAnnotationSchemaType} from './use-toolbar-schema'
+
+const activeListener = fromCallback<
+  AnyEventObject,
+  {editor: Editor; schemaType: ToolbarAnnotationSchemaType},
+  {type: 'set active'} | {type: 'set inactive'}
+>(({input, sendBack}) => {
+  return input.editor.on('*', () => {
+    const snapshot = input.editor.getSnapshot()
+
+    if (selectors.isActiveAnnotation(input.schemaType.name)(snapshot)) {
+      sendBack({type: 'set active'})
+    } else {
+      sendBack({type: 'set inactive'})
+    }
+  }).unsubscribe
+})
+
+const keyboardShortcutRemove = fromCallback<
+  AnyEventObject,
+  {editor: Editor; schemaType: ToolbarAnnotationSchemaType}
+>(({input}) => {
+  const shortcut = input.schemaType.shortcut
+
+  if (!shortcut) {
+    return
+  }
+
+  return input.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: 'keyboard.keydown',
+      guard: ({event}) => shortcut.guard(event.originEvent),
+      actions: [
+        () => [
+          raise({
+            type: 'annotation.remove',
+            annotation: {
+              name: input.schemaType.name,
+            },
+          }),
+          effect(() => {
+            input.editor.send({type: 'focus'})
+          }),
+        ],
+      ],
+    }),
+  })
+})
+
+const keyboardShortcutShowInsertDialog = fromCallback<
+  AnyEventObject,
+  {editor: Editor; schemaType: ToolbarAnnotationSchemaType},
+  {type: 'open dialog'}
+>(({input, sendBack}) => {
+  const shortcut = input.schemaType.shortcut
+
+  if (!shortcut) {
+    return
+  }
+
+  return input.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: 'keyboard.keydown',
+      guard: ({event}) => shortcut.guard(event.originEvent),
+      actions: [
+        () => [
+          effect(() => {
+            sendBack({type: 'open dialog'})
+          }),
+        ],
+      ],
+    }),
+  })
+})
+
+const annotationButtonMachine = setup({
+  types: {
+    context: {} as {
+      editor: Editor
+      schemaType: ToolbarAnnotationSchemaType
+    },
+    input: {} as {
+      editor: Editor
+      schemaType: ToolbarAnnotationSchemaType
+    },
+    events: {} as
+      | AnnotationButtonEvent
+      | DisableListenerEvent
+      | {type: 'set active'}
+      | {type: 'set inactive'},
+  },
+  actions: {
+    'add annotation': ({context, event}) => {
+      if (event.type !== 'add') {
+        return
+      }
+
+      context.editor.send({
+        type: 'annotation.add',
+        annotation: {
+          name: context.schemaType.name,
+          value: event.annotation.value,
+        },
+      })
+      context.editor.send({type: 'focus'})
+    },
+    'remove annotation': ({context}) => {
+      context.editor.send({
+        type: 'annotation.remove',
+        annotation: {
+          name: context.schemaType.name,
+        },
+      })
+      context.editor.send({type: 'focus'})
+    },
+  },
+  actors: {
+    'active listener': activeListener,
+    'disable listener': disableListener,
+    'keyboard shortcut.remove': keyboardShortcutRemove,
+    'keyboard shortcut.show insert dialog': keyboardShortcutShowInsertDialog,
+  },
+}).createMachine({
+  id: 'annotation button',
+  context: ({input}) => ({
+    editor: input.editor,
+    schemaType: input.schemaType,
+  }),
+  invoke: [
+    {
+      src: 'active listener',
+      input: ({context}) => ({
+        editor: context.editor,
+        schemaType: context.schemaType,
+      }),
+    },
+    {
+      src: 'disable listener',
+      input: ({context}) => ({
+        editor: context.editor,
+        schemaType: context.schemaType,
+      }),
+    },
+  ],
+  initial: 'disabled',
+  states: {
+    disabled: {
+      initial: 'inactive',
+      states: {
+        inactive: {
+          on: {
+            'enable': {
+              target: '#annotation button.enabled.inactive',
+            },
+            'set active': {
+              target: 'active',
+            },
+          },
+        },
+        active: {
+          on: {
+            'enable': {
+              target: '#annotation button.enabled.active',
+            },
+            'set inactive': {
+              target: 'inactive',
+            },
+          },
+        },
+      },
+    },
+    enabled: {
+      initial: 'inactive',
+      states: {
+        inactive: {
+          initial: 'idle',
+          on: {
+            'disable': {
+              target: '#annotation button.disabled.inactive',
+            },
+            'set active': {
+              target: '#annotation button.enabled.active',
+            },
+            'add': {
+              actions: 'add annotation',
+            },
+          },
+          states: {
+            'idle': {
+              invoke: {
+                src: 'keyboard shortcut.show insert dialog',
+                input: ({context}) => ({
+                  editor: context.editor,
+                  schemaType: context.schemaType,
+                }),
+              },
+              on: {
+                'open dialog': {
+                  target: 'showing dialog',
+                },
+              },
+            },
+            'showing dialog': {
+              on: {
+                'close dialog': {
+                  target: 'idle',
+                },
+              },
+            },
+          },
+        },
+        active: {
+          invoke: {
+            src: 'keyboard shortcut.remove',
+            input: ({context}) => ({
+              editor: context.editor,
+              schemaType: context.schemaType,
+            }),
+          },
+          on: {
+            'set inactive': {
+              target: '#annotation button.enabled.inactive',
+            },
+            'disable': {
+              target: '#annotation button.disabled.active',
+            },
+            'remove': {
+              actions: 'remove annotation',
+            },
+          },
+        },
+      },
+    },
+  },
+})
+
+/**
+ * @beta
+ */
+export type AnnotationButtonEvent =
+  | {type: 'close dialog'}
+  | {type: 'open dialog'}
+  | {
+      type: 'add'
+      annotation: {
+        value: Record<string, unknown>
+      }
+    }
+  | {type: 'remove'}
+
+/**
+ * @beta
+ */
+export type AnnotationButton = {
+  snapshot: {
+    matches: (
+      state:
+        | 'disabled'
+        | 'enabled'
+        | {disabled: 'inactive'}
+        | {disabled: 'active'}
+        | {enabled: 'inactive'}
+        | {enabled: {inactive: 'idle'}}
+        | {enabled: {inactive: 'showing dialog'}}
+        | {enabled: 'active'},
+    ) => boolean
+  }
+  send: (event: AnnotationButtonEvent) => void
+}
+
+/**
+ * @beta
+ * Manages the state, keyboard shortcut and available events for an annotation
+ * button.
+ *
+ * Note: This hook assumes that the button triggers a dialog for inputting
+ * the annotation value.
+ */
+export function useAnnotationButton(props: {
+  schemaType: ToolbarAnnotationSchemaType
+}): AnnotationButton {
+  const editor = useEditor()
+  const [snapshot, send] = useActor(annotationButtonMachine, {
+    input: {
+      editor,
+      schemaType: props.schemaType,
+    },
+  })
+
+  return {
+    snapshot: {
+      matches: (state) => snapshot.matches(state),
+    },
+    send,
+  }
+}

package/src/use-annotation-popover.ts

@@ -0,0 +1,301 @@
+import {
+  useEditor,
+  type AnnotationPath,
+  type AnnotationSchemaType,
+  type Editor,
+  type PortableTextObject,
+} from '@portabletext/editor'
+import * as selectors from '@portabletext/editor/selectors'
+import {useActor} from '@xstate/react'
+import * as React from 'react'
+import type {RefObject} from 'react'
+import {assign, fromCallback, setup, type AnyEventObject} from 'xstate'
+import {disableListener, type DisableListenerEvent} from './disable-listener'
+import type {ToolbarAnnotationSchemaType} from './use-toolbar-schema'
+
+type ActiveContext = {
+  annotations: Array<{
+    value: PortableTextObject
+    schemaType: ToolbarAnnotationSchemaType
+    at: AnnotationPath
+  }>
+  elementRef: RefObject<Element | null>
+}
+
+type ActiveListenerEvent =
+  | ({
+      type: 'set active'
+    } & ActiveContext)
+  | {
+      type: 'set inactive'
+    }
+
+const activeListener = fromCallback<
+  AnyEventObject,
+  {editor: Editor; schemaTypes: ReadonlyArray<ToolbarAnnotationSchemaType>},
+  ActiveListenerEvent
+>(({input, sendBack}) => {
+  return input.editor.on('*', () => {
+    const snapshot = input.editor.getSnapshot()
+    const activeAnnotations = selectors.getActiveAnnotations(snapshot)
+    const focusBlock = selectors.getFocusBlock(snapshot)
+
+    if (activeAnnotations.length === 0 || !focusBlock) {
+      sendBack({type: 'set inactive'})
+      return
+    }
+
+    const selectedChildren = input.editor.dom.getChildNodes(snapshot)
+    const firstSelectedChild = selectedChildren.at(0)
+
+    if (!firstSelectedChild || !(firstSelectedChild instanceof Element)) {
+      sendBack({type: 'set inactive'})
+      return
+    }
+
+    const elementRef = React.createRef<Element>()
+    elementRef.current = firstSelectedChild
+
+    sendBack({
+      type: 'set active',
+      annotations: activeAnnotations.flatMap((annotation) => {
+        const schemaType = input.schemaTypes.find(
+          (schemaType) => schemaType.name === annotation._type,
+        )
+
+        if (!schemaType) {
+          return []
+        }
+
+        return {
+          value: annotation,
+          schemaType,
+          at: [
+            {_key: focusBlock.node._key},
+            'markDefs',
+            {_key: annotation._key},
+          ],
+        }
+      }),
+      elementRef,
+    })
+  }).unsubscribe
+})
+
+const annotationPopoverMachine = setup({
+  types: {
+    context: {} as {
+      editor: Editor
+      schemaTypes: ReadonlyArray<ToolbarAnnotationSchemaType>
+    } & ActiveContext,
+    input: {} as {
+      editor: Editor
+      schemaTypes: ReadonlyArray<ToolbarAnnotationSchemaType>
+    },
+    events: {} as
+      | DisableListenerEvent
+      | ActiveListenerEvent
+      | AnnotationPopoverEvent,
+  },
+  actions: {
+    reset: assign({
+      annotations: [],
+      elementRef: React.createRef<Element>(),
+    }),
+    remove: ({context, event}) => {
+      if (event.type !== 'remove') {
+        return
+      }
+
+      context.editor.send({
+        type: 'annotation.remove',
+        annotation: {
+          name: event.schemaType.name,
+        },
+      })
+      context.editor.send({type: 'focus'})
+    },
+  },
+  actors: {
+    'disable listener': disableListener,
+    'active listener': activeListener,
+  },
+}).createMachine({
+  id: 'annotation popover',
+  context: ({input}) => ({
+    editor: input.editor,
+    schemaTypes: input.schemaTypes,
+    annotations: [],
+    elementRef: React.createRef<Element>(),
+  }),
+  invoke: [
+    {src: 'disable listener', input: ({context}) => ({editor: context.editor})},
+  ],
+  initial: 'disabled',
+  states: {
+    disabled: {
+      initial: 'inactive',
+      states: {
+        inactive: {
+          entry: ['reset'],
+          on: {
+            'set active': {
+              actions: assign({
+                annotations: ({event}) => event.annotations,
+                elementRef: ({event}) => event.elementRef,
+              }),
+              target: 'active',
+            },
+            'enable': {
+              target: '#annotation popover.enabled.inactive',
+            },
+          },
+        },
+        active: {
+          on: {
+            'set inactive': {
+              target: 'inactive',
+            },
+            'enable': {
+              target: '#annotation popover.enabled.active',
+            },
+          },
+        },
+      },
+    },
+    enabled: {
+      invoke: [
+        {
+          src: 'active listener',
+          input: ({context}) => ({
+            editor: context.editor,
+            schemaTypes: context.schemaTypes,
+          }),
+        },
+      ],
+      initial: 'inactive',
+      states: {
+        inactive: {
+          entry: ['reset'],
+          on: {
+            'set active': {
+              target: 'active',
+              actions: assign({
+                annotations: ({event}) => event.annotations,
+                elementRef: ({event}) => event.elementRef,
+              }),
+            },
+            'disable': {
+              target: '#annotation popover.disabled.inactive',
+            },
+          },
+        },
+        active: {
+          on: {
+            'set inactive': {
+              target: 'inactive',
+            },
+            'disable': {
+              target: '#annotation popover.disabled.active',
+            },
+            'set active': {
+              actions: assign({
+                annotations: ({event}) => event.annotations,
+                elementRef: ({event}) => event.elementRef,
+              }),
+            },
+            'edit': {
+              actions: ({context, event}) => {
+                context.editor.send({
+                  type: 'annotation.set',
+                  at: event.at,
+                  props: event.props,
+                })
+                context.editor.send({type: 'focus'})
+              },
+            },
+            'remove': {
+              actions: ({context, event}) => {
+                context.editor.send({
+                  type: 'annotation.remove',
+                  annotation: {
+                    name: event.schemaType.name,
+                  },
+                })
+                context.editor.send({type: 'focus'})
+              },
+            },
+            'close': {
+              actions: ({context}) => {
+                context.editor.send({type: 'focus'})
+              },
+              target: 'inactive',
+            },
+          },
+        },
+      },
+    },
+  },
+})
+
+/**
+ * @beta
+ */
+export type AnnotationPopoverEvent =
+  | {
+      type: 'remove'
+      schemaType: AnnotationSchemaType
+    }
+  | {
+      type: 'edit'
+      at: AnnotationPath
+      props: {[key: string]: unknown}
+    }
+  | {
+      type: 'close'
+    }
+
+/**
+ * @beta
+ */
+export type AnnotationPopover = {
+  snapshot: {
+    context: ActiveContext
+    matches: (
+      state:
+        | 'disabled'
+        | 'enabled'
+        | {
+            enabled: 'inactive' | 'active'
+          },
+    ) => boolean
+  }
+  send: (event: AnnotationPopoverEvent) => void
+}
+
+/**
+ * @beta
+ * Manages the state and available events for an annotation popover.
+ */
+export function useAnnotationPopover(props: {
+  schemaTypes: ReadonlyArray<ToolbarAnnotationSchemaType>
+}): AnnotationPopover {
+  const editor = useEditor()
+  const [actorSnapshot, send] = useActor(annotationPopoverMachine, {
+    input: {
+      editor,
+      schemaTypes: props.schemaTypes,
+    },
+  })
+
+  return {
+    snapshot: {
+      context: {
+        annotations: actorSnapshot.context.annotations,
+        elementRef: actorSnapshot.context.elementRef,
+      },
+      matches: (state) => actorSnapshot.matches(state),
+    },
+    send,
+  }
+}