@mdxeditor/editor 0.10.0-alpha.2 → 0.10.0-alpha.3

package/dist/MDXEditor.d.ts

@@ -1,12 +1,38 @@
 import React from 'react';
 import { RealmPluginInitializer } from './gurx';
 import { ToMarkdownOptions } from './exportMarkdownFromLexical';
+/**
+ * The properties of the {@link MDXEditor} React component.
+ */
 export interface MDXEditorProps {
+    /**
+     * the CSS class to apply to the content editable element of the editor.
+     * Use this to style the various content elements like lists and blockquotes.
+     */
     contentEditableClassName?: string;
+    /**
+     * The markdown to edit. Notice that this is read only when the component is mounted.
+     * To change the component content dynamically, use the `MDXEditorMethods.setMarkdown` method.
+     */
     markdown: string;
+    /**
+     * Triggered when the editor value changes. The callback is not throttled, you can use any throttling mechanism
+     * if you intend to do auto-saving.
+     */
     onChange?: (markdown: string) => void;
+    /**
+     * The markdown options used to generate the resulting markdown.
+     * See {@link https://github.com/syntax-tree/mdast-util-to-markdown#options | the mdast-util-to-markdown docs} for the full list of options.
+     */
     toMarkdownOptions?: ToMarkdownOptions;
+    /**
+     * The plugins to use in the editor.
+     */
     plugins?: React.ComponentProps<typeof RealmPluginInitializer>['plugins'];
+    /**
+     * The class name to apply to the root component element. Use this if you want to change the editor dimensions, maximum height, etc.
+     * For a content-specific styling, Use `contentEditableClassName` property.
+     */
     className?: string;
 }
 /**
@@ -28,4 +54,7 @@ export interface MDXEditorMethods {
      */
     setMarkdown: (value: string) => void;
 }
+/**
+ * The MDXEditor React component. See {@link MDXEditorProps} for the list of properties supported and the {@link MDXEditorMethods} for the methods accessible through the ref.
+ */
 export declare const MDXEditor: React.ForwardRefExoticComponent<MDXEditorProps & React.RefAttributes<MDXEditorMethods>>;

package/dist/directive-editors/AdmonitionDirectiveDescriptor.d.ts

@@ -1,4 +1,17 @@
 import { DirectiveDescriptor } from '../plugins/directives';
+/** @internal */
 export declare const ADMONITION_TYPES: readonly ["note", "tip", "danger", "info", "caution"];
+/** @internal */
 export type AdmonitionKind = (typeof ADMONITION_TYPES)[number];
+/**
+ * Pass this descriptor to the `directivesPlugin` `directiveDescriptors` parameter to enable {@link https://docusaurus.io/docs/markdown-features/admonitions | markdown admonitions}.
+ *
+ * @example
+ * ```tsx
+ * <MDXEditor
+ *  plugins={[
+ *   directivesPlugin({ directiveDescriptors: [ AdmonitionDirectiveDescriptor] }),
+ *  ]} />
+ * ```
+ */
 export declare const AdmonitionDirectiveDescriptor: DirectiveDescriptor;

package/dist/directive-editors/GenericDirectiveEditor.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
 import { DirectiveEditorProps } from '../plugins/directives';
+/**
+ * A generic editor that can be used as an universal UI for any directive.
+ * Allows editing of the directive content and properties.
+ * Use this editor for the {@link DirectiveDescriptor} Editor option.
+ */
 export declare const GenericDirectiveEditor: React.FC<DirectiveEditorProps>;

package/dist/index.d.ts

@@ -47,3 +47,5 @@ export * from './plugins/toolbar/primitives/toolbar';
 export * from './plugins/toolbar/primitives/DialogButton';
 export * from './plugins/toolbar/primitives/TooltipWrap';
 export * from './plugins/toolbar/primitives/select';
+export * from './plugins/core/NestedLexicalEditor';
+export * from './plugins/core/PropertyPopover';

package/dist/index.js

@@ -42,6 +42,8 @@ import { Button, ButtonOrDropdownButton, ButtonWithTooltip, ConditionalContents,
 import { DialogButton } from "./plugins/toolbar/primitives/DialogButton.js";
 import { TooltipWrap } from "./plugins/toolbar/primitives/TooltipWrap.js";
 import { Select, SelectButtonTrigger, SelectContent, SelectItem, SelectTrigger } from "./plugins/toolbar/primitives/select.js";
+import { NestedEditorsContext, NestedLexicalEditor, useLexicalNodeRemove, useMdastNodeUpdater, useNestedEditorContext } from "./plugins/core/NestedLexicalEditor.js";
+import { PropertyPopover } from "./plugins/core/PropertyPopover.js";
 import { useCodeBlockEditorContext } from "./plugins/codeblock/CodeBlockNode.js";
 export {
   ADMONITION_TYPES,
@@ -72,6 +74,9 @@ export {
   ListsToggle,
   MDXEditor,
   MultipleChoiceToggleGroup,
+  NestedEditorsContext,
+  NestedLexicalEditor,
+  PropertyPopover,
   Root,
   Select,
   SelectButtonTrigger,
@@ -131,5 +136,8 @@ export {
   toolbarPlugin,
   toolbarPluginHooks,
   toolbarSystem,
-  useCodeBlockEditorContext
+  useCodeBlockEditorContext,
+  useLexicalNodeRemove,
+  useMdastNodeUpdater,
+  useNestedEditorContext
 };

package/dist/jsx-editors/GenericJsxEditor.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
 import { JsxEditorProps } from '../plugins/jsx';
+/**
+ * A generic editor that can be used as an universal UI for any JSX element.
+ * Allows editing of the element content and properties.
+ * Use this editor for the {@link JsxComponentDescriptor} Editor option.
+ */
 export declare const GenericJsxEditor: React.FC<JsxEditorProps>;

package/dist/plugins/core/NestedLexicalEditor.d.ts

@@ -13,7 +13,14 @@ interface NestedEditorsContextValue<T extends Node> {
     };
     focusEmitter: VoidEmitter;
 }
+/**
+ * Use this context to provide the necessary values to the {@link NestedLexicalEditor} React component.
+ * Place it as a wrapper in your custom lexical node decorators.
+ */
 export declare const NestedEditorsContext: React.Context<NestedEditorsContextValue<Node<import("unist").Data>> | undefined>;
+/**
+ * A hook to get the current {@link NestedEditorsContext} value. Use this in your custom editor components.
+ */
 export declare const useNestedEditorContext: <T extends Mdast.Content>() => NestedEditorsContextValue<T>;
 /**
  * A hook that returns a function that can be used to update the mdast node. Use this in your custom editor components.
@@ -24,7 +31,7 @@ export declare function useMdastNodeUpdater<T extends Mdast.Content>(): (node: P
  */
 export declare function useLexicalNodeRemove(): () => void;
 /**
- * The properties of the {@link NestedEditor} React Component.
+ * The properties of the {@link NestedLexicalEditor} React component.
  * @typeParam T - The type of the mdast node of the editor.
  */
 export interface NestedEditorProps<T extends Mdast.Content> {
@@ -62,7 +69,7 @@ export interface NestedEditorProps<T extends Mdast.Content> {
  *   children: Mdast.PhrasingContent[]
  * }
  *
- * return <NestedEditor<CalloutDirectiveNode> getContent={node => node.children} getUpdatedMdastNode={(node, children) => ({ ...node, children })} />
+ * return <NestedLexicalEditor<CalloutDirectiveNode> getContent={node => node.children} getUpdatedMdastNode={(node, children) => ({ ...node, children })} />
  * ```
  */
 export declare const NestedLexicalEditor: <T extends Mdast.Content>(props: NestedEditorProps<T>) => React.JSX.Element;

package/dist/plugins/core/PropertyPopover.d.ts

@@ -1,8 +1,23 @@
 import React from 'react';
-interface PropertyPopoverProps {
+/**
+ * The properties of the {@link PropertyPopover} React component.
+ */
+export interface PropertyPopoverProps {
+    /**
+     * The properties to edit. The key is the name of the property, and the value is the initial value.
+     */
     properties: Record<string, string>;
+    /**
+     * Triggered when the user edits the property values.
+     */
     onChange: (values: Record<string, string>) => void;
+    /**
+     * The title to display in the popover.
+     */
     title: string;
 }
+/**
+ * A React component that can be used in custom editors to edit the properties of the node.
+ * Displays a simple, static key/value editing UI in a popover.
+ */
 export declare const PropertyPopover: React.FC<PropertyPopoverProps>;
-export {};

package/dist/plugins/diff-source/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/** @internal */
 export type ViewMode = 'rich-text' | 'source' | 'diff';
 /** @internal */
 export declare const diffSourceSystem: import("../../gurx").SystemSpec<[import("../../gurx").SystemSpec<[], (r: import("../../gurx").Realm) => {

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

@@ -530,7 +530,11 @@ imagePluginHooks: {
         insertDecoratorNode: import("../../gurx").RealmNode<() => import("lexical").DecoratorNode<unknown>>;
     }, K_2>) => void;
 };
+/** @internal */
 export type InsertImagePayload = Readonly<CreateImageNodeOptions>;
+/**
+ * @internal
+ */
 export declare const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload>;
 declare global {
     interface DragEvent {

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

@@ -1,5 +1,8 @@
 import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
 import React from 'react';
+/**
+ * @internal
+ */
 export type MdastJsx = MdxJsxTextElement | MdxJsxFlowElement;
 /**
  * Defines the structure of a JSX component property.
@@ -109,7 +112,13 @@ export declare const jsxSystem: import("../../gurx").SystemSpec<[import("../../g
     convertSelectionToNode: import("../../gurx").RealmNode<() => import("lexical").ElementNode>;
     insertDecoratorNode: import("../../gurx").RealmNode<() => import("lexical").DecoratorNode<unknown>>;
 }>], (_: import("../../gurx").Realm) => {}>;
+/**
+ * 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 

package/dist/plugins/lists/LexicalListVisitor.js

@@ -4,7 +4,6 @@ const LexicalListVisitor = {
   visitLexicalNode: ({ lexicalNode, actions }) => {
     actions.addAndStepInto("list", {
       ordered: lexicalNode.getListType() === "number",
-      //TODO: figure out when spread can be true
       spread: false
     });
   }

package/dist/plugins/toolbar/components/BlockTypeSelect.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar component that allows the user to change the block type of the current selection.
+ * Supports paragraphs, headings and block quotes.
+ */
 export declare const BlockTypeSelect: () => React.JSX.Element | null;

package/dist/plugins/toolbar/components/BoldItalicUnderlineToggles.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
+/**
+ * A toolbar component that lets the user toggle bold, italic and underline formatting.
+ */
 export declare const BoldItalicUnderlineToggles: React.FC;

package/dist/plugins/toolbar/components/ChangeAdmonitionType.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A component that allows the user to change the admonition type of the current selection.
+ * For this component to work, you must pass the {@link AdmonitionDirectiveDescriptor} to the `directivesPlugin` `directiveDescriptors` parameter.
+ */
 export declare const ChangeAdmonitionType: () => React.JSX.Element;

package/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
+/**
+ * A component that allows the user to change the code block language of the current selection.
+ * For this component to work, you must enable the `codeMirrorPlugin` for the editor.
+ * See {@link ConditionalContents} for an example on how to display the dropdown only when a code block is in focus.
+ */
 export declare const ChangeCodeMirrorLanguage: () => React.JSX.Element;

package/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.js

@@ -21,8 +21,8 @@ const ChangeCodeMirrorLanguage = () => {
           });
         });
       },
-      triggerTitle: "Select admonition type",
-      placeholder: "Admonition type",
+      triggerTitle: "Select code block language",
+      placeholder: "Code block language",
       items: Object.entries(codeBlockLanguages).map(([value, label]) => ({ value, label }))
     }
   ));

package/dist/plugins/toolbar/components/CodeToggle.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar component that lets the user toggle code formatting.
+ * Use for inline `code` elements (like variables, methods, etc).
+ */
 export declare const CodeToggle: React.FC;

package/dist/plugins/toolbar/components/CreateLink.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar component that opens the link edit dialog.
+ * For this component to work, you must include the `linkDialogPlugin`.
+ */
 export declare const CreateLink: () => React.JSX.Element;

package/dist/plugins/toolbar/components/DiffSourceToggleWrapper.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
+/**
+ * A wrapper element for the toolbar contents that lets the user toggle between rich text, diff and source mode.
+ * Put the rich text toolbar contents as children of this component.
+ * For this component to work, you must include the `diffSourcePlugin`.
+ */
 export declare const DiffSourceToggleWrapper: React.FC<{
     children: React.ReactNode;
 }>;

package/dist/plugins/toolbar/components/InsertAdmonition.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar dropdown button that allows the user to insert admonitions.
+ * For this to work, you need to have the `directives` plugin enabled with the {@link AdmonitionDirectiveDescriptor} configured.
+ */
 export declare const InsertAdmonition: () => React.JSX.Element;

package/dist/plugins/toolbar/components/InsertCodeBlock.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
+/**
+ * A toolbar button that allows the user to insert a fenced code block.
+ * Once the code block is focused, you can construct a special code block toolbar for it, using the {@link ConditionalContents} primitive.
+ * See the {@link ConditionalContents} documentation for an example.
+ */
 export declare const InsertCodeBlock: React.FC;

package/dist/plugins/toolbar/components/InsertFrontmatter.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar button that allows the user to insert a {@link https://jekyllrb.com/docs/front-matter/ | front-matter} editor (if one is not already present).
+ * For this to work, you need to have the `frontmatterPlugin` plugin enabled.
+ */
 export declare const InsertFrontmatter: React.FC;

package/dist/plugins/toolbar/components/InsertImage.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar button that allows the user to insert an image from an URL.
+ * For the button to work, you need to have the `imagePlugin` plugin enabled.
+ */
 export declare const InsertImage: React.ForwardRefExoticComponent<Omit<Record<string, never>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/plugins/toolbar/components/InsertSandpack.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A dropdown button that allows the user to insert a live code block into the editor. The dropdown offers a list of presets that are defined in the sandpack plugin config.
+ * For this to work, you need to have the `sandpackPlugin` installed.
+ */
 export declare const InsertSandpack: () => React.JSX.Element;

package/dist/plugins/toolbar/components/InsertTable.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar button that allows the user to insert a table.
+ * For this button to work, you need to have the `tablePlugin` plugin enabled.
+ */
 export declare const InsertTable: React.FC;

package/dist/plugins/toolbar/components/InsertThematicBreak.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * A toolbar button that allows the user to insert a thematic break (rendered as an HR HTML element).
+ * For this button to work, you need to have the `thematicBreakPlugin` plugin enabled.
+ */
 export declare const InsertThematicBreak: React.FC;

package/dist/plugins/toolbar/components/KitchenSinkToolbar.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
+/**
+ * A toolbar component that includes all toolbar components.
+ * Notice that some of the buttons will work only if you have the corresponding plugin enabled, so you should use it only for testing purposes.
+ * You'll probably want to create your own toolbar component that includes only the buttons that you need.
+ */
 export declare const KitchenSinkToolbar: React.FC;

package/dist/plugins/toolbar/components/ListsToggle.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
+/**
+ * A toolbar toggle that allows the user to toggle between bulleted and numbered lists.
+ * Pressing the selected button will convert the current list to the other type. Pressing it again will remove the list.
+ * For this button to work, you need to have the `listsPlugin` plugin enabled.
+ */
 export declare const ListsToggle: React.FC;

package/dist/plugins/toolbar/components/ShowSandpackInfo.d.ts

@@ -1,2 +1,7 @@
 import React from 'react';
+/**
+ * A component that displays the focused live code block's name.
+ * For this component to work, you must enable the `sandpackPlugin` for the editor.
+ * See {@link ConditionalContents} for an example on how to display the dropdown only when a sandpack editor is in focus.
+ */
 export declare const ShowSandpackInfo: () => React.JSX.Element;

package/dist/plugins/toolbar/components/UndoRedo.d.ts

@@ -1,2 +1,5 @@
 import React from 'react';
+/**
+ * A toolbar component that lets the user undo and redo changes in the editor.
+ */
 export declare const UndoRedo: React.FC;

package/dist/plugins/toolbar/primitives/TooltipWrap.d.ts

@@ -1,4 +1,7 @@
 import React, { ReactNode } from 'react';
+/**
+ * A small styled wrapper around the radix-ui tooltip, that lets you display an instan tooltip on hover.
+ */
 export declare const TooltipWrap: React.ForwardRefExoticComponent<{
     title: string;
     children: ReactNode;

package/dist/plugins/toolbar/primitives/select.d.ts

@@ -1,23 +1,38 @@
 import React from 'react';
+/**
+ * @internal
+ */
 export declare const SelectItem: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     children: React.ReactNode;
     value: string;
 } & React.RefAttributes<HTMLDivElement | null>>;
+/**
+ * @internal
+ */
 export declare const SelectTrigger: React.FC<{
     title: string;
     placeholder: string;
     className?: string;
 }>;
+/**
+ * @internal
+ */
 export declare const SelectContent: React.FC<{
     children: React.ReactNode;
     className?: string;
 }>;
+/**
+ * @internal
+ */
 export declare const SelectButtonTrigger: React.FC<{
     children: React.ReactNode;
     title: string;
     className?: string;
 }>;
+/**
+ * The properties of the {@link Select} React component.
+ */
 export interface SelectProps<T extends string> {
     value: T;
     onChange: (value: T) => void;
@@ -28,4 +43,8 @@ export interface SelectProps<T extends string> {
         value: T;
     } | 'separator')[];
 }
+/**
+ * A toolbar primitive you can use to build dropdowns, such as the block type select.
+ * See {@link SelectProps} for more details.
+ */
 export declare const Select: <T extends string>(props: SelectProps<T>) => React.JSX.Element;

package/dist/plugins/toolbar/primitives/toolbar.d.ts

@@ -1,18 +1,39 @@
 import * as RadixToolbar from '@radix-ui/react-toolbar';
 import React from 'react';
 import { EditorInFocus } from '../../core';
+/**
+ * @internal
+ */
 export declare const Root: (props: RadixToolbar.ToolbarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element;
+/**
+ * A toolbar button primitive.
+ */
 export declare const Button: React.ForwardRefExoticComponent<Omit<RadixToolbar.ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<object>>;
+/**
+ * A toolbar button with a custom toolbar primitive.
+ */
 export declare const ButtonWithTooltip: ({ title, children, ...props }: Omit<RadixToolbar.ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<object> & {
     title: string;
 }) => React.JSX.Element;
+/**
+ * @internal
+ */
 export declare const ToolbarToggleItem: React.ForwardRefExoticComponent<Omit<RadixToolbar.ToolbarToggleItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<object>>;
+/**
+ * @internal
+ */
 export declare const SingleToggleGroup: React.ForwardRefExoticComponent<(Omit<RadixToolbar.ToolbarToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<RadixToolbar.ToolbarToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<object>>;
+/**
+ * @internal
+ */
 export declare const ToggleSingleGroupWithItem: React.ForwardRefExoticComponent<Omit<RadixToolbar.ToolbarToggleGroupSingleProps, "type"> & {
     on: boolean;
     title: string;
     disabled?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A toolbar primitive that allows you to build an UI with multiple non-exclusive toggle groups, like the bold/italic/underline toggle.
+ */
 export declare const MultipleChoiceToggleGroup: React.FC<{
     items: {
         title: string;
@@ -22,7 +43,10 @@ export declare const MultipleChoiceToggleGroup: React.FC<{
         disabled?: boolean;
     }[];
 }>;
-interface SingleChoiceToggleGroupProps<T extends string> {
+/**
+ * The properties of the {@link SingleChoiceToggleGroup} React component.
+ */
+export interface SingleChoiceToggleGroupProps<T extends string> {
     items: {
         title: string;
         value: T;
@@ -32,6 +56,9 @@ interface SingleChoiceToggleGroupProps<T extends string> {
     value: T;
     className?: string;
 }
+/**
+ * A toolbar primitive that allows you to build an UI with multiple exclusive toggle groups, like the list type toggle.
+ */
 export declare const SingleChoiceToggleGroup: <T extends string>({ value, onChange, className, items }: SingleChoiceToggleGroupProps<T>) => React.JSX.Element;
 /**
  * The properties of the {@link ButtonOrDropdownButton} React component.
@@ -70,16 +97,64 @@ export interface ButtonOrDropdownButtonProps<T extends string> {
  * @see {@link ButtonOrDropdownButtonProps} for the properties of the React component.
  */
 export declare const ButtonOrDropdownButton: <T extends string>(props: ButtonOrDropdownButtonProps<T>) => React.JSX.Element;
-type ConditionalContentsOption = {
+/**
+ * An object that describes a possible option to be displayed in the {@link ConditionalContents} component.
+ */
+export type ConditionalContentsOption = {
+    /**
+     * A function that returns `true` if the option should be displayed for the current editor in focus.
+     */
     when: (rootNode: EditorInFocus | null) => boolean;
+    /**
+     * The contents to display if the `when` function returns `true`.
+     */
     contents: () => React.ReactNode;
 };
-type FallBackOption = {
+/**
+ * A default option to be displayed in the {@link ConditionalContents} component if none of the other options match.
+ */
+export type FallBackOption = {
+    /**
+     * The contents to display
+     */
     fallback: () => React.ReactNode;
 };
-interface ConditionalContentsProps {
+/**
+ * The properties of the {@link ConditionalContents} React component.
+ */
+export interface ConditionalContentsProps {
+    /**
+     * A set of options that define the contents to show based on the editor that is in focus.
+     * Can be either a {@link ConditionalContentsOption} or a {@link FallBackOption}.
+     * See the {@link ConditionalContents} documentation for an example.
+     */
     options: (ConditionalContentsOption | FallBackOption)[];
 }
+/**
+ * A toolbar primitive that allows you to show different contents based on the editor that is in focus.
+ * Useful for code editors that have different features and don't support rich text formatting.
+ * @example
+ * ```tsx
+ *    <ConditionalContents
+ *      options={[
+ *        { when: (editor) => editor?.editorType === 'codeblock', contents: () => <ChangeCodeMirrorLanguage /> },
+ *        { when: (editor) => editor?.editorType === 'sandpack', contents: () => <ShowSandpackInfo /> },
+ *        {
+ *          fallback: () => (
+ *            <>
+ *              <UndoRedo />
+ *              <BoldItalicUnderlineToggles />
+ *              <InsertCodeBlock />
+ *            </>
+ *          )
+ *        }
+ *      ]}
+ *    />
+ * ```
+ */
 export declare const ConditionalContents: React.FC<ConditionalContentsProps>;
+/**
+ * A toolbar primitive that allows you to show a separator between toolbar items.
+ * By default, the separator is styled as vertical line.
+ */
 export declare const Separator: React.ForwardRefExoticComponent<RadixToolbar.ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/package.json

@@ -9,7 +9,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.10.0-alpha.2",
+  "version": "0.10.0-alpha.3",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -171,6 +171,8 @@
       }
     ]
   },
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     "./style.css": "./dist/style.css",
@@ -190,6 +192,14 @@
       "import": "./dist/jsx-editors/GenericJsxEditor.js",
       "types": "./dist/jsx-editors/GenericJsxEditor.d.ts"
     },
+    "./plugins/core/PropertyPopover": {
+      "import": "./dist/plugins/core/PropertyPopover.js",
+      "types": "./dist/plugins/core/PropertyPopover.d.ts"
+    },
+    "./plugins/core/NestedLexicalEditor": {
+      "import": "./dist/plugins/core/NestedLexicalEditor.js",
+      "types": "./dist/plugins/core/NestedLexicalEditor.d.ts"
+    },
     "./plugins/codeblock": {
       "types": "./dist/plugins/codeblock/index.d.ts",
       "import": "./dist/plugins/codeblock/index.js"