Skip to content
New issue

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

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

Already on GitHub? Sign in 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)
            },
          }

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

No branches or pull requests

1 participant