@portabletext/editor 1.0.2 → 1.0.4

package/README.md

@@ -1,3 +1,10 @@
-# @portabletext/editor
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/portabletext/portabletext/master/logo-white.svg?sanitize=true">
+  <img alt="Portable Text Logo" src="https://raw.githubusercontent.com/portabletext/portabletext/master/logo.svg?sanitize=true">
+</picture>
 
-This is the successor to `@sanity/portable-text-editor` 🥳
+<div align="center">
+<h1>Portable Text Editor</h1>
+</div>
+
+> The official editor for editing [Portable Text](https://github.com/portabletext/portabletext) – the JSON based rich text specification for modern content editing platforms.

package/lib/index.d.mts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-
 import {ArrayDefinition} from '@sanity/types'
 import {ArraySchemaType} from '@sanity/types'
 import {BaseSyntheticEvent} from 'react'
@@ -21,6 +19,7 @@ import {Node as Node_2} from 'slate'
 import {ObjectSchemaType} from '@sanity/types'
 import {Observable} from 'rxjs'
 import {Operation} from 'slate'
+import {Patch} from '@portabletext/patches/types'
 import {Path} from '@sanity/types'
 import {PortableTextBlock} from '@sanity/types'
 import {PortableTextChild} from '@sanity/types'
@@ -31,7 +30,6 @@ import {PortableTextTextBlock} from '@sanity/types'
 import {PropsWithChildren} from 'react'
 import {ReactEditor} from 'slate-react'
 import {ReactElement} from 'react'
-import {ReactNode} from 'react'
 import {RefAttributes} from 'react'
 import {RefObject} from 'react'
 import {SpanSchemaType} from '@sanity/types'
@@ -129,12 +127,6 @@ export declare type BlurChange = {
   event: FocusEvent_2<HTMLDivElement, Element>
 }
 
-/**
- * Try to compact a set of patches
- *
- */
-export declare function compactPatches(patches: Patch[]): Patch[]
-
 /**
  * The editor was either connected or disconnected to the network
  * To show out of sync warnings etc when in collaborative mode.
@@ -152,20 +144,6 @@ export declare type createEditorOptions = {
   maxBlocks?: number
 }
 
-export declare type DecPatch = {
-  path: Path
-  origin?: Origin
-  type: 'dec'
-  value: JSONValue
-}
-
-export declare type DiffMatchPatch = {
-  path: Path
-  type: 'diffMatchPatch'
-  origin?: Origin
-  value: string
-}
-
 /** @beta */
 export declare interface EditableAPI {
   activeAnnotations: () => PortableTextObject[]
@@ -303,24 +281,6 @@ export declare type HotkeyOptions = {
   custom?: Record<string, (event: BaseSyntheticEvent, editor: PortableTextEditor) => void>
 }
 
-export declare type IncPatch = {
-  path: Path
-  origin?: Origin
-  type: 'inc'
-  value: JSONValue
-}
-
-export declare type InsertPatch = {
-  path: Path
-  origin?: Origin
-  type: 'insert'
-  position: InsertPosition_2
-  items: JSONValue[]
-}
-
-declare type InsertPosition_2 = 'before' | 'after' | 'replace'
-export {InsertPosition_2 as InsertPosition}
-
 /**
  * The editor has an invalid value
  * @beta */
@@ -353,15 +313,6 @@ export declare type InvalidValueResolution = {
   }
 }
 
-export declare type JSONValue =
-  | number
-  | string
-  | boolean
-  | {
-      [key: string]: JSONValue
-    }
-  | JSONValue[]
-
 export declare const keyGenerator: () => string
 
 /**
@@ -403,8 +354,6 @@ export declare type OnPasteResult =
 
 export declare type OnPasteResultOrPromise = OnPasteResult | Promise<OnPasteResult>
 
-export declare type Origin = 'remote' | 'local' | 'internal'
-
 /** @beta */
 export declare interface PasteData {
   event: ClipboardEvent_2
@@ -413,15 +362,6 @@ export declare interface PasteData {
   value: PortableTextBlock[] | undefined
 }
 
-export declare type Patch =
-  | SetPatch
-  | SetIfMissingPatch
-  | UnsetPatch
-  | InsertPatch
-  | DiffMatchPatch
-  | IncPatch
-  | DecPatch
-
 /**
  * The editor has produced a patch
  * @beta */
@@ -442,22 +382,22 @@ export declare type PatchObservable = Observable<{
 export declare const PortableTextEditable: ForwardRefExoticComponent<
   Omit<
     Omit<TextareaHTMLAttributes<HTMLDivElement>, 'onPaste' | 'onCopy' | 'onBeforeInput'> & {
-      hotkeys?: HotkeyOptions | undefined
-      onBeforeInput?: ((event: InputEvent) => void) | undefined
-      onPaste?: OnPasteFn | undefined
-      onCopy?: OnCopyFn | undefined
+      hotkeys?: HotkeyOptions
+      onBeforeInput?: (event: InputEvent) => void
+      onPaste?: OnPasteFn
+      onCopy?: OnCopyFn
       ref: MutableRefObject<HTMLDivElement | null>
-      rangeDecorations?: RangeDecoration[] | undefined
-      renderAnnotation?: RenderAnnotationFunction | undefined
-      renderBlock?: RenderBlockFunction | undefined
-      renderChild?: RenderChildFunction | undefined
-      renderDecorator?: RenderDecoratorFunction | undefined
-      renderListItem?: RenderListItemFunction | undefined
-      renderPlaceholder?: (() => ReactNode) | undefined
-      renderStyle?: RenderStyleFunction | undefined
-      scrollSelectionIntoView?: ScrollSelectionIntoViewFunction | undefined
-      selection?: EditorSelection | undefined
-      spellCheck?: boolean | undefined
+      rangeDecorations?: RangeDecoration[]
+      renderAnnotation?: RenderAnnotationFunction
+      renderBlock?: RenderBlockFunction
+      renderChild?: RenderChildFunction
+      renderDecorator?: RenderDecoratorFunction
+      renderListItem?: RenderListItemFunction
+      renderPlaceholder?: RenderPlaceholderFunction
+      renderStyle?: RenderStyleFunction
+      scrollSelectionIntoView?: ScrollSelectionIntoViewFunction
+      selection?: EditorSelection
+      spellCheck?: boolean
     } & Omit<HTMLProps<HTMLDivElement>, 'onPaste' | 'onBeforeInput' | 'as'>,
     'ref'
   > &
@@ -482,7 +422,7 @@ export declare type PortableTextEditableProps = Omit<
   renderChild?: RenderChildFunction
   renderDecorator?: RenderDecoratorFunction
   renderListItem?: RenderListItemFunction
-  renderPlaceholder?: () => ReactNode
+  renderPlaceholder?: RenderPlaceholderFunction
   renderStyle?: RenderStyleFunction
   scrollSelectionIntoView?: ScrollSelectionIntoViewFunction
   selection?: EditorSelection
@@ -838,6 +778,9 @@ export declare type RenderEditableFunction = (props: PortableTextEditableProps)
 /** @beta */
 export declare type RenderListItemFunction = (props: BlockListItemRenderProps) => JSX.Element
 
+/** @beta */
+export declare type RenderPlaceholderFunction = () => React.ReactNode
+
 /** @beta */
 export declare type RenderStyleFunction = (props: BlockStyleRenderProps) => JSX.Element
 
@@ -855,20 +798,6 @@ export declare type SelectionChange = {
   selection: EditorSelection
 }
 
-export declare type SetIfMissingPatch = {
-  path: Path
-  origin?: Origin
-  type: 'setIfMissing'
-  value: JSONValue
-}
-
-export declare type SetPatch = {
-  path: Path
-  type: 'set'
-  origin?: Origin
-  value: JSONValue
-}
-
 /**
  * The editor performed a undo history step
  * @beta */
@@ -884,12 +813,6 @@ export declare type UnsetChange = {
   previousValue: PortableTextBlock[]
 }
 
-export declare type UnsetPatch = {
-  path: Path
-  origin?: Origin
-  type: 'unset'
-}
-
 /**
  * Get the current editor object from the React context.
  */
@@ -908,4 +831,6 @@ export declare type ValueChange = {
   value: PortableTextBlock[] | undefined
 }
 
+export * from '@portabletext/patches/types'
+
 export {}

package/lib/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-
 import {ArrayDefinition} from '@sanity/types'
 import {ArraySchemaType} from '@sanity/types'
 import {BaseSyntheticEvent} from 'react'
@@ -21,6 +19,7 @@ import {Node as Node_2} from 'slate'
 import {ObjectSchemaType} from '@sanity/types'
 import {Observable} from 'rxjs'
 import {Operation} from 'slate'
+import {Patch} from '@portabletext/patches/types'
 import {Path} from '@sanity/types'
 import {PortableTextBlock} from '@sanity/types'
 import {PortableTextChild} from '@sanity/types'
@@ -31,7 +30,6 @@ import {PortableTextTextBlock} from '@sanity/types'
 import {PropsWithChildren} from 'react'
 import {ReactEditor} from 'slate-react'
 import {ReactElement} from 'react'
-import {ReactNode} from 'react'
 import {RefAttributes} from 'react'
 import {RefObject} from 'react'
 import {SpanSchemaType} from '@sanity/types'
@@ -129,12 +127,6 @@ export declare type BlurChange = {
   event: FocusEvent_2<HTMLDivElement, Element>
 }
 
-/**
- * Try to compact a set of patches
- *
- */
-export declare function compactPatches(patches: Patch[]): Patch[]
-
 /**
  * The editor was either connected or disconnected to the network
  * To show out of sync warnings etc when in collaborative mode.
@@ -152,20 +144,6 @@ export declare type createEditorOptions = {
   maxBlocks?: number
 }
 
-export declare type DecPatch = {
-  path: Path
-  origin?: Origin
-  type: 'dec'
-  value: JSONValue
-}
-
-export declare type DiffMatchPatch = {
-  path: Path
-  type: 'diffMatchPatch'
-  origin?: Origin
-  value: string
-}
-
 /** @beta */
 export declare interface EditableAPI {
   activeAnnotations: () => PortableTextObject[]
@@ -303,24 +281,6 @@ export declare type HotkeyOptions = {
   custom?: Record<string, (event: BaseSyntheticEvent, editor: PortableTextEditor) => void>
 }
 
-export declare type IncPatch = {
-  path: Path
-  origin?: Origin
-  type: 'inc'
-  value: JSONValue
-}
-
-export declare type InsertPatch = {
-  path: Path
-  origin?: Origin
-  type: 'insert'
-  position: InsertPosition_2
-  items: JSONValue[]
-}
-
-declare type InsertPosition_2 = 'before' | 'after' | 'replace'
-export {InsertPosition_2 as InsertPosition}
-
 /**
  * The editor has an invalid value
  * @beta */
@@ -353,15 +313,6 @@ export declare type InvalidValueResolution = {
   }
 }
 
-export declare type JSONValue =
-  | number
-  | string
-  | boolean
-  | {
-      [key: string]: JSONValue
-    }
-  | JSONValue[]
-
 export declare const keyGenerator: () => string
 
 /**
@@ -403,8 +354,6 @@ export declare type OnPasteResult =
 
 export declare type OnPasteResultOrPromise = OnPasteResult | Promise<OnPasteResult>
 
-export declare type Origin = 'remote' | 'local' | 'internal'
-
 /** @beta */
 export declare interface PasteData {
   event: ClipboardEvent_2
@@ -413,15 +362,6 @@ export declare interface PasteData {
   value: PortableTextBlock[] | undefined
 }
 
-export declare type Patch =
-  | SetPatch
-  | SetIfMissingPatch
-  | UnsetPatch
-  | InsertPatch
-  | DiffMatchPatch
-  | IncPatch
-  | DecPatch
-
 /**
  * The editor has produced a patch
  * @beta */
@@ -442,22 +382,22 @@ export declare type PatchObservable = Observable<{
 export declare const PortableTextEditable: ForwardRefExoticComponent<
   Omit<
     Omit<TextareaHTMLAttributes<HTMLDivElement>, 'onPaste' | 'onCopy' | 'onBeforeInput'> & {
-      hotkeys?: HotkeyOptions | undefined
-      onBeforeInput?: ((event: InputEvent) => void) | undefined
-      onPaste?: OnPasteFn | undefined
-      onCopy?: OnCopyFn | undefined
+      hotkeys?: HotkeyOptions
+      onBeforeInput?: (event: InputEvent) => void
+      onPaste?: OnPasteFn
+      onCopy?: OnCopyFn
       ref: MutableRefObject<HTMLDivElement | null>
-      rangeDecorations?: RangeDecoration[] | undefined
-      renderAnnotation?: RenderAnnotationFunction | undefined
-      renderBlock?: RenderBlockFunction | undefined
-      renderChild?: RenderChildFunction | undefined
-      renderDecorator?: RenderDecoratorFunction | undefined
-      renderListItem?: RenderListItemFunction | undefined
-      renderPlaceholder?: (() => ReactNode) | undefined
-      renderStyle?: RenderStyleFunction | undefined
-      scrollSelectionIntoView?: ScrollSelectionIntoViewFunction | undefined
-      selection?: EditorSelection | undefined
-      spellCheck?: boolean | undefined
+      rangeDecorations?: RangeDecoration[]
+      renderAnnotation?: RenderAnnotationFunction
+      renderBlock?: RenderBlockFunction
+      renderChild?: RenderChildFunction
+      renderDecorator?: RenderDecoratorFunction
+      renderListItem?: RenderListItemFunction
+      renderPlaceholder?: RenderPlaceholderFunction
+      renderStyle?: RenderStyleFunction
+      scrollSelectionIntoView?: ScrollSelectionIntoViewFunction
+      selection?: EditorSelection
+      spellCheck?: boolean
     } & Omit<HTMLProps<HTMLDivElement>, 'onPaste' | 'onBeforeInput' | 'as'>,
     'ref'
   > &
@@ -482,7 +422,7 @@ export declare type PortableTextEditableProps = Omit<
   renderChild?: RenderChildFunction
   renderDecorator?: RenderDecoratorFunction
   renderListItem?: RenderListItemFunction
-  renderPlaceholder?: () => ReactNode
+  renderPlaceholder?: RenderPlaceholderFunction
   renderStyle?: RenderStyleFunction
   scrollSelectionIntoView?: ScrollSelectionIntoViewFunction
   selection?: EditorSelection
@@ -838,6 +778,9 @@ export declare type RenderEditableFunction = (props: PortableTextEditableProps)
 /** @beta */
 export declare type RenderListItemFunction = (props: BlockListItemRenderProps) => JSX.Element
 
+/** @beta */
+export declare type RenderPlaceholderFunction = () => React.ReactNode
+
 /** @beta */
 export declare type RenderStyleFunction = (props: BlockStyleRenderProps) => JSX.Element
 
@@ -855,20 +798,6 @@ export declare type SelectionChange = {
   selection: EditorSelection
 }
 
-export declare type SetIfMissingPatch = {
-  path: Path
-  origin?: Origin
-  type: 'setIfMissing'
-  value: JSONValue
-}
-
-export declare type SetPatch = {
-  path: Path
-  type: 'set'
-  origin?: Origin
-  value: JSONValue
-}
-
 /**
  * The editor performed a undo history step
  * @beta */
@@ -884,12 +813,6 @@ export declare type UnsetChange = {
   previousValue: PortableTextBlock[]
 }
 
-export declare type UnsetPatch = {
-  path: Path
-  origin?: Origin
-  type: 'unset'
-}
-
 /**
  * Get the current editor object from the React context.
  */
@@ -908,4 +831,6 @@ export declare type ValueChange = {
   value: PortableTextBlock[] | undefined
 }
 
+export * from '@portabletext/patches/types'
+
 export {}

package/lib/index.esm.js

@@ -2306,16 +2306,16 @@ function apply$1(value, patch) {
   return OPERATIONS$1[patch.type](value, patch.value);
 }
 const OPERATIONS = {
-  replace(currentValue, nextValue) {
+  replace(_currentValue, nextValue) {
     return nextValue;
   },
-  set(currentValue, nextValue) {
+  set(_currentValue, nextValue) {
     return nextValue;
   },
   setIfMissing(currentValue, nextValue) {
     return currentValue === void 0 ? nextValue : currentValue;
   },
-  unset(currentValue, nextValue) {
+  unset(_currentValue, _nextValue) {
   },
   diffMatchPatch(currentValue, nextValue) {
     const [result] = apply$4(parse(nextValue), currentValue, {
@@ -3772,7 +3772,8 @@ function createWithInsertData(change$, schemaTypes, keyGenerator) {
             editor,
             toSlateValue(parsed, { schemaTypes }),
             keyGenerator,
-            spanTypeName
+            spanTypeName,
+            schemaTypes
           ), validation = validateValue(parsed, schemaTypes, keyGenerator);
           if (!validation.valid && !((_a = validation.resolution) != null && _a.autoResolve)) {
             const errorDescription = `${(_b = validation.resolution) == null ? void 0 : _b.description}`;
@@ -3853,21 +3854,32 @@ const entityMap = {
 function escapeHtml(str) {
   return String(str).replace(/[&<>"'`=/]/g, (s) => entityMap[s]);
 }
-function _regenerateKeys(editor, fragment, keyGenerator, spanTypeName) {
+function _regenerateKeys(editor, fragment, keyGenerator, spanTypeName, editorTypes) {
   return fragment.map((node) => {
     const newNode = { ...node };
-    editor.isTextBlock(newNode) && (newNode.markDefs = (newNode.markDefs || []).map((def) => {
-      const oldKey = def._key, newKey = keyGenerator();
-      return newNode.children = newNode.children.map(
-        (child) => child._type === spanTypeName && editor.isTextSpan(child) ? {
-          ...child,
-          marks: child.marks && child.marks.includes(oldKey) ? (
-            // eslint-disable-next-line max-nested-callbacks
-            [...child.marks].filter((mark) => mark !== oldKey).concat(newKey)
-          ) : child.marks
-        } : child
-      ), { ...def, _key: newKey };
-    }));
+    if (editor.isTextBlock(newNode)) {
+      const annotations = editorTypes.annotations.map((t) => t.name);
+      if (annotations.length === 0) {
+        const { markDefs, ...NewNodeNoDefs } = newNode;
+        return { ...NewNodeNoDefs, _key: keyGenerator() };
+      }
+      if ((newNode.markDefs || []).some((def) => !annotations.includes(def._type))) {
+        const allowedAnnotations = (newNode.markDefs || []).filter((def) => annotations.includes(def._type));
+        return { ...newNode, markDefs: allowedAnnotations, _key: keyGenerator() };
+      }
+      newNode.markDefs = (newNode.markDefs || []).map((def) => {
+        const oldKey = def._key, newKey = keyGenerator();
+        return newNode.children = newNode.children.map(
+          (child) => child._type === spanTypeName && editor.isTextSpan(child) ? {
+            ...child,
+            marks: child.marks && child.marks.includes(oldKey) ? (
+              // eslint-disable-next-line max-nested-callbacks
+              [...child.marks].filter((mark) => mark !== oldKey).concat(newKey)
+            ) : child.marks
+          } : child
+        ), { ...def, _key: newKey };
+      });
+    }
     const nodeWithNewKeys = { ...newNode, _key: keyGenerator() };
     return editor.isTextBlock(nodeWithNewKeys) && (nodeWithNewKeys.children = nodeWithNewKeys.children.map((child) => ({
       ...child,
@@ -4720,35 +4732,20 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
     [onCopy]
   ), handlePaste = useCallback(
     (event) => {
-      if (event.preventDefault(), !!slateEditor.selection) {
-        if (!onPaste) {
-          debug("Pasting normally"), slateEditor.insertData(event.clipboardData);
-          return;
-        }
-        new Promise((resolve) => {
-          const value = PortableTextEditor.getValue(portableTextEditor), ptRange = toPortableTextRange(value, slateEditor.selection, schemaTypes), path = (ptRange == null ? void 0 : ptRange.focus.path) || [];
-          resolve(
-            onPaste({
-              event,
-              value,
-              path,
-              schemaTypes
-            })
-          );
-        }).then((result) => {
-          if (debug("Custom paste function from client resolved", result), change$.next({ type: "loading", isLoading: !0 }), !result || !result.insert) {
-            debug("No result from custom paste handler, pasting normally"), slateEditor.insertData(event.clipboardData);
-            return;
-          }
-          if (result && result.insert) {
-            slateEditor.insertFragment(
-              toSlateValue(result.insert, { schemaTypes })
-            ), change$.next({ type: "loading", isLoading: !1 });
-            return;
-          }
-          console.warn("Your onPaste function returned something unexpected:", result);
-        }).catch((error) => (change$.next({ type: "loading", isLoading: !1 }), console.error(error), error));
+      if (event.preventDefault(), !slateEditor.selection)
+        return;
+      if (!onPaste) {
+        debug("Pasting normally"), slateEditor.insertData(event.clipboardData);
+        return;
       }
+      const value = PortableTextEditor.getValue(portableTextEditor), ptRange = toPortableTextRange(value, slateEditor.selection, schemaTypes), path = (ptRange == null ? void 0 : ptRange.focus.path) || [], onPasteResult = onPaste({ event, value, path, schemaTypes });
+      onPasteResult === void 0 ? (debug("No result from custom paste handler, pasting normally"), slateEditor.insertData(event.clipboardData)) : (change$.next({ type: "loading", isLoading: !0 }), Promise.resolve(onPasteResult).then((result) => {
+        debug("Custom paste function from client resolved", result), result && result.insert ? slateEditor.insertFragment(
+          toSlateValue(result.insert, { schemaTypes })
+        ) : console.warn("Your onPaste function returned something unexpected:", result);
+      }).catch((error) => (console.error(error), error)).finally(() => {
+        change$.next({ type: "loading", isLoading: !1 });
+      }));
     },
     [change$, onPaste, portableTextEditor, schemaTypes, slateEditor]
   ), handleOnFocus = useCallback(
@@ -4873,22 +4870,9 @@ const debug$1 = debugWithName("components:Leaf"), EMPTY_MARKS = [], Leaf = (prop
     }
   ) : null;
 });
-function compactPatches(patches) {
-  const lastPatch = patches.slice(-1)[0];
-  if (lastPatch && lastPatch.type === "unset" && lastPatch.path.length === 0)
-    return [lastPatch];
-  let finalPatches = patches;
-  return finalPatches = finalPatches.filter((patch, index) => {
-    if (!patch)
-      return !1;
-    const nextPatch = finalPatches[index + 1];
-    return !(nextPatch && nextPatch.type === "set" && patch.type === "set" && isEqual(patch.path, nextPatch.path));
-  }), finalPatches.length !== patches.length ? finalPatches : patches;
-}
 export {
   PortableTextEditable,
   PortableTextEditor,
-  compactPatches,
   defaultKeyGenerator as keyGenerator,
   usePortableTextEditor,
   usePortableTextEditorSelection