fix: error when rendering widgets inside table (fix #3198)

.prettierrc.js

@@ -1,4 +1,5 @@
 module.exports = {
   printWidth: 100,
-  singleQuote: true
+  singleQuote: true,
+  endOfLine: 'auto',
 };

apps/editor/demo/esm/index.html

@@ -30,7 +30,7 @@
         '',
         '| name | type | description |',
         '| --- | --- | --- |',
-        '| el | `HTMLElement` | container element |',
+        '| el | `HTMLElement` | [@Widget](Widget) |',
         '',
         '## Features',
         '',
@@ -59,6 +59,19 @@
         extendedAutolinks: true,
         frontMatter: true,
         initialValue: content,
+        widgetRules: [
+          {
+            rule: /\[(@\S+)\]\((\S+)\)/,
+            toDOM(text) {
+              const rule = /\[(@\S+)\]\((\S+)\)/;
+              const matched = text.match(rule);
+              const span = document.createElement('span');
+
+              span.innerHTML = `<a class="widget-anchor" href="${matched[2]}">${matched[1]}</a>`;
+              return span;
+            },
+          },
+        ],
       });
 
       window.editor = editor;

apps/editor/package.json

@@ -91,4 +91,4 @@
     "prosemirror-state": "^1.3.4",
     "prosemirror-view": "^1.18.7"
   }
-}
+}

apps/editor/src/convertors/toWysiwyg/htmlToWwConvertors.ts

@@ -30,6 +30,10 @@ export function isInlineNode({ type }: MdNode) {
   return includes(['text', 'strong', 'emph', 'strike', 'image', 'link', 'code'], type);
 }
 
+export function isCustomInline(node: MdNode) {
+  return node.type === 'customInline';
+}
+
 function isSoftbreak(mdNode: MdNode | null) {
   return mdNode?.type === 'softbreak';
 }

apps/editor/src/convertors/toWysiwyg/toWwConvertors.ts

@@ -21,6 +21,7 @@ import {
   getTextWithoutTrailingNewline,
   isInlineNode,
   isCustomHTMLInlineNode,
+  isCustomInline,
 } from './htmlToWwConvertors';
 
 import { ToWwConvertorMap } from '@t/convertor';
@@ -235,7 +236,10 @@ const toWwConvertors: ToWwConvertorMap = {
   tableCell(state, node, { entering }) {
     if (!(node as TableCellMdNode).ignored) {
       const hasParaNode = (childNode: MdNode | null) =>
-        childNode && (isInlineNode(childNode) || isCustomHTMLInlineNode(state, childNode));
+        childNode &&
+        (isInlineNode(childNode) ||
+          isCustomInline(childNode) ||
+          isCustomHTMLInlineNode(state, childNode));
 
       if (entering) {
         const { tableHeadCell, tableBodyCell, paragraph } = state.schema.nodes;