@mdxeditor/editor 0.15.2 → 0.16.0

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

@@ -42,6 +42,7 @@ export declare const toolbarSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     contentEditableClassName: RealmNode<string>;
     placeholder: RealmNode<React.ReactNode>;
     autoFocus: RealmNode<boolean>;
+    readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<React.ComponentType<{}>[]>;
     addComposerChild: RealmNode<React.ComponentType<{}>>;
     topAreaChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -97,6 +98,7 @@ toolbarPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     contentEditableClassName: RealmNode<string>;
     placeholder: RealmNode<React.ReactNode>;
     autoFocus: RealmNode<boolean>;
+    readOnly: RealmNode<boolean>;
     composerChildren: RealmNode<React.ComponentType<{}>[]>;
     addComposerChild: RealmNode<React.ComponentType<{}>>;
     topAreaChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -156,6 +158,7 @@ toolbarPluginHooks: {
         contentEditableClassName: RealmNode<string>;
         placeholder: RealmNode<React.ReactNode>;
         autoFocus: RealmNode<boolean>;
+        readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<React.ComponentType<{}>[]>;
         addComposerChild: RealmNode<React.ComponentType<{}>>;
         topAreaChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -176,7 +179,7 @@ toolbarPluginHooks: {
         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" | "placeholder" | "autoFocus" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "toolbarContents">(key: K, callback: (value: ValueForKey<{
+    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" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "toolbarContents">(key: K, callback: (value: ValueForKey<{
         toolbarContents: RealmNode<() => React.ReactNode>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -209,6 +212,7 @@ toolbarPluginHooks: {
         contentEditableClassName: RealmNode<string>;
         placeholder: RealmNode<React.ReactNode>;
         autoFocus: RealmNode<boolean>;
+        readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<React.ComponentType<{}>[]>;
         addComposerChild: RealmNode<React.ComponentType<{}>>;
         topAreaChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -262,6 +266,7 @@ toolbarPluginHooks: {
         contentEditableClassName: RealmNode<string>;
         placeholder: RealmNode<React.ReactNode>;
         autoFocus: RealmNode<boolean>;
+        readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<React.ComponentType<{}>[]>;
         addComposerChild: RealmNode<React.ComponentType<{}>>;
         topAreaChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -314,6 +319,7 @@ toolbarPluginHooks: {
         contentEditableClassName: RealmNode<string>;
         placeholder: RealmNode<React.ReactNode>;
         autoFocus: RealmNode<boolean>;
+        readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<React.ComponentType<{}>[]>;
         addComposerChild: RealmNode<React.ComponentType<{}>>;
         topAreaChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -367,6 +373,7 @@ toolbarPluginHooks: {
         contentEditableClassName: RealmNode<string>;
         placeholder: RealmNode<React.ReactNode>;
         autoFocus: RealmNode<boolean>;
+        readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<React.ComponentType<{}>[]>;
         addComposerChild: RealmNode<React.ComponentType<{}>>;
         topAreaChildren: RealmNode<React.ComponentType<{}>[]>;
@@ -387,7 +394,7 @@ toolbarPluginHooks: {
         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" | "placeholder" | "autoFocus" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "toolbarContents">(key: K_2) => (value: ValueForKey<{
+    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" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "toolbarContents">(key: K_2) => (value: ValueForKey<{
         toolbarContents: RealmNode<() => React.ReactNode>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -420,6 +427,7 @@ toolbarPluginHooks: {
         contentEditableClassName: RealmNode<string>;
         placeholder: RealmNode<React.ReactNode>;
         autoFocus: RealmNode<boolean>;
+        readOnly: RealmNode<boolean>;
         composerChildren: RealmNode<React.ComponentType<{}>[]>;
         addComposerChild: RealmNode<React.ComponentType<{}>>;
         topAreaChildren: RealmNode<React.ComponentType<{}>[]>;

package/dist/plugins/toolbar/index.js

@@ -1,5 +1,5 @@
 import React__default from "react";
-import { coreSystem } from "../core/index.js";
+import { coreSystem, corePluginHooks } from "../core/index.js";
 import { Root } from "./primitives/toolbar.js";
 import { system } from "../../gurx/realmFactory.js";
 import { realmPlugin } from "../../gurx/react.js";
@@ -30,7 +30,8 @@ const [
 });
 const ToolbarWrapper = () => {
   const [toolbarContents] = toolbarPluginHooks.useEmitterValues("toolbarContents");
-  return /* @__PURE__ */ React__default.createElement(Root, null, toolbarContents());
+  const [readOnly] = corePluginHooks.useEmitterValues("readOnly");
+  return /* @__PURE__ */ React__default.createElement(Root, { readOnly }, toolbarContents());
 };
 export {
   toolbarPlugin,

package/dist/plugins/toolbar/primitives/DialogButton.js

@@ -12,7 +12,7 @@ import { TooltipWrap } from "./TooltipWrap.js";
 const MAX_SUGGESTIONS = 20;
 const DialogButton = React__default.forwardRef(
   ({ autocompleteSuggestions = [], submitButtonTitle, dialogInputPlaceholder, onSubmit, tooltipTitle, buttonContent }, forwardedRef) => {
-    const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+    const [editorRootElementRef, readOnly] = corePluginHooks.useEmitterValues("editorRootElementRef", "readOnly");
     const [open, setOpen] = React__default.useState(false);
     const onSubmitCallback = React__default.useCallback(
       (value) => {
@@ -21,7 +21,7 @@ const DialogButton = React__default.forwardRef(
       },
       [onSubmit]
     );
-    return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: tooltipTitle }, buttonContent))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: tooltipTitle }, buttonContent))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(
       DialogForm,
       {
         submitButtonTitle,

package/dist/plugins/toolbar/primitives/select.js

@@ -11,7 +11,18 @@ const SelectItem = React__default.forwardRef(
   }
 );
 const SelectTrigger = ({ title, placeholder, className }) => {
-  return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(RadixSelect.Trigger, { "aria-label": placeholder, className: classNames(styles.selectTrigger, className), "data-toolbar-item": true }, /* @__PURE__ */ React__default.createElement(RadixSelect.Value, { placeholder }), /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))));
+  const [readOnly] = corePluginHooks.useEmitterValues("readOnly");
+  return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(
+    RadixSelect.Trigger,
+    {
+      "aria-label": placeholder,
+      className: classNames(styles.selectTrigger, className),
+      "data-toolbar-item": true,
+      disabled: readOnly
+    },
+    /* @__PURE__ */ React__default.createElement(RadixSelect.Value, { placeholder }),
+    /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))
+  ));
 };
 const SelectContent = ({
   children,
@@ -25,7 +36,8 @@ const SelectButtonTrigger = ({
   title,
   className
 }) => {
-  return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(RadixSelect.Trigger, { className: classNames(styles.toolbarButtonSelectTrigger, className) }, children, /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))));
+  const [readOnly] = corePluginHooks.useEmitterValues("readOnly");
+  return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(RadixSelect.Trigger, { className: classNames(styles.toolbarButtonSelectTrigger, className), disabled: readOnly }, children, /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))));
 };
 const Select = (props) => {
   return /* @__PURE__ */ React__default.createElement(RadixSelect.Root, { value: props.value || void 0, onValueChange: props.onChange }, /* @__PURE__ */ React__default.createElement(SelectTrigger, { title: props.triggerTitle, placeholder: props.placeholder }), /* @__PURE__ */ React__default.createElement(SelectContent, null, props.items.map((item, index) => {

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

@@ -4,7 +4,10 @@ import { EditorInFocus } from '../../core';
 /**
  * @internal
  */
-export declare const Root: (props: RadixToolbar.ToolbarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const Root: React.FC<{
+    readOnly: boolean;
+    children: React.ReactNode;
+}>;
 /**
  * A toolbar button primitive.
  */

package/dist/plugins/toolbar/primitives/toolbar.js

@@ -6,12 +6,6 @@ import styles from "../../../styles/ui.module.css.js";
 import { TooltipWrap } from "./TooltipWrap.js";
 import { SelectButtonTrigger, SelectContent, SelectItem } from "./select.js";
 import { corePluginHooks } from "../../core/index.js";
-function decorate(Component, decoratedProps) {
-  return (props) => {
-    const className = classNames(decoratedProps.className, props.className);
-    return /* @__PURE__ */ React__default.createElement(Component, { ...decoratedProps, ...props, className });
-  };
-}
 function decorateWithRef(Component, decoratedProps) {
   return React__default.forwardRef((props, ref) => {
     const className = classNames(decoratedProps.className, props.className);
@@ -23,7 +17,16 @@ function addTooltipToChildren(Component) {
     return /* @__PURE__ */ React__default.createElement(Component, { ...props }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, children));
   };
 }
-const Root = decorate(RadixToolbar.Root, { className: styles.toolbarRoot });
+const Root = ({ readOnly, children }) => {
+  return /* @__PURE__ */ React__default.createElement(
+    RadixToolbar.Root,
+    {
+      className: classNames(styles.toolbarRoot, { [styles.readOnlyToolbarRoot]: readOnly }),
+      ...readOnly ? { tabIndex: -1 } : {}
+    },
+    children
+  );
+};
 const Button = decorateWithRef(RadixToolbar.Button, { className: styles.toolbarButton, "data-toolbar-item": true });
 const ButtonWithTooltip = addTooltipToChildren(Button);
 const ToolbarToggleItem = decorateWithRef(RadixToolbar.ToggleItem, {
@@ -74,7 +77,8 @@ const SingleChoiceToggleGroup = ({ value, onChange, className, items }) => {
   ));
 };
 const ButtonOrDropdownButton = (props) => {
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, props.items.length === 1 ? /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: props.title, onClick: () => props.onChoose("") }, props.children) : /* @__PURE__ */ React__default.createElement(RadixSelect.Root, { value: "", onValueChange: props.onChoose }, /* @__PURE__ */ React__default.createElement(SelectButtonTrigger, { title: props.title }, props.children), /* @__PURE__ */ React__default.createElement(SelectContent, { className: styles.toolbarButtonDropdownContainer }, props.items.map((item, index) => /* @__PURE__ */ React__default.createElement(SelectItem, { key: index, value: item.value }, item.label)))));
+  const [readOnly] = corePluginHooks.useEmitterValues("readOnly");
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, props.items.length === 1 ? /* @__PURE__ */ React__default.createElement(ButtonWithTooltip, { title: props.title, onClick: () => props.onChoose(""), disabled: readOnly }, props.children) : /* @__PURE__ */ React__default.createElement(RadixSelect.Root, { value: "", onValueChange: props.onChoose }, /* @__PURE__ */ React__default.createElement(SelectButtonTrigger, { title: props.title }, props.children), /* @__PURE__ */ React__default.createElement(SelectContent, { className: styles.toolbarButtonDropdownContainer }, props.items.map((item, index) => /* @__PURE__ */ React__default.createElement(SelectItem, { key: index, value: item.value }, item.label)))));
 };
 function isConditionalContentsOption(option) {
   return Object.hasOwn(option, "when");