@mdxeditor/editor 0.10.1 → 0.11.1-alpha.1

package/dist/plugins/directives/index.d.ts

@@ -0,0 +1,602 @@
+import type { RefObject, ComponentType, ReactNode } 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';
+/// <reference types="react" />
+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<T extends Directive = Directive> {
+    /**
+     * 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<DirectiveEditorProps<T>>;
+}
+/**
+ * The properties passed to the {@link DirectiveDescriptor.Editor} component.
+ */
+export interface DirectiveEditorProps<T extends Directive = Directive> {
+    /**
+     * 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<LexicalEditor | null>;
+    inFocus: RealmNode<boolean>;
+    historyState: RealmNode<HistoryState>;
+    currentSelection: RealmNode<RangeSelection | null>;
+    jsxIsAvailable: RealmNode<boolean>;
+    jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+    initialRootEditorState: RealmNode<InitialEditorStateType>;
+    rootEditor: RealmNode<LexicalEditor | null>;
+    createRootEditorSubscription: RealmNode<EditorSubscription>;
+    createActiveEditorSubscription: RealmNode<EditorSubscription>;
+    importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+    syntaxExtensions: RealmNode<Extension[]>;
+    mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+    usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+    addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+    addLexicalNode: RealmNode<Klass<LexicalNode>>;
+    addSyntaxExtension: RealmNode<Extension>;
+    addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+    toMarkdownExtensions: RealmNode<Options[]>;
+    toMarkdownOptions: RealmNode<Options>;
+    addToMarkdownExtension: RealmNode<Options>;
+    addExportVisitor: RealmNode<LexicalVisitor>;
+    exportVisitors: RealmNode<LexicalVisitor[]>;
+    initialMarkdown: RealmNode<string>;
+    setMarkdown: RealmNode<string>;
+    markdown: RealmNode<string>;
+    editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
+    contentEditableClassName: RealmNode<string>;
+    composerChildren: RealmNode<ComponentType<{}>[]>;
+    addComposerChild: RealmNode<ComponentType<{}>>;
+    topAreaChildren: RealmNode<ComponentType<{}>[]>;
+    addTopAreaChild: RealmNode<ComponentType<{}>>;
+    nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+    addNestedEditorChild: RealmNode<ComponentType<{}>>;
+    editorWrappers: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>[]>;
+    addEditorWrapper: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>>;
+    currentFormat: RealmNode<number>;
+    editorInFocus: RealmNode<EditorInFocus | null>;
+    applyFormat: RealmNode<TextFormatType>;
+    currentBlockType: RealmNode<BlockType>;
+    applyBlockType: RealmNode<BlockType>;
+    convertSelectionToNode: RealmNode<() => ElementNode>;
+    insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+}>], (r: Realm, [{ insertDecoratorNode }]: [{
+    activeEditor: RealmNode<LexicalEditor | null>;
+    inFocus: RealmNode<boolean>;
+    historyState: RealmNode<HistoryState>;
+    currentSelection: RealmNode<RangeSelection | null>;
+    jsxIsAvailable: RealmNode<boolean>;
+    jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+    initialRootEditorState: RealmNode<InitialEditorStateType>;
+    rootEditor: RealmNode<LexicalEditor | null>;
+    createRootEditorSubscription: RealmNode<EditorSubscription>;
+    createActiveEditorSubscription: RealmNode<EditorSubscription>;
+    importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+    syntaxExtensions: RealmNode<Extension[]>;
+    mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+    usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+    addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+    addLexicalNode: RealmNode<Klass<LexicalNode>>;
+    addSyntaxExtension: RealmNode<Extension>;
+    addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+    toMarkdownExtensions: RealmNode<Options[]>;
+    toMarkdownOptions: RealmNode<Options>;
+    addToMarkdownExtension: RealmNode<Options>;
+    addExportVisitor: RealmNode<LexicalVisitor>;
+    exportVisitors: RealmNode<LexicalVisitor[]>;
+    initialMarkdown: RealmNode<string>;
+    setMarkdown: RealmNode<string>;
+    markdown: RealmNode<string>;
+    editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
+    contentEditableClassName: RealmNode<string>;
+    composerChildren: RealmNode<ComponentType<{}>[]>;
+    addComposerChild: RealmNode<ComponentType<{}>>;
+    topAreaChildren: RealmNode<ComponentType<{}>[]>;
+    addTopAreaChild: RealmNode<ComponentType<{}>>;
+    nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+    addNestedEditorChild: RealmNode<ComponentType<{}>>;
+    editorWrappers: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>[]>;
+    addEditorWrapper: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>>;
+    currentFormat: RealmNode<number>;
+    editorInFocus: RealmNode<EditorInFocus | null>;
+    applyFormat: RealmNode<TextFormatType>;
+    currentBlockType: RealmNode<BlockType>;
+    applyBlockType: RealmNode<BlockType>;
+    convertSelectionToNode: RealmNode<() => ElementNode>;
+    insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+}]) => {
+    directiveDescriptors: RealmNode<DirectiveDescriptor<any>[]>;
+    insertDirective: RealmNode<InsertDirectivePayload>;
+}>;
+/**
+ * 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<any>[];
+}
+/**
+ * The plugin that adds support for markdown directives.
+ */
+export declare const 
+/** @internal */
+directivesPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
+    activeEditor: RealmNode<LexicalEditor | null>;
+    inFocus: RealmNode<boolean>;
+    historyState: RealmNode<HistoryState>;
+    currentSelection: RealmNode<RangeSelection | null>;
+    jsxIsAvailable: RealmNode<boolean>;
+    jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+    initialRootEditorState: RealmNode<InitialEditorStateType>;
+    rootEditor: RealmNode<LexicalEditor | null>;
+    createRootEditorSubscription: RealmNode<EditorSubscription>;
+    createActiveEditorSubscription: RealmNode<EditorSubscription>;
+    importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+    syntaxExtensions: RealmNode<Extension[]>;
+    mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+    usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+    addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+    addLexicalNode: RealmNode<Klass<LexicalNode>>;
+    addSyntaxExtension: RealmNode<Extension>;
+    addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+    toMarkdownExtensions: RealmNode<Options[]>;
+    toMarkdownOptions: RealmNode<Options>;
+    addToMarkdownExtension: RealmNode<Options>;
+    addExportVisitor: RealmNode<LexicalVisitor>;
+    exportVisitors: RealmNode<LexicalVisitor[]>;
+    initialMarkdown: RealmNode<string>;
+    setMarkdown: RealmNode<string>;
+    markdown: RealmNode<string>;
+    editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
+    contentEditableClassName: RealmNode<string>;
+    composerChildren: RealmNode<ComponentType<{}>[]>;
+    addComposerChild: RealmNode<ComponentType<{}>>;
+    topAreaChildren: RealmNode<ComponentType<{}>[]>;
+    addTopAreaChild: RealmNode<ComponentType<{}>>;
+    nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+    addNestedEditorChild: RealmNode<ComponentType<{}>>;
+    editorWrappers: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>[]>;
+    addEditorWrapper: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>>;
+    currentFormat: RealmNode<number>;
+    editorInFocus: RealmNode<EditorInFocus | null>;
+    applyFormat: RealmNode<TextFormatType>;
+    currentBlockType: RealmNode<BlockType>;
+    applyBlockType: RealmNode<BlockType>;
+    convertSelectionToNode: RealmNode<() => ElementNode>;
+    insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+}>], (r: Realm, [{ insertDecoratorNode }]: [{
+    activeEditor: RealmNode<LexicalEditor | null>;
+    inFocus: RealmNode<boolean>;
+    historyState: RealmNode<HistoryState>;
+    currentSelection: RealmNode<RangeSelection | null>;
+    jsxIsAvailable: RealmNode<boolean>;
+    jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+    initialRootEditorState: RealmNode<InitialEditorStateType>;
+    rootEditor: RealmNode<LexicalEditor | null>;
+    createRootEditorSubscription: RealmNode<EditorSubscription>;
+    createActiveEditorSubscription: RealmNode<EditorSubscription>;
+    importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+    syntaxExtensions: RealmNode<Extension[]>;
+    mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+    usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+    addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+    addLexicalNode: RealmNode<Klass<LexicalNode>>;
+    addSyntaxExtension: RealmNode<Extension>;
+    addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+    toMarkdownExtensions: RealmNode<Options[]>;
+    toMarkdownOptions: RealmNode<Options>;
+    addToMarkdownExtension: RealmNode<Options>;
+    addExportVisitor: RealmNode<LexicalVisitor>;
+    exportVisitors: RealmNode<LexicalVisitor[]>;
+    initialMarkdown: RealmNode<string>;
+    setMarkdown: RealmNode<string>;
+    markdown: RealmNode<string>;
+    editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
+    contentEditableClassName: RealmNode<string>;
+    composerChildren: RealmNode<ComponentType<{}>[]>;
+    addComposerChild: RealmNode<ComponentType<{}>>;
+    topAreaChildren: RealmNode<ComponentType<{}>[]>;
+    addTopAreaChild: RealmNode<ComponentType<{}>>;
+    nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+    addNestedEditorChild: RealmNode<ComponentType<{}>>;
+    editorWrappers: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>[]>;
+    addEditorWrapper: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>>;
+    currentFormat: RealmNode<number>;
+    editorInFocus: RealmNode<EditorInFocus | null>;
+    applyFormat: RealmNode<TextFormatType>;
+    currentBlockType: RealmNode<BlockType>;
+    applyBlockType: RealmNode<BlockType>;
+    convertSelectionToNode: RealmNode<() => ElementNode>;
+    insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+}]) => {
+    directiveDescriptors: RealmNode<DirectiveDescriptor<any>[]>;
+    insertDirective: RealmNode<InsertDirectivePayload>;
+}>, DirectivesPluginParams>, 
+/** @internal */
+directivesPluginHooks: {
+    useRealmContext: () => TypedRealm<{
+        directiveDescriptors: RealmNode<DirectiveDescriptor<any>[]>;
+        insertDirective: RealmNode<InsertDirectivePayload>;
+    } & {
+        activeEditor: RealmNode<LexicalEditor | null>;
+        inFocus: RealmNode<boolean>;
+        historyState: RealmNode<HistoryState>;
+        currentSelection: RealmNode<RangeSelection | null>;
+        jsxIsAvailable: RealmNode<boolean>;
+        jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+        initialRootEditorState: RealmNode<InitialEditorStateType>;
+        rootEditor: RealmNode<LexicalEditor | null>;
+        createRootEditorSubscription: RealmNode<EditorSubscription>;
+        createActiveEditorSubscription: RealmNode<EditorSubscription>;
+        importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+        syntaxExtensions: RealmNode<Extension[]>;
+        mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+        usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+        addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+        addLexicalNode: RealmNode<Klass<LexicalNode>>;
+        addSyntaxExtension: RealmNode<Extension>;
+        addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+        toMarkdownExtensions: RealmNode<Options[]>;
+        toMarkdownOptions: RealmNode<Options>;
+        addToMarkdownExtension: RealmNode<Options>;
+        addExportVisitor: RealmNode<LexicalVisitor>;
+        exportVisitors: RealmNode<LexicalVisitor[]>;
+        initialMarkdown: RealmNode<string>;
+        setMarkdown: RealmNode<string>;
+        markdown: RealmNode<string>;
+        editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
+        contentEditableClassName: RealmNode<string>;
+        composerChildren: RealmNode<ComponentType<{}>[]>;
+        addComposerChild: RealmNode<ComponentType<{}>>;
+        topAreaChildren: RealmNode<ComponentType<{}>[]>;
+        addTopAreaChild: RealmNode<ComponentType<{}>>;
+        nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+        addNestedEditorChild: RealmNode<ComponentType<{}>>;
+        editorWrappers: RealmNode<ComponentType<{
+            children: ReactNode;
+        }>[]>;
+        addEditorWrapper: RealmNode<ComponentType<{
+            children: ReactNode;
+        }>>;
+        currentFormat: RealmNode<number>;
+        editorInFocus: RealmNode<EditorInFocus | null>;
+        applyFormat: RealmNode<TextFormatType>;
+        currentBlockType: RealmNode<BlockType>;
+        applyBlockType: RealmNode<BlockType>;
+        convertSelectionToNode: RealmNode<() => ElementNode>;
+        insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+    }>;
+    useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "directiveDescriptors" | "insertDirective">(key: K, callback: (value: ValueForKey<{
+        directiveDescriptors: RealmNode<DirectiveDescriptor<any>[]>;
+        insertDirective: RealmNode<InsertDirectivePayload>;
+    } & {
+        activeEditor: RealmNode<LexicalEditor | null>;
+        inFocus: RealmNode<boolean>;
+        historyState: RealmNode<HistoryState>;
+        currentSelection: RealmNode<RangeSelection | null>;
+        jsxIsAvailable: RealmNode<boolean>;
+        jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+        initialRootEditorState: RealmNode<InitialEditorStateType>;
+        rootEditor: RealmNode<LexicalEditor | null>;
+        createRootEditorSubscription: RealmNode<EditorSubscription>;
+        createActiveEditorSubscription: RealmNode<EditorSubscription>;
+        importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+        syntaxExtensions: RealmNode<Extension[]>;
+        mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+        usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+        addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+        addLexicalNode: RealmNode<Klass<LexicalNode>>;
+        addSyntaxExtension: RealmNode<Extension>;
+        addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+        toMarkdownExtensions: RealmNode<Options[]>;
+        toMarkdownOptions: RealmNode<Options>;
+        addToMarkdownExtension: RealmNode<Options>;
+        addExportVisitor: RealmNode<LexicalVisitor>;
+        exportVisitors: RealmNode<LexicalVisitor[]>;
+        initialMarkdown: RealmNode<string>;
+        setMarkdown: RealmNode<string>;
+        markdown: RealmNode<string>;
+        editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
+        contentEditableClassName: RealmNode<string>;
+        composerChildren: RealmNode<ComponentType<{}>[]>;
+        addComposerChild: RealmNode<ComponentType<{}>>;
+        topAreaChildren: RealmNode<ComponentType<{}>[]>;
+        addTopAreaChild: RealmNode<ComponentType<{}>>;
+        nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+        addNestedEditorChild: RealmNode<ComponentType<{}>>;
+        editorWrappers: RealmNode<ComponentType<{
+            children: ReactNode;
+        }>[]>;
+        addEditorWrapper: RealmNode<ComponentType<{
+            children: ReactNode;
+        }>>;
+        currentFormat: RealmNode<number>;
+        editorInFocus: RealmNode<EditorInFocus | null>;
+        applyFormat: RealmNode<TextFormatType>;
+        currentBlockType: RealmNode<BlockType>;
+        applyBlockType: RealmNode<BlockType>;
+        convertSelectionToNode: RealmNode<() => ElementNode>;
+        insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+    }, K>) => void) => void;
+    useEmitterValues: <K_1 extends SystemKeys<{
+        directiveDescriptors: RealmNode<DirectiveDescriptor<any>[]>;
+        insertDirective: RealmNode<InsertDirectivePayload>;
+    } & {
+        activeEditor: RealmNode<LexicalEditor | null>;
+        inFocus: RealmNode<boolean>;
+        historyState: RealmNode<HistoryState>;
+        currentSelection: RealmNode<RangeSelection | null>;
+        jsxIsAvailable: RealmNode<boolean>;
+        jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+        initialRootEditorState: RealmNode<InitialEditorStateType>;
+        rootEditor: RealmNode<LexicalEditor | null>;
+        createRootEditorSubscription: RealmNode<EditorSubscription>;
+        createActiveEditorSubscription: RealmNode<EditorSubscription>;
+        importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+        syntaxExtensions: RealmNode<Extension[]>;
+        mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+        usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+        addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+        addLexicalNode: RealmNode<Klass<LexicalNode>>;
+        addSyntaxExtension: RealmNode<Extension>;
+        addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+        toMarkdownExtensions: RealmNode<Options[]>;
+        toMarkdownOptions: RealmNode<Options>;
+        addToMarkdownExtension: RealmNode<Options>;
+        addExportVisitor: RealmNode<LexicalVisitor>;
+        exportVisitors: RealmNode<LexicalVisitor[]>;
+        initialMarkdown: RealmNode<string>;
+        setMarkdown: RealmNode<string>;
+        markdown: RealmNode<string>;
+        editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
+        contentEditableClassName: RealmNode<string>;
+        composerChildren: RealmNode<ComponentType<{}>[]>;
+        addComposerChild: RealmNode<ComponentType<{}>>;
+        topAreaChildren: RealmNode<ComponentType<{}>[]>;
+        addTopAreaChild: RealmNode<ComponentType<{}>>;
+        nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+        addNestedEditorChild: RealmNode<ComponentType<{}>>;
+        editorWrappers: RealmNode<ComponentType<{
+            children: ReactNode;
+        }>[]>;
+        addEditorWrapper: RealmNode<ComponentType<{
+            children: ReactNode;
+        }>>;
+        currentFormat: RealmNode<number>;
+        editorInFocus: RealmNode<EditorInFocus | null>;
+        applyFormat: RealmNode<TextFormatType>;
+        currentBlockType: RealmNode<BlockType>;
+        applyBlockType: RealmNode<BlockType>;
+        convertSelectionToNode: RealmNode<() => ElementNode>;
+        insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+    }>>(...keys: K_1) => ValuesForKeys<{
+        directiveDescriptors: RealmNode<DirectiveDescriptor<any>[]>;
+        insertDirective: RealmNode<InsertDirectivePayload>;
+    } & {
+        activeEditor: RealmNode<LexicalEditor | null>;
+        inFocus: RealmNode<boolean>;
+        historyState: RealmNode<HistoryState>;
+        currentSelection: RealmNode<RangeSelection | null>;
+        jsxIsAvailable: RealmNode<boolean>;
+        jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+        initialRootEditorState: RealmNode<InitialEditorStateType>;
+        rootEditor: RealmNode<LexicalEditor | null>;
+        createRootEditorSubscription: RealmNode<EditorSubscription>;
+        createActiveEditorSubscription: RealmNode<EditorSubscription>;
+        importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+        syntaxExtensions: RealmNode<Extension[]>;
+        mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+        usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+        addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+        addLexicalNode: RealmNode<Klass<LexicalNode>>;
+        addSyntaxExtension: RealmNode<Extension>;
+        addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+        toMarkdownExtensions: RealmNode<Options[]>;
+        toMarkdownOptions: RealmNode<Options>;
+        addToMarkdownExtension: RealmNode<Options>;
+        addExportVisitor: RealmNode<LexicalVisitor>;
+        exportVisitors: RealmNode<LexicalVisitor[]>;
+        initialMarkdown: RealmNode<string>;
+        setMarkdown: RealmNode<string>;
+        markdown: RealmNode<string>;
+        editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
+        contentEditableClassName: RealmNode<string>;
+        composerChildren: RealmNode<ComponentType<{}>[]>;
+        addComposerChild: RealmNode<ComponentType<{}>>;
+        topAreaChildren: RealmNode<ComponentType<{}>[]>;
+        addTopAreaChild: RealmNode<ComponentType<{}>>;
+        nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+        addNestedEditorChild: RealmNode<ComponentType<{}>>;
+        editorWrappers: RealmNode<ComponentType<{
+            children: ReactNode;
+        }>[]>;
+        addEditorWrapper: RealmNode<ComponentType<{
+            children: ReactNode;
+        }>>;
+        currentFormat: RealmNode<number>;
+        editorInFocus: RealmNode<EditorInFocus | null>;
+        applyFormat: RealmNode<TextFormatType>;
+        currentBlockType: RealmNode<BlockType>;
+        applyBlockType: RealmNode<BlockType>;
+        convertSelectionToNode: RealmNode<() => ElementNode>;
+        insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+    }, K_1>;
+    usePubKeys: () => (values: SystemDict<{
+        directiveDescriptors: RealmNode<DirectiveDescriptor<any>[]>;
+        insertDirective: RealmNode<InsertDirectivePayload>;
+    } & {
+        activeEditor: RealmNode<LexicalEditor | null>;
+        inFocus: RealmNode<boolean>;
+        historyState: RealmNode<HistoryState>;
+        currentSelection: RealmNode<RangeSelection | null>;
+        jsxIsAvailable: RealmNode<boolean>;
+        jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+        initialRootEditorState: RealmNode<InitialEditorStateType>;
+        rootEditor: RealmNode<LexicalEditor | null>;
+        createRootEditorSubscription: RealmNode<EditorSubscription>;
+        createActiveEditorSubscription: RealmNode<EditorSubscription>;
+        importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+        syntaxExtensions: RealmNode<Extension[]>;
+        mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+        usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+        addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+        addLexicalNode: RealmNode<Klass<LexicalNode>>;
+        addSyntaxExtension: RealmNode<Extension>;
+        addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+        toMarkdownExtensions: RealmNode<Options[]>;
+        toMarkdownOptions: RealmNode<Options>;
+        addToMarkdownExtension: RealmNode<Options>;
+        addExportVisitor: RealmNode<LexicalVisitor>;
+        exportVisitors: RealmNode<LexicalVisitor[]>;
+        initialMarkdown: RealmNode<string>;
+        setMarkdown: RealmNode<string>;
+        markdown: RealmNode<string>;
+        editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
+        contentEditableClassName: RealmNode<string>;
+        composerChildren: RealmNode<ComponentType<{}>[]>;
+        addComposerChild: RealmNode<ComponentType<{}>>;
+        topAreaChildren: RealmNode<ComponentType<{}>[]>;
+        addTopAreaChild: RealmNode<ComponentType<{}>>;
+        nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+        addNestedEditorChild: RealmNode<ComponentType<{}>>;
+        editorWrappers: RealmNode<ComponentType<{
+            children: ReactNode;
+        }>[]>;
+        addEditorWrapper: RealmNode<ComponentType<{
+            children: ReactNode;
+        }>>;
+        currentFormat: RealmNode<number>;
+        editorInFocus: RealmNode<EditorInFocus | null>;
+        applyFormat: RealmNode<TextFormatType>;
+        currentBlockType: RealmNode<BlockType>;
+        applyBlockType: RealmNode<BlockType>;
+        convertSelectionToNode: RealmNode<() => ElementNode>;
+        insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+    }>) => void;
+    usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "directiveDescriptors" | "insertDirective">(key: K_2) => (value: ValueForKey<{
+        directiveDescriptors: RealmNode<DirectiveDescriptor<any>[]>;
+        insertDirective: RealmNode<InsertDirectivePayload>;
+    } & {
+        activeEditor: RealmNode<LexicalEditor | null>;
+        inFocus: RealmNode<boolean>;
+        historyState: RealmNode<HistoryState>;
+        currentSelection: RealmNode<RangeSelection | null>;
+        jsxIsAvailable: RealmNode<boolean>;
+        jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+        initialRootEditorState: RealmNode<InitialEditorStateType>;
+        rootEditor: RealmNode<LexicalEditor | null>;
+        createRootEditorSubscription: RealmNode<EditorSubscription>;
+        createActiveEditorSubscription: RealmNode<EditorSubscription>;
+        importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+        syntaxExtensions: RealmNode<Extension[]>;
+        mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+        usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+        addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+        addLexicalNode: RealmNode<Klass<LexicalNode>>;
+        addSyntaxExtension: RealmNode<Extension>;
+        addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+        toMarkdownExtensions: RealmNode<Options[]>;
+        toMarkdownOptions: RealmNode<Options>;
+        addToMarkdownExtension: RealmNode<Options>;
+        addExportVisitor: RealmNode<LexicalVisitor>;
+        exportVisitors: RealmNode<LexicalVisitor[]>;
+        initialMarkdown: RealmNode<string>;
+        setMarkdown: RealmNode<string>;
+        markdown: RealmNode<string>;
+        editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
+        contentEditableClassName: RealmNode<string>;
+        composerChildren: RealmNode<ComponentType<{}>[]>;
+        addComposerChild: RealmNode<ComponentType<{}>>;
+        topAreaChildren: RealmNode<ComponentType<{}>[]>;
+        addTopAreaChild: RealmNode<ComponentType<{}>>;
+        nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+        addNestedEditorChild: RealmNode<ComponentType<{}>>;
+        editorWrappers: RealmNode<ComponentType<{
+            children: ReactNode;
+        }>[]>;
+        addEditorWrapper: RealmNode<ComponentType<{
+            children: ReactNode;
+        }>>;
+        currentFormat: RealmNode<number>;
+        editorInFocus: RealmNode<EditorInFocus | null>;
+        applyFormat: RealmNode<TextFormatType>;
+        currentBlockType: RealmNode<BlockType>;
+        applyBlockType: RealmNode<BlockType>;
+        convertSelectionToNode: RealmNode<() => ElementNode>;
+        insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+    }, K_2>) => void;
+};
+export {};

package/dist/plugins/directives/index.js

@@ -0,0 +1,53 @@
+import { coreSystem } from "../core/index.js";
+import { directive } from "micromark-extension-directive";
+import { directiveFromMarkdown, directiveToMarkdown } from "mdast-util-directive";
+import { $createDirectiveNode, DirectiveNode } from "./DirectiveNode.js";
+import { DirectiveVisitor } from "./DirectiveVisitor.js";
+import { MdastDirectiveVisitor } from "./MdastDirectiveVisitor.js";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const directivesSystem = system(
+  (r, [{ insertDecoratorNode }]) => {
+    const directiveDescriptors = r.node([]);
+    const insertDirective = r.node();
+    r.link(
+      r.pipe(
+        insertDirective,
+        r.o.map((payload) => {
+          return () => $createDirectiveNode({ children: [], ...payload });
+        })
+      ),
+      insertDecoratorNode
+    );
+    return {
+      directiveDescriptors,
+      insertDirective
+    };
+  },
+  [coreSystem]
+);
+const [
+  /** @internal */
+  directivesPlugin,
+  /** @internal */
+  directivesPluginHooks
+] = realmPlugin({
+  id: "directives",
+  systemSpec: directivesSystem,
+  applyParamsToSystem: (realm, params) => {
+    realm.pubKey("directiveDescriptors", (params == null ? void 0 : params.directiveDescriptors) || []);
+  },
+  init: (realm, _) => {
+    realm.pubKey("addMdastExtension", directiveFromMarkdown);
+    realm.pubKey("addSyntaxExtension", directive());
+    realm.pubKey("addImportVisitor", MdastDirectiveVisitor);
+    realm.pubKey("addLexicalNode", DirectiveNode);
+    realm.pubKey("addExportVisitor", DirectiveVisitor);
+    realm.pubKey("addToMarkdownExtension", directiveToMarkdown);
+  }
+});
+export {
+  directivesPlugin,
+  directivesPluginHooks,
+  directivesSystem
+};

package/dist/plugins/frontmatter/FrontmatterEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface FrontmatterEditorProps {
+    yaml: string;
+    onChange: (yaml: string) => void;
+}
+export declare const FrontmatterEditor: ({ yaml, onChange }: FrontmatterEditorProps) => React.JSX.Element;