Zum Hauptinhalt springen

Inline-Tools

Inline-Tools dekorieren ausgewählten Text in absatzartigen Blöcken. Jedes Inline-Tool, das der Editor mitbringt, ist hier dokumentiert. Sie lassen sich frei kombinieren und werden alle als reines HTML in den html-Daten des Blocks serialisiert.

Inline-Tools aktualisieren das `html`-Datenfeld des Blocks. Sie fügen keine separaten Blöcke hinzu. Die gesamte Formatierung bleibt als einfaches HTML erhalten.

Öffnen Sie die Inline-Symbolleiste, indem Sie beliebigen Text in einem Absatz, einer Überschrift, einem Listenelement, einem Zitat oder einem alert-Block auswählen.

bold: Cmd/Ctrl + B

Fette Hervorhebung.

HTML
<strong>text</strong>

inline-code: Cmd/Ctrl + `

Inline-Code-Span in einer Monospace-Schrift.

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

italic: Cmd/Ctrl + I

Kursive Hervorhebung.

HTML
<em>text</em>

Verlinken Sie einen Textabschnitt mit einer URL.

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

marker: Cmd/Ctrl + Shift + M

Heben Sie einen Span mit einem Marker-Hintergrund hervor.

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

status

Verwandelt den ausgewählten Text in ein Status-Badge. Ein Dialog fragt Text und Variante ab: info, success, warning, error oder plain.

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

strikethrough: Cmd/Ctrl + Shift + X

Durchstreichung.

HTML
<s>text</s>

tooltip: Cmd/Ctrl + Shift + T

Fügen Sie einem Span einen Hover-Tooltip hinzu.

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

underline: Cmd/Ctrl + U

Unterstreichung.

HTML
<u>text</u>

Erwähnungen und Dokumentlinks sind keine Toolbar-Buttons; der Host fügt sie mit insertMentionAtCaret und insertDocLinkAtCaret an der Einfügemarke ein. Beide werden als nicht editierbare Chips gezeichnet und tragen ihre Identität in data-Attributen.

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>

Issue-Chips

Ein eingefügter Linear-, Jira-, GitHub- oder Asana-Link wird zu einem Chip mit Schlüssel, Titel, Status und Zuständigem. Der Chip behält den letzten bekannten Stand in data-issue-*-Attributen; liefert der Host EditorConfig.resolveIssues, aktualisiert er sich beim Öffnen, beim Fokus und alle fünf Minuten.

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>