import type { IconKey } from '../core/Icon'; 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 { MdastImportVisitor, LexicalVisitor } from '../..'; import type { EditorSubscription, EditorInFocus, BlockType } from '../core'; import type { InitialEditorStateType } from '@lexical/react/LexicalComposer'; import type { HistoryState } from '@lexical/history'; import type { LexicalEditor, RangeSelection, Klass, LexicalNode, TextFormatType, ElementNode, DecoratorNode } from 'lexical'; import type { SystemSpec, Realm, RealmNode, PluginConstructor, TypedRealm, ValueForKey, SystemKeys, ValuesForKeys, SystemDict } from '../../gurx'; import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx'; import React from 'react'; import * as Mdast from 'mdast'; /** * @internal */ export type MdastJsx = MdxJsxTextElement | MdxJsxFlowElement; /** * Defines the structure of a JSX component property. */ export interface JsxPropertyDescriptor { /** * The name of the property */ name: string; /** * The type of the property */ type: 'string' | 'number'; /** * Wether the property is required */ required?: boolean; } /** * Defines the structure of a JSX component that can be used within the markdown document. */ export interface JsxComponentDescriptor { /** * The tag name */ name: string; /** * Wether the component is a flow or text component (inline or block) */ kind: 'flow' | 'text'; /** * The module path from which the component can be imported * Omit to skip injecting an import statement */ source?: string; /** * Wether the component is the default export of the module */ defaultExport?: boolean; /** * The properties that can be applied to the component */ props: JsxPropertyDescriptor[]; /** * Wether or not the component has children */ hasChildren?: boolean; /** * The editor to use for editing the component */ Editor: React.ComponentType; } /** * The properties passed to a JSX Editor component. */ export interface JsxEditorProps { /** The MDAST node to edit */ mdastNode: MdastJsx; descriptor: JsxComponentDescriptor; } type JsxTextPayload = { kind: 'text'; name: string; props: Record; children?: MdxJsxTextElement['children']; }; type JsxFlowPayload = { kind: 'flow'; name: string; props: Record; children?: MdxJsxFlowElement['children']; }; type InsertJsxPayload = JsxTextPayload | JsxFlowPayload; export declare function isMdastJsxNode(node: Mdast.Content | Mdast.Parent | Mdast.Root): node is MdastJsx; /** @internal */ export declare const jsxSystem: 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) => React.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) => React.ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }]) => { insertJsx: RealmNode; }>; /** * The parameters of the `jsxPlugin`. */ export interface JsxPluginParams { /** * A set of descriptors that document the JSX elements used in the document. */ jsxComponentDescriptors: JsxComponentDescriptor[]; } export declare const /** @internal */ jsxPlugin: 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) => React.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) => React.ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }]) => { insertJsx: RealmNode; }>, JsxPluginParams>, /** @internal */ jsxPluginHooks: { useRealmContext: () => TypedRealm<{ insertJsx: 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) => React.ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }>; useEmitter: (key: K, callback: (value: ValueForKey<{ insertJsx: 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) => React.ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }, K>) => void) => void; useEmitterValues: ; } & { 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) => React.ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }>>(...keys: K_1) => ValuesForKeys<{ insertJsx: 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) => React.ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }, K_1>; usePubKeys: () => (values: SystemDict<{ insertJsx: 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) => React.ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }>) => void; usePublisher: (key: K_2) => (value: ValueForKey<{ insertJsx: 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) => React.ReactNode>; markdownProcessingError: RealmNode<{ error: string; source: string; } | null>; markdownErrorSignal: RealmNode<{ error: string; source: string; }>; }, K_2>) => void; }; export {};