@mdxeditor/editor 3.32.3 → 3.34.0

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -5,7 +5,8 @@ import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
 import { useTranslation, readOnly$, iconComponentFor$ } from "../core/index.js";
 import { languages } from "@codemirror/language-data";
 import { EditorState } from "@codemirror/state";
-import { lineNumbers, EditorView } from "@codemirror/view";
+import { lineNumbers, keymap, EditorView } from "@codemirror/view";
+import { indentWithTab } from "@codemirror/commands";
 import { basicLight } from "cm6-theme-basic-light";
 import { basicSetup } from "codemirror";
 import { codeMirrorExtensions$, codeMirrorAutoLoadLanguageSupport$, codeBlockLanguages$ } from "./index.js";
@@ -33,12 +34,14 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
     getCodemirror: () => editorViewRef.current
   };
   React__default.useEffect(() => {
+    const el = elRef.current;
     void (async () => {
       const extensions = [
         ...codeMirrorExtensions,
         basicSetup,
         basicLight,
         lineNumbers(),
+        keymap.of([indentWithTab]),
         EditorView.lineWrapping,
         EditorView.updateListener.of(({ state }) => {
           setCodeRef.current(state.doc.toString());
@@ -60,64 +63,59 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
           }
         }
       }
-      elRef.current.innerHTML = "";
+      el.innerHTML = "";
       editorViewRef.current = new EditorView({
-        parent: elRef.current,
+        parent: el,
         state: EditorState.create({ doc: code, extensions })
       });
+      el.addEventListener("keydown", stopPropagationHandler);
     })();
     return () => {
       var _a;
       (_a = editorViewRef.current) == null ? void 0 : _a.destroy();
       editorViewRef.current = null;
+      el.removeEventListener("keydown", stopPropagationHandler);
     };
   }, [readOnly, language]);
-  return /* @__PURE__ */ React__default.createElement(
-    "div",
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.codeMirrorWrapper }, /* @__PURE__ */ React__default.createElement("div", { className: styles.codeMirrorToolbar }, /* @__PURE__ */ React__default.createElement(
+    Select,
     {
-      className: styles.codeMirrorWrapper,
-      onKeyDown: (e) => {
-        e.stopPropagation();
-      }
-    },
-    /* @__PURE__ */ React__default.createElement("div", { className: styles.codeMirrorToolbar }, /* @__PURE__ */ React__default.createElement(
-      Select,
-      {
-        disabled: readOnly,
-        value: language,
-        onChange: (language2) => {
-          parentEditor.update(() => {
-            lexicalNode.setLanguage(language2 === EMPTY_VALUE ? "" : language2);
-            setTimeout(() => {
-              parentEditor.update(() => {
-                lexicalNode.getLatest().select();
-              });
+      disabled: readOnly,
+      value: language,
+      onChange: (language2) => {
+        parentEditor.update(() => {
+          lexicalNode.setLanguage(language2 === EMPTY_VALUE ? "" : language2);
+          setTimeout(() => {
+            parentEditor.update(() => {
+              lexicalNode.getLatest().select();
             });
           });
-        },
-        triggerTitle: t("codeBlock.selectLanguage", "Select code block language"),
-        placeholder: t("codeBlock.inlineLanguage", "Language"),
-        items: Object.entries(codeBlockLanguages).map(([value, label]) => ({ value: value ? value : EMPTY_VALUE, label }))
-      }
-    ), /* @__PURE__ */ React__default.createElement(
-      "button",
-      {
-        className: styles.iconButton,
-        type: "button",
-        disabled: readOnly,
-        title: t("codeblock.delete", "Delete code block"),
-        onClick: (e) => {
-          e.preventDefault();
-          parentEditor.update(() => {
-            lexicalNode.remove();
-          });
-        }
+        });
       },
-      iconComponentFor("delete_small")
-    )),
-    /* @__PURE__ */ React__default.createElement("div", { ref: elRef })
-  );
+      triggerTitle: t("codeBlock.selectLanguage", "Select code block language"),
+      placeholder: t("codeBlock.inlineLanguage", "Language"),
+      items: Object.entries(codeBlockLanguages).map(([value, label]) => ({ value: value ? value : EMPTY_VALUE, label }))
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: styles.iconButton,
+      type: "button",
+      disabled: readOnly,
+      title: t("codeblock.delete", "Delete code block"),
+      onClick: (e) => {
+        e.preventDefault();
+        parentEditor.update(() => {
+          lexicalNode.remove();
+        });
+      }
+    },
+    iconComponentFor("delete_small")
+  )), /* @__PURE__ */ React__default.createElement("div", { ref: elRef }));
 };
+function stopPropagationHandler(ev) {
+  ev.stopPropagation();
+}
 export {
   COMMON_STATE_CONFIG_EXTENSIONS,
   CodeMirrorEditor

package/dist/plugins/image/ImageEditor.js

@@ -10,14 +10,27 @@ import styles from "../../styles/ui.module.css.js";
 import { readOnly$ } from "../core/index.js";
 import { $isImageNode } from "./ImageNode.js";
 import ImageResizer from "./ImageResizer.js";
+const BROKEN_IMG_URI = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(
+  /* xml */
+  `
+    <svg id="imgLoadError" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+      <rect x="0" y="0" width="100" height="100" fill="none" stroke="red" stroke-width="4" stroke-dasharray="4" />
+      <text x="50" y="55" text-anchor="middle" font-size="20" fill="red">⚠️</text>
+    </svg>
+`
+);
 const imgCache = {
   __cache: {},
   read(src) {
     if (!this.__cache[src]) {
       this.__cache[src] = new Promise((resolve) => {
         const img = new Image();
+        img.onerror = () => {
+          this.__cache[src] = BROKEN_IMG_URI;
+          resolve();
+        };
         img.onload = () => {
-          this.__cache[src] = true;
+          this.__cache[src] = src;
           resolve();
         };
         img.src = src;
@@ -38,13 +51,12 @@ function LazyImage({
   width,
   height
 }) {
-  void imgCache.read(src);
   return /* @__PURE__ */ React__default.createElement(
     "img",
     {
       className: className ?? void 0,
       alt,
-      src,
+      src: imgCache.read(src),
       title,
       ref: imageRef,
       draggable: "false",

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.32.3",
+  "version": "3.34.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -37,6 +37,7 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@codemirror/commands": "^6.2.4",
     "@codemirror/lang-markdown": "^6.2.3",
     "@codemirror/language-data": "^6.5.1",
     "@codemirror/merge": "^6.4.0",