cm-md-editor 2.4.0 → 3.0.1

package/.claude/settings.local.json

@@ -0,0 +1,13 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(//private/tmp/**)",
+      "Bash(npm pack:*)",
+      "Bash(for f:*)",
+      "Bash(do echo:*)",
+      "Read(//Users/shaack/Development/repositories/MyProjects/cm-md-editor/**)",
+      "Bash(done)",
+      "Bash(npm whoami:*)"
+    ]
+  }
+}

package/README.md

@@ -9,11 +9,11 @@ A minimal, dependency-free markdown editor as a vanilla JavaScript ES6 module.
 ## Key features
 
 - Vanilla JavaScript module, zero dependencies
-- Syntax highlighting for headings, bold, italic, code, lists, links, images, blockquotes, HTML tags, horizontal rules, front matter and more
-- Toolbar with configurable buttons (headings, bold, italic, lists, links, images)
+- Syntax highlighting for headings, bold, italic, strikethrough, code, lists, links, images, blockquotes, HTML tags, horizontal rules, front matter and more
+- Modular toolbar built from composable tools
 - Word wrap toggle with persistent state (localStorage)
 - List mode: Tab/Shift-Tab to indent/outdent, auto-continuation on Enter
-- Bold with Ctrl/Cmd+B, italic with Ctrl/Cmd+I
+- Bold with Ctrl/Cmd+B, italic with Ctrl/Cmd+I (provided by tools)
 - Native undo/redo support (Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z)
 - Lightweight, fast, easy to use
 
@@ -35,12 +35,32 @@ npm install cm-md-editor
 </script>
 ```
 
-With custom configuration:
+This creates an editor with the default toolbar: Headings (h1–h3), Bold, Italic, Strikethrough, Unordered List, Ordered List, Insert Link, Insert Image.
+
+### Custom toolbar
+
+Compose your own toolbar by passing a `tools` array:
+
+```javascript
+import {MdEditor} from "cm-md-editor/src/MdEditor.js"
+import {Headings} from "cm-md-editor/src/tools/Headings.js"
+import {Bold} from "cm-md-editor/src/tools/Bold.js"
+import {Italic} from "cm-md-editor/src/tools/Italic.js"
+import {Separator} from "cm-md-editor/src/tools/Separator.js"
+import {InsertLink} from "cm-md-editor/src/tools/InsertLink.js"
+
+new MdEditor(document.getElementById("editor"), {
+    tools: [Headings, Separator, Bold, Italic, Separator, InsertLink]
+})
+```
+
+### Configuring tools
+
+Tools that accept options can be passed as `[ToolClass, props]` tuples:
 
 ```javascript
-const editor = new MdEditor(document.getElementById("editor"), {
-    wordWrap: false,
-    toolbarButtons: ["h1", "h2", "bold", "italic", "ul", "link"]
+new MdEditor(document.getElementById("editor"), {
+    tools: [[Headings, {minLevel: 2, maxLevel: 4}], Bold, Italic]
 })
 ```
 
@@ -50,8 +70,8 @@ All props are optional. Pass them as the second argument to the constructor.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `tools` | `array` | `defaultTools` | Array of tool classes (or `[class, props]` tuples). See [Tools](#tools) |
 | `wordWrap` | `boolean` | `true` | Default word wrap state. Overridden by localStorage if the user has toggled it |
-| `toolbarButtons` | `string[]` | `["h1", "h2", "h3", "bold", "italic", "ul", "ol", "link", "image"]` | Which toolbar buttons to show. Available: `h1`, `h2`, `h3`, `bold`, `italic`, `ul`, `ol`, `link`, `image` |
 | `colorHeading` | `string` | `"100,160,255"` | RGB color for headings |
 | `colorCode` | `string` | `"130,170,200"` | RGB color for code spans and fenced code blocks |
 | `colorComment` | `string` | `"128,128,128"` | RGB color for HTML comments |
@@ -68,15 +88,126 @@ All props are optional. Pass them as the second argument to the constructor.
 
 Colors are specified as RGB strings (e.g. `"255,180,80"`) and rendered at full opacity.
 
+## Tools
+
+The toolbar is built entirely from tools. Each tool is a class that provides toolbar buttons, keyboard shortcuts, and/or syntax highlighting extensions.
+
+### Built-in tools
+
+| Tool | Buttons | Shortcut | Description |
+|------|---------|----------|-------------|
+| `Headings` | h1, h2, h3 | — | Toggle heading levels. Props: `{minLevel, maxLevel}` (defaults: 1–3) |
+| `Bold` | bold | Ctrl/Cmd+B | Toggle bold (`**`) |
+| `Italic` | italic | Ctrl/Cmd+I | Toggle italic (`_`) |
+| `Strikethrough` | strikethrough | — | Toggle strikethrough (`~~`) |
+| `UnorderedList` | ul | — | Toggle unordered list prefix (`- `) |
+| `OrderedList` | ol | — | Toggle ordered list prefix (`1. `) |
+| `InsertLink` | link | — | Insert markdown link |
+| `InsertImage` | image | — | Insert markdown image |
+| `Separator` | — | — | Visual divider in the toolbar. Can be used multiple times |
+
+All built-in tools are exported from `src/tools/DefaultTools.js`:
+
+```javascript
+import {defaultTools} from "cm-md-editor/src/tools/DefaultTools.js"
+```
+
+The default toolbar order is:
+
+```
+Headings | Bold, Italic, Strikethrough | UnorderedList, OrderedList | InsertLink, InsertImage
+```
+
+### Writing a custom tool
+
+A tool is a class that receives the editor instance (and optional props) in its constructor. It can implement any combination of three optional methods:
+
+```javascript
+export class MyTool {
+    constructor(editor, props = {}) {
+        this.editor = editor
+    }
+
+    // Optional: add buttons to the toolbar
+    toolbarButtons() {
+        return [{
+            name: 'mytool',
+            title: 'My Tool',
+            // Icon options (use one):
+            icon: '<path d="..."/>',       // inline SVG path for a 16x16 viewBox
+            iconFile: 'my-icon.svg',       // filename in src/tools/icons/
+            iconUrl: 'https://...',        // full URL to an SVG file
+            action: () => { /* ... */ }
+        }]
+    }
+
+    // Optional: register keyboard shortcuts
+    keyboardShortcuts() {
+        return [{
+            key: 'e',            // the key to match (KeyboardEvent.key)
+            ctrlOrMeta: true,    // require Ctrl (Windows/Linux) or Cmd (Mac)
+            action: (e) => { /* ... */ }
+        }]
+    }
+
+    // Optional: extend syntax highlighting (receives already-escaped HTML)
+    highlightInline(html) {
+        return html.replace(...)
+    }
+}
+```
+
+For tools with co-located icons, use `import.meta.url` to resolve the icon path:
+
+```javascript
+toolbarButtons() {
+    return [{
+        name: 'mytool',
+        title: 'My Tool',
+        iconUrl: new URL("my-icon.svg", import.meta.url).href,
+        action: () => { /* ... */ }
+    }]
+}
+```
+
+### Editor API available to tools
+
+These public methods and properties are available via `this.editor`:
+
+| Method / Property | Description |
+|-------------------|-------------|
+| `editor.element` | The textarea element (read `value`, `selectionStart`, `selectionEnd`) |
+| `editor.insertTextAtCursor(text)` | Insert text at cursor, preserving native undo/redo |
+| `editor.getCurrentLineInfo()` | Returns `{lineStart, lineEnd, line}` for the current line |
+| `editor.selectLineRange(start, end)` | Set the textarea selection range |
+| `editor.toggleWrap(marker)` | Toggle wrapping markers around the selection (e.g. `**` for bold) |
+| `editor.escapeHtml(str)` | Escape a string for use in the highlight layer |
+| `editor.colorSpan(colorProp, content)` | Wrap content in a colored `<span>` using an RGB color prop |
+
+### Example: DummyText tool
+
+A tool that inserts lorem ipsum text (see `example-addon-tools/DummyText.js`):
+
+```javascript
+import {MdEditor} from "cm-md-editor/src/MdEditor.js"
+import {defaultTools} from "cm-md-editor/src/tools/DefaultTools.js"
+import {Separator} from "cm-md-editor/src/tools/Separator.js"
+import {DummyText} from "./example-addon-tools/DummyText.js"
+
+new MdEditor(document.getElementById("editor"), {
+    tools: [...defaultTools, Separator, DummyText]
+})
+```
+
 ## Keyboard shortcuts
 
-| Shortcut | Action |
-|----------|--------|
-| Ctrl/Cmd + B | Toggle bold |
-| Ctrl/Cmd + I | Toggle italic |
-| Tab | Indent list item or insert tab |
-| Shift + Tab | Outdent list item |
-| Enter | Auto-continue list (unordered and ordered) |
+| Shortcut | Action | Provided by |
+|----------|--------|-------------|
+| Ctrl/Cmd + B | Toggle bold | `Bold` tool |
+| Ctrl/Cmd + I | Toggle italic | `Italic` tool |
+| Tab | Indent list item or insert tab | Core editor |
+| Shift + Tab | Outdent list item | Core editor |
+| Enter | Auto-continue list (unordered and ordered) | Core editor |
 
 ## License
 

package/example-addon-tools/DummyText.js

@@ -0,0 +1,42 @@
+const WORDS = [
+    "lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit",
+    "sed", "do", "eiusmod", "tempor", "incididunt", "ut", "labore", "et", "dolore",
+    "magna", "aliqua", "enim", "ad", "minim", "veniam", "quis", "nostrud",
+    "exercitation", "ullamco", "laboris", "nisi", "aliquip", "ex", "ea", "commodo",
+    "consequat", "duis", "aute", "irure", "in", "reprehenderit", "voluptate",
+    "velit", "esse", "cillum", "fugiat", "nulla", "pariatur", "excepteur", "sint",
+    "occaecat", "cupidatat", "non", "proident", "sunt", "culpa", "qui", "officia",
+    "deserunt", "mollit", "anim", "id", "est", "laborum"
+]
+
+function generateDummyText(wordCount) {
+    const result = []
+    for (let i = 0; i < wordCount; i++) {
+        result.push(WORDS[i % WORDS.length])
+    }
+    result[0] = result[0].charAt(0).toUpperCase() + result[0].slice(1)
+    return result.join(" ") + "."
+}
+
+export class DummyText {
+    constructor(editor) {
+        this.editor = editor
+    }
+
+    toolbarButtons() {
+        const iconUrl = new URL("bi-body-text.svg", import.meta.url).href
+        return [{
+            name: "dummy-text",
+            title: "Insert dummy text",
+            iconUrl: iconUrl,
+            action: () => this.insertDummyText()
+        }]
+    }
+
+    insertDummyText() {
+        const input = prompt("Word count (1\u2013100):", "20")
+        if (input === null) return
+        const count = Math.max(1, Math.min(100, parseInt(input) || 20))
+        this.editor.insertTextAtCursor(generateDummyText(count))
+    }
+}

package/example-addon-tools/bi-body-text.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-body-text" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M0 .5A.5.5 0 0 1 .5 0h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 0 .5m0 2A.5.5 0 0 1 .5 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m9 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m-9 2A.5.5 0 0 1 .5 4h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m5 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m7 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-12 2A.5.5 0 0 1 .5 6h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m8 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m-8 2A.5.5 0 0 1 .5 8h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m7 0a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-7 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
+</svg>

package/index.html

@@ -1,28 +1,13 @@
 <!doctype html>
-<html lang="en" data-bs-theme="dark">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>cm-md-editor</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
-          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-    <style>
-        body {
-            padding: 1rem; margin-top: 0rem;
-        }
-        #editor {
-            width: 100%;
-            height: calc(100vh - 5rem);
-            padding: 0.7rem;
-            font-family: monospace;
-            tab-size: 4;
-            line-height: 1.3;
-            background-color: #111;
-        }
-    </style>
+    <link rel="stylesheet" href="src/cm-md-editor.css">
 </head>
 <body>
-<div class="container-fluid">
+<div>
     <label for="editor" style="display: none">cm-md-editor</label>
     <textarea id="editor">
 ---
@@ -88,13 +73,15 @@ Literal stars: \*not bold\* and backslash: \\
 
 This has <mark>inline HTML</mark> and a <br> tag.</textarea>
 </div>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
-        crossorigin="anonymous"></script>
 <script type="module">
     import {MdEditor} from "./src/MdEditor.js"
+    import {defaultTools} from "./src/tools/DefaultTools.js"
+    import {Separator} from "./src/tools/Separator.js"
+    import {DummyText} from "./example-addon-tools/DummyText.js"
 
-    new MdEditor(document.getElementById('editor'))
+    new MdEditor(document.getElementById('editor'), {
+        tools: [...defaultTools, Separator, DummyText]
+    })
 </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-md-editor",
-  "version": "2.4.0",
+  "version": "3.0.1",
   "description": "a simple markdown editor",
   "main": "index.js",
   "scripts": {

package/src/MdEditor.js

@@ -2,6 +2,8 @@
  * Author: Stefan Haack (https://shaack.com)
  * Date: 2023-11-12
  */
+import {defaultTools} from "./tools/DefaultTools.js"
+
 export class MdEditor {
 
     constructor(element, props) {
@@ -21,9 +23,17 @@ export class MdEditor {
             colorEscape: "128,128,128",
             colorFrontMatter: "128,128,200",
             wordWrap: true,
-            toolbarButtons: ["h1", "h2", "h3", "bold", "italic", "ul", "ol", "link", "image"],
+            iconsPath: new URL('./tools/icons/', import.meta.url).href,
+            tools: defaultTools,
             ...props
         }
+        this.tools = this.props.tools.map(entry => {
+            if (Array.isArray(entry)) {
+                const [Tool, toolProps] = entry
+                return new Tool(this, toolProps)
+            }
+            return new entry(this)
+        })
         this.element.addEventListener('keydown', (e) => this.handleKeyDown(e))
         this.createToolbar()
         this.createHighlightBackdrop()
@@ -41,35 +51,11 @@ export class MdEditor {
         toolbar.style.cssText = 'display:flex;gap:1px;padding:2px;flex-wrap:wrap;background:rgba(128,128,128,0.15);border:1px solid rgba(128,128,128,0.3);border-bottom:none;border-radius:4px 4px 0 0;box-sizing:border-box;width:100%;'
         wrapper.insertBefore(toolbar, this.element)
         this.element.style.borderRadius = '0 0 4px 4px'
-        const allButtons = [
-            {name: 'h1', title: 'Heading 1', icon: '<path d="M7.648 13V3H6.3v4.234H1.348V3H0v10h1.348V8.421H6.3V13zM14 13V3h-1.333l-2.381 1.766V6.12L12.6 4.443h.066V13z"/>', action: () => this.toggleHeading(1)},
-            {name: 'h2', title: 'Heading 2', icon: '<path d="M7.495 13V3.201H6.174v4.15H1.32V3.2H0V13h1.32V8.513h4.854V13zm3.174-7.071v-.05c0-.934.66-1.752 1.801-1.752 1.005 0 1.76.639 1.76 1.651 0 .898-.582 1.58-1.12 2.19l-3.69 4.2V13h6.331v-1.149h-4.458v-.079L13.9 8.786c.919-1.048 1.666-1.874 1.666-3.101C15.565 4.149 14.35 3 12.499 3 10.46 3 9.384 4.393 9.384 5.879v.05z"/>', action: () => this.toggleHeading(2)},
-            {name: 'h3', title: 'Heading 3', icon: '<path d="M11.07 8.4h1.049c1.174 0 1.99.69 2.004 1.724s-.802 1.786-2.068 1.779c-1.11-.007-1.905-.605-1.99-1.357h-1.21C8.926 11.91 10.116 13 12.028 13c1.99 0 3.439-1.188 3.404-2.87-.028-1.553-1.287-2.221-2.096-2.313v-.07c.724-.127 1.814-.935 1.772-2.293-.035-1.392-1.21-2.468-3.038-2.454-1.927.007-2.94 1.196-2.981 2.426h1.23c.064-.71.732-1.336 1.744-1.336 1.027 0 1.744.64 1.744 1.568.007.95-.738 1.639-1.744 1.639h-.991V8.4ZM7.495 13V3.201H6.174v4.15H1.32V3.2H0V13h1.32V8.513h4.854V13z"/>', action: () => this.toggleHeading(3)},
-            {name: 'bold', title: 'Bold', icon: '<path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>', action: () => this.toggleBold()},
-            {name: 'italic', title: 'Italic', icon: '<path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>', action: () => this.toggleItalic()},
-            {name: 'ul', title: 'Unordered List', icon: '<path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>', action: () => this.insertUnorderedList()},
-            {name: 'ol', title: 'Ordered List', icon: '<path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5"/><path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635z"/>', action: () => this.insertOrderedList()},
-            {name: 'link', title: 'Insert Link', icon: '<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/>', action: () => this.insertLink()},
-            {name: 'image', title: 'Insert Image', icon: '<path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/><path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54L1 12.5v-9a.5.5 0 0 1 .5-.5z"/>', action: () => this.insertImage()},
-        ]
-        const buttons = allButtons.filter(btn => this.props.toolbarButtons.includes(btn.name))
-        buttons.forEach(btn => {
-            const button = document.createElement('button')
-            button.type = 'button'
-            button.title = btn.title
-            button.style.cssText = 'background:none;border:none;border-radius:3px;cursor:pointer;padding:4px 6px;display:flex;align-items:center;justify-content:center;color:inherit;opacity:0.6;transition:opacity 0.15s,background 0.15s;'
-            button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="currentColor">${btn.icon}</svg>`
-            button.addEventListener('mouseenter', () => { button.style.opacity = '1'; button.style.background = 'rgba(128,128,128,0.2)' })
-            button.addEventListener('mouseleave', () => { button.style.opacity = '0.6'; button.style.background = 'none' })
-            button.addEventListener('mousedown', (e) => {
-                e.preventDefault()
-            })
-            button.addEventListener('click', (e) => {
-                e.preventDefault()
-                btn.action()
-            })
-            toolbar.appendChild(button)
-        })
+        for (const tool of this.tools) {
+            if (typeof tool.toolbarButtons === 'function') {
+                tool.toolbarButtons().forEach(btn => this.createToolbarButton(toolbar, btn))
+            }
+        }
 
         // Spacer to push wrap toggle to the right
         const spacer = document.createElement('div')
@@ -84,7 +70,9 @@ export class MdEditor {
         this.wrapButton.type = 'button'
         this.wrapButton.title = 'Toggle word wrap'
         this.wrapButton.style.cssText = 'background:none;border:none;border-radius:3px;cursor:pointer;padding:4px 6px;display:flex;align-items:center;justify-content:center;color:inherit;opacity:0.6;transition:opacity 0.15s,background 0.15s;'
-        this.wrapButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m0 4a.5.5 0 0 1 .5-.5h9a2.5 2.5 0 0 1 0 5h-1.293l.647.646a.5.5 0 0 1-.708.708l-1.5-1.5a.5.5 0 0 1 0-.708l1.5-1.5a.5.5 0 0 1 .708.708l-.647.646H11.5a1.5 1.5 0 0 0 0-3h-9a.5.5 0 0 1-.5-.5m0 4a.5.5 0 0 1 .5-.5H7a.5.5 0 0 1 0 1H2.5a.5.5 0 0 1-.5-.5"/></svg>`
+        this.wrapButton.style.width = '32px'
+        this.wrapButton.style.height = '28px'
+        this.loadIcon('text-wrap.svg').then(svg => { this.wrapButton.innerHTML = svg })
         this.wrapButton.addEventListener('mouseenter', () => { this.wrapButton.style.opacity = '1'; this.wrapButton.style.background = 'rgba(128,128,128,0.2)' })
         this.wrapButton.addEventListener('mouseleave', () => { this.wrapButton.style.opacity = this.wrapEnabled ? '0.9' : '0.4'; this.wrapButton.style.background = 'none' })
         this.wrapButton.addEventListener('mousedown', (e) => e.preventDefault())
@@ -101,6 +89,48 @@ export class MdEditor {
         }
     }
 
+    createToolbarButton(toolbar, btn) {
+        if (btn.separator) {
+            const sep = document.createElement('div')
+            sep.style.cssText = 'width:1px;align-self:stretch;margin:3px 5px;background:rgba(128,128,128,0.4);'
+            toolbar.appendChild(sep)
+            return
+        }
+        const button = document.createElement('button')
+        button.type = 'button'
+        button.title = btn.title
+        button.style.cssText = 'background:none;border:none;border-radius:3px;cursor:pointer;padding:4px 6px;display:flex;align-items:center;justify-content:center;color:inherit;opacity:0.6;transition:opacity 0.15s,background 0.15s;'
+        if (btn.icon) {
+            button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="currentColor">${btn.icon}</svg>`
+        } else if (btn.iconUrl) {
+            button.style.width = '32px'
+            button.style.height = '28px'
+            this.loadIconFromUrl(btn.iconUrl).then(svg => { button.innerHTML = svg })
+        } else if (btn.iconFile) {
+            button.style.width = '32px'
+            button.style.height = '28px'
+            this.loadIcon(btn.iconFile).then(svg => { button.innerHTML = svg })
+        }
+        button.addEventListener('mouseenter', () => { button.style.opacity = '1'; button.style.background = 'rgba(128,128,128,0.2)' })
+        button.addEventListener('mouseleave', () => { button.style.opacity = '0.6'; button.style.background = 'none' })
+        button.addEventListener('mousedown', (e) => e.preventDefault())
+        button.addEventListener('click', (e) => {
+            e.preventDefault()
+            btn.action()
+        })
+        toolbar.appendChild(button)
+    }
+
+    loadIcon(filename) {
+        return this.loadIconFromUrl(new URL(filename, this.props.iconsPath).href)
+    }
+
+    loadIconFromUrl(url) {
+        return fetch(url)
+            .then(r => r.text())
+            .then(svg => svg.replace(/width="16"/, 'width="20"').replace(/height="16"/, 'height="20"'))
+    }
+
     createHighlightBackdrop() {
         const container = this.element.parentNode
         container.style.position = 'relative'
@@ -338,6 +368,13 @@ export class MdEditor {
         result = result.replace(/(&lt;)(\/?[a-zA-Z]\w*)(.*?)(&gt;)/g, (_, p1, p2, p3, p4) =>
             this.colorSpan('colorHtmlTag', p1 + p2 + p3 + p4))
 
+        // Tool inline highlighting
+        for (const tool of this.tools) {
+            if (typeof tool.highlightInline === 'function') {
+                result = tool.highlightInline(result)
+            }
+        }
+
         return result
     }
 
@@ -372,21 +409,6 @@ export class MdEditor {
         this.element.selectionEnd = lineEnd
     }
 
-    toggleHeading(level) {
-        this.element.focus()
-        const {lineStart, lineEnd, line} = this.getCurrentLineInfo()
-        const prefix = '#'.repeat(level) + ' '
-        const headingMatch = line.match(/^(#{1,6}) /)
-        this.selectLineRange(lineStart, lineEnd)
-        if (headingMatch && headingMatch[1].length === level) {
-            this.insertTextAtCursor(line.substring(prefix.length))
-        } else if (headingMatch) {
-            this.insertTextAtCursor(prefix + line.substring(headingMatch[0].length))
-        } else {
-            this.insertTextAtCursor(prefix + line)
-        }
-    }
-
     toggleWrap(marker) {
         const start = this.element.selectionStart
         const end = this.element.selectionEnd
@@ -413,73 +435,13 @@ export class MdEditor {
         }
     }
 
-    toggleBold() {
-        this.toggleWrap('**')
-    }
-
-    toggleItalic() {
-        this.toggleWrap('_')
-    }
-
-    insertUnorderedList() {
-        const {lineStart, lineEnd, line} = this.getCurrentLineInfo()
-        this.selectLineRange(lineStart, lineEnd)
-        if (line.startsWith('- ')) {
-            this.insertTextAtCursor(line.substring(2))
-        } else {
-            this.insertTextAtCursor('- ' + line)
-        }
-    }
-
-    insertOrderedList() {
-        const {lineStart, lineEnd, line} = this.getCurrentLineInfo()
-        this.selectLineRange(lineStart, lineEnd)
-        const olMatch = line.match(/^\d+\. /)
-        if (olMatch) {
-            this.insertTextAtCursor(line.substring(olMatch[0].length))
-        } else {
-            this.insertTextAtCursor('1. ' + line)
-        }
-    }
-
-    insertLink() {
-        const start = this.element.selectionStart
-        const end = this.element.selectionEnd
-        const selected = this.element.value.substring(start, end)
-        const url = prompt('Enter URL:')
-        if (url === null) return
-        const linkText = selected || 'link'
-        this.element.focus()
-        this.selectLineRange(start, end)
-        this.insertTextAtCursor('[' + linkText + '](' + url + ')')
-        this.element.selectionStart = start + 1
-        this.element.selectionEnd = start + 1 + linkText.length
-    }
-
-    insertImage() {
-        const start = this.element.selectionStart
-        const end = this.element.selectionEnd
-        const selected = this.element.value.substring(start, end)
-        const url = prompt('Enter image URL:')
-        if (url === null) return
-        const altText = selected || 'image'
-        this.element.focus()
-        this.selectLineRange(start, end)
-        this.insertTextAtCursor('![' + altText + '](' + url + ')')
-        this.element.selectionStart = start + 2
-        this.element.selectionEnd = start + 2 + altText.length
-    }
-
     insertTextAtCursor(text) {
         // execCommand is deprecated, but without alternative to insert text and preserve the correct undo/redo stack
         document.execCommand("insertText", false, text)
     }
 
     handleKeyDown(e) {
-        const start = this.element.selectionStart
-        const end = this.element.selectionEnd
-        const before = this.element.value.substring(0, start)
-        const selected = this.element.value.substring(start, end)
+        const before = this.element.value.substring(0, this.element.selectionStart)
         const currentLine = before.substring(before.lastIndexOf('\n') + 1)
         const isListMode = currentLine.match(/^\t*- /) || currentLine.match(/^\t*\d+\. /)
         if (e.key === 'Tab') {
@@ -496,17 +458,16 @@ export class MdEditor {
         } else if (e.key === 'Enter') {
             this.handleEnterKey(e)
         } else if (e.ctrlKey || e.metaKey) {
-            if (e.key === 'b') { // bold
-                e.preventDefault()
-                this.toggleBold()
-            } else if (e.key === 'i') { // italic
-                e.preventDefault()
-                this.toggleItalic()
-            } else if (e.key === 'e') { // game todo this could be an extension
-                e.preventDefault()
-                this.insertTextAtCursor('[game id="' + selected + '"]')
-                this.element.selectionStart = start + 10
-                this.element.selectionEnd = start + 10 + selected.length
+            for (const tool of this.tools) {
+                if (typeof tool.keyboardShortcuts === 'function') {
+                    for (const shortcut of tool.keyboardShortcuts()) {
+                        if (shortcut.ctrlOrMeta && shortcut.key === e.key) {
+                            e.preventDefault()
+                            shortcut.action(e)
+                            return
+                        }
+                    }
+                }
             }
         }
     }

package/src/cm-md-editor.css

@@ -0,0 +1,37 @@
+body {
+    margin: 0;
+    padding: 1rem;
+    background-color: #f8f9fa;
+    color: #212529;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+textarea {
+    width: 100%;
+    height: calc(100vh - 4rem);
+    padding: 0.7rem;
+    font-family: monospace;
+    font-size: 1rem;
+    tab-size: 4;
+    line-height: 1.3;
+    background-color: #fff;
+    color: #212529;
+    border: 1px solid rgba(128, 128, 128, 0.3);
+    border-radius: 4px;
+    resize: vertical;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #212529;
+        color: #dee2e6;
+    }
+    textarea {
+        background-color: #111;
+        color: #dee2e6;
+    }
+}

package/src/tools/Bold.js

@@ -0,0 +1,11 @@
+export class Bold {
+    constructor(editor) {
+        this.editor = editor
+    }
+    toolbarButtons() {
+        return [{name: 'bold', title: 'Bold', iconFile: 'type-bold.svg', action: () => this.editor.toggleWrap('**')}]
+    }
+    keyboardShortcuts() {
+        return [{key: 'b', ctrlOrMeta: true, action: () => this.editor.toggleWrap('**')}]
+    }
+}

package/src/tools/DefaultTools.js

@@ -0,0 +1,14 @@
+import {Headings} from "./Headings.js"
+import {Bold} from "./Bold.js"
+import {Italic} from "./Italic.js"
+import {Strikethrough} from "./Strikethrough.js"
+import {UnorderedList} from "./UnorderedList.js"
+import {OrderedList} from "./OrderedList.js"
+import {InsertLink} from "./InsertLink.js"
+import {InsertImage} from "./InsertImage.js"
+import {Separator} from "./Separator.js"
+
+export const defaultTools = [Headings, Separator,
+    Bold, Italic, Strikethrough, Separator,
+    UnorderedList, OrderedList, Separator,
+    InsertLink, InsertImage]

package/src/tools/Headings.js

@@ -0,0 +1,34 @@
+export class Headings {
+    constructor(editor, props = {}) {
+        this.editor = editor
+        this.minLevel = props.minLevel || 1
+        this.maxLevel = props.maxLevel || 3
+    }
+    toolbarButtons() {
+        const buttons = []
+        for (let level = this.minLevel; level <= this.maxLevel; level++) {
+            buttons.push({
+                name: 'h' + level,
+                title: 'Heading ' + level,
+                iconFile: 'type-h' + level + '.svg',
+                action: () => this.toggleHeading(level)
+            })
+        }
+        return buttons
+    }
+    toggleHeading(level) {
+        const editor = this.editor
+        editor.element.focus()
+        const {lineStart, lineEnd, line} = editor.getCurrentLineInfo()
+        const prefix = '#'.repeat(level) + ' '
+        const headingMatch = line.match(/^(#{1,6}) /)
+        editor.selectLineRange(lineStart, lineEnd)
+        if (headingMatch && headingMatch[1].length === level) {
+            editor.insertTextAtCursor(line.substring(prefix.length))
+        } else if (headingMatch) {
+            editor.insertTextAtCursor(prefix + line.substring(headingMatch[0].length))
+        } else {
+            editor.insertTextAtCursor(prefix + line)
+        }
+    }
+}

package/src/tools/InsertImage.js

@@ -0,0 +1,22 @@
+export class InsertImage {
+    constructor(editor) {
+        this.editor = editor
+    }
+    toolbarButtons() {
+        return [{name: 'image', title: 'Insert Image', iconFile: 'card-image.svg', action: () => this.insertImage()}]
+    }
+    insertImage() {
+        const el = this.editor.element
+        const start = el.selectionStart
+        const end = el.selectionEnd
+        const selected = el.value.substring(start, end)
+        const url = prompt('Enter image URL:')
+        if (url === null) return
+        const altText = selected || 'image'
+        el.focus()
+        this.editor.selectLineRange(start, end)
+        this.editor.insertTextAtCursor('![' + altText + '](' + url + ')')
+        el.selectionStart = start + 2
+        el.selectionEnd = start + 2 + altText.length
+    }
+}

package/src/tools/InsertLink.js

@@ -0,0 +1,22 @@
+export class InsertLink {
+    constructor(editor) {
+        this.editor = editor
+    }
+    toolbarButtons() {
+        return [{name: 'link', title: 'Insert Link', iconFile: 'link-45deg.svg', action: () => this.insertLink()}]
+    }
+    insertLink() {
+        const el = this.editor.element
+        const start = el.selectionStart
+        const end = el.selectionEnd
+        const selected = el.value.substring(start, end)
+        const url = prompt('Enter URL:')
+        if (url === null) return
+        const linkText = selected || 'link'
+        el.focus()
+        this.editor.selectLineRange(start, end)
+        this.editor.insertTextAtCursor('[' + linkText + '](' + url + ')')
+        el.selectionStart = start + 1
+        el.selectionEnd = start + 1 + linkText.length
+    }
+}

package/src/tools/Italic.js

@@ -0,0 +1,11 @@
+export class Italic {
+    constructor(editor) {
+        this.editor = editor
+    }
+    toolbarButtons() {
+        return [{name: 'italic', title: 'Italic', iconFile: 'type-italic.svg', action: () => this.editor.toggleWrap('_')}]
+    }
+    keyboardShortcuts() {
+        return [{key: 'i', ctrlOrMeta: true, action: () => this.editor.toggleWrap('_')}]
+    }
+}

package/src/tools/OrderedList.js

@@ -0,0 +1,19 @@
+export class OrderedList {
+    constructor(editor) {
+        this.editor = editor
+    }
+    toolbarButtons() {
+        return [{name: 'ol', title: 'Ordered List', iconFile: 'list-ol.svg', action: () => this.insertOrderedList()}]
+    }
+    insertOrderedList() {
+        const editor = this.editor
+        const {lineStart, lineEnd, line} = editor.getCurrentLineInfo()
+        editor.selectLineRange(lineStart, lineEnd)
+        const olMatch = line.match(/^\d+\. /)
+        if (olMatch) {
+            editor.insertTextAtCursor(line.substring(olMatch[0].length))
+        } else {
+            editor.insertTextAtCursor('1. ' + line)
+        }
+    }
+}

package/src/tools/Separator.js

@@ -0,0 +1,8 @@
+export class Separator {
+    constructor(editor) {
+        this.editor = editor
+    }
+    toolbarButtons() {
+        return [{name: 'separator', title: '', separator: true}]
+    }
+}

package/src/tools/Strikethrough.js

@@ -0,0 +1,8 @@
+export class Strikethrough {
+    constructor(editor) {
+        this.editor = editor
+    }
+    toolbarButtons() {
+        return [{name: 'strikethrough', title: 'Strikethrough', iconFile: 'type-strikethrough.svg', action: () => this.editor.toggleWrap('~~')}]
+    }
+}

package/src/tools/UnorderedList.js

@@ -0,0 +1,18 @@
+export class UnorderedList {
+    constructor(editor) {
+        this.editor = editor
+    }
+    toolbarButtons() {
+        return [{name: 'ul', title: 'Unordered List', iconFile: 'list-ul.svg', action: () => this.insertUnorderedList()}]
+    }
+    insertUnorderedList() {
+        const editor = this.editor
+        const {lineStart, lineEnd, line} = editor.getCurrentLineInfo()
+        editor.selectLineRange(lineStart, lineEnd)
+        if (line.startsWith('- ')) {
+            editor.insertTextAtCursor(line.substring(2))
+        } else {
+            editor.insertTextAtCursor('- ' + line)
+        }
+    }
+}

package/src/tools/icons/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-2024 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/src/tools/icons/card-image.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-image" viewBox="0 0 16 16">
+  <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
+  <path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54L1 12.5v-9a.5.5 0 0 1 .5-.5z"/>
+</svg>

package/src/tools/icons/link-45deg.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
+  <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/>
+  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/>
+</svg>

package/src/tools/icons/list-ol.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ol" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5"/>
+  <path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635z"/>
+</svg>

package/src/tools/icons/list-ul.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ul" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>
+</svg>

package/src/tools/icons/text-wrap.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-wrap" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m0 4a.5.5 0 0 1 .5-.5h9a2.5 2.5 0 0 1 0 5h-1.293l.647.646a.5.5 0 0 1-.708.708l-1.5-1.5a.5.5 0 0 1 0-.708l1.5-1.5a.5.5 0 0 1 .708.708l-.647.646H11.5a1.5 1.5 0 0 0 0-3h-9a.5.5 0 0 1-.5-.5m0 4a.5.5 0 0 1 .5-.5H7a.5.5 0 0 1 0 1H2.5a.5.5 0 0 1-.5-.5"/>
+</svg>

package/src/tools/icons/type-bold.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
+  <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
+</svg>

package/src/tools/icons/type-h1.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h1" viewBox="0 0 16 16">
+  <path d="M7.648 13V3H6.3v4.234H1.348V3H0v10h1.348V8.421H6.3V13zM14 13V3h-1.333l-2.381 1.766V6.12L12.6 4.443h.066V13z"/>
+</svg>

package/src/tools/icons/type-h2.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h2" viewBox="0 0 16 16">
+  <path d="M7.495 13V3.201H6.174v4.15H1.32V3.2H0V13h1.32V8.513h4.854V13zm3.174-7.071v-.05c0-.934.66-1.752 1.801-1.752 1.005 0 1.76.639 1.76 1.651 0 .898-.582 1.58-1.12 2.19l-3.69 4.2V13h6.331v-1.149h-4.458v-.079L13.9 8.786c.919-1.048 1.666-1.874 1.666-3.101C15.565 4.149 14.35 3 12.499 3 10.46 3 9.384 4.393 9.384 5.879v.05z"/>
+</svg>

package/src/tools/icons/type-h3.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h3" viewBox="0 0 16 16">
+  <path d="M11.07 8.4h1.049c1.174 0 1.99.69 2.004 1.724s-.802 1.786-2.068 1.779c-1.11-.007-1.905-.605-1.99-1.357h-1.21C8.926 11.91 10.116 13 12.028 13c1.99 0 3.439-1.188 3.404-2.87-.028-1.553-1.287-2.221-2.096-2.313v-.07c.724-.127 1.814-.935 1.772-2.293-.035-1.392-1.21-2.468-3.038-2.454-1.927.007-2.94 1.196-2.981 2.426h1.23c.064-.71.732-1.336 1.744-1.336 1.027 0 1.744.64 1.744 1.568.007.95-.738 1.639-1.744 1.639h-.991V8.4ZM7.495 13V3.201H6.174v4.15H1.32V3.2H0V13h1.32V8.513h4.854V13z"/>
+</svg>

package/src/tools/icons/type-italic.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
+  <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
+</svg>

package/src/tools/icons/type-strikethrough.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-strikethrough" viewBox="0 0 16 16">
+  <path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.8 2.8 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967"/>
+</svg>