@portabletext/editor 1.34.1 → 1.35.1

package/src/editor/editor-machine.ts

@@ -160,6 +160,7 @@ type UnsetEvent = {
  * @internal
  */
 export type EditorActor = ActorRefFrom<typeof editorMachine>
+export type HasTag = ReturnType<EditorActor['getSnapshot']>['hasTag']
 
 /**
  * @internal
@@ -194,6 +195,9 @@ export type InternalEditorEvent =
   | NamespaceEvent<UnsetEvent, 'notify'>
   | PatchEvent
   | SyntheticBehaviorEvent
+  | {type: 'dragstart'}
+  | {type: 'dragend'}
+  | {type: 'drop'}
 
 /**
  * @internal
@@ -235,6 +239,7 @@ export const editorMachine = setup({
       schema: EditorSchema
       value?: Array<PortableTextBlock>
     },
+    tags: {} as 'dragging internally',
   },
   actions: {
     'add behavior to context': assign({
@@ -290,189 +295,197 @@ export const editorMachine = setup({
     'clear pending events': assign({
       pendingEvents: [],
     }),
-    'handle behavior event': enqueueActions(({context, event, enqueue}) => {
-      assertEvent(event, ['behavior event', 'custom behavior event'])
-
-      const defaultAction =
-        event.type === 'custom behavior event' ||
-        event.behaviorEvent.type === 'copy' ||
-        event.behaviorEvent.type === 'deserialize' ||
-        event.behaviorEvent.type === 'key.down' ||
-        event.behaviorEvent.type === 'key.up' ||
-        event.behaviorEvent.type === 'paste' ||
-        event.behaviorEvent.type === 'serialize'
-          ? undefined
-          : ({
-              ...event.behaviorEvent,
-              editor: event.editor,
-            } satisfies BehaviorAction)
-      const defaultActionCallback =
-        event.type === 'behavior event'
-          ? event.defaultActionCallback
-          : undefined
-
-      const eventBehaviors = [
-        ...foundationalBehaviors,
-        ...context.behaviors.values(),
-        ...defaultBehaviors,
-      ].filter((behavior) => behavior.on === event.behaviorEvent.type)
-
-      if (eventBehaviors.length === 0) {
-        if (defaultActionCallback) {
+    'handle behavior event': enqueueActions(
+      ({context, event, enqueue, self}) => {
+        assertEvent(event, ['behavior event', 'custom behavior event'])
+
+        const defaultAction =
+          event.type === 'custom behavior event' ||
+          event.behaviorEvent.type === 'copy' ||
+          event.behaviorEvent.type === 'deserialize' ||
+          event.behaviorEvent.type === 'key.down' ||
+          event.behaviorEvent.type === 'key.up' ||
+          event.behaviorEvent.type === 'paste' ||
+          event.behaviorEvent.type === 'serialize'
+            ? undefined
+            : ({
+                ...event.behaviorEvent,
+                editor: event.editor,
+              } satisfies BehaviorAction)
+        const defaultActionCallback =
+          event.type === 'behavior event'
+            ? event.defaultActionCallback
+            : undefined
+
+        const eventBehaviors = [
+          ...foundationalBehaviors,
+          ...context.behaviors.values(),
+          ...defaultBehaviors,
+        ].filter((behavior) => behavior.on === event.behaviorEvent.type)
+
+        if (eventBehaviors.length === 0) {
+          if (defaultActionCallback) {
+            withApplyingBehaviorActions(event.editor, () => {
+              try {
+                defaultActionCallback()
+              } catch (error) {
+                console.error(
+                  new Error(
+                    `Performing action "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                  ),
+                )
+              }
+            })
+            return
+          }
+
+          if (!defaultAction) {
+            return
+          }
+
           withApplyingBehaviorActions(event.editor, () => {
             try {
-              defaultActionCallback()
+              performAction({
+                context,
+                action: defaultAction,
+              })
             } catch (error) {
               console.error(
                 new Error(
-                  `Performing action "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                  `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
                 ),
               )
             }
           })
+          event.editor.onChange()
           return
         }
 
-        if (!defaultAction) {
-          return
-        }
+        const editorSnapshot = createEditorSnapshot({
+          converters: [...context.converters],
+          editor: event.editor,
+          keyGenerator: context.keyGenerator,
+          schema: context.schema,
+          hasTag: (tag) => self.getSnapshot().hasTag(tag),
+        })
+
+        let behaviorOverwritten = false
 
-        withApplyingBehaviorActions(event.editor, () => {
-          try {
-            performAction({
-              context,
-              action: defaultAction,
+        for (const eventBehavior of eventBehaviors) {
+          const shouldRun =
+            eventBehavior.guard === undefined ||
+            eventBehavior.guard({
+              context: editorSnapshot.context,
+              snapshot: editorSnapshot,
+              event: event.behaviorEvent,
             })
-          } catch (error) {
-            console.error(
-              new Error(
-                `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-              ),
-            )
+
+          if (!shouldRun) {
+            continue
           }
-        })
-        event.editor.onChange()
-        return
-      }
 
-      const editorSnapshot = createEditorSnapshot({
-        converters: [...context.converters],
-        editor: event.editor,
-        keyGenerator: context.keyGenerator,
-        schema: context.schema,
-      })
-
-      let behaviorOverwritten = false
-
-      for (const eventBehavior of eventBehaviors) {
-        const shouldRun =
-          eventBehavior.guard === undefined ||
-          eventBehavior.guard({
-            context: editorSnapshot.context,
-            event: event.behaviorEvent,
-          })
+          const actionIntendSets = eventBehavior.actions.map((actionSet) =>
+            actionSet(
+              {
+                context: editorSnapshot.context,
+                snapshot: editorSnapshot,
+                event: event.behaviorEvent,
+              },
+              shouldRun,
+            ),
+          )
+
+          for (const actionIntends of actionIntendSets) {
+            behaviorOverwritten =
+              behaviorOverwritten ||
+              (actionIntends.length > 0 &&
+                actionIntends.some(
+                  (actionIntend) => actionIntend.type !== 'effect',
+                ))
+
+            withApplyingBehaviorActionIntendSet(event.editor, () => {
+              for (const actionIntend of actionIntends) {
+                if (actionIntend.type === 'raise') {
+                  if (isCustomBehaviorEvent(actionIntend.event)) {
+                    enqueue.raise({
+                      type: 'custom behavior event',
+                      behaviorEvent: actionIntend.event as CustomBehaviorEvent,
+                      editor: event.editor,
+                    })
+                  } else {
+                    enqueue.raise({
+                      type: 'behavior event',
+                      behaviorEvent: actionIntend.event,
+                      editor: event.editor,
+                    })
+                  }
+                  continue
+                }
 
-        if (!shouldRun) {
-          continue
-        }
+                const action = {
+                  ...actionIntend,
+                  editor: event.editor,
+                }
 
-        const actionIntendSets = eventBehavior.actions.map((actionSet) =>
-          actionSet(
-            {context: editorSnapshot.context, event: event.behaviorEvent},
-            shouldRun,
-          ),
-        )
-
-        for (const actionIntends of actionIntendSets) {
-          behaviorOverwritten =
-            behaviorOverwritten ||
-            (actionIntends.length > 0 &&
-              actionIntends.some(
-                (actionIntend) => actionIntend.type !== 'effect',
-              ))
-
-          withApplyingBehaviorActionIntendSet(event.editor, () => {
-            for (const actionIntend of actionIntends) {
-              if (actionIntend.type === 'raise') {
-                if (isCustomBehaviorEvent(actionIntend.event)) {
-                  enqueue.raise({
-                    type: 'custom behavior event',
-                    behaviorEvent: actionIntend.event as CustomBehaviorEvent,
-                    editor: event.editor,
-                  })
-                } else {
-                  enqueue.raise({
-                    type: 'behavior event',
-                    behaviorEvent: actionIntend.event,
-                    editor: event.editor,
-                  })
+                try {
+                  performAction({context, action})
+                } catch (error) {
+                  console.error(
+                    new Error(
+                      `Performing action "${action.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                    ),
+                  )
+                  break
                 }
-                continue
               }
+            })
+            event.editor.onChange()
+          }
 
-              const action = {
-                ...actionIntend,
-                editor: event.editor,
-              }
+          if (behaviorOverwritten) {
+            event.nativeEvent?.preventDefault()
+            break
+          }
+        }
 
+        if (!behaviorOverwritten) {
+          if (defaultActionCallback) {
+            withApplyingBehaviorActions(event.editor, () => {
               try {
-                performAction({context, action})
+                defaultActionCallback()
               } catch (error) {
                 console.error(
                   new Error(
-                    `Performing action "${action.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                    `Performing "${event.behaviorEvent.type}" failed due to: ${error.message}`,
                   ),
                 )
-                break
               }
-            }
-          })
-          event.editor.onChange()
-        }
+            })
+            return
+          }
 
-        if (behaviorOverwritten) {
-          event.nativeEvent?.preventDefault()
-          break
-        }
-      }
+          if (!defaultAction) {
+            return
+          }
 
-      if (!behaviorOverwritten) {
-        if (defaultActionCallback) {
           withApplyingBehaviorActions(event.editor, () => {
             try {
-              defaultActionCallback()
+              performAction({
+                context,
+                action: defaultAction,
+              })
             } catch (error) {
               console.error(
                 new Error(
-                  `Performing "${event.behaviorEvent.type}" failed due to: ${error.message}`,
+                  `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
                 ),
               )
             }
           })
-          return
-        }
-
-        if (!defaultAction) {
-          return
+          event.editor.onChange()
         }
-
-        withApplyingBehaviorActions(event.editor, () => {
-          try {
-            performAction({
-              context,
-              action: defaultAction,
-            })
-          } catch (error) {
-            console.error(
-              new Error(
-                `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-              ),
-            )
-          }
-        })
-        event.editor.onChange()
-      }
-    }),
+      },
+    ),
   },
 }).createMachine({
   id: 'editor',
@@ -627,6 +640,21 @@ export const editorMachine = setup({
               actions: emit(({event}) => event),
             },
           },
+          initial: 'idle',
+          states: {
+            'idle': {
+              on: {
+                dragstart: {target: 'dragging internally'},
+              },
+            },
+            'dragging internally': {
+              tags: ['dragging internally'],
+              on: {
+                dragend: {target: 'idle'},
+                drop: {target: 'idle'},
+              },
+            },
+          },
         },
       },
     },

package/src/editor/editor-selector.ts

@@ -77,5 +77,8 @@ export function getEditorSnapshot({
       selection: editorActorSnapshot.context.selection,
       value: getValue({editorActorSnapshot, slateEditorInstance}),
     },
+    beta: {
+      hasTag: (tag) => editorActorSnapshot.hasTag(tag),
+    },
   }
 }

package/src/editor/editor-snapshot.ts

@@ -5,6 +5,7 @@ import {fromSlateValue} from '../internal-utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
 import type {EditorSelection, PortableTextSlateEditor} from '../types/editor'
 import type {EditorSchema} from './define-schema'
+import type {HasTag} from './editor-machine'
 import {getActiveDecorators} from './get-active-decorators'
 
 /**
@@ -24,6 +25,13 @@ export type EditorContext = {
  */
 export type EditorSnapshot = {
   context: EditorContext
+  /**
+   * @beta
+   * Do not rely on this externally
+   */
+  beta: {
+    hasTag: HasTag
+  }
 }
 
 export function createEditorSnapshot({
@@ -31,11 +39,13 @@ export function createEditorSnapshot({
   editor,
   keyGenerator,
   schema,
+  hasTag,
 }: {
   converters: Array<Converter>
   editor: PortableTextSlateEditor
   keyGenerator: () => string
   schema: EditorSchema
+  hasTag: HasTag
 }) {
   const value = fromSlateValue(
     editor.children,
@@ -58,5 +68,8 @@ export function createEditorSnapshot({
 
   return {
     context,
+    beta: {
+      hasTag,
+    },
   } satisfies EditorSnapshot
 }

package/src/editor-event-listener.tsx

@@ -0,0 +1,30 @@
+import {useEffect} from 'react'
+import {useEffectEvent} from 'use-effect-event'
+import type {EditorEmittedEvent} from './editor/editor-machine'
+import {useEditor} from './editor/editor-provider'
+
+/**
+ * @public
+ * @deprecated
+ * This component has been renamed. Use `EventListenerPlugin` instead.
+ *
+ * ```
+ * import {EventListenerPlugin} from '@portabletext/editor/plugins'
+ * ```
+ */
+export function EditorEventListener(props: {
+  on: (event: EditorEmittedEvent) => void
+}) {
+  const editor = useEditor()
+  const on = useEffectEvent(props.on)
+
+  useEffect(() => {
+    const subscription = editor.on('*', on)
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [editor])
+
+  return null
+}

package/src/index.ts

@@ -10,7 +10,6 @@ export type {
   BehaviorActionIntendSet,
   BehaviorEvent,
   BehaviorGuard,
-  BlockOffset,
   NativeBehaviorEvent,
   SyntheticBehaviorEvent,
 } from './behaviors/index'
@@ -21,11 +20,9 @@ export {
   type BaseDefinition,
   type SchemaDefinition,
 } from './editor/define-schema'
-export type {PortableTextMemberSchemaTypes} from './types/editor'
 export type {EditorSchema} from './editor/define-schema'
 export {PortableTextEditable} from './editor/Editable'
 export type {PortableTextEditableProps} from './editor/Editable'
-export {EventListenerPlugin as EditorEventListener} from './plugins/plugin.event-listener'
 export type {
   EditorEmittedEvent,
   MutationEvent,
@@ -44,5 +41,8 @@ export {defaultKeyGenerator as keyGenerator} from './editor/key-generator'
 export type {AddedAnnotationPaths} from './editor/plugins/createWithEditableAPI'
 export {PortableTextEditor} from './editor/PortableTextEditor'
 export type {PortableTextEditorProps} from './editor/PortableTextEditor'
+export {EditorEventListener} from './editor-event-listener'
+export type {BlockOffset} from './types/block-offset'
 export * from './types/editor'
+export type {PortableTextMemberSchemaTypes} from './types/editor'
 export type {HotkeyOptions} from './types/options'

package/src/internal-utils/create-test-snapshot.ts

@@ -0,0 +1,23 @@
+import {compileSchemaDefinition, defineSchema} from '../editor/define-schema'
+import type {EditorSnapshot} from '../selectors'
+import {createTestKeyGenerator} from './test-key-generator'
+
+export function createTestSnapshot(snapshot: {
+  context?: Partial<EditorSnapshot['context']>
+  beta?: Partial<EditorSnapshot['beta']>
+}): EditorSnapshot {
+  return {
+    context: {
+      converters: snapshot.context?.converters ?? [],
+      schema:
+        snapshot.context?.schema ?? compileSchemaDefinition(defineSchema({})),
+      keyGenerator: snapshot.context?.keyGenerator ?? createTestKeyGenerator(),
+      activeDecorators: snapshot.context?.activeDecorators ?? [],
+      value: snapshot.context?.value ?? [],
+      selection: snapshot.context?.selection ?? null,
+    },
+    beta: {
+      hasTag: snapshot.beta?.hasTag ?? (() => false),
+    },
+  }
+}

package/src/internal-utils/get-text-to-emphasize.ts

@@ -1,12 +1,34 @@
-const asteriskPairRegex = '(?<!\\*)\\*(?!\\s)([^*\\n]+?)(?<!\\s)\\*(?!\\*)'
-const underscorePairRegex = '(?<!_)_(?!\\s)([^_\\n]+?)(?<!\\s)_(?!_)'
-const italicRegex = new RegExp(`(${asteriskPairRegex}|${underscorePairRegex})$`)
+export function createPairRegex(char: string, amount: number) {
+  // Negative lookbehind: Ensures that the matched sequence is not preceded by the same character
+  const prePrefix = `(?<!\\${char})`
+
+  // Repeats the character `amount` times
+  const prefix = `\\${char}`.repeat(Math.max(amount, 1))
+
+  // Negative lookahead: Ensures that the opening pair (**, *, etc.) is not followed by a space
+  const postPrefix = `(?!\\s)`
+
+  // Captures the content inside the pair
+  const content = `([^${char}\\n]+?)`
+
+  // Negative lookbehind: Ensures that the content is not followed by a space
+  const preSuffix = `(?<!\\s)`
+
+  // Repeats the character `amount` times
+  const suffix = `\\${char}`.repeat(Math.max(amount, 1))
+
+  // Negative lookahead: Ensures that the matched sequence is not followed by the same character
+  const postSuffix = `(?!\\${char})`
+
+  return `${prePrefix}${prefix}${postPrefix}${content}${preSuffix}${suffix}${postSuffix}`
+}
+
+const italicRegex = new RegExp(
+  `(${createPairRegex('*', 1)}|${createPairRegex('_', 1)})$`,
+)
 
-const doubleAsteriskPairRegex =
-  '(?<!\\*)\\*\\*(?!\\s)([^*\\n]+?)(?<!\\s)\\*\\*(?!\\*)'
-const doubleUnderscorePairRegex = '(?<!_)__(?!\\s)([^_\\n]+?)(?<!\\s)__(?!_)'
 const boldRegex = new RegExp(
-  `(${doubleAsteriskPairRegex}|${doubleUnderscorePairRegex})$`,
+  `(${createPairRegex('*', 2)}|${createPairRegex('_', 2)})$`,
 )
 
 export function getTextToItalic(text: string) {