@mdxeditor/editor 3.53.1 → 3.54.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -540,6 +540,8 @@ export declare interface CodeBlockLanguage {
540
540
  alias?: readonly string[];
541
541
  /** File extensions associated with this language (e.g. `["js", "mjs"]`). */
542
542
  extensions?: readonly string[];
543
+ /** Pre-loaded language support. When provided, this is used directly instead of auto-loading. */
544
+ support?: CodeBlockLanguageSupport;
543
545
  }
544
546
 
545
547
  /**
@@ -548,6 +550,14 @@ export declare interface CodeBlockLanguage {
548
550
  */
549
551
  export declare const codeBlockLanguages$: NodeRef<NormalizedCodeBlockLanguages>;
550
552
 
553
+ /**
554
+ * Compatible with CodeMirror `LanguageSupport` objects without exposing that package in the public API.
555
+ * @group CodeMirror
556
+ */
557
+ export declare interface CodeBlockLanguageSupport {
558
+ extension: Extension_2;
559
+ }
560
+
551
561
  /**
552
562
  * A lexical node that represents a fenced code block. Use {@link "$createCodeBlockNode"} to construct one.
553
563
  * @group Code Block
@@ -2535,6 +2545,8 @@ export declare interface NormalizedCodeBlockLanguages {
2535
2545
  }[];
2536
2546
  /** Maps any known key (canonical, alias, extension) to the canonical key. */
2537
2547
  keyMap: Record<string, string>;
2548
+ /** Maps canonical keys to pre-loaded language support, when provided. */
2549
+ supportMap: Partial<Record<string, CodeBlockLanguageSupport>>;
2538
2550
  }
2539
2551
 
2540
2552
  /**
@@ -57,16 +57,22 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
57
57
  if (readOnly) {
58
58
  extensions.push(EditorState.readOnly.of(true));
59
59
  }
60
- if (language !== "" && autoLoadLanguageSupport) {
61
- const languageData = languages.find((l) => {
62
- return l.name === language || l.alias.includes(language) || l.extensions.includes(language);
63
- });
64
- if (languageData) {
65
- try {
66
- const languageSupport = await languageData.load();
67
- extensions.push(languageSupport.extension);
68
- } catch (_e) {
69
- console.warn("failed to load language support for", language);
60
+ if (language !== "") {
61
+ const canonical = codeBlockLanguages.keyMap[language] ?? language;
62
+ const providedSupport = codeBlockLanguages.supportMap[canonical];
63
+ if (providedSupport) {
64
+ extensions.push(providedSupport.extension);
65
+ } else if (autoLoadLanguageSupport) {
66
+ const languageData = languages.find((l) => {
67
+ return l.name === language || l.alias.includes(language) || l.extensions.includes(language);
68
+ });
69
+ if (languageData) {
70
+ try {
71
+ const languageSupport = await languageData.load();
72
+ extensions.push(languageSupport.extension);
73
+ } catch (_e) {
74
+ console.warn("failed to load language support for", language);
75
+ }
70
76
  }
71
77
  }
72
78
  }
@@ -7,6 +7,7 @@ function normalizeCodeBlockLanguages(input) {
7
7
  var _a;
8
8
  const items = [];
9
9
  const keyMap = {};
10
+ const supportMap = {};
10
11
  if (Array.isArray(input)) {
11
12
  for (const lang of input) {
12
13
  const canonical = ((_a = lang.alias) == null ? void 0 : _a[0]) ?? lang.name.toLowerCase();
@@ -23,6 +24,9 @@ function normalizeCodeBlockLanguages(input) {
23
24
  }
24
25
  }
25
26
  keyMap[lang.name.toLowerCase()] = canonical;
27
+ if (lang.support) {
28
+ supportMap[canonical] = lang.support;
29
+ }
26
30
  }
27
31
  } else {
28
32
  const firstKeyByLabel = {};
@@ -34,7 +38,7 @@ function normalizeCodeBlockLanguages(input) {
34
38
  keyMap[key] = firstKeyByLabel[label] || EMPTY_VALUE;
35
39
  }
36
40
  }
37
- return { items, keyMap };
41
+ return { items, keyMap, supportMap };
38
42
  }
39
43
  const codeBlockLanguages$ = Cell(
40
44
  normalizeCodeBlockLanguages({
@@ -1,5 +1,5 @@
1
1
  import { $createParagraphNode } from "lexical";
2
- const lexicalTypesThatShouldSkipParagraphs = ["listitem", "quote", "admonition"];
2
+ const lexicalTypesThatShouldSkipParagraphs = ["listitem", "admonition"];
3
3
  const MdastParagraphVisitor = {
4
4
  testNode: "paragraph",
5
5
  visitNode: function({ mdastNode, lexicalParent, actions }) {
@@ -1,10 +1,8 @@
1
1
  import { $isQuoteNode } from "@lexical/rich-text";
2
2
  const LexicalQuoteVisitor = {
3
3
  testLexicalNode: $isQuoteNode,
4
- visitLexicalNode: ({ lexicalNode, mdastParent, actions }) => {
5
- const paragraph = { type: "paragraph", children: [] };
6
- actions.appendToParent(mdastParent, { type: "blockquote", children: [paragraph] });
7
- actions.visitChildren(lexicalNode, paragraph);
4
+ visitLexicalNode: ({ actions }) => {
5
+ actions.addAndStepInto("blockquote");
8
6
  }
9
7
  };
10
8
  export {
@@ -12,6 +12,7 @@ const InsertImage = React__default.forwardRef((_, forwardedRef) => {
12
12
  return /* @__PURE__ */ React__default.createElement(
13
13
  RadixToolbar.Button,
14
14
  {
15
+ "aria-label": t("toolbar.image", "Insert image"),
15
16
  className: styles.toolbarButton,
16
17
  ref: forwardedRef,
17
18
  disabled: readOnly,
@@ -3,7 +3,7 @@ import * as RadixToolbar from "@radix-ui/react-toolbar";
3
3
  import React__default from "react";
4
4
  import classNames from "classnames";
5
5
  import { useCombobox } from "downshift";
6
- import { editorRootElementRef$, readOnly$, iconComponentFor$ } from "../../core/index.js";
6
+ import { editorRootElementRef$, readOnly$, iconComponentFor$, useTranslation } from "../../core/index.js";
7
7
  import styles from "../../../styles/ui.module.css.js";
8
8
  import { TooltipWrap } from "./TooltipWrap.js";
9
9
  import { useCellValues, useCellValue } from "@mdxeditor/gurx";
@@ -18,7 +18,7 @@ const DialogButton = React__default.forwardRef(({ autocompleteSuggestions = [],
18
18
  },
19
19
  [onSubmit]
20
20
  );
21
- 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(
21
+ return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { "aria-label": tooltipTitle, 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(
22
22
  DialogForm,
23
23
  {
24
24
  submitButtonTitle,
@@ -31,6 +31,7 @@ const DialogButton = React__default.forwardRef(({ autocompleteSuggestions = [],
31
31
  const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlaceholder, submitButtonTitle }) => {
32
32
  const [items, setItems] = React__default.useState(autocompleteSuggestions.slice(0, MAX_SUGGESTIONS));
33
33
  const iconComponentFor = useCellValue(iconComponentFor$);
34
+ const t = useTranslation();
34
35
  const enableAutoComplete = autocompleteSuggestions.length > 0;
35
36
  const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
36
37
  initialInputValue: "",
@@ -106,7 +107,7 @@ const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlac
106
107
  className: classNames(styles.actionButton, styles.primaryActionButton)
107
108
  },
108
109
  iconComponentFor("check")
109
- ), /* @__PURE__ */ React__default.createElement(Dialog.Close, { className: styles.actionButton }, iconComponentFor("close")));
110
+ ), /* @__PURE__ */ React__default.createElement(Dialog.Close, { "aria-label": t("dialog.close", "Close dialog"), className: styles.actionButton }, iconComponentFor("close")));
110
111
  };
111
112
  export {
112
113
  DialogButton
@@ -47,7 +47,7 @@ const SelectButtonTrigger = ({
47
47
  className
48
48
  }) => {
49
49
  const [readOnly, iconComponentFor] = useCellValues(readOnly$, iconComponentFor$);
50
- 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 }, iconComponentFor("arrow_drop_down"))));
50
+ return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(RadixSelect.Trigger, { "aria-label": title, className: classNames(styles.toolbarButtonSelectTrigger, className), disabled: readOnly }, children, /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, iconComponentFor("arrow_drop_down"))));
51
51
  };
52
52
  const Select = (props) => {
53
53
  return /* @__PURE__ */ React__default.createElement(RadixSelect.Root, { value: props.value || "", onValueChange: props.onChange, disabled: props.disabled }, /* @__PURE__ */ React__default.createElement(SelectTrigger, { title: props.triggerTitle, placeholder: props.placeholder }), /* @__PURE__ */ React__default.createElement(SelectContent, null, props.items.map((item, index) => {
@@ -15,7 +15,7 @@ function decorateWithRef(Component, decoratedProps) {
15
15
  }
16
16
  function addTooltipToChildren(Component) {
17
17
  return ({ title, children, ...props }) => {
18
- return /* @__PURE__ */ React__default.createElement(Component, { ...props }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, children));
18
+ return /* @__PURE__ */ React__default.createElement(Component, { "aria-label": title, ...props }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, children));
19
19
  };
20
20
  }
21
21
  const Root = ({ readOnly, children, className }) => {
package/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  "*.css"
12
12
  ],
13
13
  "type": "module",
14
- "version": "3.53.1",
14
+ "version": "3.54.1",
15
15
  "description": "React component for rich text markdown editing",
16
16
  "scripts": {
17
17
  "build": "vite build",