Определение того, какой узел выбран в текстовом редакторе Slate-Reaction - PullRequest
Новая
       31

Определение того, какой узел выбран в текстовом редакторе Slate-Reaction

0 голосов
/ 16 марта 2020

В настоящее время я работаю над текстовым редактором, где пользователь может добавлять изображения и текст. Я также хотел бы иметь панель инструментов для зависания, которая обслуживает разные кнопки в зависимости от того, какой тип элемента выбран пользователем.

Например, если пользователь выбрал изображение, то я бы хотел обслуживать один набор кнопок. Если пользователь выбрал абзац, я бы хотел использовать другой набор кнопок.

После просмотра примеров, найденных здесь:

https://www.slatejs.org/examples/richtext

Я собрал грубый пример желаемого текстового редактора без контекстно-зависимых кнопок панели инструментов:

https://codesandbox.io/s/suspicious-pine-lrxgw

Но я изо всех сил пытаюсь решить Как определить, какой тип элемента выбран в редакторе? Я не знаю, есть ли способ сделать это, используя сланцевую реакцию? Или даже в ванили JS?

В идеале я также смог бы получить другую информацию об элементе. Например, высота и ширина изображений, так как это поможет при оформлении.

Любая помощь приветствуется

1 Ответ

1 голос
/ 16 марта 2020

Вы можете получить текущий фокусированный узел, используя свойство selection из редактора, которое является Range . Затем вы используете anchor или focus для выбора текущих выбранных детей.

anchor & focus - это точки, которые в основном являются массивом, первый элемент является текущим блоком, а второй элемент указывает позицию в блоке.

Точечные объекты относятся в указанное c местоположение в текстовом узле в документе Slate. Его путь относится к местоположению узла в дереве, а его смещение относится к расстоянию до строки текста узла. Точки могут ссылаться только на текстовые узлы.

используя массив выбора, мы можем получить текущий выбранный блок, например, так: 

if (selection !== null && selection.anchor !== null) {
  selected = editor.children[selection.anchor.path[0]];
} else {
  selected = null;
}

Позже в вашей функции рендеринга вы можете проверить сделать то, что вы хотите.

...