/// import {ArrayDefinition} from '@sanity/types' import {ArraySchemaType} from '@sanity/types' import {BaseSyntheticEvent} from 'react' import {BlockDecoratorDefinition} from '@sanity/types' import {BlockListDefinition} from '@sanity/types' import {BlockSchemaType} from '@sanity/types' import {BlockStyleDefinition} from '@sanity/types' import {ClipboardEvent as ClipboardEvent_2} from 'react' import {Component} from 'react' import {Descendant} from 'slate' import {DOMNode} from 'slate-react/dist/utils/dom' import {FocusEvent as FocusEvent_2} from 'react' import {ForwardRefExoticComponent} from 'react' import {HTMLProps} from 'react' import {JSX as JSX_2} from 'react' import {KeyboardEvent as KeyboardEvent_2} from 'react' import {MutableRefObject} from 'react' import {Node as Node_2} from 'slate' import {ObjectSchemaType} from '@sanity/types' import {Observable} from 'rxjs' import {Operation} from 'slate' import {Path} from '@sanity/types' import {PortableTextBlock} from '@sanity/types' import {PortableTextChild} from '@sanity/types' import {PortableTextListBlock} from '@sanity/types' import {PortableTextObject} from '@sanity/types' import {PortableTextSpan} from '@sanity/types' 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' import {Subject} from 'rxjs' import {TextareaHTMLAttributes} from 'react' import {TypedObject} from '@sanity/types' /** @beta */ export declare interface BlockAnnotationRenderProps { block: PortableTextBlock children: ReactElement editorElementRef: RefObject focused: boolean path: Path schemaType: ObjectSchemaType selected: boolean /** @deprecated Use `schemaType` instead */ type: ObjectSchemaType value: PortableTextObject } /** @beta */ export declare interface BlockChildRenderProps { annotations: PortableTextObject[] children: ReactElement editorElementRef: RefObject focused: boolean path: Path selected: boolean schemaType: ObjectSchemaType /** @deprecated Use `schemaType` instead */ type: ObjectSchemaType value: PortableTextChild } /** @beta */ export declare interface BlockDecoratorRenderProps { children: ReactElement editorElementRef: RefObject focused: boolean path: Path schemaType: BlockDecoratorDefinition selected: boolean /** @deprecated Use `schemaType` instead */ type: BlockDecoratorDefinition value: string } /** @beta */ export declare interface BlockListItemRenderProps { block: PortableTextTextBlock children: ReactElement editorElementRef: RefObject focused: boolean level: number path: Path schemaType: BlockListDefinition selected: boolean value: string } /** @beta */ export declare interface BlockRenderProps { children: ReactElement editorElementRef: RefObject focused: boolean level?: number listItem?: string path: Path selected: boolean style?: string schemaType: ObjectSchemaType /** @deprecated Use `schemaType` instead */ type: ObjectSchemaType value: PortableTextBlock } /** @beta */ export declare interface BlockStyleRenderProps { block: PortableTextTextBlock children: ReactElement editorElementRef: RefObject focused: boolean path: Path selected: boolean schemaType: BlockStyleDefinition value: string } /** * The editor blurred * @beta */ export declare type BlurChange = { type: 'blur' event: FocusEvent_2 } /** * 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. * @beta */ export declare type ConnectionChange = { type: 'connection' value: 'online' | 'offline' } export declare type createEditorOptions = { keyGenerator: () => string patches$?: PatchObservable portableTextEditor: PortableTextEditor readOnly: boolean 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[] isAnnotationActive: (annotationType: PortableTextObject['_type']) => boolean addAnnotation: ( type: ObjectSchemaType, value?: { [prop: string]: unknown }, ) => | { spanPath: Path markDefPath: Path } | undefined blur: () => void delete: (selection: EditorSelection, options?: EditableAPIDeleteOptions) => void findByPath: (path: Path) => [PortableTextBlock | PortableTextChild | undefined, Path | undefined] findDOMNode: (element: PortableTextBlock | PortableTextChild) => DOMNode | undefined focus: () => void focusBlock: () => PortableTextBlock | undefined focusChild: () => PortableTextChild | undefined getSelection: () => EditorSelection getFragment: () => PortableTextBlock[] | undefined getValue: () => PortableTextBlock[] | undefined hasBlockStyle: (style: string) => boolean hasListStyle: (listStyle: string) => boolean insertBlock: ( type: BlockSchemaType | ObjectSchemaType, value?: { [prop: string]: unknown }, ) => Path insertChild: ( type: SpanSchemaType | ObjectSchemaType, value?: { [prop: string]: unknown }, ) => Path insertBreak: () => void isCollapsedSelection: () => boolean isExpandedSelection: () => boolean isMarkActive: (mark: string) => boolean isSelectionsOverlapping: (selectionA: EditorSelection, selectionB: EditorSelection) => boolean isVoid: (element: PortableTextBlock | PortableTextChild) => boolean marks: () => string[] redo: () => void removeAnnotation: (type: ObjectSchemaType) => void select: (selection: EditorSelection) => void toggleBlockStyle: (blockStyle: string) => void toggleList: (listStyle: string) => void toggleMark: (mark: string) => void undo: () => void } /** @beta */ export declare interface EditableAPIDeleteOptions { mode?: 'blocks' | 'children' | 'selected' } /** * When the editor changes, it will emit a change item describing the change * @beta */ export declare type EditorChange = | BlurChange | ConnectionChange | ErrorChange | FocusChange | InvalidValue | LoadingChange | MutationChange | PatchChange | ReadyChange | RedoChange | SelectionChange | UndoChange | UnsetChange | ValueChange export declare type EditorChanges = Subject /** @internal */ export declare type EditorNode = Node_2 & { _key: string _type: string } /** @beta */ export declare type EditorSelection = { anchor: EditorSelectionPoint focus: EditorSelectionPoint backward?: boolean } | null /** @beta */ export declare type EditorSelectionPoint = { path: Path offset: number } /** * The editor produced an error * @beta */ export declare type ErrorChange = { type: 'error' name: string level: 'warning' | 'error' description: string data?: unknown } /** * The editor received focus * @beta */ export declare type FocusChange = { type: 'focus' event: FocusEvent_2 } /** @internal */ declare interface History_2 { redos: HistoryItem[] undos: HistoryItem[] } export {History_2 as History} /** @internal */ export declare type HistoryItem = { operations: Operation[] timestamp: Date } export declare type HotkeyOptions = { marks?: Record custom?: Record 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 */ export declare type InvalidValue = { type: 'invalidValue' resolution: InvalidValueResolution | null value: PortableTextBlock[] | undefined } /** * The editor has invalid data in the value that can be resolved by the user * @beta */ export declare type InvalidValueResolution = { autoResolve?: boolean patches: Patch[] description: string action: string item: PortableTextBlock[] | PortableTextBlock | PortableTextChild | undefined /** * i18n keys for the description and action * * These are in addition to the description and action properties, to decouple the editor from * the i18n system, and allow usage without it. The i18n keys take precedence over the * description and action properties, if i18n framework is available. */ i18n: { description: `inputs.portable-text.invalid-value.${Lowercase}.description` action: `inputs.portable-text.invalid-value.${Lowercase}.action` values?: Record } } export declare type JSONValue = | number | string | boolean | { [key: string]: JSONValue } | JSONValue[] export declare const keyGenerator: () => string /** * The editor is currently loading something * Could be used to show a spinner etc. * @beta */ export declare type LoadingChange = { type: 'loading' isLoading: boolean } /** * The editor has mutated it's content. * @beta */ export declare type MutationChange = { type: 'mutation' patches: Patch[] snapshot: PortableTextBlock[] | undefined } /** @beta */ export declare type OnBeforeInputFn = (event: InputEvent) => void /** @beta */ export declare type OnCopyFn = ( event: ClipboardEvent_2, ) => undefined | unknown /** @beta */ export declare type OnPasteFn = (data: PasteData) => OnPasteResultOrPromise /** @beta */ export declare type OnPasteResult = | { insert?: TypedObject[] path?: Path } | undefined export declare type OnPasteResultOrPromise = OnPasteResult | Promise export declare type Origin = 'remote' | 'local' | 'internal' /** @beta */ export declare interface PasteData { event: ClipboardEvent_2 path: Path schemaTypes: PortableTextMemberSchemaTypes value: PortableTextBlock[] | undefined } export declare type Patch = | SetPatch | SetIfMissingPatch | UnsetPatch | InsertPatch | DiffMatchPatch | IncPatch | DecPatch /** * The editor has produced a patch * @beta */ export declare type PatchChange = { type: 'patch' patch: Patch } /** @beta */ export declare type PatchObservable = Observable<{ patches: Patch[] snapshot: PortableTextBlock[] | undefined }> /** * @public */ export declare const PortableTextEditable: ForwardRefExoticComponent< Omit< Omit, 'onPaste' | 'onCopy' | 'onBeforeInput'> & { hotkeys?: HotkeyOptions | undefined onBeforeInput?: ((event: InputEvent) => void) | undefined onPaste?: OnPasteFn | undefined onCopy?: OnCopyFn | undefined ref: MutableRefObject 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 } & Omit, 'onPaste' | 'onBeforeInput' | 'as'>, 'ref' > & RefAttributes > /** * @public */ export declare type PortableTextEditableProps = Omit< TextareaHTMLAttributes, 'onPaste' | 'onCopy' | 'onBeforeInput' > & { hotkeys?: HotkeyOptions onBeforeInput?: (event: InputEvent) => void onPaste?: OnPasteFn onCopy?: OnCopyFn ref: MutableRefObject rangeDecorations?: RangeDecoration[] renderAnnotation?: RenderAnnotationFunction renderBlock?: RenderBlockFunction renderChild?: RenderChildFunction renderDecorator?: RenderDecoratorFunction renderListItem?: RenderListItemFunction renderPlaceholder?: () => ReactNode renderStyle?: RenderStyleFunction scrollSelectionIntoView?: ScrollSelectionIntoViewFunction selection?: EditorSelection spellCheck?: boolean } /** * The main Portable Text Editor component. * @public */ export declare class PortableTextEditor extends Component { /** * An observable of all the editor changes. */ change$: EditorChanges /** * A lookup table for all the relevant schema types for this portable text type. */ schemaTypes: PortableTextMemberSchemaTypes /** * The editor API (currently implemented with Slate). */ private editable? constructor(props: PortableTextEditorProps) componentDidUpdate(prevProps: PortableTextEditorProps): void setEditable: (editable: EditableAPI) => void render(): JSX_2.Element static activeAnnotations: (editor: PortableTextEditor) => PortableTextObject[] static isAnnotationActive: ( editor: PortableTextEditor, annotationType: PortableTextObject['_type'], ) => boolean static addAnnotation: ( editor: PortableTextEditor, type: ObjectSchemaType, value?: { [prop: string]: unknown }, ) => | { spanPath: Path markDefPath: Path } | undefined static blur: (editor: PortableTextEditor) => void static delete: ( editor: PortableTextEditor, selection: EditorSelection, options?: EditableAPIDeleteOptions, ) => void | undefined static findDOMNode: ( editor: PortableTextEditor, element: PortableTextBlock | PortableTextChild, ) => Node | undefined static findByPath: ( editor: PortableTextEditor, path: Path, ) => | [] | [ ( | PortableTextTextBlock | PortableTextObject | PortableTextSpan | undefined ), Path | undefined, ] static focus: (editor: PortableTextEditor) => void static focusBlock: (editor: PortableTextEditor) => PortableTextBlock | undefined static focusChild: (editor: PortableTextEditor) => PortableTextChild | undefined static getSelection: (editor: PortableTextEditor) => EditorSelection static getValue: (editor: PortableTextEditor) => PortableTextBlock[] | undefined static hasBlockStyle: (editor: PortableTextEditor, blockStyle: string) => boolean | undefined static hasListStyle: (editor: PortableTextEditor, listStyle: string) => boolean | undefined static isCollapsedSelection: (editor: PortableTextEditor) => boolean | undefined static isExpandedSelection: (editor: PortableTextEditor) => boolean | undefined static isMarkActive: (editor: PortableTextEditor, mark: string) => boolean | undefined static insertChild: ( editor: PortableTextEditor, type: SpanSchemaType | ObjectSchemaType, value?: { [prop: string]: unknown }, ) => Path | undefined static insertBlock: ( editor: PortableTextEditor, type: BlockSchemaType | ObjectSchemaType, value?: { [prop: string]: unknown }, ) => Path | undefined static insertBreak: (editor: PortableTextEditor) => void static isVoid: ( editor: PortableTextEditor, element: PortableTextBlock | PortableTextChild, ) => boolean | undefined static isObjectPath: (editor: PortableTextEditor, path: Path) => boolean static marks: (editor: PortableTextEditor) => string[] | undefined static select: (editor: PortableTextEditor, selection: EditorSelection | null) => void static removeAnnotation: (editor: PortableTextEditor, type: ObjectSchemaType) => void | undefined static toggleBlockStyle: (editor: PortableTextEditor, blockStyle: string) => void | undefined static toggleList: (editor: PortableTextEditor, listStyle: string) => void static toggleMark: (editor: PortableTextEditor, mark: string) => void static getFragment: (editor: PortableTextEditor) => PortableTextBlock[] | undefined static undo: (editor: PortableTextEditor) => void static redo: (editor: PortableTextEditor) => void static isSelectionsOverlapping: ( editor: PortableTextEditor, selectionA: EditorSelection, selectionB: EditorSelection, ) => boolean | undefined } /** * Props for the PortableTextEditor component * * @public */ /** * Props for the PortableTextEditor component * * @public */ export declare type PortableTextEditorProps = PropsWithChildren<{ /** * Function that gets called when the editor changes the value */ onChange: (change: EditorChange) => void /** * Schema type for the portable text field */ schemaType: ArraySchemaType | ArrayDefinition /** * Maximum number of blocks to allow within the editor */ maxBlocks?: number | string /** * Whether or not the editor should be in read-only mode */ readOnly?: boolean /** * The current value of the portable text field */ value?: PortableTextBlock[] /** * Function used to generate keys for array items (`_key`) */ keyGenerator?: () => string /** * Observable of local and remote patches for the edited value. */ patches$?: PatchObservable /** * Backward compatibility (renamed to patches$). */ incomingPatches$?: PatchObservable /** * A ref to the editor instance */ editorRef?: MutableRefObject }> /** @internal */ export declare type PortableTextMemberSchemaTypes = { annotations: (ObjectSchemaType & { i18nTitleKey?: string })[] block: ObjectSchemaType blockObjects: ObjectSchemaType[] decorators: BlockDecoratorDefinition[] inlineObjects: ObjectSchemaType[] portableText: ArraySchemaType span: ObjectSchemaType styles: BlockStyleDefinition[] lists: BlockListDefinition[] } /** @internal */ export declare interface PortableTextSlateEditor extends ReactEditor { _key: 'editor' _type: 'editor' destroy: () => void createPlaceholderBlock: () => Descendant editable: EditableAPI history: History_2 insertPortableTextData: (data: DataTransfer) => boolean insertTextOrHTMLData: (data: DataTransfer) => boolean isTextBlock: (value: unknown) => value is PortableTextTextBlock isTextSpan: (value: unknown) => value is PortableTextSpan isListBlock: (value: unknown) => value is PortableTextListBlock subscriptions: (() => () => void)[] /** * Increments selected list items levels, or decrements them if `reverse` is true. * * @param reverse - if true, decrement instead of incrementing * @returns True if anything was incremented in the selection */ pteIncrementBlockLevels: (reverse?: boolean) => boolean /** * Toggle selected blocks as listItem * * @param listStyle - Style of list item to toggle on/off */ pteToggleListItem: (listStyle: string) => void /** * Set selected block as listItem * * @param listStyle - Style of list item to set */ pteSetListItem: (listStyle: string) => void /** * Unset selected block as listItem * * @param listStyle - Style of list item to unset */ pteUnsetListItem: (listStyle: string) => void /** * Ends a list * * @returns True if a list was ended in the selection */ pteEndList: () => boolean /** * Toggle marks in the selection * * @param mark - Mark to toggle on/off */ pteToggleMark: (mark: string) => void /** * Test if a mark is active in the current selection * * @param mark - Mark to check whether or not is active */ pteIsMarkActive: (mark: string) => boolean /** * Toggle the selected block style * * @param style - The style name * */ pteToggleBlockStyle: (style: string) => void /** * Test if the current selection has a certain block style * * @param style - The style name * */ pteHasBlockStyle: (style: string) => boolean /** * Test if the current selection has a certain list style * * @param listStyle - Style name to check whether or not the selection has * */ pteHasListStyle: (style: string) => boolean /** * Try to expand the current selection to a word */ pteExpandToWord: () => void /** * Use hotkeys */ pteWithHotKeys: (event: KeyboardEvent_2) => void /** * Helper function that creates an empty text block */ pteCreateEmptyBlock: () => Descendant /** * Undo */ undo: () => void /** * Redo */ redo: () => void } /** * A range decoration is a UI affordance that wraps a given selection range in the editor * with a custom component. This can be used to highlight search results, * mark validation errors on specific words, draw user presence and similar. * @alpha */ export declare interface RangeDecoration { /** * A component for rendering the range decoration. * The component will receive the children (text) of the range decoration as its children. * * @example * ```ts * (rangeComponentProps: PropsWithChildren) => ( * * {rangeComponentProps.children} * * ) * ``` */ component: (props: PropsWithChildren) => ReactElement /** * The editor content selection range */ selection: EditorSelection /** * A optional callback that will be called when the range decoration potentially moves according to user edits. */ onMoved?: (details: RangeDecorationOnMovedDetails) => void /** * A custom payload that can be set on the range decoration */ payload?: Record } /** * Parameters for the callback that will be called for a RangeDecoration's onMoved. * @alpha */ export declare interface RangeDecorationOnMovedDetails { rangeDecoration: RangeDecoration newSelection: EditorSelection origin: 'remote' | 'local' } /** * The editor content is ready to be edited by the user * @beta */ export declare type ReadyChange = { type: 'ready' } /** * The editor performed redo history step * @beta */ export declare type RedoChange = { type: 'redo' patches: Patch[] timestamp: Date } /** @beta */ export declare type RenderAnnotationFunction = (props: BlockAnnotationRenderProps) => JSX.Element /** @beta */ export declare type RenderBlockFunction = (props: BlockRenderProps) => JSX.Element /** @beta */ export declare type RenderChildFunction = (props: BlockChildRenderProps) => JSX.Element /** @beta */ export declare type RenderDecoratorFunction = (props: BlockDecoratorRenderProps) => JSX.Element /** @beta */ export declare type RenderEditableFunction = (props: PortableTextEditableProps) => JSX.Element /** @beta */ export declare type RenderListItemFunction = (props: BlockListItemRenderProps) => JSX.Element /** @beta */ export declare type RenderStyleFunction = (props: BlockStyleRenderProps) => JSX.Element /** @beta */ export declare type ScrollSelectionIntoViewFunction = ( editor: PortableTextEditor, domRange: globalThis.Range, ) => void /** * The editor has a new selection * @beta */ export declare type SelectionChange = { type: 'selection' 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 */ export declare type UndoChange = { type: 'undo' patches: Patch[] timestamp: Date } /** @beta */ export declare type UnsetChange = { type: 'unset' previousValue: PortableTextBlock[] } export declare type UnsetPatch = { path: Path origin?: Origin type: 'unset' } /** * Get the current editor object from the React context. */ export declare const usePortableTextEditor: () => PortableTextEditor /** * Get the current editor selection from the React context. */ export declare const usePortableTextEditorSelection: () => EditorSelection /** * The editor has received a new (props) value * @beta */ export declare type ValueChange = { type: 'value' value: PortableTextBlock[] | undefined } export {}