Cursor de lacuna

Permite que o usuário adicione um parágrafo onde o cursor normalmente não consegue chegar: antes de uma tabela bem no início de um documento, ou entre duas tabelas, linhas horizontais ou outros blocos encostados um no outro. Uma tecla de seta, um clique na lacuna ou um clique em uma linha azul de indicação cria o parágrafo.

Duas tabelas uma depois da outra no editor, com uma linha azul e um ponto desenhados na lacuna entre elas, sob o ponteiro do mouse — Passar o mouse sobre o limite entre duas tabelas mostra a linha de indicação. Clicar nela insere ali um parágrafo vazio.

As mesmas duas tabelas com um novo parágrafo entre elas, com o texto Prices exclude tax. — Depois do clique: um parágrafo entre as tabelas, com o texto digitado nele.

Ative o recurso

O recurso é o plugin gapcursor.js (também incluído em plugins/all_plugins.js). Basta carregá-lo; não há botão na barra de ferramentas.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/gapcursor.js"></script>

<div id="editor"><table style="width:100%"><tbody><tr><td>Plan</td><td>Price</td></tr><tr><td>Starter</td><td>$129</td></tr></tbody></table><table style="width:100%"><tbody><tr><td>Region</td><td>Tax</td></tr><tr><td>EU</td><td>20%</td></tr></tbody></table></div>
<script>
var editor = new RichTextEditor("#editor");
</script>

Sem o plugin, neste documento, ArrowUp a partir da primeira célula deixa o cursor na célula, e ArrowRight a partir do fim da primeira tabela coloca o texto digitado solto entre as tabelas, fora de qualquer parágrafo.

Quais lacunas contam

Uma lacuna só é oferecida onde o autor fica sem saída: antes do primeiro bloco, entre dois blocos ou depois do último bloco, quando o bloco vizinho é um de table, hr, img, figure, iframe, video, audio, object, embed, canvas, svg ou pre, e ainda não há um parágrafo ali. Só os blocos diretamente no body do documento são verificados. O próprio editor já mantém um parágrafo vazio depois de uma tabela no fim do documento; por isso, na prática, as lacunas ficam no início e entre blocos.

Como usar

Teclado. ArrowDown, ArrowRight, End ou PageDown no fim de um bloco desses, ou ArrowUp, ArrowLeft, Home ou PageUp no início dele, insere um parágrafo desse lado. Em uma tabela, "o fim" é a última linha para ArrowDown e a última célula para ArrowRight; dentro da tabela, as teclas se movem normalmente. Teclas com Shift, Ctrl, Alt ou Cmd não são alteradas, então a seleção e a movimentação de blocos com Alt+seta não são afetadas.
Clique. Um clique em um espaço vazio do editor que caia em uma lacuna insere o parágrafo ali.
Indicação. Duas tabelas podem se tocar sem nenhum pixel entre elas. Mover o ponteiro a até 10 pixels de um limite desses mostra uma linha azul, e pressionar o mouse sobre ela insere o parágrafo.

O novo parágrafo é <p><br></p>, então ele tem altura e o cursor fica visível nele.

Opções e API

Opção	Padrão	O que faz
`gapCursorKeys`	`true`	As teclas de seta, Home, End e Page na borda de um bloco inserem um parágrafo.
`gapCursorClick`	`true`	Um clique em uma lacuna insere um parágrafo.
`gapCursorHint`	`true`	Mostra a linha azul de indicação quando o ponteiro está perto de uma lacuna.

editor.getGapPositions() retorna os índices de filhos onde um parágrafo pode ser inserido, por exemplo [0, 1] para o documento acima.
editor.insertParagraphAt(index) insere um parágrafo vazio antes do filho do body nesse índice e coloca o cursor nele.
editor.insertParagraphBefore(element) e editor.insertParagraphAfter(element) fazem o mesmo ao lado de um elemento indicado.

O que você precisa saber

Nada é adicionado até o usuário pedir; por isso, um documento que começa com uma tabela é salvo sem alterações.
A linha de indicação é um elemento real na área de edição enquanto está visível: <div class="rte-gap-hint" contenteditable="false" aria-hidden="true"></div>. Ela é removida quando o ponteiro se move para outro lugar do editor, mas na 2.6.12 ela permanece se o ponteiro sair do editor diretamente de uma lacuna, por exemplo da lacuna acima de uma tabela inicial até a barra de ferramentas, e getHTMLCode() então a inclui. Se você salva a partir de um botão da barra de ferramentas, defina gapCursorHint: false, ou remova div.rte-gap-hint no servidor.
No modo de sugestão (controle de alterações), o plugin não insere nada, porque um parágrafo vazio ainda não pode ser controlado.

Relacionados: demonstração de suporte a tabelas, ordenação de tabelas e números de linha.