Я реализую текстовый редактор для приложения и пытаюсь добавить горячие клавиши для быстрого редактирования, такие как жирный и курсив. По какой-то причине после того, как я реализовал свой прослушиватель onKeyDown для отображения моего форматированного текста, мои кнопки возврата и ввода больше не работают. Обработчик onChange не срабатывает при нажатии клавиш возврата или ввода, но срабатывает для любой другой клавиши. Вот мой код ниже.
TextEditor.js
import React, { Component, Fragment } from 'react';
import { Editor } from 'slate-react';
import { Value } from 'slate';
import Icon from 'react-icons-kit';
import { bold } from 'react-icons-kit/feather/bold';
import { italic } from 'react-icons-kit/feather/italic';
import { BoldMark, ItalicMark } from './TextComponents/index';
import FormatToolbar from './FormatToolbar/FormatToolbar';
const initialValue = Value.fromJSON({
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
text: 'My first paragraph!'
},
],
},
],
}
});
class TextEditor extends Component {
state = {
value: initialValue
}
onKeyDown = (e, change) => {
if (!e.ctrlKey) {
console.info('[I am not a control key]');
return;
}
e.preventDefault();
console.info('[e key]', e.key);
switch (e.key) {
case 'b': {
change.toggleMark('bold');
return true;
}
case 'i': {
change.toggleMark('italic');
return true;
}
default: {
return false;
}
}
}
renderMark = props => {
const { type } = props.mark;
switch (type) {
case 'bold':
return <BoldMark {...props} />;
case 'italic':
return <ItalicMark {...props} />;
default:
return null;
}
}
onChange = ({ value }) => {
console.info('[on change]');
this.setState({
value
});
}
render () {
const { value } = this.state;
return (
<Fragment>
<FormatToolbar>
<button type = "button" className = "tooltip-icon-button">
<Icon icon = {bold} />
</button>
<button type = "button" className = "tooltip-icon-button">
<Icon icon = {italic} />
</button>
</FormatToolbar>
<Editor
value = {value}
onKeyDown = {this.onKeyDown}
onChange = {this.onChange}
renderMark = {this.renderMark}
/>
</Fragment>
);
}
}
export default TextEditor;
Я следую этому руководству https://www.strilliant.com/2018/07/15/let%E2%80%99s-build-a-fast-slick-and-customizable-rich-text-editor-with-slate-js-and- реагировать/
Кажется, я не могу найти, что я сделал по-другому, и мне интересно, было ли изменение в slate/react, которое блокирует код, за которым я следую, от работы, как ожидалось.





Для тех, кто использует тот же учебник и имеет эту проблему, я бы сослался на документы для Slate.js.
https://docs.slatejs.org/walkthroughs/добавление обработчиков событий
Correct code
onKeyDown = (e, editor, next) => {
if (!e.ctrlKey) {
return next();
}
e.preventDefault();
switch (e.key) {
case 'b': {
editor.toggleMark('bold');
return true;
}
case 'i': {
editor.toggleMark('italic');
return true;
}
default: {
return false;
}
}
}
Slate 2.0 устарел change и теперь использует editor. Обязательно объявите параметр next и вызовите его по возвращении, если ваша горячая клавиша не нажата (в моем случае управление).