///
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 {}