@portabletext/editor 2.3.1 → 2.3.2

package/lib/plugins/index.d.ts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.js";
-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/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/lib/utils/index.d.ts

@@ -1,5 +1,5 @@
 import { BlockOffset, BlockPath, ChildPath, EditorContext, EditorSelection, EditorSelectionPoint } from "../_chunks-dts/behavior.types.action.js";
-import * as _sanity_types9 from "@sanity/types";
+import * as _sanity_types6 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_types6.PortableTextSpan | _sanity_types6.PortableTextObject>;
 /**
  * @public
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/converters/converter.text-plain.test.ts

@@ -1,11 +1,13 @@
 import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {expect, test} from 'vitest'
 import type {EditorSelection} from '..'
-import {schemaType} from '../editor/__tests__/PortableTextEditorTester'
-import {compileSchemaDefinition} from '../editor/editor-schema'
-import {defineSchema} from '../editor/editor-schema-definition'
+import {schemaDefinition} from '../editor/__tests__/PortableTextEditorTester'
+import {
+  compileSchemaDefinition,
+  compileSchemaDefinitionToLegacySchema,
+} from '../editor/editor-schema'
 import type {SchemaDefinition} from '../editor/editor-schema-definition'
-import {createLegacySchema} from '../editor/legacy-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
 import {createConverterTextPlain} from './converter.text-plain'
 
@@ -82,7 +84,7 @@ function createSnapshot({
 }
 
 const converterTextPlain = createConverterTextPlain(
-  createLegacySchema(schemaType),
+  compileSchemaDefinitionToLegacySchema(schemaDefinition),
 )
 
 test(converterTextPlain.serialize.name, () => {

package/src/editor/__tests__/PortableTextEditor.test.tsx

@@ -5,11 +5,11 @@ import {describe, expect, it, vi} from 'vitest'
 import type {EditorSelection} from '../..'
 import {createTestKeyGenerator} from '../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../PortableTextEditor'
-import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
+import {PortableTextEditorTester} from './PortableTextEditorTester'
 
 const helloBlock: PortableTextBlock = {
   _key: '123',
-  _type: 'myTestBlockType',
+  _type: 'block',
   markDefs: [],
   children: [{_key: '567', _type: 'span', text: 'Hello', marks: []}],
 }
@@ -26,7 +26,6 @@ describe('initialization', () => {
         onChange={onChange}
         renderPlaceholder={renderPlaceholder}
         ref={editorRef}
-        schemaType={schemaType}
         value={undefined}
       />,
     )
@@ -54,7 +53,7 @@ describe('initialization', () => {
     <div
       class="pt-block pt-text-block pt-text-block-style-normal"
       data-block-key="k0"
-      data-block-name="myTestBlockType"
+      data-block-name="block"
       data-block-type="text"
       data-slate-node="element"
       data-style="normal"
@@ -100,7 +99,6 @@ describe('initialization', () => {
         keyGenerator={createTestKeyGenerator()}
         ref={editorRef}
         onChange={onChange}
-        schemaType={schemaType}
         value={initialValue}
       />,
     )
@@ -133,7 +131,6 @@ describe('initialization', () => {
         onChange={onChange}
         ref={editorRef}
         selection={initialSelection}
-        schemaType={schemaType}
         value={initialValue}
       />,
     )
@@ -178,7 +175,6 @@ describe('initialization', () => {
         onChange={onChange}
         ref={editorRef}
         selection={initialSelection}
-        schemaType={schemaType}
         value={initialValue}
       />,
     )
@@ -212,7 +208,6 @@ describe('initialization', () => {
         onChange={onChange}
         ref={editorRef}
         selection={newSelection}
-        schemaType={schemaType}
         value={initialValue}
       />,
     )
@@ -239,7 +234,6 @@ describe('initialization', () => {
         onChange={onChange}
         ref={editorRef}
         selection={initialSelection}
-        schemaType={schemaType}
         value={initialValue}
       />,
     )
@@ -285,7 +279,6 @@ describe('initialization', () => {
           onChange={onChange}
           ref={editorRef}
           selection={initialSelection}
-          schemaType={schemaType}
           value={value}
         />,
       )
@@ -318,7 +311,6 @@ describe('initialization', () => {
         onChange={newOnChange}
         ref={editorRef}
         selection={initialSelection}
-        schemaType={schemaType}
         value={value}
       />,
     )
@@ -355,7 +347,7 @@ describe('initialization', () => {
       helloBlock,
       {
         _key: 'abc',
-        _type: 'myTestBlockType',
+        _type: 'block',
         markDefs: [],
         children: [{_key: 'def', _type: 'span', marks: []}],
       },
@@ -371,7 +363,6 @@ describe('initialization', () => {
         onChange={onChange}
         ref={editorRef}
         selection={initialSelection}
-        schemaType={schemaType}
         value={initialValue}
       />,
     )
@@ -396,7 +387,7 @@ describe('initialization', () => {
             },
             item: {
               _key: 'abc',
-              _type: 'myTestBlockType',
+              _type: 'block',
               children: [
                 {
                   _key: 'def',

package/src/editor/__tests__/PortableTextEditorTester.tsx

@@ -1,86 +1,34 @@
-import {Schema} from '@sanity/schema'
-import {defineArrayMember, defineField} from '@sanity/types'
 import {forwardRef, useMemo, type ForwardedRef} from 'react'
 import {vi} from 'vitest'
 import {
+  defineSchema,
+  EditorProvider,
   PortableTextEditable,
-  PortableTextEditor,
   type PortableTextEditableProps,
+  type PortableTextEditor,
   type PortableTextEditorProps,
+  type SchemaDefinition,
 } from '../../index'
+import {InternalChange$Plugin} from '../../plugins/plugin.internal.change-ref'
+import {InternalPortableTextEditorRefPlugin} from '../../plugins/plugin.internal.portable-text-editor-ref'
 
-const imageType = defineField({
-  name: 'custom image',
-  type: 'object',
-  fields: [],
-})
-
-const someObject = defineField({
-  type: 'object',
-  name: 'someObject',
-  fields: [{type: 'string', name: 'color'}],
-})
-
-const blockType = defineField({
-  type: 'block',
-  name: 'myTestBlockType',
-  styles: [
-    {title: 'Normal', value: 'normal'},
-    {title: 'H1', value: 'h1'},
-    {title: 'H2', value: 'h2'},
-    {title: 'H3', value: 'h3'},
-    {title: 'H4', value: 'h4'},
-    {title: 'H5', value: 'h5'},
-    {title: 'H6', value: 'h6'},
-    {title: 'Quote', value: 'blockquote'},
+export const schemaDefinition = defineSchema({
+  decorators: [{name: 'strong'}],
+  blockObjects: [
+    {name: 'custom image', fields: [{name: 'src', type: 'string'}]},
   ],
-  of: [someObject, imageType],
-})
-
-const portableTextType = defineArrayMember({
-  type: 'array',
-  name: 'body',
-  of: [blockType, someObject],
-})
-
-const colorAndLink = defineArrayMember({
-  type: 'array',
-  name: 'colorAndLink',
-  of: [
-    {
-      ...blockType,
-      marks: {
-        annotations: [
-          {
-            name: 'link',
-            type: 'object',
-            fields: [{type: 'string', name: 'color'}],
-          },
-          {
-            name: 'color',
-            type: 'object',
-            fields: [{type: 'string', name: 'color'}],
-          },
-        ],
-      },
-    },
+  inlineObjects: [
+    {name: 'someObject', fields: [{name: 'color', type: 'string'}]},
   ],
 })
 
-const schema = Schema.compile({
-  name: 'test',
-  types: [portableTextType, colorAndLink, imageType],
-})
-
 export const PortableTextEditorTester = forwardRef(
   function PortableTextEditorTester(
-    props: Partial<
-      Omit<PortableTextEditorProps, 'type' | 'onChange' | 'value'>
-    > & {
+    props: {
       onChange?: PortableTextEditorProps['onChange']
       rangeDecorations?: PortableTextEditableProps['rangeDecorations']
       renderPlaceholder?: PortableTextEditableProps['renderPlaceholder']
-      schemaType: PortableTextEditorProps['schemaType']
+      schemaDefinition?: SchemaDefinition
       selection?: PortableTextEditableProps['selection']
       value?: PortableTextEditorProps['value']
       keyGenerator: PortableTextEditorProps['keyGenerator']
@@ -89,24 +37,22 @@ export const PortableTextEditorTester = forwardRef(
   ) {
     const onChange = useMemo(() => props.onChange || vi.fn(), [props.onChange])
     return (
-      <PortableTextEditor
-        schemaType={props.schemaType}
-        onChange={onChange}
-        value={props.value || undefined}
-        keyGenerator={props.keyGenerator}
-        ref={ref}
+      <EditorProvider
+        initialConfig={{
+          schemaDefinition: props.schemaDefinition ?? schemaDefinition,
+          keyGenerator: props.keyGenerator,
+          initialValue: props.value,
+        }}
       >
+        <InternalChange$Plugin onChange={onChange} />
+        <InternalPortableTextEditorRefPlugin ref={ref} />
         <PortableTextEditable
           selection={props.selection || undefined}
           rangeDecorations={props.rangeDecorations}
           renderPlaceholder={props.renderPlaceholder}
           aria-describedby="desc_foo"
         />
-      </PortableTextEditor>
+      </EditorProvider>
     )
   },
 )
-
-export const schemaType = schema.get('body')
-
-export const schemaTypeWithColorAndLink = schema.get('colorAndLink')

package/src/editor/__tests__/RangeDecorations.test.tsx

@@ -5,11 +5,11 @@ import {describe, expect, it, vi} from 'vitest'
 import type {RangeDecoration} from '../..'
 import {createTestKeyGenerator} from '../../internal-utils/test-key-generator'
 import type {PortableTextEditor} from '../PortableTextEditor'
-import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
+import {PortableTextEditorTester} from './PortableTextEditorTester'
 
 const helloBlock: PortableTextBlock = {
   _key: '123',
-  _type: 'myTestBlockType',
+  _type: 'block',
   markDefs: [],
   children: [{_key: '567', _type: 'span', text: 'Hello', marks: []}],
 }
@@ -44,7 +44,6 @@ describe('RangeDecorations', () => {
           onChange={onChange}
           rangeDecorations={rangeDecorations}
           ref={editorRef}
-          schemaType={schemaType}
           value={value}
         />,
       ),
@@ -71,7 +70,6 @@ describe('RangeDecorations', () => {
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}
-        schemaType={schemaType}
         value={value}
       />,
     )
@@ -95,7 +93,6 @@ describe('RangeDecorations', () => {
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}
-        schemaType={schemaType}
         value={value}
       />,
     )
@@ -122,7 +119,6 @@ describe('RangeDecorations', () => {
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}
-        schemaType={schemaType}
         value={value}
       />,
     )
@@ -150,7 +146,6 @@ describe('RangeDecorations', () => {
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}
-        schemaType={schemaType}
         value={value}
       />,
     )
@@ -178,7 +173,6 @@ describe('RangeDecorations', () => {
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}
-        schemaType={schemaType}
         value={value}
       />,
     )
@@ -206,7 +200,6 @@ describe('RangeDecorations', () => {
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}
-        schemaType={schemaType}
         value={value}
       />,
     )

package/src/editor/__tests__/insert-block.test.tsx

@@ -1,22 +1,10 @@
-import {Schema} from '@sanity/schema'
 import type {PortableTextBlock} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
 import {describe, expect, test, vi} from 'vitest'
 import type {EditorChange, EditorSelection} from '../../types/editor'
-import {PortableTextEditable} from '../Editable'
 import {PortableTextEditor} from '../PortableTextEditor'
-
-const schema = Schema.compile({
-  types: [
-    {
-      name: 'portable-text',
-      type: 'array',
-      of: [{type: 'block'}, {type: 'custom image'}],
-    },
-    {name: 'custom image', type: 'object'},
-  ],
-}).get('portable-text')
+import {PortableTextEditorTester} from './PortableTextEditorTester'
 
 describe(PortableTextEditor.insertBlock.name, () => {
   test('Scenario: Inserting a custom block without a selection #1', async () => {
@@ -38,15 +26,12 @@ describe(PortableTextEditor.insertBlock.name, () => {
     const onChange: (change: EditorChange) => void = vi.fn()
 
     render(
-      <PortableTextEditor
+      <PortableTextEditorTester
         ref={editorRef}
-        schemaType={schema}
         value={initialValue}
         keyGenerator={() => 'bb'}
         onChange={onChange}
-      >
-        <PortableTextEditable />
-      </PortableTextEditor>,
+      />,
     )
 
     // Given an empty text block
@@ -107,15 +92,12 @@ describe(PortableTextEditor.insertBlock.name, () => {
     const onChange: (change: EditorChange) => void = vi.fn()
 
     render(
-      <PortableTextEditor
+      <PortableTextEditorTester
         ref={editorRef}
-        schemaType={schema}
         value={initialValue}
         keyGenerator={() => 'bb'}
         onChange={onChange}
-      >
-        <PortableTextEditable />
-      </PortableTextEditor>,
+      />,
     )
 
     // Given an non-empty text block
@@ -180,15 +162,12 @@ describe(PortableTextEditor.insertBlock.name, () => {
     const onChange: (change: EditorChange) => void = vi.fn()
 
     render(
-      <PortableTextEditor
+      <PortableTextEditorTester
         ref={editorRef}
-        schemaType={schema}
         value={initialValue}
         keyGenerator={() => 'bc'}
         onChange={onChange}
-      >
-        <PortableTextEditable />
-      </PortableTextEditor>,
+      />,
     )
 
     // Given an empty text block followed by an image

package/src/editor/__tests__/self-solving.test.tsx

@@ -1,23 +1,13 @@
 import type {JSONValue, Patch} from '@portabletext/patches'
-import {Schema} from '@sanity/schema'
 import type {PortableTextBlock, PortableTextSpan} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type ComponentProps, type RefObject} from 'react'
 import {describe, expect, it, vi} from 'vitest'
+import {createTestKeyGenerator} from '../../internal-utils/test-key-generator'
 import {getTextSelection} from '../../internal-utils/text-selection'
-import {PortableTextEditable} from '../Editable'
 import {PortableTextEditor} from '../PortableTextEditor'
+import {PortableTextEditorTester} from './PortableTextEditorTester'
 
-const schema = Schema.compile({
-  types: [
-    {
-      name: 'portable-text',
-      type: 'array',
-      of: [{type: 'block'}, {type: 'custom image'}],
-    },
-    {name: 'custom image', type: 'object'},
-  ],
-}).get('portable-text')
 type OnChange = ComponentProps<typeof PortableTextEditor>['onChange']
 
 function block(
@@ -85,14 +75,12 @@ describe('Feature: Self-solving', () => {
     }
 
     render(
-      <PortableTextEditor
+      <PortableTextEditorTester
         ref={editorRef}
-        schemaType={schema}
+        keyGenerator={createTestKeyGenerator()}
         value={initialValue}
         onChange={onChange}
-      >
-        <PortableTextEditable />
-      </PortableTextEditor>,
+      />,
     )
 
     await waitFor(() => {

package/src/editor/create-editor.ts

@@ -13,6 +13,7 @@ import {createEditorDom} from './editor-dom'
 import type {EditorActor} from './editor-machine'
 import {editorMachine} from './editor-machine'
 import {
+  compileSchemaDefinition,
   compileSchemaDefinitionToLegacySchema,
   legacySchemaToEditorSchema,
 } from './editor-schema'
@@ -211,7 +212,9 @@ function compileSchemasFromEditorConfig(config: EditorConfig) {
           ? config.schema
           : compileType(config.schema),
       )
-  const schema = legacySchemaToEditorSchema(legacySchema)
+  const schema = config.schemaDefinition
+    ? compileSchemaDefinition(config.schemaDefinition)
+    : legacySchemaToEditorSchema(legacySchema)
 
   return {
     legacySchema,

package/src/editor/editor-schema.ts

@@ -158,9 +158,42 @@ export function legacySchemaToEditorSchema(
 export function compileSchemaDefinition<
   TSchemaDefinition extends SchemaDefinition,
 >(definition: TSchemaDefinition): EditorSchema {
-  return legacySchemaToEditorSchema(
-    compileSchemaDefinitionToLegacySchema(definition),
-  )
+  const styles = (definition.styles ?? []).map((style) => ({
+    ...style,
+    value: style.name,
+  }))
+
+  return {
+    block: {
+      name: 'block',
+    },
+    span: {
+      name: 'span',
+    },
+    styles: !styles.some((style) => style.value === 'normal')
+      ? [{value: 'normal', name: 'normal', title: 'Normal'}, ...styles]
+      : styles,
+    lists: (definition.lists ?? []).map((list) => ({
+      ...list,
+      value: list.name,
+    })),
+    decorators: (definition.decorators ?? []).map((decorator) => ({
+      ...decorator,
+      value: decorator.name,
+    })),
+    annotations: (definition.annotations ?? []).map((annotation) => ({
+      ...annotation,
+      fields: annotation.fields ?? [],
+    })),
+    blockObjects: (definition.blockObjects ?? []).map((blockObject) => ({
+      ...blockObject,
+      fields: blockObject.fields ?? [],
+    })),
+    inlineObjects: (definition.inlineObjects ?? []).map((inlineObject) => ({
+      ...inlineObject,
+      fields: inlineObject.fields ?? [],
+    })),
+  }
 }
 
 export function compileSchemaDefinitionToLegacySchema<