Draftjs中的选择感知keyBindingFn

Posted 2021-05-03

[我正在尝试Draft.js，并且试图模仿一些markdown键绑定。

[我的想法是，如果光标在一行的开头（并且没有选择），我想用#键增加页眉级别。

现在，我有适用于此的代码，但似乎有些脆弱。 keyBindingFn（e）无法访问编辑器状态，因此我只能检查e.key === '#'，然后返回'increase-header-level'。然后，在handleKeyCommand中，我可以检查状态以查看用户是否在行的开头。不幸的是，如果没有，我必须手动更新内容以添加#字符。

[keyBindingFn检查状态对我来说很有意义，但是我不确定在那儿访问EditorState是否安全，因为它没有被传递。

    keyBindingFunction(e) {
        if (e.key === '#') {
            console.log('increase-header-level')
            return 'increase-header-level'
        }
        let defaultKeyBinding = Draft.getDefaultKeyBinding(e)
        console.log(defaultKeyBinding)
        return defaultKeyBinding

    }

    handleKeyCommand(command, editorState) {
        if (command === 'increase-header-level') {
            let selection = editorState.getSelection()
            if (selection.getStartKey() === selection.getEndKey()) {
                if (selection.getStartOffset() === 0) {
                    this.increaseHeaderLevel(editorState, selection);
                    return false
                }
            }
            const contentState = Draft.Modifier.replaceText(editorState.getCurrentContent(), editorState.getSelection(), "#")
            this.onChange(EditorState.push(editorState, contentState, 'insert-characters'))
            return true
        }
        let newState = RichUtils.handleKeyCommand(editorState, command)
        if (newState) {
            this.onChange(newState)
            return true
        }
        return false
    }

    render() {
        return (
            <div className="rich-editor-container">
                <Editor
                    editorState={this.state.editorState}
                    onChange={this.onChange}
                    handleKeyCommand={this.handleKeyCommand}
                    keyBindingFn={this.keyBindingFunction}
                />
            </div>
        )
    }

答案

我想我想出了办法：

    render() {
        let keyBindFunction;
        if (this.state.editorState.getSelection().getStartOffset() === 0) {
            keyBindFunction = (e) => { return e.key === '#' ? 'increase-header-level' : Draft.getDefaultKeyBinding(e)}
        }
        return (
            <div className="rich-editor-container">
                <Editor
                    editorState={this.state.editorState}
                    onChange={this.onChange}
                    handleKeyCommand={this.handleKeyCommand}
                    keyBindingFn={keyBindFunction}
                />
            </div>
        )
    }

我将使用isAtStartOfBlock函数对其进行清理，并在块的开始处使用键命令进行映射，但这对于PoC来说已经足够了。

如果这可能导致某些意外的比赛情况，请告诉我。我不想将来再追寻奇怪的失败；-)