Редактор, похожий на Notion

Всем привет,

По мере того как мы продолжаем знакомиться с Discourse и работать с ним, я понял, что редактор — это, безусловно, мой любимый инструмент среди всех программ для форумов, с которыми я работал за эти годы. Однако я считаю, что
Я рекомендую блок-ориентированный редактор, где можно использовать «/», и появляются быстрые сочетания клавиш. Примером может служить Notion, а также редактор Tiptap.

Вот скриншот из Marktext — одного из моих любимых открытых Markdown-редакторов для настольных компьютеров:

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

13 лайков

Думаю, чтобы всё заработало идеально, потребуется серьёзная работа.

Косвенно связано: некоторое время назад был создан и обсуждён плагин WYSIWYG-редактора, который сейчас не работает:

3 лайка

Да, я как раз смотрел на это перед тем, как написать этот пост, просто хотел оформить это как официальный запрос.

Я заметил, что @sam упомянул, что по состоянию на октябрь 2022 года в разработке уже есть планы™.

3 лайка

Только что наткнулся на эту библиотеку с открытым исходным кодом, которая реализует команды в стиле Notion. Не уверен, насколько легко её будет интегрировать в Discourse, но хотел поделиться, вдруг у кого-то возникнет идея:

6 лайков

Похоже, это построено на https://tiptap.dev/, которая закрыта?

1 лайк

Насколько мне известно, Tiptap имеет открытый исходный код:

3 лайка

А, понятно, про-расширения платные.

Самая сложная часть здесь — двусторонняя связка между markdown и HTML. Я бы хотел избежать отказа от markdown в любых экспериментах в этой области.

5 лайков

TipTap — это обёртка вокруг ProseMirror: https://prosemirror.net/.

2 лайка

Согласен.

Я в основном привёл это как пример. Я считаю, что эксперименты в этой области могут быть полезны, но пока не совсем уверен, как это можно реализовать на техническом уровне, особенно если одна из целей — не отказываться от связки Markdown <> HTML.

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

Я ещё подумаю над этим в ближайшие недели и напишу, если у меня возникнут новые идеи.

Как минимум, это должно включать какой-то метод работы с клавиатурой, например, ввод символа «/» или другого специального символа, который открывает бесшовную палитру выбора для вставки форматирования и элементов, которые Discourse считает полезными, как в Notion, Tiptap и подобных инструментах.

1 лайк

Похоже, что ProseMirror использует Discourse (https://discuss.prosemirror.net/), так что, возможно, у них есть какие-то мысли по этому поводу. Также видел, что у них есть интеграция с Markdown, но я не знаю, соответствует ли это тому, о чём говорил Сэм. Просто хотел упомянуть это на случай, если кто-то захочет изучить вопрос подробнее.

3 лайка

Его создатель также имеет аккаунт в Meta. Я не буду его здесь упоминать, но он является автором отличной книги по JavaScript: https://eloquentjavascript.net/.

Насколько мне известно, переход с текущего редактора Discourse на решение, основанное на ProseMirror, — это действительно сложная задача.

2 лайка

Мое предложение по этой теме заключалось не в том, чтобы использовать именно Tiptap — это был лишь пример. Я рекомендую именно опыт редактирования по блокам.

2 лайка

Этот редактор, кажется, поддерживает конвертацию markdown ↔ html из коробки:

2 лайка

@thoka Я протестировал это по ссылке, которую вы предоставили. Это действительно работает отлично. Было бы здорово увидеть этот редактор в Discourse. Надеюсь, что в будущем произойдут подобные изменения.

Хм. На первый взгляд кажется, что работает.
Подходящий редактор должен как минимум поддерживать безпотерьное циклическое преобразование любого дискорсового markdown —> html/состояние редактора —> markdown.

Приведённая демонстрация, например, не справляется с выровненными таблицами.

3 лайка

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

Стоит посмотреть на редактор Lexical от Meta: Introduction | Lexical. Он поддерживает двустороннее связывание markdown и HTML: @lexical/markdown | Lexical.

В документации я не нашёл многого для начала работы, но анализ кода с Lexical Playground в обратном порядке оказывается полезным, по крайней мере в контексте React-приложения.

8 лайков

Абсолютно верно, @renato немного экспериментировал с этим. Это огромный проект, но мы очень заинтересованы в его изучении.

8 лайков

В настоящее время Discourse использует комбинацию Markdown, BBCode и HTML в качестве своего базового формата данных. Существуют ли какие-либо планы по переходу к более унифицированному формату?

Что касается экспериментов: очевидно ли, что любой визуальный редактор должен быть хотя бы идемпотентным (без изменений в исходном коде при загрузке без редактирования и сохранении) и локально изолированным (изменять исходный код только в тех местах, где были внесены правки)?

3 лайка

Вот объявление от Invision о том, что TipTap стал их новым редактором:

https://invisioncommunity.com/news/invision-community/invision-community-5-the-all-new-editor-r1301/

3 лайка