Помогите! Давайте создадимтекстовый редактор в стиле AOL Instant Messenger

Кто не любит текстовые редакторы, бедный или богатый? Шучу, текстовый редактор, очевидно, ничего не стоит… Точно… Вот почему вы узнаете, как создать свой собственный суперфантастический дополнительный редактор uber 1337 без помощи крошечных мышей, снующих по сланцевому льду, как в сезон драфта; хватайте перо и копируйте книги, ребята.

Предыстория

TL;ДР; Текстовый редактор, простой или сложный, является одним из наиболее часто используемых инструментов, но им часто пренебрегают. Каждый день мы можем взаимодействовать с этими компонентами, начиная от вашего банкомата или поля пароля для входа в ваш телефон или компьютер и даже, возможно, с редакторами синтаксиса сложных языков программирования, такими как Visual Studio или IDEA. Мы используем эти компоненты во всевозможных вариациях и производных, и фактически мы можем сказать, что зависим от них.

Теперь, оглядываясь назад, в середину 90-х, когда причудливое html-кодирование показало себя через Geocities, компания AOL выпустила клиент для обмена мгновенными сообщениями, который позволял вам общаться с любым, кто использовал этот клиент. Этот клиент позволял вам сохранять друзей, с которыми вы общались, в «список друзей».

Не поймите меня неправильно, было много других приложений, однако у этого было причудливое редактирование html и; теперь не волнуйтесь сразу, прочь сообщения. Да, это было сообщение, на которое вы устанавливали свой «статус», когда вы спите, работаете, принимаете душ или что-то еще, что вы хотите, чтобы мир знал… ну, любой из вашего списка друзей, который был.

Теперь то, что сделало AIM немного более продвинутым, так это то, что он позволял использовать пользовательские теги html и стили гипертекста. Его более ранний конкурент, ICQ, больше соответствовал своим корням в IRC. Его более минималистичный пользовательский интерфейс в то время был очень популярен в игровых онлайн-сообществах Doom и Quake.

Итак, кто не помнит и не любит наш любимый мессенджер, с которого все началось, AOL Instant Messenger. Для тех из вас, кто не знаком с этими кусочками ностальгического интернета 90-х здесь, вы можете прочитать об этом здесь.

Теперь перенесемся в 2020…

Теперь давайте строить!

Мы (я) понимаем, что уже существует множество фантастических утилит, таких как Draft.js, Quill, Tiny-MCE и различные более мелкие ответвления компонента реакции. Для этой сборки мы будем использовать Semantic-UI и React внутри приложения Электрон.

Основная цель этой сборки — изучить, как работает гипертекстовый редактор с инженерной точки зрения. Это также для того, чтобы изучить самый простой MVP «Минимально жизнеспособный продукт» из фантастической книги Бережливый стартап.

Итак, давайте пройдемся по всему жизненному циклу создания вещей. Следующие два раздела я считаю очень важными, и, надеюсь, вы тоже. Это предварительные требования, "могу ли я это сделать", и, во-вторых, спецификация,"что я делаю".

Предпосылки:

* Базовые знания GIT, NodeJS, Yarn, ReactJS и Semantic-UI.
* Может программировать и читать JavaScript ES6 (ECMA6).
* Программирование и обработка локализованных событий с помощью встроенного JS Emitter или собственных JS Lambda functions.
* Как и что такое функциональное программирование/кодирование.

Спецификация:

* Динамический ввод текста в поле редактора, аналогичное тегу html, ‹Textarea/› * Это не замена textarea.
* Форматирование текста в реальном времени, где стили применяются ко всей записи (без встроенного вложения)
* Стили включают: { font-color | шрифт — bgColor | шрифт меньше | нормальный шрифт | шрифт крупнее | полужирный шрифт | шрифт-курсив | подчеркивание шрифта | шрифт-ссылка | emoji }.
* Реализовать P.O.R.C. (Обычный старый React.Component) для рендеринга с отслеживанием состояния
* Обновлять текст по мере ввода в поле.
* Размер компонента будет автоматически изменяться в соответствии с контейнером/оболочкой компонентов, возможность охватывать несколько строк.
* Сохраняйте содержимое редактора как неизменяемую коллекцию/список для рендеринга или экспорта в локальное или удаленное хранилище
* Создайте сборку и дистрибутив для отправки на пряжу и локальной сборки/тестирования с помощью git

Для нашего базового дизайна мы будем использовать приведенный выше рисунок AIM, чтобы показать, как это должно выглядеть. Просто у нас есть верхняя секция, содержащая наши элементы управления. Под разделом управления будет жить наш текстовый редактор. довольно просто правильно. Вот рисунок, чтобы объяснить лучше:

Я использую существующий проект для реализации этого. Если вам нужна реакция электрона, как с семантикой на песочницу, вы можете использовать этот репозиторий, который я создал. У него есть базовое электронное приложение с платформой реагирования и сервером разработки для размещения файлов графического интерфейса нашего рендерера. Как только это заработает, мы добавим в наш проект набор инструментов Semantic-UI для дополнительного стиля и макета. Вот наш начальный класс реакции для нашего компонента чата:

Довольно стандартный ES6 JavaScript, верно. А вот отрендеренный код в приложении, для которого я это разрабатываю. Просто перевернутый сегмент ‹div› с закругленными вправо границами. В этой сборке используется темная тема, поэтому серый сегмент, который я использую, немного отличается от цвета фона.

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

В строке под элементами управления указано форматированный текст, где мы будем динамически обновлять стилизованный текст. У ввода Поиск… нет границы, так как мы установили свойство в ‹Input/› на прозрачный . Спецификацию API можно прочитать здесь.

Теперь это не совсем то, что мы хотим, чтобы это выглядело. Мы хотели бы, чтобы конечный результат имел прозрачное поле ввода, расположенное над строкой форматированного текста. Однако это гораздо проще протестировать, пока мы не получим правильное обновление элементов управления и текста. Мы можем сэкономить немного работы, оставив системную логику по умолчанию для того, как свойство-заполнитель работает в поле ввода W3C спецификация.

Элементы управления текстом, которые у нас есть в верхнем ряду, очень неприятны, поэтому давайте попробуем заменить их горизонтальным меню кнопок. Semantic-UI предоставляет для этого очень хороший компонент. Вот основной код, который нам нужно реализовать. Давайте сделаем это немного проще.

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

Чуть красивее правильно! Хорошо, я; не так много. Эй, у нас есть кнопки, хотя. *nudge_nudge*,и не с вашей любимой группой. Итак, нам нужно закончить это и найти несколько кнопок, которые выглядят так:

У Semantic есть потрясающая страница, которая позволяет вам искать значки и легко использовать их в своем приложении. Ссылка на эту страницу здесь. Итак, повозившись с несколькими, я придумал следующее прямо ниже:

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

Потому что я вас всех очень люблю; вот обновленный код для component и css, а также растровый прозрачный bg cool emoji :) Спасибо не нужно. По сути, это заняло несколько часов возни в консоли разработчика, взламывая относительные позиции css.

Теперь мы завершаем первую передачу стилей нашему компоненту, добавляя контур границы во вторую строку для форматированного текста. Нам также нужно будет создать стиль, когда наш компонент находится в фокусе. Наконец, нам нужно поместить поле ввода поверх строки форматированного текста, которая находится над ним. Мы будем использовать CSS для автоматической настройки высоты, чтобы заполнить его элемент-контейнер. После некоторой работы имеем следующее:

Теперь это не идеально, однако вы можете начать видеть, как элементы объединяются. И вот суть для JS и CSS, и вот пик HTML, который мы сейчас визуализируем:

TL;DR; Как это работает. Внутри нашего activeCircuitChatText ‹div/› у нас есть два диапазона. Первый диапазон содержит наш отформатированный текст, который мы вставляем при вводе в поле ввода, содержащееся во втором диапазоне. Мы используем span, потому что у них есть встроенное свойство display. Когда мы устанавливаем ширину поля ввода на минимально возможный размер, диапазон ввода будет течь и переноситься по словам при вводе символов. Свойство value поля ввода принудительно всегда равно пустой строке. Новые введенные символы добавляются с помощью оператора += к div-тексту чата. Довольно шикарно, ага.

Мы также добавили один новый элемент, который не обсуждался ранее. Это был курсор. Своего рода одна из самых важных частей, верно!

Когда мы сделали стиль ввода полностью прозрачным, это также приводит к исчезновению нашего текстового курсора. Это легко исправить, добавив интервал между двумя интервалами для текста и ввода. Это как бутерброд с крошечным вкусным текстовым курсором с потрясающим соусом, и, пожалуйста, держите ${JQuery}.

Что касается выделения цвета границы поля, то об этом заботятся две созданные нами функции, которые вызываются нашими Reacts onFocus() и onBlur(). Эти функции будут использовать грубый метод document.getElementById() для доступа к свойству classlist. Мы просто добавляем или удаляем имя нашего класса .focused, чтобы переключать цвет границы. Для большего эффекта мы также установили свойство transition с коротким временем задержки ease-out. Именно эти небольшие минимальные вещи действительно добавляют блеск нашему компоненту.

Одна быстрая вещь, которую нам нужно реализовать, прежде чем мы двинемся дальше, — это способ сфокусировать наш текстовый курсор в нашем поле ввода, когда мы нажимаем на элемент отформатированный текстом . Мы можем добиться этого, добавив обработчик события 'onClick' и реакцию createRef. Эта функция вызовет некий код в Semantic-UI, который сфокусирует этот элемент с помощью текстового курсора. Вы можете найти этот обновленный код здесь.

Итак, я уверен, что теперь вы понимаете, что у нас нет возможности удалить контент. Это достигается путем прослушивания, когда наш пользователь нажимает клавишу удаления или возврата. Наш обработчик событий для этого действия должен будет удалить или извлечь последний символ в массиве символов, который составляет элемент chat-text.

Это также хорошее время, чтобы добавить обработчик события нажатия клавиши для входа. Обратите внимание, что в React изменили 'onKeyPress' на 'onKeyDown' из-за искусственных имен обработчиков событий. Смущает, я знаю. Пожалуйста, во что бы то ни стало; не пишите жалобу здесь, фейсбук ненавидит это.

Мы также добавили функцию для проверки действительных ключей. Это означает, что мы хотим отфильтровать мета-ключи, такие как command или page up. В нашем классе компонентов теперь также есть массив, в котором мы будем хранить коды клавиш. Наши функции добавления и удаления также будут добавлять и извлекать наши значения. Это важный способ ввести виртуальную копию нашего массива символов, который составляет наше текстовое сообщение, которое мы редактируем. Самый последний код для ES6 и CSS3.

В моей сборке я помещаю это в несколько забавных контейнеров с изменяемым размером. Это удобно, если вам по какой-либо причине необходимо вручную или динамически изменить высоту панели. Вот как выглядит расширенный редактор с центрированными элементами управления:

Теперь пришло время для забавных вещей, добавления обработчиков для элементов управления. Теперь для этой сборки мы сделали ее очень простой, так как это просто текстовый редактор чата, и мы можем стилизовать только весь текст или ни одного из него. Реализовать редактирование текста с возможностью выбора не так уж и сложно, но мы его рассматривать не будем; Извините. Чтобы реализовать это, вам нужно будет получить позицию индекса выделенного текста, который у вас есть, и создать новый диапазон, чтобы обернуть ваши новые стили. Как вы можете себе представить, логика для обработки этого может быстро стать довольно сложной.

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

Окончательный код для JavaScript ES6 и CSS3 на данный момент.

Продолжение следует…

Домашнее задание

Хорошо, теперь вы создали этот удивительный маленький текстовый редактор 1337, и теперь у вас есть шанс пойти дальше. Попробуйте добавить новый пункт меню для ‹code/› и Изображение. Другим действительно сложным изменением будет поддержка увеличения размера или цвета шрифта только для части текста путем обтекания текста новыми интервалами. Также измените использование innerText на innerHtml.. woah — HTML-редактор..

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

Спасибо! ❤Zoe
Следуйте за мной в Twitter или Facebook
// Copyright 2020 — DreamScale //
// Присоединяйтесь к нашему сообществу Dream Team для интересных научных вещей //