@portabletext/editor 2.1.1 → 2.1.2

package/lib/plugins/index.d.cts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.cjs";
-import * as react22 from "react";
+import * as react12 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react22.JSX.Element;
+}): react12.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react22.JSX.Element;
+declare function OneLinePlugin(): react12.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/plugins/index.d.ts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.js";
-import * as react12 from "react";
+import * as react11 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react12.JSX.Element;
+}): react11.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react12.JSX.Element;
+declare function OneLinePlugin(): react11.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/utils/index.d.cts

@@ -1,5 +1,5 @@
 import { BlockOffset, BlockPath, ChildPath, EditorContext, EditorSelection, EditorSelectionPoint } from "../_chunks-dts/behavior.types.action.cjs";
-import * as _sanity_types9 from "@sanity/types";
+import * as _sanity_types8 from "@sanity/types";
 import { KeyedSegment, PortableTextBlock, PortableTextChild, PortableTextSpan, PortableTextTextBlock } from "@sanity/types";
 /**
  * @public
@@ -150,7 +150,7 @@ declare function mergeTextBlocks({
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>;
   targetBlock: PortableTextTextBlock;
   incomingBlock: PortableTextTextBlock;
-}): PortableTextTextBlock<_sanity_types9.PortableTextObject | _sanity_types9.PortableTextSpan>;
+}): PortableTextTextBlock<_sanity_types8.PortableTextObject | _sanity_types8.PortableTextSpan>;
 /**
  * @public
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -80,7 +80,7 @@
     "slate-react": "0.117.4",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.20.1",
-    "@portabletext/block-tools": "2.0.2",
+    "@portabletext/block-tools": "2.0.3",
     "@portabletext/keyboard-shortcuts": "1.1.1",
     "@portabletext/patches": "1.1.6"
   },

package/src/editor/PortableTextEditor.tsx

@@ -29,11 +29,11 @@ import type {
 import {createInternalEditor, type InternalEditor} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import type {EditorActor} from './editor-machine'
+import {eventToChange} from './event-to-change'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import type {MutationActor} from './mutation-machine'
 import {RelayActorContext} from './relay-actor-context'
 import type {RelayActor} from './relay-machine'
-import {eventToChange} from './route-events-to-changes'
 import type {SyncActor} from './sync-machine'
 
 const debug = debugWithName('component:PortableTextEditor')

package/src/editor/editor-provider.tsx

@@ -7,13 +7,13 @@ import useConstant from '../internal-utils/use-constant'
 import {createInternalEditor} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import {EditorContext} from './editor-context'
+import {eventToChange} from './event-to-change'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {
   PortableTextEditor,
   type PortableTextEditorProps,
 } from './PortableTextEditor'
 import {RelayActorContext} from './relay-actor-context'
-import {RouteEventsToChanges} from './route-events-to-changes'
 
 /**
  * @public
@@ -58,6 +58,18 @@ export function EditorProvider(props: EditorProviderProps) {
       unsubscribers.push(subscription())
     }
 
+    const relayActorSubscription = internalEditor.actors.relayActor.on(
+      '*',
+      (event) => {
+        const change = eventToChange(event)
+
+        if (change) {
+          portableTextEditor.change$.next(change)
+        }
+      },
+    )
+    unsubscribers.push(relayActorSubscription.unsubscribe)
+
     internalEditor.actors.editorActor.start()
     internalEditor.actors.mutationActor.start()
     internalEditor.actors.relayActor.start()
@@ -73,16 +85,10 @@ export function EditorProvider(props: EditorProviderProps) {
       stopActor(internalEditor.actors.relayActor)
       stopActor(internalEditor.actors.syncActor)
     }
-  }, [internalEditor])
+  }, [internalEditor, portableTextEditor])
 
   return (
     <EditorContext.Provider value={internalEditor.editor}>
-      <RouteEventsToChanges
-        relayActor={internalEditor.actors.relayActor}
-        onChange={(change) => {
-          portableTextEditor.change$.next(change)
-        }}
-      />
       <EditorActorContext.Provider value={internalEditor.actors.editorActor}>
         <RelayActorContext.Provider value={internalEditor.actors.relayActor}>
           <Slate

package/src/editor/event-to-change.tsx

@@ -0,0 +1,45 @@
+import type {EditorChange} from '../types/editor'
+import type {InternalEditorEmittedEvent} from './relay-machine'
+
+export function eventToChange(
+  event: InternalEditorEmittedEvent,
+): EditorChange | undefined {
+  switch (event.type) {
+    case 'blurred': {
+      return {type: 'blur', event: event.event}
+    }
+    case 'patch':
+      return event
+    case 'loading': {
+      return {type: 'loading', isLoading: true}
+    }
+    case 'done loading': {
+      return {type: 'loading', isLoading: false}
+    }
+    case 'focused': {
+      return {type: 'focus', event: event.event}
+    }
+    case 'value changed': {
+      return {type: 'value', value: event.value}
+    }
+    case 'invalid value': {
+      return {
+        type: 'invalidValue',
+        resolution: event.resolution,
+        value: event.value,
+      }
+    }
+    case 'mutation': {
+      return event
+    }
+    case 'ready': {
+      return event
+    }
+    case 'selection': {
+      return event
+    }
+    case 'unset': {
+      return event
+    }
+  }
+}

package/src/plugins/plugin.internal.change-ref.tsx

@@ -0,0 +1,19 @@
+import {useEffect} from 'react'
+import {usePortableTextEditor} from '../editor/hooks/usePortableTextEditor'
+import type {EditorChange} from '../types/editor'
+
+export function InternalChange$Plugin(props: {
+  onChange: (change: EditorChange) => void
+}) {
+  const change$ = usePortableTextEditor().change$
+
+  useEffect(() => {
+    const subscription = change$.subscribe(props.onChange)
+
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [change$, props.onChange])
+
+  return null
+}

package/src/editor/route-events-to-changes.tsx

@@ -1,75 +0,0 @@
-import {useEffect} from 'react'
-import {useEffectEvent} from 'use-effect-event'
-import type {EditorChange} from '../types/editor'
-import type {InternalEditorEmittedEvent, RelayActor} from './relay-machine'
-
-export function RouteEventsToChanges(props: {
-  relayActor: RelayActor
-  onChange: (change: EditorChange) => void
-}) {
-  // We want to ensure that _when_ `props.onChange` is called, it uses the current value.
-  // But we don't want to have the `useEffect` run setup + teardown + setup every time the prop might change, as that's unnecessary.
-  // So we use our own polyfill that lets us use an upcoming React hook that solves this exact problem.
-  // https://19.react.dev/learn/separating-events-from-effects#declaring-an-effect-event
-  const handleChange = useEffectEvent((change: EditorChange) =>
-    props.onChange(change),
-  )
-
-  useEffect(() => {
-    const sub = props.relayActor.on('*', (event) => {
-      const change = eventToChange(event)
-
-      if (change) {
-        handleChange(change)
-      }
-    })
-    return () => {
-      sub.unsubscribe()
-    }
-  }, [props.relayActor])
-
-  return null
-}
-
-export function eventToChange(
-  event: InternalEditorEmittedEvent,
-): EditorChange | undefined {
-  switch (event.type) {
-    case 'blurred': {
-      return {type: 'blur', event: event.event}
-    }
-    case 'patch':
-      return event
-    case 'loading': {
-      return {type: 'loading', isLoading: true}
-    }
-    case 'done loading': {
-      return {type: 'loading', isLoading: false}
-    }
-    case 'focused': {
-      return {type: 'focus', event: event.event}
-    }
-    case 'value changed': {
-      return {type: 'value', value: event.value}
-    }
-    case 'invalid value': {
-      return {
-        type: 'invalidValue',
-        resolution: event.resolution,
-        value: event.value,
-      }
-    }
-    case 'mutation': {
-      return event
-    }
-    case 'ready': {
-      return event
-    }
-    case 'selection': {
-      return event
-    }
-    case 'unset': {
-      return event
-    }
-  }
-}