kempo-ui 0.4.4 → 0.4.6

package/src/components/markdownEditorControls/Image.js

@@ -0,0 +1,250 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+import '../Dropdown.js';
+import Dialog from '../Dialog.js';
+
+/*
+  Image control. Asks the user for a URL and alt text, then inserts a
+  markdown image (`![alt](url)`) at the cursor.
+
+  The popup type is configurable via the `popup` attribute:
+    popup="dropdown" (default) — anchored popover next to the button
+    popup="dialog"             — modal Dialog centered on the page
+
+  If the user has text selected when they click the button, it's pre-filled
+  into the alt text field.
+*/
+export default class MarkdownImage extends MarkdownEditorControl {
+  static properties = {
+    ...MarkdownEditorControl.properties,
+    popup: { type: String, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.label = 'Image';
+    this.popup = 'dropdown';
+  }
+
+  /*
+    For dropdown mode the trigger button toggles the dropdown via Dropdown's
+    own click handling — we don't want our base-class handleClick (which
+    calls command()) to fire on top, or it would create a feedback loop.
+    Override command() to do nothing in dropdown mode; the Insert button
+    inside the dropdown drives insertion instead.
+  */
+  command() {
+    if(this.popup === 'dialog') this.#openDialog();
+  }
+
+  #insert(url, alt) {
+    if(!url) return false;
+    this.editor?.replaceSelection(`![${alt}](${url})`, { selectInserted: false });
+    return true;
+  }
+
+  /*
+    Dropdown flow — inline popover form.
+  */
+  handleDropdownOpened = () => {
+    requestAnimationFrame(() => {
+      this.#urlInput?.focus();
+      // Pre-fill alt text with the current selection (if any).
+      const sel = this.getSelection();
+      if(this.#altInput) this.#altInput.value = sel.text || '';
+    });
+  };
+
+  handleDropdownClosed = () => {
+    if(this.#urlInput) this.#urlInput.value = '';
+    if(this.#altInput) this.#altInput.value = '';
+  };
+
+  handleFormKeydown = (e) => {
+    if(e.key === 'Enter'){
+      e.preventDefault();
+      this.#submitFromDropdown();
+    } else if(e.key === 'Escape'){
+      this.shadowRoot?.querySelector('k-dropdown')?.close();
+    }
+  };
+
+  handleInsertClick = () => this.#submitFromDropdown();
+
+  handleCancelClick = () => {
+    this.shadowRoot?.querySelector('k-dropdown')?.close();
+  };
+
+  #submitFromDropdown() {
+    const url = this.#urlInput?.value.trim() || '';
+    const alt = this.#altInput?.value.trim() || '';
+    if(!url){
+      this.#urlInput?.focus();
+      return;
+    }
+    this.#insert(url, alt);
+    this.shadowRoot?.querySelector('k-dropdown')?.close();
+  }
+
+  get #urlInput() { return this.shadowRoot?.querySelector('.image-url'); }
+  get #altInput() { return this.shadowRoot?.querySelector('.image-alt'); }
+
+  /*
+    Dialog flow — modal version, kept for consumers who want it.
+  */
+  #openDialog() {
+    const editor = this.editor;
+    if(!editor) return;
+    const sel = this.getSelection();
+
+    const urlInput = document.createElement('input');
+    urlInput.type = 'url';
+    urlInput.placeholder = 'https://example.com/image.png';
+    urlInput.required = true;
+    urlInput.style.cssText = 'padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;';
+
+    const altInput = document.createElement('input');
+    altInput.type = 'text';
+    altInput.placeholder = 'Description for screen readers';
+    altInput.value = sel.text || '';
+    altInput.style.cssText = 'padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;';
+
+    const content = document.createElement('div');
+    content.className = 'p';
+    content.style.cssText = 'display: flex; flex-direction: column; gap: 1rem;';
+    content.innerHTML = `
+      <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+        <label style="font-weight: bold;">Image URL</label>
+      </div>
+      <div style="display: flex; flex-direction: column; gap: 0.25rem;">
+        <label style="font-weight: bold;">Alt text</label>
+      </div>
+    `;
+    content.children[0].appendChild(urlInput);
+    content.children[1].appendChild(altInput);
+
+    Dialog.create(content, {
+      title: 'Insert Image',
+      cancelText: 'Cancel',
+      confirmText: 'Insert',
+      confirmClasses: 'success ml',
+      confirmAction: (event) => {
+        const url = urlInput.value.trim();
+        if(!url){
+          event.keepDialogOpen = true;
+          urlInput.focus();
+          return;
+        }
+        this.#insert(url, altInput.value.trim());
+      }
+    });
+    queueMicrotask(() => urlInput.focus());
+  }
+
+  render() {
+    if(this.popup === 'dialog'){
+      return html`
+        <button
+          type="button"
+          class=${this.btnClass}
+          title=${this.label}
+          aria-label=${this.label}
+          @click=${this.handleClick}
+        >
+          <k-icon name="image"></k-icon>
+        </button>
+      `;
+    }
+    return html`
+      <k-dropdown
+        @opened=${this.handleDropdownOpened}
+        @closed=${this.handleDropdownClosed}
+      >
+        <button
+          slot="trigger"
+          type="button"
+          class=${this.btnClass}
+          title=${this.label}
+          aria-label=${this.label}
+        >
+          <k-icon name="image"></k-icon>
+        </button>
+        <div class="image-form" @keydown=${this.handleFormKeydown}>
+          <label>Image URL</label>
+          <input
+            class="image-url"
+            type="url"
+            required
+            placeholder="https://example.com/image.png"
+          />
+          <label>Alt text</label>
+          <input
+            class="image-alt"
+            type="text"
+            placeholder="Description for screen readers"
+          />
+          <div class="image-actions">
+            <button type="button" class="no-btn" @click=${this.handleCancelClick}>Cancel</button>
+            <button type="button" class="no-btn primary" @click=${this.handleInsertClick}>Insert</button>
+          </div>
+        </div>
+      </k-dropdown>
+    `;
+  }
+
+  static styles = [
+    MarkdownEditorControl.styles,
+    css`
+      .image-form {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        padding: 0.75rem;
+        min-width: 16rem;
+      }
+      .image-form label {
+        font-weight: bold;
+        font-size: 0.875rem;
+      }
+      .image-form input {
+        padding: 0.5rem;
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        font: inherit;
+        background: var(--c_bg);
+        color: var(--tc);
+      }
+      .image-form input:focus-visible {
+        outline: none;
+        box-shadow: var(--focus_shadow);
+      }
+      .image-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.5rem;
+        margin-top: 0.25rem;
+      }
+      .image-actions button {
+        padding: 0.4rem 0.8rem;
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        background: var(--c_bg);
+        color: var(--tc);
+        cursor: pointer;
+        font: inherit;
+      }
+      .image-actions button.primary {
+        background: var(--c_primary);
+        color: white;
+        border-color: var(--c_primary);
+      }
+      .image-actions button:focus-visible {
+        outline: none;
+        box-shadow: var(--focus_shadow);
+      }
+    `
+  ];
+}
+
+customElements.define('k-md-image', MarkdownImage);

package/src/components/markdownEditorControls/Italic.js

@@ -0,0 +1,30 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class MarkdownItalic extends MarkdownEditorControl {
+  constructor() {
+    super();
+    this.label = 'Italic (Cmd/Ctrl+I)';
+  }
+
+  command() {
+    this.wrapSelection('_', '_', 'italic text');
+  }
+
+  render() {
+    return html`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_italic"></k-icon>
+      </button>
+    `;
+  }
+}
+
+customElements.define('k-md-italic', MarkdownItalic);

package/src/components/markdownEditorControls/Link.js

@@ -0,0 +1,74 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+/*
+  Link control. Wraps the selection in `[text](url)`. If the user has selected
+  text it becomes the link text and the URL placeholder is selected for them
+  to overtype. If nothing is selected, a `link text` placeholder is used and
+  the user can tab through to the URL.
+*/
+export default class MarkdownLink extends MarkdownEditorControl {
+  constructor() {
+    super();
+    this.label = 'Link';
+  }
+
+  command() {
+    const sel = this.getSelection();
+    const editor = this.editor;
+    if(!editor) return;
+    const ta = editor.textarea;
+    if(!ta) return;
+
+    const fireInput = (next, selStart, selEnd) => {
+      ta.value = next;
+      ta.selectionStart = selStart;
+      ta.selectionEnd = selEnd;
+      ta.focus();
+      editor.value = next;
+      ta.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+
+    // Toggle: if the selection (or just the cursor) sits anywhere inside an
+    // existing `[label](url)`, unwrap that whole link to just its label. This
+    // works whether the user has the label, the URL, or nothing selected —
+    // they just have to be somewhere inside the link.
+    const re = /\[([^\]]*)\]\([^)]*\)/g;
+    let m;
+    while((m = re.exec(ta.value)) !== null){
+      const matchStart = m.index;
+      const matchEnd = matchStart + m[0].length;
+      if(sel.start >= matchStart && sel.end <= matchEnd){
+        const label = m[1];
+        const next = ta.value.substring(0, matchStart) + label + ta.value.substring(matchEnd);
+        fireInput(next, matchStart, matchStart + label.length);
+        return;
+      }
+    }
+
+    // Otherwise insert a new link with the URL portion pre-selected so the
+    // user can immediately overtype it.
+    const text = sel.text || 'link text';
+    const inserted = `[${text}](url)`;
+    const next = ta.value.substring(0, sel.start) + inserted + ta.value.substring(sel.end);
+    const urlStart = sel.start + 1 + text.length + 2; // past `[text](`
+    fireInput(next, urlStart, urlStart + 'url'.length);
+  }
+
+  render() {
+    return html`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="link"></k-icon>
+      </button>
+    `;
+  }
+}
+
+customElements.define('k-md-link', MarkdownLink);

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);