Помимо стандартных caret positions (между символами) в моем редакторе есть ещё позиции отмеченные '|'
Позиция между <body> и <table> нужна для того чтобы можно было вставить текст перед таблицей. То же после </table> — напечатать что-то после table.
Позиция перед <tr> нужна для того чтобы вставить row перед данным row. После </tr> — вставить после.
Вопрос: как должны выглядеть каретки в данных необычных позициях? Простая палка '|' не работает — вот эти две caret positions:
|<tr><td>|111
рисуются практически в одном месте и соотв. не различимы — нужен distinct look.
Какие будут идеи?
Вообще это все про следующую версию моего blocknote.net на движке Sciter3. Это будет WYSIWYG-editor — платформер, расширяемый скриптами редактор html (и не только).
Если у UX господ есть желание сказать новое слово в этом деле и сделать симпатичный редактор for the rest of us — свяжитесь со мной к взаимной пользе.
В виде скобок [ ] чтобы было понятно до или после? Каретка до таблицы высотой с таблицу, каретка до строки высотой со строку. Что в WYSIWYG делает <tr></tr> я не знаю.
Здравствуйте, adontz, Вы писали:
A>Здравствуйте, c-smile, Вы писали:
A>В виде скобок [ ] чтобы было понятно до или после? Каретка до таблицы высотой с таблицу, каретка до строки высотой со строку. Что в WYSIWYG делает <tr></tr> я не знаю.
Представь себе длинную таблицу и эти мигающие скобки на весь экран. Раздражать будет, нет?
А каретка на начале/конце row позволяет вставлять rows в темпе вальса без дополнительных меню и пр. Крайне удобно, далеко не один юзер мне спаибо уже сказал (в blocknote.net оно работает)
Здравствуйте, c-smile, Вы писали:
CS>Вопрос: как должны выглядеть каретки в данных необычных позициях? Простая палка '|' не работает — вот эти две caret positions: CS>
CS>|<tr><td>|111
CS>
CS>рисуются практически в одном месте и соотв. не различимы — нужен distinct look.
Возможно, конкретно для необычных позиций лучше как-то выделять редактируемый элемент, а каретку оставить как есть. Без мигания — например, обвести или подсветить.
Здравствуйте, Don Reba, Вы писали:
DR>Здравствуйте, c-smile, Вы писали:
DR>Возможно, конкретно для необычных позиций лучше как-то выделять редактируемый элемент, а каретку оставить как есть. Без мигания — например, обвести или подсветить.
Позиция каретки это место *между* двумя объектами, символами например.
В моем случае каретка может находиться между блоками (в DOM смысле).
Например, представь что у тебя на экране две таблицы одна за другой:
<table>
...
</table>
<table>
...
</table>
У тебя должна быто возможность поставить каретку *между* таблицами чтобы вставить текст между ними.
Здравствуйте, c-smile, Вы писали:
CS>Какие будут идеи?
Отдельный режим? Есть же режим отображения спецсимволов, пусть будет и каретка "вставления". Если в какую-то позицию можно что-то вставить, и это не внутри текста, то вставляем пустую строку и каретку в начало — всё, что юзер введет затем оборачиваем нужными тегами.
Здравствуйте, cgibin, Вы писали:
C>Здравствуйте, c-smile, Вы писали:
CS>>Какие будут идеи?
C>Отдельный режим? Есть же режим отображения спецсимволов, пусть будет и каретка "вставления". Если в какую-то позицию можно что-то вставить, и это не внутри текста, то вставляем пустую строку и каретку в начало — всё, что юзер введет затем оборачиваем нужными тегами.
Как я уже сказал, не все позиции каретки предназначены для вставки текста. Некуда ту пустую строку вствлять.
Да и вставлять пустую строку, а потом её убирать если ничего не введено, тоже не красиво.
Зажимаешь LEFT на клавиатуре и смотришь веселые картинки.
Здравствуйте, c-smile, Вы писали:
CS>Зажимаешь LEFT на клавиатуре и смотришь веселые картинки.
Ну в твоем случае зажимаешь кнопку и ждешь, когда уже наконец эта каретка преодолеет несчастную табличку из пары строк. Или пытаешься перместить каретку на строчку вниз и внезапно понимаешь, что придется в несколько раз больше совершить нажатий.
Мне кажется, основной юзкейс все-таки навигация по контенту, а не исследование потрохов разметки, и нужно дать пользователю возможность явно обозначать свои намерения.
Здравствуйте, cgibin, Вы писали:
C>Здравствуйте, c-smile, Вы писали:
CS>>Зажимаешь LEFT на клавиатуре и смотришь веселые картинки.
C>Ну в твоем случае зажимаешь кнопку и ждешь, когда уже наконец эта каретка преодолеет несчастную табличку из пары строк. Или пытаешься перместить каретку на строчку вниз и внезапно понимаешь, что придется в несколько раз больше совершить нажатий.
Home/End в таблице ставит каретку в начало конец row.
Нужно мне наверно больше рассказать про что такое blocknote будет.
Blocknote не есть WYSIWYG редактор готовых web страниц. Такое сделать а) в принципе невозможно (в чистом WYSIWYG) да и b) никому особо не нужно.
Blocknote user model это web писатель. Если взять скажем wordpress сайт то Blocknote для редактирования текста article. Но не самой страницы которая включает в себя кучу генерирванного контента.
"web писатель" это общее понятие которая включает в себя, например, тебя когда тебе нужно написать markdown.md текст для GITа.
Это также и просто писатель который пишет книжку в формате fictionbook.fb и т.д.
Всем им нужен способ быстро и естесвенно печатать. Больше keyboard shortcuts — лучше. Без продирания через markdown или html конструкций.
C>Мне кажется, основной юзкейс все-таки навигация по контенту, а не исследование потрохов разметки, и нужно дать пользователю возможность явно обозначать свои намерения.
Не понял замечание если честно. Открой MS Word. Вставь таблицу, посмотри на их каретку в конце table row — поймешь что я имею ввиду. Какие там потроха разметки?
Здравствуйте, c-smile, Вы писали:
DR>>Возможно, конкретно для необычных позиций лучше как-то выделять редактируемый элемент, а каретку оставить как есть. Без мигания — например, обвести или подсветить.
CS>Позиция каретки это место *между* двумя объектами, символами например. CS>В моем случае каретка может находиться между блоками (в DOM смысле).
CS>Например, представь что у тебя на экране две таблицы одна за другой:
CS>
CS>У тебя должна быто возможность поставить каретку *между* таблицами чтобы вставить текст между ними.
Когда каретка между таблицами — ничего не выделять. Когда каретка внутри таблицы, но перед первой строкой — подсвечиваем всю таблицу. Когда каретка внутри строки таблицы, но не в ячейке — подсвечиваем всю строку. Ну и когда каретка в ячейке — выделем саму ячейку.
Выделять-подсвечивать надо попробовать как изменением фона, так и всякими рамками-обводками — возможно какой-то из вариантов получится достаточно удобным.
Представь себе ещё более простую ситуацию: <b>one|</b>|<i>|two</i>
Тут между one и two целых три позиции, набор текста в которых будет давать разный эффект...
Впрочем, для данной ситуации есть общепринятое решение: считать, что позиция только одна: <b>one|</b><i>two</i>
А с таблицами — выход, наверное, в том, чтобы сделать ненулевую рамку (margin/boder/padding на твой вкус). Тогда будет видно, находится каретка до/после таблицы или в начале первой/конце последней клетки, в конце клетки или в начале следующей клетки.
Ещё вариант — подсвечивать (выделять рамкой или менять фон) текущую клетку, если каретка в ней.
Он будет плохо работать, если клетка таблицы содержит вложенную таблицу 1*1. И подсвеченной окажется то ли внешняя клетка, то ли внутренняя.
Развитие этого варианта: у текущей клетки не только подсветку менять, но и ширину padding'а принудительно ненулевую устанавливать.
Здравствуйте, Кодт, Вы писали:
К>Здравствуйте, c-smile, Вы писали:
К>Представь себе ещё более простую ситуацию: <b>one|</b>|<i>|two</i> К>Тут между one и two целых три позиции, набор текста в которых будет давать разный эффект...
На самом деле в blocknote и sciter так оно и есть.
Caret position у меня это struct cpos { int char_idx; bool before_or_after; };
Скажем для такого markup:
<p>one<b>two</b><p>
при движении вперед каретка останавливается здесь
<p>|o|n|e|<b>t|w|o|</b><p>
А если назад то здесь
<p>|o|n|e<b>|t|w|o|</b><p>
Т.е. если каретка между 'e' и 't' то напечатаныый символ окажется либо внутри <b> либо снаружи — в зависимости от того
с какой стороны ты туда пришел. Что в общем инуитивно естественно.
К>Впрочем, для данной ситуации есть общепринятое решение: считать, что позиция только одна: <b>one|</b><i>two</i>
Это работает для Word/MSRICHTEXT с его плоской DOM моделью. Для HTML (для профессиональных писателей) такое плох работает.
Google Docs кстати не зря используют flat model а не наивный HTML contenteditable. У них кажлая *строка* это отдельный <div>.
А кваретка это вообще <span> c border. На contenteditable нормальный редактор не сделать.
К>А с таблицами — выход, наверное, в том, чтобы сделать ненулевую рамку (margin/boder/padding на твой вкус). Тогда будет видно, находится каретка до/после таблицы или в начале первой/конце последней клетки, в конце клетки или в начале следующей клетки.
Сделал каретки трех типов: |,- (горизонтальная каретка между блоками) и Г — каретки для rows.
К>Ещё вариант — подсвечивать (выделять рамкой или менять фон) текущую клетку, если каретка в ней. К>Он будет плохо работать, если клетка таблицы содержит вложенную таблицу 1*1. И подсвеченной окажется то ли внешняя клетка, то ли внутренняя.
К>Развитие этого варианта: у текущей клетки не только подсветку менять, но и ширину padding'а принудительно ненулевую устанавливать.
Это да. Для редактирвания вообще грузится отдельный edit-friendly.css
Здравствуйте, c-smile, Вы писали:
CS>Т.е. если каретка между 'e' и 't' то напечатаныый символ окажется либо внутри <b> либо снаружи — в зависимости от того CS>с какой стороны ты туда пришел. Что в общем инуитивно естественно.
Поспорил бы, что интуитивно и естественно.
Во-первых, в текущую позицию можно как побуквенно придти, так и прыгнуть несколькими разными способами:
— навигация по словам (Ctrl+стрелки)
— навигация по строкам (особенно, если шрифт не моноширинный, и вертикальное перемещение приводит и к горизонтальному тоже)
— поиск
— бэкспейс и удаление
— мышь
Если в случае навигации и, в принципе, поиска, можно говорить о направлении, то с мышью это не так.
А бэкспейс в какой контекст перемещает? Вроде бы, движение влево, но изменяется левый текст, значит, и продолжать ввод нужно от левого.
Во-вторых, нужно не только видеть, что на экране, но и помнить последнее действие. Отвернулся, забыл, вернулся, ой.
Отсюда — вырабатывается привычка специально двигать каретку влево-вправо перед набором текста.
К>>Впрочем, для данной ситуации есть общепринятое решение: считать, что позиция только одна: <b>one|</b><i>two</i>
CS>Это работает для Word/MSRICHTEXT с его плоской DOM моделью. Для HTML (для профессиональных писателей) такое плох работает. CS>Google Docs кстати не зря используют flat model а не наивный HTML contenteditable. У них кажлая *строка* это отдельный <div>. CS>А кваретка это вообще <span> c border. На contenteditable нормальный редактор не сделать.
К>>А с таблицами — выход, наверное, в том, чтобы сделать ненулевую рамку (margin/boder/padding на твой вкус). Тогда будет видно, находится каретка до/после таблицы или в начале первой/конце последней клетки, в конце клетки или в начале следующей клетки.
CS>Сделал каретки трех типов: |,- (горизонтальная каретка между блоками) и Г — каретки для rows.
Это позволит отличить внешний текст от таблицы. А таблицу от таблицы? (Смежные и, особенно, вложенные)
Кстати, вспомнил решение — специально для профессионалов и html-редакторов.
Выводить хлебные крошки в строке статуса. Это Macromedia Dreamweaver умел делать, и его младший брат, забыл, как он назывался. Очень удобно и понятно.
То есть, каретка визуально на месте, а крошки меняются. И мышью по крошкам можно прогуляться, заодно.
Перекуём баги на фичи!
