@portabletext/editor 1.44.16 → 1.45.0

package/src/behaviors/behavior.types.event.ts

@@ -119,7 +119,10 @@ export type SyntheticBehaviorEvent =
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'decorator.add'>
       decorator: string
-      offsets?: {anchor: BlockOffset; focus: BlockOffset}
+      at?: {
+        anchor: BlockOffset
+        focus: BlockOffset
+      }
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'decorator.remove'>
@@ -127,7 +130,7 @@ export type SyntheticBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete'>
-      selection: NonNullable<EditorSelection>
+      at: NonNullable<EditorSelection>
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete.backward'>
@@ -143,8 +146,10 @@ export type SyntheticBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete.text'>
-      anchor: BlockOffset
-      focus: BlockOffset
+      at: {
+        anchor: BlockOffset
+        focus: BlockOffset
+      }
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'focus'>
@@ -188,7 +193,7 @@ export type SyntheticBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'select'>
-      selection: EditorSelection
+      at: EditorSelection
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'split.block'>
@@ -246,7 +251,7 @@ export type AbstractBehaviorEvent =
   | {
       type: StrictExtract<AbstractBehaviorEventType, 'decorator.toggle'>
       decorator: string
-      offsets?: {anchor: BlockOffset; focus: BlockOffset}
+      at?: {anchor: BlockOffset; focus: BlockOffset}
     }
   | {
       type: StrictExtract<AbstractBehaviorEventType, 'deserialize'>

package/src/converters/converter.portable-text.deserialize.test.ts

@@ -143,7 +143,9 @@ describe(converterPortableText.deserialize, () => {
       converterPortableText.deserialize({
         snapshot: createSnapshot(
           defineSchema({
-            blockObjects: [{name: 'image'}],
+            blockObjects: [
+              {name: 'image', fields: [{name: 'src', type: 'string'}]},
+            ],
           }),
         ),
         event: {
@@ -204,7 +206,12 @@ describe(converterPortableText.deserialize, () => {
       converterPortableText.deserialize({
         snapshot: createSnapshot(
           defineSchema({
-            inlineObjects: [{name: 'stock-ticker'}],
+            inlineObjects: [
+              {
+                name: 'stock-ticker',
+                fields: [{name: 'symbol', type: 'string'}],
+              },
+            ],
           }),
         ),
         event: {
@@ -523,7 +530,9 @@ describe(converterPortableText.deserialize, () => {
       converterPortableText.deserialize({
         snapshot: createSnapshot(
           defineSchema({
-            annotations: [{name: 'link'}],
+            annotations: [
+              {name: 'link', fields: [{name: 'href', type: 'string'}]},
+            ],
           }),
         ),
         event: {

package/src/converters/converter.text-html.deserialize.test.ts

@@ -152,7 +152,9 @@ describe(converterTextHtml.deserialize.name, () => {
       converterTextHtml.deserialize({
         snapshot: createSnapshot(
           defineSchema({
-            annotations: [{name: 'link'}],
+            annotations: [
+              {name: 'link', fields: [{name: 'href', type: 'string'}]},
+            ],
           }),
         ),
         event: {

package/src/editor/Editable.tsx

@@ -940,7 +940,7 @@ export const PortableTextEditable = forwardRef<
         type: 'behavior event',
         behaviorEvent: {
           type: 'select',
-          selection: isSelectionCollapsed(dragSelection)
+          at: isSelectionCollapsed(dragSelection)
             ? dragSelection
             : {
                 anchor: getSelectionEndPoint(dragSelection),

package/src/editor/define-schema.ts

@@ -13,6 +13,11 @@ export type BaseDefinition = {
   title?: string
 }
 
+export type FieldDefinition = {
+  name: string
+  type: 'string' | 'number' | 'boolean' | 'array' | 'object'
+}
+
 /**
  * @public
  */
@@ -20,9 +25,15 @@ export type SchemaDefinition<
   TBaseDefinition extends BaseDefinition = BaseDefinition,
 > = {
   decorators?: ReadonlyArray<TBaseDefinition>
-  blockObjects?: ReadonlyArray<TBaseDefinition>
-  inlineObjects?: ReadonlyArray<TBaseDefinition>
-  annotations?: 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>
 }
@@ -94,7 +105,11 @@ export function compileSchemaDefinition<
             ? // This avoids the default title which is a title case of the object name
               defaultObjectTitles[blockObject.name]
             : blockObject.title,
-        fields: [],
+        fields:
+          blockObject.fields?.map((field) => ({
+            name: field.name,
+            type: field.type,
+          })) ?? [],
       }),
     ) ?? []
 
@@ -111,7 +126,11 @@ export function compileSchemaDefinition<
             ? // This avoids the default title which is a title case of the object name
               defaultObjectTitles[inlineObject.name]
             : inlineObject.title,
-        fields: [],
+        fields:
+          inlineObject.fields?.map((field) => ({
+            name: field.name,
+            type: field.type,
+          })) ?? [],
       }),
     ) ?? []
 
@@ -135,6 +154,11 @@ export function compileSchemaDefinition<
               name: annotation.name,
               type: 'object',
               title: annotation.title,
+              fields:
+                annotation.fields?.map((field) => ({
+                  name: field.name,
+                  type: field.type,
+                })) ?? [],
             })) ?? [],
         },
         lists:

package/src/editor/plugins/__tests__/withEditableAPIInsert.test.tsx

@@ -113,7 +113,7 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
                 text: 'Block A',
               },
               {
-                _key: 'k3',
+                _key: 'k2',
                 _type: 'someObject',
                 color: 'red',
               },
@@ -157,7 +157,7 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
                 text: 'Block A',
               },
               {
-                _key: 'k3',
+                _key: 'k2',
                 _type: 'someObject',
                 color: 'red',
               },

package/src/editor/plugins/create-with-event-listeners.ts

@@ -160,7 +160,7 @@ export function createWithEventListeners(editorActor: EditorActor) {
         type: 'behavior event',
         behaviorEvent: {
           type: 'select',
-          selection: slateRangeToSelection({
+          at: slateRangeToSelection({
             schema: editorActor.getSnapshot().context.schema,
             editor,
             range,

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

@@ -1,8 +1,10 @@
 import type {
+  ObjectSchemaType,
   PortableTextBlock,
   PortableTextObject,
   PortableTextSpan,
   PortableTextTextBlock,
+  TypedObject,
 } from '@sanity/types'
 import type {EditorSchema} from '../editor/define-schema'
 import type {EditorContext} from '../editor/editor-snapshot'
@@ -60,22 +62,22 @@ function parseBlockObject({
     return undefined
   }
 
-  if (
-    blockObject._type === context.schema.block.name ||
-    blockObject._type === 'block' ||
-    !context.schema.blockObjects.some(({name}) => name === blockObject._type)
-  ) {
+  const schemaType = context.schema.blockObjects.find(
+    ({name}) => name === blockObject._type,
+  )
+
+  if (!schemaType) {
     return undefined
   }
 
-  return {
-    ...blockObject,
-    _key: options.refreshKeys
-      ? context.keyGenerator()
-      : typeof blockObject._key === 'string'
-        ? blockObject._key
-        : context.keyGenerator(),
-  }
+  return parseObject({
+    object: blockObject,
+    context: {
+      keyGenerator: context.keyGenerator,
+      schemaType,
+    },
+    options,
+  })
 }
 
 export function isTextBlock(
@@ -123,27 +125,36 @@ function parseTextBlock({
       return []
     }
 
+    const schemaType = context.schema.annotations.find(
+      ({name}) => name === markDef._type,
+    )
+
+    if (!schemaType) {
+      return []
+    }
+
     if (typeof markDef._key !== 'string') {
+      // If the `markDef` doesn't have a `_key` then we don't know what spans
+      // it belongs to and therefore we have to discard it.
       return []
     }
 
-    if (
-      context.schema.annotations.some(
-        (annotation) => annotation.name === markDef._type,
-      )
-    ) {
-      const _key = options.refreshKeys ? context.keyGenerator() : markDef._key
-      markDefKeyMap.set(markDef._key, _key)
-
-      return [
-        {
-          ...markDef,
-          _key,
-        },
-      ]
+    const parsedAnnotation = parseObject({
+      object: markDef,
+      context: {
+        schemaType,
+        keyGenerator: context.keyGenerator,
+      },
+      options,
+    })
+
+    if (!parsedAnnotation) {
+      return []
     }
 
-    return []
+    markDefKeyMap.set(markDef._key, parsedAnnotation._key)
+
+    return [parsedAnnotation]
   })
 
   const unparsedChildren: Array<unknown> = Array.isArray(block.children)
@@ -283,7 +294,7 @@ export function parseSpan({
   }
 }
 
-function parseInlineObject({
+export function parseInlineObject({
   inlineObject,
   context,
   options,
@@ -296,22 +307,81 @@ function parseInlineObject({
     return undefined
   }
 
-  if (
-    inlineObject._type === context.schema.span.name ||
-    inlineObject._type === 'span' ||
-    // Respect the schema definition and don't parse inline objects that are not defined
-    !context.schema.inlineObjects.some(({name}) => name === inlineObject._type)
-  ) {
+  const schemaType = context.schema.inlineObjects.find(
+    ({name}) => name === inlineObject._type,
+  )
+
+  if (!schemaType) {
     return undefined
   }
 
+  return parseObject({
+    object: inlineObject,
+    context: {
+      keyGenerator: context.keyGenerator,
+      schemaType,
+    },
+    options,
+  })
+}
+
+export function parseAnnotation({
+  annotation,
+  context,
+  options,
+}: {
+  annotation: TypedObject
+  context: Pick<EditorContext, 'keyGenerator' | 'schema'>
+  options: {refreshKeys: boolean}
+}): PortableTextObject | undefined {
+  if (!isTypedObject(annotation)) {
+    return undefined
+  }
+
+  const schemaType = context.schema.annotations.find(
+    ({name}) => name === annotation._type,
+  )
+
+  if (!schemaType) {
+    return undefined
+  }
+
+  return parseObject({
+    object: annotation,
+    context: {
+      keyGenerator: context.keyGenerator,
+      schemaType,
+    },
+    options,
+  })
+}
+
+function parseObject({
+  object,
+  context,
+  options,
+}: {
+  object: TypedObject
+  context: Pick<EditorContext, 'keyGenerator'> & {schemaType: ObjectSchemaType}
+  options: {refreshKeys: boolean}
+}): PortableTextObject {
+  // Validates all props on the object and only takes those that match
+  // the name of a field
+  const values = context.schemaType.fields.reduce<Record<string, unknown>>(
+    (fieldValues, field) => {
+      fieldValues[field.name] = object[field.name]
+      return fieldValues
+    },
+    {},
+  )
+
   return {
-    // Spread the entire inline object to allow custom properties on it
-    ...inlineObject,
+    _type: context.schemaType.name,
     _key: options.refreshKeys
       ? context.keyGenerator()
-      : typeof inlineObject._key === 'string'
-        ? inlineObject._key
+      : typeof object._key === 'string'
+        ? object._key
         : context.keyGenerator(),
+    ...values,
   }
 }

package/src/plugins/plugin.decorator-shortcut.ts

@@ -82,17 +82,17 @@ const selectionListenerCallback: CallbackLogicFunction<
     behavior: defineBehavior({
       on: 'select',
       guard: ({snapshot, event}) => {
-        if (!event.selection) {
+        if (!event.at) {
           return {blockOffsets: undefined}
         }
 
         const anchor = utils.spanSelectionPointToBlockOffset({
           value: snapshot.context.value,
-          selectionPoint: event.selection.anchor,
+          selectionPoint: event.at.anchor,
         })
         const focus = utils.spanSelectionPointToBlockOffset({
           value: snapshot.context.value,
-          selectionPoint: event.selection.focus,
+          selectionPoint: event.at.focus,
         })
 
         if (!anchor || !focus) {

package/src/plugins/plugin.one-line.tsx

@@ -14,7 +14,7 @@ const oneLineBehaviors = [
       snapshot.context.selection && selectors.isSelectionExpanded(snapshot)
         ? {selection: snapshot.context.selection}
         : false,
-    actions: [(_, {selection}) => [{type: 'delete', selection}]],
+    actions: [(_, {selection}) => [{type: 'delete', at: selection}]],
   }),
   /**
    * All other cases of `insert.break` should be aborted.