РИТ++ 2017, Frontend Сonf Зал Дели + Калькутта, 6 июня, 18:00 Тезисы: http://frontendconf.ru/2017/abstracts/2550.html Краткая история редактирования текста в браузерах. Родовые проблемы WYSIWYG-редакторов. Типы и функции современных веб-редакторов. Обработка различных способов ввода (клавиатура, голос, copy&paste, autocomplete/autocorrect, gesture input). Проблемы с использованием contenteditable и execCommand. Браузерные API: Selection, Input Method Editor, Clipboard, MutationObserver, CompositionEvents. Спецификация W3C Input Events. ...

1. Разработка Rich Text Editor:
проблемы и решения
Егор Яковишен, Setka

2. Setka Editor
• многоколоночная верстка
• гибкая настройка стилей
• адаптивная верстка
• CSS и JS эмбеды
• live preview
• плагин для WordPress

7. Более 20 млн просмотров

8. Текстовые редакторы
появились давно…

9. MS-DOS Editor

10. Notepad

11. Microsoft Word

12. Adobe InDesign

13. А что в браузере?

14. <textarea>

15. TinyMCE

16. CKEditor

17. Froala Editor

18. Есть проблемы :-(

19. Проблемы
• What You See is not What You Get
• Функций очень мало или слишком много
• Сложно «подружить» редактор с существующим дизайном сайта
• Кроссбраузерность (IE, Safari, …)
• Редакторы создаются как инструменты общего назначения

20. Проблемы
• Строгая очистка HTML-кода — или наоборот
• Проблемы с SEO
• Верстка только под десктоп
• Поддержка очень старых браузеров или только новых
• …

21. Итак, вы решили сделать
свой редактор…

22. Хорошая попытка!

23. Что предстоит?
• Как редактировать контент?
• Как хранить контент?
• Как быть с CSS?
• Как расширять функциональность редактора?

24. Как редактировать контент?

25. Как редактируется контент на странице?
• document.designMode = "on”
• <div contenteditable=“true”></div>
• document.execCommand()

26. document.designMode = "on"

27. document.designMode = "on"

28. contenteditable
<div contenteditable=“true”>
Hello, world
</div>

29. contenteditable: Chrome, Safari
<div contenteditable=“true”>
Hello,
<div>&nbsp;world</div>
</div>

30. contenteditable: Firefox
<div contenteditable=“true”>
Hello,
<br>
world
</div>

31. document.execCommand
// JS
document.execCommand(‘bold’);
document.execCommand(‘fontSize’, false, 7);
<!-- HTML -->
<b>Hello</b>, world
<font size=“7”>Hello</font>, world

32. Проблемы
• Разные браузеры генерируют разный HTML
• execCommand работает не везде и не всегда (и тоже по-разному)
• Вы не контролируете, что происходит :—(

33. Проблемы

34. Альтернативные способы
• <canvas>
• contenteditable + document state

35. contenteditable + document state
• contenteditable используется только
как интерфейс для отслеживания событий
• все события перехватываются и происходит
изменение document state
• после изменения state обновляется
DOM-представление документа
• controlled input

36. document и editor state
• Контент (текст, картинки, …)
• Позиция курсора
• Выделение текста
• UI редактора

37. Draft.js

38. Google Docs: kix

39. Google Docs: kix

40. Google Docs: kix

41. Как хранить контент?

42. Хранение в виде HTML: плюсы
• Легко показать в браузере
• Легко изменять без редактора
• Скорее всего, сейчас хранится именно так
• Другой код приучен работать с HTML

43. Хранение в виде HTML: минусы
• Разные браузеры выдают разный HTML из contenteditable
• Сложнее экспортировать в другие форматы (FB IA, JSON, …)
• Контент тесно связан с оформлением (style, class, …)

44. Декомпозиция на сущности
• Заголовок
• Параграф
• Картинка
• Врезка
• Комментарий
• …

45. Структура данных
{
type: “Paragraph”,
content: “this is a text”,
style: [
{
range: [0,3],
format: [“bold”]
}
]
}

46. Представления
• Plain text
• HTML
• PDF
• JSON, XML
• RSS
• Facebook Instant Articles, Google AMP, Apple News
• А также разный рендеринг сущностей в редакторе и вне его

47. Workaround
• Хранить данные в том формате, который уже есть (HTML)
• При загрузке в редактор парсить их и работать со своим
форматом
• Удобно в тех случаях, когда нужно работать в устоявшейся
экосистеме (например, CMS с плагинами)

48. Как работать с
пользовательским вводом?

49. Клавиатура

50. Виртуальная клавиатура

51. Контекстное меню

52. Copy & Paste

53. Drag’n’drop

54. Голосовой ввод

55. Рукописный ввод

56. autocorrect и autosuggest

57. Браузерные API
• У contenteditable нет единого события change
• Selection API
• Clipboard API
• CompositionEvents
• MutationObserver

58. Selection API
• События selectstart и selectionchange
• window.getSelection()
• Range, anchorNode, offsetNode

60. Selection API

61. Clipboard API
• События: copy, cut, paste, beforecopy, beforecut, beforepaste
• document.execCommand(‘copy’)
• Разные типы содержимого
• Что можно сделать?
• изменить содержимое буфера
• запретить вставку
• изменить алгоритм вставки
• Чего нельзя сделать?
• инициировать вставку

62. Clipboard API

63. Clipboard API

64. Clipboard API

65. Composition Events
• à, è, ù, …
• compositionstart
• compositionupdate
• compositionend

66. Undo / Redo
• Системный механизм не подойдет
• Храним снэпшоты state

67. Как быть с CSS?

68. В чем проблема?
• Редактор — это компонент
• У редактора есть свои стили (UI)
• Редактор живет внутри приложения (CMS)
• У приложения есть свои стили
• Внутри редактора живет пост
• У поста тоже есть свои стили (шрифты, цвета, …)

69. При этом…
• CSS-правила живут в глобальной области видимости
• Порядок применения правил определяется специфичностью
• Помним про WYSIWYG!

71. WordPress CSS
#poststuff h2 {
font-size: 14px;
padding: 8px 12px;
margin: 0;
line-height: 1.4;
}

72. Итак, что изолируем?
• Редактор
• Пост
• CMS
• Шаблон сайта (в некоторых случаях)

73. Способы изоляции CSS
• CSS reset + БЭМ
• iframe
• Shadow DOM + Custom Elements

74. Побеждаем специфичность
WordPress CSS:
#poststuff h2 {
font-size: 14px;
}
CSS редактора:
#my-editor h2 {
font-size: 28px;
}

75. Скользкая дорожка
• инлайн-стили
• !important

76. CSS reset + БЭМ
• Раздувает размер CSS-файла
• Постоянные войны со специфичностью (своей и чужой)
• Не дает 100% гарантии (на каждый хитрый селектор…)

77. iframe
• Создает барьер между страницей и редактором (и хорошо, и
плохо)
• Не адаптируется автоматически под размеры содержимого

78. Shadow DOM + Custom Elements
<my-editor>
#shadow-root
</my-editor>

79. Shadow DOM + Custom Elements

80. Shadow DOM + Custom Elements

81. Адаптивная верстка
• Верстаем на десктопе
• Хотим видеть, как это выглядит на мобилке
• А также менять определенные параметры для мобилки

83. Как расширять
функциональность?

84. Расширение функциональности
• Public API
• Система плагинов
• Документация

85. Public API
• Получение и изменение контента в редакторе
• Система событий
• Интеграция с внешней средой (загрузка файлов, взаимодействие
с CMS API и т.д.)

86. Система плагинов
• Плагины должны уметь влиять на state редактора
• Плагин — набор actions и reducers
• API для расширения UI редактора
• Примеры плагинов:
• Проверка орфографии
• Автотипограф
• Интеграция с Google Drive

87. О чем еще надо подумать?
• oembed и санитайзинг HTML
• Контекстное меню
• Горячие клавиши
• Режим редактирования HTML и Custom CSS
• Мета-сущности (комментарии)
• Анимации
• Оффлайн-режим
• Запуск и остановка редактора

88. Что нас ждет?

89. Будущее rich text editing
• W3C Input Events
• Web Components

90. Input Events
• События input и beforeinput
• InputEvent.inputType
• insert
• insertReplacementText
• deleteByCut
• formatBold

91. Input Events
• InputEvent.data (insert*, format*)
• InputEvent.dataTransfer (text/plain, text/html)
• InputEvent.getTargetRanges()

92. Итоги

93. Как редактировать данные?
• Используйте contenteditable для отслеживания событий
• Храните состояние редактора и контента в хранилище
• Не храните состояние в DOM

94. Как хранить данные?
• Определитесь с сущностями
• Продумайте структуру документа
• Напишите сериализацию и десериализацию

95. Как быть с CSS?
• Редактор будет жить во внешней среде, которую вы не
контролируете
• Заранее подумайте об изоляции CSS
• Кладите редактор в iframe или очищайте все, что можно

96. Расширение функциональности
• Модульная архитектура
• API
• Плагины

97. Хорошие примеры
• Quill (Salesforce, Telegra.ph)
• Draft.js (Facebook)
• Trix (Basecamp)
• ProseMirror, CodeMirror
• Google Docs
• iCloud Pages

98. Спасибо!
Егор Яковишен
yakovishen@setka.io
Telegram: @yaplusplus
Facebook: Yegor Yakovishen