@nkzw/mdx-editor 0.1.0

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

@@ -0,0 +1,144 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import * as RadixSelect from "@radix-ui/react-select";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
+import classNames from "classnames";
+import React from "react";
+import styles from "../../../styles/ui.module.css.js";
+import { TooltipWrap } from "./TooltipWrap.js";
+import { SelectButtonTrigger, SelectContent, SelectItem } from "./select.js";
+import { readOnly$, editorInFocus$, useTranslation } from "../../core/index.js";
+import { useCellValue } from "@mdxeditor/gurx";
+function decorateWithRef(Component, decoratedProps) {
+  return React.forwardRef((props, ref) => {
+    const className = classNames(decoratedProps.className, props.className);
+    return /* @__PURE__ */ jsx(Component, { ...decoratedProps, ...props, className, ref });
+  });
+}
+function addTooltipToChildren(Component) {
+  return ({ title, children, ...props }) => {
+    return /* @__PURE__ */ jsx(Component, { "aria-label": title, ...props, children: /* @__PURE__ */ jsx(TooltipWrap, { title, children }) });
+  };
+}
+const Root = ({ readOnly, children, className }) => {
+  return /* @__PURE__ */ jsx(
+    RadixToolbar.Root,
+    {
+      className: classNames("mdxeditor-toolbar", styles.toolbarRoot, { [styles.readOnlyToolbarRoot]: readOnly }, className),
+      ...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, {
+  className: styles.toolbarToggleItem,
+  "data-toolbar-item": true
+});
+const SingleToggleGroup = decorateWithRef(RadixToolbar.ToggleGroup, {
+  type: "single",
+  className: styles.toolbarToggleSingleGroup
+});
+const ToggleSingleGroupWithItem = React.forwardRef(({ on, title, children, disabled, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    RadixToolbar.ToggleGroup,
+    {
+      type: "single",
+      className: styles.toolbarToggleSingleGroup,
+      ...props,
+      value: on ? "on" : "off",
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx(ToolbarToggleItem, { "aria-label": title, value: "on", disabled, children: /* @__PURE__ */ jsx(TooltipWrap, { title, children }) })
+    }
+  );
+});
+const MultipleChoiceToggleGroup = ({ items }) => {
+  return /* @__PURE__ */ jsx("div", { className: styles.toolbarGroupOfGroups, children: items.map((item, index) => /* @__PURE__ */ jsx(
+    ToggleSingleGroupWithItem,
+    {
+      title: item.title,
+      on: item.active,
+      onValueChange: (v) => {
+        item.onChange(v === "on");
+      },
+      disabled: item.disabled,
+      children: item.contents
+    },
+    index
+  )) });
+};
+const SingleChoiceToggleGroup = ({
+  value,
+  onChange,
+  className,
+  ggClassName,
+  items,
+  disabled
+}) => {
+  const t = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles.toolbarGroupOfGroups, ggClassName), children: /* @__PURE__ */ jsx(
+    RadixToolbar.ToggleGroup,
+    {
+      "aria-label": t("toolbar.toggleGroup", "toggle group"),
+      type: "single",
+      className: classNames(styles.toolbarToggleSingleGroup, className),
+      onValueChange: onChange,
+      value: value || "",
+      disabled,
+      onFocus: (e) => {
+        e.preventDefault();
+      },
+      children: items.map((item, index) => /* @__PURE__ */ jsx(ToolbarToggleItem, { "aria-label": item.title, value: item.value, children: /* @__PURE__ */ jsx(TooltipWrap, { title: item.title, children: item.contents }) }, index))
+    }
+  ) });
+};
+const ButtonOrDropdownButton = (props) => {
+  const readOnly = useCellValue(readOnly$);
+  return /* @__PURE__ */ jsx(Fragment, { children: props.items.length === 1 ? /* @__PURE__ */ jsx(
+    ButtonWithTooltip,
+    {
+      title: props.title,
+      onClick: () => {
+        props.onChoose("");
+      },
+      disabled: readOnly,
+      children: props.children
+    }
+  ) : /* @__PURE__ */ jsxs(RadixSelect.Root, { value: "", onValueChange: props.onChoose, children: [
+    /* @__PURE__ */ jsx(SelectButtonTrigger, { title: props.title, children: props.children }),
+    /* @__PURE__ */ jsx(SelectContent, { className: styles.toolbarButtonDropdownContainer, children: props.items.map((item, index) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, index)) })
+  ] }) });
+};
+function isConditionalContentsOption(option) {
+  return Object.hasOwn(option, "when");
+}
+const ConditionalContents = ({ options }) => {
+  const editorInFocus = useCellValue(editorInFocus$);
+  const contents = React.useMemo(() => {
+    const option = options.find((option2) => {
+      if (isConditionalContentsOption(option2)) {
+        if (option2.when(editorInFocus)) {
+          return true;
+        }
+      } else {
+        return true;
+      }
+    });
+    return option ? isConditionalContentsOption(option) ? option.contents() : option.fallback() : null;
+  }, [options, editorInFocus]);
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: contents });
+};
+const Separator = RadixToolbar.Separator;
+export {
+  Button,
+  ButtonOrDropdownButton,
+  ButtonWithTooltip,
+  ConditionalContents,
+  MultipleChoiceToggleGroup,
+  Root,
+  Separator,
+  SingleChoiceToggleGroup,
+  SingleToggleGroup,
+  ToggleSingleGroupWithItem,
+  ToolbarToggleItem
+};

package/dist/registerCodeBoundaryEscape.js

@@ -0,0 +1,40 @@
+import { KEY_ARROW_LEFT_COMMAND, COMMAND_PRIORITY_HIGH, KEY_ARROW_RIGHT_COMMAND, $getSelection, $isRangeSelection, $isTextNode } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+function escapeCodeFormatAtBoundary(direction, shiftKey) {
+  if (shiftKey) {
+    return false;
+  }
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection) || !selection.isCollapsed() || selection.anchor.type !== "text") {
+    return false;
+  }
+  const node = selection.anchor.getNode();
+  if (!$isTextNode(node) || !node.hasFormat("code") || !selection.hasFormat("code")) {
+    return false;
+  }
+  const offset = selection.anchor.offset;
+  const isBoundary = direction === "start" ? offset === 0 && node.getPreviousSibling() === null : offset === node.getTextContentSize() && node.getNextSibling() === null;
+  if (!isBoundary) {
+    return false;
+  }
+  selection.toggleFormat("code");
+  selection.setStyle("");
+  return false;
+}
+function registerCodeBoundaryEscape(editor) {
+  return mergeRegister(
+    editor.registerCommand(
+      KEY_ARROW_LEFT_COMMAND,
+      (event) => escapeCodeFormatAtBoundary("start", event.shiftKey),
+      COMMAND_PRIORITY_HIGH
+    ),
+    editor.registerCommand(
+      KEY_ARROW_RIGHT_COMMAND,
+      (event) => escapeCodeFormatAtBoundary("end", event.shiftKey),
+      COMMAND_PRIORITY_HIGH
+    )
+  );
+}
+export {
+  registerCodeBoundaryEscape
+};

package/dist/styles/lexical-theme.module.css.js

@@ -0,0 +1,62 @@
+const bold = "_bold_6j9u9_10";
+const italic = "_italic_6j9u9_14";
+const underline = "_underline_6j9u9_18";
+const strikethrough = "_strikethrough_6j9u9_34";
+const underlineStrikethrough = "_underlineStrikethrough_6j9u9_38";
+const subscript = "_subscript_6j9u9_42";
+const superscript = "_superscript_6j9u9_47";
+const code = "_code_6j9u9_52";
+const quote = "_quote_6j9u9_59";
+const nestedListItem = "_nestedListItem_6j9u9_66";
+const listitem = "_listitem_6j9u9_76";
+const listItemChecked = "_listItemChecked_6j9u9_80";
+const listItemUnchecked = "_listItemUnchecked_6j9u9_81";
+const admonitionDanger = "_admonitionDanger_6j9u9_158";
+const admonitionInfo = "_admonitionInfo_6j9u9_159";
+const admonitionNote = "_admonitionNote_6j9u9_160";
+const admonitionTip = "_admonitionTip_6j9u9_161";
+const admonitionCaution = "_admonitionCaution_6j9u9_162";
+const mdxExpression = "_mdxExpression_6j9u9_195";
+const lexicalThemeStyles = {
+  bold,
+  italic,
+  underline,
+  strikethrough,
+  underlineStrikethrough,
+  subscript,
+  superscript,
+  code,
+  quote,
+  nestedListItem,
+  listitem,
+  listItemChecked,
+  listItemUnchecked,
+  admonitionDanger,
+  admonitionInfo,
+  admonitionNote,
+  admonitionTip,
+  admonitionCaution,
+  mdxExpression
+};
+export {
+  admonitionCaution,
+  admonitionDanger,
+  admonitionInfo,
+  admonitionNote,
+  admonitionTip,
+  bold,
+  code,
+  lexicalThemeStyles as default,
+  italic,
+  listItemChecked,
+  listItemUnchecked,
+  listitem,
+  mdxExpression,
+  nestedListItem,
+  quote,
+  strikethrough,
+  subscript,
+  superscript,
+  underline,
+  underlineStrikethrough
+};

package/dist/styles/lexicalTheme.js

@@ -0,0 +1,32 @@
+import lexicalThemeStyles from "./lexical-theme.module.css.js";
+const lexicalTheme = {
+  quote: lexicalThemeStyles.quote,
+  text: {
+    bold: lexicalThemeStyles.bold,
+    italic: lexicalThemeStyles.italic,
+    underline: lexicalThemeStyles.underline,
+    code: lexicalThemeStyles.code,
+    strikethrough: lexicalThemeStyles.strikethrough,
+    subscript: lexicalThemeStyles.subscript,
+    superscript: lexicalThemeStyles.superscript,
+    underlineStrikethrough: lexicalThemeStyles.underlineStrikethrough
+  },
+  list: {
+    listitem: lexicalThemeStyles.listitem,
+    listitemChecked: lexicalThemeStyles.listItemChecked,
+    listitemUnchecked: lexicalThemeStyles.listItemUnchecked,
+    nested: {
+      listitem: lexicalThemeStyles.nestedListItem
+    }
+  },
+  admonition: {
+    danger: lexicalThemeStyles.admonitionDanger,
+    info: lexicalThemeStyles.admonitionInfo,
+    note: lexicalThemeStyles.admonitionNote,
+    tip: lexicalThemeStyles.admonitionTip,
+    caution: lexicalThemeStyles.admonitionCaution
+  }
+};
+export {
+  lexicalTheme
+};

package/dist/styles/ui.module.css.js

@@ -0,0 +1,296 @@
+const editorRoot = "_editorRoot_17t84_85";
+const editorWrapper = "_editorWrapper_17t84_187";
+const toolbarRoot = "_toolbarRoot_17t84_194";
+const readOnlyToolbarRoot = "_readOnlyToolbarRoot_17t84_221";
+const toolbarToggleItem = "_toolbarToggleItem_17t84_240";
+const toolbarGroupOfGroups = "_toolbarGroupOfGroups_17t84_251";
+const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_17t84_256";
+const toolbarButton = "_toolbarButton_17t84_271";
+const activeToolbarButton = "_activeToolbarButton_17t84_307";
+const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_17t84_318";
+const selectContainer = "_selectContainer_17t84_320";
+const selectItem = "_selectItem_17t84_333";
+const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_17t84_339";
+const selectTrigger = "_selectTrigger_17t84_340";
+const selectDropdownArrow = "_selectDropdownArrow_17t84_405";
+const contentEditable = "_contentEditable_17t84_411";
+const codeMirrorWrapper = "_codeMirrorWrapper_17t84_423";
+const codeMirrorToolbar = "_codeMirrorToolbar_17t84_440";
+const propertyPanelTitle = "_propertyPanelTitle_17t84_462";
+const propertyEditorTable = "_propertyEditorTable_17t84_470";
+const iconButton = "_iconButton_17t84_488";
+const readOnlyColumnCell = "_readOnlyColumnCell_17t84_493";
+const buttonsFooter = "_buttonsFooter_17t84_506";
+const propertyEditorInput = "_propertyEditorInput_17t84_512";
+const primaryButton = "_primaryButton_17t84_526";
+const secondaryButton = "_secondaryButton_17t84_527";
+const smallButton = "_smallButton_17t84_542";
+const dialogForm = "_dialogForm_17t84_554";
+const linkDialogEditForm = "_linkDialogEditForm_17t84_560";
+const linkDialogInputContainer = "_linkDialogInputContainer_17t84_568";
+const linkDialogInputWrapper = "_linkDialogInputWrapper_17t84_574";
+const linkDialogInput = "_linkDialogInput_17t84_568";
+const linkDialogAnchor = "_linkDialogAnchor_17t84_606";
+const linkDialogPopoverContent = "_linkDialogPopoverContent_17t84_620";
+const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_17t84_621";
+const dialogContent = "_dialogContent_17t84_622";
+const largeDialogContent = "_largeDialogContent_17t84_634";
+const dialogTitle = "_dialogTitle_17t84_644";
+const dialogCloseButton = "_dialogCloseButton_17t84_650";
+const popoverContent = "_popoverContent_17t84_657";
+const popoverArrow = "_popoverArrow_17t84_669";
+const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_17t84_673";
+const tooltipTrigger = "_tooltipTrigger_17t84_704";
+const tooltipContent = "_tooltipContent_17t84_708";
+const actionButton = "_actionButton_17t84_722";
+const linkDialogActionButton = "_linkDialogActionButton_17t84_729";
+const editorIcon = "_editorIcon_17t84_733";
+const primaryActionButton = "_primaryActionButton_17t84_744";
+const tableEditor = "_tableEditor_17t84_756";
+const toolCell = "_toolCell_17t84_767";
+const tableColumnEditorTrigger = "_tableColumnEditorTrigger_17t84_786";
+const addRowButton = "_addRowButton_17t84_788";
+const addColumnButton = "_addColumnButton_17t84_789";
+const tableColumnEditorToolbar = "_tableColumnEditorToolbar_17t84_862";
+const toggleGroupRoot = "_toggleGroupRoot_17t84_876";
+const tableToolsColumn = "_tableToolsColumn_17t84_895";
+const leftAlignedCell = "_leftAlignedCell_17t84_904";
+const rightAlignedCell = "_rightAlignedCell_17t84_908";
+const centeredCell = "_centeredCell_17t84_912";
+const tableAddButtonIcon = "_tableAddButtonIcon_17t84_939";
+const dialogOverlay = "_dialogOverlay_17t84_987";
+const focusedImage = "_focusedImage_17t84_1033";
+const imageWrapper = "_imageWrapper_17t84_1037";
+const editImageToolbar = "_editImageToolbar_17t84_1050";
+const editImageButton = "_editImageButton_17t84_1054";
+const inlineEditor = "_inlineEditor_17t84_1060";
+const blockEditor = "_blockEditor_17t84_1069";
+const nestedEditor = "_nestedEditor_17t84_1078";
+const genericComponentName = "_genericComponentName_17t84_1097";
+const diffSourceToggleWrapper = "_diffSourceToggleWrapper_17t84_1103";
+const ggDiffSourceToggle = "_ggDiffSourceToggle_17t84_1111";
+const diffSourceToggle = "_diffSourceToggle_17t84_1103";
+const selectWithLabel = "_selectWithLabel_17t84_1129";
+const toolbarTitleMode = "_toolbarTitleMode_17t84_1144";
+const imageControlWrapperResizing = "_imageControlWrapperResizing_17t84_1149";
+const imageResizer = "_imageResizer_17t84_1153";
+const imageResizerN = "_imageResizerN_17t84_1162";
+const imageResizerNe = "_imageResizerNe_17t84_1168";
+const imageResizerE = "_imageResizerE_17t84_1174";
+const imageResizerSe = "_imageResizerSe_17t84_1180";
+const imageResizerS = "_imageResizerS_17t84_1180";
+const imageResizerSw = "_imageResizerSw_17t84_1192";
+const imageResizerW = "_imageResizerW_17t84_1198";
+const imageResizerNw = "_imageResizerNw_17t84_1204";
+const imagePlaceholder = "_imagePlaceholder_17t84_1210";
+const imageDimensionsContainer = "_imageDimensionsContainer_17t84_1218";
+const placeholder = "_placeholder_17t84_1223";
+const rootContentEditableWrapper = "_rootContentEditableWrapper_17t84_1236";
+const downshiftInputWrapper = "_downshiftInputWrapper_17t84_1246";
+const downshiftInput = "_downshiftInput_17t84_1246";
+const downshiftAutocompleteContainer = "_downshiftAutocompleteContainer_17t84_1292";
+const textInput = "_textInput_17t84_1338";
+const multiFieldForm = "_multiFieldForm_17t84_1346";
+const formField = "_formField_17t84_1352";
+const markdownParseError = "_markdownParseError_17t84_1363";
+const popupContainer = "_popupContainer_17t84_1372";
+const inputSizer = "_inputSizer_17t84_1377";
+const styles = {
+  editorRoot,
+  editorWrapper,
+  toolbarRoot,
+  readOnlyToolbarRoot,
+  toolbarToggleItem,
+  toolbarGroupOfGroups,
+  toolbarToggleSingleGroup,
+  toolbarButton,
+  activeToolbarButton,
+  toolbarButtonDropdownContainer,
+  selectContainer,
+  selectItem,
+  toolbarButtonSelectTrigger,
+  selectTrigger,
+  selectDropdownArrow,
+  contentEditable,
+  codeMirrorWrapper,
+  codeMirrorToolbar,
+  propertyPanelTitle,
+  propertyEditorTable,
+  iconButton,
+  readOnlyColumnCell,
+  buttonsFooter,
+  propertyEditorInput,
+  primaryButton,
+  secondaryButton,
+  smallButton,
+  dialogForm,
+  linkDialogEditForm,
+  linkDialogInputContainer,
+  linkDialogInputWrapper,
+  linkDialogInput,
+  linkDialogAnchor,
+  linkDialogPopoverContent,
+  tableColumnEditorPopoverContent,
+  dialogContent,
+  largeDialogContent,
+  dialogTitle,
+  dialogCloseButton,
+  popoverContent,
+  popoverArrow,
+  linkDialogPreviewAnchor,
+  tooltipTrigger,
+  tooltipContent,
+  actionButton,
+  linkDialogActionButton,
+  editorIcon,
+  primaryActionButton,
+  tableEditor,
+  toolCell,
+  tableColumnEditorTrigger,
+  addRowButton,
+  addColumnButton,
+  tableColumnEditorToolbar,
+  toggleGroupRoot,
+  tableToolsColumn,
+  leftAlignedCell,
+  rightAlignedCell,
+  centeredCell,
+  tableAddButtonIcon,
+  dialogOverlay,
+  focusedImage,
+  imageWrapper,
+  editImageToolbar,
+  editImageButton,
+  inlineEditor,
+  blockEditor,
+  nestedEditor,
+  genericComponentName,
+  diffSourceToggleWrapper,
+  ggDiffSourceToggle,
+  diffSourceToggle,
+  selectWithLabel,
+  toolbarTitleMode,
+  imageControlWrapperResizing,
+  imageResizer,
+  imageResizerN,
+  imageResizerNe,
+  imageResizerE,
+  imageResizerSe,
+  imageResizerS,
+  imageResizerSw,
+  imageResizerW,
+  imageResizerNw,
+  imagePlaceholder,
+  imageDimensionsContainer,
+  placeholder,
+  rootContentEditableWrapper,
+  downshiftInputWrapper,
+  downshiftInput,
+  downshiftAutocompleteContainer,
+  textInput,
+  multiFieldForm,
+  formField,
+  markdownParseError,
+  popupContainer,
+  inputSizer
+};
+export {
+  actionButton,
+  activeToolbarButton,
+  addColumnButton,
+  addRowButton,
+  blockEditor,
+  buttonsFooter,
+  centeredCell,
+  codeMirrorToolbar,
+  codeMirrorWrapper,
+  contentEditable,
+  styles as default,
+  dialogCloseButton,
+  dialogContent,
+  dialogForm,
+  dialogOverlay,
+  dialogTitle,
+  diffSourceToggle,
+  diffSourceToggleWrapper,
+  downshiftAutocompleteContainer,
+  downshiftInput,
+  downshiftInputWrapper,
+  editImageButton,
+  editImageToolbar,
+  editorIcon,
+  editorRoot,
+  editorWrapper,
+  focusedImage,
+  formField,
+  genericComponentName,
+  ggDiffSourceToggle,
+  iconButton,
+  imageControlWrapperResizing,
+  imageDimensionsContainer,
+  imagePlaceholder,
+  imageResizer,
+  imageResizerE,
+  imageResizerN,
+  imageResizerNe,
+  imageResizerNw,
+  imageResizerS,
+  imageResizerSe,
+  imageResizerSw,
+  imageResizerW,
+  imageWrapper,
+  inlineEditor,
+  inputSizer,
+  largeDialogContent,
+  leftAlignedCell,
+  linkDialogActionButton,
+  linkDialogAnchor,
+  linkDialogEditForm,
+  linkDialogInput,
+  linkDialogInputContainer,
+  linkDialogInputWrapper,
+  linkDialogPopoverContent,
+  linkDialogPreviewAnchor,
+  markdownParseError,
+  multiFieldForm,
+  nestedEditor,
+  placeholder,
+  popoverArrow,
+  popoverContent,
+  popupContainer,
+  primaryActionButton,
+  primaryButton,
+  propertyEditorInput,
+  propertyEditorTable,
+  propertyPanelTitle,
+  readOnlyColumnCell,
+  readOnlyToolbarRoot,
+  rightAlignedCell,
+  rootContentEditableWrapper,
+  secondaryButton,
+  selectContainer,
+  selectDropdownArrow,
+  selectItem,
+  selectTrigger,
+  selectWithLabel,
+  smallButton,
+  tableAddButtonIcon,
+  tableColumnEditorPopoverContent,
+  tableColumnEditorToolbar,
+  tableColumnEditorTrigger,
+  tableEditor,
+  tableToolsColumn,
+  textInput,
+  toggleGroupRoot,
+  toolCell,
+  toolbarButton,
+  toolbarButtonDropdownContainer,
+  toolbarButtonSelectTrigger,
+  toolbarGroupOfGroups,
+  toolbarRoot,
+  toolbarTitleMode,
+  toolbarToggleItem,
+  toolbarToggleSingleGroup,
+  tooltipContent,
+  tooltipTrigger
+};