KeyBindingFn с учетом выбора в draftjs - PullRequest
Новая
       24

KeyBindingFn с учетом выбора в draftjs

0 голосов
/ 29 мая 2020

Я экспериментирую с Draft. js, и я пытаюсь немного подражать привязкам клавиш уценки.

Я думаю, что если курсор находится в начале строки (и нет выбора), я бы хотел, чтобы клавиша # увеличила уровень заголовка.

Теперь у меня есть код, который работает для этого, но кажется немного fr agile. 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>
        )
    }

1 Ответ

0 голосов
/ 29 мая 2020

Думаю, я понял, как это сделать: 

    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 и сопоставления ключевых команд в начале блока, но это достаточно для Po C.

Если это может привести к неожиданному состоянию гонки, сообщите мне. Я не хочу в будущем выслеживать странные провалы ;-)

...