rme 0.0.60 → 0.0.62

package/dist/index.d.ts

@@ -261,17 +261,17 @@ interface WarpperProps$1 {
     codeEditor?: boolean;
     dark?: boolean;
 }
-declare const WysiwygThemeWrapper: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<styled_components_dist_types.Substitute<styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const WysiwygThemeWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components_dist_types.Substitute<styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
-}>, WarpperProps$1>, never>>;
+}>, WarpperProps$1>, never>> & string;
 
 interface WarpperProps {
     codeEditor?: boolean;
     dark?: boolean;
 }
-declare const SourceCodeThemeWrapper: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<styled_components_dist_types.Substitute<styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const SourceCodeThemeWrapper: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components_dist_types.Substitute<styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
-}>, WarpperProps>, never>>;
+}>, WarpperProps>, never>> & string;
 
 declare const tableSelectorSize = 15;
 declare const common: {

package/dist/index.mjs

@@ -4471,11 +4471,12 @@ function buildHtmlStringFromAst(ast) {
 
 // src/editor/transform/markdown-it-html-inline.ts
 import Token2 from "markdown-it/lib/token.mjs";
-var needSplitInlineHtmlTokenTags = ["img", "iframe"];
-var excludeHtmlInlineNodes = ["html_image", "iframe_inline"];
+var needSplitInlineHtmlTokenTags = ["img", "iframe", "br"];
+var excludeHtmlInlineNodes = ["html_image", "iframe_inline", "html_br"];
 var typeMap = {
   img: "html_image",
-  iframe: "iframe_inline"
+  iframe: "iframe_inline",
+  br: "html_br"
 };
 function splitHtmlInlineTokens(t3) {
   if (!t3.children)
@@ -5141,7 +5142,16 @@ var LineTableExtension = class extends TableExtension {
     node.forEach((rowNode, _, rowIndex) => {
       const row = [];
       rowNode.forEach((cellNode, __, colIndex) => {
-        row.push(replaceNewLines(cellNode.textContent.trim()));
+        let cellText = "";
+        for (let i = 0; i < cellNode.childCount; i++) {
+          let child = cellNode.child(i);
+          if (child.textContent) {
+            cellText += child.textContent;
+          } else if (child.type.name === "html_br") {
+            cellText += "<br/>";
+          }
+        }
+        row.push(replaceNewLines(cellText.trim()));
         if (rowIndex === 0) {
           colAligns[colIndex] = 1 /* DEFAULT */;
         }
@@ -5801,7 +5811,7 @@ var fromMarkdownOptions = {
 };
 function parseInlineMarkdown(text) {
   try {
-    const root = fromMarkdown(text, "utf-8", fromMarkdownOptions);
+    const root = fromMarkdown(text, fromMarkdownOptions);
     if (root.children.length === 0) {
       return [];
     }
@@ -5955,7 +5965,6 @@ function hasHtmlToken(mdastToken) {
 }
 function fromInlineMarkdown(text) {
   const phrasingContents = parseInlineMarkdown(text);
-  console.log("phrasingContents", phrasingContents);
   if (hasHtmlToken(phrasingContents)) {
     const nodes = flatHTMLInlineToken(phrasingContents);
     return nodes;
@@ -6477,7 +6486,11 @@ var ImgUri = class extends MarkExtension2 {
           default: ""
         }
       },
-      toDOM: (mark) => ["img", { src: globalImageHrefCache.get(mark.attrs.href) || mark.attrs.href }, 0]
+      toDOM: (mark) => [
+        "img",
+        { src: mark.attrs.href },
+        0
+      ]
     };
   }
 };
@@ -6880,7 +6893,7 @@ var LineHardBreakExtension = class extends HardBreakExtension {
       if (canReplace) {
         const schema = state.schema;
         if (needUseBrNodeNames.includes(nodeName)) {
-          dispatch?.(tr.replaceRangeWith(from, to, schema.text("<br/>\n")));
+          dispatch?.(tr.replaceRangeWith(from, to, schema.nodes["html_br"].create()));
         } else {
           dispatch?.(tr.replaceRangeWith(from, to, schema.text("\n")));
         }
@@ -7558,43 +7571,44 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => p)`
   & h4,
   & h5,
   & h6 {
+    position: relative;
     margin: 0;
     line-height: 1;
   }
 
   & h1 {
     font-weight: 600;
-    padding: 10px 0 20px 0;
+    margin: 10px 0 20px 0;
     font-size: ${(props) => props.theme.fontH1};
   }
 
   & h2 {
     font-weight: 600;
-    padding: 10px 0 20px 0;
+    margin: 10px 0 20px 0;
     font-size: ${(props) => props.theme.fontH2};
   }
 
   & h3 {
     font-weight: 600;
-    padding: 10px 0 20px 0;
+    margin: 10px 0 20px 0;
     font-size: ${(props) => props.theme.fontH3};
   }
 
   & h4 {
     font-weight: 600;
-    padding: 10px 0 20px 0;
+    margin: 10px 0 20px 0;
     font-size: ${(props) => props.theme.fontH4};
   }
 
   & h5 {
     font-weight: 600;
-    padding: 6px 0 16px 0;
+    margin: 6px 0 16px 0;
     font-size: ${(props) => props.theme.fontH5};
   }
 
   & h6 {
     font-weight: 600;
-    padding: 6px 0 16px 0;
+    margin: 6px 0 16px 0;
     font-size: ${(props) => props.theme.fontH6};
   }
 
@@ -8191,6 +8205,57 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => p)`
   ${(props) => props.dark && css`
       color-scheme: dark;
     `}
+
+  ${(props) => {
+  const style = css`
+      position: absolute;
+      left: -20px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      font-weight: normal;
+      color: ${props.theme.primaryFontColor};
+    `;
+  return css`
+      & h1 {
+        &:hover::before {
+          content: 'h1';
+          ${style}
+        }
+      }
+      & h2 {
+        &:hover::before {
+          content: 'h2';
+          ${style}
+        }
+      }
+      & h3 {
+        &:hover::before {
+          content: 'h3';
+          ${style}
+        }
+      }
+      & h4 {
+        &:hover::before {
+          content: 'h4';
+          ${style}
+        }
+      }
+      & h5 {
+        &:hover::before {
+          content: 'h5';
+          ${style}
+        }
+      }
+      & h6 {
+        &:hover::before {
+          content: 'h6';
+          ${style}
+        }
+      }
+    `;
+}}
 `;
 
 // src/editor/theme/SourceCodeThemeWrapper.tsx
@@ -15378,7 +15443,7 @@ var ImageToolTips = (props) => {
     {
       placeholder: "Image URL [Enter]",
       value: srcVal,
-      style: { fontSize: "14px" },
+      style: { fontSize: "14px", width: "300px" },
       onInput: handleSrcInput,
       onPressEnter: updateSrc
     }
@@ -16730,23 +16795,23 @@ import { memo as memo4, useMemo as useMemo3, useCallback as useCallback4 } from
 // src/editor/components/WysiwygEditor/delegate.ts
 import { createReactManager } from "@remirror/react";
 import { isExtension } from "@remirror/core";
-function isMarkdownNodeExtension(extension9) {
-  return !!(isExtension(extension9) && extension9.fromMarkdown && extension9.toMarkdown);
+function isMarkdownNodeExtension(extension10) {
+  return !!(isExtension(extension10) && extension10.fromMarkdown && extension10.toMarkdown);
 }
 function buildMarkdownParser(manager) {
   const parserRules = [];
-  for (const extension9 of manager.extensions) {
-    if (isMarkdownNodeExtension(extension9)) {
-      parserRules.push(...extension9.fromMarkdown());
+  for (const extension10 of manager.extensions) {
+    if (isMarkdownNodeExtension(extension10)) {
+      parserRules.push(...extension10.fromMarkdown());
     }
   }
   return new MarkdownParser(manager.schema, parserRules);
 }
 function buildMarkdownSerializer(manager) {
   const specs = {};
-  for (const extension9 of manager.extensions) {
-    if (isMarkdownNodeExtension(extension9)) {
-      specs[extension9.name] = extension9.toMarkdown;
+  for (const extension10 of manager.extensions) {
+    if (isMarkdownNodeExtension(extension10)) {
+      specs[extension10.name] = extension10.toMarkdown;
     }
   }
   return new MarkdownSerializer(specs);
@@ -16809,26 +16874,26 @@ var ActiveCellMenu = (props) => {
   const anchorRef = useRef4(null);
   const { t: t3 } = useTranslation();
   const options = [
-    {
-      label: "insert column after",
-      i18nKey: "table.insertColumnAfter",
-      handler: commands.addTableColumnAfter
-    },
     {
       label: "insert column before",
       i18nKey: "table.insertColumnBefore",
       handler: commands.addTableColumnBefore
     },
     {
-      label: "insert row after",
-      i18nKey: "table.insertRowAfter",
-      handler: commands.addTableRowAfter
+      label: "insert column after",
+      i18nKey: "table.insertColumnAfter",
+      handler: commands.addTableColumnAfter
     },
     {
       label: "insert row before",
       i18nKey: "table.insertRowBefore",
       handler: commands.addTableRowBefore
     },
+    {
+      label: "insert row after",
+      i18nKey: "table.insertRowAfter",
+      handler: commands.addTableRowAfter
+    },
     {
       label: "delete column",
       i18nKey: "table.deleteColumn",
@@ -17622,6 +17687,52 @@ 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";
+var HtmlBrExtension = class extends NodeExtension4 {
+  get name() {
+    return "html_br";
+  }
+  createTags() {
+    return [ExtensionTag3.InlineNode];
+  }
+  createNodeSpec(extra, override) {
+    return {
+      inline: true,
+      selectable: true,
+      atom: true,
+      ...override,
+      attrs: {},
+      parseDOM: [
+        {
+          tag: "br"
+        }
+      ],
+      toDOM: () => {
+        return ["br"];
+      }
+    };
+  }
+  fromMarkdown() {
+    return [
+      {
+        type: 6 /* inline */,
+        token: "html_br",
+        node: this.name
+      }
+    ];
+  }
+  toMarkdown({ state, node }) {
+    state.text("<br/>", false);
+  }
+};
+HtmlBrExtension.disableExtraAttributes = true;
+HtmlBrExtension = __decorateClass([
+  extension8({
+    defaultOptions: {}
+  })
+], HtmlBrExtension);
+
 // src/editor/extensions/index.ts
 function extensions({ handleViewImgSrcUrl }) {
   return [
@@ -17633,6 +17744,7 @@ function extensions({ handleViewImgSrcUrl }) {
     new HtmlImageExtension({
       handleViewImgSrcUrl
     }),
+    new HtmlBrExtension(),
     new IframeExtension({
       enableResizing: true
     }),
@@ -18647,13 +18759,13 @@ var codemirror_lang_menu_default = createCodeMirrorMenuDecorations;
 // src/editor/extensions/CodeMirror/codemirror-extension.ts
 import {
   command as command4,
-  extension as extension8,
+  extension as extension9,
   findParentNodeOfType as findParentNodeOfType5,
   isElementDomNode as isElementDomNode4,
   isEqual,
   isTextSelection as isTextSelection3,
   keyBinding as keyBinding2,
-  NodeExtension as NodeExtension4,
+  NodeExtension as NodeExtension5,
   nodeInputRule as nodeInputRule4,
   setBlockType as setBlockType2
 } from "@remirror/core";
@@ -18711,7 +18823,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 NodeExtension4 {
+var LineCodeMirrorExtension = class extends NodeExtension5 {
   get name() {
     return "codeMirror";
   }
@@ -18903,7 +19015,7 @@ __decorateClass([
   command4()
 ], LineCodeMirrorExtension.prototype, "updateCodeMirror", 1);
 LineCodeMirrorExtension = __decorateClass([
-  extension8({
+  extension9({
     defaultOptions: {
       hideDecoration: false,
       extensions: null,
@@ -19116,15 +19228,66 @@ var ThemeProvider = ({ theme, i18n, children }) => {
 
 // src/editor/components/Preview/preview.tsx
 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 { jsx as jsx21 } from "react/jsx-runtime";
 var Preview = (props) => {
   const { doc, delegateOptions } = props;
+  const [processedHtml, setProcessedHtml] = useState9("");
   let targetDoc = doc;
   if (typeof targetDoc === "string") {
     targetDoc = createWysiwygDelegate(delegateOptions).stringToDoc(targetDoc);
   }
   const html2 = prosemirrorNodeToHtml(targetDoc);
-  return /* @__PURE__ */ jsx21(WysiwygThemeWrapper, { dangerouslySetInnerHTML: { __html: html2 } });
+  useEffect8(() => {
+    const fullAst = HTML2.parse(html2);
+    const imageLoadTasks = [];
+    const handleHtmlText = async (ast) => {
+      const handleNode = (node) => {
+        if (!node) {
+          return;
+        }
+        if (node.name === "img" && node.attrs?.src && delegateOptions?.handleViewImgSrcUrl) {
+          imageLoadTasks.push(
+            (async () => {
+              node.attrs.src = await delegateOptions?.handleViewImgSrcUrl?.(node.attrs.src);
+              node.attrs.key = nanoid3();
+            })()
+          );
+        }
+        if (node.children) {
+          handleHtmlText(node.children);
+        }
+      };
+      for (let i = 0; i < ast.length; i++) {
+        handleNode(ast[i]);
+      }
+    };
+    handleHtmlText(fullAst);
+    Promise.all(imageLoadTasks).then((res) => {
+      setProcessedHtml(HTML2.stringify(fullAst));
+    }).catch(() => {
+      setProcessedHtml(html2);
+    });
+  }, [html2]);
+  if (!processedHtml) {
+    return /* @__PURE__ */ jsx21(
+      "div",
+      {
+        style: {
+          width: "100%",
+          minHeight: "60px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ jsx21(Loading3QuartersOutlined, { spin: true, size: 40 })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx21(WysiwygThemeWrapper, { dangerouslySetInnerHTML: { __html: processedHtml } });
 };
 export {
   Editor,