Enter и Backspace не работают с редактором Slate.js в React

Я реализую текстовый редактор для приложения и пытаюсь добавить горячие клавиши для быстрого редактирования, такие как жирный и курсив. По какой-то причине после того, как я реализовал свой прослушиватель 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, которое блокирует код, за которым я следую, от работы, как ожидалось.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 903
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для тех, кто использует тот же учебник и имеет эту проблему, я бы сослался на документы для 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 и вызовите его по возвращении, если ваша горячая клавиша не нажата (в моем случае управление).

Другие вопросы по теме