Ir para o conteúdo principal

Ferramentas inline

As ferramentas inline decoram o texto selecionado dentro de blocos parecidos com parágrafos. Toda ferramenta inline que o editor traz está documentada aqui. Elas se compõem livremente e todas serializam como HTML puro dentro dos dados html do bloco.

As ferramentas inline atualizam o campo de dados `html` do bloco. Não adicionam blocos separados. Toda a formatação permanece como HTML simples.

Abra a barra de ferramentas inline selecionando qualquer texto dentro de um parágrafo, cabeçalho, item de lista, citação ou bloco alert.

bold: Cmd/Ctrl + B

Ênfase em negrito.

HTML
<strong>text</strong>

inline-code: Cmd/Ctrl + `

Trecho de código inline em uma fonte monoespaçada.

HTML
<code class="clepit-inline-code">text</code>

italic: Cmd/Ctrl + I

Ênfase em itálico.

HTML
<em>text</em>

Vincule um trecho de texto a uma URL.

HTML
<a class="clepit-link" href="https://example.com" target="_blank" rel="noopener noreferrer">text</a>

marker: Cmd/Ctrl + Shift + M

Realce um trecho com um fundo de marcador.

HTML
<span class="clepit-marker-wrapper"><span class="clepit-marker-stroke"></span> text </span>

status

Transforma o texto selecionado em um selo de status. Um diálogo pergunta o texto e a variante: info, success, warning, error ou plain.

HTML
<span class="clepit-status clepit-status--info">text</span>

strikethrough: Cmd/Ctrl + Shift + X

Tachado.

HTML
<s>text</s>

tooltip: Cmd/Ctrl + Shift + T

Anexe uma dica de ferramenta ao passar o mouse em um trecho.

HTML
<span class="clepit-tooltip" data-tooltip="hint text">text</span>

underline: Cmd/Ctrl + U

Sublinhado.

HTML
<u>text</u>

Menções e links de documentos não são botões da barra de ferramentas; o host os insere no cursor com insertMentionAtCaret e insertDocLinkAtCaret. Ambos são desenhados como chips não editáveis e carregam sua identidade em atributos data.

HTML
<span class="clepit-mention" data-user-id="u-42" contenteditable="false">@ada</span>
<a class="clepit-doc-link" data-page-id="p-7" contenteditable="false">Release notes</a>

Etiquetas de issues

Um link Linear, Jira, GitHub ou Asana colado torna-se uma etiqueta com a chave, o título, o estado e o responsável. A etiqueta guarda o último estado conhecido em atributos data-issue-*; quando o anfitrião fornece EditorConfig.resolveIssues, atualiza-se ao abrir, ao focar e a cada cinco minutos.

HTML
<a class="clepit-issue" href="https://linear.app/acme/issue/ENG-142" contenteditable="false" data-issue-tool="linear" data-issue-key="ENG-142" data-issue-title="Fix the thing" data-issue-state="In Progress" data-issue-category="started" data-issue-assignee="Amina Diallo" data-issue-url="https://linear.app/acme/issue/ENG-142">ENG-142</a>