@portabletext/editor 1.26.2 → 1.27.0

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

@@ -17,6 +17,24 @@ export function createWithEventListeners(
     subscriptions.push(() => {
       const subscription = editorActor.on('*', (event) => {
         switch (event.type) {
+          // These events are not relevant for Behaviors
+          case 'blurred':
+          case 'done loading':
+          case 'editable':
+          case 'error':
+          case 'focused':
+          case 'invalid value':
+          case 'loading':
+          case 'mutation':
+          case 'patch':
+          case 'patches':
+          case 'read only':
+          case 'ready':
+          case 'selection':
+          case 'value changed':
+          case 'unset':
+            break
+
           case 'custom.*':
             editorActor.send({
               type: 'custom behavior event',
@@ -25,44 +43,7 @@ export function createWithEventListeners(
             })
             break
 
-          case 'annotation.add':
-          case 'annotation.remove':
-          case 'annotation.toggle':
-          case 'block.set':
-          case 'block.unset':
-          case 'blur':
-          case 'data transfer.set':
-          case 'decorator.add':
-          case 'decorator.remove':
-          case 'decorator.toggle':
-          case 'delete.backward':
-          case 'delete.block':
-          case 'delete.forward':
-          case 'delete.text':
-          case 'deserialization.failure':
-          case 'deserialization.success':
-          case 'focus':
-          case 'insert.block':
-          case 'insert.block object':
-          case 'insert.inline object':
-          case 'insert.span':
-          case 'insert.text block':
-          case 'list item.add':
-          case 'list item.remove':
-          case 'list item.toggle':
-          case 'move.block':
-          case 'move.block down':
-          case 'move.block up':
-          case 'select':
-          case 'select.next block':
-          case 'select.previous block':
-          case 'serialization.failure':
-          case 'serialization.success':
-          case 'style.add':
-          case 'style.remove':
-          case 'style.toggle':
-          case 'text block.set':
-          case 'text block.unset':
+          default:
             editorActor.send({
               type: 'behavior event',
               behaviorEvent: event,

package/src/editor/plugins/createWithPatches.ts

@@ -271,7 +271,7 @@ export function createWithPatches({
       ) {
         patches = [...patches, unset([])]
         editorActor.send({
-          type: 'unset',
+          type: 'notify.unset',
           previousValue: fromSlateValue(
             previousChildren,
             schemaTypes.block.name,

package/src/editor/plugins/createWithPortableTextSelections.ts

@@ -45,9 +45,9 @@ export function createWithPortableTextSelections(
           )
         }
         if (ptRange) {
-          editorActor.send({type: 'selection', selection: ptRange})
+          editorActor.send({type: 'notify.selection', selection: ptRange})
         } else {
-          editorActor.send({type: 'selection', selection: null})
+          editorActor.send({type: 'notify.selection', selection: null})
         }
       }
       prevSelection = editor.selection

package/src/editor/sync-machine.ts

@@ -168,11 +168,9 @@ export const syncMachine = setup({
       assertEvent(event, 'done syncing')
       return context.pendingValue !== event.value
     },
-    'pending value equals previous value': ({context}) =>
-      !(
-        context.previousValue === undefined &&
-        context.pendingValue === undefined
-      ) && isEqual(context.pendingValue, context.previousValue),
+    'pending value equals previous value': ({context}) => {
+      return isEqual(context.pendingValue, context.previousValue)
+    },
   },
   actors: {
     'sync value': syncValueLogic,

package/src/index.ts

@@ -25,16 +25,11 @@ 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 {EditorEventListener} from './editor/editor-event-listener'
-export {
-  editorMachine,
-  type EditorActor,
-  type EditorEmittedEvent,
-  type InternalEditorEmittedEvent,
-  type InternalEditorEvent,
-  type MutationEvent,
-  type PatchEvent,
-  type PatchesEvent,
+export {EventListenerPlugin as EditorEventListener} from './plugins/plugin.event-listener'
+export type {
+  EditorEmittedEvent,
+  MutationEvent,
+  PatchesEvent,
 } from './editor/editor-machine'
 export {
   EditorProvider,
@@ -49,6 +44,5 @@ 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 type {OmitFromUnion, PickFromUnion} from './type-utils'
 export * from './types/editor'
 export type {HotkeyOptions} from './types/options'

package/src/plugins/_exports/index.ts

@@ -0,0 +1 @@
+export * from '../index'

package/src/plugins/index.ts

@@ -0,0 +1,3 @@
+export {EventListenerPlugin} from './plugin.event-listener'
+export {EditorRefPlugin} from './plugin.editor-ref'
+export {MarkdownPlugin, type MarkdownPluginConfig} from './plugin.markdown'

package/src/plugins/plugin.editor-ref.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import type {Editor} from '../editor/create-editor'
+import {useEditor} from '../editor/editor-provider'
+
+/**
+ * @beta
+ */
+export const EditorRefPlugin = React.forwardRef<Editor | null>((_, ref) => {
+  const editor = useEditor()
+
+  const portableTextEditorRef = React.useRef(editor)
+
+  React.useImperativeHandle(ref, () => portableTextEditorRef.current, [])
+
+  return null
+})
+EditorRefPlugin.displayName = 'EditorRefPlugin'

package/src/{editor/editor-event-listener.tsx → plugins/plugin.event-listener.tsx}

@@ -1,7 +1,7 @@
 import {useEffect} from 'react'
 import {useEffectEvent} from 'use-effect-event'
-import type {EditorEmittedEvent} from './editor-machine'
-import {useEditor} from './editor-provider'
+import type {EditorEmittedEvent} from '../editor/editor-machine'
+import {useEditor} from '../editor/editor-provider'
 
 /**
  * @public
@@ -23,12 +23,13 @@ import {useEditor} from './editor-provider'
  * @example
  * Listen and log events.
  * ```tsx
- * import {EditorEventListener, EditorProvider} from '@portabletext/editor'
+ * import {EditorProvider} from '@portabletext/editor'
+ * import {EventListenerPlugin} from '@portabletext/editor/plugins'
  *
  * function MyComponent() {
  *  return (
  *  <EditorProvider>
- *   <EditorEventListener
+ *   <EventListenerPlugin
  *    on={(event) => {
  *     console.log(event)
  *    }
@@ -41,7 +42,7 @@ import {useEditor} from './editor-provider'
  * @example
  * Handle events when there is a mutation.
  * ```tsx
- * <EditorEventListener
+ * <EventListenerPlugin
  *  on={(event) => {
  *    if (event.type === 'mutation') {
  *      console.log('Value changed:', event.snapshot)
@@ -51,7 +52,7 @@ import {useEditor} from './editor-provider'
  * ```
  * @group Components
  */
-export function EditorEventListener(props: {
+export function EventListenerPlugin(props: {
   on: (event: EditorEmittedEvent) => void
 }) {
   const editor = useEditor()

package/src/plugins/plugin.markdown.tsx

@@ -0,0 +1,70 @@
+import {useEffect} from 'react'
+import {
+  createMarkdownBehaviors,
+  type MarkdownBehaviorsConfig,
+} from '../behaviors/behavior.markdown'
+import {useEditor} from '../editor/editor-provider'
+
+/**
+ * @beta
+ */
+export type MarkdownPluginConfig = MarkdownBehaviorsConfig
+
+/**
+ * @beta
+ * Add markdown behaviors for common markdown actions such as converting ### to headings, --- to HRs, and more.
+ *
+ * @example
+ * Configure the bundled markdown behaviors
+ * ```ts
+ * import {EditorProvider} from '@portabletext/editor'
+ * import {MarkdownPlugin} from '@portabletext/editor/plugins'
+ *
+ * function App() {
+ *   return (
+ *    <EditorProvider>
+ *      <MarkdownPlugin
+ *        config={{
+ *          horizontalRuleObject: ({schema}) => {
+ *            const name = schema.blockObjects.find(
+ *              (object) => object.name === 'break',
+ *            )?.name
+ *            return name ? {name} : undefined
+ *          },
+ *          defaultStyle: ({schema}) => schema.styles[0].value,
+ *          headingStyle: ({schema, level}) =>
+ *            schema.styles.find((style) => style.value === `h${level}`)
+ *              ?.value,
+ *          blockquoteStyle: ({schema}) =>
+ *            schema.styles.find((style) => style.value === 'blockquote')
+ *              ?.value,
+ *          unorderedListStyle: ({schema}) =>
+ *            schema.lists.find((list) => list.value === 'bullet')?.value,
+ *          orderedListStyle: ({schema}) =>
+ *            schema.lists.find((list) => list.value === 'number')?.value,
+ *        }}
+ *      />
+ *      {...}
+ *    </EditorProvider>
+ *  )
+ * }
+ */
+export function MarkdownPlugin(props: {config: MarkdownPluginConfig}) {
+  const editor = useEditor()
+
+  useEffect(() => {
+    const behaviors = createMarkdownBehaviors(props.config)
+
+    const unregisterBehaviors = behaviors.map((behavior) =>
+      editor.registerBehavior({behavior}),
+    )
+
+    return () => {
+      for (const unregisterBehavior of unregisterBehaviors) {
+        unregisterBehavior()
+      }
+    }
+  }, [editor, props.config])
+
+  return null
+}

package/src/type-utils.ts

@@ -1,5 +1,5 @@
 /**
- * @alpha
+ * @internal
  */
 export type PickFromUnion<
   TUnion,
@@ -8,10 +8,20 @@ export type PickFromUnion<
 > = TUnion extends Record<TTagKey, TPickedTags> ? TUnion : never
 
 /**
- * @alpha
+ * @internal
  */
 export type OmitFromUnion<
   TUnion,
   TTagKey extends keyof TUnion,
   TOmittedTags extends TUnion[TTagKey],
 > = TUnion extends Record<TTagKey, TOmittedTags> ? never : TUnion
+
+export type NamespaceEvent<TEvent, TNamespace extends string> = TEvent extends {
+  type: infer TEventType
+}
+  ? {
+      [K in keyof TEvent]: K extends 'type'
+        ? `${TNamespace}.${TEventType & string}`
+        : TEvent[K]
+    }
+  : never