SteemHome: Ideas patr 2 - Редактор [UA/EN]
| UA original |
|---|
Шо тут можна сказать. Втамувавши жагу поклацать та покрутись те що б мені хотілось бачити у функціоналі, бажання робить багато скріншотів і пояснювать немає. Бо є кращий варіант, можна просто надати змогу поклацать і подивиться як це працює іншим.
Просто опишу основну конецепцію, яка цього разу присвячена редактору. І щоб було зрічніше, саме візуальному редакторові та деяким функціям. Працює воно на презентаційній моделі симуляції не зовсім як слід, але цього цілком зрозуміло щоб зрозуміти суть.
Тому просто тут згадую @kouba01, щоб не відповідати на коментарі, бо це має бути відповіддю на них, бо особилво й сказати нічого.
| https://home-idea.luxalok.workers.dev/ проєкт виключно для ознайомлення сайт буде доступний протяго одного-двох днів |
|---|
Візуальний редактор
Візуальни редактор значно полегшує створення допису. Бо є два варіанти: набирати допис через редактор із вміщувати все це в орем поля візульного редаткора або просто вствити готовий текст і просто загорнути в потрібні теги виділений текс. Так мною було вже помічено додані теги на SteemHome, дешо іншого формату. Поприт те що це теж вирішує поставлене завдання, вони все ще не загортають чи не обробляють виділений текст так, щоб він був всередині них, тому доводиться або просто додавати тег перед потрібним блоком і видалаяти пояснювальну інфомрацію, або набирати все спочатку, якщо це створення цілого допису.
Та от, це не просто візуальний редактор, а гібридна модель. Коли все дублюється в чистий код маркдаун, і за потреби можна перемкнутись до цього редактора.
Звичайно окрім хорошою справи, придивляють до того візуального модуля, так щоб він підтримував той редактор що розробляється мною, щоб можна було зручно вставляти зображення у таблицяї і так далі. То це він підтримує (точншіше повну підтримку потрібно додавати). Бо на тестові таблиці html показує і місця де можна додавати текст, а маркдаун таблиці не хоче. але то дрібниці.
Тільки поведінку й механіку таки побрібно дещо підналаштувати для кращого досвіду.
Форми швидкого формування
До цього дійства також додаються приклади форм швидкого формування призового фонду (для розуміння, бо можна краще налаштувати панель), а також розподіл очок оцінювання.
Це дозволяє замість клацання по тексту, відразу ввести потрібні параметри і їх буде відразу додано до допису, а за потреби, можна редагувати, бо це повна й зворотна синхронізація. (тільки локалізація лише українською, проте це дозволяє все одно зрозуміти, що до чого).
Автозбереження
Автозбереження у локал сторадж, що забезпечує стабільне збереження даних, і текс залишається на своєму місці навіть після оновлення сторінки. Бо шось із тими драфатами на SteemHome мені не дуже вийшло подружитись. (але не дуже в тому й розбираюсь). Можна перевірити оновивиши сторінку.
Авторозпізнавання заголовку
Заголовок теж може само розпізнавати, щоб не вводити його окремо чи не копіювати, якщо допис було сформовано в іншому редакторі. На одну дрібничку менше.
Нормальний текст
Так, а якщо такий режим підсвічування інфомрації не подобається, то можна натиснути кнопку й текс допису покаже як звичайний маркдаун і все.
Маленький підсумок
Здаєтья це основне що хотілось згадати щодо редактора, а що вискочило з поля уваги, може буде додано якось згодом.
Декілька деталей щодо функціонування SteemHome
- У превью картки не показує зображення, якщо воно не загорнуто в тег маркдаун. Це можна побачити на одному із нещодавно доданих челенджів.
- Підпис вивантаження зображення через кейчен не працює, принаймні у мене, там якийсь не правильний метод підпису. Правильний, який дозволяє це робити, можна побачити на сайті steempro.com там це реалізовано. Він і виглядає десь так:
Бо кейчейн для безпеки додано, а зображення не заванртажити, що не зручно, хоча це й не так важливо.
Cc:
@steemcurator01
| ENtranslated |
|---|
SteemHome: Ideas patr 2 - Editor
What can I say? After satisfying my urge to click around and play with the features I’d like to see, I don't have much desire to take dozens of screenshots and explain everything. There is a better way: I can simply give you the opportunity to click through it yourself and see how it works.
I will just describe the main concept, which this time is dedicated to the editor. To be more precise, it focuses on the visual editor and certain specific functions. Since it runs on a presentation simulation model, it doesn't work perfectly, but it is more than enough to understand the essence.
I’m mentioning @kouba01 here to avoid replying to individual comments, as this post is essentially an answer to them, and there isn't much else to add.
| https://home-idea.luxalok.workers.dev/ project for demonstration purposes only the site will be available for one or two days |
|---|
Visual Editor
A visual editor significantly simplifies the post-creation process. There are usually two ways: either typing the post directly in the editor or pasting finished text and wrapping selected parts in the necessary tags. I noticed that SteemHome has already added tags of a slightly different format. While they solve the task, they still don't "wrap" or process the selected text to put it inside the tags. This forces the user to either add a tag before a block and delete explanatory info or re-type everything from scratch.
However, this is not just a visual editor, but a hybrid model. Everything is duplicated into clean Markdown code, and you can switch to the code editor whenever necessary.
In addition to the general functionality, I am looking for a visual module that fully supports the editor I am developing, specifically for convenient image insertion into tables and so on. This version supports it (or rather, full support needs to be integrated). For example, HTML tables show where text can be added, whereas Markdown tables can be more stubborn, but those are minor details.
The behavior and mechanics still need some fine-tuning for a better user experience.
Quick Setup Forms
I have also added examples of "Quick Setup" forms for the prize pool (to show the concept, as the panel can be configured even better) and the distribution of scoring points.
Instead of clicking through the text, this allows you to immediately enter the required parameters, which are then instantly added to the post. If needed, they can be edited later because there is full two-way synchronization. (Note: the localization is currently only in Ukrainian, but the logic remains clear).
Autosave
Autosave to LocalStorage ensures stable data retention; your text stays in place even after a page refresh. To be honest, I haven't quite managed to "make friends" with the drafts on SteemHome yet (though I haven't dug deep into it). You can test this by refreshing the demo page.
Auto-Title Recognition
The editor can also automatically recognize the title, so you don't have to enter it separately or copy-paste it if the post was drafted in another editor. One less small chore to worry about.
Normal Text Mode
If you don't like the highlighted information mode, you can simply click a button, and the post text will be displayed as regular Markdown.
Brief Summary
I believe these are the main points I wanted to mention regarding the editor. Anything I missed might be added later.
A few details regarding SteemHome's current functionality:
- The card preview does not show an image if it is not wrapped in a Markdown tag. This can be seen in one of the recently added challenges.
- The signature for image uploading via Keychain is not working, at least for me. It seems to use an incorrect signing method. A working implementation of this can be seen on steempro.com. It looks something like this:
Since Keychain is added for security, being unable to upload images is quite inconvenient, though perhaps not critical.
Cc:
@steemcurator01


Thanks for sharing this we'll definitely take these improvements into consideration. Really appreciate the time and effort you put into building the demo, it makes the ideas much easier to evaluate.
0.00 SBD,
0.19 STEEM,
0.19 SP