kempo-ui 0.4.5 → 0.4.6

package/src/components/markdownEditorControls/MarkdownEditorControl.js

@@ -0,0 +1,158 @@
+import ShadowComponent from '../ShadowComponent.js';
+import { html, css } from '../../lit-all.min.js';
+
+/*
+  Base class for <k-markdown-editor> control buttons. Subclass and override
+  `command()` (or `render()` for custom UI) to wire up a toolbar button to a
+  text manipulation. The editor is found via closest('k-markdown-editor');
+  helper methods on the editor (wrapSelection, insertLinePrefix,
+  replaceSelection, insertAtCursor) handle the textarea selection math.
+
+  Mirrors HtmlEditorControl in spirit, scoped to MarkdownEditor.
+*/
+
+export default class MarkdownEditorControl extends ShadowComponent {
+  static properties = {
+    btnClass: { type: String, attribute: 'btn-class' },
+    label: { type: String, reflect: true },
+    hidden: { type: Boolean, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.btnClass = 'no-btn ctrl';
+    this.label = '';
+    this.hidesInPreviewMode = true;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    const editor = this.editor;
+    if(!editor) return;
+    this.boundEditor = editor;
+    this.modeHandler = () => {
+      const shouldHide = this.hidesInPreviewMode && this.boundEditor.mode === 'preview';
+      if(this.hidden !== shouldHide){
+        this.hidden = shouldHide;
+      }
+    };
+    // Reflect initial state
+    this.modeHandler();
+    editor.addEventListener('mode-change', this.modeHandler);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if(this.boundEditor && this.modeHandler){
+      this.boundEditor.removeEventListener('mode-change', this.modeHandler);
+    }
+    this.boundEditor = null;
+    this.modeHandler = null;
+  }
+
+  /*
+    Editor lookup. `closest()` works when the control is slotted in light
+    DOM (the most common case). When the control is rendered as slot
+    fallback content it lives inside the editor's own shadow root, where
+    `closest()` can't cross the shadow boundary — fall through to the
+    shadow root's host in that case.
+  */
+  get editor() {
+    const direct = this.closest('k-markdown-editor');
+    if(direct) return direct;
+    const root = this.getRootNode();
+    if(root instanceof ShadowRoot && root.host?.tagName === 'K-MARKDOWN-EDITOR'){
+      return root.host;
+    }
+    return null;
+  }
+
+  /*
+    Convenience helpers — subclasses use these in `command()` to manipulate
+    the editor's textarea. Each is a thin pass-through with a guard.
+  */
+  wrapSelection(prefix, suffix, placeholder) {
+    this.editor?.wrapSelection(prefix, suffix, placeholder);
+  }
+
+  insertAtCursor(text) {
+    this.editor?.insertAtCursor(text);
+  }
+
+  insertLinePrefix(prefix, replacePattern) {
+    this.editor?.insertLinePrefix(prefix, replacePattern);
+  }
+
+  replaceInSelectedLines(pattern, replacement) {
+    this.editor?.replaceInSelectedLines(pattern, replacement);
+  }
+
+  replaceSelection(text, options) {
+    this.editor?.replaceSelection(text, options);
+  }
+
+  getSelection() {
+    return this.editor?.getSelection() || { start: 0, end: 0, text: '' };
+  }
+
+  /*
+    Override in subclasses to do the work. Default no-op.
+  */
+  command() {}
+
+  handleClick = (e) => {
+    e.preventDefault();
+    if(this.hidden) return;
+    this.command();
+  };
+
+  /*
+    Default render: a button with the provided label (or whatever you slot
+    in). Subclasses can override for custom UI (icon button, dropdown, etc.).
+  */
+  render() {
+    return html`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <slot>${this.label}</slot>
+      </button>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .ctrl {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--spacer_h);
+      border: 1px solid transparent;
+      border-radius: var(--radius);
+      background: transparent;
+      color: var(--tc_muted);
+      cursor: pointer;
+      font: inherit;
+      transition: background var(--animation_ms), color var(--animation_ms);
+    }
+    .ctrl:hover {
+      background: var(--c_bg__alt);
+      color: var(--tc);
+    }
+    .ctrl:focus-visible {
+      outline: none;
+      box-shadow: var(--focus_shadow);
+    }
+  `;
+}
+
+customElements.define('k-md-control', MarkdownEditorControl);

package/src/components/markdownEditorControls/Menu.js

@@ -0,0 +1,86 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+import '../Dropdown.js';
+
+/*
+  Menu control. Renders as a single toolbar button that, when clicked, opens
+  a Dropdown containing whatever child controls have been slotted in. Useful
+  for grouping less-frequent actions (like the heading picker) so they don't
+  take up space in the main toolbar.
+
+  The trigger button content is fully customizable via the `trigger` slot —
+  drop in whatever combination of icons / text you want. If nothing is
+  slotted, a default `menu` icon is shown.
+
+  The default slot is the menu's items.
+
+  Example (default trigger):
+    <k-md-menu label="Heading">
+      <k-md-format-block tag="h1"></k-md-format-block>
+      ...
+    </k-md-menu>
+
+  Example (custom trigger showing a heading-range icon):
+    <k-md-menu label="Heading">
+      <span slot="trigger">
+        <k-icon name="format_h1"></k-icon> - <k-icon name="format_h6"></k-icon>
+      </span>
+      <k-md-format-block tag="h1"></k-md-format-block>
+      ...
+    </k-md-menu>
+*/
+export default class MarkdownMenu extends MarkdownEditorControl {
+  constructor() {
+    super();
+    this.label = 'Menu';
+  }
+
+  /*
+    The trigger is wired to Dropdown's own click handling, so the
+    base-class handleClick (which calls command()) would fire on top and
+    create a feedback loop. command() is a no-op here; child controls inside
+    the dropdown drive their own commands.
+  */
+  command() {}
+
+  render() {
+    return html`
+      <k-dropdown>
+        <button
+          slot="trigger"
+          type="button"
+          class=${this.btnClass}
+          title=${this.label}
+          aria-label=${this.label}
+        >
+          <slot name="trigger">
+            <k-icon name="menu"></k-icon>
+          </slot>
+        </button>
+        <slot></slot>
+      </k-dropdown>
+    `;
+  }
+
+  static styles = [
+    MarkdownEditorControl.styles,
+    css`
+      :host {
+        display: inline-flex;
+      }
+      k-dropdown {
+        display: inline-flex;
+      }
+      /* Stretch slotted menu items so each one fills the dropdown
+         horizontally — Dropdown's built-in styles only target raw
+         <a>/<button> children, so custom-element items need this themselves. */
+      ::slotted(:not([slot="trigger"])) {
+        display: block;
+        width: 100%;
+      }
+    `
+  ];
+}
+
+customElements.define('k-md-menu', MarkdownMenu);

package/src/components/markdownEditorControls/NumberedList.js

@@ -0,0 +1,69 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+/*
+  Numbered list control. Prefixes each non-empty selected line with `N. `
+  using sequential numbers. Markdown renderers accept all-1. as well, but
+  numbering them properly keeps the source readable.
+*/
+export default class MarkdownNumberedList extends MarkdownEditorControl {
+  constructor() {
+    super();
+    this.label = 'Numbered list';
+  }
+
+  command() {
+    const editor = this.editor;
+    if(!editor) return;
+    const ta = editor.textarea;
+    if(!ta) return;
+    if(editor.mode !== 'write') editor.mode = 'write';
+    editor.updateComplete.then(() => {
+      ta.focus();
+      const { selectionStart: start, selectionEnd: end, value } = ta;
+      const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+      const lineEndIdx = value.indexOf('\n', end);
+      const lineEnd = lineEndIdx === -1 ? value.length : lineEndIdx;
+      const block = value.substring(lineStart, lineEnd);
+      const lines = block.split('\n');
+      const numbered = /^\d+\. /;
+      const nonEmpty = lines.filter(l => l.length > 0);
+      const allNumbered = nonEmpty.length > 0 && nonEmpty.every(l => numbered.test(l));
+      let processed;
+      if(allNumbered){
+        processed = lines.map(l => l.replace(numbered, ''));
+      } else {
+        let n = 1;
+        processed = lines.map(l => {
+          if(!l) return l;
+          const stripped = l.replace(numbered, '');
+          return `${n++}. ${stripped}`;
+        });
+      }
+      const nextBlock = processed.join('\n');
+      const next = value.substring(0, lineStart) + nextBlock + value.substring(lineEnd);
+      ta.value = next;
+      ta.selectionStart = lineStart;
+      ta.selectionEnd = lineStart + nextBlock.length;
+      editor.value = next;
+      ta.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+  }
+
+  render() {
+    return html`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_list_numbered"></k-icon>
+      </button>
+    `;
+  }
+}
+
+customElements.define('k-md-numbered-list', MarkdownNumberedList);

package/src/components/markdownEditorControls/Quote.js

@@ -0,0 +1,30 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class MarkdownQuote extends MarkdownEditorControl {
+  constructor() {
+    super();
+    this.label = 'Quote';
+  }
+
+  command() {
+    this.insertLinePrefix('> ');
+  }
+
+  render() {
+    return html`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_quote"></k-icon>
+      </button>
+    `;
+  }
+}
+
+customElements.define('k-md-quote', MarkdownQuote);

package/src/components/markdownEditorControls/SpeechToText.js

@@ -0,0 +1,65 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../SpeechToText.js';
+
+/*
+  Speech-to-text control. Reuses the standalone `<k-speech-to-text>`
+  component (which provides its own mic-button UI and handles the Web
+  Speech API) and just listens for its `end` event to drop the final
+  transcript into the editor at the cursor.
+*/
+export default class MarkdownSpeechToText extends MarkdownEditorControl {
+  static properties = {
+    ...MarkdownEditorControl.properties,
+    language: { type: String, reflect: true },
+    continuous: { type: Boolean, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.label = 'Speech to text';
+    this.language = 'en-US';
+    this.continuous = false;
+  }
+
+  /*
+    The trigger button lives inside the embedded `<k-speech-to-text>`,
+    which handles its own click-to-listen logic. Our base-class
+    handleClick (which calls command()) is unused; the speech component
+    drives the lifecycle and we just react to the `end` event.
+  */
+  command() {}
+
+  handleEnd = (e) => {
+    const text = (e.detail?.text || '').trim();
+    if(!text) return;
+    // Trailing space so successive recordings don't run together.
+    this.editor?.replaceSelection(text + ' ', { selectInserted: false });
+  };
+
+  render() {
+    return html`
+      <k-speech-to-text
+        language=${this.language}
+        ?continuous=${this.continuous}
+        @end=${this.handleEnd}
+      ></k-speech-to-text>
+    `;
+  }
+
+  static styles = [
+    MarkdownEditorControl.styles,
+    css`
+    :host {
+      margin: var(--spacer_q);
+    }
+      k-speech-to-text {
+        /* Shrink the default 2.5rem circular mic button so it sits
+           comfortably alongside other toolbar controls. */
+        --btn_size: 2rem;
+      }
+    `
+  ];
+}
+
+customElements.define('k-md-speech-to-text', MarkdownSpeechToText);

package/src/components/markdownEditorControls/Strikethrough.js

@@ -0,0 +1,35 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+/*
+  GFM strikethrough — wraps the selection in `~~...~~`. marked renders this
+  to `<del>` (allowed by sanitizeHtml's default tag set), so it survives
+  the sanitize pass.
+*/
+export default class MarkdownStrikethrough extends MarkdownEditorControl {
+  constructor() {
+    super();
+    this.label = 'Strikethrough';
+  }
+
+  command() {
+    this.wrapSelection('~~', '~~', 'strikethrough');
+  }
+
+  render() {
+    return html`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_strikethrough"></k-icon>
+      </button>
+    `;
+  }
+}
+
+customElements.define('k-md-strikethrough', MarkdownStrikethrough);

package/src/components/markdownEditorControls/Table.js

@@ -0,0 +1,164 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+import '../Dropdown.js';
+
+/*
+  Table control. Opens a small dropdown with two number inputs (cols × rows)
+  and a Create button, then inserts a GFM markdown table with that many
+  empty cells at the cursor.
+*/
+export default class MarkdownTable extends MarkdownEditorControl {
+  constructor() {
+    super();
+    this.label = 'Table';
+  }
+
+  /*
+    The trigger is wired to Dropdown's own click handling, so the
+    base-class handleClick (which calls command()) would fire on top and
+    create a feedback loop. command() is a no-op here; the Insert button
+    inside the dropdown drives insertion.
+  */
+  command() {}
+
+  handleDropdownOpened = () => {
+    requestAnimationFrame(() => {
+      const cols = this.shadowRoot?.querySelector('.tbl-cols');
+      if(cols){ cols.value = '3'; cols.select(); }
+      const rows = this.shadowRoot?.querySelector('.tbl-rows');
+      if(rows) rows.value = '2';
+    });
+  };
+
+  handleFormKeydown = (e) => {
+    if(e.key === 'Enter'){
+      e.preventDefault();
+      this.#submit();
+    } else if(e.key === 'Escape'){
+      this.shadowRoot?.querySelector('k-dropdown')?.close();
+    }
+  };
+
+  handleInsertClick = () => this.#submit();
+
+  #submit() {
+    const cols = this.#clamp(this.shadowRoot?.querySelector('.tbl-cols')?.value, 1, 20);
+    const rows = this.#clamp(this.shadowRoot?.querySelector('.tbl-rows')?.value, 1, 50);
+    if(!cols || !rows) return;
+    const editor = this.editor;
+    if(!editor) return;
+    editor.replaceSelection(this.#buildTable(cols, rows), { selectInserted: false });
+    this.shadowRoot?.querySelector('k-dropdown')?.close();
+  }
+
+  #clamp(raw, min, max) {
+    const n = parseInt(raw, 10);
+    if(!Number.isFinite(n)) return 0;
+    return Math.max(min, Math.min(max, n));
+  }
+
+  #buildTable(cols, rows) {
+    const headerCells = Array.from({ length: cols }, (_, i) => ` Header ${i + 1} `).join('|');
+    const separatorCells = Array.from({ length: cols }, () => ' --- ').join('|');
+    const bodyCells = Array.from({ length: cols }, () => '   ').join('|');
+    const lines = [
+      `|${headerCells}|`,
+      `|${separatorCells}|`,
+      ...Array.from({ length: rows }, () => `|${bodyCells}|`)
+    ];
+    // Surround with newlines so the table starts on its own line and the
+    // user's cursor lands on a fresh line below it.
+    return `\n${lines.join('\n')}\n`;
+  }
+
+  render() {
+    return html`
+      <k-dropdown @opened=${this.handleDropdownOpened}>
+        <button
+          slot="trigger"
+          type="button"
+          class=${this.btnClass}
+          title=${this.label}
+          aria-label=${this.label}
+        >
+          <k-icon name="table"></k-icon>
+        </button>
+        <div class="tbl-form" @keydown=${this.handleFormKeydown}>
+          <input
+            class="tbl-cols"
+            type="number"
+            min="1"
+            max="20"
+            inputmode="numeric"
+            aria-label="Columns"
+            value="3"
+          />
+          <span class="tbl-x" aria-hidden="true">×</span>
+          <input
+            class="tbl-rows"
+            type="number"
+            min="1"
+            max="50"
+            inputmode="numeric"
+            aria-label="Rows"
+            value="2"
+          />
+          <button type="button" class="primary" @click=${this.handleInsertClick}>Insert</button>
+        </div>
+      </k-dropdown>
+    `;
+  }
+
+  static styles = [
+    MarkdownEditorControl.styles,
+    css`
+      .tbl-form {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        padding: 0.5rem;
+      }
+      .tbl-form input {
+        width: 2.5rem;
+        padding: 0.35rem 0.4rem;
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        font: inherit;
+        background: var(--c_bg);
+        color: var(--tc);
+        text-align: center;
+        /* Hide the up/down spinner buttons that take up extra width. */
+        -moz-appearance: textfield;
+      }
+      .tbl-form input::-webkit-inner-spin-button,
+      .tbl-form input::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+      .tbl-form input:focus-visible {
+        outline: none;
+        box-shadow: var(--focus_shadow);
+      }
+      .tbl-x {
+        color: var(--tc_muted);
+        font-weight: bold;
+      }
+      .tbl-form button.primary {
+        padding: 0.4rem 0.8rem;
+        border: 1px solid var(--c_primary);
+        border-radius: var(--radius);
+        background: var(--c_primary);
+        color: white;
+        cursor: pointer;
+        font: inherit;
+      }
+      .tbl-form button.primary:focus-visible {
+        outline: none;
+        box-shadow: var(--focus_shadow);
+      }
+    `
+  ];
+}
+
+customElements.define('k-md-table', MarkdownTable);