Святкуємо! Рубіж KuroEditor v1.0.0 та 'Різноманітність макетів' vol.3
KuroEditor нарешті досяг версії v1.0.0. Крім виправлення помилок, оновлення приносить корисні покращення, такі як плаваючий блок 'RoundBox' та розширені таблиці.
Стрибок від «ледве працює» до «офіційного релізу»
Минуло кілька місяців з початку розробки KuroEditor. Після того, як я розповів про його необхідність у випуску 1 та випустив опис механізму та першу версію у випуску 2, я перетнув точку неповернення. Тепер номер версії нарешті досяг позначки «1.0.0». Понад 200 дрібних покращень у версіях 0.3.x втілилися в цю завершену форму.
У цьому великому оновленні, зберігаючи гнучку філософію дизайну без сторонніх бібліотек та на чистому Vanilla JS, я впровадив «нові структурні можливості», які значно розширюють виражальні можливості при написанні блогу. Это вже не просто текстовий редактор; він починає набувати рис простого інструменту для верстки макетів.
Головне в v1.0.0: Плаваючий блок «RoundBox»
Найбільшим нововведенням у версії 1.0.0 є «RoundBox» (kuro-roundbox), який можна вільно розміщувати на сторінці. Раніше це було важко реалізувати в WYSIWYG-редакторах, але тепер такі макети, як «розміщення додаткової інформації поруч із текстом» або «вирівнювання зображень та тексту пліч-о-пліч», можна створити однією кнопкою.
Це більше, ніж просто рамка. Окрім визначення ширини, ви можете налаштувати обтікання текстом ліворуч або праворуч, також підтримуються вкладені структури для подальшого декорування всередині блоків. Технічно, він містить логіку для автоматичного обчислення позицій, щоб уникнути накладання курсору чи спливаючих меню на блоки, дозволяючи вам зосередитися на написанні тексту без стресу навіть у складних макетах.
Розширення можливостей таблиць: вставка CSV та покращена зручність
Функції таблиць, про які я розповідав у випуску 2, отримали подальший розвиток у v1.0.0. Особливо великим запитом був імпорт зовнішніх даних.
Нова функція | Деталі та переваги |
Вставка CSV/TSV | Миттєво переносьте дані, скопійовані з Excel або електронних таблиць, у таблицю на сторінці. |
Вертикальне вирівнювання | Встановлюйте положення тексту всередині комірок «Зверху, По центру або Знизу». |
Видалення в один клік | Нова кнопка для видалення всієї таблиці, що покращує інтерфейс та зменшує кількість помилок. |
Підрахунок символів | Відображення кількості символів у реальному часі внизу редактора. Надзвичайно зручно. |
*Також підтримується копіювання та вставка з Dropbox Paper! лол
Ретельний інтерфейс: логіка запобігання зіткненню меню
Зі збільшенням кількості функцій інтерфейс користувача може легко стати перевантаженим. Проте головна місія KuroEditor — «не заважати написанню тексту». У цьому оновленні я модернізував систему «запобігання накладанню», яка динамічно обчислює координати відображення спливаючих меню, щоб вони не перекривали одне одного.
Наприклад, навіть у тісних місцях, де RoundBox знаходиться безпосередньо під таблицею, меню з’явиться точно в оптимальному місці. Щоб реалізувати цю «очевидну поведінку», я переглянув тисячі рядків логіки. Це той самий міліметровий перфекціонізм, який можливий лише тоді, коли ви не використовуєте готові фреймворки.
Майбутнє KuroEditor
Із виходом версії v1.0.0 фундамент KuroEditor повністю завершено. Хоча майбутня робота буде зосереджена на виправленні помилок, я планую поступово зменшувати обсяг коду. Основна філософія «блискавично швидкого Vanilla JS, нульової кількості залежностей і роботи в будь-якому середовищі» ніколи не зміниться.
KuroEditor продовжує розвиватися разом із KuroCMS. Я впевнений, що з цим оновленням він досяг найвищого рівня функціональності для однофайлової бібліотеки. Якщо вам цікаво, відвідайте наш репозиторій на GitHub або особисто випробуйте його плавну роботу на нашій сторінці з демо-версією.
Джерела