Saltar al contenido principal

Herramientas en línea

Las herramientas en línea decoran el texto seleccionado dentro de bloques tipo párrafo. Cada herramienta en línea que trae el editor está documentada aquí. Se componen libremente y todas se serializan como HTML plano dentro de los datos html del bloque.

Las herramientas en línea actualizan el campo de datos `html` del bloque. No agregan bloques separados. Todo el formato permanece como HTML simple.

Abre la barra de herramientas en línea seleccionando cualquier texto dentro de un párrafo, encabezado, elemento de lista, cita o bloque alert.

bold: Cmd/Ctrl + B

Énfasis en negrita.

HTML
<strong>text</strong>

inline-code: Cmd/Ctrl + `

Fragmento de código en línea en una fuente monoespaciada.

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

italic: Cmd/Ctrl + I

Énfasis en cursiva.

HTML
<em>text</em>

Enlaza un fragmento de texto a una URL.

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

marker: Cmd/Ctrl + Shift + M

Resalta un fragmento con un fondo de marcador.

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

status

Convierte el texto seleccionado en una insignia de estado. Un diálogo pide el texto y la variante: info, success, warning, error o 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

Adjunta una información sobre herramientas al pasar el ratón sobre un fragmento.

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

underline: Cmd/Ctrl + U

Subrayado.

HTML
<u>text</u>

Menciones y enlaces de documentos

Las menciones y los enlaces de documentos no son botones de la barra; el host los inserta en el cursor con insertMentionAtCaret e insertDocLinkAtCaret. Ambos se dibujan como chips no editables y llevan su identidad en 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>

Fichas de incidencias

Un enlace de Linear, Jira, GitHub o Asana pegado se convierte en una ficha con la clave, el título, el estado y el responsable. La ficha conserva el último estado conocido en atributos data-issue-*; cuando el anfitrión proporciona EditorConfig.resolveIssues, se actualiza al abrir, al enfocar y 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>