import type { IconKey } from '../core/Icon'; import type { RefObject, ReactNode, ComponentType } from 'react'; import type { Options } from 'mdast-util-to-markdown'; import type { Config } from 'mdast-util-from-markdown/lib'; import type { Extension } from 'micromark-util-types'; import type { Content } from 'mdast'; import type { MdastImportVisitor, LexicalVisitor } from '../..'; import type { EditorSubscription, EditorInFocus, BlockType } from '../core'; import type { InitialEditorStateType } from '@lexical/react/LexicalComposer'; import type { JsxComponentDescriptor } from '../jsx'; import type { HistoryState } from '@lexical/history'; import type { SystemSpec, Realm, RealmNode, PluginConstructor, TypedRealm, ValueForKey, SystemKeys, ValuesForKeys, SystemDict } from '../../gurx'; /// import { Directive } from 'mdast-util-directive'; import { DirectiveNode } from './DirectiveNode'; import type { RangeSelection, Klass, LexicalNode, TextFormatType, ElementNode, DecoratorNode, LexicalEditor } from 'lexical'; /** * Implement this interface to create a custom editor for markdown directives. * Pass the object in the `directivesPlugin` parameters. */ export interface DirectiveDescriptor { /** * Whether the descriptor's Editor should be used for the given node. * @param node - The directive mdast node. You can code your logic against the node's name, type, attributes, children, etc. */ testNode(node: Directive): boolean; /** * The name of the descriptor - use this if you're building UI for the user to select a directive. */ name: string; /** * The attributes that the directive has. This can be used when building the UI for the user to configure a directive. The {@link GenericDirectiveEditor} uses those to display a property form. */ attributes: string[]; /** * Whether or not the directive has inner markdown content as children. Used by the {@link GenericDirectiveEditor} to determine whether to show the inner markdown editor. */ hasChildren: boolean; /** * The type of the supported directive. Can be one of: 'leafDirective' | 'containerDirective' | 'textDirective'. */ type?: 'leafDirective' | 'containerDirective' | 'textDirective'; /** * The React component to be used as an Editor. See {@link DirectiveEditorProps} for the props passed to the component. */ Editor: React.ComponentType>; } /** * The properties passed to the {@link DirectiveDescriptor.Editor} component. */ export interface DirectiveEditorProps { /** * The mdast directive node. */ mdastNode: T; /** * The parent lexical editor - use this if you are dealing with the Lexical APIs. */ parentEditor: LexicalEditor; /** * The Lexical directive node. */ lexicalNode: DirectiveNode; /** * The descriptor that activated the editor */ descriptor: DirectiveDescriptor; } interface InsertDirectivePayload { type: Directive['type']; name: string; attributes?: Directive['attributes']; } /** @internal */ export declare const directivesSystem: SystemSpec<[SystemSpec<[], (r: Realm) => { activeEditor: RealmNode; inFocus: RealmNode; historyState: RealmNode; currentSelection: RealmNode; jsxIsAvailable: RealmNode; jsxComponentDescriptors: RealmNode; initialRootEditorState: RealmNode; rootEditor: RealmNode; createRootEditorSubscription: RealmNode; createActiveEditorSubscription: RealmNode; importVisitors: RealmNode[]>; syntaxExtensions: RealmNode; mdastExtensions: RealmNode<(Partial | Partial[])[] | null | undefined>; usedLexicalNodes: RealmNode[]>; addImportVisitor: RealmNode>; addLexicalNode: RealmNode>; addSyntaxExtension: RealmNode; addMdastExtension: RealmNode | Partial[]>; toMarkdownExtensions: RealmNode; toMarkdownOptions: RealmNode; addToMarkdownExtension: RealmNode; addExportVisitor: RealmNode; exportVisitors: RealmNode; initialMarkdown: RealmNode; setMarkdown: RealmNode; markdown: RealmNode; markdownSignal: RealmNode; editorRootElementRef: RealmNode | null>; contentEditableClassName: RealmNode; placeholder: RealmNode; autoFocus: RealmNode; readOnly: RealmNode; composerChildren: RealmNode[]>; addComposerChild: RealmNode>; topAreaChildren: RealmNode[]>; addTopAreaChild: RealmNode>; nestedEditorChildren: RealmNode[]>; addNestedEditorChild: RealmNode>; editorWrappers: RealmNode[]>; addEditorWrapper: RealmNode>; currentFormat: RealmNode; editorInFocus: RealmNode; applyFormat: RealmNode; currentBlockType: RealmNode; applyBlockType: RealmNode; convertSelectionToNode: RealmNode<() => ElementNode>; insertDecoratorNode: RealmNode<() => DecoratorNode>; onBlur: RealmNode; iconComponentFor: RealmNode<(name: IconKey) => ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }>], (r: Realm, [{ insertDecoratorNode }]: [{ activeEditor: RealmNode; inFocus: RealmNode; historyState: RealmNode; currentSelection: RealmNode; jsxIsAvailable: RealmNode; jsxComponentDescriptors: RealmNode; initialRootEditorState: RealmNode; rootEditor: RealmNode; createRootEditorSubscription: RealmNode; createActiveEditorSubscription: RealmNode; importVisitors: RealmNode[]>; syntaxExtensions: RealmNode; mdastExtensions: RealmNode<(Partial | Partial[])[] | null | undefined>; usedLexicalNodes: RealmNode[]>; addImportVisitor: RealmNode>; addLexicalNode: RealmNode>; addSyntaxExtension: RealmNode; addMdastExtension: RealmNode | Partial[]>; toMarkdownExtensions: RealmNode; toMarkdownOptions: RealmNode; addToMarkdownExtension: RealmNode; addExportVisitor: RealmNode; exportVisitors: RealmNode; initialMarkdown: RealmNode; setMarkdown: RealmNode; markdown: RealmNode; markdownSignal: RealmNode; editorRootElementRef: RealmNode | null>; contentEditableClassName: RealmNode; placeholder: RealmNode; autoFocus: RealmNode; readOnly: RealmNode; composerChildren: RealmNode[]>; addComposerChild: RealmNode>; topAreaChildren: RealmNode[]>; addTopAreaChild: RealmNode>; nestedEditorChildren: RealmNode[]>; addNestedEditorChild: RealmNode>; editorWrappers: RealmNode[]>; addEditorWrapper: RealmNode>; currentFormat: RealmNode; editorInFocus: RealmNode; applyFormat: RealmNode; currentBlockType: RealmNode; applyBlockType: RealmNode; convertSelectionToNode: RealmNode<() => ElementNode>; insertDecoratorNode: RealmNode<() => DecoratorNode>; onBlur: RealmNode; iconComponentFor: RealmNode<(name: IconKey) => ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }]) => { directiveDescriptors: RealmNode[]>; insertDirective: RealmNode; }>; /** * The parameters used to configure the `directivesPlugin` function. */ export interface DirectivesPluginParams { /** * Use this to register your custom directive editors. You can also use the built-in {@link GenericDirectiveEditor}. */ directiveDescriptors: DirectiveDescriptor[]; } /** * The plugin that adds support for markdown directives. */ export declare const /** @internal */ directivesPlugin: PluginConstructor { activeEditor: RealmNode; inFocus: RealmNode; historyState: RealmNode; currentSelection: RealmNode; jsxIsAvailable: RealmNode; jsxComponentDescriptors: RealmNode; initialRootEditorState: RealmNode; rootEditor: RealmNode; createRootEditorSubscription: RealmNode; createActiveEditorSubscription: RealmNode; importVisitors: RealmNode[]>; syntaxExtensions: RealmNode; mdastExtensions: RealmNode<(Partial | Partial[])[] | null | undefined>; usedLexicalNodes: RealmNode[]>; addImportVisitor: RealmNode>; addLexicalNode: RealmNode>; addSyntaxExtension: RealmNode; addMdastExtension: RealmNode | Partial[]>; toMarkdownExtensions: RealmNode; toMarkdownOptions: RealmNode; addToMarkdownExtension: RealmNode; addExportVisitor: RealmNode; exportVisitors: RealmNode; initialMarkdown: RealmNode; setMarkdown: RealmNode; markdown: RealmNode; markdownSignal: RealmNode; editorRootElementRef: RealmNode | null>; contentEditableClassName: RealmNode; placeholder: RealmNode; autoFocus: RealmNode; readOnly: RealmNode; composerChildren: RealmNode[]>; addComposerChild: RealmNode>; topAreaChildren: RealmNode[]>; addTopAreaChild: RealmNode>; nestedEditorChildren: RealmNode[]>; addNestedEditorChild: RealmNode>; editorWrappers: RealmNode[]>; addEditorWrapper: RealmNode>; currentFormat: RealmNode; editorInFocus: RealmNode; applyFormat: RealmNode; currentBlockType: RealmNode; applyBlockType: RealmNode; convertSelectionToNode: RealmNode<() => ElementNode>; insertDecoratorNode: RealmNode<() => DecoratorNode>; onBlur: RealmNode; iconComponentFor: RealmNode<(name: IconKey) => ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }>], (r: Realm, [{ insertDecoratorNode }]: [{ activeEditor: RealmNode; inFocus: RealmNode; historyState: RealmNode; currentSelection: RealmNode; jsxIsAvailable: RealmNode; jsxComponentDescriptors: RealmNode; initialRootEditorState: RealmNode; rootEditor: RealmNode; createRootEditorSubscription: RealmNode; createActiveEditorSubscription: RealmNode; importVisitors: RealmNode[]>; syntaxExtensions: RealmNode; mdastExtensions: RealmNode<(Partial | Partial[])[] | null | undefined>; usedLexicalNodes: RealmNode[]>; addImportVisitor: RealmNode>; addLexicalNode: RealmNode>; addSyntaxExtension: RealmNode; addMdastExtension: RealmNode | Partial[]>; toMarkdownExtensions: RealmNode; toMarkdownOptions: RealmNode; addToMarkdownExtension: RealmNode; addExportVisitor: RealmNode; exportVisitors: RealmNode; initialMarkdown: RealmNode; setMarkdown: RealmNode; markdown: RealmNode; markdownSignal: RealmNode; editorRootElementRef: RealmNode | null>; contentEditableClassName: RealmNode; placeholder: RealmNode; autoFocus: RealmNode; readOnly: RealmNode; composerChildren: RealmNode[]>; addComposerChild: RealmNode>; topAreaChildren: RealmNode[]>; addTopAreaChild: RealmNode>; nestedEditorChildren: RealmNode[]>; addNestedEditorChild: RealmNode>; editorWrappers: RealmNode[]>; addEditorWrapper: RealmNode>; currentFormat: RealmNode; editorInFocus: RealmNode; applyFormat: RealmNode; currentBlockType: RealmNode; applyBlockType: RealmNode; convertSelectionToNode: RealmNode<() => ElementNode>; insertDecoratorNode: RealmNode<() => DecoratorNode>; onBlur: RealmNode; iconComponentFor: RealmNode<(name: IconKey) => ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }]) => { directiveDescriptors: RealmNode[]>; insertDirective: RealmNode; }>, DirectivesPluginParams>, /** @internal */ directivesPluginHooks: { useRealmContext: () => TypedRealm<{ directiveDescriptors: RealmNode[]>; insertDirective: RealmNode; } & { activeEditor: RealmNode; inFocus: RealmNode; historyState: RealmNode; currentSelection: RealmNode; jsxIsAvailable: RealmNode; jsxComponentDescriptors: RealmNode; initialRootEditorState: RealmNode; rootEditor: RealmNode; createRootEditorSubscription: RealmNode; createActiveEditorSubscription: RealmNode; importVisitors: RealmNode[]>; syntaxExtensions: RealmNode; mdastExtensions: RealmNode<(Partial | Partial[])[] | null | undefined>; usedLexicalNodes: RealmNode[]>; addImportVisitor: RealmNode>; addLexicalNode: RealmNode>; addSyntaxExtension: RealmNode; addMdastExtension: RealmNode | Partial[]>; toMarkdownExtensions: RealmNode; toMarkdownOptions: RealmNode; addToMarkdownExtension: RealmNode; addExportVisitor: RealmNode; exportVisitors: RealmNode; initialMarkdown: RealmNode; setMarkdown: RealmNode; markdown: RealmNode; markdownSignal: RealmNode; editorRootElementRef: RealmNode | null>; contentEditableClassName: RealmNode; placeholder: RealmNode; autoFocus: RealmNode; readOnly: RealmNode; composerChildren: RealmNode[]>; addComposerChild: RealmNode>; topAreaChildren: RealmNode[]>; addTopAreaChild: RealmNode>; nestedEditorChildren: RealmNode[]>; addNestedEditorChild: RealmNode>; editorWrappers: RealmNode[]>; addEditorWrapper: RealmNode>; currentFormat: RealmNode; editorInFocus: RealmNode; applyFormat: RealmNode; currentBlockType: RealmNode; applyBlockType: RealmNode; convertSelectionToNode: RealmNode<() => ElementNode>; insertDecoratorNode: RealmNode<() => DecoratorNode>; onBlur: RealmNode; iconComponentFor: RealmNode<(name: IconKey) => ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }>; useEmitter: (key: K, callback: (value: ValueForKey<{ directiveDescriptors: RealmNode[]>; insertDirective: RealmNode; } & { activeEditor: RealmNode; inFocus: RealmNode; historyState: RealmNode; currentSelection: RealmNode; jsxIsAvailable: RealmNode; jsxComponentDescriptors: RealmNode; initialRootEditorState: RealmNode; rootEditor: RealmNode; createRootEditorSubscription: RealmNode; createActiveEditorSubscription: RealmNode; importVisitors: RealmNode[]>; syntaxExtensions: RealmNode; mdastExtensions: RealmNode<(Partial | Partial[])[] | null | undefined>; usedLexicalNodes: RealmNode[]>; addImportVisitor: RealmNode>; addLexicalNode: RealmNode>; addSyntaxExtension: RealmNode; addMdastExtension: RealmNode | Partial[]>; toMarkdownExtensions: RealmNode; toMarkdownOptions: RealmNode; addToMarkdownExtension: RealmNode; addExportVisitor: RealmNode; exportVisitors: RealmNode; initialMarkdown: RealmNode; setMarkdown: RealmNode; markdown: RealmNode; markdownSignal: RealmNode; editorRootElementRef: RealmNode | null>; contentEditableClassName: RealmNode; placeholder: RealmNode; autoFocus: RealmNode; readOnly: RealmNode; composerChildren: RealmNode[]>; addComposerChild: RealmNode>; topAreaChildren: RealmNode[]>; addTopAreaChild: RealmNode>; nestedEditorChildren: RealmNode[]>; addNestedEditorChild: RealmNode>; editorWrappers: RealmNode[]>; addEditorWrapper: RealmNode>; currentFormat: RealmNode; editorInFocus: RealmNode; applyFormat: RealmNode; currentBlockType: RealmNode; applyBlockType: RealmNode; convertSelectionToNode: RealmNode<() => ElementNode>; insertDecoratorNode: RealmNode<() => DecoratorNode>; onBlur: RealmNode; iconComponentFor: RealmNode<(name: IconKey) => ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }, K>) => void) => void; useEmitterValues: []>; insertDirective: RealmNode; } & { activeEditor: RealmNode; inFocus: RealmNode; historyState: RealmNode; currentSelection: RealmNode; jsxIsAvailable: RealmNode; jsxComponentDescriptors: RealmNode; initialRootEditorState: RealmNode; rootEditor: RealmNode; createRootEditorSubscription: RealmNode; createActiveEditorSubscription: RealmNode; importVisitors: RealmNode[]>; syntaxExtensions: RealmNode; mdastExtensions: RealmNode<(Partial | Partial[])[] | null | undefined>; usedLexicalNodes: RealmNode[]>; addImportVisitor: RealmNode>; addLexicalNode: RealmNode>; addSyntaxExtension: RealmNode; addMdastExtension: RealmNode | Partial[]>; toMarkdownExtensions: RealmNode; toMarkdownOptions: RealmNode; addToMarkdownExtension: RealmNode; addExportVisitor: RealmNode; exportVisitors: RealmNode; initialMarkdown: RealmNode; setMarkdown: RealmNode; markdown: RealmNode; markdownSignal: RealmNode; editorRootElementRef: RealmNode | null>; contentEditableClassName: RealmNode; placeholder: RealmNode; autoFocus: RealmNode; readOnly: RealmNode; composerChildren: RealmNode[]>; addComposerChild: RealmNode>; topAreaChildren: RealmNode[]>; addTopAreaChild: RealmNode>; nestedEditorChildren: RealmNode[]>; addNestedEditorChild: RealmNode>; editorWrappers: RealmNode[]>; addEditorWrapper: RealmNode>; currentFormat: RealmNode; editorInFocus: RealmNode; applyFormat: RealmNode; currentBlockType: RealmNode; applyBlockType: RealmNode; convertSelectionToNode: RealmNode<() => ElementNode>; insertDecoratorNode: RealmNode<() => DecoratorNode>; onBlur: RealmNode; iconComponentFor: RealmNode<(name: IconKey) => ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }>>(...keys: K_1) => ValuesForKeys<{ directiveDescriptors: RealmNode[]>; insertDirective: RealmNode; } & { activeEditor: RealmNode; inFocus: RealmNode; historyState: RealmNode; currentSelection: RealmNode; jsxIsAvailable: RealmNode; jsxComponentDescriptors: RealmNode; initialRootEditorState: RealmNode; rootEditor: RealmNode; createRootEditorSubscription: RealmNode; createActiveEditorSubscription: RealmNode; importVisitors: RealmNode[]>; syntaxExtensions: RealmNode; mdastExtensions: RealmNode<(Partial | Partial[])[] | null | undefined>; usedLexicalNodes: RealmNode[]>; addImportVisitor: RealmNode>; addLexicalNode: RealmNode>; addSyntaxExtension: RealmNode; addMdastExtension: RealmNode | Partial[]>; toMarkdownExtensions: RealmNode; toMarkdownOptions: RealmNode; addToMarkdownExtension: RealmNode; addExportVisitor: RealmNode; exportVisitors: RealmNode; initialMarkdown: RealmNode; setMarkdown: RealmNode; markdown: RealmNode; markdownSignal: RealmNode; editorRootElementRef: RealmNode | null>; contentEditableClassName: RealmNode; placeholder: RealmNode; autoFocus: RealmNode; readOnly: RealmNode; composerChildren: RealmNode[]>; addComposerChild: RealmNode>; topAreaChildren: RealmNode[]>; addTopAreaChild: RealmNode>; nestedEditorChildren: RealmNode[]>; addNestedEditorChild: RealmNode>; editorWrappers: RealmNode[]>; addEditorWrapper: RealmNode>; currentFormat: RealmNode; editorInFocus: RealmNode; applyFormat: RealmNode; currentBlockType: RealmNode; applyBlockType: RealmNode; convertSelectionToNode: RealmNode<() => ElementNode>; insertDecoratorNode: RealmNode<() => DecoratorNode>; onBlur: RealmNode; iconComponentFor: RealmNode<(name: IconKey) => ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }, K_1>; usePubKeys: () => (values: SystemDict<{ directiveDescriptors: RealmNode[]>; insertDirective: RealmNode; } & { activeEditor: RealmNode; inFocus: RealmNode; historyState: RealmNode; currentSelection: RealmNode; jsxIsAvailable: RealmNode; jsxComponentDescriptors: RealmNode; initialRootEditorState: RealmNode; rootEditor: RealmNode; createRootEditorSubscription: RealmNode; createActiveEditorSubscription: RealmNode; importVisitors: RealmNode[]>; syntaxExtensions: RealmNode; mdastExtensions: RealmNode<(Partial | Partial[])[] | null | undefined>; usedLexicalNodes: RealmNode[]>; addImportVisitor: RealmNode>; addLexicalNode: RealmNode>; addSyntaxExtension: RealmNode; addMdastExtension: RealmNode | Partial[]>; toMarkdownExtensions: RealmNode; toMarkdownOptions: RealmNode; addToMarkdownExtension: RealmNode; addExportVisitor: RealmNode; exportVisitors: RealmNode; initialMarkdown: RealmNode; setMarkdown: RealmNode; markdown: RealmNode; markdownSignal: RealmNode; editorRootElementRef: RealmNode | null>; contentEditableClassName: RealmNode; placeholder: RealmNode; autoFocus: RealmNode; readOnly: RealmNode; composerChildren: RealmNode[]>; addComposerChild: RealmNode>; topAreaChildren: RealmNode[]>; addTopAreaChild: RealmNode>; nestedEditorChildren: RealmNode[]>; addNestedEditorChild: RealmNode>; editorWrappers: RealmNode[]>; addEditorWrapper: RealmNode>; currentFormat: RealmNode; editorInFocus: RealmNode; applyFormat: RealmNode; currentBlockType: RealmNode; applyBlockType: RealmNode; convertSelectionToNode: RealmNode<() => ElementNode>; insertDecoratorNode: RealmNode<() => DecoratorNode>; onBlur: RealmNode; iconComponentFor: RealmNode<(name: IconKey) => ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }>) => void; usePublisher: (key: K_2) => (value: ValueForKey<{ directiveDescriptors: RealmNode[]>; insertDirective: RealmNode; } & { activeEditor: RealmNode; inFocus: RealmNode; historyState: RealmNode; currentSelection: RealmNode; jsxIsAvailable: RealmNode; jsxComponentDescriptors: RealmNode; initialRootEditorState: RealmNode; rootEditor: RealmNode; createRootEditorSubscription: RealmNode; createActiveEditorSubscription: RealmNode; importVisitors: RealmNode[]>; syntaxExtensions: RealmNode; mdastExtensions: RealmNode<(Partial | Partial[])[] | null | undefined>; usedLexicalNodes: RealmNode[]>; addImportVisitor: RealmNode>; addLexicalNode: RealmNode>; addSyntaxExtension: RealmNode; addMdastExtension: RealmNode | Partial[]>; toMarkdownExtensions: RealmNode; toMarkdownOptions: RealmNode; addToMarkdownExtension: RealmNode; addExportVisitor: RealmNode; exportVisitors: RealmNode; initialMarkdown: RealmNode; setMarkdown: RealmNode; markdown: RealmNode; markdownSignal: RealmNode; editorRootElementRef: RealmNode | null>; contentEditableClassName: RealmNode; placeholder: RealmNode; autoFocus: RealmNode; readOnly: RealmNode; composerChildren: RealmNode[]>; addComposerChild: RealmNode>; topAreaChildren: RealmNode[]>; addTopAreaChild: RealmNode>; nestedEditorChildren: RealmNode[]>; addNestedEditorChild: RealmNode>; editorWrappers: RealmNode[]>; addEditorWrapper: RealmNode>; currentFormat: RealmNode; editorInFocus: RealmNode; applyFormat: RealmNode; currentBlockType: RealmNode; applyBlockType: RealmNode; convertSelectionToNode: RealmNode<() => ElementNode>; insertDecoratorNode: RealmNode<() => DecoratorNode>; onBlur: RealmNode; iconComponentFor: RealmNode<(name: IconKey) => ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }, K_2>) => void; }; export {};