braft-extensions icon indicating copy to clipboard operation
braft-extensions copied to clipboard

mention扩展按Enter键不能触发选中,只能用tab和鼠标触发

Open realeve opened this issue 3 years ago • 1 comments

mention扩展按Enter键不能触发选中,只能用tab和鼠标触发,draftjs官方插件的示例中不影响: https://www.draft-js-plugins.com/plugin/mention

realeve avatar Mar 07 '21 09:03 realeve

已解决,原因是当前项目中定义的handleReturn未生效: 将 文件 https://github.com/margox/braft-extensions/blob/master/src/mention/index.jsx#L88 起,由以下代码

return {
            ...editorProps,
            draftProps: {
              ...editorProps.draftProps,
              ...draftEditorPlugin.getAccessibilityProps(),
              ...passSomeKeyEventToKeyBindingFn(editorProps.draftProps || {})
            },
            keyBindingFn: (event) => {
              // 先处理前面插件的 keyBindingFn
              // 暂时没有发现 mention 必须优先处理的必要性
              const originHandler = editorProps.keyBindingFn
              let ret = null
              if (typeof originHandler === 'function') {
                ret = originHandler(event)
              }
              return ret != null ? ret : draftEditorPlugin.keyBindingFn(event, getAndSetState)
            },
            handleReturn: (event, editorState, editor) => {
              const originHandler = editorProps.handleReturn
              // 这里 mention 要优于其他的插件处理 回车 事件
              // 因为在 mention 弹出 suggestion 时 有「确认选择」的功能
              if (draftEditorPlugin.handleReturn(event, editorState, getAndSetState) === 'handled') {
                return 'handled'
              }
              return originHandler ? originHandler(event, editorState, editor) : 'not-handled'
            }
          }

修改为:

return {
            ...editorProps,
            draftProps: {
                ...editorProps.draftProps,
                ...draftEditorPlugin.getAccessibilityProps(),
                ...passSomeKeyEventToKeyBindingFn(editorProps.draftProps || {}),
    
                handleReturn: (event, editorState, editor) => {
                  const originHandler = editorProps.handleReturn
                  // 这里 mention 要优于其他的插件处理 回车 事件
                  // 因为在 mention 弹出 suggestion 时 有「确认选择」的功能
                  if (draftEditorPlugin.handleReturn(event, editorState, getAndSetState) === 'handled') {
                    return 'handled'
                  }
                  return originHandler ? originHandler(event, editorState, editor) : 'not-handled'
                }
            },
            keyBindingFn: (event) => {
              // 先处理前面插件的 keyBindingFn
              // 暂时没有发现 mention 必须优先处理的必要性
              const originHandler = editorProps.keyBindingFn
              let ret = null
              if (typeof originHandler === 'function') {
                ret = originHandler(event)
              }
              return ret != null ? ret : draftEditorPlugin.keyBindingFn(event, getAndSetState)
            },
          }

realeve avatar Mar 12 '21 01:03 realeve