@portabletext/editor 1.55.4 → 1.55.6

package/src/editor/editor-schema-definition.ts

@@ -0,0 +1,106 @@
+/**
+ * @public
+ */
+export type BaseDefinition = {
+  name: string
+  title?: string
+}
+
+/**
+ * @public
+ */
+export type FieldDefinition = {
+  name: string
+  type: 'string' | 'number' | 'boolean' | 'array' | 'object'
+}
+
+/**
+ * @public
+ */
+export type DecoratorDefinition<
+  TBaseDefinition extends BaseDefinition = BaseDefinition,
+> = TBaseDefinition
+
+/**
+ * @public
+ */
+export type AnnotationDefinition<
+  TBaseDefinition extends BaseDefinition = BaseDefinition,
+> = TBaseDefinition & {
+  fields?: ReadonlyArray<FieldDefinition>
+}
+
+/**
+ * @public
+ */
+export type BlockObjectDefinition<
+  TBaseDefinition extends BaseDefinition = BaseDefinition,
+> = TBaseDefinition & {
+  fields?: ReadonlyArray<FieldDefinition>
+}
+
+/**
+ * @public
+ */
+export type InlineObjectDefinition<
+  TBaseDefinition extends BaseDefinition = BaseDefinition,
+> = TBaseDefinition & {
+  fields?: ReadonlyArray<FieldDefinition>
+}
+
+/**
+ * @public
+ */
+export type ListDefinition<
+  TBaseDefinition extends BaseDefinition = BaseDefinition,
+> = TBaseDefinition
+
+/**
+ * @public
+ */
+export type StyleDefinition<
+  TBaseDefinition extends BaseDefinition = BaseDefinition,
+> = TBaseDefinition
+
+/**
+ * @public
+ */
+export type SchemaDefinition<
+  TBaseDefinition extends BaseDefinition = BaseDefinition,
+> = {
+  decorators?: ReadonlyArray<DecoratorDefinition<TBaseDefinition>>
+  blockObjects?: ReadonlyArray<BlockObjectDefinition<TBaseDefinition>>
+  inlineObjects?: ReadonlyArray<InlineObjectDefinition<TBaseDefinition>>
+  annotations?: ReadonlyArray<AnnotationDefinition<TBaseDefinition>>
+  lists?: ReadonlyArray<ListDefinition<TBaseDefinition>>
+  styles?: ReadonlyArray<StyleDefinition<TBaseDefinition>>
+}
+
+/**
+ * @public
+ * A helper wrapper that adds editor support, such as autocomplete and type checking, for a schema definition.
+ * @example
+ * ```ts
+ * import { defineSchema } from '@portabletext/editor'
+ *
+ * const schemaDefinition = defineSchema({
+ *  decorators: [{name: 'strong'}, {name: 'em'}, {name: 'underline'}],
+ *  annotations: [{name: 'link'}],
+ *  styles: [
+ *    {name: 'normal'},
+ *    {name: 'h1'},
+ *    {name: 'h2'},
+ *    {name: 'h3'},
+ *    {name: 'blockquote'},
+ *  ],
+ *  lists: [],
+ *  inlineObjects: [],
+ *  blockObjects: [],
+ * }
+ * ```
+ */
+export function defineSchema<const TSchemaDefinition extends SchemaDefinition>(
+  definition: TSchemaDefinition,
+): TSchemaDefinition {
+  return definition
+}

package/src/editor/editor-schema.ts

@@ -2,74 +2,14 @@ import {Schema as SanitySchema} from '@sanity/schema'
 import {defineField, defineType, type ObjectSchemaType} from '@sanity/types'
 import startCase from 'lodash.startcase'
 import type {PortableTextMemberSchemaTypes} from '../types/editor'
+import type {
+  BaseDefinition,
+  FieldDefinition,
+  SchemaDefinition,
+} from './editor-schema-definition'
 import {defaultKeyGenerator} from './key-generator'
 import {createLegacySchema} from './legacy-schema'
 
-/**
- * @public
- */
-export type BaseDefinition = {
-  name: string
-  title?: string
-}
-
-/**
- * @public
- */
-export type FieldDefinition = {
-  name: string
-  type: 'string' | 'number' | 'boolean' | 'array' | 'object'
-}
-
-/**
- * @public
- */
-export type SchemaDefinition<
-  TBaseDefinition extends BaseDefinition = BaseDefinition,
-> = {
-  decorators?: ReadonlyArray<TBaseDefinition>
-  blockObjects?: ReadonlyArray<
-    TBaseDefinition & {fields?: ReadonlyArray<FieldDefinition>}
-  >
-  inlineObjects?: ReadonlyArray<
-    TBaseDefinition & {fields?: ReadonlyArray<FieldDefinition>}
-  >
-  annotations?: ReadonlyArray<
-    TBaseDefinition & {fields?: ReadonlyArray<FieldDefinition>}
-  >
-  lists?: ReadonlyArray<TBaseDefinition>
-  styles?: ReadonlyArray<TBaseDefinition>
-}
-
-/**
- * @public
- * A helper wrapper that adds editor support, such as autocomplete and type checking, for a schema definition.
- * @example
- * ```ts
- * import { defineSchema } from '@portabletext/editor'
- *
- * const schemaDefinition = defineSchema({
- *  decorators: [{name: 'strong'}, {name: 'em'}, {name: 'underline'}],
- *  annotations: [{name: 'link'}],
- *  styles: [
- *    {name: 'normal'},
- *    {name: 'h1'},
- *    {name: 'h2'},
- *    {name: 'h3'},
- *    {name: 'blockquote'},
- *  ],
- *  lists: [],
- *  inlineObjects: [],
- *  blockObjects: [],
- * }
- * ```
- */
-export function defineSchema<const TSchemaDefinition extends SchemaDefinition>(
-  definition: TSchemaDefinition,
-): TSchemaDefinition {
-  return definition
-}
-
 const temporaryImageName = `tmp-${defaultKeyGenerator()}-image`
 const temporaryUrlName = `tmp-${defaultKeyGenerator()}-url`
 
@@ -92,54 +32,72 @@ const defaultObjectTitles: Record<string, string> = {
  * @public
  */
 export type EditorSchema = {
-  annotations: ReadonlyArray<
-    BaseDefinition & {
-      fields: ReadonlyArray<{name: string; type: string}>
-    }
-  >
+  annotations: ReadonlyArray<AnnotationSchemaType>
   block: {
     name: string
   }
-  blockObjects: ReadonlyArray<
-    BaseDefinition & {
-      fields: ReadonlyArray<{name: string; type: string}>
-    }
-  >
-  decorators: ReadonlyArray<
-    BaseDefinition & {
-      /**
-       * @deprecated
-       * Use `name` instead
-       */
-      value: string
-    }
-  >
-  inlineObjects: ReadonlyArray<
-    BaseDefinition & {
-      fields: ReadonlyArray<{name: string; type: string}>
-    }
-  >
+  blockObjects: ReadonlyArray<BlockObjectSchemaType>
+  decorators: ReadonlyArray<DecoratorSchemaType>
+  inlineObjects: ReadonlyArray<InlineObjectSchemaType>
   span: {
     name: string
   }
-  styles: ReadonlyArray<
-    BaseDefinition & {
-      /**
-       * @deprecated
-       * Use `name` instead
-       */
-      value: string
-    }
-  >
-  lists: ReadonlyArray<
-    BaseDefinition & {
-      /**
-       * @deprecated
-       * Use `name` instead
-       */
-      value: string
-    }
-  >
+  styles: ReadonlyArray<StyleSchemaType>
+  lists: ReadonlyArray<ListSchemaType>
+}
+
+/**
+ * @public
+ */
+export type AnnotationSchemaType = BaseDefinition & {
+  fields: ReadonlyArray<FieldDefinition>
+}
+
+/**
+ * @public
+ */
+export type BlockObjectSchemaType = BaseDefinition & {
+  fields: ReadonlyArray<FieldDefinition>
+}
+
+/**
+ * @public
+ */
+export type DecoratorSchemaType = BaseDefinition & {
+  /**
+   * @deprecated
+   * Use `name` instead
+   */
+  value: string
+}
+
+/**
+ * @public
+ */
+export type InlineObjectSchemaType = BaseDefinition & {
+  fields: ReadonlyArray<FieldDefinition>
+}
+
+/**
+ * @public
+ */
+export type ListSchemaType = BaseDefinition & {
+  /**
+   * @deprecated
+   * Use `name` instead
+   */
+  value: string
+}
+
+/**
+ * @public
+ */
+export type StyleSchemaType = BaseDefinition & {
+  /**
+   * @deprecated
+   * Use `name` instead
+   */
+  value: string
 }
 
 export function legacySchemaToEditorSchema(

package/src/editor.ts

@@ -8,7 +8,7 @@ import type {Behavior} from './behaviors/behavior.types.behavior'
 import type {ExternalBehaviorEvent} from './behaviors/behavior.types.event'
 import type {EditorDom} from './editor/editor-dom'
 import type {ExternalEditorEvent} from './editor/editor-machine'
-import type {SchemaDefinition} from './editor/editor-schema'
+import type {SchemaDefinition} from './editor/editor-schema-definition'
 import type {EditorSnapshot} from './editor/editor-snapshot'
 import type {EditorEmittedEvent} from './editor/relay-machine'
 

package/src/index.ts

@@ -14,13 +14,27 @@ export {
   EditorProvider,
   type EditorProviderProps,
 } from './editor/editor-provider'
+export type {
+  AnnotationSchemaType,
+  BlockObjectSchemaType,
+  DecoratorSchemaType,
+  EditorSchema,
+  InlineObjectSchemaType,
+  ListSchemaType,
+  StyleSchemaType,
+} from './editor/editor-schema'
 export {
   defineSchema,
+  type AnnotationDefinition,
   type BaseDefinition,
+  type BlockObjectDefinition,
+  type DecoratorDefinition,
   type FieldDefinition,
+  type InlineObjectDefinition,
+  type ListDefinition,
   type SchemaDefinition,
-} from './editor/editor-schema'
-export type {EditorSchema} from './editor/editor-schema'
+  type StyleDefinition,
+} from './editor/editor-schema-definition'
 export {useEditorSelector, type EditorSelector} from './editor/editor-selector'
 export type {EditorContext, EditorSnapshot} from './editor/editor-snapshot'
 export {usePortableTextEditor} from './editor/hooks/usePortableTextEditor'

package/src/internal-utils/apply-operation-to-portable-text.test.ts

@@ -1,5 +1,6 @@
 import {describe, expect, test} from 'vitest'
-import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import {applyOperationToPortableText} from './apply-operation-to-portable-text'
 import {createTestKeyGenerator} from './test-key-generator'
 

package/src/internal-utils/build-index-maps.test.ts

@@ -1,6 +1,7 @@
 import type {PortableTextBlock} from '@sanity/types'
 import {describe, expect, test} from 'vitest'
-import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import {defaultKeyGenerator} from '../editor/key-generator'
 import {buildIndexMaps} from './build-index-maps'
 

package/src/internal-utils/create-test-snapshot.ts

@@ -1,5 +1,6 @@
 import type {EditorSnapshot} from '..'
-import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import {createTestKeyGenerator} from './test-key-generator'
 
 export function createTestSnapshot(snapshot: {

package/src/internal-utils/drag-selection.test.ts

@@ -1,5 +1,6 @@
 import {describe, expect, test} from 'vitest'
-import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import type {EditorSelection} from '../types/editor'
 import {createTestSnapshot} from './create-test-snapshot'
 import {getDragSelection} from './drag-selection'

package/src/internal-utils/parse-blocks.test.ts

@@ -1,5 +1,6 @@
 import {describe, expect, test} from 'vitest'
-import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import {parseBlock, parseSpan} from './parse-blocks'
 import {createTestKeyGenerator} from './test-key-generator'
 

package/src/internal-utils/selection-text.ts

@@ -1,5 +1,6 @@
 import type {PortableTextBlock} from '@sanity/types'
-import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import type {EditorSelection} from '../types/editor'
 import {sliceBlocks} from '../utils/util.slice-blocks'
 import {getTersePt} from './terse-pt'

package/src/internal-utils/terse-pt.test.ts

@@ -1,5 +1,6 @@
 import {expect, test} from 'vitest'
-import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
 import {getTersePt, parseTersePt, parseTersePtString} from './terse-pt'
 

package/src/internal-utils/test-editor.tsx

@@ -6,7 +6,10 @@ import {render} from 'vitest-browser-react'
 import type {Editor} from '../editor'
 import {PortableTextEditable} from '../editor/Editable'
 import {EditorProvider} from '../editor/editor-provider'
-import {defineSchema, type SchemaDefinition} from '../editor/editor-schema'
+import {
+  defineSchema,
+  type SchemaDefinition,
+} from '../editor/editor-schema-definition'
 import type {EditorEmittedEvent} from '../editor/relay-machine'
 import {EditorRefPlugin} from '../plugins/plugin.editor-ref'
 import {EventListenerPlugin} from '../plugins/plugin.event-listener'

package/src/plugins/plugin.markdown.test.tsx

@@ -4,7 +4,7 @@ import {describe, expect, test, vi} from 'vitest'
 import {render} from 'vitest-browser-react'
 import {PortableTextEditable, type Editor} from '..'
 import {EditorProvider} from '../editor/editor-provider'
-import {defineSchema} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import {getTersePt} from '../internal-utils/terse-pt'
 import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
 import {getTextMarks} from '../internal-utils/text-marks'

package/src/selectors/selector.get-selection-text.test.ts

@@ -1,7 +1,8 @@
 import type {PortableTextBlock} from '@sanity/types'
 import {expect, test} from 'vitest'
 import type {EditorSelection} from '..'
-import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
 import {getSelectionText} from './selector.get-selection-text'
 

package/src/selectors/selector.get-trimmed-selection.test.ts

@@ -1,6 +1,7 @@
 import type {PortableTextBlock} from '@sanity/types'
 import {describe, expect, test} from 'vitest'
-import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
 import {parseBlock} from '../internal-utils/parse-blocks'
 import {createTestKeyGenerator} from '../internal-utils/test-key-generator'

package/src/utils/util.block-offset.test.ts

@@ -1,6 +1,7 @@
 import type {PortableTextBlock} from '@sanity/types'
 import {expect, test} from 'vitest'
-import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import {blockOffsetToSpanSelectionPoint} from './util.block-offset'
 
 const schema = compileSchemaDefinition(defineSchema({}))

package/src/utils/util.slice-blocks.test.ts

@@ -1,6 +1,7 @@
 import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {describe, expect, test} from 'vitest'
-import {compileSchemaDefinition, defineSchema} from '../editor/editor-schema'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
 import {sliceBlocks} from './util.slice-blocks'
 
 const b1: PortableTextTextBlock = {

package/src/utils/util.slice-text-block.test.ts

@@ -0,0 +1,163 @@
+import type {
+  PortableTextObject,
+  PortableTextSpan,
+  PortableTextTextBlock,
+} from '@sanity/types'
+import {describe, expect, test} from 'vitest'
+import {keyGenerator} from '..'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
+import {sliceTextBlock} from './util.slice-text-block'
+
+const schema = compileSchemaDefinition(
+  defineSchema({
+    inlineObjects: [{name: 'stock-ticker'}],
+  }),
+)
+
+function createSpan(span: Partial<PortableTextSpan>) {
+  return {
+    _type: 'span',
+    _key: span._key ?? keyGenerator(),
+    text: span.text ?? '',
+    marks: span.marks ?? [],
+  }
+}
+
+function createInlineObject(inlineObject: Partial<PortableTextObject>) {
+  return {
+    _type: 'stock-ticker',
+    _key: inlineObject._key ?? keyGenerator(),
+    ...inlineObject,
+  }
+}
+
+function createBlock(
+  block: Partial<PortableTextTextBlock>,
+): PortableTextTextBlock {
+  return {
+    _type: 'block',
+    _key: block._key ?? keyGenerator(),
+    children: block.children ?? [createSpan({})],
+    markDefs: block.markDefs ?? [],
+    style: block.style ?? 'normal',
+    ...block,
+  }
+}
+
+describe(sliceTextBlock.name, () => {
+  test('empty block', () => {
+    const span = createSpan({})
+    const block = createBlock({
+      children: [span],
+    })
+
+    expect(
+      sliceTextBlock({
+        context: {
+          schema,
+          selection: {
+            anchor: {
+              path: [{_key: block._key}, 'children', {_key: span._key}],
+              offset: 0,
+            },
+            focus: {
+              path: [{_key: block._key}, 'children', {_key: span._key}],
+              offset: 0,
+            },
+          },
+        },
+        block,
+      }),
+    ).toEqual(block)
+  })
+
+  test('middle', () => {
+    const span = createSpan({
+      text: 'foo bar baz',
+    })
+    const block = createBlock({
+      children: [span],
+    })
+
+    expect(
+      sliceTextBlock({
+        context: {
+          schema,
+          selection: {
+            anchor: {
+              path: [{_key: block._key}, 'children', {_key: span._key}],
+              offset: 4,
+            },
+            focus: {
+              path: [{_key: block._key}, 'children', {_key: span._key}],
+              offset: 7,
+            },
+          },
+        },
+        block,
+      }),
+    ).toEqual({
+      ...block,
+      children: [
+        {
+          ...span,
+          text: 'bar',
+        },
+      ],
+    })
+  })
+
+  test('multiple children', () => {
+    const fooSpan = createSpan({
+      text: 'foo',
+      marks: ['strong'],
+    })
+    const barSpan = createSpan({
+      text: 'bar',
+      marks: ['em'],
+    })
+    const bazSpan = createSpan({
+      text: 'baz',
+      marks: ['underline'],
+    })
+    const stockTicker = createInlineObject({
+      symbol: 'AAPL',
+    })
+    const block = createBlock({
+      children: [fooSpan, barSpan, stockTicker, bazSpan],
+    })
+
+    expect(
+      sliceTextBlock({
+        context: {
+          schema,
+          selection: {
+            anchor: {
+              path: [{_key: block._key}, 'children', {_key: barSpan._key}],
+              offset: 1,
+            },
+            focus: {
+              path: [{_key: block._key}, 'children', {_key: bazSpan._key}],
+              offset: 1,
+            },
+          },
+        },
+        block,
+      }),
+    ).toEqual({
+      ...block,
+      children: [
+        {
+          ...barSpan,
+          text: 'ar',
+        },
+        stockTicker,
+        {
+          ...bazSpan,
+          text: 'b',
+        },
+      ],
+    })
+  })
+})