@portabletext/editor 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -43,28 +43,31 @@
   ],
   "dependencies": {
     "@portabletext/patches": "1.1.0",
+    "@xstate/react": "^4.1.3",
     "debug": "^4.3.4",
     "is-hotkey-esm": "^1.0.0",
     "lodash": "^4.17.21",
+    "lodash.startcase": "^4.4.0",
     "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
     "slate": "0.110.2",
-    "slate-react": "0.110.3",
+    "slate-dom": "^0.111.0",
+    "slate-react": "0.111.0",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.18.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
     "@playwright/test": "1.48.2",
-    "@portabletext/toolkit": "^2.0.15",
+    "@portabletext/toolkit": "^2.0.16",
     "@sanity/block-tools": "^3.62.3",
     "@sanity/diff-match-patch": "^3.1.1",
     "@sanity/pkg-utils": "^6.11.8",
     "@sanity/schema": "^3.62.3",
     "@sanity/types": "^3.62.3",
-    "@sanity/ui": "^2.8.17",
+    "@sanity/ui": "^2.8.18",
     "@sanity/util": "^3.62.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -73,7 +76,8 @@
     "@types/debug": "^4.1.5",
     "@types/express": "^4.17.21",
     "@types/express-ws": "^3.0.5",
-    "@types/lodash": "^4.17.12",
+    "@types/lodash": "^4.17.13",
+    "@types/lodash.startcase": "^4.4.9",
     "@types/node": "^18.19.8",
     "@types/node-ipc": "^9.2.3",
     "@types/react": "^18.3.12",
@@ -83,16 +87,15 @@
     "@typescript-eslint/parser": "^8.12.2",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/browser": "^2.1.4",
-    "@xstate/react": "^4.1.3",
     "babel-plugin-react-compiler": "beta",
     "dotenv": "^16.4.5",
-    "eslint": "8",
+    "eslint": "8.57.1",
     "eslint-plugin-react-compiler": "beta",
     "eslint-plugin-react-hooks": "^5.0.0",
     "express": "^4.21.1",
     "express-ws": "^5.0.2",
     "jest": "^29.7.0",
-    "jest-dev-server": "^10.1.1",
+    "jest-dev-server": "^10.1.4",
     "jest-environment-node": "^29.7.0",
     "jsdom": "^25.0.1",
     "node-ipc": "npm:@node-ipc/compat@9.2.5",

package/src/editor/PortableTextEditor.tsx

@@ -1,13 +1,10 @@
 import type {
   ArrayDefinition,
   ArraySchemaType,
-  BlockSchemaType,
-  ObjectSchemaType,
   Path,
   PortableTextBlock,
   PortableTextChild,
   PortableTextObject,
-  SpanSchemaType,
 } from '@sanity/types'
 import {
   Component,
@@ -271,9 +268,9 @@ export class PortableTextEditor extends Component<
       ? editor.editable.isAnnotationActive(annotationType)
       : false
   }
-  static addAnnotation = (
+  static addAnnotation = <TSchemaType extends {name: string}>(
     editor: PortableTextEditor,
-    type: ObjectSchemaType,
+    type: TSchemaType,
     value?: {[prop: string]: unknown},
   ):
     | {
@@ -339,17 +336,17 @@ export class PortableTextEditor extends Component<
     editor.editable?.isExpandedSelection()
   static isMarkActive = (editor: PortableTextEditor, mark: string) =>
     editor.editable?.isMarkActive(mark)
-  static insertChild = (
+  static insertChild = <TSchemaType extends {name: string}>(
     editor: PortableTextEditor,
-    type: SpanSchemaType | ObjectSchemaType,
+    type: TSchemaType,
     value?: {[prop: string]: unknown},
   ): Path | undefined => {
     debug(`Host inserting child`)
     return editor.editable?.insertChild(type, value)
   }
-  static insertBlock = (
+  static insertBlock = <TSchemaType extends {name: string}>(
     editor: PortableTextEditor,
-    type: BlockSchemaType | ObjectSchemaType,
+    type: TSchemaType,
     value?: {[prop: string]: unknown},
   ): Path | undefined => {
     return editor.editable?.insertBlock(type, value)
@@ -379,9 +376,9 @@ export class PortableTextEditor extends Component<
     debug(`Host setting selection`, selection)
     editor.editable?.select(selection)
   }
-  static removeAnnotation = (
+  static removeAnnotation = <TSchemaType extends {name: string}>(
     editor: PortableTextEditor,
-    type: ObjectSchemaType,
+    type: TSchemaType,
   ) => editor.editable?.removeAnnotation(type)
   static toggleBlockStyle = (
     editor: PortableTextEditor,

package/src/editor/define-schema.ts

@@ -0,0 +1,111 @@
+import {Schema as SanitySchema} from '@sanity/schema'
+import {
+  defineField,
+  defineType,
+  type BlockDecoratorDefinition,
+} from '@sanity/types'
+import startCase from 'lodash.startcase'
+import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
+
+/**
+ * @alpha
+ */
+export type BaseDefinition = {
+  name: string
+  title?: string
+  icon?: BlockDecoratorDefinition['icon']
+}
+
+/**
+ * @alpha
+ */
+export type SchemaDefinition<
+  TBaseDefinition extends BaseDefinition = BaseDefinition,
+> = {
+  decorators?: ReadonlyArray<TBaseDefinition>
+  blockObjects?: ReadonlyArray<TBaseDefinition>
+  inlineObjects?: ReadonlyArray<TBaseDefinition>
+  annotations?: ReadonlyArray<TBaseDefinition>
+  lists?: ReadonlyArray<TBaseDefinition>
+  styles?: ReadonlyArray<TBaseDefinition>
+}
+
+/**
+ * @alpha
+ */
+export function defineSchema<const TSchemaDefinition extends SchemaDefinition>(
+  definition: TSchemaDefinition,
+): TSchemaDefinition {
+  return definition
+}
+
+export function compileSchemaDefinition<
+  TSchemaDefinition extends SchemaDefinition,
+>(definition?: TSchemaDefinition) {
+  const blockObjects =
+    definition?.blockObjects?.map((blockObject) =>
+      defineType({
+        type: 'object',
+        name: blockObject.name,
+        title: blockObject.title,
+        icon: blockObject.icon,
+        fields: [],
+      }),
+    ) ?? []
+  const inlineObjects =
+    definition?.inlineObjects?.map((inlineObject) =>
+      defineType({
+        type: 'object',
+        name: inlineObject.name,
+        title: inlineObject.title,
+        icon: inlineObject.icon,
+        fields: [],
+      }),
+    ) ?? []
+
+  const portableTextSchema = defineField({
+    type: 'array',
+    name: 'portable-text',
+    of: [
+      ...blockObjects.map((blockObject) => ({type: blockObject.name})),
+      {
+        type: 'block',
+        name: 'block',
+        of: inlineObjects.map((inlineObject) => ({type: inlineObject.name})),
+        marks: {
+          decorators:
+            definition?.decorators?.map((decorator) => ({
+              title: decorator.title ?? startCase(decorator.name),
+              value: decorator.name,
+              icon: decorator.icon,
+            })) ?? [],
+          annotations:
+            definition?.annotations?.map((annotation) => ({
+              name: annotation.name,
+              type: 'object',
+              title: annotation.title,
+              icon: annotation.icon,
+            })) ?? [],
+        },
+        lists:
+          definition?.lists?.map((list) => ({
+            value: list.name,
+            title: list.title ?? startCase(list.name),
+            icon: list.icon,
+          })) ?? [],
+        styles:
+          definition?.styles?.map((style) => ({
+            value: style.name,
+            title: style.title ?? startCase(style.name),
+            icon: style.icon,
+          })) ?? [],
+      },
+    ],
+  })
+
+  const schema = SanitySchema.compile({
+    types: [portableTextSchema, ...blockObjects, ...inlineObjects],
+  }).get('portable-text')
+
+  return getPortableTextMemberSchemaTypes(schema)
+}

package/src/editor/plugins/createWithEditableAPI.ts

@@ -1,13 +1,11 @@
 import {
   isPortableTextSpan,
-  type ObjectSchemaType,
   type Path,
   type PortableTextBlock,
   type PortableTextChild,
   type PortableTextObject,
   type PortableTextSpan,
   type PortableTextTextBlock,
-  type SchemaType,
 } from '@sanity/types'
 import {
   Editor,
@@ -18,8 +16,8 @@ import {
   Text,
   Transforms,
 } from 'slate'
+import type {DOMNode} from 'slate-dom'
 import {ReactEditor} from 'slate-react'
-import type {DOMNode} from 'slate-react/dist/utils/dom'
 import type {
   EditableAPI,
   EditableAPIDeleteOptions,
@@ -128,7 +126,10 @@ export function createWithEditableAPI(
         }
         return undefined
       },
-      insertChild: (type: SchemaType, value?: {[prop: string]: any}): Path => {
+      insertChild: <TSchemaType extends {name: string}>(
+        type: TSchemaType,
+        value?: {[prop: string]: any},
+      ): Path => {
         if (!editor.selection) {
           throw new Error('The editor has no selection')
         }
@@ -196,7 +197,10 @@ export function createWithEditableAPI(
           )?.focus.path || []
         )
       },
-      insertBlock: (type: SchemaType, value?: {[prop: string]: any}): Path => {
+      insertBlock: <TSchemaType extends {name: string}>(
+        type: TSchemaType,
+        value?: {[prop: string]: any},
+      ): Path => {
         const block = toSlateValue(
           [
             {
@@ -622,7 +626,9 @@ export function createWithEditableAPI(
           }
         }
       },
-      removeAnnotation: (type: ObjectSchemaType): void => {
+      removeAnnotation: <TSchemaType extends {name: string}>(
+        type: TSchemaType,
+      ): void => {
         debug('Removing annotation', type)
 
         Editor.withoutNormalizing(editor, () => {

package/src/editor/use-editor.ts

@@ -7,6 +7,7 @@ import {useActorRef} from '@xstate/react'
 import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
 import {compileType} from '../utils/schema'
 import type {Behavior} from './behavior/behavior.types'
+import {compileSchemaDefinition, type SchemaDefinition} from './define-schema'
 import {editorMachine} from './editor-machine'
 import {defaultKeyGenerator} from './key-generator'
 
@@ -16,8 +17,16 @@ import {defaultKeyGenerator} from './key-generator'
 export type EditorConfig = {
   behaviors?: Array<Behavior>
   keyGenerator?: () => string
-  schema: ArraySchemaType<PortableTextBlock> | ArrayDefinition
-}
+} & (
+  | {
+      schemaDefinition: SchemaDefinition
+      schema?: undefined
+    }
+  | {
+      schemaDefinition?: undefined
+      schema: ArraySchemaType<PortableTextBlock> | ArrayDefinition
+    }
+)
 
 /**
  * @alpha
@@ -28,11 +37,14 @@ export type Editor = ReturnType<typeof useEditor>
  * @alpha
  */
 export function useEditor(config: EditorConfig) {
-  const schema = getPortableTextMemberSchemaTypes(
-    config.schema.hasOwnProperty('jsonType')
-      ? config.schema
-      : compileType(config.schema),
-  )
+  const schema = config.schemaDefinition
+    ? compileSchemaDefinition(config.schemaDefinition)
+    : getPortableTextMemberSchemaTypes(
+        config.schema.hasOwnProperty('jsonType')
+          ? config.schema
+          : compileType(config.schema),
+      )
+
   const editorActor = useActorRef(editorMachine, {
     input: {
       behaviors: config.behaviors,

package/src/index.ts

@@ -1,18 +1,24 @@
 export type {Patch} from '@portabletext/patches'
+export type {PortableTextBlock} from '@sanity/types'
 export {
+  createMarkdownBehaviors,
+  type MarkdownBehaviorsConfig,
+} from './editor/behavior/behavior.markdown'
+export {
+  defineBehavior,
   type Behavior,
   type BehaviorActionIntend,
+  type BehaviorActionIntendSet,
   type BehaviorContext,
   type BehaviorEvent,
   type BehaviorGuard,
   type PickFromUnion,
-  type BehaviorActionIntendSet,
-  defineBehavior,
 } from './editor/behavior/behavior.types'
 export {
-  createMarkdownBehaviors,
-  type MarkdownBehaviorsConfig,
-} from './editor/behavior/behavior.markdown'
+  defineSchema,
+  type SchemaDefinition,
+  type BaseDefinition,
+} from './editor/define-schema'
 export {PortableTextEditable} from './editor/Editable'
 export type {PortableTextEditableProps} from './editor/Editable'
 export {

package/src/types/editor.ts

@@ -3,7 +3,6 @@ import type {
   ArraySchemaType,
   BlockDecoratorDefinition,
   BlockListDefinition,
-  BlockSchemaType,
   BlockStyleDefinition,
   ObjectSchemaType,
   Path,
@@ -13,7 +12,6 @@ import type {
   PortableTextObject,
   PortableTextSpan,
   PortableTextTextBlock,
-  SpanSchemaType,
   TypedObject,
 } from '@sanity/types'
 import type {
@@ -30,8 +28,8 @@ import type {
   Node as SlateNode,
   Operation as SlateOperation,
 } from 'slate'
+import type {DOMNode} from 'slate-dom'
 import type {ReactEditor} from 'slate-react'
-import type {DOMNode} from 'slate-react/dist/utils/dom'
 import type {PortableTextEditableProps} from '../editor/Editable'
 import type {PortableTextEditor} from '../editor/PortableTextEditor'
 
@@ -44,8 +42,8 @@ export interface EditableAPIDeleteOptions {
 export interface EditableAPI {
   activeAnnotations: () => PortableTextObject[]
   isAnnotationActive: (annotationType: PortableTextObject['_type']) => boolean
-  addAnnotation: (
-    type: ObjectSchemaType,
+  addAnnotation: <TSchemaType extends {name: string}>(
+    type: TSchemaType,
     value?: {[prop: string]: unknown},
   ) =>
     | {markDefPath: Path; markDefPaths: Array<Path>; spanPath: Path}
@@ -69,12 +67,12 @@ export interface EditableAPI {
   getValue: () => PortableTextBlock[] | undefined
   hasBlockStyle: (style: string) => boolean
   hasListStyle: (listStyle: string) => boolean
-  insertBlock: (
-    type: BlockSchemaType | ObjectSchemaType,
+  insertBlock: <TSchemaType extends {name: string}>(
+    type: TSchemaType,
     value?: {[prop: string]: unknown},
   ) => Path
-  insertChild: (
-    type: SpanSchemaType | ObjectSchemaType,
+  insertChild: <TSchemaType extends {name: string}>(
+    type: TSchemaType,
     value?: {[prop: string]: unknown},
   ) => Path
   insertBreak: () => void
@@ -88,7 +86,9 @@ export interface EditableAPI {
   isVoid: (element: PortableTextBlock | PortableTextChild) => boolean
   marks: () => string[]
   redo: () => void
-  removeAnnotation: (type: ObjectSchemaType) => void
+  removeAnnotation: <TSchemaType extends {name: string}>(
+    type: TSchemaType,
+  ) => void
   select: (selection: EditorSelection) => void
   toggleBlockStyle: (blockStyle: string) => void
   toggleList: (listStyle: string) => void