Skip to main content

Inline Tools

Inline tools decorate selected text inside paragraph-like blocks. Every inline tool the editor ships is documented here. They compose freely and all serialise as plain HTML inside the block html data.

Inline tools update the block's `html` data field. They do not add separate blocks. All formatting stays as plain HTML.

Open the inline toolbar by selecting any text inside a paragraph, header, list item, quote, or alert block.

bold: Cmd/Ctrl + B

Bold emphasis.

HTML
<strong>text</strong>

inline-code: Cmd/Ctrl + `

Inline code span in a monospace font.

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

italic: Cmd/Ctrl + I

Italic emphasis.

HTML
<em>text</em>

Link a span of text to a URL.

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

marker: Cmd/Ctrl + Shift + M

Highlight a span with a marker background.

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

status

Turns the selected text into a status badge. A dialog asks for the text and the variant: info, success, warning, error, or plain.

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

strikethrough: Cmd/Ctrl + Shift + X

Strikethrough.

HTML
<s>text</s>

tooltip: Cmd/Ctrl + Shift + T

Attach a hover tooltip to a span.

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

underline: Cmd/Ctrl + U

Underline.

HTML
<u>text</u>

Mentions and doc links are not toolbar buttons; the host inserts them at the caret with insertMentionAtCaret and insertDocLinkAtCaret. Both draw as non-editable chips and carry their identity in data attributes.

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

A pasted Linear, Jira, GitHub or Asana link becomes a chip carrying the key, title, status and assignee. The chip keeps the last known state in data-issue-* attributes; when the host supplies EditorConfig.resolveIssues it refreshes on open, on focus and every five 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>