rme 0.0.73 → 0.0.75

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
@@ -4455,6 +4457,9 @@ function getTagName(str) {
   }
   return "";
 }
+function isImageElement(el) {
+  return el && el.tagName?.toLocaleUpperCase() === "IMG";
+}
 function buildHtmlStringFromAst(ast) {
   let attrs = "";
   if (ast.attrs) {
@@ -4471,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);
+      }
     }
   });
 }
@@ -4503,29 +4575,40 @@ 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 = [];
+      }
+      tokens.splice(i, 1, ...newTokens);
     } else if (isHtmlBlockToken(curToken)) {
       const tag = getTagName(curToken.content);
       if (isSingleNode(curToken.content) && needSplitInlineHtmlTokenTags.includes(tag)) {
@@ -4726,7 +4809,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) {
@@ -5305,21 +5396,21 @@ import { isTextSelection as isTextSelection2, PlainExtension as PlainExtension2
 import { Decoration as Decoration2, DecorationSet as DecorationSet2 } from "@remirror/pm/view";
 
 // src/editor/extensions/Inline/inline-mark-extensions.ts
-import { MarkExtension as MarkExtension2, extension as extension2, keyBinding } from "@remirror/core";
+import { MarkExtension, extension, keyBinding } from "@remirror/core";
 
 // src/editor/extensions/Inline/format-href.ts
-function formatHref(location) {
-  if (isUnixFilePath(location) || isWindowsFilePath(location)) {
-    return formatFileUrl(location);
+function formatHref(location2) {
+  if (isUnixFilePath(location2) || isWindowsFilePath(location2)) {
+    return formatFileUrl(location2);
   } else {
-    return location;
+    return location2;
   }
 }
-function isUnixFilePath(location) {
-  return location.startsWith("/");
+function isUnixFilePath(location2) {
+  return location2.startsWith("/");
 }
-function isWindowsFilePath(location) {
-  return location.startsWith("\\") || /^[A-Z]{1,2}:/.test(location);
+function isWindowsFilePath(location2) {
+  return location2.startsWith("\\") || /^[A-Z]{1,2}:/.test(location2);
 }
 function formatFileUrl(filePath) {
   let pathName = filePath;
@@ -5538,6 +5629,8 @@ 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 voidElements2 from "void-elements";
+import { cloneDeep } from "lodash";
 gfmAutolinkLiteralFromMarkdown.transforms = [];
 function fixMarkNames(marks) {
   if (marks.length <= 1)
@@ -5799,6 +5892,7 @@ var fromMarkdownOptions = {
           "definition",
           "headingAtx",
           "htmlFlow",
+          "htmlText",
           "list",
           "thematicBreak"
         ]
@@ -5850,150 +5944,25 @@ function parseMdInline(phrasingContents, depth = 1) {
   }
   return inlineTokens;
 }
-var splitHtmlTokens = (tokens) => {
-  let splitArr = [];
-  for (let i = 0; i < tokens.length; i++) {
-    const cur = tokens[i];
-    if (cur.type === "html") {
-      const isClosing = isClosingTag(cur.value);
-      const curTagName = getTagName(cur.value);
-      if (needSplitInlineHtmlTokenTags.includes(curTagName)) {
-        continue;
-      }
-      if (!isClosing) {
-        const nextSelfCloseIndex = tokens.slice(i).findIndex((t3) => {
-          return getTagName(t3.value) === curTagName && isClosingTag(t3.value);
-        });
-        if (nextSelfCloseIndex >= 0) {
-          splitArr.push({
-            tagName: curTagName,
-            attrs: getAttrsBySignalHtmlContent(cur.value),
-            scope: [i, nextSelfCloseIndex + i]
-          });
-          i = nextSelfCloseIndex + i - 1;
-        }
-      }
-    }
-  }
-  return splitArr;
-};
-function flatHTMLInlineToken(mdastToken) {
-  const allTokens = [...mdastToken];
-  const markHtmlTokens = (tokens, depth) => {
-    const splitArr = splitHtmlTokens(tokens);
-    if (splitArr.length === 0) {
-      return;
-    }
-    splitArr.forEach((arr) => {
-      tokens[arr.scope[0]].start = true;
-      tokens[arr.scope[0]].complete = true;
-      tokens[arr.scope[1]].end = true;
-      tokens[arr.scope[1]].complete = true;
-      const start = arr.scope[0] + 1;
-      const end = arr.scope[1];
-      if (start === end) {
-        return;
-      }
-      const scopeTokens = tokens.slice(start, end);
-      scopeTokens.forEach((token) => {
-        token.depth = depth + 1;
-        if (token.htmlSpec) {
-          token.htmlSpec.push({
-            tagName: arr.tagName,
-            attrs: arr.attrs
-          });
-        } else {
-          token.htmlSpec = [
-            {
-              tagName: arr.tagName,
-              attrs: arr.attrs
-            }
-          ];
-        }
-      });
-      markHtmlTokens(scopeTokens, depth + 1);
-    });
-  };
-  markHtmlTokens(allTokens, 1);
-  const res = [];
-  allTokens.forEach((token) => {
-    if (token.type === "html") {
-      if (token.complete) {
-        res.push({
-          marks: ["mdMark"],
-          attrs: {
-            depth: token.depth || 1,
-            first: !!token.start,
-            last: !!token.end
-          },
-          start: token.position?.start?.offset,
-          end: token.position?.end?.offset
-        });
-      } else {
-        res.push({
-          marks: ["mdText"],
-          attrs: {
-            depth: token.depth || 1,
-            first: true,
-            last: true,
-            class: "html_tag"
-          },
-          start: token.position?.start?.offset,
-          end: token.position?.end?.offset
-        });
-      }
-    } else {
-      const nodes = flatPhrasingContent(token, token.depth || 1);
-      if (token.htmlSpec && nodes.length > 0) {
-        for (const node of nodes) {
-          node.marks.push("mdHtmlInline");
-          node.attrs.htmlSpec = token.htmlSpec;
-        }
-      }
-      res.push(...nodes);
-    }
-  });
-  return res;
-}
-function hasHtmlToken(mdastToken) {
-  for (const token of mdastToken) {
-    if (token.type === "html" && !needSplitInlineHtmlTokenTags.includes(getTagName(token.value))) {
-      return true;
-    }
-  }
-  return false;
-}
 function fromInlineMarkdown(text) {
   const phrasingContents = parseInlineMarkdown(text);
-  if (hasHtmlToken(phrasingContents)) {
-    const nodes = flatHTMLInlineToken(phrasingContents);
-    return nodes;
-  }
-  const tokens = parseMdInline(phrasingContents);
-  return tokens;
+  const res = parseMdInline(phrasingContents);
+  return res;
 }
-var canCreateDomTagName = (tagName) => {
-  try {
-    document.createElement(tagName);
-    return true;
-  } catch (error) {
-    return false;
-  }
-};
 
 // src/editor/extensions/Inline/inline-mark-helpers.ts
 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;
@@ -6001,12 +5970,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
     ]);
@@ -6202,58 +6179,6 @@ function deleteTextBlockChild(tr, textBlockNode, textBlockStart, childIndex) {
   return tr.delete(offset, offset + textBlockNode.child(childIndex).nodeSize);
 }
 
-// src/editor/extensions/HtmlNode/html-inline-marks.ts
-import { extension, MarkExtension } from "remirror";
-var HtmlInlineMarks = class extends MarkExtension {
-  get name() {
-    return "mdHtmlInline";
-  }
-  createMarkSpec() {
-    return {
-      spanning: false,
-      attrs: {
-        depth: { default: 0 },
-        first: { default: false },
-        last: { default: false },
-        htmlSpec: { default: [] }
-      },
-      toDOM: (mark) => {
-        const htmlSpec = mark.attrs.htmlSpec.filter(
-          (spec) => canCreateDomTagName(spec.tagName)
-        );
-        if (htmlSpec.length >= 1) {
-          const getDomSpec = (spec) => {
-            const curSpec = spec[0];
-            const res = [curSpec.tagName];
-            if (curSpec.attrs) {
-              res.push(curSpec.attrs);
-            }
-            if (spec.length > 1) {
-              res.push(getDomSpec(spec.slice(1)));
-            } else {
-              res.push(0);
-            }
-            return res;
-          };
-          return getDomSpec(htmlSpec);
-        }
-        return ["span"];
-      }
-    };
-  }
-};
-HtmlInlineMarks.disableExtraAttributes = true;
-HtmlInlineMarks = __decorateClass([
-  extension({
-    defaultOptions: {
-      handleViewImgSrcUrl: async (src) => src
-    },
-    staticKeys: [],
-    handlerKeys: [],
-    customHandlerKeys: []
-  })
-], HtmlInlineMarks);
-
 // src/editor/extensions/Inline/inline-mark-extensions.ts
 var commonAttrs = {
   depth: { default: 0 }
@@ -6264,7 +6189,7 @@ var endpointAttrs = {
   last: { default: false },
   class: { default: "" }
 };
-var MetaKey = class extends MarkExtension2 {
+var MetaKey = class extends MarkExtension {
   static {
     this.disableExtraAttributes = true;
   }
@@ -6284,7 +6209,7 @@ var MetaKey = class extends MarkExtension2 {
     };
   }
 };
-var PlainText = class extends MarkExtension2 {
+var PlainText = class extends MarkExtension {
   static {
     this.disableExtraAttributes = true;
   }
@@ -6298,7 +6223,7 @@ var PlainText = class extends MarkExtension2 {
     };
   }
 };
-var Emphasis = class extends MarkExtension2 {
+var Emphasis = class extends MarkExtension {
   static {
     this.disableExtraAttributes = true;
   }
@@ -6318,7 +6243,7 @@ var Emphasis = class extends MarkExtension2 {
 __decorateClass([
   keyBinding({ shortcut: "mod-i", command: "toggleEmphasis" })
 ], Emphasis.prototype, "shortcut", 1);
-var Strong = class extends MarkExtension2 {
+var Strong = class extends MarkExtension {
   static {
     this.disableExtraAttributes = true;
   }
@@ -6338,7 +6263,7 @@ var Strong = class extends MarkExtension2 {
 __decorateClass([
   keyBinding({ shortcut: "mod-b", command: "toggleStrong" })
 ], Strong.prototype, "shortcut", 1);
-var CodeText = class extends MarkExtension2 {
+var CodeText = class extends MarkExtension {
   static {
     this.disableExtraAttributes = true;
   }
@@ -6358,7 +6283,7 @@ var CodeText = class extends MarkExtension2 {
 __decorateClass([
   keyBinding({ shortcut: "mod-e", command: "toggleCodeText" })
 ], CodeText.prototype, "shortcut", 1);
-var CodeSpace = class extends MarkExtension2 {
+var CodeSpace = class extends MarkExtension {
   static {
     this.disableExtraAttributes = true;
   }
@@ -6372,7 +6297,7 @@ var CodeSpace = class extends MarkExtension2 {
     };
   }
 };
-var Delete = class extends MarkExtension2 {
+var Delete = class extends MarkExtension {
   static {
     this.disableExtraAttributes = true;
   }
@@ -6392,7 +6317,7 @@ var Delete = class extends MarkExtension2 {
 __decorateClass([
   keyBinding({ shortcut: "mod-shift-s", command: "toggleDelete" })
 ], Delete.prototype, "shortcut", 1);
-var LinkText = class extends MarkExtension2 {
+var LinkText = class extends MarkExtension {
   static {
     this.disableExtraAttributes = true;
   }
@@ -6417,7 +6342,7 @@ var LinkText = class extends MarkExtension2 {
     };
   }
 };
-var LinkUri = class extends MarkExtension2 {
+var LinkUri = class extends MarkExtension {
   static {
     this.disableExtraAttributes = true;
   }
@@ -6432,7 +6357,7 @@ var LinkUri = class extends MarkExtension2 {
     };
   }
 };
-var ImgText = class extends MarkExtension2 {
+var ImgText = class extends MarkExtension {
   static {
     this.disableExtraAttributes = true;
   }
@@ -6448,7 +6373,7 @@ var ImgText = class extends MarkExtension2 {
   }
 };
 var globalImageHrefCache = /* @__PURE__ */ new Map();
-var ImgUri = class extends MarkExtension2 {
+var ImgUri = class extends MarkExtension {
   constructor() {
     super(...arguments);
     this.createNodeViews = () => {
@@ -6496,7 +6421,7 @@ var ImgUri = class extends MarkExtension2 {
 };
 ImgUri.disableExtraAttributes = true;
 ImgUri = __decorateClass([
-  extension2({
+  extension({
     defaultOptions: {
       handleViewImgSrcUrl: async (src) => src
     },
@@ -6528,8 +6453,8 @@ var markExtensions = (options = {}) => [
   new ImgText(),
   new ImgUri({
     handleViewImgSrcUrl: options.handleViewImgSrcUrl
-  }),
-  new HtmlInlineMarks()
+  })
+  // new HtmlInlineMarks(),
 ];
 
 // src/editor/extensions/Inline/inline-deco-extension.ts
@@ -6939,7 +6864,7 @@ var import_escape_string_regexp = __toESM(require_escape_string_regexp(), 1);
 var import_string_prototype = __toESM(require_string_prototype2(), 1);
 import {
   command,
-  extension as extension4,
+  extension as extension3,
   helper,
   PlainExtension as PlainExtension5
 } from "@remirror/core";
@@ -6955,7 +6880,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";
@@ -7303,7 +7228,54 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
   }
 
   & input[type='checkbox'] {
-    accent-color: #58a6ff;
+    /* Add if not using autoprefixer */
+    -webkit-appearance: none;
+    /* Remove most all native input styles */
+    appearance: none;
+    /* Not removed via appearance */
+    margin: 0;
+
+    font: inherit;
+    color: currentColor;
+    width: 1.15em;
+    height: 1.15em;
+    border: 1px solid currentColor;
+    border-radius: 4px;
+    transform: translateY(0.25em);
+
+    display: grid;
+    place-content: center;
+  }
+
+  & input[type='checkbox']:checked {
+    background-color: ${(props) => props.theme.accentColor};
+  }
+
+  & input[type='checkbox']:checked::before {
+    transform: scale(1);
+  }
+
+  & input[type='checkbox']::before {
+    content: '';
+    width: 0.75em;
+    height: 0.75em;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    transform: scale(0);
+    transform-origin: bottom left;
+    transition: 120ms transform ease-in-out;
+    background-color: ${(props) => props.theme.bgColor};
+  }
+
+  & input[type='checkbox']:focus {
+    outline: max(2px, 0.15em) solid currentColor;
+    outline-offset: max(2px, 0.15em);
+  }
+
+  & input[type='checkbox']:disabled {
+    --form-control-color: #eee;
+
+    color: #eee;
+    cursor: not-allowed;
   }
 
   & a:focus,
@@ -7565,16 +7537,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;
@@ -7774,6 +7736,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;
@@ -7789,7 +7784,7 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
   }
 
   & .ProseMirror-focused {
-    outline: 2px solid ${(props) => props.theme.accentColor};
+    outline: none;
   }
 
   .img-input__container {
@@ -8553,13 +8548,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 };
@@ -8583,7 +8578,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";
@@ -8599,7 +8594,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);
@@ -8754,7 +8749,7 @@ var defaultIgnoredKeys = [
 ];
 
 // src/editor/extensions/SlashMenu/slashmenu-extension.ts
-import { PlainExtension as PlainExtension4, extension as extension3 } from "remirror";
+import { PlainExtension as PlainExtension4, extension as extension2 } from "remirror";
 
 // src/editor/extensions/SlashMenu/case.ts
 var defaultConditions = (openInSelection = false) => {
@@ -8887,7 +8882,7 @@ var SlashMenuExtension = class extends PlainExtension4 {
   }
 };
 SlashMenuExtension = __decorateClass([
-  extension3({
+  extension2({
     defaultOptions: {}
   })
 ], SlashMenuExtension);
@@ -8897,11 +8892,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)`
@@ -8912,7 +8907,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);
@@ -8996,7 +8991,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(() => {
@@ -9352,7 +9347,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 {
@@ -9557,7 +9552,7 @@ __decorateClass([
   helper()
 ], FindExtension.prototype, "findRanges", 1);
 FindExtension = __decorateClass([
-  extension4({
+  extension3({
     defaultOptions: {
       decoration: { style: "background-color: yellow;" },
       activeDecoration: { style: "background-color: orange;" },
@@ -16645,7 +16640,7 @@ var LineHtmlBlockExtension = class extends NodeExtension {
 import {
   command as command2,
   ErrorConstant as ErrorConstant2,
-  extension as extension5,
+  extension as extension4,
   ExtensionTag,
   getTextSelection,
   invariant,
@@ -16659,7 +16654,7 @@ import { insertPoint } from "@remirror/pm/transform";
 import { ExtensionImageTheme } from "@remirror/theme";
 
 // src/editor/extensions/Image/image-nodeview.tsx
-import { Image, Popover } from "zens";
+import { Image as ZensImage, Popover } from "zens";
 
 // src/editor/extensions/Image/image-tool-tips.tsx
 import { useState as useState6 } from "react";
@@ -16692,7 +16687,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);
@@ -17008,7 +17003,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 */,
@@ -17207,7 +17202,6 @@ import { jsx as jsx15 } from "react/jsx-runtime";
 var warningFallBack = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAAAAACIM/FCAAAChElEQVR4Ae3aMW/TQBxAcb70k91AAiGuGlZAtOlQApWaDiSdklZq2RPUTm1xUWL3PgqSpygkXlh88N54nn7S2Trd3y/CP5IQIUKECBEiRIgQIUKECBEiRIgQIUKECBEiRIgQIUKECBEiRIgQIUKECBEiRIgQIUKECBEiRIgQIUKECPmPIEKECBEiRIgQIeX82+FBO0naB4eTRRkt5P7sNWt1Rw9RQvKThI2SYR4f5OoVW2rfRAYpT6hqHc8WeVHki9mgRdWwiAmyfA9AdrlaW5tlAHxcxQMpK8feRbGxPEkrSREN5ARg/y780V0GMIwFcgXwLg9byvsAN3FA8lfAfr7jYQZ0nqKAfAb21vYVwNruSoEvMUDuE+Ai7IKECZA+RAA5A7JiN6TMgFHzIeUb4DLshoQZ0H1uPGQOvFzVQZYtYNF4yBg4DnWQMAAmjYccArN6yBQ4ajzkAFjUQ+ZAv/GQNpDXQ3Kg03hIAhT1kAJIhLi1/vJl39Ic6Mf3+a2K8PM7BgahtgEwjuKI0lqGjSI8opRdYFb3sk/jODSGEZCVuyFFDzgPzYc8JMBkN2QMpI8RQMIQ2LvdBblNgdM4Lh/aQJaHrf3sAe2nKCDhGqCfb3VEcx1UNQTItlzQ3fYAvoZYIMUHgHRSbiyPU4BPZUSX2JWEbLZcW5v2qByrmMYKxZCq1mA6z4sin08HLapOy8gGPddtttT5HuHobZiwUXr6K85h6KjLWm/PH+MdTy/GR/12knb6g8mPZ38YECJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAh0fUb5q7oCGreEVEAAAAASUVORK5CYII=";
 function ImageNodeView(props) {
   const { node, selected, updateAttributes, handleViewImgSrcUrl } = props;
-  const [src, setSrc] = useState8("");
   const initRef = useRef5();
   const popoverStore = useRef5();
   const [open, setOpen] = useState8(selected);
@@ -17217,26 +17211,36 @@ function ImageNodeView(props) {
     }
     setOpen(selected);
   }, [selected]);
-  useEffect6(() => {
-    if (handleViewImgSrcUrl) {
-      handleViewImgSrcUrl(node.attrs.src).then((newSrc) => {
-        setSrc(newSrc);
-      });
-    } else {
-      setSrc(node.attrs.src);
-    }
-  }, [handleViewImgSrcUrl, node.attrs.src]);
   const handleStoreChange = (store) => popoverStore.current = store;
-  const Main = src ? /* @__PURE__ */ jsx15(Resizable, { controlInit: (init) => initRef.current = init, ...props, children: /* @__PURE__ */ jsx15(
-    Image,
+  const Main = /* @__PURE__ */ jsx15(Resizable, { controlInit: (init) => initRef.current = init, ...props, children: /* @__PURE__ */ jsx15(
+    ZensImage,
     {
-      fallback: warningFallBack,
       onLoad: () => initRef.current?.(),
-      preview: false,
-      ...node.attrs,
-      src
+      src: node.attrs.src,
+      imgPromise: (src) => {
+        return new Promise((resolve, reject) => {
+          const makeImageLoad = (targetSrc) => {
+            const img = new Image();
+            img.src = targetSrc;
+            img.onload = () => {
+              resolve(targetSrc);
+            };
+            img.onerror = () => {
+              reject(warningFallBack);
+            };
+          };
+          if (handleViewImgSrcUrl) {
+            handleViewImgSrcUrl(node.attrs.src).then((newSrc) => {
+              makeImageLoad(newSrc);
+            });
+          } else {
+            makeImageLoad(node.attrs.src);
+          }
+        });
+      },
+      ...node.attrs
     }
-  ) }) : /* @__PURE__ */ jsx15(Image, { src: warningFallBack, style: { width: "80px", height: "80px" } });
+  ) });
   if (!open) {
     return Main;
   }
@@ -17431,7 +17435,7 @@ __decorateClass([
   command2()
 ], HtmlImageExtension.prototype, "uploadImage", 1);
 HtmlImageExtension = __decorateClass([
-  extension5({
+  extension4({
     defaultOptions: {
       createPlaceholder,
       handleViewImgSrcUrl: async (src) => src,
@@ -17507,7 +17511,7 @@ var import_querystringify = __toESM(require_querystringify(), 1);
 import {
   command as command3,
   cx as cx2,
-  extension as extension6,
+  extension as extension5,
   ExtensionTag as ExtensionTag2,
   findSelectedNodeOfType,
   NodeExtension as NodeExtension3,
@@ -17670,7 +17674,7 @@ __decorateClass([
   command3()
 ], IframeExtension.prototype, "updateYouTubeVideo", 1);
 IframeExtension = __decorateClass([
-  extension6({
+  extension5({
     defaultOptions: {
       defaultSource: "",
       class: "remirror-iframe",
@@ -17711,7 +17715,7 @@ function createYouTubeUrl(props) {
 }
 
 // src/editor/extensions/Placeholder/index.ts
-import { extension as extension7, ManagerPhase, PlainExtension as PlainExtension6 } from "@remirror/core";
+import { extension as extension6, ManagerPhase, PlainExtension as PlainExtension6 } from "@remirror/core";
 import { Decoration as Decoration4, DecorationSet as DecorationSet4 } from "@remirror/pm/view";
 import { ExtensionPlaceholderTheme } from "@remirror/theme";
 var PlaceholderExtension = class extends PlainExtension6 {
@@ -17736,7 +17740,7 @@ var PlaceholderExtension = class extends PlainExtension6 {
   }
 };
 PlaceholderExtension = __decorateClass([
-  extension7({
+  extension6({
     defaultOptions: {
       emptyNodeClass: ExtensionPlaceholderTheme.IS_EMPTY,
       placeholder: ""
@@ -17764,7 +17768,7 @@ function createDecorationSet(props) {
 
 // src/editor/extensions/Clipboard/clipboard-extension.ts
 import { PlainExtension as PlainExtension7 } from "@remirror/core";
-import { DOMSerializer, DOMParser } from "@remirror/pm/model";
+import { DOMSerializer, DOMParser as DOMParser2 } from "@remirror/pm/model";
 function isPureText(content) {
   if (!content)
     return false;
@@ -17812,7 +17816,7 @@ var ClipboardExtension = class extends PlainExtension7 {
           const html2 = clipboardData.getData("text/html");
           if (html2.length === 0 && text.length === 0)
             return false;
-          const domParser = DOMParser.fromSchema(schema);
+          const domParser = DOMParser2.fromSchema(schema);
           let dom;
           if (html2.length === 0) {
             const slice2 = parser4?.(text);
@@ -17852,7 +17856,7 @@ var ClipboardExtension = class extends PlainExtension7 {
 };
 
 // src/editor/extensions/HtmlBr/br-extension.ts
-import { extension as extension8, 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";
@@ -17877,6 +17881,15 @@ var HtmlBrExtension = class extends NodeExtension4 {
       }
     };
   }
+  createInputRules() {
+    const rules = [
+      nodeInputRule4({
+        regexp: new RegExp("<br/>"),
+        type: this.type
+      })
+    ];
+    return rules;
+  }
   fromMarkdown() {
     return [
       {
@@ -17892,11 +17905,379 @@ var HtmlBrExtension = class extends NodeExtension4 {
 };
 HtmlBrExtension.disableExtraAttributes = true;
 HtmlBrExtension = __decorateClass([
-  extension8({
+  extension7({
     defaultOptions: {}
   })
 ], HtmlBrExtension);
 
+// 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 "html_inline_node";
+  }
+  createTags() {
+    return [ExtensionTag4.InlineNode];
+  }
+  createNodeSpec() {
+    return {
+      inline: true,
+      selectable: true,
+      atom: true,
+      marks: "",
+      attrs: {
+        key: {
+          default: ""
+        },
+        htmlText: {
+          default: ""
+        },
+        fromInput: {
+          default: false
+        }
+      },
+      toDOM: (node) => {
+        const dom = document.createElement("div");
+        dom.classList.add("inline-html-render");
+        dom.innerHTML = node.attrs.htmlText;
+        return dom;
+      }
+    };
+  }
+  createNodeViews() {
+    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;
+          }
+          props.state.tr.replaceRangeWith(
+            props.start,
+            props.end,
+            this.type.create({ htmlText: props.fullMatch, fromInput: true })
+          );
+          return false;
+        }
+      })
+    ];
+    return rules;
+  }
+  fromMarkdown() {
+    return [
+      {
+        type: 6 /* inline */,
+        token: "html_inline_node",
+        node: this.name
+      }
+    ];
+  }
+  toMarkdown({ state, node }) {
+    state.text(node.attrs.htmlText || "");
+  }
+};
+HtmlInlineNodeExtension.disableExtraAttributes = true;
+HtmlInlineNodeExtension = __decorateClass([
+  extension8({
+    defaultOptions: {
+      handleViewImgSrcUrl: async (src) => src
+    }
+  })
+], HtmlInlineNodeExtension);
+
 // src/editor/extensions/index.ts
 function extensions({ handleViewImgSrcUrl }) {
   return [
@@ -17912,6 +18293,9 @@ function extensions({ handleViewImgSrcUrl }) {
     new IframeExtension({
       enableResizing: true
     }),
+    // new LineHtmlInlineExtension({
+    //   handleViewImgSrcUrl,
+    // }),
     new PlaceholderExtension({ placeholder: "Type '/' for commands" }),
     new LineHorizontalRuleExtension({}),
     new LineParagraphExtension(),
@@ -17933,6 +18317,9 @@ function extensions({ handleViewImgSrcUrl }) {
       activeDecoration: { style: "background-color: orange; color: black" }
     }),
     new LineHtmlBlockExtension(),
+    new HtmlInlineNodeExtension({
+      handleViewImgSrcUrl
+    }),
     new ClipboardExtension(),
     new ReactComponentExtension({}),
     new DropCursorExtension({}),
@@ -18114,7 +18501,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";
@@ -18938,11 +19325,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 {
@@ -19000,7 +19387,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";
   }
@@ -19065,12 +19452,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
       })
@@ -19099,7 +19486,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);
     }
@@ -19174,7 +19561,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",
@@ -19245,7 +19632,7 @@ var [SourceEditorProvider, useSourceCodeEditor] = createContextState(
     };
   }
 );
-var SourceCodeEditorCore = memo6(
+var SourceCodeEditorCore = memo7(
   (props) => {
     const { markdownToolBar, styleToken } = props;
     const { content, markText, hooks, isTesting, editable } = useSourceCodeEditor();
@@ -19310,7 +19697,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";
@@ -19383,7 +19770,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;
@@ -19435,7 +19822,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 })
       }
     );
   }