rme 0.0.74 → 0.0.76

package/dist/index.mjs

@@ -4372,15 +4372,17 @@ var require_querystringify = __commonJS({
 // src/editor/components/SourceEditor/index.tsx
 import { Remirror as Remirror2 } from "@remirror/react";
 import { createContextState } from "create-context-state";
-import { memo as memo6, useCallback as useCallback5, useMemo as useMemo5 } from "react";
+import { memo as memo7, useCallback as useCallback5, useMemo as useMemo5 } from "react";
 
 // src/editor/components/Text/index.tsx
 import { useRemirrorContext } from "@remirror/react";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-var Text = ({ children, ...props }) => {
+var Text = memo(({ children, ...props }) => {
   const { getRootProps } = useRemirrorContext();
-  return /* @__PURE__ */ jsx("div", { ...props, ...getRootProps(), spellCheck: false, children });
-};
+  const { key, ...rootProps } = getRootProps();
+  return /* @__PURE__ */ jsx("div", { ...props, ...rootProps, spellCheck: false, children });
+});
 var Text_default = Text;
 
 // src/editor/components/SourceEditor/index.tsx
@@ -4474,26 +4476,93 @@ function buildHtmlStringFromAst(ast) {
 
 // src/editor/transform/markdown-it-html-inline.ts
 import Token2 from "markdown-it/lib/token.mjs";
+import voidElements from "void-elements";
 var needSplitInlineHtmlTokenTags = ["img", "iframe", "br"];
-var excludeHtmlInlineNodes = ["html_image", "iframe_inline", "html_br"];
+var excludeHtmlInlineNodes = ["html_inline_node", "html_image", "iframe_inline", "html_br"];
 var typeMap = {
   img: "html_image",
   iframe: "iframe_inline",
   br: "html_br"
 };
-function splitHtmlInlineTokens(t3) {
-  if (!t3.children)
-    return [];
-  return t3.children.map((child) => {
-    if (isHtmlInlineToken(child) && needSplitInlineHtmlTokenTags.includes(child.tag) && !isClosingTag(child.content)) {
-      const newToken = new Token2(typeMap[child.tag], "", 0);
-      newToken.content = child.content;
-      newToken.attrs = getAttrsBySignalHtmlContent(child.content);
-      return newToken;
-    } else {
-      const token = new Token2("text", "", 0);
-      token.content = child.content;
-      return token;
+function getMergeArr(phrasingContents) {
+  const unCloseedHtmlStack = [];
+  const mergeArr = [];
+  for (let i = 0; i < phrasingContents.length; i++) {
+    const phrasingContent = phrasingContents[i];
+    if (isHtmlInlineToken(phrasingContent)) {
+      const tagName = getTagName(phrasingContent.content);
+      const htmlNode = {
+        tag: tagName,
+        voidElement: !!voidElements[tagName],
+        isClosingTag: isClosingTag(phrasingContent.content),
+        index: i
+      };
+      if (!htmlNode.voidElement) {
+        if (!htmlNode.isClosingTag) {
+          unCloseedHtmlStack.push(htmlNode);
+        } else if (unCloseedHtmlStack[unCloseedHtmlStack.length - 1]?.tag === htmlNode.tag) {
+          if (unCloseedHtmlStack.length >= 1) {
+            mergeArr.push([unCloseedHtmlStack.pop(), htmlNode]);
+            phrasingContent.complete = true;
+          }
+        }
+      } else {
+        phrasingContent.complete = true;
+      }
+    }
+  }
+  for (let i = 0; i < mergeArr.length; i++) {
+    const merge = mergeArr[i];
+    const startIndex = merge[0].index;
+    const endIndex = merge[1].index;
+    const parentNode = mergeArr.findIndex(
+      (item) => item[0].index < startIndex && item[1].index > endIndex
+    );
+    if (parentNode >= 0) {
+      mergeArr.splice(i, 1);
+      i--;
+    }
+  }
+  return mergeArr;
+}
+function mergePhrasingContents(phrasingContents, startIndex, endIndex) {
+  const merged = new Token2("html_inline_node", "", 0);
+  for (let i = startIndex; i <= endIndex; i++) {
+    merged.content += phrasingContents[i].content || "";
+    merged.complete = true;
+  }
+  merged.attrs = {
+    htmlText: merged.content
+  };
+  phrasingContents.splice(startIndex, endIndex - startIndex + 1, merged);
+  return phrasingContents;
+}
+function mergeHtmlPhrasingContents(phrasingContents) {
+  const mergeArr = getMergeArr(phrasingContents);
+  let offset = 0;
+  mergeArr.forEach((merge) => {
+    const startIndex = merge[0].index + offset;
+    const endIndex = merge[1].index + offset;
+    mergePhrasingContents(phrasingContents, startIndex, endIndex);
+    offset += startIndex - endIndex;
+  });
+  phrasingContents.forEach((phrasingContent, index) => {
+    if (isHtmlInlineToken(phrasingContent)) {
+      const tagName = getTagName(phrasingContent.content);
+      if (typeMap[tagName]) {
+        const newToken = new Token2(typeMap[tagName], "", 0);
+        newToken.content = phrasingContent.content;
+        newToken.attrs = getAttrsBySignalHtmlContent(phrasingContent.content);
+        newToken.attrs.htmlText = newToken.content;
+        phrasingContents.splice(index, 1, newToken);
+      } else {
+        const newToken = new Token2("html_inline_node", "", 0);
+        newToken.content = phrasingContent.content;
+        newToken.attrs = {
+          htmlText: newToken.content
+        };
+        phrasingContents.splice(index, 1, newToken);
+      }
     }
   });
 }
@@ -4506,28 +4575,41 @@ function isHtmlInlineToken(t3) {
 function isHtmlBlockToken(t3) {
   return t3.type === "html_block";
 }
-function hasSplitInlineHtmlToken(t3) {
-  let res = false;
-  t3.children?.forEach((child) => {
-    if (isHtmlInlineToken(child)) {
-      const tag = getTagName(child.content);
-      child.tag = tag;
-      if (needSplitInlineHtmlTokenTags.includes(child.tag)) {
-        res = true;
-      }
-    }
-  });
-  return res;
-}
 var rule2 = (state) => {
   const edited = false;
   const tokens = state.tokens;
   const tokensLength = tokens.length;
-  for (let i = tokensLength - 1; i >= 0; i--) {
+  for (let i = 0; i <= tokensLength - 1; i++) {
     const curToken = tokens[i];
     if (isInlineToken2(curToken)) {
-      if (hasSplitInlineHtmlToken(curToken)) {
-        tokens.splice(i, 1, ...splitHtmlInlineTokens(curToken));
+      const newChildren = curToken.children;
+      if (newChildren) {
+        mergeHtmlPhrasingContents(newChildren);
+      }
+      const newTokens = [];
+      let childs = [];
+      newChildren?.forEach((child, index) => {
+        if (excludeHtmlInlineNodes.includes(child.type)) {
+          if (childs.length > 0) {
+            const newToken = new Token2("inline", "", 0);
+            newToken.children = [...childs];
+            newTokens.push(newToken);
+            childs.length = 0;
+          }
+          newTokens.push(child);
+        } else {
+          childs.push(child);
+        }
+      });
+      if (childs.length > 0) {
+        const newToken = new Token2("inline", "", 0);
+        newToken.children = childs;
+        newToken.content = childs.map((child) => child.content).join("");
+        newTokens.push(newToken);
+        childs = [];
+      }
+      if (curToken.children && newTokens.length > 0) {
+        tokens.splice(i, 1, ...newTokens);
       }
     } else if (isHtmlBlockToken(curToken)) {
       const tag = getTagName(curToken.content);
@@ -4729,7 +4811,15 @@ 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"]).enable(["table"]).use(markdown_it_list_checkbox_default).use(markdown_it_html_inline_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);
     this.tokenHandlers = buildTokenHandlers(schema, parserRules);
   }
   parse(text) {
@@ -5541,7 +5631,7 @@ import { gfmStrikethroughFromMarkdown } from "mdast-util-gfm-strikethrough";
 import { gfmAutolinkLiteral } from "micromark-extension-gfm-autolink-literal";
 import { gfmStrikethrough } from "micromark-extension-gfm-strikethrough";
 import { nanoid } from "nanoid";
-import voidElements from "void-elements";
+import voidElements2 from "void-elements";
 import { cloneDeep } from "lodash";
 gfmAutolinkLiteralFromMarkdown.transforms = [];
 function fixMarkNames(marks) {
@@ -5804,6 +5894,7 @@ var fromMarkdownOptions = {
           "definition",
           "headingAtx",
           "htmlFlow",
+          "htmlText",
           "list",
           "thematicBreak"
         ]
@@ -5855,114 +5946,10 @@ function parseMdInline(phrasingContents, depth = 1) {
   }
   return inlineTokens;
 }
-function mergePhrasingContents(phrasingContents, startIndex, endIndex) {
-  const merged = cloneDeep(phrasingContents[startIndex]);
-  for (let i = startIndex + 1; i <= endIndex; i++) {
-    merged.value += phrasingContents[i].value || "";
-    merged.position.end = phrasingContents[i].position.end;
-    merged.complete = true;
-  }
-  phrasingContents.splice(startIndex, endIndex - startIndex + 1, merged);
-  return phrasingContents;
-}
-function getMergeArr(phrasingContents) {
-  const unCloseedHtmlStack = [];
-  const mergeArr = [];
-  for (let i = 0; i < phrasingContents.length; i++) {
-    const phrasingContent = phrasingContents[i];
-    if (phrasingContent.type === "html") {
-      const tagName = getTagName(phrasingContent.value);
-      const htmlNode = {
-        tag: tagName,
-        voidElement: !!voidElements[tagName],
-        isClosingTag: isClosingTag(phrasingContent.value),
-        index: i
-      };
-      if (!htmlNode.voidElement) {
-        if (!htmlNode.isClosingTag) {
-          unCloseedHtmlStack.push(htmlNode);
-        } else if (unCloseedHtmlStack[unCloseedHtmlStack.length - 1]?.tag === htmlNode.tag) {
-          if (unCloseedHtmlStack.length >= 1) {
-            mergeArr.push([unCloseedHtmlStack.pop(), htmlNode]);
-            phrasingContent.complete = true;
-          }
-        }
-      } else {
-        phrasingContent.complete = true;
-      }
-    }
-  }
-  for (let i = 0; i < mergeArr.length; i++) {
-    const merge = mergeArr[i];
-    const startIndex = merge[0].index;
-    const endIndex = merge[1].index;
-    const parentNode = mergeArr.findIndex(
-      (item) => item[0].index < startIndex && item[1].index > endIndex
-    );
-    if (parentNode >= 0) {
-      mergeArr.splice(i, 1);
-      i--;
-    }
-  }
-  return mergeArr;
-}
-function mergeHtmlPhrasingContents(phrasingContents) {
-  const mergeArr = getMergeArr(phrasingContents);
-  let offset = 0;
-  mergeArr.forEach((merge) => {
-    const startIndex = merge[0].index + offset;
-    const endIndex = merge[1].index + offset;
-    mergePhrasingContents(phrasingContents, startIndex, endIndex);
-    offset += startIndex - endIndex;
-  });
-}
-function hasHtmlToken(mdastToken) {
-  for (const token of mdastToken) {
-    if (token.type === "html" && !needSplitInlineHtmlTokenTags.includes(getTagName(token.value))) {
-      return true;
-    }
-  }
-  return false;
-}
-function flatHTMLInlineCode(phrasingContents, depth = 1) {
-  mergeHtmlPhrasingContents(phrasingContents);
-  const inlineTokens = [];
-  phrasingContents.forEach((phrascontent) => {
-    if (phrascontent.type === "html") {
-      if (phrascontent.complete) {
-        inlineTokens.push({
-          marks: ["mdHtmlInline"],
-          attrs: {
-            depth: 1,
-            htmlText: phrascontent.value,
-            key: nanoid(),
-            first: true,
-            last: true
-          },
-          start: phrascontent.position.start.offset,
-          end: phrascontent.position.end.offset
-        });
-      } else {
-        inlineTokens.push({
-          marks: ["mdText"],
-          attrs: { depth, first: true, last: true },
-          start: phrascontent.position.start.offset,
-          end: phrascontent.position.end.offset
-        });
-      }
-    } else {
-      const tokens = flatPhrasingContent(phrascontent, depth);
-      inlineTokens.push(...fixTokensMarkNames(tokens));
-    }
-  });
-  return inlineTokens;
-}
 function fromInlineMarkdown(text) {
   const phrasingContents = parseInlineMarkdown(text);
-  if (hasHtmlToken(phrasingContents)) {
-    return flatHTMLInlineCode(phrasingContents);
-  }
-  return parseMdInline(phrasingContents);
+  const res = parseMdInline(phrasingContents);
+  return res;
 }
 
 // src/editor/extensions/Inline/inline-mark-helpers.ts
@@ -5970,14 +5957,14 @@ function parseTextBlock(schema, node, startPos, output) {
   if (!node.textContent) {
     return;
   }
-  const offsetPoss = [];
+  let offsetPoss = [];
   let pos = 0;
   for (let i = 0; i < node.childCount; i++) {
     const child = node.child(i);
+    pos += child.nodeSize;
     if (excludeHtmlInlineNodes.includes(child.type.name)) {
       offsetPoss.push(pos);
     }
-    pos += child.nodeSize;
   }
   const tokens = fromInlineMarkdown(node.textContent);
   let totalOffset = 0;
@@ -5985,12 +5972,20 @@ function parseTextBlock(schema, node, startPos, output) {
     const expectedMarks = token.marks.map((markName) => {
       return schema.marks[markName].create(token.attrs);
     });
-    let start = token.start;
-    let end = token.end;
-    const offset = offsetPoss.filter((pos2) => pos2 >= start && pos2 < end).length;
+    let start = token.start + totalOffset;
+    let end = token.end + totalOffset;
+    const offsetPos = offsetPoss.filter((pos2) => pos2 >= start && pos2 < end);
+    const offset = offsetPos.length;
     totalOffset += offset;
+    if (output[output.length - 1]?.[1] - 1 === offsetPos[0] && offsetPos.length > 0) {
+      output[output.length - 1] = [
+        output[output.length - 1][0] + 1,
+        output[output.length - 1][1] + 1,
+        output[output.length - 1][2]
+      ];
+    }
     output.push([
-      startPos + token.start + totalOffset - offset,
+      startPos + token.start + totalOffset,
       startPos + token.end + totalOffset,
       expectedMarks
     ]);
@@ -6887,7 +6882,7 @@ function rotateIndex(index, length) {
 
 // src/editor/components/WysiwygEditor/index.tsx
 import { Remirror } from "@remirror/react";
-import { memo as memo4, useMemo as useMemo4, useCallback as useCallback3 } from "react";
+import { memo as memo5, useMemo as useMemo4, useCallback as useCallback3 } from "react";
 
 // src/editor/theme/codemirror/dark.ts
 import { tags as t } from "@lezer/highlight";
@@ -7234,7 +7229,6 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     padding: 0;
   }
 
-
   & input[type='checkbox'] {
     /* Add if not using autoprefixer */
     -webkit-appearance: none;
@@ -7271,8 +7265,7 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     transform: scale(0);
     transform-origin: bottom left;
     transition: 120ms transform ease-in-out;
-    /* Windows High Contrast Mode */
-    background-color: CanvasText;
+    background-color: ${(props) => props.theme.bgColor};
   }
 
   & input[type='checkbox']:focus {
@@ -7546,16 +7539,6 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     padding-right: 20px;
   }
 
-  & code,
-  & tt {
-    padding: 0.2em 0.4em;
-    margin: 0;
-    font-size: 0.85em;
-    white-space: break-spaces;
-    background-color: rgba(110, 118, 129, 0.4);
-    border-radius: 6px;
-  }
-
   & code br,
   & tt br {
     display: none;
@@ -7755,6 +7738,39 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     transition: all 0.3s;
   }
 
+  .inline-node-show {
+    display: inline-block;
+  }
+
+  .inline-html {
+    position: relative;
+  }
+
+  .inline-html-src {
+    display: inline;
+    padding: 0.2em 0.4em;
+    margin: 0;
+    background-color: ${(props) => props.theme.codeBgColor};
+    border-radius: 6px;
+  }
+
+  .inline-html-preview {
+    position: absolute;
+    top: calc(100% + 0.5em);
+    left: 50%;
+    transform: translateX(-50%);
+    width: max-content;
+    padding: 0.5em 1em;
+    max-width: 400px;
+    border-radius: 0.2em;
+    background-color: ${(props) => props.theme.bgColor};
+    z-index: 1;
+  }
+
+  .inline-html-render {
+    display: inline-block;
+  }
+
   .html-node {
     position: relative;
     min-height: 40px;
@@ -7770,7 +7786,7 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
   }
 
   & .ProseMirror-focused {
-    outline: 2px solid ${(props) => props.theme.accentColor};
+    outline: none;
   }
 
   .img-input__container {
@@ -8534,13 +8550,13 @@ var TableToolbar_default = TableToolbar;
 import { ProsemirrorDevTools } from "@remirror/dev";
 
 // src/editor/components/ErrorBoundary.tsx
-import React from "react";
+import React2 from "react";
 import styled5 from "styled-components";
 import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var Title = styled5.h1`
     color: ${({ theme }) => theme.dangerColor};
 `;
-var ErrorBoundary = class extends React.Component {
+var ErrorBoundary = class extends React2.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: this.props.hasError ?? false };
@@ -8553,6 +8569,7 @@ var ErrorBoundary = class extends React.Component {
   }
   render() {
     if (this.state.hasError) {
+      console.error(this.props.error);
       return /* @__PURE__ */ jsxs2(Fragment4, { children: [
         /* @__PURE__ */ jsx5(Title, { "data-testid": "editor_error", children: "Sorry, something went wrong!" }),
         /* @__PURE__ */ jsx5("p", { children: String(this.props.error) })
@@ -8564,7 +8581,7 @@ var ErrorBoundary = class extends React.Component {
 var ErrorBoundary_default = ErrorBoundary;
 
 // src/editor/components/Editor.tsx
-import { forwardRef, memo, useImperativeHandle, useMemo, useState as useState2 } from "react";
+import { forwardRef, memo as memo2, useImperativeHandle, useMemo, useState as useState2 } from "react";
 
 // src/editor/components/useContextMounted.tsx
 import { useRemirrorContext as useRemirrorContext2 } from "@remirror/react-core";
@@ -8580,7 +8597,7 @@ var useContextMounted = (onContextMounted) => {
 
 // src/editor/components/Editor.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var Editor = memo(
+var Editor = memo2(
   forwardRef((props, ref) => {
     const { initialType = "wysiwyg", hooks = [], onContextMounted, ...otherProps } = props;
     const [type, setType] = useState2(initialType);
@@ -8878,11 +8895,11 @@ import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMem
 import { usePopper } from "react-popper";
 
 // src/editor/toolbar/SlashMenu/SlashMenuRoot.tsx
-import { memo as memo3, useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState4 } from "react";
+import { memo as memo4, useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState4 } from "react";
 import styled7, { css as css3 } from "styled-components";
 
 // src/editor/toolbar/SlashMenu/TablePanel.tsx
-import { forwardRef as forwardRef2, useState as useState3, useImperativeHandle as useImperativeHandle2, memo as memo2 } from "react";
+import { forwardRef as forwardRef2, useState as useState3, useImperativeHandle as useImperativeHandle2, memo as memo3 } from "react";
 import styled6 from "styled-components";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var TablePanelCell = styled6.div.attrs((p) => p)`
@@ -8893,7 +8910,7 @@ var TablePanelCell = styled6.div.attrs((p) => p)`
   height: 10px;
   background-color: ${(props) => props.inScope ? props.theme.blue : props.theme.contextMenuBgColor};
 `;
-var TablePanel = memo2(
+var TablePanel = memo3(
   forwardRef2((props, ref) => {
     const { commands, closeMenu } = props;
     const [rowsCount, setRowsCount] = useState3(3);
@@ -8977,7 +8994,7 @@ var darken = (color, amount) => Color(color).darken(amount).string();
 
 // src/editor/toolbar/SlashMenu/SlashMenuRoot.tsx
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var SlashMenuRoot = memo3(
+var SlashMenuRoot = memo4(
   ({ rootRef, commands, closeMenu }) => {
     const componentRefMap = useRef2({});
     const menuItems = useMemo2(() => {
@@ -9333,7 +9350,7 @@ var WysiwygEditor = (props) => {
     }
   ) }) });
 };
-var WysiwygEditor_default = memo4(WysiwygEditor);
+var WysiwygEditor_default = memo5(WysiwygEditor);
 
 // src/editor/extensions/Find/find-extension.ts
 var FindExtension = class extends PlainExtension5 {
@@ -16673,7 +16690,7 @@ var ImageToolTips = (props) => {
 
 // src/editor/components/Resizable/Resizable.tsx
 import styled9 from "styled-components";
-import { useRef as useRef4, useEffect as useEffect5, useCallback as useCallback4, memo as memo5, useState as useState7 } from "react";
+import { useRef as useRef4, useEffect as useEffect5, useCallback as useCallback4, memo as memo6, useState as useState7 } from "react";
 
 // node_modules/@remirror/core-helpers/dist/remirror-core-helpers.js
 var import_make_error = __toESM(require_make_error(), 1);
@@ -16989,7 +17006,7 @@ var ResizableContainer = styled9.div`
   transition: all 0.15s ease-out;
 `;
 var MIN_WIDTH = 20;
-var Resizable = memo5((props) => {
+var Resizable = memo6((props) => {
   const {
     node,
     aspectRatio = 0 /* Fixed */,
@@ -17842,7 +17859,7 @@ var ClipboardExtension = class extends PlainExtension7 {
 };
 
 // src/editor/extensions/HtmlBr/br-extension.ts
-import { extension as extension7, ExtensionTag as ExtensionTag3, NodeExtension as NodeExtension4 } from "@remirror/core";
+import { extension as extension7, ExtensionTag as ExtensionTag3, NodeExtension as NodeExtension4, nodeInputRule as nodeInputRule4 } from "@remirror/core";
 var HtmlBrExtension = class extends NodeExtension4 {
   get name() {
     return "html_br";
@@ -17867,6 +17884,15 @@ var HtmlBrExtension = class extends NodeExtension4 {
       }
     };
   }
+  createInputRules() {
+    const rules = [
+      nodeInputRule4({
+        regexp: new RegExp("<br/>"),
+        type: this.type
+      })
+    ];
+    return rules;
+  }
   fromMarkdown() {
     return [
       {
@@ -17887,68 +17913,373 @@ HtmlBrExtension = __decorateClass([
   })
 ], HtmlBrExtension);
 
-// src/editor/extensions/HtmlNode/html-inline-extension.ts
-import { MarkExtension as MarkExtension2, extension as extension8 } from "remirror";
-var LineHtmlInlineExtension = class extends MarkExtension2 {
+// src/editor/extensions/HtmlNode/html-inline-node.tsx
+import {
+  ExtensionTag as ExtensionTag4,
+  NodeExtension as NodeExtension5,
+  extension as extension8,
+  nodeInputRule as nodeInputRule5
+} from "remirror";
+
+// src/editor/extensions/HtmlNode/html-inline-view.ts
+import {
+  EditorState as EditorState2,
+  TextSelection as TextSelection5,
+  Plugin
+} 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;
+    let { to: outerTo, from: outerFrom } = outerState.selection;
+    let { to: innerTo, from: innerFrom } = innerState.selection;
+    if (requireEmptySelection && innerTo !== innerFrom) {
+      return false;
+    }
+    let currentPos = dir > 0 ? innerTo : innerFrom;
+    if (requireOnBorder) {
+      let nodeSize2 = innerState.doc.nodeSize - 2;
+      if (dir > 0 && currentPos < nodeSize2) {
+        return false;
+      }
+      if (dir < 0 && currentPos > 0) {
+        return false;
+      }
+    }
+    if (dispatch) {
+      let targetPos = dir > 0 ? outerTo : outerFrom;
+      outerView.dispatch(
+        outerState.tr.setSelection(TextSelection5.create(outerState.doc, targetPos))
+      );
+      outerView.focus();
+    }
+    return true;
+  };
+}
+var HTMLInlineView = class {
+  constructor(node, view, getPos) {
+    this.options = {};
+    this._node = node;
+    this._outerView = view;
+    this._getPos = getPos;
+    this._isEditing = false;
+    this._tagName = "span";
+    this.dom = document.createElement(this._tagName);
+    this.dom.classList.add("inline-html");
+    this._htmlRenderElt = document.createElement("span");
+    this._htmlRenderElt.textContent = "";
+    this._htmlRenderElt.classList.add("inline-html-render");
+    this.dom.appendChild(this._htmlRenderElt);
+    this._htmlSrcElt = document.createElement("span");
+    this._htmlSrcElt.spellcheck = false;
+    this.dom.appendChild(this._htmlSrcElt);
+    this.dom.addEventListener("click", () => this.ensureFocus());
+    if (node.attrs.fromInput) {
+      setTimeout(() => {
+        this.openEditor();
+      });
+    } else {
+      this.renderHtml();
+    }
+    console.log("this._node.attrs", this._node.attrs);
+  }
+  destroy() {
+    this.closeEditor(false);
+    if (this._htmlRenderElt) {
+      this._htmlRenderElt.remove();
+      delete this._htmlRenderElt;
+    }
+    if (this._htmlSrcElt) {
+      this._htmlSrcElt.remove();
+      delete this._htmlSrcElt;
+    }
+    this.dom.remove();
+  }
+  ensureFocus() {
+    if (this._innerView && this._outerView.hasFocus()) {
+      this._innerView.focus();
+    }
+  }
+  // == Updates ======================================= //
+  update(node, decorations) {
+    if (!node.sameMarkup(this._node))
+      return false;
+    this._node = node;
+    console.log("update", node);
+    if (!this._isEditing) {
+      this.renderHtml();
+    }
+    return true;
+  }
+  // == Events ===================================== //
+  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;
+  }
+  // == Rendering ===================================== //
+  renderHtml(preview = false) {
+    if (!this._htmlRenderElt) {
+      return;
+    }
+    let content = this._innerView?.state.doc.textContent || this._node.attrs?.htmlText || "";
+    let texString = content.trim();
+    if (texString.length < 1) {
+      while (this._htmlRenderElt.firstChild) {
+        this._htmlRenderElt.firstChild.remove();
+      }
+      return;
+    } else {
+    }
+    try {
+      while (this._htmlRenderElt.firstChild) {
+        this._htmlRenderElt.firstChild.remove();
+      }
+      const renderEl = document.createElement("span");
+      const domParser = new DOMParser();
+      const doc = domParser.parseFromString(texString, "text/html");
+      doc.body.childNodes.forEach((child) => {
+        if (isImageElement(child) && child.src && this.options.handleViewImgSrcUrl) {
+          let targetUrl = child.src;
+          if (child.src.includes(location.origin)) {
+            targetUrl = child.src.split(location.origin)[1];
+          }
+          this.options.handleViewImgSrcUrl(targetUrl).then((newHref) => {
+            child.src = newHref;
+          });
+        }
+        renderEl.appendChild(child);
+      });
+      if (renderEl.childNodes.length === 1) {
+        this._htmlRenderElt.remove();
+        this._htmlRenderElt = renderEl.firstElementChild;
+      }
+      if (this._htmlRenderElt) {
+        this.dom.append(this._htmlRenderElt);
+        this._htmlRenderElt.classList.remove("node-hide");
+        this._htmlRenderElt.classList.add("inline-node-show");
+        if (preview) {
+          this._htmlRenderElt.classList.add("inline-html-preview");
+        }
+        this._htmlRenderElt.innerHTML = texString;
+      }
+    } catch (err) {
+      console.error(err);
+      this._htmlRenderElt?.classList.add("parse-error");
+      this.dom.setAttribute("title", err.toString());
+    }
+  }
+  // == Inner Editor ================================== //
+  dispatchInner(tr) {
+    if (!this._innerView) {
+      return;
+    }
+    let { state } = this._innerView.state.applyTransaction(tr);
+    this._innerView.updateState(state);
+    this.renderHtml(true);
+  }
+  openEditor() {
+    if (this._innerView) {
+      console.warn("[HTMLInlineView] editor already open when openEditor was called");
+      return;
+    }
+    this._innerView = new EditorView6(this._htmlSrcElt, {
+      state: EditorState2.create({
+        doc: this._outerView.state.schema.node("paragraph", null, [
+          this._outerView.state.schema.text(this._node.attrs?.htmlText)
+        ]),
+        plugins: [
+          history2(),
+          keymap3({
+            Tab: (state, dispatch) => {
+              if (dispatch) {
+                dispatch(state.tr.insertText("	"));
+              }
+              return true;
+            },
+            ArrowLeft: collapseCmd(this._outerView, -1, true),
+            ArrowRight: collapseCmd(this._outerView, 1, true),
+            ArrowUp: collapseCmd(this._outerView, -1, true),
+            ArrowDown: collapseCmd(this._outerView, 1, true),
+            "Mod-z": (state, dispatch, view) => {
+              return undo2(state, dispatch, view);
+            },
+            "Shift-Mod-z": (state, dispatch, view) => {
+              return redo2(state, dispatch, view);
+            }
+          }),
+          new Plugin({
+            props: {
+              handleDOMEvents: {
+                blur: (view) => {
+                  const pos = this._getPos();
+                  if (pos !== void 0) {
+                    const text = this._innerView?.state.doc.textContent || "";
+                    const tr = this._outerView.state.tr;
+                    tr.setNodeAttribute(pos, "fromInput", false);
+                    tr.setNodeAttribute(pos, "htmlText", text);
+                    this._outerView.dispatch(tr);
+                  }
+                  this.closeEditor();
+                }
+              }
+            }
+          })
+        ]
+      }),
+      dispatchTransaction: this.dispatchInner.bind(this)
+    });
+    this._innerView.dom.classList.add("inline-html-src");
+    this._innerView.dom.classList.remove("ProseMirror");
+    let innerState = this._innerView.state;
+    this._innerView.focus();
+    let innerPos = innerState.doc.textContent.length || 0;
+    this._innerView.dispatch(
+      innerState.tr.setSelection(TextSelection5.create(innerState.doc, innerPos))
+    );
+    this._htmlRenderElt?.classList.add("inline-html-preview");
+    this._isEditing = true;
+  }
+  /**
+   * Called when the inner ProseMirror editor should close.
+   *
+   * @param render Optionally update the rendered html after closing. (which
+   *    is generally what we want to do, since the user is done editing!)
+   */
+  closeEditor(render = true) {
+    if (this._innerView) {
+      const pos = this._getPos();
+      if (pos !== void 0) {
+        const text = this._innerView.state.doc.textContent || "";
+      }
+      this._innerView?.destroy();
+      this._innerView = void 0;
+    }
+    if (render) {
+      this.renderHtml();
+      this._htmlRenderElt?.classList.add("inline-html-render");
+      this._htmlRenderElt?.classList.remove("inline-html-preview");
+    }
+    this._isEditing = false;
+  }
+};
+
+// src/editor/extensions/HtmlNode/html-inline-node.tsx
+import block_names2 from "markdown-it/lib/common/html_blocks.mjs";
+var attr_name = "[a-zA-Z_:][a-zA-Z0-9:._-]*";
+var unquoted = "[^\"'=<>`\\x00-\\x20]+";
+var single_quoted = "'[^']*'";
+var double_quoted = '"[^"]*"';
+var attr_value = "(?:" + unquoted + "|" + single_quoted + "|" + double_quoted + ")";
+var attribute = "(?:\\s+" + attr_name + "(?:\\s*=\\s*" + attr_value + ")?)";
+var open_tag = "<[A-Za-z][A-Za-z0-9\\-]*" + attribute + "*\\s*\\/?>";
+var close_tag = "<\\/[A-Za-z][A-Za-z0-9\\-]*\\s*>";
+var HTML_OPEN_CLOSE_TAG_RE = new RegExp("(?:" + open_tag + "|" + close_tag + ")", "g");
+var HtmlInlineNodeExtension = class extends NodeExtension5 {
   get name() {
-    return "mdHtmlInline";
+    return "html_inline_node";
   }
-  createMarkSpec() {
+  createTags() {
+    return [ExtensionTag4.InlineNode];
+  }
+  createNodeSpec() {
     return {
+      inline: true,
+      selectable: true,
+      atom: true,
+      marks: "",
       attrs: {
-        depth: { default: 0 },
         key: {
           default: ""
         },
         htmlText: {
           default: ""
+        },
+        fromInput: {
+          default: false
         }
       },
-      toDOM: (mark) => [
-        "span",
-        {
-          ...mark.attrs
-        },
-        0
-      ]
+      toDOM: (node) => {
+        const dom = document.createElement("div");
+        dom.classList.add("inline-html-render");
+        dom.innerHTML = node.attrs.htmlText;
+        return dom;
+      }
     };
   }
   createNodeViews() {
-    return (node) => {
-      const container = document.createElement("span");
-      const domParser = new DOMParser();
-      const doc = domParser.parseFromString(node.attrs.htmlText || "", "text/html");
-      doc.body.childNodes.forEach((child) => {
-        if (isImageElement(child) && child.src && this.options.handleViewImgSrcUrl) {
-          let targetUrl = child.src;
-          if (child.src.includes(location.origin)) {
-            targetUrl = child.src.split(location.origin)[1];
+    return (node, view, getPos) => new HTMLInlineView(node, view, getPos);
+  }
+  createInputRules() {
+    const rules = [
+      nodeInputRule5({
+        regexp: HTML_OPEN_CLOSE_TAG_RE,
+        type: this.type,
+        getAttributes: (match) => {
+          return {
+            htmlText: match[0],
+            fromInput: true
+          };
+        },
+        beforeDispatch: ({ tr, start, match }) => {
+          const $pos = tr.doc.resolve(start);
+          const node = $pos.node(1);
+          console.log("last", node.lastChild);
+          console.log("node", node);
+        },
+        shouldSkip: (props) => {
+          const tagName = getTagName(props.fullMatch);
+          if (needSplitInlineHtmlTokenTags.includes(tagName) || block_names2.includes(tagName)) {
+            return true;
           }
-          this.options.handleViewImgSrcUrl(targetUrl).then((newHref) => {
-            child.src = newHref;
-          });
+          props.state.tr.replaceRangeWith(
+            props.start,
+            props.end,
+            this.type.create({ htmlText: props.fullMatch, fromInput: true })
+          );
+          return false;
         }
-        container.appendChild(child);
-      });
-      const contentDom = document.createElement("span");
-      container.appendChild(contentDom);
-      container.setAttribute("key", node.attrs.key);
-      contentDom.setAttribute("class", "md-html-inline");
-      return {
-        dom: container,
-        contentDOM: contentDom
-      };
-    };
+      })
+    ];
+    return rules;
+  }
+  fromMarkdown() {
+    return [
+      {
+        type: 6 /* inline */,
+        token: "html_inline_node",
+        node: this.name
+      }
+    ];
+  }
+  toMarkdown({ state, node }) {
+    state.text(node.attrs.htmlText || "");
   }
 };
-LineHtmlInlineExtension.disableExtraAttributes = true;
-LineHtmlInlineExtension = __decorateClass([
+HtmlInlineNodeExtension.disableExtraAttributes = true;
+HtmlInlineNodeExtension = __decorateClass([
   extension8({
     defaultOptions: {
       handleViewImgSrcUrl: async (src) => src
     }
   })
-], LineHtmlInlineExtension);
+], HtmlInlineNodeExtension);
 
 // src/editor/extensions/index.ts
 function extensions({ handleViewImgSrcUrl }) {
@@ -17965,9 +18296,9 @@ function extensions({ handleViewImgSrcUrl }) {
     new IframeExtension({
       enableResizing: true
     }),
-    new LineHtmlInlineExtension({
-      handleViewImgSrcUrl
-    }),
+    // new LineHtmlInlineExtension({
+    //   handleViewImgSrcUrl,
+    // }),
     new PlaceholderExtension({ placeholder: "Type '/' for commands" }),
     new LineHorizontalRuleExtension({}),
     new LineParagraphExtension(),
@@ -17989,6 +18320,9 @@ function extensions({ handleViewImgSrcUrl }) {
       activeDecoration: { style: "background-color: orange; color: black" }
     }),
     new LineHtmlBlockExtension(),
+    new HtmlInlineNodeExtension({
+      handleViewImgSrcUrl
+    }),
     new ClipboardExtension(),
     new ReactComponentExtension({}),
     new DropCursorExtension({}),
@@ -18170,7 +18504,7 @@ var MarkdownSerializer = class {
 };
 
 // src/editor/extensions/CodeMirror/codemirror-extension.ts
-import { Decoration as Decoration5, DecorationSet as DecorationSet5 } from "@remirror/pm/view";
+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";
@@ -18994,11 +19328,11 @@ import {
   isEqual,
   isTextSelection as isTextSelection3,
   keyBinding as keyBinding2,
-  NodeExtension as NodeExtension5,
-  nodeInputRule as nodeInputRule4,
+  NodeExtension as NodeExtension6,
+  nodeInputRule as nodeInputRule6,
   setBlockType as setBlockType2
 } from "@remirror/core";
-import { TextSelection as TextSelection5 } from "@remirror/pm/state";
+import { TextSelection as TextSelection6 } from "@remirror/pm/state";
 
 // src/editor/extensions/CodeMirror/codemirror-node-view.ts
 var CodeMirror6NodeView = class {
@@ -19056,7 +19390,7 @@ 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 NodeExtension5 {
+var LineCodeMirrorExtension = class extends NodeExtension6 {
   get name() {
     return "codeMirror";
   }
@@ -19121,12 +19455,12 @@ var LineCodeMirrorExtension = class extends NodeExtension5 {
       return { language };
     };
     return [
-      nodeInputRule4({
+      nodeInputRule6({
         regexp,
         type: this.type,
         beforeDispatch: ({ tr, start }) => {
           const $pos = tr.doc.resolve(start);
-          tr.setSelection(TextSelection5.near($pos));
+          tr.setSelection(TextSelection6.near($pos));
         },
         getAttributes
       })
@@ -19155,7 +19489,7 @@ var LineCodeMirrorExtension = class extends NodeExtension5 {
     const pos = tr.selection.$from.before();
     const end = pos + nodeSize2 + 1;
     tr.replaceWith(pos, end, this.type.create({ language }));
-    tr.setSelection(TextSelection5.near(tr.doc.resolve(pos + 1)));
+    tr.setSelection(TextSelection6.near(tr.doc.resolve(pos + 1)));
     if (dispatch) {
       dispatch(tr);
     }
@@ -19230,7 +19564,7 @@ var LineCodeMirrorExtension = class extends NodeExtension5 {
       return DecorationSet5.empty;
     }
     const { create, destroy } = codemirror_lang_menu_default(found);
-    const deco = Decoration5.widget(found.pos, create, {
+    const deco = Decoration6.widget(found.pos, create, {
       ignoreSelection: true,
       stopEvent: () => true,
       key: "language-menu",
@@ -19301,7 +19635,7 @@ var [SourceEditorProvider, useSourceCodeEditor] = createContextState(
     };
   }
 );
-var SourceCodeEditorCore = memo6(
+var SourceCodeEditorCore = memo7(
   (props) => {
     const { markdownToolBar, styleToken } = props;
     const { content, markText, hooks, isTesting, editable } = useSourceCodeEditor();
@@ -19366,7 +19700,7 @@ var SourceEditor = (props) => {
     }
   );
 };
-var SourceEditor_default = memo6(SourceEditor);
+var SourceEditor_default = memo7(SourceEditor);
 
 // src/editor/hooks/index.ts
 import { useHelpers, useKeymap, useRemirrorContext as useRemirrorContext4, useCommands as useCommands4 } from "@remirror/react";
@@ -19439,7 +19773,7 @@ import { prosemirrorNodeToHtml } from "remirror";
 import HTML2 from "html-parse-stringify";
 import { useEffect as useEffect8, useState as useState9 } from "react";
 import { nanoid as nanoid3 } from "nanoid";
-import { Loading3QuartersOutlined } from "zens/esm/Icons";
+import { Icon } from "zens";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var Preview = (props) => {
   const { doc, delegateOptions } = props;
@@ -19491,7 +19825,7 @@ var Preview = (props) => {
           justifyContent: "center",
           alignItems: "center"
         },
-        children: /* @__PURE__ */ jsx21(Loading3QuartersOutlined, { spin: true, size: 40 })
+        children: /* @__PURE__ */ jsx21(Icon.Loading3QuartersOutlined, { spin: true, size: 40 })
       }
     );
   }