HTML WYSIWYG editing
От: c-smile Канада http://terrainformatica.com
Дата: 11.03.10 20:03
Оценка:
В раздумьях над следующей проблемой:

Скажем есть такой markup

<ul>
  <li>one|</li>
  <li>two</li>
</ul>


Где символом '|' обозначено положение каретки.
Теперь юзер жмет ENTER т.е. как бы "перевод строки".

Воможны (и требуется поддержать) два варианта изменений:

Первый (расширение LI блока путем создания параграфа внутри):
<ul>
  <li>one
      <p>|</p>
  </li>
  <li>two</li>
</ul>


Второй (создание нового LI блока):
<ul>
  <li>one</li>
  <li>|</li>
  <li>two</li>
</ul>


Варианты решения которые я рассматриваю:

1) Эти два действа сидят на разных key strokes, например: Ctrl+Enter и Enter. Not enough WYSIWYG я бы сказал...

2) Расширение набора caret positions:
Т.е.
|<ul>
  |<li>|o|n|e|</li>|
  |<li>|t|w|o|</li>|
</ul>|

В этом варианте появляется потребность в "нетрадиционыых" изображениях каретки.
Вот эти две позиции каретки:
  |<li>|one</li>

на самом деле находятся в одном месте canvas. Поэтому приходится рисовать "мигающий угол" в случае когда каретка находится перед началом блока. Перед началом первого символа вид каретки традиционный т.е. вопросов не вызывает.

Честно говоря я затрудняюсь в определении какой из вариантов лучше.
Т.е. либо стандартная каретка, но магические сочетания кнопок, либо такие вот "magic carets".
Re: HTML WYSIWYG editing
От: маген Россия https://ru.linkedin.com/pub/alexey-smorkalov/4/283/8b8
Дата: 11.03.10 20:08
Оценка:
CS>Честно говоря я затрудняюсь в определении какой из вариантов лучше.
CS>Т.е. либо стандартная каретка, но магические сочетания кнопок, либо такие вот "magic carets".

Я за первый
Re: HTML WYSIWYG editing
От: LuciferSaratov Россия  
Дата: 11.03.10 20:13
Оценка: +1
Здравствуйте, c-smile, Вы писали:

CS>Честно говоря я затрудняюсь в определении какой из вариантов лучше.

CS>Т.е. либо стандартная каретка, но магические сочетания кнопок, либо такие вот "magic carets".

Еще не дочитав до предложенных вариантов, я подумал про Enter и Ctrl-Enter.
А нетрадиционной каретки я бы испугался.
Re[2]: HTML WYSIWYG editing
От: c-smile Канада http://terrainformatica.com
Дата: 11.03.10 20:23
Оценка:
Здравствуйте, LuciferSaratov, Вы писали:

LS>Здравствуйте, c-smile, Вы писали:


CS>>Честно говоря я затрудняюсь в определении какой из вариантов лучше.

CS>>Т.е. либо стандартная каретка, но магические сочетания кнопок, либо такие вот "magic carets".

LS>Еще не дочитав до предложенных вариантов, я подумал про Enter и Ctrl-Enter.


Проблема в том что традиционно в HTML WYSIWYG editors есть еще Shift-Enter который вставляет <br>.
Т.е. имеем полный зоопарк Enter, Ctrl-Enter и Shift-Enter. Что в общем-то не есть хорошо. У юзера должна быть ментальная модель HTML DOM в этом случае.

LS>А нетрадиционной каретки я бы испугался.


Я в своем blocknote в таблицах ввел такую каретку. Т.е. есть специальные позиции начало/конец row. Enter в этих позициях приводит к созданию нового row перед/за текущим.
Народу нравится ибо удобно очень таблицы набивать.

Просто на все возможные комбинации клавиш не напасешься.
Re[3]: HTML WYSIWYG editing
От: c-smile Канада http://terrainformatica.com
Дата: 11.03.10 20:26
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Я в своем blocknote в таблицах ввел такую каретку. Т.е. есть специальные позиции начало/конец row. Enter в этих позициях приводит к созданию нового row перед/за текущим.

CS>Народу нравится ибо удобно очень таблицы набивать.

CS>Просто на все возможные комбинации клавиш не напасешься.


Кстати глянул в MS Word, они тоже сделали специальную каретку для row.
Re[3]: HTML WYSIWYG editing
От: LuciferSaratov Россия  
Дата: 11.03.10 20:39
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Просто на все возможные комбинации клавиш не напасешься.


Тебе однозначно виднее, что нужно твоим пользователям. Я просто высказал свое мнение.
А может, стоит сделать и каретки, и Ctrl-Enter?
Re[4]: HTML WYSIWYG editing
От: c-smile Канада http://terrainformatica.com
Дата: 11.03.10 20:57
Оценка:
Здравствуйте, LuciferSaratov, Вы писали:

LS>Здравствуйте, c-smile, Вы писали:


CS>>Просто на все возможные комбинации клавиш не напасешься.


LS>Тебе однозначно виднее, что нужно твоим пользователям. Я просто высказал свое мнение.


Вопрос как бы не в "моих" пользователях. blocknote например в top 300 freeware list. Качают всяко разные люди.
Т.е. задача редактирования HTML она вообще глобальная. gmail, thunderbird и другие browser based HTML editing widgets коим вообще несть числа.

LS>А может, стоит сделать и каретки, и Ctrl-Enter?


Моет еще другие способы визуализвции есть ... Вот и думаю вслух.
Re[3]: HTML WYSIWYG editing
От: Centaur Россия  
Дата: 12.03.10 14:09
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Проблема в том что традиционно в HTML WYSIWYG editors есть еще Shift-Enter который вставляет <br>.

CS>Т.е. имеем полный зоопарк Enter, Ctrl-Enter и Shift-Enter. Что в общем-то не есть хорошо. У юзера должна быть ментальная модель HTML DOM в этом случае.

Если у юзера нет ментальной модели HTML DOM, из него в любом случае не получится семантически корректного HTML.

И, кстати, именно из-за WYSIWYG’а у всё большего числа юзеров этой модели нет.
Re[5]: HTML WYSIWYG editing
От: wildwind Россия  
Дата: 12.03.10 14:19
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Вопрос как бы не в "моих" пользователях. blocknote например в top 300 freeware list. Качают всяко разные люди.IMHO


IMHO в этом случае стратегия "stick with major" (Word) выглядит разумно.
Re: HTML WYSIWYG editing
От: korzhik Россия  
Дата: 12.03.10 14:43
Оценка: 18 (1)
Здравствуйте, c-smile, Вы писали:

CS>В раздумьях над следующей проблемой

[...]

можно ещё сделать третий вариант — специальную кнопку, которая из нескольких строк списка сделает один параграф.
То есть по умолчанию по enter должен создаваться новый li (к этому уже все привыкли), а потом жмём эту кнопку и текст в этом новом li становится частью предыдущего li. Костыль конечно, но тоже вариант. Примерно что-то такое сделано в Buzzword (acrobat.com)

первый вариант с различными комбинациями клавиш считаю устаревшим.

я за второй вариант. Только тут конечно надо ручками щупать каждую конкретную реализацию этой идеи.
Re[6]: HTML WYSIWYG editing
От: c-smile Канада http://terrainformatica.com
Дата: 13.03.10 01:21
Оценка:
Здравствуйте, wildwind, Вы писали:

W>Здравствуйте, c-smile, Вы писали:


CS>>Вопрос как бы не в "моих" пользователях. blocknote например в top 300 freeware list. Качают всяко разные люди.IMHO


W>IMHO в этом случае стратегия "stick with major" (Word) выглядит разумно.


Ну во первых MS Word имеет DOM модель отличную от HTML. Это кстати одна из причин почему Word генерирует такой отвратный HTML. Его DOM ориентирован на WYSIWYG редактирвание paged документов и делает он это хорошо. Т.е. как бы решения допустимые в MS Word не работают в HTML.

Ну и во вторых Word он тоже не идеален. В качестве примера рекомендую сделать в нем bulleted list и пробжаться кареткой по этому списку.
В момент когда каретка находится в этой позиции:

<ul><li>one</li>|
    <li>two</li></ul>


Word показывает нечто что я не могу определить для чего оно такое.
Re[4]: HTML WYSIWYG editing
От: c-smile Канада http://terrainformatica.com
Дата: 13.03.10 01:27
Оценка:
Здравствуйте, Centaur, Вы писали:

C>Если у юзера нет ментальной модели HTML DOM, из него в любом случае не получится семантически корректного HTML.


C>И, кстати, именно из-за WYSIWYG’а у всё большего числа юзеров этой модели нет.


Да как бы в большинстве случаев просить юзера иметь эту модель будет явный overkill. E-mail или blog article автор в 99% случаев не технарь.

Как-то надо повысить предсказуемость Enter. У меня например модель DOM наличествует в уме (и не одна) но я сам очень часто попадаю в ситуцию
когда не могу определить что произойдет по Enter в некоторых случаях. Пользую Thunderbird и Mail Live. У Thunderbird особенно все плохо.
Re[2]: HTML WYSIWYG editing
От: c-smile Канада http://terrainformatica.com
Дата: 13.03.10 01:38
Оценка:
Здравствуйте, korzhik, Вы писали:

K>Здравствуйте, c-smile, Вы писали:


CS>>В раздумьях над следующей проблемой

K>[...]

K>можно ещё сделать третий вариант — специальную кнопку, которая из нескольких строк списка сделает один параграф.

K>То есть по умолчанию по enter должен создаваться новый li (к этому уже все привыкли), а потом жмём эту кнопку и текст в этом новом li становится частью предыдущего li. Костыль конечно, но тоже вариант. Примерно что-то такое сделано в Buzzword (acrobat.com)

Тут конечно много вариантов. Склеивание li это одна из операций.
У меня есть вариант когда Ctrl+UP/DOWN перемещает текущий параграф по контейнерам

Например Ctrl+UP здесь:

<ul>
  <li>one</li>
  <li>|two</li>
</ul>


трансформирует это дело в

<ul>
  <li>one
  <p>|two</p></li>
</ul>


Но визуально это выглядит как будто у two пропадает bullet. Надо как-то толково сие визуализирвать...

K>первый вариант с различными комбинациями клавиш считаю устаревшим.

K>я за второй вариант. Только тут конечно надо ручками щупать каждую конкретную реализацию этой идеи.

Угу. С клавишами проблема в "discoverability".
Re[7]: HTML WYSIWYG editing
От: wildwind Россия  
Дата: 13.03.10 11:24
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Ну во первых MS Word имеет DOM модель отличную от HTML. Это кстати одна из причин почему Word генерирует такой отвратный HTML. Его DOM ориентирован на WYSIWYG редактирвание paged документов и делает он это хорошо. Т.е. как бы решения допустимые в MS Word не работают в HTML.


IMHO, что бы современный пользователь не редактировал (и где бы), в ментальной модели у него всегда будет "WYSIWYG редактирвание paged документа" :). И на любое действие он будет ожидать реакции "как в Ворде".

Можно либо ломать эту модель, либо поддержать. На первое сил не хватит, если ты не Microsoft/Apple/Google/etc.

Ну или компромиссный вариант — ввести специальный "geek mode" и в нем экспериментировать с другими моделями — авось приживется.
Re[5]: HTML WYSIWYG editing
От: Centaur Россия  
Дата: 13.03.10 21:40
Оценка:
Здравствуйте, c-smile, Вы писали:

C>>Если у юзера нет ментальной модели HTML DOM, из него в любом случае не получится семантически корректного HTML.

C>>И, кстати, именно из-за WYSIWYG’а у всё большего числа юзеров этой модели нет.

CS>Да как бы в большинстве случаев просить юзера иметь эту модель будет явный overkill. E-mail или blog article автор в 99% случаев не технарь.


А юзерам, не способным писать HTML, нужно давать какой-нибудь более простой язык разметки. BBCode, или там wiki-разметку.

Дай им WYSIWYG, и они не смогут отличить ситуации «элемент списка и в нём два абзаца» и «элемент списка с буллитом и после него элемент списка без буллита». И вместо «заголовок первого уровня» будут лепить «жирный Arial 16pt». Потому что, блин, в WYSIWYG’е они выглядят одинаково.

И я принципиально не вижу способа одновременно обеспечить WYSIWYG и семантическую корректность. Разве что полностью оторвать всё, что может эту корректность нарушить — запретить кнопочки Bold, Italic, прямой выбор гарнитуры и кегля, цвет и т.д., оставить только меню стилей и редактор CSS. Но 97% юзеров взвоют, что это фашизм.
Re: HTML WYSIWYG editing
От: goto Россия  
Дата: 14.03.10 09:37
Оценка: 18 (1)
Не исключено, что я не полностью понял идею, т.к. не могу сейчас посмотреть Ворд с его каретками.

Глянул BlockNote. Он прост, минимально достаточен. Скорее всего его используют поклонники простоты, ясности и при этом не профи в html. Большинство из пользователей вряд ли заинтересуют тонкости вставки, скорее удивят. Поэтому разные каретки, имхо, не нужны. Я бы оставил единственную стандартную. Ожидаемую реакцию на Enter — новый эл-т списка. А все дополнительные возможности — в контекстное меню с указанием там соовт. хоткея ctrl-Enter, shift-Enter. Если кому надо — сразу запомнят. И в главном меню пункт "Insert" тоже модифицировал бы в зав-ти от контекста. В общем, по принципу: лучшая рыба — это колбаса, а лучшая пиктограмма — это текст (+ хоткей).
Re: HTML WYSIWYG editing
От: sto Украина http://overstore.codeplex.com
Дата: 20.03.10 19:10
Оценка:
Здравствуйте, c-smile, Вы писали:


CS>В раздумьях над следующей проблемой:


Можно еще сделать так: Энтер — абзац, сразу еще раз Энтер — следующий пункт, третий раз — новый абзац уже вне списка.
There is no such thing as the perfect design.
Re[2]: HTML WYSIWYG editing
От: c-smile Канада http://terrainformatica.com
Дата: 21.03.10 06:43
Оценка:
Здравствуйте, sto, Вы писали:

sto>Здравствуйте, c-smile, Вы писали:



CS>>В раздумьях над следующей проблемой:


sto>Можно еще сделать так: Энтер — абзац, сразу еще раз Энтер — следующий пункт, третий раз — новый абзац уже вне списка.


В принципе как вариант — да, может работать если чел хорошо представляет что реально происходит.
Re[3]: HTML WYSIWYG editing
От: Кодт Россия  
Дата: 29.03.10 23:38
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Проблема в том что традиционно в HTML WYSIWYG editors есть еще Shift-Enter который вставляет <br>.

CS>Т.е. имеем полный зоопарк Enter, Ctrl-Enter и Shift-Enter. Что в общем-то не есть хорошо. У юзера должна быть ментальная модель HTML DOM в этом случае.

Зачем HTML DOM? Вполне обычная человеческая DOM.
Отвлечёмся от HTML. Запустим ворд.
Всё то же самое: иерархическая структура (список или таблица), можно вставить, на выбор
— разрыв строки в составе параграфа (а ещё бывают разрывы колонки и страницы %) )
— новый параграф
— новый элемент иерархии на текущем уровне
— на предыдущем уровне (обычно в ворде это делается двойным энтером)

Это напрягает только в первый раз. Потом привыкаешь.
Перекуём баги на фичи!
Re[7]: HTML WYSIWYG editing
От: Кодт Россия  
Дата: 29.03.10 23:45
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Ну во первых MS Word имеет DOM модель отличную от HTML. Это кстати одна из причин почему Word генерирует такой отвратный HTML. Его DOM ориентирован на WYSIWYG редактирвание paged документов и делает он это хорошо. Т.е. как бы решения допустимые в MS Word не работают в HTML.


Не поэтому.
Ворд пытается сгенерить HTML наиболее близко к вёрстке исходного документа.
Он же не знает, волнуют тебя отступы, шрифты и прочие красивости, или ты просто взял что-то по дефолту.
Вот и разводит помойку. Да ещё, кстати, он в эту помойку пихает служебную информацию, чтобы можно было восстановить .doc из .htm без потерь.
Перекуём баги на фичи!
Re: HTML WYSIWYG editing
От: Кодт Россия  
Дата: 29.03.10 23:56
Оценка: 6 (1)
Здравствуйте, c-smile, Вы писали:

Если цель редактора — ввод форматированного текста (а html — только транспорт для него), одна ситуация.
Если же цель — ввод именно html, другая.

Можно, например, подсвечивать рамки текущего span/div/item/list
Делать это прямо в тексте, или как-то рядом выводить "хлебные крошки".
* hello|
* world
body>ul>li>

если нажмём энтер, вставим разрыв абзаца (</p><p>) — заодно, для единообразия, неплохо бы мысленный <span> со словом hello завернуть в <p>

жмём вправо
* hello|
* world
body>ul

в хлебных крошках видно, что мы выскочили за пределы li и оказались на уровне ul.
Если нажмём энтер, вставим <li></li>

жмём ещё раз вправо
* hello
* |world
body>ul>li


Вдохновлялся воспоминаниями о Macromedia HomeSite.
Перекуём баги на фичи!
Re: HTML WYSIWYG editing
От: _FRED_ Черногория
Дата: 02.04.10 08:22
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Честно говоря я затрудняюсь в определении какой из вариантов лучше.

CS>Т.е. либо стандартная каретка, но магические сочетания кнопок, либо такие вот "magic carets".

Довольно много списков написал в ворде :о)) То, что Enter добавляет новый элемент списка, а Shift+Enter — создаёт новый параграф знает практически любой пользователь. Если бы какой-то редактор начал поступать по-другому, как минимум это сильно бы удивило, а как максимум привело бы к выкидыванию такого редактора. ИМХО, что-то новое здесь придумывать не нужно, а нужно сделать так, как уже все давно пользуются.

С другой стороны, если есть желание рискнуть и предоставить что-то новое, можно предложить и второй вариант, но, ИМХО, ничего хорошего из этого не получится.
Help will always be given at Hogwarts to those who ask for it.
Re[2]: HTML WYSIWYG editing
От: Centaur Россия  
Дата: 03.04.10 06:38
Оценка: +1
Здравствуйте, _FRED_, Вы писали:

_FR>Довольно много списков написал в ворде :о)) То, что Enter добавляет новый элемент списка, а Shift+Enter — создаёт новый параграф знает практически любой пользователь.


Shift+Enter не добавляет абзац, а только разрыв строки. В Word’е вообще нет понятия «абзац внутри элемента списка».
Re[2]: HTML WYSIWYG editing
От: Don Reba Канада https://stackoverflow.com/users/49329/don-reba
Дата: 03.04.10 09:05
Оценка:
Здравствуйте, _FRED_, Вы писали:

_FR>Довольно много списков написал в ворде :о)) То, что Enter добавляет новый элемент списка, а Shift+Enter — создаёт новый параграф знает практически любой пользователь.


Круто. Я не знал.
Ce n'est que pour vous dire ce que je vous dis.
Re[3]: HTML WYSIWYG editing
От: Other Sam Россия  
Дата: 03.04.10 10:03
Оценка:
On 04/03/2010 04:05 PM, Don Reba wrote:
> Круто. Я не знал.

Мне один бухгалтер показал как из ascii таблицы сделать таблицу для
вставки в иксель.
1. Копируем в блокноте табулятор в буфер обмена
2. Замена: два пробела подряд на таб (из буфера обмена)
3. Замена: таб и пробел подряд, на один таб.
4. Замена: два таба подряд на один таб (тыкнуть на "Заменить все"
несколько раз).
5. Копируем через буфер обмена из блокнота в иксель — все ячейки
правильные
Posted via RSDN NNTP Server 2.1 beta
Re[4]: HTML WYSIWYG editing
От: Don Reba Канада https://stackoverflow.com/users/49329/don-reba
Дата: 03.04.10 10:06
Оценка:
Здравствуйте, Other Sam, Вы писали:

OS>Мне один бухгалтер показал как из ascii таблицы сделать таблицу для

OS>вставки в иксель.
OS>1. Копируем в блокноте табулятор в буфер обмена
OS>2. Замена: два пробела подряд на таб (из буфера обмена)
OS>3. Замена: таб и пробел подряд, на один таб.
OS>4. Замена: два таба подряд на один таб (тыкнуть на "Заменить все"
OS>несколько раз).
OS>5. Копируем через буфер обмена из блокнота в иксель — все ячейки
OS>правильные

В Виме это делается намного быстрее. Я так ошибки компиляции в PivotTable смотрю.
Ce n'est que pour vous dire ce que je vous dis.
Re[5]: HTML WYSIWYG editing
От: Other Sam Россия  
Дата: 03.04.10 11:06
Оценка:
On 04/03/2010 05:06 PM, Don Reba wrote:
>
> В Виме это делается намного быстрее. Я так ошибки компиляции в
> PivotTable смотрю.

Ну я не рискну обучать бухгалтера пользоваться vim-ом. Я и сам в нем
всего 2-3 комманды помню .

В общем я узнал про этот метод, когда этот бухгалтер обратился ко мне с
просьбой ускорить этот процесс. Виндовый блокнот с этой процедурой
справляется только с небольшими данными — порядка одной страницы. А если
2-3 или больше страниц — он дохнет.

В общем я сделал VBS скриптик, который то же самое делает, только прямо
в буфере обмена и не используя блокнот — бухгалтер счастлив.
Он копирует ascii таблицу любого размера и из любого источника в буфер
обмена, тыкает на "Подготовить буфер для вставки в Excel.vbs" появляется
MessageBox — типа все ок, и можно буфер вставлять в иксель .
Posted via RSDN NNTP Server 2.1 beta
Re: HTML WYSIWYG editing
От: Кодёнок  
Дата: 06.04.10 07:51
Оценка:
Здравствуйте, c-smile, Вы писали:

CS><ul>

CS> <li>one|</li>
CS> <li>two</li>
CS></ul>

Enter — ввод следующего элемента. В данном случае — <LI>.
Shift-Enter — всегда <BR>.
Ctrl-Enter — перейти в режим ввода параграфов (вставить <P>, и следующие Enter вставляют <P>, как будто редактирует обычный текст, или ячейка таблицы)
Alt-Enter — прервать ввод параграфов, т.е. вставить <LI>.

  <li>one|</li>                             * one

<<Enter>>two
  <li>one</li>                              * one
  <li>two|</li>                             * two|

<<Shift-Enter>>two
  <li>one</li>                              * one
  <li>two<br>two|</li>                      * two
                                              two|

<<Ctrl-Enter>>whoop
  <li>one</li>                              * one
  <li>                                      * two
    <p>two<br>two</p>                         two
    <p>whoop|</p>                             whoop|
  </li>

<<Enter>>wheep
  <li>one</li>                              * one
  <li>                                      * two
    <p>two<br>two</p>                         two
    <p>whoop</p>                              whoop
    <p>wheep|</p>                             wheep|
  </li>

начать новый список
  <li>one</li>                              * one
  <li>                                      * two
    <p>two<br>two</p>                         two
    <p>whoop</p>                              whoop
    <ul>                                      * wheep|
       <li>wheep|</li>
    </ul>
  </li>

<<Enter>>way
  <li>one</li>                              * one
  <li>                                      * two
    <p>two<br>two</p>                         two
    <p>whoop</p>                              whoop
    <ul>                                      * wheep
       <li>wheep</li>                         * way|
       <li>way|</li>
    </ul>
  </li>

<<Ctrl-Enter>>woy
  <li>one</li>                              * one
  <li>                                      * two
    <p>two<br>two</p>                         two
    <p>whoop</p>                              whoop
    <ul>                                      * wheep
       <li>wheep</li>                         * way
       <li>                                     woy|
          <p>way</p>
          <p>woy|</p>
       </li>
    </ul>
  </li>

<<Alt-Enter>>teep
  <li>one</li>                              * one
  <li>                                      * two
    <p>two<br>two</p>                         two
    <p>whoop</p>                              whoop
    <ul>                                      * wheep
       <li>wheep</li>                         * way
       <li>                                     woy
          <p>way</p>                          * teep|
          <p>woy</p>
       </li>
       <li>teep|</li>
    </ul>
  </li>

<<Enter>>
  <li>one</li>                              * one
  <li>                                      * two
    <p>two<br>two</p>                         two
    <p>whoop</p>                              whoop
    <ul>                                      * wheep
       <li>wheep</li>                         * way
       <li>                                     woy
          <p>way</p>                          * teep
          <p>woy</p>                          * |
       </li>
       <li>teep</li>
       <li>|</li>
    </ul>
  </li>

<<Enter>>shnimp
  <li>one</li>                              * one
  <li>                                      * two
    <p>two<br>two</p>                         two
    <p>whoop</p>                              whoop
    <ul>                                      * wheep
       <li>wheep</li>                         * way
       <li>                                     woy
          <p>way</p>                          * teep
          <p>woy</p>                          shnimp
       </li>
       <li>teep</li>
    </ul>
    <p>shnimp|</p>
  </li>

<<Alt-Enter>>three
  <li>one</li>                              * one
  <li>                                      * two
    <p>two<br>two</p>                         two
    <p>whoop</p>                              whoop
    <ul>                                      * wheep
       <li>wheep</li>                         * way
       <li>                                     woy
          <p>way</p>                          * teep
          <p>woy</p>                          shnimp
       </li>                                * three|
       <li>teep</li>
    </ul>
    <p>shnimp</p>
  </li>
  <li>three|</li>
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.