@portabletext/editor 2.1.1 → 2.1.3

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -75,14 +75,14 @@
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
     "react-compiler-runtime": "19.1.0-rc.2",
-    "slate": "0.117.2",
+    "slate": "0.118.0",
     "slate-dom": "^0.117.4",
     "slate-react": "0.117.4",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.20.1",
-    "@portabletext/block-tools": "2.0.2",
-    "@portabletext/keyboard-shortcuts": "1.1.1",
-    "@portabletext/patches": "1.1.6"
+    "@portabletext/block-tools": "2.0.4",
+    "@portabletext/patches": "1.1.6",
+    "@portabletext/keyboard-shortcuts": "1.1.1"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",
@@ -98,7 +98,7 @@
     "@types/react-dom": "^19.1.7",
     "@typescript-eslint/eslint-plugin": "^8.38.0",
     "@typescript-eslint/parser": "^8.38.0",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^4.7.0",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-istanbul": "^3.2.4",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
@@ -112,7 +112,7 @@
     "vite": "^7.0.6",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
-    "racejar": "1.2.11"
+    "racejar": "1.2.12"
   },
   "peerDependencies": {
     "@sanity/schema": "^4.2.0",

package/src/behaviors/behavior.abstract.list-item.ts

@@ -5,7 +5,15 @@ import {defineBehavior} from './behavior.types.behavior'
 export const abstractListItemBehaviors = [
   defineBehavior({
     on: 'list item.add',
-    guard: ({snapshot}) => {
+    guard: ({snapshot, event}) => {
+      if (
+        !snapshot.context.schema.lists.some(
+          (list) => list.name === event.listItem,
+        )
+      ) {
+        return false
+      }
+
       const selectedTextBlocks = getSelectedTextBlocks(snapshot)
 
       return {selectedTextBlocks}
@@ -17,7 +25,7 @@ export const abstractListItemBehaviors = [
             type: 'block.set',
             at: block.path,
             props: {
-              level: 1,
+              level: block.node.level ?? 1,
               listItem: event.listItem,
             },
           }),

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
-    }
-  }
-}