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

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 {};