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

А еще можно предпросмотр сверху от поля ввода сделать, чтобы он был по ширине такой же как и вид сообщения на сайте.

Ну или так. Но на широких мониторах удобнее сбоку, ПМСМ.

А можно сделать ввод markdown текста слева, а предпросмотр справа на широких мониторах?

Ты хочешь видеть результат сразу, по мере ввода текста?
Если да, то вряд ли получится, так как markdown (и lorcode) парсятся не на стороне клиента.
Если нет, то нужно будет добавить кнопку.

markdown (и lorcode) парсятся не на стороне клиента.

А зачем так?

Потому что https://github.com/vsch/flexmark-java.
А пока попробуй визуальный редактор из Небольшая панелька для LOR, он на JS.

Себе-то я настрою что угодно. Я думаю о народе ©

Например, новички, вываливающие гору текста, могли бы призадуматься, увидев предпросмотр сразу. Или нет.

А у них широкие мониторы?! :)

Это решается наличием кнопки «поместить» только в предварительном просмотре.

Ну ты же знаешь статистику: как правило да, у большинства людей сейчас 16:9.

тыц (steampowered.com)

тыц (flaton.systems)

Гораздо лучше показывать предпросмотр сбоку, кнопке «предпросмотр», например, над ней, а кнопку «поместить» активировать только после предпросмотра.

Пользователи без JS продолжат помещать без предпросмотра.

Пользователям без JS показывать кнопку после вызова предпросмотра. В течении 15 сек.

LOR может полноценно работать без js, рендер всего на сервере, если сделать реализацию предпросмотра на клиенте через js. То надо будет синхронизировать поведение и серверной и клиентской стороны, а Максим не джаваскриптер. Овчинка вроде есть, но вот выделывать ли её вопрос.

если сделать реализацию предпросмотра на клиенте через js

Немного поискал:

1. https://github.com/Ionaru/easy-markdown-editor (демо), easymde.min.js — ~320 КБ
2. https://github.com/celsowm/markdown-wysiwyg (демо), editor.js — ~140 КБ

Мне №1 понравился больше, но не все будут согласны загружать столько КБ. :)

но не все будут согласны загружать столько КБ. :)

И maxcom не думаю что будет согласен, переписывать для синхронизации js и java чтобы генерировали одно и тоже. Как вариант можно просто, как Aceler сделать, две формы рядом и обе видно сразу, но предпросмотр обновлять по кнопке [обновить] а не реалтайм, по сути это тоже самое что и переключение вкладок, редактировать/предпросмотр, просто по кнопке. И ничего менять не надо, кнопку добавить и форму для шириков в css правилах.

И галочку в настройках - [*] старое отображение форм редактирования. Чтобы табы показывало.

переписывать для синхронизации js и java чтобы генерировали одно и тоже

Не нужно ничего синхронизировать, и сгенерированный JS HTML тоже не брать.

две формы рядом и обе видно сразу

Это есть в easymde, я его поэтому бы и выбрал.

Великолепная идея блин, как я сам не додумался? Я пытался сделать визуальный редактор сразу без тегов, но столько багов, ппц. А можно же просто рядом.

Вот нативный предпросмотр: https://ns.fiber-gate.ru/uploads/images/img_1781972314175_cb2679fe.png

Вот новые мои кнопки (можно слева справа сверху снизу):

https://ns.fiber-gate.ru/uploads/images/img_1781972356200_87e292b4.png

https://ns.fiber-gate.ru/uploads/images/img_1781972444067_a91fb632.png

Ну и визуальный редактор сейчас: https://ns.fiber-gate.ru/uploads/images/img_1781972505064_ee3d1def.png

Но вот его надо дорабатывать - искать в чем ошибки, точно описывать и так же описывать как должно быть поведение. И исправлять исправлять…

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

https://github.com/Vladgobelen/NSLorPanel/

Достаточно файла NSLorPanel-MarkdownToolbar.user.js - он может работать автономно от панели.

Ну, может и да, но текущем варианте для достижения делаемого, с оставлением рендера на сервере, достаточно лишь мелкой правки html и css и всего 1 js fetch вызов для обновления предосмотра. Ну, а варианте оставления рендера какой есть. А если на клиенте всё делать, то да easymde можн. Вопрос подхода.

Да, выше предложили такой вариант, я думаю, тоже неплохо.

Можно ещё делать автозагрузку предпросмотра раз в пару секунд.

Ради такой ерунды дергать сервер раз в пару секунд? А смысл? Это же просто маркдаун, блин.

Чтобы рендер был идентичный.

Конечно, лучше в браузере, но надо, чтобы js парсер давал идентичный результат.

Чтобы рендер был идентичный.

Не по таймеру - триггерно.

По кнопке? )

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

Завершение тэгов, завершение строк, клики на панель тегов. А ну да, тут же ее нет.

Короче, есть это уже стандарщина - как определить завершение редактрования участка. По завершении редактирования конкретного участка срабатывате триггер и запрос с сервера на отображение. Все. Ну это если умное отображение. Но и оно не шибко затратное. У меня вон выше все это в сотню строк кода вышло, но я особо и не экономил.

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

Одобряю.

А так сложно подогнать идентичный результат?

Не ракетная наука вроде.

И да, можно же java либу транспильнуть в web assembly, не? Наверняка где-то уже валяется компилятор под это дело.

Сейчас ширина поля ввода и предпросмотра хотя бы приблизительно равна ширине сообщения после публикации. Если их размещать рядом, будет в половину меньше, такой предпросмотр выглядит так себе и неудобен, особенно если там достаточно длинные заголовки, которые за счёт крупного шрифта начинают занимать две или три строки вместо одной.

Зато по вертикали идентично выходит. Вон я више пример кидал.

По вертикали не имеет значения, там скролл.

https://ns.fiber-gate.ru/uploads/images/img_1781972444067_a91fb632.png

Высота ввода ограничена и при фулскрине меньше половины высоты экрана. Как раз влезает два экземпляра.

Так лучше, да. Но на мой взгляд, лучше всего отдельно. Вкладками, как сейчас и есть, или ещё лучше — убрать эти вкладки, а по кнопке «Подтвердить» показывать предпросмотр + возможность редактирования, и только после нажатия «Отправить» (которая появляется только при видимом предпросмотре) соответственно уже отправлять — чтобы новички не путались. Что-то похожее на то, как сделано подтверждение новостей. С возможностью отключения этого принудительного предпросмотра в настройках в профиле.

В таком варианте оно же не мешается - висит себе сверху или снизу и все. И можно сразу глянуть без переключения туда сюда.

Как вариант, показывать предпросмотр не при клике на «Предпросмотр», а при наведениии мыши, чтобы не переклюаться. Навел мышь, глянул и редактируй дальше.

В таком варианте оно же не мешается - висит себе сверху или снизу и все.

Мешаются. Сверху я хочу видеть пост, на который я отвечаю (иногда не просто видеть, а копипастить оттуда цитаты). Снизу я хочу видеть следующие посты, хотя это и менее важно, скорее просто смысла мало — кликнуть как минимум не сложнее, чем проскроллить вниз, а потом обратно вверх.

Как вариант, показывать предпросмотр не при клике на «Предпросмотр», а при наведениии мыши

Не надо так! D:

Вообще раньше было удобнее, когда кнопка предпросмотра была после «Поместить». Набираешь текст, нажал два раза Таб, потом Энтер, видишь предпросмотр, и можешь дальше редактировать. Теперь это недоступно стало, потому что «вкладка» не выделяется даже по шифт+таб, и приходится тянуться за мышкой. Стало уже менее удобно, чем было. Здесь предлагают сделать ещё менее удобно… :(

Лучшим решением было бы вернуть как было, только кнопку «Поместить» вообще убрать — сперва предпросмотр, потом отправка.