PWA — available for installation in any browser that supports this feature. To do this, the compiled web application needs to be hosted online as a standalone static page or embedded into a website (handled independently).*
This means it is already available for download, but requires more fine-tuning.
It is also worth noting that Phase 4 of the main plan was implemented first, followed by further development, as this allowed for a much better realization of the planned features. Although implemented, completion cannot yet be considered 100%: it is functional, but requires thorough testing, debugging, and optimization. That is, one can easily draft and publish a 2,000–3,000 word post, but certain aspects may not yet feel completely seamless or intuitive, or minor to moderate bugs may still need addressing.
Automated native application builds were also partially implemented, which was not part of the original plan.
FEATURES ADDED BEYOND THE INITIAL PLAN
These features were not declared in the initial development plan, yet they transformed the editor from a simple tool into a full-featured workspace for authors and curators:
1. Hybrid WYSIWYG Editor and Two-Way Synchronization
- Cursor & Caret Sync: A mathematical algorithm was developed to calculate the exact caret and scroll positions when toggling between raw code mode (Markdown) and visual mode (WYSIWYG). The cursor does not jump to the top; the user continues typing right where they left off (there are minor edge cases with complex formatting tags, but the cursor remains nearby).
- Data Loss Prevention: Implemented the
steem_visual_html_is_stale protocol. When a user edits Markdown directly, the visual cache is automatically marked as stale and regenerated upon switching back, completely eliminating accidental text overwrites or loss.
2. Multi-Threaded Engine Powered by Web Workers
To ensure maximum performance, the /src/hooks/useEditorWorker.ts hook was integrated:
- All computationally heavy operations for parsing Markdown into HTML (via the
marked library) and sanitizing HTML markup (via dompurify) have been offloaded to separate background browser threads (Web Workers). This ensures optimal typing responsiveness and stability.
3. Performance Mode
(requires fine-tuning)
Designed for low-spec devices or older smartphones, this mode completely disables animations (Framer Motion / Motion), backdrop-blur effects, shadows, and complex transitions, reducing CPU and GPU load to an absolute minimum.
4. Reader: Interactive Feed and Curation Dashboard
The /src/components/Reader.tsx file (spanning over 4,900 lines of code) contains a comprehensive blockchain client for browsing and interacting with the Steem feed:
- Multi-voting: Rapid upvoting with configurable voting weight (from 1% to 100%). Allows users to select multiple posts and queue comments for each (custom comments per post or a shared template), which are executed in a queue respecting rate limits and timeouts, significantly enhancing manual curation and saving time.
- Vote Logging System: The app automatically logs all curation activities (who was upvoted, for which posts, and at what voting weight).
- Curation Report Export: With a single click, curators can generate and download a professional Markdown report of their curation activity ready for publishing in the community.
- Commenting: Full functionality to compose, edit, and delete comments directly from the reading interface.
- Single-Page Feed: No need to open links in separate tabs. Feed posts are neatly collapsed into titles and can be expanded on demand to read in-place. An integrated commenting tool lets users quickly grab and quote text snippets successively.
5. Backup & Restore Engine
Implemented in the /src/hooks/useAppBackup.ts hook and integrated with the lightweight compression library fflate.
- Users can export all drafts into a structured ZIP archive or individual
.md files on the fly while writing.
6. EXIF Metadata Extraction for Images (needs verification after package updates)
As an optional feature, allows extracting EXIF data from personal images uploaded to steemitimages.com and appending an EXIF table below the image. Useful for photographers who prefer not to enter camera model, exposure, lighting settings, etc. manually.
7. Neon Theme
A vibrant interface theme, including tinted text and colored icons.
8. Mobile Mini-Gallery
Convenient insertion of uploaded personal images directly into the text from an on-screen widget without dismissing the mobile keyboard (preliminary implementation working).
9. Automated Native Application Builds
Added the necessary libraries, directories, configuration files, and GitHub Actions workflow files for Neutralinojs and Tauri, enabling seamless native builds and automated releases directly on GitHub.
10. Version Bump Script
Automates version increments across all relevant project files, including native app manifests and configurations.
11. Viewport Adaptation
Added precise positioning and scaling of editor components to accommodate mobile virtual keyboards, keeping the active text area visible above the formatting toolbar (still undergoing fine-tuning).
Tech Stack and Integrated Modules (v4.8.0)
The editor was renamed from Easy Steem Editor to Ultra Steem Editor
The project uses a modern, fast, and secure module ecosystem without outdated or bloated dependencies:
📦 Core Dependencies
react (v19.2.8) & react-dom — the latest version of the UI library, offering exceptional performance.zustand (v5.0.14) — lightweight, reactive state management (using subscribeWithSelector for selective state sync without redundant re-renders).@blazeapps/dsteem (v0.12.2) — reliable JS library for interacting with Steem nodes.marked (v18.0.11) — high-speed Markdown-to-HTML parser.dompurify (v3.4.14) — XSS sanitization for secure HTML rendering.motion (v13.1.1) (formerly framer-motion) — smooth and optimized UI animations.buffer (v6.0.3) — Buffer polyfill for cryptographic signing in browser environments.idb-keyval (v6.2.2) — simplified key-value interface for IndexedDB storage.fflate (v0.8.3) — ultra-fast, lightweight jszip alternative for backup archiving.exifreader (v4.44.0) — photo metadata parser.lucide-react (v1.33.0) — clean, modern vector icon set.clsx & tailwind-merge — utility helpers for dynamically composing Tailwind classes.
🛠️ Dev Dependencies
vite (v8.2.2) — next-generation, blazing-fast bundler and build tool.@tailwindcss/vite (v4.0.0) & tailwindcss — modern CSS framework Tailwind v4.typescript (~6.0.2) — strict typing for code reliability. (Version 7.0.2 is available, but typescript-eslint supports up to 6.1.0; an earlier version is used to keep strict linting and lockfiles operational for automated native builds.)eslint (v10.9.1) & typescript-eslint — static code analysis tools for bug detection and code quality.@neutralinojs/neu & @tauri-apps/cli — desktop build and packaging platforms.
Roadmap — Continuation
Phase 1 ✅
Phase 2 ✅
Phase 3 ✅
Phase 4 ✅
Phase 5: Thorough Optimization
In progress, ~15% completed.
Required steps taking into account the addition of the visual editor mode:
- Improving UX/UI intuitiveness and refining user workflows;
- Comprehensive functional testing;
- Expanding the capabilities of Web Workers;
- Calibrating viewport handling for consistent usability across desktop and mobile devices;
- Sound effects for typing and background audio;
- Refactoring key core files (
App.tsx and Reader.tsx) for better performance and maintainability (as feasible);
Phase 6: Localization and Presentation Mode
- Adding a wider selection of languages;
- Presentation / tour mode for discovering features.
Phase 7: Cross-Platform Support
In progress, ~75% completed.
- Packaging the web project into native applications for Windows, Linux, and Android.
- PWA — allows covering most operating systems and mobile devices with PWA-capable browsers.
This is mostly a parallel effort since the core functionality stems from the base web project; however, specific adjustments are required for OS permissions, filesystem access (for exporting drafts), and cache management (clearing uploaded assets and feed reading cache).
Ultra Steem Editor Project Support
- Reward requested: 5102 SBD (accounting for inflation and price fluctuations)
- Timeline: 123 days
- Estimate: ~41.48 SBD/day
.
Thank you for your attention and support
[PROPOSAL] Ultra Steem Editor: Візуальний редактор, рідер та мультикурування
Текстовий редактор для створення допису, відіграє важливу роль. Адже простота та зручність прямо впливає на охоплення аудиторії та час затрачений на створення публікації. Є багато застосунків для написання маркдаун тексту, але вони не дають всього ряду потрібних функцій. А на steemit.com чи інших сайтах, які дозволють публікувти на блокчейні STEEM, текстовому редактору приділено не так багато уваги. Тобто подекуди він є, то й добре, із стандартним набором і звичайно із розміткою форматування промо в тексті, що загалом не всіх підходить. І якщо це закриває звичайну потребу, просто набрати текст й додати декілька зображен, то щось складніше для красивішого оформлення, не надає. Як і менежмент зображень, компонування та підписи до них. Тому ця пропозиція, є перезапуском попередньої лінк додати, яка наразі показує значно більше результату відносно заявленого плану. Де враховану одну із важливих деталей - візуальний режим форматування.
| Нативний застосунок (AppImage Linux) |
|---|
| Ultra Steem Editor (Android App) |
|---|
Що вже зроблено?
На початку був скропиний ванільний код для власного використання, щоб було легше форматувати дописи й додавати зображення. А потім захотілось розвити її й поділитись із іншими. Отже починаючи із заявленої версі v26.5 прототипу Easy Steem Editor маємо наступний результат.
| Фаза | Виконання |
|---|
| 1 | ✅ |
| 2 | ✅ |
| 3 | ✅ |
| 4 | ✅ |
| Перспективи крослатформеності (не входили в основний план) |
|---|
| Фаза | Виконання |
|---|
| 5 | Є деякі успіхи, які залежать від основного прєкту |
| Платформа | Доступність | Застосунки |
|---|
| Android | + | PWA, apk |
| Windows | + | PWA, exe, msi |
| Linux | + | PWA, deb, rpm, AppImage |
| IOS | + | PWA |
| macOS | + | PWA |
PWA - доступно для встановлення у всіх браузерах, які підтримують цю функцію. Для цього потрібно розмістити скомпільований вебзастосунок для доступу через інтернет, як окрему статичну сторінку або вбудувати на сайті (але то вже своїми силами).*
Це означає, що це вже доступно для завантаження, але потребує ретельнішого налаштування.
Варто також зазначити. Що спочатку відбулась 4 фаза основного плану, а потім подальша розробка, бо це дозволило значно краще реалізувати заявлене. Також виконання хоч і реалізоване, але не можна вважати його 100%, бо воно функціонує, але потребує ретельної перевірки, налагодження та оптимізації. Тобто можна легко сформувати й опублікувати допис на 2000-3000 слів, але не все може бути гладко, інтуїтивно зрозумілим чи мати ще якісь маленькі чи величенькі баги, які треба підправити.
Також частково було охоплено автоматизовану збірку нативних застосунків, що не входило в основний план
ФУНЦІОНАЛ ДОДАНИЙ ПОЗА ПЛАНОМ
Ці функції не були задекларовані у початковому плані розробки, проте вони перетворили редактор із простого інструменту на повнофункціональний робочий кабінет автора та куратора:
1. Гібридний WYSIWYG Редактор та Двостороння синхронізація
- Синхронізація курсора (Cursor & Caret Sync): Розроблено математичний алгоритм, який при перемиканні між режимом коду (Markdown) та візуальним режимом (WYSIWYG) обчислює точне положення каретки та скролу. Курсор не стрибає вгору, користувач продовжує писати з тієї ж літери (є нюасни на сладних тегах форматування, але курсор все одно там буде поряд).
- Запобігання втрати даних: Впроваджено протокол
steem_visual_html_is_stale. Якщо користувач вносить зміни в Markdown, візуальний кеш автоматично позначається застарілим і регенерується при поверненні, що повністю виключає випадкове стирання тексту.
2. Багатопотоковий рушій на Web Workers
Для забезпечення максимальної продуктивності розробники інтегрували хук /src/hooks/useEditorWorker.ts.
- Усі важкі операції з парсингу Markdown у HTML (через бібліотеку
marked) та очищення HTML-розмітки (через dompurify) винесені в окремі фонові потоки браузера (Web Workers). Що дає кращу стабільність при наборі.
3. Режим Швидкодії (Performance Mode)
(потребує допрацювання)
Для пристроїв із низькою продуктивністю або застарілих смартфонів розроблено режим, який повністю відключає анімації (Framer Motion), backdrop-blur ефекти, тіні та складні переходи, зводячи навантаження на процесор та GPU до абсолютного нуля.
4. Reader: Інтерактивна Стрічка та Панель Курування
Файл /src/components/Reader.tsx (який займає понад 4900 рядків коду) містить повноцінний блокчейн-клієнт для перегляду та взаємодії зі стрічкою Steem:
- Мультиголосування (Multi-voting): Можливість швидкого голосування з налаштуванням сили апу (від 1% до 100%). Це дає змогу відмітити обрані дописи та додати коментар під кожен із них (як свій окремо так і шаблонний для всіх) і вони будуть реалізовуватись у порядку черги, із врахуванням таймаутів, що поращує досвід ручноо курування і заощаджує час.
- Логування кураторства (Vote Logging System): Додаток веде автоматичний облік усіх дій куратора (кого апував, за які пости, з якою силою).
- Експорт кураторського звіту: Одним кліком куратор може згенерувати та завантажити професійний Markdown-звіт про свою діяльність для публікації у спільноті.
- Коментування: Можливість повноцінного написання, редагування та видалення коментарів прямо з інтерфейсу читання.
- Дописи на одній сторінці: Не потрібно переходити за лінками на нові вкладки чи ще якось, як це зазвичай пропонується, всі знайдені дописи, акуратно згорнуті до заголовка, за потреби можна відкрити й почитати. Де передбачено модуль коментування, можна швидко додавати різні ділянки тексту для швидкого цитування, набираючи їх одна за одною.
5. Система резервного копіювання (Backup & Restore Engine)
Реалізовано у хуці /src/hooks/useAppBackup.ts та інтегровано з легковажною бібліотекою стиснення fflate.
- Користувач може експортувати всі чернетки у структурований ZIP-архів або окремі
.md файли прямо під час набору допису.
6. Зчитування exif метаданих зображення (потрібно перевірити після оновлень пакетів)
Як опція дозволяє зчитувати exif дані влансних зображення, які вивантажуються на steemitimages.com і вставляти разом із таблицею нижде. Що може для кого важливо, щоб не писати вручну назву пристрою фотографування, екпозицію, освітлення...
7. Неонова тема
Яскравіше оформлення інтерфейсу, включвно із фарбування у колір тексту та іконок.
8. Міні галерея для мобільних пристроїв
Для зручності простї вставки вивантажених власних зображень до тексту, прямо із віджета без згортання клавіатури (здається працювало).
9. Атоматизація збірки нативних застосунків
До проєкту додано для Neirolino й Tauri потрібні бібліотеки, папки та файли й додано спеціальні файли-інструкції workflow, щоб можна було збирати їх на ГітХаб без зайвих рухів і випускати релізи.
10. Додано bump скрипт
Щоб швидко оновлювати зміну версії застосунку у всіх потрібних для того файлів, ключно із нативними застосунками.
11. Впроваждено вьюпорт
Додано для точного позиціонування й масштабування елеменртів редактора із врахування використання віртуальної клавіатури на мобільних пристроях. Щоб текст був над віджетом форматування. (але ще потребує точних налаштувань)
Технічний стек та вбудовані модулі (v.4.8.0)
Редактор було перейменовано із Easy Steem Editor в Ultra Steem Editor
Проєкт використовує сучасну, швидку та безпечну екосистему модулів без використання застарілих або "важких" залежностей:
📦 Основні залежності (Dependencies)
react (v19.2.8) & react-dom — найновіша версія бібліотеки інтерфейсів, яка працює надзвичайно швидко.
zustand (v5.0.14) — легкий та реактивний менеджер станів (використовує subscribeWithSelector для синхронізації станів без зайвих рендерів).
@blazeapps/dsteem (v0.12.2) — надійна JS-бібліотека для взаємодії з нодами Steem.
marked (v18.0.11) — швидкісний парсер Markdown у HTML.
dompurify (v3.4.14) — захист від XSS-атак при рендерингу HTML.
motion (v13.1.1) (раніше framer-motion) — плавні та оптимізовані анімації інтерфейсу.
bufferv.6.0.3 - поліфіл буфера для криптографічних підписів у браузерному оточенні.
idb-keyval (v6.2.2) — спрощений інтерфейс для роботи з базами даних IndexedDB.
fflate (v0.8.3) — надшвидка та легка альтернатива jszip для архівації резервних копій.
exifreader (v4.44.0) — парсер метаданих фотографій для захисту приватності авторів.
lucide-react (v1.33.0) — набір векторних іконок для інтерфейсу.
clsx & tailwind-merge — утиліти для динамічного комбінування Tailwind-класів.
🛠️ Інструменти розробки (DevDependencies)
vite (v8.2.2) — супершвидкий збирач наступного покоління.@tailwindcss/vite (v4.0.0) & tailwindcss — сучасний CSS-фреймворк Tailwind v4.typescript (~6.0.2) — строга типізація для надійності коду. Доступна версія 7.0.2, але typescript-eslint підтримує версію до 6.1.0, тож використовується старіша версія, щоб працювала збірка із строгою перевіркою й локфайлом для автозмірки нативних застосунків.eslint (v10.9.1) & typescript-eslint — інструменти статичного аналізу коду для пошуку багів.@neutralinojs/neu & @tauri-apps/cli — десктопні платформи розгортання.
Мапа розробки - продовження
Фаза 1 ✅
Фаза 2 ✅
Фаза 3 ✅
Фаза 4 ✅
Фаза 5: Ретельна оптимізація
Розпочато, 15% виконання.
Неохідні заходия з урахуванням додавання візуального режиму редактора.
- Покращення інтуїтивної зручності інтерфейсу та деяких сценаріїв;
- Ретельна перевірка функціонування;
- Розширення можливостей ВебВоркерів;
- Калібрування вьюпорту, щоб було однаково зручно на ПК і на мобільних пристроях;
- Звукови супровід набору та фону;
- Рефакторинг основних файлів App.tsx та Reader.tsx для кращої продуктивності й стабільності. (за наявної можливості);
Фаза 6: Локалізація та презетаційним режим
- Додавання ширшого асортименту мов;
- Презетаційний режим для ознайомленням із функціоналом.
Фаза 7: Кросплаформеність
Розпочато, 75% виконання.
- Пакування вебпроєкту в нативні застосунки для Windows, Linux, Android.
- PWA - дає змогу охопити більшість операційних систем та мобільних пристроїв де є браузери, котрі підтримують дану технологію.
Загалом це попутний процес, бо більша частина залежить від початкового вебпроєкту, проте потрібні специфічні допрацювання для дозволів, роботи із файловою системою, щоб експортувати записи чи очищувати накопичений кеш вивантаженого чи від читання інших дописів.
Підтримка проєкту Ultra Steem Editor
- Винагорода: 5102.04 SBD (із врахуванням інфляції та коливання курсу)
- Час виконання: 123 дня (якщо доживу)
- Орієнтовно: ~41.48 SBD/day
Дякую за увагу й підтримку!
