fix: ui

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rme",
-  "version": "0.0.74",
+  "version": "0.1.0-beta.2",
   "type": "module",
   "scripts": {
     "build": "yarn clear && yarn build-esbuild && yarn types",
@@ -178,6 +178,6 @@
     "svgmoji": "^3.2.0",
     "void-elements": "^3.1.0",
     "yjs": "^13.6.14",
-    "zens": "^0.0.35"
+    "zens": "^0.0.36"
   }
 }

src/editor/components/ErrorBoundary.tsx

@@ -30,6 +30,7 @@ class ErrorBoundary extends React.Component<
 
   render() {
     if (this.state.hasError) {
+      console.error(this.props.error)
       return (
         <>
           <Title data-testid='editor_error'>Sorry, something went wrong!</Title>

src/editor/extensions/HtmlBr/br-extension.ts

@@ -1,5 +1,10 @@
-import type { ApplySchemaAttributes, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core'
-import { extension, ExtensionTag, NodeExtension } from '@remirror/core'
+import type {
+  ApplySchemaAttributes,
+  InputRule,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+} from '@remirror/core'
+import { extension, ExtensionTag, NodeExtension, nodeInputRule } from '@remirror/core'
 import type { NodeSerializerOptions } from '@/editor/transform'
 import { ParserRuleType } from '@/editor/transform'
 
@@ -37,6 +42,17 @@ export class HtmlBrExtension extends NodeExtension<HtmlBrOptions> {
     }
   }
 
+  createInputRules(): InputRule[] {
+    const rules: InputRule[] = [
+      nodeInputRule({
+        regexp: new RegExp('<br/>'),
+        type: this.type,
+      }),
+    ]
+
+    return rules
+  }
+
   public fromMarkdown() {
     return [
       {

src/editor/extensions/HtmlNode/html-inline-view.ts

@@ -11,16 +11,8 @@ import {
 import { NodeView, EditorView, Decoration } from '@remirror/pm/view'
 import { StepMap } from '@remirror/pm/transform'
 import { keymap } from '@remirror/pm/keymap'
-import { newlineInCode, chainCommands, deleteSelection } from '@remirror/pm/commands'
-import { HistoryExtension } from 'remirror/extensions'
 import { history, redo, redoDepth, undo, undoDepth } from '@remirror/pm/history'
 import { isImageElement } from '@/editor/utils/html'
-import {
-  findInlineNodes,
-  findNodeAtPosition,
-  findParentNodeOfType,
-  findSelectedNodeOfType,
-} from 'remirror'
 import { ExtensionsOptions } from '..'
 
 /**
@@ -185,7 +177,6 @@ export class HTMLInlineView implements NodeView {
   // == Events ===================================== //
 
   selectNode() {
-    console.log('selectNode')
     if (!this._outerView.editable) {
       return
     }
@@ -196,7 +187,6 @@ export class HTMLInlineView implements NodeView {
   }
 
   deselectNode() {
-    console.log('deselectNode')
     if (this._isEditing) {
       this.closeEditor()
     }
@@ -225,15 +215,6 @@ export class HTMLInlineView implements NodeView {
     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 {
-    }
-
-    // render katex, but fail gracefully
     try {
       while (this._htmlRenderElt.firstChild) {
         this._htmlRenderElt.firstChild.remove()
@@ -265,13 +246,10 @@ export class HTMLInlineView implements NodeView {
       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)

src/editor/theme/WysiwygThemeWrapper.tsx

@@ -743,7 +743,6 @@ export const WysiwygThemeWrapper = styled.div.attrs<WarpperProps>((p) => ({
   }
 
   .inline-html-render {
-    display: inline-block;
   }
 
   .html-node {

src/editor/transform/markdown-it-html-inline.ts

@@ -7,7 +7,6 @@ import {
   isSingleNode,
 } from '@/editor/utils/html'
 import Token from 'markdown-it/lib/token.mjs'
-import { cloneDeep } from 'lodash'
 import { HTMLNode } from '../extensions/Inline/from-inline-markdown'
 import voidElements from 'void-elements'
 
@@ -92,7 +91,7 @@ function mergePhrasingContents(
   startIndex: number,
   endIndex: number,
 ): Token[] {
-  const merged = new Token('html_inline_node', '', 0)
+  const merged = new Token('html_inline_node', '', 0) as Record<string, any>
 
   for (let i = startIndex; i <= endIndex; i++) {
     merged.content += phrasingContents[i].content || ''
@@ -116,15 +115,28 @@ function mergeHtmlPhrasingContents(phrasingContents: Token[]) {
     mergePhrasingContents(phrasingContents, startIndex, endIndex)
     offset += startIndex - endIndex
   })
+
   phrasingContents.forEach((phrasingContent, index) => {
     if (isHtmlInlineToken(phrasingContent)) {
-      const newToken = new Token('html_inline_node', '', 0)
-      newToken.content = phrasingContent.content
+      const tagName = getTagName(phrasingContent.content)
+      if (typeMap[tagName]) {
+        const newToken = new Token(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 Token('html_inline_node', '', 0)
+        newToken.content = phrasingContent.content
 
-      newToken.attrs = {
-        htmlText: newToken.content,
+        newToken.attrs = {
+          htmlText: newToken.content,
+        }
+        phrasingContents.splice(index, 1, newToken)
       }
-      phrasingContents.splice(index, 1, newToken)
+
     }
   })
 }
@@ -159,8 +171,7 @@ function isHtmlBlockToken(t: Token) {
 const rule: Core.RuleCore = (state: StateCore) => {
   const edited = false
   const tokens = state.tokens
-  const tokensLength = tokens.length
-  console.log('tokens', JSON.stringify(tokens))
+  let tokensLength = tokens.length
 
   for (let i = 0; i <= tokensLength - 1; i++) {
     const curToken = tokens[i]
@@ -171,9 +182,8 @@ const rule: Core.RuleCore = (state: StateCore) => {
       }
       const newTokens = []
       let childs: Token[] = []
-      console.log('newChildren', JSON.stringify(newChildren))
+
       newChildren?.forEach((child, index) => {
-        console.log('indexindex', index, child.type, childs.length)
         if (excludeHtmlInlineNodes.includes(child.type)) {
           if (childs.length > 0) {
             const newToken = new Token('inline', '', 0)
@@ -185,7 +195,6 @@ const rule: Core.RuleCore = (state: StateCore) => {
           newTokens.push(child)
         } else {
           childs.push(child)
-          console.log('indexindex1', childs.length)
         }
       })
 
@@ -197,8 +206,11 @@ const rule: Core.RuleCore = (state: StateCore) => {
         childs = []
       }
 
-      console.log('newTokens', newTokens)
-      tokens.splice(i, 1, ...newTokens)
+      if (curToken.children && newTokens.length > 0) {
+        tokens.splice(i, 1, ...newTokens)
+
+        tokensLength += newTokens.length - 1
+      }
     } else if (isHtmlBlockToken(curToken)) {
       const tag = getTagName(curToken.content)
 
@@ -214,7 +226,6 @@ const rule: Core.RuleCore = (state: StateCore) => {
       }
     }
   }
-  console.log('tokens1', JSON.stringify(tokens))
 
   return edited
 }

yarn.lock

@@ -43,26 +43,26 @@
     classnames "^2.2.6"
     rc-util "^5.31.1"
 
-"@ariakit/[email protected].5":
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/@ariakit/core/-/core-0.4.5.tgz#ba42573474c1f54109cf96650e8614d7312a432d"
-  integrity sha512-e294+bEcyzt/H/kO4fS5/czLAlkF7PY+Kul3q2z54VY+GGay8NlVs9UezAB7L4jUBlYRAXwp7/1Sq3R7b+MZ7w==
+"@ariakit/[email protected].10":
+  version "0.4.10"
+  resolved "https://registry.yarnpkg.com/@ariakit/core/-/core-0.4.10.tgz#2dcc395c411a11824f6304277177800311367071"
+  integrity sha512-mX3EabQbfVh5uTjsTJ3+gjj7KGdTNhIN0qZHJd5Z2iPUnKl9NBy23Lgu6PEskpVsKAZ3proirjguD7U9fKMs/A==
 
-"@ariakit/[email protected].5":
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/@ariakit/react-core/-/react-core-0.4.5.tgz#dd0bda1d54d708ec803e658f9d298ea507c96b8a"
-  integrity sha512-ciTYPwpj/+mdA+EstveEnoygbx5e4PXQJxfkLKy4lkTkDJJUS9GcbYhdnIFJVUta6P1YFvzkIKo+/y9mcbMKJg==
+"@ariakit/[email protected].11":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@ariakit/react-core/-/react-core-0.4.11.tgz#b75224fd22f3f6795d60e5106682e0eba12c30a8"
+  integrity sha512-i6KedWhjZkNC7tMEKO0eNjjq2HRPiHyGaBS2x2VaWwzBepoYtjyvxRXyqLJ3gaiNdlwckN1TZsRDfD+viy13IQ==
   dependencies:
-    "@ariakit/core" "0.4.5"
+    "@ariakit/core" "0.4.10"
     "@floating-ui/dom" "^1.0.0"
     use-sync-external-store "^1.2.0"
 
-"@ariakit/react@^0.4.5":
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/@ariakit/react/-/react-0.4.5.tgz#f6e356665cc45fa317c10fa041009acbb290d92f"
-  integrity sha512-GUHxaOY1JZrJUHkuV20IY4NWcgknhqTQM0qCQcVZDCi+pJiWchUjTG+UyIr/Of02hU569qnQ7yovskCf+V3tNg==
+"@ariakit/react@^0.4.11":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@ariakit/react/-/react-0.4.11.tgz#d800ec3a526a5570b75420598a2a4a9a5b108ab7"
+  integrity sha512-nLpPrmNcspqNhk4o+epsgeZfP1+Fkh4uIzNe5yrFkXolRkqHGKAxl4Hi82e0yxIBUbYbZIEwsZQQVceF1L6xrw==
   dependencies:
-    "@ariakit/react-core" "0.4.5"
+    "@ariakit/react-core" "0.4.11"
 
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5", "@babel/code-frame@^7.24.1", "@babel/code-frame@^7.24.2":
   version "7.24.2"
@@ -10374,13 +10374,13 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
-zens@^0.0.35:
-  version "0.0.35"
-  resolved "https://registry.yarnpkg.com/zens/-/zens-0.0.35.tgz#58d2fa711bfd74223825dc11806fffd11b798fce"
-  integrity sha512-NvUEt2T7MoZS7yahFKKFfR2CRujXrxDtMLWZX5WmFFXzvIcah89zdq9GtzMS1Kjbt2NyH0qi749KxaG6LTLUhg==
+zens@^0.0.36:
+  version "0.0.36"
+  resolved "https://registry.yarnpkg.com/zens/-/zens-0.0.36.tgz#82973e09752f65a1450ddd2b88cbc71f3839cbbe"
+  integrity sha512-udZIfL3uznT3LR8tLLS0MZi2W+x+XW7yxTTKnQF0eQgfAsiz6y1ERwVnaFI631YjWTLAtExvlKKCCLHECSJ/Sw==
   dependencies:
     "@ant-design/icons" "^5.3.7"
-    "@ariakit/react" "^0.4.5"
+    "@ariakit/react" "^0.4.11"
     "@babel/runtime" "^7"
     "@emotion/is-prop-valid" "^1.2.2"
     "@floating-ui/dom" "^1.0.0"