Как воспроизвести кнопку редактора medium.com с помощью Mobiledoc-kit?

Question

Мы создаем редактор и решили использовать Mobiledoc-kit для преодоления ограничений contentEditable.

И поскольку мы действительно, действительно, наслаждаемся простотой редактора medium.com, мы пытаемся воспроизвести его функциональность "вставка носителя", то есть "разрешить вставку носителя только в пустые строки", что примерно соответствует пустому разделу по умолчанию в mobiledoc-kit сценарий. Таким образом, поведение состоит из двух событий:

• показать кнопку / разрешить вставку, когда в текущей строке нет другого контента
• скрыть / запретить вставку в противоположном случае.

Для этого я пытаюсь:

• наблюдать за клавишей ввода, чтобы показать кнопку
• соблюдать длину секции, чтобы скрыть / показать кнопку

Я до сих пор не понял, как определить "ввод" нажатия клавиши и метод, который я использую для определения длины раздела postEditor.editor.range.tail.section.length возвращает длину предыдущего раздела внутри обоих didUpdatePost а также willRender Обратные вызовы.

Это был мой первый день с mobiledoc-kit, и любые отзывы о том, выбираю ли я правильный путь или нет, и предложения о том, как действовать дальше, очень, очень ценятся.

Answer 1

cursorDidChange Hook ( здесь документы), скорее всего, вы хотите использовать.

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

editor.cursorDidChange(() => {
  // if the range isn't collapsed (i.e., the user has selected some text), return
  if (!editor.range.isCollapsed) { return; }

  // head is a mobiledoc-kit position object.
  // range consists of two positions: head and tail.
  // For a collapsed range, head === tail
  let head = editor.range.head;

  // section can be a markup section (contains user-editable text
  // or a card section. All sections have an `isBlank` method
  let section = head.section;
  if (section.isBlank) {
    // the cursor is in a blank section; show the media insertion UI
  }
});