autumnnote 1.0.8 → 1.1.0

package/src/js/module/IconDialog.js

@@ -332,11 +332,12 @@ export class IconDialog {
   // ---------------------------------------------------------------------------
 
   _buildDialog() {
+    const L = this.context.locale.iconDialog;
     const overlay = createElement('div', {
       class: 'an-dialog-overlay',
       role: 'dialog',
       'aria-modal': 'true',
-      'aria-label': 'Insert FA icon',
+      'aria-label': L.ariaLabel,
     });
 
     const box = createElement('div', { class: 'an-dialog-box an-icon-box' });
@@ -344,8 +345,8 @@ export class IconDialog {
     // Title row
     const titleRow = createElement('div', { class: 'an-icon-title-row' });
     const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = 'Insert FA Icon';
-    const closeBtn = createElement('button', { type: 'button', class: 'an-icon-close', 'aria-label': 'Close' });
+    title.textContent = L.title;
+    const closeBtn = createElement('button', { type: 'button', class: 'an-icon-close', 'aria-label': L.close });
     closeBtn.innerHTML = '×';
     titleRow.append(title, closeBtn);
 
@@ -353,7 +354,7 @@ export class IconDialog {
     const searchInput = createElement('input', {
       type: 'search',
       class: 'an-input an-icon-search',
-      placeholder: 'Search icons…',
+      placeholder: L.searchPlaceholder,
       autocomplete: 'off',
     });
     this._searchInput = searchInput;
@@ -361,11 +362,11 @@ export class IconDialog {
     // Category tabs
     const catBar = createElement('div', { class: 'an-icon-cats' });
     const allTab = createElement('button', { type: 'button', class: 'an-icon-cat active', 'data-cat': 'all' });
-    allTab.textContent = 'All';
+    allTab.textContent = L.all;
     catBar.appendChild(allTab);
     ICON_CATEGORIES.forEach(({ id, label }) => {
       const tab = createElement('button', { type: 'button', class: 'an-icon-cat', 'data-cat': id });
-      tab.textContent = label;
+      tab.textContent = (L.categories && L.categories[id]) || label;
       catBar.appendChild(tab);
     });
     this._catBar = catBar;
@@ -386,7 +387,7 @@ export class IconDialog {
     const optRow = createElement('div', { class: 'an-icon-options' });
 
     const styleLabel = createElement('label', { class: 'an-label' });
-    styleLabel.textContent = 'Style';
+    styleLabel.textContent = L.style;
     const styleSelect = createElement('select', { class: 'an-input an-icon-option-select' });
     [['fa-solid', 'Solid'], ['fa-regular', 'Regular'], ['fa-light', 'Light (Pro)']].forEach(([v, t]) => {
       const opt = createElement('option', { value: v });
@@ -397,7 +398,7 @@ export class IconDialog {
     this._styleSelect = styleSelect;
 
     const sizeLabel = createElement('label', { class: 'an-label' });
-    sizeLabel.textContent = 'Size';
+    sizeLabel.textContent = L.size;
     const sizeSelect = createElement('select', { class: 'an-input an-icon-option-select' });
     [['', 'Inherit'], ['0.75em', '0.75em'], ['1em', '1em'], ['1.25em', '1.25em'], ['1.5em', '1.5em'], ['2em', '2em'], ['3em', '3em']].forEach(([v, t]) => {
       const opt = createElement('option', { value: v });
@@ -408,30 +409,30 @@ export class IconDialog {
     this._sizeSelect = sizeSelect;
 
     const colorLabel = createElement('label', { class: 'an-label' });
-    colorLabel.textContent = 'Color';
+    colorLabel.textContent = L.color;
     const colorInput = createElement('input', { type: 'color', class: 'an-icon-color', value: '#000000' });
     this._colorInput = colorInput;
 
     const useColorLabel = createElement('label', { class: 'an-label an-label-inline an-icon-use-color' });
     const useColorCb = createElement('input', { type: 'checkbox', checked: '' });
     this._useColorCb = useColorCb;
-    useColorLabel.append(useColorCb, document.createTextNode(' Use color'));
+    useColorLabel.append(useColorCb, document.createTextNode(L.useColor));
 
     optRow.append(styleLabel, styleSelect, sizeLabel, sizeSelect, colorLabel, colorInput, useColorLabel);
 
     // Preview
     const preview = createElement('div', { class: 'an-icon-preview' });
     const previewHint = createElement('span', { class: 'an-icon-preview-hint' });
-    previewHint.textContent = 'Select an icon';
+    previewHint.textContent = L.selectHint;
     preview.appendChild(previewHint);
     this._preview = preview;
 
     // Actions
     const btnRow = createElement('div', { class: 'an-dialog-actions' });
     const insertBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary', disabled: '' });
-    insertBtn.textContent = 'Insert FA Icon';
+    insertBtn.textContent = L.insertBtn;
     const cancelBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    cancelBtn.textContent = 'Cancel';
+    cancelBtn.textContent = L.cancelBtn;
     btnRow.append(insertBtn, cancelBtn);
     this._insertBtn = insertBtn;
 

package/src/js/module/ImageDialog.js

@@ -57,35 +57,36 @@ export class ImageDialog {
   // ---------------------------------------------------------------------------
 
   _buildDialog() {
+    const L = this.context.locale.imageDialog;
     const overlay = createElement('div', {
       class: 'an-dialog-overlay',
       role: 'dialog',
       'aria-modal': 'true',
-      'aria-label': 'Insert image',
+      'aria-label': L.ariaLabel,
     });
     const box = createElement('div', { class: 'an-dialog-box' });
 
     const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = 'Insert Image';
+    title.textContent = L.title;
 
     // URL tab
     const urlLabel = createElement('label', { class: 'an-label' });
-    urlLabel.textContent = 'Image URL';
+    urlLabel.textContent = L.imageUrl;
     const urlInput = createElement('input', {
       type: 'url',
       class: 'an-input',
-      placeholder: 'https://example.com/image.png',
+      placeholder: L.urlPlaceholder,
       autocomplete: 'off',
     });
     this._urlInput = urlInput;
 
     // Alt text
     const altLabel = createElement('label', { class: 'an-label' });
-    altLabel.textContent = 'Alt Text';
+    altLabel.textContent = L.altText;
     const altInput = createElement('input', {
       type: 'text',
       class: 'an-input',
-      placeholder: 'Describe the image',
+      placeholder: L.altPlaceholder,
       autocomplete: 'off',
     });
     this._altInput = altInput;
@@ -94,13 +95,13 @@ export class ImageDialog {
 
     // Alignment
     const alignLabel = createElement('label', { class: 'an-label' });
-    alignLabel.textContent = 'Alignment';
+    alignLabel.textContent = L.alignment;
     const alignRow = createElement('div', { class: 'an-align-row' });
     const alignOptions = [
-      { value: '',       label: 'None'   },
-      { value: 'left',   label: 'Left'   },
-      { value: 'center', label: 'Center' },
-      { value: 'right',  label: 'Right'  },
+      { value: '',       label: L.alignNone   },
+      { value: 'left',   label: L.alignLeft   },
+      { value: 'center', label: L.alignCenter },
+      { value: 'right',  label: L.alignRight  },
     ];
     alignOptions.forEach(({ value, label }) => {
       const radioId = `an-align-${value || 'none'}`;
@@ -114,7 +115,7 @@ export class ImageDialog {
     box.append(alignLabel, alignRow);
     if (this.options.allowImageUpload !== false) {
       const fileLabel = createElement('label', { class: 'an-label' });
-      fileLabel.textContent = 'Or upload a file';
+      fileLabel.textContent = L.uploadLabel;
       const fileInput = createElement('input', {
         type: 'file',
         class: 'an-input',
@@ -132,9 +133,9 @@ export class ImageDialog {
     // Buttons
     const btnRow = createElement('div', { class: 'an-dialog-actions' });
     const insertBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
-    insertBtn.textContent = 'Insert';
+    insertBtn.textContent = L.insertBtn;
     const cancelBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    cancelBtn.textContent = 'Cancel';
+    cancelBtn.textContent = L.cancelBtn;
     btnRow.appendChild(insertBtn);
     btnRow.appendChild(cancelBtn);
 
@@ -166,7 +167,7 @@ export class ImageDialog {
       'image/webp', 'image/svg+xml', 'image/avif',
     ]);
     if (!SUPPORTED.has(file.type)) {
-      const message = `Format "${file.type}" is not supported for display in web browsers. Please convert to JPEG, PNG, or WebP first.`;
+      const message = this.context.locale.errors.imageFormat(file.type);
       if (this._fileHint) this._fileHint.textContent = message;
       this.context.triggerEvent('imageError', { file, message });
       this._fileInput.value = '';
@@ -177,7 +178,7 @@ export class ImageDialog {
     // Validate file size (max 5 MB by default)
     const maxSize = (this.options.maxImageSize || 5) * 1024 * 1024;
     if (file.size > maxSize) {
-      const message = `Image file is too large. Maximum allowed size is ${this.options.maxImageSize || 5} MB.`;
+      const message = this.context.locale.errors.imageSize(this.options.maxImageSize || 5);
       if (this._fileHint) this._fileHint.textContent = message;
       console.warn('[AutumnNote] ImageDialog:', message);
       this.context.triggerEvent('imageError', { file, message });

package/src/js/module/ImageTooltip.js

@@ -75,24 +75,25 @@ export class ImageTooltip {
   // ---------------------------------------------------------------------------
 
   _buildTooltip() {
+    const L = this.context.locale.tooltips.image;
     const el = createElement('div', {
       class: 'an-link-tooltip an-image-tooltip',
       role: 'toolbar',
-      'aria-label': 'Image actions',
+      'aria-label': L.ariaLabel,
     });
     el.style.display = 'none';
 
     // Label showing "Image"
     this._label = createElement('span', { class: 'an-link-tooltip-url' });
-    this._label.textContent = 'Image';
+    this._label.textContent = L.label;
     el.appendChild(this._label);
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    this._floatLeftBtn    = this._makeBtn(ICONS.floatLeft,    'Float Left',     () => this._setFloat('left'));
-    this._floatNoneBtn    = this._makeBtn(ICONS.floatNone,    'No Float',       () => this._setFloat(''));
-    this._alignCenterBtn  = this._makeBtn(ICONS.alignCenter,  'Align Center',   () => this._setCenter());
-    this._floatRightBtn   = this._makeBtn(ICONS.floatRight,   'Float Right',    () => this._setFloat('right'));
+    this._floatLeftBtn    = this._makeBtn(ICONS.floatLeft,    L.floatLeft,    () => this._setFloat('left'));
+    this._floatNoneBtn    = this._makeBtn(ICONS.floatNone,    L.noFloat,      () => this._setFloat(''));
+    this._alignCenterBtn  = this._makeBtn(ICONS.alignCenter,  L.alignCenter,  () => this._setCenter());
+    this._floatRightBtn   = this._makeBtn(ICONS.floatRight,   L.floatRight,   () => this._setFloat('right'));
 
     el.appendChild(this._floatLeftBtn);
     el.appendChild(this._floatNoneBtn);
@@ -101,28 +102,28 @@ export class ImageTooltip {
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    this._originalBtn = this._makeBtn(ICONS.originalSize, 'Original Size', () => this._resetSize());
+    this._originalBtn = this._makeBtn(ICONS.originalSize, L.originalSize, () => this._resetSize());
 
     el.appendChild(this._originalBtn);
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    el.appendChild(this._makeBtn(ICONS.rotateLeft,  'Rotate Left',  () => this._rotate(-90)));
-    el.appendChild(this._makeBtn(ICONS.rotateRight, 'Rotate Right', () => this._rotate(90)));
+    el.appendChild(this._makeBtn(ICONS.rotateLeft,  L.rotateLeft,  () => this._rotate(-90)));
+    el.appendChild(this._makeBtn(ICONS.rotateRight, L.rotateRight, () => this._rotate(90)));
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    this._cropBtn = this._makeBtn(ICONS.crop, 'Crop Image', () => this._crop());
+    this._cropBtn = this._makeBtn(ICONS.crop, L.cropImage, () => this._crop());
     el.appendChild(this._cropBtn);
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    this._captionBtn = this._makeBtn(ICONS.caption, 'Add / Edit Caption', () => this._toggleCaption());
+    this._captionBtn = this._makeBtn(ICONS.caption, L.addCaption, () => this._toggleCaption());
     el.appendChild(this._captionBtn);
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
-    this._deleteBtn = this._makeBtn(ICONS.deleteImg, 'Delete Image', () => this._delete(), true);
+    this._deleteBtn = this._makeBtn(ICONS.deleteImg, L.deleteImage, () => this._delete(), true);
 
     el.appendChild(this._deleteBtn);
 

package/src/js/module/LinkDialog.js

@@ -59,19 +59,20 @@ export class LinkDialog {
   // ---------------------------------------------------------------------------
 
   _buildDialog() {
-    const overlay = createElement('div', { class: 'an-dialog-overlay', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Insert link' });
+    const L = this.context.locale.linkDialog;
+    const overlay = createElement('div', { class: 'an-dialog-overlay', role: 'dialog', 'aria-modal': 'true', 'aria-label': L.ariaLabel });
     const box = createElement('div', { class: 'an-dialog-box' });
 
     const title = createElement('h3', { class: 'an-dialog-title' });
-    title.textContent = 'Insert Link';
+    title.textContent = L.title;
 
     // URL field
     const urlLabel = createElement('label', { class: 'an-label' });
-    urlLabel.textContent = 'URL';
+    urlLabel.textContent = L.url;
     const urlInput = createElement('input', {
       type: 'url',
       class: 'an-input',
-      placeholder: 'https://',
+      placeholder: L.urlPlaceholder,
       id: 'an-link-url',
       name: 'url',
       autocomplete: 'off',
@@ -80,11 +81,11 @@ export class LinkDialog {
 
     // Text field
     const textLabel = createElement('label', { class: 'an-label' });
-    textLabel.textContent = 'Display Text';
+    textLabel.textContent = L.displayText;
     const textInput = createElement('input', {
       type: 'text',
       class: 'an-input',
-      placeholder: 'Link text',
+      placeholder: L.textPlaceholder,
       id: 'an-link-text',
       name: 'linkText',
       autocomplete: 'off',
@@ -100,14 +101,14 @@ export class LinkDialog {
     });
     this._tabCheckbox = tabCheckbox;
     tabLabel.appendChild(tabCheckbox);
-    tabLabel.appendChild(document.createTextNode(' Open in new tab'));
+    tabLabel.appendChild(document.createTextNode(' ' + L.openInNewTab));
 
     // Buttons
     const btnRow = createElement('div', { class: 'an-dialog-actions' });
     const insertBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
-    insertBtn.textContent = 'Insert';
+    insertBtn.textContent = L.insertBtn;
     const cancelBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    cancelBtn.textContent = 'Cancel';
+    cancelBtn.textContent = L.cancelBtn;
     btnRow.appendChild(insertBtn);
     btnRow.appendChild(cancelBtn);
 

package/src/js/module/LinkTooltip.js

@@ -63,7 +63,8 @@ export class LinkTooltip {
   // ---------------------------------------------------------------------------
 
   _buildTooltip() {
-    const el = createElement('div', { class: 'an-link-tooltip', role: 'toolbar', 'aria-label': 'Link actions' });
+    const L = this.context.locale.tooltips.link;
+    const el = createElement('div', { class: 'an-link-tooltip', role: 'toolbar', 'aria-label': L.ariaLabel });
     el.style.display = 'none';
 
     // URL preview text (truncated)
@@ -74,10 +75,10 @@ export class LinkTooltip {
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
     // Action buttons
-    this._openBtn   = this._makeBtn(ICONS.open,   'Open link',   () => this._openLink());
-    this._copyBtn   = this._makeBtn(ICONS.copy,   'Copy URL',    () => this._copyLink());
-    this._editBtn   = this._makeBtn(ICONS.edit,   'Edit link',   () => this._editLink());
-    this._unlinkBtn = this._makeBtn(ICONS.unlink, 'Remove link', () => this._unlink());
+    this._openBtn   = this._makeBtn(ICONS.open,   L.openLink,   () => this._openLink());
+    this._copyBtn   = this._makeBtn(ICONS.copy,   L.copyUrl,    () => this._copyLink());
+    this._editBtn   = this._makeBtn(ICONS.edit,   L.editLink,   () => this._editLink());
+    this._unlinkBtn = this._makeBtn(ICONS.unlink, L.removeLink, () => this._unlink());
 
     el.appendChild(this._openBtn);
     el.appendChild(this._copyBtn);

package/src/js/module/MarkdownShortcuts.js

@@ -0,0 +1,253 @@
+/**
+ * MarkdownShortcuts.js — Convert Markdown-style syntax typed directly in the
+ * editor into rich HTML elements (input rules / auto-format).
+ *
+ * Activated when `markdownShortcuts: true` (the default).
+ *
+ * Block rules — triggered by Space or Enter at the start of a line:
+ *   #[#[#]]·     → H1 / H2 / H3
+ *   >·           → blockquote
+ *   -·  or *·   → unordered list item
+ *   1.·          → ordered list item
+ *   [ ]·         → checklist item
+ *   ---          → horizontal rule  (on Enter)
+ *   ```          → code block       (on Enter)
+ *
+ * Inline rules — triggered when the closing marker is typed:
+ *   **text**     → <strong>
+ *   *text*       → <em>
+ *   ~~text~~     → <s>
+ *   `code`       → <code>
+ */
+
+import { on } from '../core/dom.js';
+
+export class MarkdownShortcuts {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this.options = context.options;
+    this._disposers = [];
+  }
+
+  initialize() {
+    if (!this.options.markdownShortcuts) return this;
+    const editable = this.context.layoutInfo.editable;
+    const d1 = on(editable, 'keydown', /** @param {KeyboardEvent} e */ (e) => this._onKeydown(e));
+    const d2 = on(editable, 'input', () => this._onInput());
+    this._disposers.push(d1, d2);
+    return this;
+  }
+
+  destroy() {
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+  }
+
+  // ---------------------------------------------------------------------------
+  // Block rules (Space / Enter)
+  // ---------------------------------------------------------------------------
+
+  _onKeydown(e) {
+    if (e.key === ' ') {
+      if (this._applyBlockRule()) e.preventDefault();
+    } else if (e.key === 'Enter') {
+      if (this._applyEnterRule()) e.preventDefault();
+    }
+  }
+
+  /**
+   * Returns the plain text of the line the cursor is on, up to the cursor.
+   * @returns {{ text: string, range: Range, lineNode: Node } | null}
+   */
+  _getLineContext() {
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount) return null;
+    const range = sel.getRangeAt(0);
+    if (!range.collapsed) return null;
+
+    const editable = this.context.layoutInfo.editable;
+    if (!editable.contains(range.startContainer)) return null;
+
+    // Walk up to find the block-level ancestor inside the editable
+    let node = range.startContainer;
+    while (node && node !== editable && !this._isBlock(node)) {
+      node = node.parentNode;
+    }
+    if (!node || node === editable) node = range.startContainer;
+
+    // Collect all text content before the cursor within that block
+    const tmpRange = document.createRange();
+    tmpRange.setStart(node, 0);
+    tmpRange.setEnd(range.startContainer, range.startOffset);
+    const text = tmpRange.toString();
+
+    return { text, range, lineNode: node };
+  }
+
+  _isBlock(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) return false;
+    const display = window.getComputedStyle(node).display;
+    return display === 'block' || display === 'list-item' || display === 'table-cell';
+  }
+
+  /** Applies block rule on Space key. Returns true if a rule fired. */
+  _applyBlockRule() {
+    const ctx = this._getLineContext();
+    if (!ctx) return false;
+    const { text } = ctx;
+
+    const blockPatterns = [
+      { re: /^(#{1,3})$/, handler: (m) => this._convertToHeading(m[1].length) },
+      { re: /^>$/, handler: () => this._convertToBlockquote() },
+      { re: /^[-*]$/, handler: () => this._convertToList('ul') },
+      { re: /^1\.$/, handler: () => this._convertToList('ol') },
+      { re: /^\[ \]$/, handler: () => this._convertToChecklist() },
+    ];
+
+    for (const { re, handler } of blockPatterns) {
+      const m = text.match(re);
+      if (m) {
+        handler(m);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /** Applies block rule on Enter key (---, ```). Returns true if a rule fired. */
+  _applyEnterRule() {
+    const ctx = this._getLineContext();
+    if (!ctx) return false;
+    const { text } = ctx;
+
+    if (/^-{3,}$/.test(text)) {
+      this._convertToHr();
+      return true;
+    }
+    if (/^`{3}/.test(text)) {
+      this._convertToCodeBlock();
+      return true;
+    }
+    return false;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Block converters
+  // ---------------------------------------------------------------------------
+
+  _selectLineAndDelete() {
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount) return;
+    const range = sel.getRangeAt(0);
+    // Select from the start of the block to the cursor and delete
+    const startRange = document.createRange();
+    startRange.setStart(range.startContainer.parentNode || range.startContainer, 0);
+    startRange.setEnd(range.startContainer, range.startOffset);
+    startRange.deleteContents();
+  }
+
+  _convertToHeading(level) {
+    this._selectLineAndDelete();
+    document.execCommand('formatBlock', false, `h${level}`);
+    this.context.triggerEvent('change', this.context.getHTML());
+  }
+
+  _convertToBlockquote() {
+    this._selectLineAndDelete();
+    document.execCommand('formatBlock', false, 'blockquote');
+    this.context.triggerEvent('change', this.context.getHTML());
+  }
+
+  _convertToList(type) {
+    this._selectLineAndDelete();
+    document.execCommand(type === 'ul' ? 'insertUnorderedList' : 'insertOrderedList');
+    this.context.triggerEvent('change', this.context.getHTML());
+  }
+
+  _convertToChecklist() {
+    this._selectLineAndDelete();
+    this.context.invoke('editor.checklist');
+    this.context.triggerEvent('change', this.context.getHTML());
+  }
+
+  _convertToHr() {
+    this._selectLineAndDelete();
+    this.context.invoke('editor.insertHR');
+    this.context.triggerEvent('change', this.context.getHTML());
+  }
+
+  _convertToCodeBlock() {
+    this._selectLineAndDelete();
+    document.execCommand('formatBlock', false, 'pre');
+    this.context.triggerEvent('change', this.context.getHTML());
+  }
+
+  // ---------------------------------------------------------------------------
+  // Inline rules (input event)
+  // ---------------------------------------------------------------------------
+
+  _onInput() {
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount) return;
+    const range = sel.getRangeAt(0);
+    if (!range.collapsed) return;
+
+    const editable = this.context.layoutInfo.editable;
+    if (!editable.contains(range.startContainer)) return;
+
+    const node = range.startContainer;
+    if (node.nodeType !== Node.TEXT_NODE) return;
+
+    const text = node.textContent;
+    const offset = range.startOffset;
+
+    const inlineRules = [
+      // **bold**
+      { re: /\*\*(.+?)\*\*$/, tag: 'strong' },
+      // *italic* (not part of **)
+      { re: /(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)$/, tag: 'em' },
+      // ~~strike~~
+      { re: /~~(.+?)~~$/, tag: 's' },
+      // `code`
+      { re: /`([^`]+)`$/, tag: 'code' },
+    ];
+
+    const upToCursor = text.slice(0, offset);
+    for (const { re, tag } of inlineRules) {
+      const m = upToCursor.match(re);
+      if (!m) continue;
+
+      const matchStart = upToCursor.length - m[0].length;
+      const matchEnd = offset;
+      const innerText = m[1];
+
+      // Replace matched text with formatted element
+      const before = text.slice(0, matchStart);
+      const after = text.slice(matchEnd);
+
+      const el = document.createElement(tag);
+      el.textContent = innerText;
+
+      // Rebuild the text node and insert the element
+      const beforeNode = document.createTextNode(before);
+      const afterNode = document.createTextNode('​' + after);
+
+      const parent = node.parentNode;
+      parent.insertBefore(beforeNode, node);
+      parent.insertBefore(el, node);
+      parent.insertBefore(afterNode, node);
+      parent.removeChild(node);
+
+      // Place cursor after the element (after the ZWS)
+      const newRange = document.createRange();
+      newRange.setStart(afterNode, 1);
+      newRange.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(newRange);
+
+      this.context.triggerEvent('change', this.context.getHTML());
+      break;
+    }
+  }
+}