Passer au contenu principal

Outils en ligne

Les outils en ligne décorent le texte sélectionné dans les blocs de type paragraphe. Chaque outil en ligne livré avec l'éditeur est documenté ici. Ils se composent librement et se sérialisent tous en HTML brut dans les données html du bloc.

Les outils en ligne mettent à jour le champ de données `html` du bloc. Ils n'ajoutent pas de blocs séparés. Toute la mise en forme reste en HTML simple.

Ouvrez la barre d’outils en ligne en sélectionnant n’importe quel texte dans un paragraphe, un titre, un élément de liste, une citation ou un bloc alert.

bold: Cmd/Ctrl + B

Emphase en gras.

HTML
<strong>text</strong>

inline-code: Cmd/Ctrl + `

Portion de code en ligne dans une police à chasse fixe (monospace).

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

italic: Cmd/Ctrl + I

Emphase en italique.

HTML
<em>text</em>

Liez une portion de texte à une URL.

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

marker: Cmd/Ctrl + Shift + M

Surlignez une portion de texte avec un fond de marqueur.

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

status

Transforme le texte sélectionné en badge d'état. Une boîte de dialogue demande le texte et la variante : info, success, warning, error ou plain.

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

strikethrough: Cmd/Ctrl + Shift + X

Texte barré.

HTML
<s>text</s>

tooltip: Cmd/Ctrl + Shift + T

Attachez une infobulle au survol à une portion de texte.

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

underline: Cmd/Ctrl + U

Soulignement.

HTML
<u>text</u>

Mentions et liens de documents

Les mentions et liens de documents ne sont pas des boutons de barre d'outils ; l'hôte les insère au curseur avec insertMentionAtCaret et insertDocLinkAtCaret. Les deux se dessinent comme des puces non modifiables et portent leur identité dans des attributs 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>

Puces de tickets

Un lien Linear, Jira, GitHub ou Asana collé devient une puce portant la clé, le titre, le statut et le responsable. La puce garde le dernier état connu dans des attributs data-issue-* ; lorsque l’hôte fournit EditorConfig.resolveIssues, elle se rafraîchit à l’ouverture, au focus et toutes les cinq minutes.

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>