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