wc-wysiwyg демонстрация веб-компонента WYSIWYG редактора

<h1>wc-wysiwyg</h1>
                <p><mark>Д</mark><small>е</small><sup>м</sup><sub>о</sub><dfn title="definiton title">н</dfn><kbd>с</kbd><strong>т</strong><abbr title="ABBR">р</abbr><code>а</code><q>ц</q><del>и</del><ins>я</ins> <samp>и</samp> обзор возможностей веб-компонента wc-wysiwyg</p>
                
                <blockquote><b>WYSIWYG</b> (произносится [ˈwɪziwɪɡ], является аббревиатурой от англ. What You See Is What You Get, «что видишь, то и получишь») — свойство прикладных программ или веб-интерфейсов, в которых содержание отображается в процессе редактирования и выглядит максимально близко похожим на конечную продукцию, которая может быть печатным документом, веб-страницей или презентацией. В настоящее время для подобных программ также широко используется понятие «визуальный редактор».</blockquote>
                <a href="https://github.com" is="wc-a">todo github link</a>
                <h2>Базовые возможности редактора</h2>
                <p>
                    Редактор вдохновлен <a is="wc-a" href="https://html.spec.whatwg.org/multipage/" v-is="HTML5" target="_blank">HTML5</a> идеями семантики веба и старается максимально их поддерживать. В основе интерактивности редактора лежит нативная javascript реализация с применением веб-компонентов и браузерных API. Данный веб-компонент не имеет зависимостей в <code>package.json</code> и не требует дополнительной установки каких либо библиотек и javascript фреймворков.
                </p>
                <h3>Текстовое форматирование</h3>
                <p>
                    Текстовое базовое форматирование основано на HTML5 тегах, <abbr title="но никто не мешает их добавить"> вместо CSS стилей</abbr>. Базовая палитра цветов взята из <a is="wc-a" href="https://materialui.co/colors/">materialui.co</a>
                </p>
                <h4>Строчные элементы</h4>
                <p>
                    <ol>
                        <li><code>b</code> - <b>жирный</b> </li>
                        <li><code>u</code> - <u>подчеркнутый</u></li>
                        <li><code>s</code> - <s>зачерекнутый</s></li>
                        <li><code>i</code> - <i>курсивный</i></li>
                        <li><code>q</code> - <q>цитата</q></li>
                        <li><code>small</code> - <small>маленький текст</small></li>
                        <li><code>sup</code> - <sup>надстрочный</sup></li>
                        <li><code>sub</code> - <sub>подстрочный</sub></li>
                        <li><code>mark</code> - <mark>выделенный текст</mark></li>
                        <li><code>strong</code> - <strong>важный текст</strong></li>
                        <li><code>samp</code> - <samp>вывод компьютерной программы</samp></li>
                        <li><code>kbd</code> - <kbd>ПРОБЕЛ</kbd> обозначение кнопки </li>
                        <li><code>del</code> - <del>удаленный текст</del> из документа </li>
                        <li><code>ins</code> - <ins>добавленный текст</ins> в документ </li>
                        <li><code>code</code> - Внутритекстовый <code>код</code> </li>
                        <li><code>var</code> - обозначение <var>X</var> переменных </li>
                        <li><code>dfn</code> - <dfn title="Тег dfn (сокращенно от definition)">определение</dfn></li>
                        <li><code>abbr</code> - <abbr title="Тег abbr (сокращенно от abbreviation)">аббрeвиатура</abbr></li>
                    </ol>
                </p>
                <h4>HTML5 строчные элементы</h4>
                <p>
                    <ol>
                        <li>
                            <code>wc-time</code> - веб-компонент расширяющий возможности показа даты и времени, совместим с этим редактором, вы открыли эту страницу - <time is="wc-time" data-format-time="minute,hour,second"></time> больше возможностей и реализацию, <a is="wc-a" href="https://webislife.ru/demo/wc-time/">читайте здесь</a> или <a is="wc-a" href="https://github.com/webislife/wc-time">смотрите на github</a>. 
                            <br> Сравните две даты <time datetime="12.12.2023 01:23">12.12.2023 01:23</time> и версию <code>is="wc-time"</code> <time is="wc-time" datetime="12.12.2023 01:23">12.12.2023 01:23</time>
                        </li>
                        <li><code>a is="wc-a"</code> - пример интеграции анонимного веб-компонента <a href="https://webislife.ru">просто ссылка</a> и <a https:="https://webislife.ru/demo/wc-editor" is="wc-a">wc-a ссылка</a></a></li>
                    </ol>
                </p>
                <h4>Аббревиатуры <code>abbr</code></h4>
                <p>
                    Использование аббревиатур в статьях и комментариях бывает уместно и позволяет подсказать пользователям, что такое 
                    <abbr title="Hyper Text Markup Language">HTML</abbr> или как расшифровать <abbr title="Имею Мнение Хрен Оспоришь">ИМХО</abbr> или
                    <abbr title="Синхрофазотро́н (от синхронизация + фаза + электрон) — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты.">Синхрофазотрон</abbr>
                </p>

<h3>Блочные элементы</h3>
                <p>
                    В блочные элементы входят все заголовки, а также:
                </p>
                <p>
                    <ul>
                        <li><code>details</code> - спойлер
                            <details>
                                <summary>Заголовок спойлера</summary>
                                текст в спойлере
                            </details>
                        </li>
                        <li><code>pre</code> - блок форматированного текста, примеры применения:
                            <pre data-lang="English proverb">Strike while the iron is hot</pre>
                            <pre data-lang="file.txt">содержимое file.txt</pre>
                            <pre data-lang="javascript">window.customElements.define('wc-wysiwyg', WCWYSIWYG);</pre>
                            А вот пример применения <code>is="wc-pre"</code>
                            <pre is="wc-pre" data-lang="javascript">window.customElements.define('wc-wysiwyg', WCWYSIWYG);</pre>
                        </li>
                        <li>
                            <code>audio</code> - а что если дать возможность читателю  запустить трек перед длительным чтением статьи? Или автору вставлять аудиофрагменты 
                            <audio controls src="https://www.chosic.com/wp-content/uploads/2021/04/Luke-Bergs-Bliss.mp3"></audio>
                        </li>
                        <li>
                            <code>video</code> - простая интеграция video не сложнее чем audio
                            <video controls width="300" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
                            </video>
                        </li>
                        <li>
                            <code>figure</code> - тоже является блочным элементом, может быть использован для оборачивания изображений и audio элементов
                            <figure>
                                <audio controls src="https://www.chosic.com/wp-content/uploads/2021/04/Luke-Bergs-Bliss.mp3"></audio>
                                <figcaption>🎵 Luke-Bergs-Bliss.mp3</figcaption>
                            </figure>
                        </li>
                        <li>
                            <code>blockquote</code> - блок цитаты
                            <blockquote><h5>для больших</h5><br><h5>цитат</h5></blockquote>
                        </li>
                    </ul>
                </p>
                <h4>
                    Спойлер 
                </h4>
                <p>
                    Для спойлеров используется тег <code>details</code>
                </p>
                <details>
                    <summary>Нажми, чтобы увидеть спойлер</summary>
                    <p>
                        Ура, спойлерить в комментариях можно! Но скрыть <abbr title="когда хочешь немного больше">одно или пару</abbr> можно и аббривеатурой.
                    </p>
                </details>
                <p>
                    Можно спрятать код в спойлер, если его чтение опционально или затрудняет статью
                </p>
                <details>
                    <summary>Код под спойлером</summary>
                    <p>
                        <pre is="wc-pre" data-lang="ts">//Все знакомые редатору теги
const allTags = [
    { tag: 'h1' },
    { tag: 'h2' },
    { tag: 'h3' },
    { tag: 'h4' },
    { tag: 'h5' },
    { tag: 'h6' },
    { tag: 'span' },
    { tag: 'mark' },
    { tag: 'small' },
    { tag: 'dfn' },
    { tag: 'a'},
    { tag: 'q'},
    { tag: 'b'},
    { tag: 'i'},
    { tag: 'u'},
    { tag: 's'},
    { tag: 'sup'},
    { tag: 'sub'},
    { tag: 'kbd'},
    { tag: 'abbr'},
    { tag: 'strong'},
    { tag: 'code'},
    { tag: 'samp'},
    { tag: 'del'},
    { tag: 'ins'},
    { tag: 'var'},
    { tag: 'ul'},
    { tag: 'ol'},
    { tag: 'pre'},
    { tag: 'time'},
    { tag: 'img'},
    { tag: 'audio'},
    { tag: 'video'},
    { tag: 'blockquote'},
] as WCWYSIWYGTag[];</pre>
                    </p>
                </details>
                <h4>
                    Цитаты
                </h4>
                <p>
                    Используем тег <code>q</code> для коротких <abbr title="внутритекстовых">inline</abbr> цитат
                </p>
                <p>
                    Есть такая фраза <q>Я не слишком богат, чтобы покупать вещи дважды</q> - вы слышали?
                </p>
                <p>
                    Используем тег <code>blockquote</code> для блока цитаты
                </p>
                <blockquote>
                    <b>БлокЦитаты</b> - лучше использовать отдельно<br>
                    Он лучше подходит для цитат и выдержек на несколько строк
                </blockquote>
                
                <p>
                    Для интеграции редактора на страницу достаточно в HTML разместить разметку
                </p>
                <pre data-lang="HTML">< wc-wysiwyg id="wc-demo-comment"
    data-allow-tags="strong,u,i,b,q,blockquote,a,img,pre"
    data-storage="demo-comment"
    data-hide-bottom-actions="1"
    is="wc-wysiwyg"
    required
    minlength="5"
    maxlength="500">
    < textarea>< /textarea>< wc-wysiwyg></pre>
                <p>
                    Подключить модуль компонента на странице или импортировать его из <code>javaScript</code> и вызвать метод <code>define</code>. Пример подключения на этой странице:
                </p>
                <pre is="wc-pre" data-lang="javascript">import('/wp-content/themes/wl/ts/components/web/wc-editor.js').then(esm => {
    esm.define();
});</pre>
                <p>
                    Попытки вставить javaScript и прочие пакости как value для этого веб-компонента должны обрезаться и пресекаться на стороне сервера,
                    список доступных тегов для каждого ресурса может быть индивидуален.
                </p>
                <h4>Выравнивание текста</h4>
                <p>В будущем автор возможно добавит выравнивание элементов кнопками, но на уровне CSS классов это доступно уже сейчас</p>
                <p class="-text-center">Текст по центру с применением CSS класса <code>-text-center</code></p>
                <p class="-text-right">Текст по правому краю с применением CSS класса <code>-text-right</code></p>
                <p class="-text-left">Текст по левому краю с применением CSS класса <code>-text-left</code></p>
                <h4>Копирование в буфер</h4>
                <p>
                    А что если прямо в редакторе: 
                    <ol>
                        <li>
                            нажать <kbd>ctrl</kbd>+<kbd>a</kbd> и просто все выделить
                        </li>
                        <li>
                            потом все вырезать <kbd>ctrl</kbd>+<kbd>X</kbd>
                        </li>
                        <li>
                            а потом вставить обратно <kbd>ctrl</kbd>+<kbd>V</kbd>
                        </li>
                    </ol>
                    Останется ли на месте все созданное? - <q>все кроме скрытого содержания спойлеров вернется на место, но будет вставлено в виде форматированного инлайн стилями html</q>
                </p>
                
                <h4>Списки</h4>
                <ol>
                    <li> Нумерованный </li>
                    <li> Список </li>
                </ol>
                <ul>
                    <li> Маркированный </li>
                    <li> Список </li>
                </ul>
                <p>
                    🔥 Cписок возможностей <code>textarea is="wc-wysiwyg"</code> или 
                </p>
                <ul>
                    <li data-listStyle="✅">Поддержка мультиязычности через аттрибут <a is="wc-a" href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang">HTMLElement.lang</a> <br>
                        🇷🇺/🇺🇸 поддерживаются по умолчанию</li>
                    <li data-listStyle="✅">CSS стили для всех популярных HTML5 тегов </li>
                    <li data-listStyle="✅">CSS поддержка emoji в маркированных списках </li>
                    <li data-listStyle="✅">Поддержка наследования стилей через CSS class в аттрибуте <code>data-content-class</code> emoji в маркированных списках </li>
                    <li data-listStyle="✅">Внутритекстовое действия над выделенным текстом </li>
                    <li data-listStyle="✅">Хранение значения в <code>window.localStorage</code> и восстановление после перезагрузки, проверьте в форме комментариев ниже</li>
                    <li data-listStyle="✅">Редактирование сразу нескольких атрибутов и свойств для тегов <code>h1-6</code> / <code>abbr</code> / <code>dfn</code> / <code>a</code> / <code>pre</code> / <code>ul > li</code> и любых других тегов, количество тегов и атрибуты настраиваются</li>
                    <li data-listStyle="✅">Autocomplete при вводе <code>/</code> для поддерживаемых тегов в новом параграфе</li>
                    <li data-listStyle="✅">Переключатель вида текст\HTML5</li>
                    <li data-listStyle="✅">Кнопка очистки формата <kbd>Ⱦ</kbd></li>
                    <li data-listStyle="✅">Предпросмотр в режиме реального времени</li>
                    <li data-listStyle="✅">Сочетания клавиш
                        <ol>
                            <li><kbd>alt</kbd>+<kbd>space</kbd> переключить текущий указатель каретки вне тега</li>
                            <li><kbd>Escape</kbd> закрыть нижнюю диалоговую панель редактора</li>
                        </ol>
                    </li>
                    <li data-listStyle="✅">Валидация <code>required</code>, <code>minlength</code>, <code>maxlength</code>, <code>filtertags</code></li>
                    <li data-listStyle="✅">Вставка <code>audio</code> элемента</li>
                    <li data-listStyle="✅">Вставка <code>video</code> элемента</li>
                    <li data-listStyle="⌛">
                        В разработке
                        <ul>
                            <li data-listStyle="🖊">Работа с таблицами</li>
                            <li data-listStyle="🖊">Изменение размеров изображения прямо в редакторе</li>
                            <li data-listStyle="🖊">Поддержка placeholder</li>
                            <li data-listStyle="🖊">Выравнивание текста по краям в параграфе с помощью кнопок</li>
                            <li data-listStyle="🖊">Цветовое оформление цвета и фона у текста с <code>colorPicker</code></li>
                            <li data-listStyle="🖊">Поддержка <dfn title="горячих клавиш">hotkeys</dfn></li>
                            <li data-listStyle="🖊">Разметка <dfn title="markdown разметки">.md</dfn> </li>
                            <li data-listStyle="🖊">Поддержка <dfn title="еще один популярный язык разметки">bbcode</dfn></li>
                        </ul>
                    </li>
                </ul>
                <h3>
                    Изображения
                </h3>
                <p>Изображение c описанием будет вставлено как <code>figure->img+figcaption</code> также описание картинки будет продублировано в <code>alt=""</code> аттрибут <code>img</code></p>
                <figure>
                    <img src="https://webislife.ru/wp-content/uploads/2023/01/snimok-ekrana-2023-01-24-v-20.24.51.png">
                    <figcaption>
                        Поддержка браузерами <code>custom-elements</code> в 2023 году <code>figcaption</code>
                    </figcaption>
                </figure>
                <p>Изображение без описания будет вставлено как <code>img</code></p>
                <img src="https://webislife.ru/wp-content/uploads/2023/01/snimok-ekrana-2023-01-20-v-21.22.19-e1674239288838.png" alt="https://webislife.ru/wp-content/uploads/2023/01/snimok-ekrana-2023-01-20-v-21.22.19-e1674239288838.png">
    
                <h4>Ненормальные примеры или демонстрация возможностей</h4>
                <p>
                    А что если редактор прямо в редактор вставить? <code>wc-wysiwyg</code> же расширяет нативный тег <code>textarea</code> и сам по себе поддерживает веб-компоненты. Давайте попробуем.
                </p>
                <p>
                    Напоминаю, что автор не использует <abbr title="javascript">JS</abbr> фреймворков, все это демонстрация нативных возможностей браузера.
                </p>
                <p>
                    <h3>Пример базовых стилей для таблиц</h3>
                    <table>
                        <caption>Супергерои</caption>
                        <colgroup>
                            <col>
                            <col span="2" class="batman">
                            <col span="2" class="flash">
                        </colgroup>
                        <tr>
                            <td> </td>
                            <th scope="col">Batman</th>
                            <th scope="col">Robin</th>
                            <th scope="col">Flash</th>
                            <th scope="col">Кощей</th>
                        </tr>
                        <tr>
                            <th scope="row">Навыки</th>
                            <td>Умный</td>
                            <td>Ловкий, акробат</td>
                            <td>Супер скорость</td>
                            <td>Бессмертный</td>
                        </tr>
                    </table>
                </p>
                    <textarea is="wc-wysiwyg">
                        <p>
                            <code>wc-wysiwyg</code> внутри <code>wc-wysiwyg</code> - возможно, но бесполезно также как и верстать `textarea` внутри `textarea` Пример просто для демонстрации возможностей
                        </p>
                        <textarea>Любые эксперименты с веб-компонентами могут привести к неожиданным последствиям.

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

Веб-компонент WC-WYSIWYG

Веб-компонент `WC-WYSIWYG`