@portabletext/editor 1.4.1 → 1.5.1

package/lib/index.d.ts

@@ -2,21 +2,22 @@ import {Patch} from '@portabletext/patches'
 import type {
   ArrayDefinition,
   ArraySchemaType,
-  BlockDecoratorDefinition,
   BlockListDefinition,
-  BlockSchemaType,
   BlockStyleDefinition,
   KeyedSegment,
   ObjectSchemaType,
   Path,
-  PortableTextBlock,
-  PortableTextChild,
   PortableTextListBlock,
   PortableTextObject,
-  SpanSchemaType,
   TypedObject,
 } from '@sanity/types'
-import {PortableTextSpan, PortableTextTextBlock} from '@sanity/types'
+import {
+  BlockDecoratorDefinition,
+  PortableTextBlock,
+  PortableTextChild,
+  PortableTextSpan,
+  PortableTextTextBlock,
+} from '@sanity/types'
 import type {
   BaseSyntheticEvent,
   ClipboardEvent as ClipboardEvent_2,
@@ -64,6 +65,15 @@ import {
   Values,
 } from 'xstate'
 
+/**
+ * @alpha
+ */
+export declare type BaseDefinition = {
+  name: string
+  title?: string
+  icon?: BlockDecoratorDefinition['icon']
+}
+
 /**
  * @alpha
  */
@@ -303,10 +313,10 @@ export declare type createEditorOptions = {
 export declare function createMarkdownBehaviors(
   config: MarkdownBehaviorsConfig,
 ): Behavior<
-  | 'insert break'
-  | 'insert soft break'
   | 'delete backward'
   | 'delete forward'
+  | 'insert soft break'
+  | 'insert break'
   | 'insert text',
   true
 >[]
@@ -319,12 +329,23 @@ export declare function defineBehavior<
   TGuardResponse = true,
 >(behavior: Behavior<TBehaviorEventType, TGuardResponse>): Behavior
 
+/**
+ * @alpha
+ */
+export declare function defineSchema<
+  const TSchemaDefinition extends SchemaDefinition,
+>(definition: TSchemaDefinition): TSchemaDefinition
+
 /** @beta */
 export declare interface EditableAPI {
   activeAnnotations: () => PortableTextObject[]
   isAnnotationActive: (annotationType: PortableTextObject['_type']) => boolean
-  addAnnotation: (
-    type: ObjectSchemaType,
+  addAnnotation: <
+    TSchemaType extends {
+      name: string
+    },
+  >(
+    type: TSchemaType,
     value?: {
       [prop: string]: unknown
     },
@@ -354,14 +375,22 @@ export declare 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
     },
@@ -377,7 +406,13 @@ export declare 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
@@ -430,8 +465,16 @@ export declare type EditorChanges = Subject<EditorChange>
 export declare type EditorConfig = {
   behaviors?: Array<Behavior>
   keyGenerator?: () => string
-  schema: ArraySchemaType<PortableTextBlock> | ArrayDefinition
-}
+} & (
+  | {
+      schemaDefinition: SchemaDefinition
+      schema?: undefined
+    }
+  | {
+      schemaDefinition?: undefined
+      schema: ArraySchemaType<PortableTextBlock> | ArrayDefinition
+    }
+)
 
 /**
  * @internal
@@ -867,10 +910,10 @@ export declare const editorMachine: StateMachine<
       >
     }) => {
       behaviors: Behavior<
-        | 'insert break'
-        | 'insert soft break'
         | 'delete backward'
         | 'delete forward'
+        | 'insert soft break'
+        | 'insert break'
         | 'insert text',
         true
       >[]
@@ -3092,6 +3135,10 @@ export declare type PickFromUnion<
   TPickedTags extends TUnion[TTagKey],
 > = TUnion extends Record<TTagKey, TPickedTags> ? TUnion : never
 
+export {PortableTextBlock}
+
+export {PortableTextChild}
+
 /**
  * @public
  */
@@ -3156,9 +3203,13 @@ export declare class PortableTextEditor extends Component<
     editor: PortableTextEditor,
     annotationType: PortableTextObject['_type'],
   ) => boolean
-  static addAnnotation: (
+  static addAnnotation: <
+    TSchemaType extends {
+      name: string
+    },
+  >(
     editor: PortableTextEditor,
-    type: ObjectSchemaType,
+    type: TSchemaType,
     value?: {
       [prop: string]: unknown
     },
@@ -3231,16 +3282,24 @@ export declare class PortableTextEditor extends Component<
     editor: PortableTextEditor,
     mark: string,
   ) => boolean | undefined
-  static insertChild: (
+  static insertChild: <
+    TSchemaType extends {
+      name: string
+    },
+  >(
     editor: PortableTextEditor,
-    type: SpanSchemaType | ObjectSchemaType,
+    type: TSchemaType,
     value?: {
       [prop: string]: unknown
     },
   ) => Path | undefined
-  static insertBlock: (
+  static insertBlock: <
+    TSchemaType extends {
+      name: string
+    },
+  >(
     editor: PortableTextEditor,
-    type: BlockSchemaType | ObjectSchemaType,
+    type: TSchemaType,
     value?: {
       [prop: string]: unknown
     },
@@ -3256,9 +3315,13 @@ export declare class PortableTextEditor extends Component<
     editor: PortableTextEditor,
     selection: EditorSelection | null,
   ) => void
-  static removeAnnotation: (
+  static removeAnnotation: <
+    TSchemaType extends {
+      name: string
+    },
+  >(
     editor: PortableTextEditor,
-    type: ObjectSchemaType,
+    type: TSchemaType,
   ) => void | undefined
   static toggleBlockStyle: (
     editor: PortableTextEditor,
@@ -3551,6 +3614,20 @@ export declare type RenderStyleFunction = (
   props: BlockStyleRenderProps,
 ) => JSX.Element
 
+/**
+ * @alpha
+ */
+export declare type SchemaDefinition<
+  TBaseDefinition extends BaseDefinition = BaseDefinition,
+> = {
+  decorators?: ReadonlyArray<TBaseDefinition>
+  blockObjects?: ReadonlyArray<TBaseDefinition>
+  inlineObjects?: ReadonlyArray<TBaseDefinition>
+  annotations?: ReadonlyArray<TBaseDefinition>
+  lists?: ReadonlyArray<TBaseDefinition>
+  styles?: ReadonlyArray<TBaseDefinition>
+}
+
 /** @beta */
 export declare type ScrollSelectionIntoViewFunction = (
   editor: PortableTextEditor,
@@ -4015,10 +4092,10 @@ export declare function useEditor(config: EditorConfig): Actor<
         >
       }) => {
         behaviors: Behavior<
-          | 'insert break'
-          | 'insert soft break'
           | 'delete backward'
           | 'delete forward'
+          | 'insert soft break'
+          | 'insert break'
           | 'insert text',
           true
         >[]

package/lib/index.esm.js

@@ -1,4 +1,6 @@
-import { isPortableTextTextBlock, isPortableTextSpan as isPortableTextSpan$1, isKeySegment, isPortableTextListBlock } from "@sanity/types";
+import { isPortableTextTextBlock, isPortableTextSpan as isPortableTextSpan$1, isKeySegment, defineType, defineField, isPortableTextListBlock } from "@sanity/types";
+import { Schema } from "@sanity/schema";
+import startCase from "lodash.startcase";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import isEqual from "lodash/isEqual.js";
 import noop from "lodash/noop.js";
@@ -11,7 +13,6 @@ import { styled } from "styled-components";
 import uniq from "lodash/uniq.js";
 import { Subject } from "rxjs";
 import { fromCallback, setup, assign, assertEvent, emit, enqueueActions, createActor } from "xstate";
-import { Schema } from "@sanity/schema";
 import { diffMatchPatch as diffMatchPatch$1, set, insert, setIfMissing, unset, applyAll } from "@portabletext/patches";
 import get from "lodash/get.js";
 import isUndefined from "lodash/isUndefined.js";
@@ -265,6 +266,114 @@ function createMarkdownBehaviors(config) {
   };
   return [automaticStyleOnSpace, clearStyleOnBackspace, automaticListOnSpace];
 }
+function getPortableTextMemberSchemaTypes(portableTextType) {
+  if (!portableTextType)
+    throw new Error("Parameter 'portabletextType' missing (required)");
+  const blockType = portableTextType.of?.find(findBlockType);
+  if (!blockType)
+    throw new Error("Block type is not defined in this schema (required)");
+  const childrenField = blockType.fields?.find((field) => field.name === "children");
+  if (!childrenField)
+    throw new Error("Children field for block type found in schema (required)");
+  const ofType = childrenField.type.of;
+  if (!ofType)
+    throw new Error("Valid types for block children not found in schema (required)");
+  const spanType = ofType.find((memberType) => memberType.name === "span");
+  if (!spanType)
+    throw new Error("Span type not found in schema (required)");
+  const inlineObjectTypes = ofType.filter((memberType) => memberType.name !== "span") || [], blockObjectTypes = portableTextType.of?.filter((field) => field.name !== blockType.name) || [];
+  return {
+    styles: resolveEnabledStyles(blockType),
+    decorators: resolveEnabledDecorators(spanType),
+    lists: resolveEnabledListItems(blockType),
+    block: blockType,
+    span: spanType,
+    portableText: portableTextType,
+    inlineObjects: inlineObjectTypes,
+    blockObjects: blockObjectTypes,
+    annotations: spanType.annotations
+  };
+}
+function resolveEnabledStyles(blockType) {
+  const styleField = blockType.fields?.find((btField) => btField.name === "style");
+  if (!styleField)
+    throw new Error("A field with name 'style' is not defined in the block type (required).");
+  const textStyles = styleField.type.options?.list && styleField.type.options.list?.filter((style) => style.value);
+  if (!textStyles || textStyles.length === 0)
+    throw new Error("The style fields need at least one style defined. I.e: {title: 'Normal', value: 'normal'}.");
+  return textStyles;
+}
+function resolveEnabledDecorators(spanType) {
+  return spanType.decorators;
+}
+function resolveEnabledListItems(blockType) {
+  const listField = blockType.fields?.find((btField) => btField.name === "listItem");
+  if (!listField)
+    throw new Error("A field with name 'listItem' is not defined in the block type (required).");
+  const listItems = listField.type.options?.list && listField.type.options.list.filter((list) => list.value);
+  if (!listItems)
+    throw new Error("The list field need at least to be an empty array");
+  return listItems;
+}
+function findBlockType(type) {
+  return type.type ? findBlockType(type.type) : type.name === "block" ? type : null;
+}
+function defineSchema(definition) {
+  return definition;
+}
+function compileSchemaDefinition(definition) {
+  const blockObjects = definition?.blockObjects?.map((blockObject) => defineType({
+    type: "object",
+    name: blockObject.name,
+    title: blockObject.title,
+    icon: blockObject.icon,
+    fields: []
+  })) ?? [], inlineObjects = definition?.inlineObjects?.map((inlineObject) => defineType({
+    type: "object",
+    name: inlineObject.name,
+    title: inlineObject.title,
+    icon: inlineObject.icon,
+    fields: []
+  })) ?? [], 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
+      })) ?? []
+    }]
+  }), schema = Schema.compile({
+    types: [portableTextSchema, ...blockObjects, ...inlineObjects]
+  }).get("portable-text");
+  return getPortableTextMemberSchemaTypes(schema);
+}
 const rootName = "sanity-pte:";
 debug$m(rootName);
 function debugWithName(name) {
@@ -955,58 +1064,6 @@ function DefaultAnnotation(props) {
   return $[3] !== handleClick || $[4] !== props.children ? (t2 = /* @__PURE__ */ jsx("span", { style: t1, onClick: handleClick, children: props.children }), $[3] = handleClick, $[4] = props.children, $[5] = t2) : t2 = $[5], t2;
 }
 DefaultAnnotation.displayName = "DefaultAnnotation";
-function getPortableTextMemberSchemaTypes(portableTextType) {
-  if (!portableTextType)
-    throw new Error("Parameter 'portabletextType' missing (required)");
-  const blockType = portableTextType.of?.find(findBlockType);
-  if (!blockType)
-    throw new Error("Block type is not defined in this schema (required)");
-  const childrenField = blockType.fields?.find((field) => field.name === "children");
-  if (!childrenField)
-    throw new Error("Children field for block type found in schema (required)");
-  const ofType = childrenField.type.of;
-  if (!ofType)
-    throw new Error("Valid types for block children not found in schema (required)");
-  const spanType = ofType.find((memberType) => memberType.name === "span");
-  if (!spanType)
-    throw new Error("Span type not found in schema (required)");
-  const inlineObjectTypes = ofType.filter((memberType) => memberType.name !== "span") || [], blockObjectTypes = portableTextType.of?.filter((field) => field.name !== blockType.name) || [];
-  return {
-    styles: resolveEnabledStyles(blockType),
-    decorators: resolveEnabledDecorators(spanType),
-    lists: resolveEnabledListItems(blockType),
-    block: blockType,
-    span: spanType,
-    portableText: portableTextType,
-    inlineObjects: inlineObjectTypes,
-    blockObjects: blockObjectTypes,
-    annotations: spanType.annotations
-  };
-}
-function resolveEnabledStyles(blockType) {
-  const styleField = blockType.fields?.find((btField) => btField.name === "style");
-  if (!styleField)
-    throw new Error("A field with name 'style' is not defined in the block type (required).");
-  const textStyles = styleField.type.options?.list && styleField.type.options.list?.filter((style) => style.value);
-  if (!textStyles || textStyles.length === 0)
-    throw new Error("The style fields need at least one style defined. I.e: {title: 'Normal', value: 'normal'}.");
-  return textStyles;
-}
-function resolveEnabledDecorators(spanType) {
-  return spanType.decorators;
-}
-function resolveEnabledListItems(blockType) {
-  const listField = blockType.fields?.find((btField) => btField.name === "listItem");
-  if (!listField)
-    throw new Error("A field with name 'listItem' is not defined in the block type (required).");
-  const listItems = listField.type.options?.list && listField.type.options.list.filter((list) => list.value);
-  if (!listItems)
-    throw new Error("The list field need at least to be an empty array");
-  return listItems;
-}
-function findBlockType(type) {
-  return type.type ? findBlockType(type.type) : type.name === "block" ? type : null;
-}
 function compileType(rawType) {
   return Schema.compile({
     name: "blockTypeSchema",
@@ -6216,26 +6273,25 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
 });
 PortableTextEditable.displayName = "ForwardRef(PortableTextEditable)";
 function useEditor(config) {
-  const $ = c(8);
+  const $ = c(7);
   let t0;
-  $[0] !== config.schema ? (t0 = config.schema.hasOwnProperty("jsonType") ? config.schema : compileType(config.schema), $[0] = config.schema, $[1] = t0) : t0 = $[1];
-  let t1;
-  $[2] !== t0 ? (t1 = getPortableTextMemberSchemaTypes(t0), $[2] = t0, $[3] = t1) : t1 = $[3];
-  const schema = t1, t2 = config.keyGenerator ?? defaultKeyGenerator;
-  let t3;
-  return $[4] !== config.behaviors || $[5] !== t2 || $[6] !== schema ? (t3 = {
+  $[0] !== config.schemaDefinition || $[1] !== config.schema ? (t0 = config.schemaDefinition ? compileSchemaDefinition(config.schemaDefinition) : getPortableTextMemberSchemaTypes(config.schema.hasOwnProperty("jsonType") ? config.schema : compileType(config.schema)), $[0] = config.schemaDefinition, $[1] = config.schema, $[2] = t0) : t0 = $[2];
+  const schema = t0, t1 = config.keyGenerator ?? defaultKeyGenerator;
+  let t2;
+  return $[3] !== config.behaviors || $[4] !== t1 || $[5] !== schema ? (t2 = {
     input: {
       behaviors: config.behaviors,
-      keyGenerator: t2,
+      keyGenerator: t1,
       schema
     }
-  }, $[4] = config.behaviors, $[5] = t2, $[6] = schema, $[7] = t3) : t3 = $[7], useActorRef(editorMachine, t3);
+  }, $[3] = config.behaviors, $[4] = t1, $[5] = schema, $[6] = t2) : t2 = $[6], useActorRef(editorMachine, t2);
 }
 export {
   PortableTextEditable,
   PortableTextEditor,
   createMarkdownBehaviors,
   defineBehavior,
+  defineSchema,
   editorMachine,
   defaultKeyGenerator as keyGenerator,
   useEditor,