Easy Steem Editor: Visual mode update to v3.6.0 [UA/EN]

UA original

Мобільний вигляд наче нічого у порівнянні візуальний та чистий код на одному екрані

Full HD екран пк або портретний режим на мобільних пристроях (смарфон, планшет)
Так додано ручне вимкнення превью для маркдаун коду, доки ще в стадії розробки, щоб
Лінк для ознайомлення і поклацать. Буде доступний деякий час.
---
https://ultra-steem-visual-2.unconditionallove.workers.dev/
Візуальний режим задовольняє базові потреби. Хоча ще може скакати курсор та бува об'єднує таблиці при синхронізації, якщо між ними менає тексту чи ще яких блоків.

Трохи роздумів та ще чогось

Із звичайного вайбкодингу, стоврення редактора, який би був зручний, дещо затягнулось. І в деякій мірі стало схоже на рутину. З одного боку, все наче просто, й дуже просто - просто собі писати команди. Тільки із іншого, треба таки трохи розуму, якого не вистачає, бо ШІ не вирішує всі завдання як воно собі уявляється, особливо в плані зчитування думок)) Тож йому потрібно пояснювати технічно-зрозумілою мовою. Хоча більшість завдань таки нормально виконуються для тако проєкту, наче й не великого, але вже дещо складнішого, ніж на початку.

А також було трішки оновлено досвід поклацування сторонніми редакторами для написання маркдауну. І скажу (напишу) пару слів про них.

Obsidian - має малий інструментарій, а на початку складніше вникнути шо до чого, хоча його хвалять і як хорошу базу збереження. Та й мабуть про свою розробку не скажу, що прям все зрозуміло.

Який блоковий редактор, не пам'ятаю як називається, але там дуже мені видалось не зручно, щоб отак з наскоку взяти щось написати й повставляти зображення чи ще шось, бо кожен блок окремо. Хоча як розібратись то може теж класно.

Typora - ще одна цікавинка, це вже близько, точно має режим коду, тобто показує як є, і навіть форматування, не тільки візуальне, а якщо вручну додавати теги (чи якось так) показує і їх, і результат, тож не дві панелі... Й деякі особливості, на виділення є виникаючий віджет. Є ще режим концентрації. Деяка функціональна поведінка форматування й ще деякі дрібниці, мені не дійшли, бо вже дещо звичніший власний, тобто Ultara Steem Editor, хоча зараз теж зараз не все в ньому подобається. Проте те можна поправити.

Ще була згадана якась крута Nota, чи щось таке, але там воно має багатоцільове призначення й теж потрібно розбиратись та мабуть реєструватись десь і ще багато чого мені не відомого.

Та якщо сказати про маркдаун, це дуже простий метод форматування, який можна конвертувати у різні формати і так далі, з поправкою на те, що сладніші конструкції будуть застосовані в автоматичному режимі.

Технічні аспекти Ultra Steem Editor

Минулого разу не всі функції форматування й поведінки курсору працювали як було заявлено, й не всі будуть працюватим мубуть. Бо мене чомусь дуже турбувало два пункти:

• Відступи між рядочками, ті пропуски щоб було скільки поставлено й вони синхронізувались при перемиканні, які чомусь не слухались й множились в геометричній прогресії. Дійшло до того, що посеред минулого тижня, навіть наснились мені)). Зараз просто є стандартний один відступ між рядочками, якщо потрібно більше чи ще шось, то можна просто в режимі коду це зробити й не пеермикатись у візуальний. Недолік: _{ручний механім щось там не правильно враховує, це потрібно роздивлятись глибше, але припускаю, що воно хвилює лише мене, тож писати собі допис можна цілком спокійно й зараз.}
• Поведінка курсора, щоб зберігалась позиція при перемиканні режимів, теж воно щось не хоче зберігати розтажування, при переході із візуального режиму в код. І якщо клацатит туди сюди, то й не дуже зручно, але візуальний режим цілком задовольняє прості моменти, із коду у візуальние, положення зберігається й навіть виділення (що було виділено), тож для звичайного форматування має цілком вистачати.

Та загалом, візуального режиму цілком достатньо, щоб написати допис відносно зручніше, ніж це зазвичай в режимі чистого коду. Хіба без складніших і хитріших списків, влкдаених цитати і подібного. Просто списки, таблиці, вставка зображень і форматування (оце наче добре працює). І як потрібно щось точніше поковирять і зробити краще, то режим чистого коду цілком підходить, але головне не перемикатись у візуальний режим, а просто експортувати файл або відразу публікувати. Принаймні на даний момент))

Тож детальніше, що поправлено, тобто доведено до того що було анонсовано минулого разу й додано.

Що працює, з не технічного погляду, а практичного користування, якщо в декількох словах. Можна описати наступне.

Порівняльна таблиця

Steem Editor Pro: Візуальний (Visual) vs. Кодовий (Code) Режим

Функція / Сценарій	Візуальний режим (Visual WYSIWYG)	Кодовий режим (Markdown Code)	Статус впровадження / Оцінка
Поведінка курсору та збереження фокусу	Фокус зберігається інтелектуально завдяки алгоритму Idiomorph DOM-зіставлення. Курсор не стрибає при фоновому автозбереженні.	Традиційне текстове поле. Фокус та позиція курсору утримуються стандартним індексом виділення (selection index).	Впроваджено повністю (Запобігає багатом втрати фокусу при автозбереженні, але не всім)
Безперервне форматування (Continuous Input)	Безперервне введення: Увімкнений стиль (наприклад, Bold) залишається активним для нових символів, доки користувач явно не вимкне його кнопкою або гарячими клавішами.	Контекстна розмітка: Форматування визначається символами обгортки (**, *). Формат завершується в момент виходу за межі цих символів, або подвійним натисненням клавіші Enter	Впроваджено повністю (Природна поведінка для обох парадигм)
Реакція на Enter / Подвійний Enter (Breakout)	Розумний Breakout: Натискання Enter на межах заголовків, цитат або списків створює новий пустий абзац із очищеним стилем, виводячи курсор із блоку форматування.	Вихід з тегу: Натискання Enter або подвійного Enter створює новий рядок у коді. Подвійний Enter візуально відокремлює логічні Markdown блоки.	Впроваджено повністю (Забезпечує швидке написання тексту без застрягання в HTML-тегах)
Локалізовані підказки та розумні маркери	Відображаються динамічні інтерактивні блоки "WYSIWYG Spacers" (наприклад, ↵ Початок допису...) для легкого вставлення абзацу до/після таблиць Також для виходу із деяких блоків, якщо щось не так працює як заумувалось. На смарфонах для зручного переходу на новий рядок.	Відсутні. Користувач повністю контролює структуру за допомогою порожніх рядків у коді Markdown.	Впроваджено частково (Візуальні маркери доступні лише в WYSIWYG для уникнення захаращення коду)
Конвертація горизонтальних ліній розділення (HR)	Відображається як повноцінний графічний елемент <hr>. Проте пряме перетворення нативних ліній назад у потрійне дефіс-посилання (---) у коді іноді потребує ретельного очищення.	Пишеться вручну як --- або ***. Надійно компілюється у візуальну лінію при переході в інший режим.	Має обмеження (Іноді при зворотному парсингу з HTML у Markdown лінії заміщуються параграфами; вимагає уваги)
Вбудовані HTML/CSS стилі та вирівнювання	Дозволяє безпосередньо вирівнювати текст за допомогою кнопок (Center, Justify), створюючи контейнери <div class="text-justify">.	Вимагає прямого написання HTML-тегів вирівнювання на кшталт <center> чи <div class="text-justify">. теж доступні для формаутвання	Впроваджено повністю (Сумісно зі специфікаціями платформи Steemit)
Автоматичне вбудовування зображень (Paste)	Спеціальний обробник миттєво конвертує чисті URL-адреси картинок на теги <img> з живим передоглядом.	Чистий лінк залишається текстом або конвертується в класичний Markdown синтаксис зображення .	Впроваджено повністю (Революційне прискорення створення медіа-вмісту)
Сумісність таблиць та складної структури	Надає табличний менеджер для візуального додавання рядків/колонок, але редагування комірок всередині WYSIWYG потребує обережності.	Таблиці задаються у форматі Markdown Pipes (`	---

Деякий опис ключових відмінностей у логіці роботи

Поведінка курсору при безперервному введенні

• У візуальному режимі: Якщо ви актували стиль Жирний, усі наступні символи будуть огортатися в тег <strong> автоматично. Вимкнути його можна повторним натисканням кнопки на панелі.
• У кодовому режимі: Ви вводите **Текст**. Курсор опиняється за межами зірочок. Будь-які нові символи за ними будуть звичайним текстом за замовчуванням.

Взаємодія з клавішею Enter та створення параграфів

• WYSIWYG: Натискання Enter за замовчуванням створює новий <br> всеоежигі параграфа. (або залежно від контексту списку). Натискання Ctrl + Enter створює <div> блок.
• Markdown Code: Натискання Enter переводить каретку на новий рядок. Для створення нового абзацу в Markdown необхідно зробити два переноси рядка.
  Сс:
  @hungry-griffin
  @steemcurator01

Дякую за підтримку))

Easy Steem Editor: Visual mode update to v3.6.0 [UA/EN]

EN translation by AI

Mobile view looks decent, visual and clean code on a single screen

Full HD PC screen or portrait mode on mobile devices (smartphone, tablet)
Yes, manual disabling of the preview for Markdown code has been added, while still in development, so that
A link to check out and play around with. Will be available for a while.
---
https://ultra-steem-visual-2.unconditionallove.workers.dev/
Visual mode meets basic needs. Although the cursor might still jump occasionally, and sometimes it merges tables during synchronization if there is no text or other blocks between them.

Some thoughts and other things

What started as casual vibe-coding—the creation of a convenient editor—has dragged on a bit. And to some extent, it has started to feel like a routine. On one hand, everything seems simple, extremely simple—just writing commands. But on the other hand, it requires some brainpower, which is sometimes lacking because AI doesn't solve all tasks the way one imagines, especially when it comes to mind-reading )) So you have to explain things to it in a technically understandable language. Although most tasks are still executed reasonably well for a project like this—not massive, but already somewhat more complex than at the beginning.

I also slightly updated my experience by trying out some third-party Markdown editors. And I'll say (write) a few words about them.

Obsidian - has a minimal toolset, and at the beginning, it's harder to get the hang of what's what, although it is praised as a good knowledge base. Though I probably can't say that everything is perfectly clear in my own project either.

Some block editor, I don't remember the name, but it felt very inconvenient to just jump in and write something, insert images, or whatever, because every block is separate. Though if you get used to it, it might actually be great.

Typora - another interesting one, this is close. It definitely has a code mode, meaning it shows things as they are, and even formatting, not just visual—if you manually add tags (or something like that) it shows both them and the result, so no split panels... And some features, like a popup widget on text selection. There is also a focus mode. Some functional behaviors of formatting and a few other little things didn't quite click with me because I'm already more used to my own, i.e., Ultra Steem Editor, although currently, I don't like everything in it either. But that can be fixed.

Some cool Nota or something like that was also mentioned, but it is multi-purpose, and you also need to figure it out, probably register somewhere, and there are many other things unknown to me.

But speaking of Markdown, it is a very simple formatting method that can be converted into various formats and so on, with the caveat that more complex structures will be applied automatically.

Technical Aspects of Ultra Steem Editor

Last time, not all formatting features and cursor behaviors worked as announced, and probably not all of them ever will. For some reason, two points worried me the most:

• Line spacing, those gaps so that there are as many as set and they sync when toggling, which for some reason didn't obey and multiplied exponentially. It got to the point where they even appeared in my dreams in the middle of last week )). Now there is simply a standard single space between lines; if you need more or something else, you can just do it in code mode and not switch to visual. Drawback: _{the manual mechanism calculates something incorrectly, which needs to be looked into more deeply, but I assume this only bothers me, so you can write your post quite peacefully right now.}
• Cursor behavior, keeping the position when toggling modes; it also doesn't really want to save the location when switching from visual mode to code. If you keep clicking back and forth, it's not very convenient, but visual mode fully satisfies simple cases. When switching from code to visual, the position is saved, and even the selection (whatever was highlighted) is kept, so it should be quite enough for basic formatting.

But overall, the visual mode is quite sufficient to write a post relatively more comfortably than in plain code mode. Except perhaps without more complex and tricky lists, nested blockquotes, and the like. Just lists, tables, image insertion, and formatting (which seems to work well). And if you need to tweak something more precisely and make it better, the clean code mode is completely suitable, but the main thing is not to switch to visual mode afterwards, but simply export the file or publish it directly. At least for now ))

So in more detail, here is what has been fixed—meaning brought to the state announced last time—and added.

What works, from a non-technical, practical usage perspective, in a few words, can be described as follows.

Comparison Table

Steem Editor Pro: Visual vs. Code Mode

Feature / Scenario	Visual Mode (Visual WYSIWYG)	Code Mode (Markdown Code)	Implementation Status / Assessment
Cursor behavior and focus preservation	Focus is preserved intelligently thanks to the Idiomorph DOM-matching algorithm. The cursor does not jump during background autosave.	Traditional text field. Focus and cursor position are retained by the standard selection index.	Fully implemented (Prevents many focus loss bugs during autosave, but not all)
Continuous Input	Continuous Input: An active style (e.g., Bold) remains active for new characters until the user explicitly turns it off with a button or hotkeys.	Contextual Markup: Formatting is defined by wrapping characters (**, *). Formatting ends the moment you go outside these characters, or by double-pressing Enter	Fully implemented (Natural behavior for both paradigms)
Response to Enter / Double Enter (Breakout)	Smart Breakout: Pressing Enter at the boundaries of headers, quotes, or lists creates a new empty paragraph with cleared styling, moving the cursor out of the formatting block.	Tag Exit: Pressing Enter or double Enter creates a new line in the code. Double Enter visually separates logical Markdown blocks.	Fully implemented (Ensures fast text writing without getting stuck in HTML tags)
Localized hints and smart markers	Dynamic interactive "WYSIWYG Spacers" blocks (e.g., ↵ Start of post...) are displayed for easy paragraph insertion before/after tables. Also used to exit certain blocks if something isn't working as intended. On smartphones, for a convenient transition to a new line.	None. The user fully controls the structure using empty lines in the Markdown code.	Partially implemented (Visual markers are available only in WYSIWYG to avoid cluttering the code)
Horizontal Divider Lines (HR) Conversion	Displayed as a full graphical <hr> element. However, direct conversion of native lines back to a triple hyphen reference (---) in the code sometimes requires careful cleanup.	Written manually as --- or ***. Reliably compiles into a visual line when switching to another mode.	Has limitations (Sometimes during reverse parsing from HTML to Markdown, lines are replaced by paragraphs; requires attention)
Built-in HTML/CSS Styles and Alignment	Allows direct text alignment using buttons (Center, Justify), creating <div class="text-justify"> containers.	Requires direct writing of HTML alignment tags like <center> or <div class="text-justify">. Also available for formatting.	Fully implemented (Compatible with Steemit platform specifications)
Automatic Image Embedding (Paste)	A special handler instantly converts clean image URLs into <img> tags with a live preview.	Clean links remain as text or are converted into classic Markdown image syntax .	Fully implemented (Revolutionary speed-up of media content creation)
Compatibility of Tables and Complex Structures	Provides a table manager for visually adding rows/columns, but editing cells inside WYSIWYG requires caution.	Tables are defined in Markdown Pipes format (e.g., using &#124; symbols).	In progress (Basic support is available, but complex structures require caution)

Some description of key differences in the logic of operation

Cursor behavior during continuous input

• In visual mode: If you activated the Bold style, all subsequent characters will be automatically wrapped in a <strong> tag. You can disable it by pressing the button on the panel again.
• In code mode: You type **Text**. The cursor lands outside the asterisks. Any new characters after them will be plain text by default.

Interaction with the Enter key and paragraph creation

• WYSIWYG: Pressing Enter by default creates a new <br> inside the paragraph (or depending on the list context). Pressing Ctrl + Enter creates a <div> block.
• Markdown Code: Pressing Enter moves the carriage to a new line. To create a new paragraph in Markdown, you need to make two line breaks.

Cc:
@hungry-griffin
@steemcurator01

Thank you for your support ))