添加自定义元素后回车，没有换行而是又添加了一个自定义元素

[leidao]

bug 描述

点击按钮添加自定义元素input，在自定义元素后按住回车，期望换行，结果是自动添加了一个新的input

你预期的样子是？

在自定义元素后按住回车可以换行

系统和浏览器及版本号

• 操作系统 macOS 10.15.7
• 浏览器和版本 谷歌：99.0.4844.84（正式版本） (x86_64)

wangEditor 版本

"@wangeditor/editor": "^0.15.17", "@wangeditor/editor-for-react": "^0.6.25",

最小成本的复现步骤

import '@wangeditor/editor/dist/css/style.css'

import {
  Boot,
  IDomEditor,
  IEditorConfig,
  SlateElement,
  SlateTransforms
} from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { Button } from 'antd'
import React, { useEffect, useState } from 'react'
import { h, VNode } from 'snabbdom'

// 渲染函数
function renderInput(
  elem: SlateElement,
  children: VNode[] | null,
  editor: IDomEditor
): VNode {
  // elem 即当前节点
  // children 是下级节点
  // editor 即编辑器实例
  console.log('====xxxx', elem, children)
  const vnode = h(
    'div',
    { style: { margin: '5px 0', display: 'inline-block' } },
    [
      h(
        'span',
        { contentEditable: false, style: { margin: '0 2px ' } },
        h('input', {
          value: '123',
          className: 'ant-input',
          type: 'text'
        })
      ),
      ...children!
    ]
  )
  return vnode
}

// 渲染配置
const renderElemConf2 = {
  type: 'input', // 节点 type ，重要！！！
  renderElem: renderInput
}

// 注册到 wangEditor
Boot.registerRenderElem(renderElemConf2)
function User() {
  const [editor, setEditor] = useState<IDomEditor | null>(null) // 存储 editor 实例

  const defaultContent = [
    { type: 'paragraph', children: [{ text: '一行文字' }] }
  ]

  const toolbarConfig = {}
  const click = () => {
    const node = [{ type: 'input', children: [{ text: '' }] }]
    SlateTransforms.insertNodes(editor!, node)
  }
  const editorConfig: Partial<IEditorConfig> = {
    placeholder: '请输入内容...',
    onCreated(editor) {
      setEditor(editor)
    }
  }

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return
      editor.destroy()
      setEditor(null)
    }
  }, [editor])

  return (
    <>
      <Button onClick={click}>按钮</Button>
      <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: '1px solid #ccc' }}
        />
        <Editor
          defaultConfig={editorConfig}
          defaultContent={defaultContent}
          // defaultHtml={defaultHtml}
          mode="default"
          style={{ height: '500px', overflowY: 'hidden' }}
        />
      </div>
    </>
  )
}

export default User

[wangfupeng1988]

你需要自定义插件 ，插件中定义 isInline（默认是 block），可参考数学公式插件的代码 https://github.com/wangeditor-team/wangEditor-plugin-formula/blob/main/src/module/plugin.ts

（另，type: 'input' 这里，input 这个名字太通用了，可以改成 myCustomInput 等语义更加明确的名字）

[leidao]

你需要自定义插件，插件中定义isInline（默认是block），可以参考数学公式的代码https://github.com/wangeditor-team/wangEditor-plugin-formula/blob/main/src/module/plugin.ts

（另外，type: 'input'这里有，input这个名字了，可以改成等太常见myCustomInput的名字了）

通过在自定义插件中定义isInline，我达到了不换行的期望。但是当我按住回车时，没有换行而是新增了一个自定义元素的问题还是存在。并且点我点击自定义元素的边框时，出现了一个新的和自定义元素同样高的光标，这时输入内容在编辑器中未生效（是否需要我提一个新的问题并且贴出最小复现代码？）

[wangfupeng1988]

你可以参考官方插件，“公式”和“附件” elem 都是 inline 的，但换行不会“新增了一个自定义元素”