Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Open
realeve opened this issue Mar 7, 2021 · 1 comment

Comments

@realeve
Copy link

realeve commented Mar 7, 2021

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

@realeve
Copy link
Author

realeve commented Mar 12, 2021

已解决,原因是当前项目中定义的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)
            },
          }

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant