rme 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -4355,11 +4355,17 @@ var require_object2 = __commonJS({
 import { createTheme } from "@drl990114/codemirror-themes";
 
 // src/editor/codemirror/codemirror.ts
-import { Compartment, EditorState as CodeMirrorEditorState } from "@codemirror/state";
+import {
+  ensureSyntaxTree
+} from "@codemirror/language";
+import { languages } from "@codemirror/language-data";
+import { EditorState as CodeMirrorEditorState, Compartment } from "@codemirror/state";
 import { EditorView as CodeMirrorEditorView, keymap } from "@codemirror/view";
 import { assertGet, isPromise, replaceNodeAtPosition } from "@remirror/core";
 import { exitCode } from "@remirror/pm/commands";
+import { redo, undo } from "@remirror/pm/history";
 import { Selection, TextSelection } from "@remirror/pm/state";
+import { nanoid } from "nanoid";
 
 // src/editor/theme/codemirror/dark.ts
 import { tags as t } from "@lezer/highlight";
@@ -4536,6 +4542,7 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
   background-color: ${(props) => props.theme.bgColor};
   color: ${(props) => props.theme.primaryFontColor};
   word-wrap: break-word;
+  white-space: pre-wrap;
   padding: 0 20px;
   padding-bottom: 1em;
   box-sizing: border-box;
@@ -4547,7 +4554,7 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
 
   & a {
     background-color: transparent;
-    color: #58a6ff;
+    color: ${(props) => props.theme.linkColor || props.theme.accentColor};
     text-decoration: none;
   }
 
@@ -4590,11 +4597,16 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     max-width: 100%;
     box-sizing: content-box;
     background-color: ${(props) => props.theme.imgBgColor};
+    vertical-align: bottom;
   }
 
   & hr {
-    border-bottom: 1px solid ${(props) => props.theme.hrBorderColor};
-    background-color: ${(props) => props.theme.hrBgColor};
+    box-sizing: content-box;
+    height: 0;
+    margin: 1.5em 0;
+    border: 0;
+    border-top: 1px solid ${(props) => props.theme.hrBorderColor};
+    background: ${(props) => props.theme.hrBgColor};
   }
 
   & kbd {
@@ -4658,18 +4670,6 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     margin: 1em 40px;
   }
 
-  & hr {
-    box-sizing: content-box;
-    overflow: hidden;
-    background: transparent;
-    border-bottom: 1px solid #21262d;
-    height: 0.25em;
-    padding: 0;
-    margin: 24px 0;
-    background-color: #30363d;
-    border: 0;
-  }
-
   & input {
     font: inherit;
     margin: 0;
@@ -4699,7 +4699,7 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     border-spacing: 0;
     border-collapse: collapse;
     display: block;
-    width: max-content;
+    width: 100%;
     max-width: 100%;
     overflow: auto;
     margin: 1em 0;
@@ -4765,7 +4765,7 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
   & [role='button']:focus,
   & input[type='radio']:focus,
   & input[type='checkbox']:focus {
-    outline: 2px solid #58a6ff;
+    outline: 2px solid ${(props) => props.theme.accentColor};
     outline-offset: -2px;
     box-shadow: none;
   }
@@ -4803,48 +4803,48 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
   & h6 {
     position: relative;
     margin: 0;
-    line-height: 1;
+    line-height: 1.25;
   }
 
   & h1 {
     font-weight: 600;
-    margin: 10px 0 20px 0;
-    font-size: 1.87em;
+    margin: 0.6em 0 1.2em 0;
+    font-size: 1.875em;
   }
 
   & h2 {
     font-weight: 600;
-    margin: 10px 0 20px 0;
+    margin: 0.55em 0 1.1em 0;
     font-size: 1.75em;
   }
 
   & h3 {
     font-weight: 600;
-    margin: 10px 0 20px 0;
+    margin: 0.5em 0 1em 0;
     font-size: 1.6em;
   }
 
   & h4 {
     font-weight: 600;
-    margin: 10px 0 20px 0;
+    margin: 0.45em 0 0.9em 0;
     font-size: 1.46em;
   }
 
   & h5 {
     font-weight: 600;
-    margin: 6px 0 16px 0;
+    margin: 0.4em 0 0.8em 0;
     font-size: 1.3em;
   }
 
   & h6 {
     font-weight: 600;
-    margin: 6px 0 16px 0;
+    margin: 0.4em 0 0.8em 0;
     font-size: 1.2em;
   }
 
   & p {
     margin-top: 0;
-    margin-bottom: 10px;
+    margin-bottom: 0.5em;
   }
 
   & blockquote {
@@ -4858,7 +4858,7 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
   & ol {
     margin-top: 0;
     margin-bottom: 0;
-    padding-left: 2em;
+    padding-left: 1.5em;
   }
 
   & ol ol,
@@ -5199,19 +5199,22 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     display: inline-block;
   }
 
-  .inline-html {
+  .inline-input {
     position: relative;
   }
 
-  .inline-html-src {
+  .inline-input-src {
     display: inline;
     padding: 0.2em 0.4em;
     margin: 0;
     background-color: ${(props) => props.theme.codeBgColor};
     border-radius: 6px;
+    br {
+      display: none;
+    }
   }
 
-  .inline-html-preview {
+  .inline-input-preview {
     position: absolute;
     top: calc(100% + 0.5em);
     left: 50%;
@@ -5225,11 +5228,47 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     z-index: 1;
   }
 
-  .inline-html-render {
-    display: inline-block;
+  .inline-input-render {
     line-height: normal;
   }
 
+  .math-block-nodeview {
+    position: relative;
+    margin: 0;
+
+    br {
+      display: none;
+    }
+  }
+
+  .math-block-render {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1em 0;
+    border-radius: 0.2em;
+
+    &:hover {
+      border: 1px solid ${(props) => props.theme.borderColor};
+    }
+  }
+
+  .math-block-preview {
+    position: absolute;
+    top: calc(100% + 0.5em);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1em 0;
+    width: 100%;
+    border: 1px solid ${(props) => props.theme.borderColor};
+    border-radius: 0.2em;
+    background-color: ${(props) => props.theme.bgColor};
+    z-index: 1;
+  }
+
   .html-node {
     position: relative;
     min-height: 40px;
@@ -5258,7 +5297,6 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     outline: none;
   }
 
-
   & .ProseMirror-focused {
     outline: none;
   }
@@ -5293,6 +5331,20 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     }
   }
 
+  .cm-copy-btn {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    padding: 4px 8px;
+    transition: all 0.3s;
+    font-size: small;
+    border-radius: ${(props) => props.theme.smallBorderRadius};
+    cursor: pointer;
+    z-index: 1000;
+    color: ${(props) => props.theme.labelFontColor};
+    background: ${(props) => props.theme.hoverColor};
+  }
+
   .cm-editor {
     height: auto;
     padding: 12px 0;
@@ -5388,7 +5440,6 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
 
   & .html-image-node-view-wrapper {
     display: inline-block;
-    line-height: 0;
 
     &:hover {
       outline: 2px solid #58a6ff;
@@ -5401,7 +5452,7 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
   }
 
   & .ProseMirror-selectednode {
-    outline: 2px solid #58a6ff;
+    outline: 2px solid ${(props) => props.theme.accentColor};
   }
 
   & .ProseMirror th.selectedCell,
@@ -5727,12 +5778,6 @@ var lightTheme = {
 };
 
 // src/editor/codemirror/codemirror.ts
-import {
-  ensureSyntaxTree
-} from "@codemirror/language";
-import { languages } from "@codemirror/language-data";
-import { nanoid } from "nanoid";
-import { redo, undo } from "@remirror/pm/history";
 var cmInstanceMap = /* @__PURE__ */ new Map();
 var themeRef = { current: createTheme(lightTheme.codemirrorTheme) };
 var changeTheme = (theme) => {
@@ -5770,6 +5815,8 @@ var MfCodemirrorView = class {
     this.id = nanoid();
     this.content = "";
     this.updating = false;
+    this.copyButton = null;
+    this.copyButtonContainer = null;
     this.view = view;
     this.getPos = getPos;
     this.node = node;
@@ -5803,6 +5850,9 @@ var MfCodemirrorView = class {
     });
     cmInstanceMap.set(this.id, this);
     this.updateLanguage();
+    if (this.options.copyButton?.enabled !== false) {
+      this.createCopyButton();
+    }
   }
   update(node) {
     if (node.type !== this.node.type) {
@@ -6001,6 +6051,95 @@ var MfCodemirrorView = class {
       return true;
     };
   }
+  /**
+   * Creates the copy button and adds it to the CodeMirror editor
+   */
+  createCopyButton() {
+    if (!this.cm.dom || !this.options) return;
+    this.copyButton = document.createElement("div");
+    this.copyButton.className = "cm-copy-btn";
+    this.copyButton.innerHTML = `<i class="ri-file-copy-line"></i>`;
+    const tooltip = "Copy code";
+    this.copyButton.title = tooltip;
+    this.setupCopyButtonEvents();
+    this.cm.dom.appendChild(this.copyButton);
+    this.copyButton.style.pointerEvents = "auto";
+  }
+  /**
+   * Sets up event listeners for the copy button
+   */
+  setupCopyButtonEvents() {
+    if (!this.copyButton) return;
+    this.copyButton.addEventListener("mouseenter", () => {
+      if (!this.copyButton) return;
+      this.copyButton.style.transform = "translateY(-1px)";
+    });
+    this.copyButton.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+    this.copyButton.addEventListener("mouseleave", () => {
+      if (!this.copyButton) return;
+      this.copyButton.style.transform = "translateY(0)";
+    });
+    this.copyButton.addEventListener("click", this.handleCopy.bind(this), {
+      capture: true
+    });
+  }
+  /**
+   * Handles the copy button click event
+   */
+  async handleCopy(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!this.options) return;
+    const code = this.node.textContent;
+    if (this.options.copyButton?.customCopyFunction) {
+      try {
+        const result = this.options.copyButton.customCopyFunction(code);
+        if (result instanceof Promise) {
+          const success = await result;
+          if (success) {
+            this.showCopySuccess();
+          }
+        } else {
+          if (result) {
+            this.showCopySuccess();
+          }
+        }
+        return;
+      } catch (error) {
+        console.error("Custom copy function failed:", error);
+      }
+    }
+    if (navigator.clipboard && window.isSecureContext) {
+      try {
+        await navigator.clipboard.writeText(code);
+        this.showCopySuccess();
+      } catch (error) {
+        console.error("Clipboard API failed:", error);
+      }
+    } else {
+    }
+  }
+  /**
+   * Shows copy success feedback
+   */
+  showCopySuccess() {
+    if (!this.copyButton || !this.options) return;
+    const originalTitle = this.copyButton.title;
+    const successTooltip = "Copied!";
+    this.copyButton.innerHTML = `<i class="ri-check-line"></i>`;
+    this.copyButton.title = successTooltip;
+    this.copyButton.style.color = "green";
+    setTimeout(() => {
+      if (this.copyButton) {
+        this.copyButton.innerHTML = `<i class="ri-file-copy-line"></i>`;
+        this.copyButton.title = originalTitle;
+        this.copyButton.style.color = "inherit";
+      }
+    }, 1500);
+  }
 };
 var getLanguageMap = () => {
   const languageMap = {};
@@ -6072,6 +6211,23 @@ import { ProsemirrorDevTools } from "@remirror/dev";
 import { createReactManager } from "@remirror/react";
 import { DocExtension } from "remirror/extensions";
 
+// src/editor/extensions/CodeMirror/codemirror-extension.ts
+import { languages as languages3 } from "@codemirror/language-data";
+import {
+  command as command4,
+  extension as extension16,
+  findParentNodeOfType as findParentNodeOfType5,
+  isElementDomNode as isElementDomNode4,
+  isEqual,
+  isTextSelection as isTextSelection3,
+  keyBinding,
+  NodeExtension as NodeExtension10,
+  nodeInputRule as nodeInputRule9,
+  setBlockType as setBlockType3
+} from "@remirror/core";
+import { TextSelection as TextSelection11 } from "@remirror/pm/state";
+import { Decoration as Decoration8, DecorationSet as DecorationSet5 } from "@remirror/pm/view";
+
 // src/editor/transform/parser.ts
 import { Mark } from "@remirror/pm/model";
 import MarkdownIt from "markdown-it";
@@ -6098,6 +6254,9 @@ var rule = (state) => {
       if (match) {
         const checked = match[1] === "x";
         inlineToken.content = inlineToken.content.slice(match[0].length);
+        inlineToken.children?.forEach((child) => {
+          child.content = inlineToken.content;
+        });
         const checkboxToken = new Token("list_checkbox", "input", 0);
         checkboxToken.attrPush(["type", "checkbox"]);
         if (checked) {
@@ -6158,7 +6317,7 @@ function buildHtmlStringFromAst(ast) {
 import Token2 from "markdown-it/lib/token.mjs";
 import voidElements from "void-elements";
 var needSplitInlineHtmlTokenTags = ["img", "iframe", "br"];
-var excludeHtmlInlineNodes = ["html_inline_node", "html_image", "iframe_inline", "html_br"];
+var excludeHtmlInlineNodes = ["html_inline_node", "html_image", "iframe_inline", "html_br", "math_inline"];
 var typeMap = {
   img: "html_image",
   iframe: "iframe_inline",
@@ -6187,6 +6346,7 @@ function getMergeArr(phrasingContents) {
           }
         }
       } else {
+        ;
         phrasingContent.complete = true;
       }
     }
@@ -6273,8 +6433,13 @@ var rule2 = (state) => {
           if (childs.length > 0) {
             const newToken = new Token2("inline", "", 0);
             newToken.children = [...childs];
+            newToken.content = childs.map((child2) => {
+              if (child2.type === "softbreak") {
+                return "\n";
+              }
+              return child2.content;
+            }).join("");
             newTokens.push(newToken);
-            newToken.content = childs.map((child2) => child2.content).join("");
             childs = [];
           }
           newTokens.push(child);
@@ -6314,9 +6479,116 @@ function MarkdownItHtmlInline(md) {
 }
 var markdown_it_html_inline_default = MarkdownItHtmlInline;
 
-// src/editor/transform/markdown-it-mermaid.ts
+// src/editor/transform/markdown-it-math.ts
 import Token3 from "markdown-it/lib/token.mjs";
 var rule3 = (state) => {
+  let edited = false;
+  const tokens = state.tokens;
+  let tokensLength = tokens.length;
+  console.log("tokens", tokens);
+  for (let i = 0; i <= tokensLength - 1; i++) {
+    const curToken = tokens[i];
+    if (curToken.type === "math_block") {
+      const originalContent = curToken.content || "";
+      const mathToken = new Token3("math_block", "", 0);
+      mathToken.attrs = { tex: curToken.attrs?.[0]?.[1] || "" };
+      console.log("mathTOken", mathToken);
+      mathToken.content = originalContent;
+      mathToken.block = true;
+      mathToken.map = curToken.map;
+      tokens[i] = mathToken;
+      edited = true;
+    }
+    let newTokens = [];
+    if (curToken.type === "inline" && curToken.children && curToken.children.some((t18) => t18.type === "math_inline")) {
+      const inlineTokens = curToken.children;
+      inlineTokens.forEach((t18) => {
+        if (t18.type === "math_inline") {
+          const tex = t18.attrs?.tex || "";
+          const originalContent = t18.content || "";
+          const mathToken = new Token3("math_inline", "", 0);
+          mathToken.attrs = { tex };
+          mathToken.content = originalContent;
+          newTokens.push(mathToken);
+          edited = true;
+        } else {
+          newTokens.push(t18);
+        }
+      });
+      tokens.splice(i, 1, ...newTokens);
+      tokensLength += newTokens.length - 1;
+      continue;
+    }
+  }
+  return edited;
+};
+function MarkdownItMath(md) {
+  md.inline.ruler.after("escape", "math_inline", (state, silent) => {
+    const pos = state.pos;
+    const ch = state.src.charCodeAt(pos);
+    if (ch !== 36) return false;
+    if (state.src.charCodeAt(pos + 1) === 36) return false;
+    let start = pos + 1;
+    let end = start;
+    while ((end = state.src.indexOf("$", end)) !== -1) {
+      let backslashes = 0;
+      let i = end - 1;
+      while (i >= 0 && state.src[i] === "\\") {
+        backslashes++;
+        i--;
+      }
+      if (backslashes % 2 === 0) break;
+      end++;
+    }
+    if (end === -1) return false;
+    if (!silent) {
+      const token = state.push("math_inline", "", 0);
+      const tex = state.src.slice(start, end);
+      const originalContent = state.src.slice(pos, end + 1);
+      token.attrs = { tex };
+      token.content = originalContent;
+    }
+    state.pos = end + 1;
+    return true;
+  });
+  md.block.ruler.after("fence", "math_block", (state, startLine, endLine, silent) => {
+    let pos = state.bMarks[startLine] + state.tShift[startLine];
+    const max3 = state.eMarks[startLine];
+    if (pos + 2 > max3) return false;
+    if (state.src.charCodeAt(pos) !== 36 || state.src.charCodeAt(pos + 1) !== 36) return false;
+    pos += 2;
+    if (silent) return true;
+    let nextLine = startLine;
+    let found2 = false;
+    let content = "";
+    for (; ; ) {
+      nextLine++;
+      if (nextLine >= endLine) break;
+      let lineStart = state.bMarks[nextLine] + state.tShift[nextLine];
+      const lineEnd = state.eMarks[nextLine];
+      if (state.src.charCodeAt(lineStart) === 36 && state.src.charCodeAt(lineStart + 1) === 36) {
+        found2 = true;
+        pos = lineStart + 2;
+        break;
+      }
+    }
+    if (!found2) return false;
+    content = state.getLines(startLine + 1, nextLine, state.tShift[startLine + 1], true);
+    const originalContent = state.getLines(startLine, nextLine + 1, state.tShift[startLine], true);
+    const token = state.push("math_block", "div", 0);
+    token.block = true;
+    token.content = originalContent;
+    token.attrs = [["tex", content]];
+    token.map = [startLine, nextLine + 1];
+    state.line = nextLine + 1;
+    return true;
+  }, { alt: ["paragraph", "reference", "blockquote", "list"] });
+  md.core.ruler.push("markdown-it-math", rule3);
+}
+
+// src/editor/transform/markdown-it-mermaid.ts
+import Token4 from "markdown-it/lib/token.mjs";
+var rule4 = (state) => {
   let edited = false;
   const tokens = state.tokens;
   const tokensLength = tokens.length;
@@ -6324,7 +6596,7 @@ var rule3 = (state) => {
     const curToken = tokens[i];
     if (curToken.type === "fence" && curToken.info === "mermaid") {
       const code = curToken.content;
-      const mermaidToken = new Token3("mermaid_node", "", 0);
+      const mermaidToken = new Token4("mermaid_node", "", 0);
       mermaidToken.content = code;
       tokens[i] = mermaidToken;
     }
@@ -6332,7 +6604,7 @@ var rule3 = (state) => {
   return edited;
 };
 function MarkdownItMermaid(md) {
-  md.core.ruler.push("markdown-it-mermaid", rule3);
+  md.core.ruler.push("markdown-it-mermaid", rule4);
 }
 var markdown_it_mermaid_default = MarkdownItMermaid;
 
@@ -6390,7 +6662,11 @@ var MarkdownParseState = class {
       const handler = this.tokenHandlers[tok.type];
       if (!handler) return;
       if (!handler) throw new UnknowMarkdownItTokenError(tok.type, Object.keys(this.tokenHandlers));
-      handler(this, tok);
+      if (tok.type === "inline" && tok.children && tok.children.length > 0) {
+        this.parseTokens(tok.children);
+      } else {
+        handler(this, tok);
+      }
     }
   }
   // Add a node at the current position.
@@ -6508,7 +6784,7 @@ function buildTokenHandlers(schema, parserRules) {
 var MarkdownParser = class {
   constructor(schema, parserRules) {
     this.schema = schema;
-    this.tokenizer = MarkdownIt("commonmark", { html: true }).disable(["emphasis", "autolink", "backticks", "entity", "reference", "image", "link"]).enable(["table"]).use(markdown_it_html_inline_default).use(markdown_it_list_checkbox_default).use(markdown_it_mermaid_default);
+    this.tokenizer = MarkdownIt("commonmark", { html: true }).disable(["emphasis", "autolink", "backticks", "entity", "reference", "image", "link"]).enable(["table"]).use(markdown_it_html_inline_default).use(markdown_it_list_checkbox_default).use(markdown_it_mermaid_default).use(MarkdownItMath);
     this.tokenHandlers = buildTokenHandlers(schema, parserRules);
   }
   parse(text) {
@@ -8095,16 +8371,36 @@ HtmlBrExtension = __decorateClass([
   })
 ], HtmlBrExtension);
 
+// src/editor/extensions/HtmlNode/html-block-extension.ts
+import { NodeExtension as NodeExtension3, extension as extension4, isElementDomNode, nodeInputRule as nodeInputRule2 } from "@remirror/core";
+import { TextSelection as TextSelection4 } from "@remirror/pm/state";
+import block_names from "markdown-it/lib/common/html_blocks.mjs";
+
 // src/editor/utils/common.ts
 var arrayExclude = (arr, excludeArr) => {
   return arr.filter((item) => !excludeArr.includes(item));
 };
 
-// src/editor/extensions/HtmlNode/html-block-extension.ts
-import { NodeExtension as NodeExtension3, isElementDomNode, nodeInputRule as nodeInputRule2 } from "@remirror/core";
-
-// src/editor/extensions/HtmlNode/html-block-view.ts
-import { Compartment as Compartment2 } from "@codemirror/state";
+// src/editor/extensions/CodeMirror/codemirror-utils.ts
+import { Selection as Selection2 } from "@remirror/pm/state";
+function arrowHandler(dir) {
+  return ({ dispatch, view, tr }) => {
+    if (!view) {
+      return false;
+    }
+    if (!(tr.selection.empty && view.endOfTextblock(dir))) {
+      return false;
+    }
+    const side = dir === "left" || dir === "up" ? -1 : 1;
+    const $head = tr.selection.$head;
+    const nextPos = Selection2.near(tr.doc.resolve(side > 0 ? $head.after() : $head.before()), side);
+    if (nextPos.$head && (nextPos.$head.parent.type.name === "codeMirror" || nextPos.$head.parent.type.name === "html_block" || nextPos.$head.parent.type.name === "mermaid_node" || nextPos.$head.parent.type.name === "math_block")) {
+      dispatch?.(tr.setSelection(nextPos));
+      return true;
+    }
+    return false;
+  };
+}
 
 // node_modules/@lezer/common/dist/index.js
 var DefaultBufferLength = 1024;
@@ -14447,11 +14743,12 @@ var autoCloseTags2 = /* @__PURE__ */ EditorView5.inputHandler.of((view, from, to
 });
 
 // src/editor/extensions/HtmlNode/html-block-view.ts
+import { Compartment as Compartment2 } from "@codemirror/state";
 function removeNewlines(str) {
   return str.replace(/\n+|\t/g, "");
 }
 var HtmlNodeView = class {
-  constructor(node, view, getPos) {
+  constructor(node, view, getPos, options) {
     this._htmlSrcElt = null;
     this.destroying = false;
     this.ignoreMutation = () => true;
@@ -14465,6 +14762,7 @@ var HtmlNodeView = class {
     this._outerView = view;
     this._getPos = getPos;
     this.schema = node.type.schema;
+    this.options = options;
     this.dom = document.createElement("div");
     this.dom.classList.add("html-node");
     this._htmlRenderElt = document.createElement("p");
@@ -14539,7 +14837,6 @@ var HtmlNodeView = class {
     } catch (err) {
     }
   }
-  // == Inner Editor ================================== /
   setSelection(anchor, head) {
     if (!this._innerView) {
       this.openEditor();
@@ -14563,6 +14860,10 @@ var HtmlNodeView = class {
         useProsemirrorHistoryKey: true,
         codemirrorEditorViewConfig: {
           parent: this._htmlSrcElt
+        },
+        copyButton: {
+          enabled: true,
+          customCopyFunction: this.options?.customCopyFunction
         }
       }
     });
@@ -14614,31 +14915,6 @@ var HtmlNodeView = class {
   }
 };
 
-// src/editor/extensions/HtmlNode/html-block-extension.ts
-import { TextSelection as TextSelection4 } from "@remirror/pm/state";
-import block_names from "markdown-it/lib/common/html_blocks.mjs";
-
-// src/editor/extensions/CodeMirror/codemirror-utils.ts
-import { Selection as Selection2 } from "@remirror/pm/state";
-function arrowHandler(dir) {
-  return ({ dispatch, view, tr }) => {
-    if (!view) {
-      return false;
-    }
-    if (!(tr.selection.empty && view.endOfTextblock(dir))) {
-      return false;
-    }
-    const side = dir === "left" || dir === "up" ? -1 : 1;
-    const $head = tr.selection.$head;
-    const nextPos = Selection2.near(tr.doc.resolve(side > 0 ? $head.after() : $head.before()), side);
-    if (nextPos.$head && (nextPos.$head.parent.type.name === "codeMirror" || nextPos.$head.parent.type.name === "html_block" || nextPos.$head.parent.type.name === "mermaid_node")) {
-      dispatch?.(tr.setSelection(nextPos));
-      return true;
-    }
-    return false;
-  };
-}
-
 // src/editor/extensions/HtmlNode/html-block-extension.ts
 var LineHtmlBlockExtension = class extends NodeExtension3 {
   get name() {
@@ -14671,7 +14947,7 @@ var LineHtmlBlockExtension = class extends NodeExtension3 {
   }
   createNodeViews() {
     return (node, view, getPos) => {
-      return new HtmlNodeView(node, view, getPos);
+      return new HtmlNodeView(node, view, getPos, this.options);
     };
   }
   createInputRules() {
@@ -14717,25 +14993,35 @@ var LineHtmlBlockExtension = class extends NodeExtension3 {
     state.ensureNewLine();
   }
 };
+LineHtmlBlockExtension = __decorateClass([
+  extension4({
+    defaultOptions: {
+      customCopyFunction: () => true
+    },
+    staticKeys: [],
+    handlerKeys: [],
+    customHandlerKeys: []
+  })
+], LineHtmlBlockExtension);
 
 // src/editor/extensions/HtmlNode/html-inline-node.tsx
 import block_names2 from "markdown-it/lib/common/html_blocks.mjs";
 import {
   ExtensionTag as ExtensionTag3,
   NodeExtension as NodeExtension4,
-  extension as extension4,
+  extension as extension5,
   nodeInputRule as nodeInputRule3
 } from "remirror";
 
 // src/editor/extensions/HtmlNode/html-inline-view.ts
+import { history as history2, redo as redo2, undo as undo2 } from "@remirror/pm/history";
+import { keymap as keymap3 } from "@remirror/pm/keymap";
 import {
   EditorState as EditorState2,
-  TextSelection as TextSelection5,
-  Plugin
+  Plugin,
+  TextSelection as TextSelection5
 } from "@remirror/pm/state";
 import { EditorView as EditorView6 } from "@remirror/pm/view";
-import { keymap as keymap3 } from "@remirror/pm/keymap";
-import { history as history2, redo as redo2, undo as undo2 } from "@remirror/pm/history";
 function collapseCmd(outerView, dir, requireOnBorder, requireEmptySelection = true) {
   return (innerState, dispatch) => {
     let outerState = outerView.state;
@@ -14773,10 +15059,10 @@ var HTMLInlineView = class {
     this._isEditing = false;
     this._tagName = "span";
     this.dom = document.createElement(this._tagName);
-    this.dom.classList.add("inline-html");
+    this.dom.classList.add("inline-input");
     this._htmlRenderElt = document.createElement("span");
     this._htmlRenderElt.textContent = "";
-    this._htmlRenderElt.classList.add("inline-html-render");
+    this._htmlRenderElt.classList.add("inline-input-render");
     this.dom.appendChild(this._htmlRenderElt);
     this._htmlSrcElt = document.createElement("span");
     this._htmlSrcElt.spellcheck = false;
@@ -14870,7 +15156,7 @@ var HTMLInlineView = class {
       if (this._htmlRenderElt) {
         this.dom.append(this._htmlRenderElt);
         if (preview) {
-          this._htmlRenderElt.classList.add("inline-html-preview");
+          this._htmlRenderElt.classList.add("inline-input-preview");
         }
       }
     } catch (err) {
@@ -14939,7 +15225,7 @@ var HTMLInlineView = class {
       }),
       dispatchTransaction: this.dispatchInner.bind(this)
     });
-    this._innerView.dom.classList.add("inline-html-src");
+    this._innerView.dom.classList.add("inline-input-src");
     this._innerView.dom.classList.remove("ProseMirror");
     let innerState = this._innerView.state;
     this._innerView.focus();
@@ -14947,7 +15233,7 @@ var HTMLInlineView = class {
     this._innerView.dispatch(
       innerState.tr.setSelection(TextSelection5.create(innerState.doc, innerPos))
     );
-    this._htmlRenderElt?.classList.add("inline-html-preview");
+    this._htmlRenderElt?.classList.add("inline-input-preview");
     this._isEditing = true;
   }
   /**
@@ -14967,8 +15253,8 @@ var HTMLInlineView = class {
     }
     if (render) {
       this.renderHtml();
-      this._htmlRenderElt?.classList.add("inline-html-render");
-      this._htmlRenderElt?.classList.remove("inline-html-preview");
+      this._htmlRenderElt?.classList.add("inline-input-render");
+      this._htmlRenderElt?.classList.remove("inline-input-preview");
     }
     this._isEditing = false;
   }
@@ -15010,7 +15296,7 @@ var HtmlInlineNodeExtension = class extends NodeExtension4 {
       },
       toDOM: (node) => {
         const dom = document.createElement("span");
-        dom.classList.add("inline-html-render");
+        dom.classList.add("inline-input-render");
         dom.innerHTML = node.attrs.htmlText;
         return dom;
       }
@@ -15067,7 +15353,10 @@ var HtmlInlineNodeExtension = class extends NodeExtension4 {
 };
 HtmlInlineNodeExtension.disableExtraAttributes = true;
 HtmlInlineNodeExtension = __decorateClass([
-  extension4({
+  extension5({
+    staticKeys: [],
+    handlerKeys: [],
+    customHandlerKeys: [],
     defaultOptions: {
       handleViewImgSrcUrl: async (src) => src
     }
@@ -15079,7 +15368,7 @@ var import_querystringify = __toESM(require_querystringify(), 1);
 import {
   command as command2,
   cx as cx2,
-  extension as extension5,
+  extension as extension6,
   ExtensionTag as ExtensionTag4,
   findSelectedNodeOfType,
   NodeExtension as NodeExtension5,
@@ -15091,10 +15380,6 @@ import {
 // src/editor/extensions/Iframe/Iframe-nodeview.tsx
 import { Popover } from "zens";
 
-// src/editor/components/Resizable/Resizable.tsx
-import styled5 from "styled-components";
-import { useRef as useRef2, useEffect as useEffect2, useCallback, memo as memo2, useState as useState2 } from "react";
-
 // node_modules/@remirror/core-helpers/dist/remirror-core-helpers.js
 var import_make_error = __toESM(require_make_error(), 1);
 
@@ -15273,6 +15558,10 @@ var errorMessageMap = {
   [ErrorConstant.I18N_CONTEXT]: "You called `useI18n()` outside of an `I18nProvider` context."
 };
 
+// src/editor/components/Resizable/Resizable.tsx
+import { memo as memo2, useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import styled5 from "styled-components";
+
 // src/editor/components/Resizable/ResizableHandle.tsx
 import styled4, { css as css4 } from "styled-components";
 import { jsx as jsx5 } from "react/jsx-runtime";
@@ -15400,7 +15689,6 @@ var ResizableContainer = styled5.div`
   display: inline-block;
   position: relative;
   max-width: 100%;
-  line-height: 0;
   user-select: none;
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
@@ -15755,7 +16043,7 @@ __decorateClass([
   command2()
 ], IframeExtension.prototype, "updateYouTubeVideo", 1);
 IframeExtension = __decorateClass([
-  extension5({
+  extension6({
     defaultOptions: {
       defaultSource: "",
       class: "remirror-iframe",
@@ -15799,7 +16087,7 @@ function createYouTubeUrl(props) {
 import {
   command as command3,
   ErrorConstant as ErrorConstant2,
-  extension as extension6,
+  extension as extension7,
   ExtensionTag as ExtensionTag5,
   getTextSelection,
   invariant,
@@ -16083,7 +16371,7 @@ __decorateClass([
   command3()
 ], HtmlImageExtension.prototype, "uploadImage", 1);
 HtmlImageExtension = __decorateClass([
-  extension6({
+  extension7({
     defaultOptions: {
       createPlaceholder,
       handleViewImgSrcUrl: async (src) => src,
@@ -16159,7 +16447,7 @@ import { isTextSelection as isTextSelection2, PlainExtension as PlainExtension4
 import { Decoration as Decoration4, DecorationSet as DecorationSet3 } from "@remirror/pm/view";
 
 // src/editor/extensions/Inline/inline-mark-extensions.ts
-import { MarkExtension, extension as extension7 } from "@remirror/core";
+import { MarkExtension, extension as extension8 } from "@remirror/core";
 
 // src/editor/extensions/Inline/format-href.ts
 function formatHref(location2) {
@@ -17170,7 +17458,7 @@ var ImgUri = class extends MarkExtension {
 };
 ImgUri.disableExtraAttributes = true;
 ImgUri = __decorateClass([
-  extension7({
+  extension8({
     defaultOptions: {
       handleViewImgSrcUrl: async (src) => src
     },
@@ -20120,30 +20408,668 @@ function isOrderedListNode(node) {
   return node.type.name === "list" && node.attrs.kind === "ordered";
 }
 
-// src/editor/extensions/Mermaid/mermaid-extension.ts
-import { NodeExtension as NodeExtension7, isElementDomNode as isElementDomNode3, nodeInputRule as nodeInputRule6 } from "@remirror/core";
-
-// src/editor/extensions/Mermaid/mermaid-view.ts
-import { Compartment as Compartment3 } from "@codemirror/state";
-import mermaid from "mermaid";
-
-// src/editor/utils/eventbus.ts
-import EventBus from "js-event-bus";
-var eventBus = new EventBus();
+// src/editor/extensions/Math/math-inline-extension.tsx
+import { extension as extension9, ExtensionTag as ExtensionTag6, NodeExtension as NodeExtension7, nodeInputRule as nodeInputRule6, omitExtraAttributes as omitExtraAttributes3 } from "@remirror/core";
 
-// src/editor/extensions/Mermaid/mermaid-view.ts
-var renderCount = { count: 0 };
-var MermaidNodeView = class {
-  constructor(node, view, getPos) {
-    this._htmlSrcElt = null;
-    this.destroying = false;
-    this.renderViewId = null;
-    this.ignoreMutation = () => true;
-    this.handleMouseEnter = () => {
-      this.dom.classList.add("node-enter");
-    };
-    this.handleMouseLeave = () => {
-      this.dom.classList.remove("node-enter");
+// src/editor/extensions/Math/math-inline-nodeview.tsx
+import { history as history3, redo as redo3, undo as undo3 } from "@remirror/pm/history";
+import { keymap as keymap4 } from "@remirror/pm/keymap";
+import { EditorState as EditorState3, Plugin as Plugin2, TextSelection as TextSelection8 } from "@remirror/pm/state";
+import { EditorView as EditorView7 } from "@remirror/pm/view";
+import katex from "katex";
+function collapseCmd2(outerView, dir, requireOnBorder, requireEmptySelection = true) {
+  return (innerState, dispatch) => {
+    const outerState = outerView.state;
+    const { to: outerTo, from: outerFrom } = outerState.selection;
+    const { to: innerTo, from: innerFrom } = innerState.selection;
+    if (requireEmptySelection && innerTo !== innerFrom) return false;
+    const currentPos = dir > 0 ? innerTo : innerFrom;
+    if (requireOnBorder) {
+      const nodeSize2 = innerState.doc.nodeSize - 2;
+      if (dir > 0 && currentPos < nodeSize2) return false;
+      if (dir < 0 && currentPos > 0) return false;
+    }
+    if (dispatch) {
+      const targetPos = dir > 0 ? outerTo : outerFrom;
+      outerView.dispatch(
+        outerState.tr.setSelection(TextSelection8.create(outerState.doc, targetPos))
+      );
+      outerView.focus();
+    }
+    return true;
+  };
+}
+var MathInlineView = class {
+  constructor(node, view, getPos) {
+    this.openEditor = () => {
+      if (this._innerView) return;
+      const currentTex = this._node.attrs.tex ?? "";
+      this._innerView = new EditorView7(this._srcElt, {
+        state: EditorState3.create({
+          doc: this._outerView.state.schema.node(
+            "paragraph",
+            null,
+            currentTex ? [this._outerView.state.schema.text(currentTex)] : [this._outerView.state.schema.text("\u200B")]
+          ),
+          plugins: [
+            history3(),
+            keymap4({
+              ArrowLeft: collapseCmd2(this._outerView, -1, true),
+              ArrowRight: collapseCmd2(this._outerView, 1, true),
+              ArrowUp: collapseCmd2(this._outerView, -1, true),
+              ArrowDown: collapseCmd2(this._outerView, 1, true),
+              "Mod-z": (state, dispatch, view) => undo3(state, dispatch, view),
+              "Shift-Mod-z": (state, dispatch, view) => redo3(state, dispatch, view),
+              Backspace: (state) => {
+                const { from, to } = state.selection;
+                if (from === 0 && to === state.doc.content.size) {
+                  const pos = this._getPos();
+                  if (pos !== void 0) {
+                    const tr = this._outerView.state.tr.delete(pos, pos + this._node.nodeSize);
+                    this._outerView.dispatch(tr);
+                    this._outerView.focus();
+                    return true;
+                  }
+                }
+                return false;
+              }
+            }),
+            new Plugin2({
+              props: {
+                handleDOMEvents: {
+                  blur: () => {
+                    const pos = this._getPos();
+                    if (pos !== void 0) {
+                      const text = (this._innerView?.state.doc.textContent || "").replace(
+                        /\u200b/g,
+                        ""
+                      );
+                      const tr = this._outerView.state.tr;
+                      tr.setNodeAttribute(pos, "fromInput", false);
+                      tr.setNodeAttribute(pos, "tex", text);
+                      this._outerView.dispatch(tr);
+                    }
+                    this.closeEditor();
+                    return true;
+                  }
+                }
+              }
+            })
+          ]
+        }),
+        dispatchTransaction: this.dispatchInner.bind(this)
+      });
+      this._innerView.dom.classList.add("inline-input-src");
+      this._innerView.dom.classList.remove("ProseMirror");
+      this._srcElt.style.display = "inline";
+      const innerState = this._innerView.state;
+      this._innerView.focus();
+      const innerPos = innerState.doc.textContent.length || 0;
+      this._innerView.dispatch(
+        innerState.tr.setSelection(TextSelection8.create(innerState.doc, innerPos))
+      );
+      this._renderElt?.classList.add("inline-input-preview");
+      this._isEditing = true;
+    };
+    this.closeEditor = (render = true) => {
+      if (this._srcElt) {
+        this._srcElt.style.display = "none";
+      }
+      if (this._innerView) {
+        this._innerView.destroy();
+        this._innerView = void 0;
+      }
+      if (render) {
+        this.renderTex();
+      }
+      this._isEditing = false;
+    };
+    this._node = node;
+    this._outerView = view;
+    this._getPos = getPos;
+    this._isEditing = false;
+    this.dom = document.createElement("span");
+    this.dom.classList.add("inline-input");
+    this._renderElt = document.createElement("span");
+    this._renderElt.classList.add("inline-input-render");
+    this.dom.appendChild(this._renderElt);
+    this._srcElt = document.createElement("span");
+    this._srcElt.spellcheck = false;
+    this._srcElt.style.display = "none";
+    this.dom.appendChild(this._srcElt);
+    this.dom.addEventListener("click", () => this.ensureFocus());
+    if (node.attrs.fromInput) {
+      setTimeout(() => this.openEditor());
+    } else {
+      this.renderTex();
+    }
+  }
+  destroy() {
+    this.closeEditor(false);
+    if (this._renderElt) {
+      this._renderElt.remove();
+      delete this._renderElt;
+    }
+    if (this._srcElt) {
+      this._srcElt.remove();
+      delete this._srcElt;
+    }
+    this.dom.remove();
+  }
+  ensureFocus() {
+    if (this._innerView && this._outerView.hasFocus()) {
+      this._innerView.focus();
+    }
+  }
+  update(node, _decorations) {
+    if (!node.sameMarkup(this._node)) return false;
+    this._node = node;
+    if (!this._isEditing) this.renderTex();
+    return true;
+  }
+  selectNode() {
+    if (!this._outerView.editable) return;
+    if (!this._isEditing) this.openEditor();
+  }
+  deselectNode() {
+    if (this._isEditing) this.closeEditor();
+  }
+  stopEvent(event) {
+    return this._innerView !== void 0 && event.target !== void 0 && this._innerView.dom.contains(event.target);
+  }
+  ignoreMutation() {
+    return true;
+  }
+  renderTex(preview = false) {
+    if (!this._renderElt) return;
+    const raw = this._innerView?.state.doc.textContent ?? this._node.attrs.tex ?? "";
+    const tex = raw.replace(/\u200b/g, "").trim();
+    try {
+      while (this._renderElt.firstChild) {
+        this._renderElt.firstChild.remove();
+      }
+      const container = document.createElement("span");
+      container.setAttribute("data-type", "math-inline");
+      katex.render(tex || "", container, {
+        throwOnError: false,
+        displayMode: false,
+        output: "mathml"
+      });
+      let newRenderEl = container;
+      if (container.childElementCount === 1 && container.firstElementChild) {
+        newRenderEl = container.firstElementChild;
+      }
+      this._renderElt.replaceWith(newRenderEl);
+      this._renderElt = newRenderEl;
+      console.log("this.renderElt", this._renderElt.outerHTML);
+      this.dom.appendChild(this._renderElt);
+      if (preview) {
+        this._renderElt.classList.add("inline-input-preview");
+      } else {
+        this._renderElt.classList.add("inline-input-render");
+        this._renderElt.classList.remove("inline-input-preview");
+      }
+    } catch (err) {
+      console.error(err);
+      this._renderElt.classList.add("parse-error");
+      this.dom.setAttribute("title", String(err));
+    }
+  }
+  dispatchInner(tr) {
+    if (!this._innerView) return;
+    const { state } = this._innerView.state.applyTransaction(tr);
+    this._innerView.updateState(state);
+    this.renderTex(true);
+  }
+};
+
+// src/editor/extensions/Math/math-inline-extension.tsx
+var MathInlineExtension = class extends NodeExtension7 {
+  get name() {
+    return "math_inline";
+  }
+  createTags() {
+    return [ExtensionTag6.InlineNode];
+  }
+  createNodeSpec(extra, override) {
+    return {
+      inline: true,
+      atom: true,
+      selectable: true,
+      // disallow marks on the inline atom similar to html-inline-node
+      marks: "",
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        tex: { default: "" },
+        fromInput: { default: false }
+      },
+      parseDOM: [
+        {
+          tag: 'span[data-type="math-inline"]',
+          getAttrs: (dom) => {
+            const el = dom;
+            return { ...extra.parse(dom), tex: el.getAttribute("data-tex") ?? "" };
+          }
+        },
+        ...override.parseDOM ?? []
+      ],
+      toDOM: (node) => {
+        const attrs = omitExtraAttributes3(node.attrs, extra);
+        return ["span", { ...extra.dom(node), "data-type": "math-inline", "data-tex": attrs.tex }];
+      }
+    };
+  }
+  createInputRules() {
+    return [
+      // Typed inline math trigger: $$ -> insert empty inline math and focus inside
+      nodeInputRule6({
+        regexp: /\$\$(?!\$)/,
+        type: this.type,
+        getAttributes: () => ({ tex: "", fromInput: true })
+      }),
+      // Pasted HTML span -> inline math node
+      nodeInputRule6({
+        regexp: /<span[^>]*data-type=["']math-inline["'][^>]*><\/span>/,
+        type: this.type,
+        getAttributes: () => ({ fromInput: false })
+      }),
+      // Typed inline math: $...$
+      // Avoids $$...$$ by requiring at least one non-$ char between delimiters
+      nodeInputRule6({
+        regexp: /\$([^$\n]+?)\$/,
+        type: this.type,
+        getAttributes: (match) => {
+          console.log(match);
+          return { tex: match[1] ?? "", fromInput: true };
+        }
+      })
+    ];
+  }
+  fromMarkdown() {
+    return [
+      {
+        type: 6 /* inline */,
+        token: "math_inline",
+        node: this.name,
+        getAttrs: (tok) => {
+          return { tex: tok.attrs?.tex || "" };
+        }
+      }
+    ];
+  }
+  toMarkdown({ state, node }) {
+    const tex = node.attrs.tex;
+    state.text(`$${tex}$`, false);
+  }
+  createNodeViews() {
+    return (node, view, getPos) => new MathInlineView(node, view, getPos);
+  }
+};
+MathInlineExtension.disableExtraAttributes = true;
+MathInlineExtension = __decorateClass([
+  extension9({
+    defaultOptions: {}
+  })
+], MathInlineExtension);
+
+// src/editor/extensions/Math/math-block-extension.tsx
+import { extension as extension10, ExtensionTag as ExtensionTag7, NodeExtension as NodeExtension8, nodeInputRule as nodeInputRule7 } from "@remirror/core";
+
+// src/editor/extensions/Math/math-block-nodeview.tsx
+import { exitCode as exitCode3 } from "@remirror/pm/commands";
+import { history as history4, redo as redo4, undo as undo4 } from "@remirror/pm/history";
+import { keymap as keymap5 } from "@remirror/pm/keymap";
+import {
+  EditorState as EditorState4,
+  Plugin as Plugin3,
+  Selection as Selection3,
+  TextSelection as TextSelection9
+} from "@remirror/pm/state";
+import { EditorView as EditorView8 } from "@remirror/pm/view";
+import katex2 from "katex";
+function collapseCmd3(outerView, dir, requireOnBorder, requireEmptySelection = true, getPos, node) {
+  return (innerState, dispatch) => {
+    const outerState = outerView.state;
+    const { to: innerTo, from: innerFrom } = innerState.selection;
+    if (requireEmptySelection && innerTo !== innerFrom) return false;
+    const currentPos = dir > 0 ? innerTo : innerFrom;
+    if (requireOnBorder) {
+      const nodeSize2 = innerState.doc.nodeSize - 2;
+      if (dir > 0 && currentPos < nodeSize2) return false;
+      if (dir < 0 && currentPos > 0) return false;
+    }
+    if (dispatch) {
+      const pos = getPos?.();
+      if (pos === void 0 || !node) return false;
+      let targetPos;
+      if (dir > 0) {
+        targetPos = pos + node.nodeSize;
+      } else {
+        targetPos = pos;
+      }
+      if (targetPos < 0 || targetPos > outerState.doc.content.size) {
+        return false;
+      }
+      if (dir === 1 && exitCode3(outerView.state, outerView.dispatch)) {
+        outerView.focus();
+      } else {
+        const selection = Selection3.near(outerState.doc.resolve(targetPos), dir);
+        const tr = outerView.state.tr.setSelection(selection).scrollIntoView();
+        outerView.dispatch(tr);
+        outerView.focus();
+      }
+      return true;
+    }
+    return true;
+  };
+}
+var MathBlockView = class {
+  constructor(node, view, getPos) {
+    this.openEditor = () => {
+      if (this._innerView) return;
+      const currentTex = this._node.attrs.tex ?? "";
+      this._innerView = new EditorView8(this._srcElt, {
+        state: EditorState4.create({
+          doc: this._outerView.state.schema.node(
+            "paragraph",
+            null,
+            currentTex ? [this._outerView.state.schema.text(currentTex)] : [this._outerView.state.schema.text("\u200B")]
+          ),
+          plugins: [
+            history4(),
+            keymap5({
+              Tab: (state, dispatch) => {
+                if (dispatch) dispatch(state.tr.insertText("	"));
+                return true;
+              },
+              ArrowLeft: collapseCmd3(this._outerView, -1, true, true, this._getPos, this._node),
+              ArrowRight: collapseCmd3(this._outerView, 1, true, true, this._getPos, this._node),
+              ArrowUp: collapseCmd3(this._outerView, -1, true, true, this._getPos, this._node),
+              ArrowDown: collapseCmd3(this._outerView, 1, true, true, this._getPos, this._node),
+              "Mod-z": (state, dispatch, view) => undo4(state, dispatch, view),
+              "Shift-Mod-z": (state, dispatch, view) => redo4(state, dispatch, view),
+              Backspace: (state, dispatch) => {
+                const { from, to } = state.selection;
+                if (from === 0 && to === state.doc.content.size) {
+                  const pos = this._getPos();
+                  if (pos !== void 0) {
+                    const tr = this._outerView.state.tr.delete(pos, pos + this._node.nodeSize);
+                    this._outerView.dispatch(tr);
+                    this._outerView.focus();
+                    return true;
+                  }
+                }
+                return false;
+              }
+            }),
+            new Plugin3({
+              props: {
+                handleDOMEvents: {
+                  blur: () => {
+                    const pos = this._getPos();
+                    if (pos !== void 0) {
+                      const text = (this._innerView?.state.doc.textContent || "").replace(
+                        /\u200b/g,
+                        ""
+                      );
+                      const tr = this._outerView.state.tr;
+                      tr.setNodeAttribute(pos, "fromInput", false);
+                      tr.setNodeAttribute(pos, "tex", text);
+                      this._outerView.dispatch(tr);
+                    }
+                    this.closeEditor();
+                    return true;
+                  }
+                }
+              }
+            })
+          ]
+        }),
+        dispatchTransaction: this.dispatchInner.bind(this)
+      });
+      this._innerView.dom.classList.add("inline-input-src");
+      this._innerView.dom.classList.remove("ProseMirror");
+      this._srcElt.style.display = "inline";
+      const innerState = this._innerView.state;
+      this._innerView.focus();
+      const innerPos = innerState.doc.textContent.length || 0;
+      this._innerView.dispatch(
+        innerState.tr.setSelection(TextSelection9.create(innerState.doc, innerPos))
+      );
+      this._renderElt?.classList.add("math-block-preview");
+      this._isEditing = true;
+    };
+    this.closeEditor = (render = true) => {
+      if (this._srcElt) {
+        this._srcElt.style.display = "none";
+      }
+      if (this._innerView) {
+        this._innerView.destroy();
+        this._innerView = void 0;
+      }
+      if (render) {
+        this.renderTex();
+      }
+      this._isEditing = false;
+    };
+    this._node = node;
+    this._outerView = view;
+    this._getPos = getPos;
+    this._isEditing = false;
+    this.dom = document.createElement("div");
+    this.dom.classList.add("math-block-nodeview");
+    this._renderElt = document.createElement("div");
+    this._renderElt.classList.add("math-block-render");
+    this.dom.appendChild(this._renderElt);
+    this._srcElt = document.createElement("div");
+    this._srcElt.spellcheck = false;
+    this._srcElt.style.display = "none";
+    this.dom.appendChild(this._srcElt);
+    this.dom.addEventListener("click", () => this.ensureFocus());
+    if (node.attrs.fromInput) {
+      setTimeout(() => this.openEditor());
+    } else {
+      this.renderTex();
+    }
+  }
+  destroy() {
+    this.closeEditor(false);
+    if (this._renderElt) {
+      this._renderElt.remove();
+      delete this._renderElt;
+    }
+    if (this._srcElt) {
+      this._srcElt.remove();
+      delete this._srcElt;
+    }
+    this.dom.remove();
+  }
+  ensureFocus() {
+    if (this._outerView.hasFocus()) {
+      if (this._innerView) {
+        this._innerView.focus();
+      } else {
+        this.openEditor();
+      }
+    }
+  }
+  update(node, _decorations) {
+    if (!node.sameMarkup(this._node)) return false;
+    this._node = node;
+    if (!this._isEditing) this.renderTex();
+    return true;
+  }
+  selectNode() {
+    if (!this._outerView.editable) return;
+    if (!this._isEditing) this.openEditor();
+  }
+  deselectNode() {
+    if (this._isEditing) this.closeEditor();
+  }
+  setSelection() {
+    if (!this._innerView) {
+      this.openEditor();
+    } else {
+    }
+  }
+  stopEvent() {
+    return true;
+  }
+  ignoreMutation() {
+    return true;
+  }
+  renderTex(preview = false) {
+    if (!this._renderElt) return;
+    const raw = this._innerView?.state.doc.textContent ?? this._node.attrs.tex ?? "";
+    const tex = raw.replace(/\u200b/g, "").trim();
+    try {
+      while (this._renderElt.firstChild) {
+        this._renderElt.firstChild.remove();
+      }
+      const container = document.createElement("div");
+      container.setAttribute("data-type", "math-block");
+      katex2.render(tex || "", container, {
+        throwOnError: false,
+        displayMode: false,
+        output: "mathml"
+      });
+      let newRenderEl = container;
+      if (container.childElementCount === 1 && container.firstElementChild) {
+        newRenderEl = container.firstElementChild;
+      }
+      this._renderElt.replaceWith(newRenderEl);
+      this._renderElt = newRenderEl;
+      console.log("this.renderElt", this._renderElt.outerHTML);
+      this.dom.appendChild(this._renderElt);
+      if (preview) {
+        this._renderElt.classList.add("math-block-preview");
+      } else {
+        this._renderElt.classList.add("math-block-render");
+        this._renderElt.classList.remove("math-block-preview");
+      }
+    } catch (err) {
+      console.error(err);
+      this._renderElt.classList.add("parse-error");
+      this.dom.setAttribute("title", String(err));
+    }
+  }
+  dispatchInner(tr) {
+    if (!this._innerView) return;
+    const newState = this._innerView.state.apply(tr);
+    this._innerView.updateState(newState);
+    this.renderTex(true);
+  }
+};
+
+// src/editor/extensions/Math/math-block-extension.tsx
+var MathBlockExtension = class extends NodeExtension8 {
+  get name() {
+    return "math_block";
+  }
+  createTags() {
+    return [ExtensionTag7.Block];
+  }
+  createNodeSpec(extra, override) {
+    return {
+      group: "block",
+      content: "text*",
+      defining: true,
+      code: true,
+      marks: "",
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        tex: { default: "" },
+        fromInput: { default: false }
+      },
+      parseDOM: [
+        {
+          tag: 'div[data-type="math-block"]',
+          getAttrs: (dom) => extra.parse(dom)
+        },
+        ...override.parseDOM ?? []
+      ],
+      toDOM: () => ["div", { "data-type": "math-block" }, 0],
+      isolating: true
+    };
+  }
+  createNodeViews() {
+    return (node, view, getPos) => new MathBlockView(node, view, getPos);
+  }
+  createInputRules() {
+    return [
+      nodeInputRule7({
+        regexp: /^\$\$$/,
+        type: this.type,
+        getAttributes: (match) => {
+          return { tex: match[1] ?? "", fromInput: true };
+        }
+      })
+    ];
+  }
+  createKeymap() {
+    return {
+      ArrowLeft: arrowHandler("left"),
+      ArrowRight: arrowHandler("right"),
+      ArrowUp: arrowHandler("up"),
+      ArrowDown: arrowHandler("down")
+    };
+  }
+  fromMarkdown() {
+    return [
+      {
+        type: 2 /* block */,
+        token: "math_block",
+        node: this.name,
+        hasOpenClose: false,
+        getAttrs: (tok) => {
+          return { tex: tok.attrs?.tex || "" };
+        }
+      }
+    ];
+  }
+  toMarkdown({ state, node }) {
+    state.write("$$\n");
+    const tex = node.attrs.tex || "";
+    state.text(tex, false);
+    if (!tex.endsWith("\n")) {
+      state.text("\n");
+    }
+    state.write("$$");
+    state.closeBlock(node);
+    state.ensureNewLine();
+  }
+};
+MathBlockExtension = __decorateClass([
+  extension10({
+    defaultOptions: {}
+  })
+], MathBlockExtension);
+
+// src/editor/extensions/Mermaid/mermaid-extension.ts
+import { NodeExtension as NodeExtension9, extension as extension11, isElementDomNode as isElementDomNode3, nodeInputRule as nodeInputRule8 } from "@remirror/core";
+import { TextSelection as TextSelection10 } from "@remirror/pm/state";
+
+// src/editor/utils/eventbus.ts
+import EventBus from "js-event-bus";
+var eventBus = new EventBus();
+
+// src/editor/extensions/Mermaid/mermaid-view.ts
+import { Compartment as Compartment3 } from "@codemirror/state";
+import mermaid from "mermaid";
+var renderCount = { count: 0 };
+var MermaidNodeView = class {
+  constructor(node, view, getPos, options) {
+    this._htmlSrcElt = null;
+    this.destroying = false;
+    this.renderViewId = null;
+    this.ignoreMutation = () => true;
+    this.handleMouseEnter = () => {
+      this.dom.classList.add("node-enter");
+    };
+    this.handleMouseLeave = () => {
+      this.dom.classList.remove("node-enter");
     };
     // == Rendering ===================================== //
     this.changeTheme = () => {
@@ -20153,6 +21079,7 @@ var MermaidNodeView = class {
     this._outerView = view;
     this._getPos = getPos;
     this.schema = node.type.schema;
+    this.options = options;
     this.dom = document.createElement("div");
     this.dom.classList.add("mermaid-node");
     this._htmlRenderElt = document.createElement("p");
@@ -20248,6 +21175,10 @@ var MermaidNodeView = class {
         useProsemirrorHistoryKey: true,
         codemirrorEditorViewConfig: {
           parent: this._htmlSrcElt
+        },
+        copyButton: {
+          enabled: true,
+          customCopyFunction: this.options?.customCopyFunction
         }
       }
     });
@@ -20295,8 +21226,7 @@ var MermaidNodeView = class {
 };
 
 // src/editor/extensions/Mermaid/mermaid-extension.ts
-import { TextSelection as TextSelection8 } from "@remirror/pm/state";
-var MermaidBlockExtension = class extends NodeExtension7 {
+var MermaidBlockExtension = class extends NodeExtension9 {
   get name() {
     return "mermaid_node";
   }
@@ -20326,17 +21256,17 @@ var MermaidBlockExtension = class extends NodeExtension7 {
   }
   createNodeViews() {
     return (node, view, getPos) => {
-      return new MermaidNodeView(node, view, getPos);
+      return new MermaidNodeView(node, view, getPos, this.options);
     };
   }
   createInputRules() {
     const rules = [
-      nodeInputRule6({
+      nodeInputRule8({
         regexp: /^```mermaid$/,
         type: this.type,
         beforeDispatch: ({ tr, start, match }) => {
           const $pos = tr.doc.resolve(start);
-          tr.setSelection(TextSelection8.near($pos));
+          tr.setSelection(TextSelection10.near($pos));
         }
       })
     ];
@@ -20369,6 +21299,16 @@ var MermaidBlockExtension = class extends NodeExtension7 {
     state.ensureNewLine();
   }
 };
+MermaidBlockExtension = __decorateClass([
+  extension11({
+    defaultOptions: {
+      customCopyFunction: void 0
+    },
+    staticKeys: [],
+    handlerKeys: [],
+    customHandlerKeys: []
+  })
+], MermaidBlockExtension);
 
 // src/editor/extensions/Paragraph/paragraph-extension.ts
 import { ParagraphExtension } from "remirror/extensions";
@@ -20394,8 +21334,8 @@ var LineParagraphExtension = class extends ParagraphExtension {
 };
 
 // src/editor/extensions/Placeholder/index.ts
-import { extension as extension8, ManagerPhase, PlainExtension as PlainExtension6 } from "@remirror/core";
-import { Decoration as Decoration5, DecorationSet as DecorationSet4 } from "@remirror/pm/view";
+import { extension as extension12, ManagerPhase, PlainExtension as PlainExtension6 } from "@remirror/core";
+import { Decoration as Decoration7, DecorationSet as DecorationSet4 } from "@remirror/pm/view";
 import { ExtensionPlaceholderTheme } from "@remirror/theme";
 var PlaceholderExtension = class extends PlainExtension6 {
   get name() {
@@ -20419,7 +21359,7 @@ var PlaceholderExtension = class extends PlainExtension6 {
   }
 };
 PlaceholderExtension = __decorateClass([
-  extension8({
+  extension12({
     defaultOptions: {
       emptyNodeClass: ExtensionPlaceholderTheme.IS_EMPTY,
       placeholder: ""
@@ -20435,7 +21375,7 @@ function createDecorationSet(props) {
   const decorations = [];
   state.doc.descendants((node, pos) => {
     if (node.type.name === "paragraph" && node.content.size === 0 && placeholder && state.selection.from - 1 === pos) {
-      const placeholderDecoration = Decoration5.node(pos, pos + node.nodeSize, {
+      const placeholderDecoration = Decoration7.node(pos, pos + node.nodeSize, {
         class: emptyNodeClass,
         "data-placeholder": placeholder
       });
@@ -20446,7 +21386,7 @@ function createDecorationSet(props) {
 }
 
 // src/editor/extensions/Shortcuts/shortcuts-extension.ts
-import { extension as extension9, PlainExtension as PlainExtension7 } from "@remirror/core";
+import { extension as extension13, PlainExtension as PlainExtension7 } from "@remirror/core";
 
 // src/editor/extensions/Shortcuts/configs/shortcuts.ts
 import pkg2 from "lodash";
@@ -20502,7 +21442,7 @@ var ShortcutManager = class _ShortcutManager {
 };
 
 // src/editor/extensions/Shortcuts/shortcuts-extension.ts
-import { keymap as keymap4 } from "@remirror/pm/keymap";
+import { keymap as keymap6 } from "@remirror/pm/keymap";
 var ShortcutsExtension = class extends PlainExtension7 {
   get name() {
     return "shortcuts";
@@ -20530,13 +21470,13 @@ var ShortcutsExtension = class extends PlainExtension7 {
       disableAllBuildInShortcuts: this.options.disableAllBuildInShortcuts
     });
     const newState = view.state.reconfigure({
-      plugins: [...view.state.plugins, keymap4(keyBinds)]
+      plugins: [...view.state.plugins, keymap6(keyBinds)]
     });
     view.updateState(newState);
   }
 };
 ShortcutsExtension = __decorateClass([
-  extension9({
+  extension13({
     defaultOptions: {
       shortcuts: void 0,
       disableAllBuildInShortcuts: false
@@ -20549,6 +21489,9 @@ ShortcutsExtension = __decorateClass([
 
 // src/editor/extensions/SlashMenu/utils.ts
 var dispatchWithMeta = (view, key2, meta) => view.dispatch(view.state.tr.setMeta(key2, meta));
+var isSlashKey = (event) => {
+  return event.key === "/" || event.code === "Slash";
+};
 var defaultIgnoredKeys = [
   "Unidentified",
   "Alt",
@@ -20675,7 +21618,7 @@ var defaultIgnoredKeys = [
 ];
 
 // src/editor/extensions/SlashMenu/slashmenu-extension.ts
-import { extension as extension10, PlainExtension as PlainExtension8 } from "remirror";
+import { extension as extension14, PlainExtension as PlainExtension8 } from "remirror";
 
 // src/editor/extensions/SlashMenu/case.ts
 var defaultConditions = (openInSelection = false) => {
@@ -20695,9 +21638,9 @@ var defaultConditions = (openInSelection = false) => {
       );
       const inEmptyPar = inParagraph && parentNode?.textContent === prevCharacter;
       const spaceBeforePos = prevCharacter === "\u200A" || prevCharacter === "" || prevCharacter === " ";
-      return !state.open && event.code === "Slash" && inParagraph && (inEmptyPar || spaceBeforePos || editorState.selection.from !== editorState.selection.to && openInSelection);
+      return !state.open && isSlashKey(event) && inParagraph && (inEmptyPar || spaceBeforePos || editorState.selection.from !== editorState.selection.to && openInSelection);
     },
-    shouldClose: (state, event) => state.open && (event.key === "Slash" || event.key === "Escape" || event.key === "Backspace") && state.filter.length === 0
+    shouldClose: (state, event) => state.open && (isSlashKey(event) || event.key === "Escape" || event.key === "Backspace") && state.filter.length === 0
   };
 };
 var getCase = (state, event, view, ignoredKeys, customConditions, shouldOpenInSelection) => {
@@ -20779,7 +21722,7 @@ var SlashMenuExtension = class extends PlainExtension8 {
                 dispatchWithMeta(view, this.spec.key, {
                   type: "close" /* close */
                 });
-              } else if (event.code === "Slash") {
+              } else if (isSlashKey(event)) {
                 view.dispatch(
                   editorState.tr.insertText("/").setMeta(this.spec.key, {
                     type: "close" /* close */
@@ -20831,7 +21774,7 @@ var SlashMenuExtension = class extends PlainExtension8 {
   }
 };
 SlashMenuExtension = __decorateClass([
-  extension10({
+  extension14({
     defaultOptions: {}
   })
 ], SlashMenuExtension);
@@ -20864,7 +21807,7 @@ var LineTextExtension = class extends TextExtension {
 };
 
 // src/editor/extensions/Transformer/transformer-extension.ts
-import { PlainExtension as PlainExtension9, extension as extension11 } from "remirror";
+import { PlainExtension as PlainExtension9, extension as extension15 } from "remirror";
 var TransformerExtension = class extends PlainExtension9 {
   get name() {
     return "transformer";
@@ -20897,7 +21840,7 @@ var TransformerExtension = class extends PlainExtension9 {
   }
 };
 TransformerExtension = __decorateClass([
-  extension11({
+  extension15({
     defaultOptions: {}
   })
 ], TransformerExtension);
@@ -20931,7 +21874,14 @@ function extensions(options) {
     new LineListExtension(),
     new LineCodeMirrorExtension({
       extensions: [minimalSetup],
-      useProsemirrorHistoryKey: true
+      useProsemirrorHistoryKey: true,
+      customCopyFunction: options.customCopyFunction
+    }),
+    new LineHtmlBlockExtension({
+      customCopyFunction: options.customCopyFunction
+    }),
+    new MermaidBlockExtension({
+      customCopyFunction: options.customCopyFunction
     }),
     new LineTableExtension({ resizable: false }),
     new LineTableRowExtension(),
@@ -20941,7 +21891,6 @@ function extensions(options) {
       decoration: { style: "background-color: yellow; color: black" },
       activeDecoration: { style: "background-color: orange; color: black" }
     }),
-    new LineHtmlBlockExtension(),
     new HtmlInlineNodeExtension({
       handleViewImgSrcUrl
     }),
@@ -20951,7 +21900,8 @@ function extensions(options) {
     new SlashMenuExtension(),
     new LineInlineMarkExtension(),
     new LineInlineDecorationExtension(),
-    new MermaidBlockExtension({}),
+    new MathBlockExtension({}),
+    new MathInlineExtension({}),
     new ShortcutsExtension({
       disableAllBuildInShortcuts: options.disableAllBuildInShortcuts
     }),
@@ -21121,9 +22071,6 @@ var MarkdownSerializer = class {
   }
 };
 
-// src/editor/extensions/CodeMirror/codemirror-extension.ts
-import { Decoration as Decoration6, DecorationSet as DecorationSet5 } from "@remirror/pm/view";
-
 // src/editor/extensions/CodeMirror/codemirror-lang-menu.tsx
 import { languages as languages2 } from "@codemirror/language-data";
 import Fuse from "fuse.js";
@@ -21943,21 +22890,6 @@ var createCodeMirrorMenuDecorations = (found2) => {
 };
 var codemirror_lang_menu_default = createCodeMirrorMenuDecorations;
 
-// src/editor/extensions/CodeMirror/codemirror-extension.ts
-import {
-  command as command4,
-  extension as extension12,
-  findParentNodeOfType as findParentNodeOfType5,
-  isElementDomNode as isElementDomNode4,
-  isEqual,
-  isTextSelection as isTextSelection3,
-  keyBinding,
-  NodeExtension as NodeExtension8,
-  nodeInputRule as nodeInputRule7,
-  setBlockType as setBlockType3
-} from "@remirror/core";
-import { TextSelection as TextSelection9 } from "@remirror/pm/state";
-
 // src/editor/extensions/CodeMirror/codemirror-node-view.ts
 var CodeMirror6NodeView = class {
   constructor({
@@ -22012,9 +22944,8 @@ var CodeMirror6NodeView = class {
 };
 
 // src/editor/extensions/CodeMirror/codemirror-extension.ts
-import { languages as languages3 } from "@codemirror/language-data";
 var fakeIndentedLanguage = "indent-code";
-var LineCodeMirrorExtension = class extends NodeExtension8 {
+var LineCodeMirrorExtension = class extends NodeExtension10 {
   get name() {
     return "codeMirror";
   }
@@ -22053,7 +22984,11 @@ var LineCodeMirrorExtension = class extends NodeExtension8 {
         extensions: this.options.extensions,
         toggleName: this.options.toggleName,
         options: {
-          useProsemirrorHistoryKey: this.options.useProsemirrorHistoryKey
+          useProsemirrorHistoryKey: this.options.useProsemirrorHistoryKey,
+          copyButton: {
+            enabled: this.options.showCopyButton,
+            customCopyFunction: this.options.customCopyFunction
+          }
         },
         onCodemirrorViewLoad: this.options.onCodemirrorViewLoad
       });
@@ -22079,12 +23014,12 @@ var LineCodeMirrorExtension = class extends NodeExtension8 {
       return { language };
     };
     return [
-      nodeInputRule7({
+      nodeInputRule9({
         regexp,
         type: this.type,
         beforeDispatch: ({ tr, start }) => {
           const $pos = tr.doc.resolve(start);
-          tr.setSelection(TextSelection9.near($pos));
+          tr.setSelection(TextSelection11.near($pos));
         },
         getAttributes
       })
@@ -22113,7 +23048,7 @@ var LineCodeMirrorExtension = class extends NodeExtension8 {
     const pos = tr.selection.$from.before();
     const end = pos + nodeSize2 + 1;
     tr.replaceWith(pos, end, this.type.create({ language }));
-    tr.setSelection(TextSelection9.near(tr.doc.resolve(pos + 1)));
+    tr.setSelection(TextSelection11.near(tr.doc.resolve(pos + 1)));
     if (dispatch) {
       dispatch(tr);
     }
@@ -22188,7 +23123,7 @@ var LineCodeMirrorExtension = class extends NodeExtension8 {
       return DecorationSet5.empty;
     }
     const { create, destroy } = codemirror_lang_menu_default(found2);
-    const deco = Decoration6.widget(found2.pos, create, {
+    const deco = Decoration8.widget(found2.pos, create, {
       ignoreSelection: true,
       stopEvent: () => true,
       key: "language-menu",
@@ -22207,14 +23142,15 @@ __decorateClass([
   command4()
 ], LineCodeMirrorExtension.prototype, "updateCodeMirror", 1);
 LineCodeMirrorExtension = __decorateClass([
-  extension12({
+  extension16({
     defaultOptions: {
       hideDecoration: false,
       extensions: null,
       toggleName: "paragraph",
       useProsemirrorHistoryKey: false,
       onCodemirrorViewLoad: () => {
-      }
+      },
+      showCopyButton: true
     },
     staticKeys: [],
     handlerKeys: [],
@@ -22396,7 +23332,8 @@ import { Input as Input2, Space as Space2 } from "zens";
 import Color from "color";
 var darken = (color, amount) => Color(color).darken(amount).string();
 
-// src/editor/utils/getOS.ts
+// src/editor/utils/getOS.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
 function getOS() {
   const userAgent = window.navigator.userAgent;
   const platform2 = window.navigator.platform;
@@ -22408,15 +23345,19 @@ function getOS() {
     return "Unknown";
   }
 }
-function getModKeyName() {
+function getModKeyIconName() {
+  const os = getOS();
+  return os === "macOS" ? /* @__PURE__ */ jsx14("i", { className: "ri-command-line" }) : "Ctrl";
+}
+function getModEventKey() {
   const os = getOS();
-  return os === "macOS" ? "\u2318" : "Ctrl";
+  return os === "macOS" ? "metaKey" : "ctrlKey";
 }
 
 // src/editor/toolbar/SlashMenu/TablePanel.tsx
 import { forwardRef, useState as useState5, useImperativeHandle, memo as memo4 } from "react";
 import styled7 from "styled-components";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
 var TablePanelCell = styled7.div.attrs((p) => p)`
   border: 1px solid ${(props) => props.theme.borderColor};
   margin-right: 1px;
@@ -22479,9 +23420,9 @@ var TablePanel = memo4(
         columnsCount
       ] }),
       Array.from({ length: displayRows }).map((_, i) => {
-        return /* @__PURE__ */ jsx14("div", { style: { display: "flex" }, children: Array.from({ length: displayCols }).map((_2, j) => {
+        return /* @__PURE__ */ jsx15("div", { style: { display: "flex" }, children: Array.from({ length: displayCols }).map((_2, j) => {
           const inScope = i < rowsCount && j < columnsCount;
-          return /* @__PURE__ */ jsx14(
+          return /* @__PURE__ */ jsx15(
             TablePanelCell,
             {
               inScope,
@@ -22504,7 +23445,7 @@ var TablePanel = memo4(
 var TablePanel_default = TablePanel;
 
 // src/editor/toolbar/SlashMenu/SlashMenuRoot.tsx
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 var SlashMenuRoot = memo5(
   ({ rootRef, commands, closeMenu }) => {
     const componentRefMap = useRef5({});
@@ -22536,7 +23477,7 @@ var SlashMenuRoot = memo5(
           },
           Renderer: {
             id: "table",
-            Component: /* @__PURE__ */ jsx15(
+            Component: /* @__PURE__ */ jsx16(
               TablePanel_default,
               {
                 ref: (el) => componentRefMap.current.table = el,
@@ -22678,7 +23619,7 @@ var SlashMenuRoot = memo5(
         if (event.key === "Escape") {
           return closeMenu();
         }
-        if (searchText && event.metaKey === false) {
+        if (searchText && event[getModEventKey()] === false) {
           return;
         }
         if (activeItemId) {
@@ -22732,7 +23673,7 @@ var SlashMenuRoot = memo5(
       searchText
     ]);
     return /* @__PURE__ */ jsxs6("div", { ref: rootRef, style: { display: "flex", flexDirection: "column" }, children: [
-      /* @__PURE__ */ jsx15(SearchContainer, { children: /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx16(SearchContainer, { children: /* @__PURE__ */ jsx16(
         Input2,
         {
           type: "text",
@@ -22749,12 +23690,12 @@ var SlashMenuRoot = memo5(
               if (searchText === "") {
                 e.preventDefault();
                 e.stopPropagation();
-                closeMenu();
+                closeMenu?.();
               }
-            } else if (e.code === "Slash" && (searchText === "" || searchText === "/")) {
+            } else if (isSlashKey(e) && (searchText === "" || searchText === "/")) {
               e.preventDefault();
               e.stopPropagation();
-              closeMenu({
+              closeMenu?.({
                 insertSlash: true
               });
             }
@@ -22765,13 +23706,13 @@ var SlashMenuRoot = memo5(
         /* @__PURE__ */ jsxs6(MenuPanel, { active: true, location: "left", children: [
           filteredMenuItems.map((item) => {
             const selected = item.id === activeGroupId;
-            return /* @__PURE__ */ jsx15(
+            return /* @__PURE__ */ jsx16(
               MenuItem,
               {
                 onClick: () => setActiveGroupId(item.id),
                 selected,
                 children: /* @__PURE__ */ jsxs6(Space2, { size: 4, children: [
-                  /* @__PURE__ */ jsx15("i", { className: item.iconName }),
+                  /* @__PURE__ */ jsx16("i", { className: item.iconName }),
                   " ",
                   item.title
                 ] })
@@ -22779,11 +23720,11 @@ var SlashMenuRoot = memo5(
               item.id
             );
           }),
-          filteredMenuItems.length === 0 && /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15("span", { children: t18("slashMenu.noResults") }) })
+          filteredMenuItems.length === 0 && /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16("span", { children: t18("slashMenu.noResults") }) })
         ] }),
-        currentMenuItem?.children || currentMenuItem?.Renderer?.Component ? /* @__PURE__ */ jsx15(MenuPanel, { active: !!activeItemId, location: "right", children: currentMenuItem?.Renderer ? currentMenuItem.Renderer.Component : currentMenuItem?.children?.map((item) => {
+        currentMenuItem?.children || currentMenuItem?.Renderer?.Component ? /* @__PURE__ */ jsx16(MenuPanel, { active: !!activeItemId, location: "right", children: currentMenuItem?.Renderer ? currentMenuItem.Renderer.Component : currentMenuItem?.children?.map((item) => {
           const selected = item.id === activeItemId;
-          return /* @__PURE__ */ jsx15(
+          return /* @__PURE__ */ jsx16(
             MenuItem,
             {
               selected,
@@ -22801,10 +23742,10 @@ var SlashMenuRoot = memo5(
       /* @__PURE__ */ jsxs6(SlashMenuFooter, { children: [
         /* @__PURE__ */ jsxs6(Shortcut, { children: [
           searchText ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
-            /* @__PURE__ */ jsx15("kbd", { children: getModKeyName() }),
-            /* @__PURE__ */ jsx15("span", { children: " + " })
+            /* @__PURE__ */ jsx16("kbd", { children: getModKeyIconName() }),
+            /* @__PURE__ */ jsx16("span", { children: " + " })
           ] }) : null,
-          /* @__PURE__ */ jsx15("kbd", { "aria-label": "Up Arrow", children: /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsx16("kbd", { "aria-label": "Up Arrow", children: /* @__PURE__ */ jsxs6(
             "svg",
             {
               width: "14",
@@ -22812,16 +23753,16 @@ var SlashMenuRoot = memo5(
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
-              "stroke-width": "2",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
               children: [
-                /* @__PURE__ */ jsx15("path", { d: "m5 12 7-7 7 7" }),
-                /* @__PURE__ */ jsx15("path", { d: "M12 19V5" })
+                /* @__PURE__ */ jsx16("path", { d: "m5 12 7-7 7 7" }),
+                /* @__PURE__ */ jsx16("path", { d: "M12 19V5" })
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx15("kbd", { "aria-label": "Down Arrow", children: /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsx16("kbd", { "aria-label": "Down Arrow", children: /* @__PURE__ */ jsxs6(
             "svg",
             {
               width: "14",
@@ -22829,17 +23770,17 @@ var SlashMenuRoot = memo5(
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
-              "stroke-width": "2",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
               children: [
-                /* @__PURE__ */ jsx15("path", { d: "M12 5v14" }),
-                /* @__PURE__ */ jsx15("path", { d: "m19 12-7 7-7-7" })
+                /* @__PURE__ */ jsx16("path", { d: "M12 5v14" }),
+                /* @__PURE__ */ jsx16("path", { d: "m19 12-7 7-7-7" })
               ]
             }
           ) }),
           currentMenuItem?.children || currentMenuItem?.Renderer ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
-            /* @__PURE__ */ jsx15("kbd", { "aria-label": "Left Arrow", children: /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsx16("kbd", { "aria-label": "Left Arrow", children: /* @__PURE__ */ jsxs6(
               "svg",
               {
                 width: "14",
@@ -22847,16 +23788,16 @@ var SlashMenuRoot = memo5(
                 viewBox: "0 0 24 24",
                 fill: "none",
                 stroke: "currentColor",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
                 children: [
-                  /* @__PURE__ */ jsx15("path", { d: "m12 19-7-7 7-7" }),
-                  /* @__PURE__ */ jsx15("path", { d: "M19 12H5" })
+                  /* @__PURE__ */ jsx16("path", { d: "m12 19-7-7 7-7" }),
+                  /* @__PURE__ */ jsx16("path", { d: "M19 12H5" })
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsx15("kbd", { "aria-label": "Right Arrow", children: /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsx16("kbd", { "aria-label": "Right Arrow", children: /* @__PURE__ */ jsxs6(
               "svg",
               {
                 width: "14",
@@ -22864,12 +23805,12 @@ var SlashMenuRoot = memo5(
                 viewBox: "0 0 24 24",
                 fill: "none",
                 stroke: "currentColor",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
                 children: [
-                  /* @__PURE__ */ jsx15("path", { d: "M5 12h14" }),
-                  /* @__PURE__ */ jsx15("path", { d: "m12 5 7 7-7 7" })
+                  /* @__PURE__ */ jsx16("path", { d: "M5 12h14" }),
+                  /* @__PURE__ */ jsx16("path", { d: "m12 5 7 7-7 7" })
                 ]
               }
             ) })
@@ -22878,10 +23819,10 @@ var SlashMenuRoot = memo5(
         ] }),
         /* @__PURE__ */ jsxs6(Shortcut, { children: [
           searchText ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
-            /* @__PURE__ */ jsx15("kbd", { children: getModKeyName() }),
-            /* @__PURE__ */ jsx15("span", { children: " + " })
+            /* @__PURE__ */ jsx16("kbd", { children: getModKeyIconName() }),
+            /* @__PURE__ */ jsx16("span", { children: " + " })
           ] }) : null,
-          /* @__PURE__ */ jsx15("kbd", { "aria-label": "Enter", children: /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsx16("kbd", { "aria-label": "Enter", children: /* @__PURE__ */ jsxs6(
             "svg",
             {
               width: "14",
@@ -22889,12 +23830,12 @@ var SlashMenuRoot = memo5(
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
-              "stroke-width": "2",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
               children: [
-                /* @__PURE__ */ jsx15("polyline", { points: "9 10 4 15 9 20" }),
-                /* @__PURE__ */ jsx15("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" })
+                /* @__PURE__ */ jsx16("polyline", { points: "9 10 4 15 9 20" }),
+                /* @__PURE__ */ jsx16("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" })
               ]
             }
           ) }),
@@ -22923,7 +23864,7 @@ var Shortcut = styled8.div`
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 16px;
+    font-size: 12px;
   }
 `;
 var MenuPanel = styled8.div.attrs((p) => p)`
@@ -22975,7 +23916,7 @@ var MenuContainer = styled8.div`
 `;
 
 // src/editor/toolbar/SlashMenu/index.tsx
-import { Fragment as Fragment6, jsx as jsx16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx17 } from "react/jsx-runtime";
 var SlashMenu = () => {
   const { view: editorView, getState, commands } = useRemirrorContext3({ autoUpdate: true });
   if (!editorView) {
@@ -23055,7 +23996,7 @@ var SlashMenu = () => {
       editorView.focus();
     }
   }, [editorView, menuState.open, slashMenuExtension.pluginKey]);
-  return /* @__PURE__ */ jsx16(Fragment6, { children: menuState.open ? /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(Fragment6, { children: menuState.open ? /* @__PURE__ */ jsx17(
     Container2,
     {
       ref: setPopperElement,
@@ -23063,7 +24004,7 @@ var SlashMenu = () => {
         ...styles.popper
       },
       ...attributes.popper,
-      children: /* @__PURE__ */ jsx16(SlashMenuRoot, { rootRef, commands, closeMenu })
+      children: /* @__PURE__ */ jsx17(SlashMenuRoot, { rootRef, commands, closeMenu })
     }
   ) : null });
 };
@@ -23091,7 +24032,7 @@ import {
 import { useCommands } from "@remirror/react";
 import styled10 from "styled-components";
 import { useTranslation as useTranslation2 } from "react-i18next";
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
 var Container3 = styled10.div`
   position: absolute;
 
@@ -23160,8 +24101,8 @@ var ActiveCellMenu = (props) => {
         setOpen(true);
       },
       children: [
-        /* @__PURE__ */ jsx17("div", { ref: anchorRef, children: /* @__PURE__ */ jsx17("i", { className: "ri-equalizer-line" }) }),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18("div", { ref: anchorRef, children: /* @__PURE__ */ jsx18("i", { className: "ri-equalizer-line" }) }),
+        /* @__PURE__ */ jsx18(
           Popper,
           {
             sx: {
@@ -23172,21 +24113,21 @@ var ActiveCellMenu = (props) => {
             role: void 0,
             transition: true,
             disablePortal: true,
-            children: ({ TransitionProps, placement }) => /* @__PURE__ */ jsx17(
+            children: ({ TransitionProps, placement }) => /* @__PURE__ */ jsx18(
               Grow,
               {
                 ...TransitionProps,
                 style: {
                   transformOrigin: placement === "bottom" ? "center top" : "center bottom"
                 },
-                children: /* @__PURE__ */ jsx17(Paper, { children: /* @__PURE__ */ jsx17(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsx17(MenuList, { dense: true, autoFocusItem: true, children: options.map((option) => /* @__PURE__ */ jsx17(
+                children: /* @__PURE__ */ jsx18(Paper, { children: /* @__PURE__ */ jsx18(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsx18(MenuList, { dense: true, autoFocusItem: true, children: options.map((option) => /* @__PURE__ */ jsx18(
                   MenuItem2,
                   {
                     onClick: () => {
                       option.handler();
                       setOpen(false);
                     },
-                    children: /* @__PURE__ */ jsx17(ListItemText, { children: t18(option.i18nKey) })
+                    children: /* @__PURE__ */ jsx18(ListItemText, { children: t18(option.i18nKey) })
                   },
                   option.label
                 )) }) }) })
@@ -23205,7 +24146,7 @@ var ActiveCellMenu_default = ActiveCellMenu;
 import { useCommands as useCommands2 } from "@remirror/react";
 import styled11 from "styled-components";
 import { Tooltip as Tooltip2 } from "zens";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var Container4 = styled11.div`
   position: absolute;
   color: ${(props) => props.theme.dangerColor};
@@ -23214,7 +24155,7 @@ function TableBar(props) {
   const { positioner } = props;
   const commands = useCommands2();
   const { ref, key: key2, x, y } = positioner;
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     Container4,
     {
       ref,
@@ -23229,7 +24170,7 @@ function TableBar(props) {
         e.preventDefault();
         commands.deleteTable();
       },
-      children: /* @__PURE__ */ jsx18(Tooltip2, { title: "delete", children: /* @__PURE__ */ jsx18("i", { className: "ri-delete-bin-line" }) })
+      children: /* @__PURE__ */ jsx19(Tooltip2, { title: "delete", children: /* @__PURE__ */ jsx19("i", { className: "ri-delete-bin-line" }) })
     },
     key2
   );
@@ -23319,7 +24260,7 @@ var activeCellColumnAndRowPositioner = Positioner.create({
 });
 
 // src/editor/toolbar/TableToolbar/index.tsx
-import { Fragment as Fragment7, jsx as jsx19 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx20 } from "react/jsx-runtime";
 var MultiPositionerIllustration = ({ positioner }) => {
   const positioners = useMultiPositioner(positioner, []);
   const { forceUpdatePositioners } = useCommands3();
@@ -23328,13 +24269,13 @@ var MultiPositionerIllustration = ({ positioner }) => {
   }, [forceUpdatePositioners]);
   if (positioners.length === 0) return null;
   const positionersRender = [TableBar_default, ActiveCellMenu_default];
-  return /* @__PURE__ */ jsx19(Fragment7, { children: positioners.map((pos, i) => {
+  return /* @__PURE__ */ jsx20(Fragment7, { children: positioners.map((pos, i) => {
     const Component = positionersRender[i];
-    return /* @__PURE__ */ jsx19(Component, { positioner: pos }, pos.key);
+    return /* @__PURE__ */ jsx20(Component, { positioner: pos }, pos.key);
   }) });
 };
 var TableToolbar = () => {
-  return /* @__PURE__ */ jsx19(Fragment7, { children: /* @__PURE__ */ jsx19(PositionerPortal, { children: /* @__PURE__ */ jsx19(MultiPositionerIllustration, { positioner: activeCellColumnAndRowPositioner }) }) });
+  return /* @__PURE__ */ jsx20(Fragment7, { children: /* @__PURE__ */ jsx20(PositionerPortal, { children: /* @__PURE__ */ jsx20(MultiPositionerIllustration, { positioner: activeCellColumnAndRowPositioner }) }) });
 };
 var TableToolbar_default = TableToolbar;
 
@@ -23388,16 +24329,16 @@ var useCommandOptionValues = ({
 
 // src/editor/toolbar/toolbar/command-btns/command-button-icon.tsx
 import { isString as isString4 } from "@remirror/core";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var CommandButtonIcon = ({ icon }) => {
   if (isString4(icon)) {
-    return /* @__PURE__ */ jsx20("i", { className: icon });
+    return /* @__PURE__ */ jsx21("i", { className: icon });
   }
   return icon;
 };
 
 // src/editor/toolbar/toolbar/command-btns/command-button.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var CommandButton = ({
   commandName,
   active = false,
@@ -23426,7 +24367,7 @@ var CommandButton = ({
   const labelText = ariaLabel ?? commandOptions.label ?? "";
   const tooltipText = label ?? labelText;
   const shortcutText = displayShortcut && commandOptions.shortcut ? ` (${commandOptions.shortcut})` : "";
-  return /* @__PURE__ */ jsx21(Tooltip3, { title: `${tooltipText}${shortcutText}`, children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(Tooltip3, { title: `${tooltipText}${shortcutText}`, children: /* @__PURE__ */ jsx22(
     Container5,
     {
       "aria-label": labelText,
@@ -23434,7 +24375,7 @@ var CommandButton = ({
       ...rest,
       value: commandName,
       onClick: handleChange,
-      children: /* @__PURE__ */ jsx21(CommandButtonIcon, { icon: icon ?? fallbackIcon })
+      children: /* @__PURE__ */ jsx22(CommandButtonIcon, { icon: icon ?? fallbackIcon })
     }
   ) });
 };
@@ -23463,7 +24404,7 @@ import { Ariakit as Ariakit2 } from "zens";
 import { useActive, useCommands as useCommands4 } from "@remirror/react-core";
 import { useCallback as useCallback6 } from "react";
 import { t as t6 } from "i18next";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var InsertSeparatorButton = ({ attrs = {}, ...rest }) => {
   const { insertHorizontalRule } = useCommands4();
   const handleSelect = useCallback6(() => {
@@ -23473,7 +24414,7 @@ var InsertSeparatorButton = ({ attrs = {}, ...rest }) => {
   }, [insertHorizontalRule, attrs]);
   const active = useActive().codeMirror();
   const enabled = insertHorizontalRule.enabled(attrs);
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     CommandButton,
     {
       ...rest,
@@ -23492,17 +24433,17 @@ var InsertSeparatorButton = ({ attrs = {}, ...rest }) => {
 import { useCommands as useCommands5, useHelpers as useHelpers2 } from "@remirror/react-core";
 import { t as t7 } from "i18next";
 import { useCallback as useCallback7 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var RedoButton = (props) => {
-  const { redo: redo3 } = useCommands5();
-  const { redoDepth: redoDepth2 } = useHelpers2(true);
+  const { redo: redo5 } = useCommands5();
+  const { redoDepth } = useHelpers2(true);
   const handleSelect = useCallback7(() => {
-    if (redo3.enabled()) {
-      redo3();
+    if (redo5.enabled()) {
+      redo5();
     }
-  }, [redo3]);
-  const enabled = redoDepth2() > 0;
-  return /* @__PURE__ */ jsx23(
+  }, [redo5]);
+  const enabled = redoDepth() > 0;
+  return /* @__PURE__ */ jsx24(
     CommandButton,
     {
       ...props,
@@ -23520,7 +24461,7 @@ var RedoButton = (props) => {
 import { useActive as useActive2, useCommands as useCommands6 } from "@remirror/react-core";
 import { useCallback as useCallback8 } from "react";
 import { t as t8 } from "i18next";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var ToggleBlockquoteButton = ({ ...rest }) => {
   const { toggleBlockquote } = useCommands6();
   const handleSelect = useCallback8(() => {
@@ -23530,7 +24471,7 @@ var ToggleBlockquoteButton = ({ ...rest }) => {
   }, [toggleBlockquote]);
   const active = useActive2().blockquote();
   const enabled = toggleBlockquote.enabled();
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     CommandButton,
     {
       ...rest,
@@ -23548,7 +24489,7 @@ var ToggleBlockquoteButton = ({ ...rest }) => {
 import { useActive as useActive3, useCommands as useCommands7 } from "@remirror/react-core";
 import { useCallback as useCallback9 } from "react";
 import { t as t9 } from "i18next";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ToggleBoldButton = (props) => {
   const { toggleStrong } = useCommands7();
   const handleSelect = useCallback9(() => {
@@ -23558,7 +24499,7 @@ var ToggleBoldButton = (props) => {
   }, [toggleStrong]);
   const active = useActive3().mdStrong();
   const enabled = toggleStrong.enabled();
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     CommandButton,
     {
       ...props,
@@ -23576,7 +24517,7 @@ var ToggleBoldButton = (props) => {
 import { useActive as useActive4, useCommands as useCommands8 } from "@remirror/react-core";
 import { useCallback as useCallback10 } from "react";
 import { t as t10 } from "i18next";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var ToggleBulletListButton = (props) => {
   const { toggleList } = useCommands8();
   const handleSelect = useCallback10(() => {
@@ -23586,7 +24527,7 @@ var ToggleBulletListButton = (props) => {
   }, [toggleList]);
   const active = useActive4().list();
   const enabled = true;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     CommandButton,
     {
       ...props,
@@ -23604,7 +24545,7 @@ var ToggleBulletListButton = (props) => {
 import { useActive as useActive5, useCommands as useCommands9 } from "@remirror/react-core";
 import { useCallback as useCallback11 } from "react";
 import { t as t11 } from "i18next";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var ToggleCodeBlockButton = ({ attrs = {}, ...rest }) => {
   const { createCodeMirror } = useCommands9();
   const handleSelect = useCallback11(() => {
@@ -23614,7 +24555,7 @@ var ToggleCodeBlockButton = ({ attrs = {}, ...rest }) => {
   }, [createCodeMirror, attrs]);
   const active = useActive5().codeMirror();
   const enabled = createCodeMirror.enabled(attrs);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     CommandButton,
     {
       ...rest,
@@ -23633,7 +24574,7 @@ var ToggleCodeBlockButton = ({ attrs = {}, ...rest }) => {
 import { useActive as useActive6, useCommands as useCommands10 } from "@remirror/react-core";
 import { useCallback as useCallback12 } from "react";
 import { t as t12 } from "i18next";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var ToggleCodeButton = (props) => {
   const { toggleCodeText } = useCommands10();
   const handleSelect = useCallback12(() => {
@@ -23643,7 +24584,7 @@ var ToggleCodeButton = (props) => {
   }, [toggleCodeText]);
   const active = useActive6().mdCodeText();
   const enabled = toggleCodeText.enabled();
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     CommandButton,
     {
       ...props,
@@ -23661,7 +24602,7 @@ var ToggleCodeButton = (props) => {
 import { useActive as useActive7, useCommands as useCommands11 } from "@remirror/react-core";
 import { useCallback as useCallback13 } from "react";
 import { t as t13 } from "i18next";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var ToggleHeadingButton = ({ attrs, ...rest }) => {
   const { toggleHeading } = useCommands11();
   const handleSelect = useCallback13(() => {
@@ -23671,7 +24612,7 @@ var ToggleHeadingButton = ({ attrs, ...rest }) => {
   }, [toggleHeading, attrs]);
   const active = useActive7().heading(attrs);
   const enabled = toggleHeading.enabled(attrs);
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     CommandButton,
     {
       ...rest,
@@ -23690,7 +24631,7 @@ var ToggleHeadingButton = ({ attrs, ...rest }) => {
 import { useActive as useActive8, useCommands as useCommands12 } from "@remirror/react-core";
 import { useCallback as useCallback14 } from "react";
 import { t as t14 } from "i18next";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var ToggleItalicButton = (props) => {
   const { toggleEmphasis } = useCommands12();
   const handleSelect = useCallback14(() => {
@@ -23700,7 +24641,7 @@ var ToggleItalicButton = (props) => {
   }, [toggleEmphasis]);
   const active = useActive8().mdEm();
   const enabled = toggleEmphasis.enabled();
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     CommandButton,
     {
       ...props,
@@ -23718,7 +24659,7 @@ var ToggleItalicButton = (props) => {
 import { useActive as useActive9, useCommands as useCommands13 } from "@remirror/react-core";
 import { useCallback as useCallback15 } from "react";
 import { t as t15 } from "i18next";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var ToggleOrderedListButton = (props) => {
   const { toggleList } = useCommands13();
   const handleSelect = useCallback15(() => {
@@ -23730,7 +24671,7 @@ var ToggleOrderedListButton = (props) => {
   }, [toggleList]);
   const active = useActive9().list();
   const enabled = true;
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     CommandButton,
     {
       ...props,
@@ -23748,7 +24689,7 @@ var ToggleOrderedListButton = (props) => {
 import { useActive as useActive10, useCommands as useCommands14 } from "@remirror/react-core";
 import { useCallback as useCallback16 } from "react";
 import { t as t16 } from "i18next";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var ToggleTaskListButton = (props) => {
   const { toggleList } = useCommands14();
   const handleSelect = useCallback16(() => {
@@ -23760,7 +24701,7 @@ var ToggleTaskListButton = (props) => {
   }, [toggleList]);
   const active = useActive10().list();
   const enabled = true;
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     CommandButton,
     {
       ...props,
@@ -23778,17 +24719,17 @@ var ToggleTaskListButton = (props) => {
 import { useCommands as useCommands15, useHelpers as useHelpers3 } from "@remirror/react-core";
 import { t as t17 } from "i18next";
 import { useCallback as useCallback17 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var UndoButton = (props) => {
-  const { undo: undo3 } = useCommands15();
-  const { undoDepth: undoDepth2 } = useHelpers3(true);
+  const { undo: undo5 } = useCommands15();
+  const { undoDepth } = useHelpers3(true);
   const handleSelect = useCallback17(() => {
-    if (undo3.enabled()) {
-      undo3();
+    if (undo5.enabled()) {
+      undo5();
     }
-  }, [undo3]);
-  const enabled = undoDepth2() > 0;
-  return /* @__PURE__ */ jsx33(
+  }, [undo5]);
+  const enabled = undoDepth() > 0;
+  return /* @__PURE__ */ jsx34(
     CommandButton,
     {
       ...props,
@@ -23803,25 +24744,25 @@ var UndoButton = (props) => {
 };
 
 // src/editor/toolbar/toolbar/wysiwyg-toolbar.tsx
-import { jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs8 } from "react/jsx-runtime";
 var WysiwygToolbar = (props) => {
   const { prevActions = null, nextActions = null } = props;
   return /* @__PURE__ */ jsxs8(ToolBar, { className: props.className, style: props.style, children: [
     prevActions,
-    /* @__PURE__ */ jsx34(UndoButton, {}),
-    /* @__PURE__ */ jsx34(RedoButton, {}),
-    /* @__PURE__ */ jsx34(ToolbarSeparator, { render: /* @__PURE__ */ jsx34("div", {}) }),
-    /* @__PURE__ */ jsx34(ToggleHeadingButton, {}),
-    /* @__PURE__ */ jsx34(ToggleBoldButton, {}),
-    /* @__PURE__ */ jsx34(ToggleItalicButton, {}),
-    /* @__PURE__ */ jsx34(ToggleBlockquoteButton, {}),
-    /* @__PURE__ */ jsx34(ToggleCodeBlockButton, {}),
-    /* @__PURE__ */ jsx34(ToggleCodeButton, {}),
-    /* @__PURE__ */ jsx34(InsertSeparatorButton, {}),
-    /* @__PURE__ */ jsx34(ToolbarSeparator, { render: /* @__PURE__ */ jsx34("div", {}) }),
-    /* @__PURE__ */ jsx34(ToggleBulletListButton, {}),
-    /* @__PURE__ */ jsx34(ToggleOrderedListButton, {}),
-    /* @__PURE__ */ jsx34(ToggleTaskListButton, {}),
+    /* @__PURE__ */ jsx35(UndoButton, {}),
+    /* @__PURE__ */ jsx35(RedoButton, {}),
+    /* @__PURE__ */ jsx35(ToolbarSeparator, { render: /* @__PURE__ */ jsx35("div", {}) }),
+    /* @__PURE__ */ jsx35(ToggleHeadingButton, {}),
+    /* @__PURE__ */ jsx35(ToggleBoldButton, {}),
+    /* @__PURE__ */ jsx35(ToggleItalicButton, {}),
+    /* @__PURE__ */ jsx35(ToggleBlockquoteButton, {}),
+    /* @__PURE__ */ jsx35(ToggleCodeBlockButton, {}),
+    /* @__PURE__ */ jsx35(ToggleCodeButton, {}),
+    /* @__PURE__ */ jsx35(InsertSeparatorButton, {}),
+    /* @__PURE__ */ jsx35(ToolbarSeparator, { render: /* @__PURE__ */ jsx35("div", {}) }),
+    /* @__PURE__ */ jsx35(ToggleBulletListButton, {}),
+    /* @__PURE__ */ jsx35(ToggleOrderedListButton, {}),
+    /* @__PURE__ */ jsx35(ToggleTaskListButton, {}),
     nextActions
   ] });
 };
@@ -23846,23 +24787,23 @@ var ToolbarSeparator = styled13(Ariakit2.ToolbarSeparator)`
 // src/editor/components/WysiwygEditor/delegate.ts
 import { isExtension } from "@remirror/core";
 import { createReactManager as createReactManager2 } from "@remirror/react";
-function isMarkdownNodeExtension(extension13) {
-  return !!(isExtension(extension13) && extension13.fromMarkdown && extension13.toMarkdown);
+function isMarkdownNodeExtension(extension17) {
+  return !!(isExtension(extension17) && extension17.fromMarkdown && extension17.toMarkdown);
 }
 function buildMarkdownParser(manager) {
   const parserRules = [];
-  for (const extension13 of manager.extensions) {
-    if (isMarkdownNodeExtension(extension13)) {
-      parserRules.push(...extension13.fromMarkdown());
+  for (const extension17 of manager.extensions) {
+    if (isMarkdownNodeExtension(extension17)) {
+      parserRules.push(...extension17.fromMarkdown());
     }
   }
   return new MarkdownParser(manager.schema, parserRules);
 }
 function buildMarkdownSerializer(manager) {
   const specs = {};
-  for (const extension13 of manager.extensions) {
-    if (isMarkdownNodeExtension(extension13)) {
-      specs[extension13.name] = extension13.toMarkdown;
+  for (const extension17 of manager.extensions) {
+    if (isMarkdownNodeExtension(extension17)) {
+      specs[extension17.name] = extension17.toMarkdown;
     }
   }
   return new MarkdownSerializer(specs);
@@ -23891,7 +24832,7 @@ var createWysiwygDelegate = (options = {}) => {
 };
 
 // src/editor/components/WysiwygEditor/index.tsx
-import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs9 } from "react/jsx-runtime";
 var WysiwygEditor = (props) => {
   const {
     content,
@@ -23929,9 +24870,9 @@ var WysiwygEditor = (props) => {
   try {
     initialContent = editorDelegate.stringToDoc(content);
   } catch (error) {
-    return /* @__PURE__ */ jsx35(ErrorBoundary_default, { hasError: true, error, ...props.errorHandler || {} });
+    return /* @__PURE__ */ jsx36(ErrorBoundary_default, { hasError: true, error, ...props.errorHandler || {} });
   }
-  return /* @__PURE__ */ jsx35(ErrorBoundary_default, { ...props.errorHandler || {}, children: /* @__PURE__ */ jsx35(WysiwygThemeWrapper, { ...styleToken, children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx36(ErrorBoundary_default, { ...props.errorHandler || {}, children: /* @__PURE__ */ jsx36(WysiwygThemeWrapper, { ...styleToken, children: /* @__PURE__ */ jsxs9(
     Remirror2,
     {
       manager: editorDelegate.manager,
@@ -23940,12 +24881,12 @@ var WysiwygEditor = (props) => {
       editable,
       onChange: handleChange,
       children: [
-        wysiwygToolBarOptions?.enable ? /* @__PURE__ */ jsx35(WysiwygToolbar, { ...wysiwygToolBarOptions?.compProps }) : null,
-        /* @__PURE__ */ jsx35(Text_default, {}),
-        /* @__PURE__ */ jsx35(TableToolbar_default, {}),
-        /* @__PURE__ */ jsx35(SlashMenu, {}),
+        wysiwygToolBarOptions?.enable ? /* @__PURE__ */ jsx36(WysiwygToolbar, { ...wysiwygToolBarOptions?.compProps }) : null,
+        /* @__PURE__ */ jsx36(Text_default, {}),
+        /* @__PURE__ */ jsx36(TableToolbar_default, {}),
+        /* @__PURE__ */ jsx36(SlashMenu, {}),
         wysiwygToolBar || null,
-        isTesting ? /* @__PURE__ */ jsx35(ProsemirrorDevTools2, {}) : null
+        isTesting ? /* @__PURE__ */ jsx36(ProsemirrorDevTools2, {}) : null
       ]
     }
   ) }) });
@@ -23955,7 +24896,7 @@ var WysiwygEditor_default = memo6(WysiwygEditor);
 // src/editor/components/Editor.tsx
 import HTML2 from "html-parse-stringify";
 import { nanoid as nanoid3 } from "nanoid";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var Editor = memo7(
   forwardRef2((props, ref) => {
     const {
@@ -24015,9 +24956,9 @@ var Editor = memo7(
       return [() => useContextMounted(onContextMounted), ...hooks];
     }, [hooks, onContextMounted]);
     if (type === "preview") {
-      return /* @__PURE__ */ jsx36(Preview, { doc: otherProps.content, delegateOptions: otherProps.delegateOptions });
+      return /* @__PURE__ */ jsx37(Preview, { doc: otherProps.content, delegateOptions: otherProps.delegateOptions });
     }
-    return type === "sourceCode" ? /* @__PURE__ */ jsx36(SourceEditor_default, { ...otherProps, hooks: editorHooks }) : /* @__PURE__ */ jsx36(WysiwygEditor_default, { ...otherProps, hooks: editorHooks });
+    return type === "sourceCode" ? /* @__PURE__ */ jsx37(SourceEditor_default, { ...otherProps, hooks: editorHooks }) : /* @__PURE__ */ jsx37(WysiwygEditor_default, { ...otherProps, hooks: editorHooks });
   })
 );
 var defaultStyleToken = {
@@ -24104,7 +25045,7 @@ function changeLng(lng) {
 
 // src/editor/components/ThemeProvider.tsx
 import mermaid2 from "mermaid";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var ThemeProvider = memo8(({ theme, i18n, children }) => {
   const mode = theme?.mode || "light";
   const defaultThemeToken = mode === "dark" ? darkTheme.styledConstants : lightTheme.styledConstants;
@@ -24126,7 +25067,7 @@ var ThemeProvider = memo8(({ theme, i18n, children }) => {
     });
     eventBus.emit("change-theme");
   }, [mode, theme?.codemirrorTheme, changeTheme]);
-  return /* @__PURE__ */ jsx37(ScThemeProvider, { theme: themeToken, children });
+  return /* @__PURE__ */ jsx38(ScThemeProvider, { theme: themeToken, children });
 });
 
 // src/editor/components/Preview/preview.tsx
@@ -24210,7 +25151,7 @@ var rmeProsemirrorNodeToHtml = async (doc, delegateOptions) => {
 };
 
 // src/editor/components/Preview/preview.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Preview = (props) => {
   const { doc, delegateOptions } = props;
   const [processedHtml, setProcessedHtml] = useState10("");
@@ -24227,7 +25168,7 @@ var Preview = (props) => {
     });
   }, [props.onError]);
   if (!processedHtml) {
-    return /* @__PURE__ */ jsx38(
+    return /* @__PURE__ */ jsx39(
       "div",
       {
         style: {
@@ -24237,11 +25178,11 @@ var Preview = (props) => {
           justifyContent: "center",
           alignItems: "center"
         },
-        children: /* @__PURE__ */ jsx38(Icon.Loading3QuartersOutlined, { spin: true, size: 40 })
+        children: /* @__PURE__ */ jsx39(Icon.Loading3QuartersOutlined, { spin: true, size: 40 })
       }
     );
   }
-  return /* @__PURE__ */ jsx38(WysiwygThemeWrapper, { dangerouslySetInnerHTML: { __html: processedHtml } });
+  return /* @__PURE__ */ jsx39(WysiwygThemeWrapper, { dangerouslySetInnerHTML: { __html: processedHtml } });
 };
 
 // src/editor/hooks/index.ts