Edit Inline Toolbar

Name

Also known as (comma separated)

Brief definition Formatting controls appearing beside selected text.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "selectedText", "type": "text", "label": "Selected text", "default": "Ship the pricing update by Friday." }, { "id": "placement", "type": "select", "label": "Toolbar placement", "default": "above", "options": [ "above", "below" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "radius", "type": "number", "label": "Toolbar corner radius", "default": 10, "min": 0, "max": 20, "step": 1 }, { "id": "boldActive", "type": "toggle", "label": "Bold active", "default": true }, { "id": "italicActive", "type": "toggle", "label": "Italic active", "default": false } ]

Templates (JSON object keyed by format) { "html": "<div class=\"itb\" style=\"--accent:{{accent}};\">\n <p class=\"itb__text\">Draft note: <mark class=\"itb__mark\">{{selectedText}}</mark></p>\n <div class=\"itb__toolbar itb__toolbar--{{placement}}\" data-placement=\"{{placement}}\" role=\"toolbar\" aria-label=\"Text formatting\" style=\"border-radius:{{radius}}px;\">\n <button type=\"button\" class=\"itb__btn\" aria-pressed=\"{{boldActive}}\" aria-label=\"Bold\"><strong>B</strong></button>\n <button type=\"button\" class=\"itb__btn\" aria-pressed=\"{{italicActive}}\" aria-label=\"Italic\"><span class=\"itb__i\">I</span></button>\n <button type=\"button\" class=\"itb__btn\" aria-label=\"Insert link\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 0 0-7.07-7.07L11.5 4.5\"></path><path d=\"M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 0 0 7.07 7.07L12.5 19.5\"></path></svg>\n </button>\n </div>\n</div>\n<style>\n.itb { font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: #241430; background: #FAF7F2; padding: 28px 20px; display: flex; flex-direction: column; align-items: flex-start; }\n.itb__text { margin: 0; max-width: 360px; }\n.itb__mark { background: color-mix(in srgb, var(--accent) 40%, transparent); padding: 1px 2px; border-radius: 3px; }\n.itb__toolbar { display: inline-flex; gap: 4px; background: #241430; padding: 6px; order: 2; margin-top: 10px; }\n.itb__toolbar--above { order: -1; margin-top: 0; margin-bottom: 10px; }\n.itb__btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: #FAF7F2; border-radius: 6px; cursor: pointer; }\n.itb__i { font-style: italic; font-size: 14px; }\n.itb__btn[aria-pressed=\"true\"] { background: var(--accent); color: #241430; }\n.itb__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n</style>", "tailwind": "<div class=\"flex flex-col items-start bg-[#FAF7F2] text-[#241430] font-sans px-5 py-7\" style=\"--accent:{{accent}};\">\n <p class=\"m-0 max-w-[360px]\">Draft note: <mark class=\"itb-tw__mark px-0.5 rounded-[3px]\" style=\"background:color-mix(in srgb, {{accent}} 40%, transparent)\">{{selectedText}}</mark></p>\n <div class=\"itb-tw itb-tw--{{placement}} inline-flex gap-1 bg-[#241430] p-1.5\" data-placement=\"{{placement}}\" role=\"toolbar\" aria-label=\"Text formatting\" style=\"border-radius:{{radius}}px;\">\n <button type=\"button\" class=\"itb-tw__btn w-7 h-7 inline-flex items-center justify-center rounded-md text-[#FAF7F2] bg-transparent border-0 cursor-pointer\" aria-pressed=\"{{boldActive}}\" aria-label=\"Bold\"><strong>B</strong></button>\n <button type=\"button\" class=\"itb-tw__btn w-7 h-7 inline-flex items-center justify-center rounded-md text-[#FAF7F2] bg-transparent border-0 cursor-pointer italic text-sm\" aria-pressed=\"{{italicActive}}\" aria-label=\"Italic\">I</button>\n <button type=\"button\" class=\"itb-tw__btn w-7 h-7 inline-flex items-center justify-center rounded-md text-[#FAF7F2] bg-transparent border-0 cursor-pointer\" aria-label=\"Insert link\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 0 0-7.07-7.07L11.5 4.5\"></path><path d=\"M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 0 0 7.07 7.07L12.5 19.5\"></path></svg>\n </button>\n </div>\n</div>\n<style>\n.itb-tw--below { order: 2; margin-top: 10px; }\n.itb-tw--above { order: -1; margin-bottom: 10px; }\n.itb-tw__btn[aria-pressed=\"true\"] { background: {{accent}}; color: #241430; }\n.itb-tw__btn:focus-visible { outline: 2px solid {{accent}}; outline-offset: 2px; }\n</style>", "react": "export function InlineToolbar({\n selectedText = \"{{selectedText}}\",\n placement = \"{{placement}}\",\n accent = \"{{accent}}\",\n radius = {{radius}},\n boldActive = {{boldActive}},\n italicActive = {{italicActive}},\n}) {\n const order = { above: -1, below: 2 }[placement] ?? 2;\n return (\n <div style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"flex-start\", fontFamily: \"system-ui, sans-serif\", fontSize: 16, lineHeight: 1.6, color: \"#241430\", background: \"#FAF7F2\", padding: \"28px 20px\" }}>\n <p style={{ margin: 0, maxWidth: 360 }}>\n Draft note: <mark style={{ background: accent + \"66\", padding: \"1px 2px\", borderRadius: 3 }}>{selectedText}</mark>\n </p>\n <div role=\"toolbar\" aria-label=\"Text formatting\" data-placement={placement} style={{\n display: \"inline-flex\", gap: 4, background: \"#241430\", padding: 6, borderRadius: radius, order,\n marginTop: placement === \"above\" ? 0 : 10, marginBottom: placement === \"above\" ? 10 : 0,\n }}>\n <button type=\"button\" aria-pressed={boldActive} aria-label=\"Bold\" style={{\n width: 28, height: 28, border: \"none\", borderRadius: 6, cursor: \"pointer\", fontWeight: 700,\n background: boldActive ? accent : \"transparent\", color: boldActive ? \"#241430\" : \"#FAF7F2\",\n }}>B</button>\n <button type=\"button\" aria-pressed={italicActive} aria-label=\"Italic\" style={{\n width: 28, height: 28, border: \"none\", borderRadius: 6, cursor: \"pointer\", fontStyle: \"italic\", fontSize: 14,\n background: italicActive ? accent : \"transparent\", color: italicActive ? \"#241430\" : \"#FAF7F2\",\n }}>I</button>\n </div>\n </div>\n );\n}" }