@portabletext/toolbar 2.1.1 → 2.2.0

package/src/use-mutually-exclusive-annotation.ts

@@ -0,0 +1,48 @@
+import {useEditor} from '@portabletext/editor'
+import {defineBehavior, execute, raise} from '@portabletext/editor/behaviors'
+import {isActiveAnnotation} from '@portabletext/editor/selectors'
+import {useEffect} from 'react'
+import type {ToolbarAnnotationSchemaType} from './use-toolbar-schema'
+
+export function useMutuallyExclusiveAnnotation(props: {
+  schemaType: ToolbarAnnotationSchemaType
+}) {
+  const editor = useEditor()
+
+  useEffect(() => {
+    const mutuallyExclusive = props.schemaType.mutuallyExclusive
+
+    if (!mutuallyExclusive) {
+      return
+    }
+
+    return editor.registerBehavior({
+      behavior: defineBehavior({
+        on: 'annotation.add',
+        guard: ({snapshot, event}) => {
+          if (event.annotation.name !== props.schemaType.name) {
+            return false
+          }
+
+          const activeMutuallyExclusive = mutuallyExclusive.filter(
+            (annotation) =>
+              isActiveAnnotation(annotation, {mode: 'partial'})(snapshot),
+          )
+
+          return {activeMutuallyExclusive}
+        },
+        actions: [
+          ({event}, {activeMutuallyExclusive}) => [
+            ...activeMutuallyExclusive.map((annotation) =>
+              raise({
+                type: 'annotation.remove',
+                annotation: {name: annotation},
+              }),
+            ),
+            execute(event),
+          ],
+        ],
+      }),
+    })
+  }, [editor, props.schemaType.name, props.schemaType.mutuallyExclusive])
+}

package/src/use-toolbar-schema.ts

@@ -1,6 +1,7 @@
 import {
   useEditor,
   useEditorSelector,
+  type AnnotationDefinition,
   type AnnotationSchemaType,
   type BlockObjectSchemaType,
   type DecoratorDefinition,
@@ -128,6 +129,7 @@ export type ToolbarAnnotationSchemaType = AnnotationSchemaType & {
   icon?: React.ComponentType
   defaultValues?: Record<string, unknown>
   shortcut?: KeyboardShortcut
+  mutuallyExclusive?: ReadonlyArray<AnnotationDefinition['name']>
 }
 
 /**