@portabletext/editor 2.3.0 → 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.0",
+  "version": "2.3.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/behaviors/behavior.core.lists.ts

@@ -1,9 +1,14 @@
 import {isListBlock, isTextBlock} from '../internal-utils/parse-blocks'
 import {defaultKeyboardShortcuts} from '../keyboard-shortcuts/default-keyboard-shortcuts'
 import * as selectors from '../selectors'
-import {getBlockEndPoint} from '../utils'
+import {
+  getBlockEndPoint,
+  getBlockStartPoint,
+  isEqualSelectionPoints,
+} from '../utils'
 import {isAtTheBeginningOfBlock} from '../utils/util.at-the-beginning-of-block'
 import {isEmptyTextBlock} from '../utils/util.is-empty-text-block'
+import {sliceTextBlock} from '../utils/util.slice-text-block'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
@@ -183,6 +188,148 @@ const mergeTextIntoListOnBackspace = defineBehavior({
   ],
 })
 
+/**
+ * When performing a delete operation where the start point of the operation is
+ * at the start of a list item and the end point of the operation is in another
+ * list item, we make sure the preserve the first list item. Otherwise, the
+ * default behavior would be to preserve the last item.
+ */
+const deletingListFromStart = defineBehavior({
+  on: 'delete',
+  guard: ({snapshot, event}) => {
+    const blocksToDelete = selectors.getSelectedBlocks({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: event.at,
+      },
+    })
+
+    if (blocksToDelete.length < 2) {
+      return false
+    }
+
+    const startBlock = blocksToDelete.at(0)?.node
+    const middleBlocks = blocksToDelete.slice(1, -1)
+    const endBlock = blocksToDelete.at(-1)?.node
+
+    if (
+      !isListBlock(snapshot.context, startBlock) ||
+      !isListBlock(snapshot.context, endBlock)
+    ) {
+      // It's that any block in between isn't a list item, but the first and
+      // last blocks have to be list items for this Behavior to take effect.
+      return false
+    }
+
+    const deleteStartPoint = selectors.getSelectionStartPoint({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: event.at,
+      },
+    })
+    const deleteEndPoint = selectors.getSelectionEndPoint({
+      ...snapshot,
+      context: {
+        ...snapshot.context,
+        selection: event.at,
+      },
+    })
+
+    if (!deleteStartPoint || !deleteEndPoint) {
+      return false
+    }
+
+    const startBlockStartPoint = getBlockStartPoint({
+      context: snapshot.context,
+      block: {
+        node: startBlock,
+        path: [{_key: startBlock._key}],
+      },
+    })
+
+    if (!isEqualSelectionPoints(deleteStartPoint, startBlockStartPoint)) {
+      // If we aren't deleting from the beginning of the first list item, then
+      // there is no need to proceed. The default delete Behavior will suffice.
+      return false
+    }
+
+    const startBlockEndPoint = getBlockEndPoint({
+      context: snapshot.context,
+      block: {
+        node: startBlock,
+        path: [{_key: startBlock._key}],
+      },
+    })
+    const endBlockEndPoint = getBlockEndPoint({
+      context: snapshot.context,
+      block: {
+        node: endBlock,
+        path: [{_key: endBlock._key}],
+      },
+    })
+    const slicedEndBlock = sliceTextBlock({
+      context: {
+        schema: snapshot.context.schema,
+        selection: {
+          anchor: deleteEndPoint,
+          focus: endBlockEndPoint,
+        },
+      },
+      block: endBlock,
+    })
+
+    return {
+      startBlockStartPoint,
+      startBlockEndPoint,
+      middleBlocks,
+      endBlock,
+      slicedEndBlock,
+    }
+  },
+  actions: [
+    (
+      _,
+      {
+        startBlockStartPoint,
+        startBlockEndPoint,
+        middleBlocks,
+        endBlock,
+        slicedEndBlock,
+      },
+    ) => [
+      // All block in between can safely be deleted.
+      ...middleBlocks.map((block) =>
+        raise({type: 'delete.block', at: block.path}),
+      ),
+      // The last block is deleted as well.
+      raise({type: 'delete.block', at: [{_key: endBlock._key}]}),
+      // But in case the delete operation didn't reach all the way to the end
+      // of it, we first place the caret at the end of the start block...
+      raise({
+        type: 'select',
+        at: {
+          anchor: startBlockEndPoint,
+          focus: startBlockEndPoint,
+        },
+      }),
+      // ...and insert the rest of the end block at the end of it.
+      raise({
+        type: 'insert.block',
+        block: slicedEndBlock,
+        placement: 'auto',
+        select: 'none',
+      }),
+      // And finally, we delete the original text of the start block.
+      raise({
+        type: 'delete',
+        at: {anchor: startBlockStartPoint, focus: startBlockEndPoint},
+      }),
+    ],
+  ],
+})
+
 /**
  * Hitting Enter in an empty list item would create a new list item below by
  * default. Instead, the list properties should be cleared.
@@ -521,6 +668,7 @@ export const coreListBehaviors = {
   unindentListOnBackspace,
   mergeTextIntoListOnDelete,
   mergeTextIntoListOnBackspace,
+  deletingListFromStart,
   clearListOnEnter,
   indentListOnTab,
   unindentListOnShiftTab,

package/src/behaviors/behavior.core.ts

@@ -24,6 +24,7 @@ export const coreBehaviorsConfig = [
   coreListBehaviors.unindentListOnBackspace,
   coreListBehaviors.mergeTextIntoListOnDelete,
   coreListBehaviors.mergeTextIntoListOnBackspace,
+  coreListBehaviors.deletingListFromStart,
   coreListBehaviors.clearListOnEnter,
   coreListBehaviors.indentListOnTab,
   coreListBehaviors.unindentListOnShiftTab,

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