kempo-ui 0.4.5 → 0.4.6

package/src/components/Resize.js

@@ -7,7 +7,8 @@ export default class Resize extends ShadowComponent {
 	/* Properties */
 	static properties = {
 		resizing: { type: String, reflect: true },
-		dimention: { type: String, reflect: true }
+		dimention: { type: String, reflect: true },
+		disabled: { type: Boolean, reflect: true }
 	};
 
 	/*
@@ -17,6 +18,7 @@ export default class Resize extends ShadowComponent {
 		super();
 		this.resizing = '';
 		this.dimension = '';
+		this.disabled = false;
 		this.startSize = { width: 0, height: 0 };
 		this.cleanupFuncs = [];
 	}
@@ -35,6 +37,7 @@ export default class Resize extends ShadowComponent {
 		Event Handlers
 	*/
 	dragStartHandler = ({ element }) => {
+		if(this.disabled) return;
 		const { width, height } = this.getBoundingClientRect();
 		this.startSize.width = width;
 		this.startSize.height = height;
@@ -46,14 +49,17 @@ export default class Resize extends ShadowComponent {
 	};
 
 	dragSideHandler = ({ x }) => {
+		if(this.disabled) return;
 		this.style.width = this.startSize.width + x + 'px';
 	};
 
 	dragBottomHandler = ({ y }) => {
+		if(this.disabled) return;
 		this.style.height = this.startSize.height + y + 'px';
 	};
 
 	dragCornerHandler = ({ x, y }) => {
+		if(this.disabled) return;
 		this.style.width = this.startSize.width + x + 'px';
 		this.style.height = this.startSize.height + y + 'px';
 	};
@@ -177,6 +183,16 @@ export default class Resize extends ShadowComponent {
 		:host([dimension="width"]) #corner {
 			display: none;
 		}
+		/* Disabled: handles can't capture pointer events, so a drag can't
+		   start in the first place; visual cue: handles fade out and the
+		   cursor reverts to default. */
+		:host([disabled]) #side,
+		:host([disabled]) #bottom,
+		:host([disabled]) #corner {
+			pointer-events: none;
+			cursor: default;
+			opacity: 0.4;
+		}
 	`;
 
 	/*

package/src/components/markdownEditorControls/Bold.js

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

package/src/components/markdownEditorControls/BulletList.js

@@ -0,0 +1,30 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class MarkdownBulletList extends MarkdownEditorControl {
+  constructor() {
+    super();
+    this.label = 'Bulleted list';
+  }
+
+  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_list_bulleted"></k-icon>
+      </button>
+    `;
+  }
+}
+
+customElements.define('k-md-bullet-list', MarkdownBulletList);

package/src/components/markdownEditorControls/Code.js

@@ -0,0 +1,39 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+/*
+  Toggle inline code (backticks) for the selection. If the selection spans
+  multiple lines, a triple-backtick fenced block is inserted instead.
+*/
+export default class MarkdownCode extends MarkdownEditorControl {
+  constructor() {
+    super();
+    this.label = 'Code';
+  }
+
+  command() {
+    const sel = this.getSelection();
+    if(sel.text.includes('\n')){
+      this.wrapSelection('```\n', '\n```', 'code');
+    } else {
+      this.wrapSelection('`', '`', 'code');
+    }
+  }
+
+  render() {
+    return html`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.label}
+        aria-label=${this.label}
+        @click=${this.handleClick}
+      >
+        <k-icon name="code"></k-icon>
+      </button>
+    `;
+  }
+}
+
+customElements.define('k-md-code', MarkdownCode);

package/src/components/markdownEditorControls/FormatBlock.js

@@ -0,0 +1,102 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+/*
+  Heading-block picker designed to go inside a `<k-md-menu>` (or any
+  container that wants menu-item-styled controls). The `tag` attribute
+  selects which heading level to switch the current line(s) to:
+
+    tag="h1" .. "h6" — Heading 1-6 (sets the `#` prefix, swapping any
+                       existing heading level for the new one)
+
+  Renders as a full-width button with an icon and a text label so it reads
+  cleanly as a menu item.
+*/
+const TAG_LABELS = {
+  h1: 'Heading 1',
+  h2: 'Heading 2',
+  h3: 'Heading 3',
+  h4: 'Heading 4',
+  h5: 'Heading 5',
+  h6: 'Heading 6'
+};
+
+const TAG_ICONS = {
+  h1: 'format_h1',
+  h2: 'format_h2',
+  h3: 'format_h3',
+  h4: 'format_h4',
+  h5: 'format_h5',
+  h6: 'format_h6'
+};
+
+export default class MarkdownFormatBlock extends MarkdownEditorControl {
+  static properties = {
+    ...MarkdownEditorControl.properties,
+    tag: { type: String, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.tag = 'h2';
+    this.label = '';
+  }
+
+  command() {
+    const tag = (this.tag || 'h2').toLowerCase();
+    if(/^h[1-6]$/.test(tag)){
+      const lvl = parseInt(tag.slice(1), 10);
+      this.insertLinePrefix('#'.repeat(lvl) + ' ', /^#{1,6} /);
+    }
+  }
+
+  get #displayLabel() {
+    if(this.label) return this.label;
+    return TAG_LABELS[(this.tag || 'h2').toLowerCase()] || this.tag;
+  }
+
+  get #iconName() {
+    return TAG_ICONS[(this.tag || 'h2').toLowerCase()] || 'format_h2';
+  }
+
+  render() {
+    return html`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title=${this.#displayLabel}
+        aria-label=${this.#displayLabel}
+        @click=${this.handleClick}
+      >
+        <k-icon name=${this.#iconName}></k-icon>
+        <span class="fb-label">${this.#displayLabel}</span>
+      </button>
+    `;
+  }
+
+  static styles = [
+    MarkdownEditorControl.styles,
+    css`
+      :host {
+        display: inline-flex;
+      }
+      .ctrl {
+        gap: 0.5rem;
+        justify-content: flex-start;
+        white-space: nowrap;
+      }
+      /* When this is slotted into something that stretches it (a menu),
+         the button fills the row instead of staying compact. */
+      :host([slot]) .ctrl,
+      :host(*) .ctrl {
+        width: 100%;
+      }
+      .fb-label {
+        font-size: 0.875rem;
+      }
+    `
+  ];
+}
+
+customElements.define('k-md-format-block', MarkdownFormatBlock);

package/src/components/markdownEditorControls/Heading.js

@@ -0,0 +1,45 @@
+import MarkdownEditorControl from './MarkdownEditorControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+/*
+  Heading control. Defaults to H2 (the typical "section title" level inside
+  a comment / chat / form). Override the level with the `level` attribute
+  (1–6) — e.g. <k-md-heading level="3"></k-md-heading>.
+*/
+export default class MarkdownHeading extends MarkdownEditorControl {
+  static properties = {
+    ...MarkdownEditorControl.properties,
+    level: { type: Number, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.level = 2;
+    this.label = 'Heading';
+  }
+
+  command() {
+    const lvl = Math.min(6, Math.max(1, Number(this.level) || 2));
+    // Pass a replacePattern so clicking a different heading level swaps the
+    // existing one out instead of stacking another `#` group on top.
+    this.insertLinePrefix('#'.repeat(lvl) + ' ', /^#{1,6} /);
+  }
+
+  render() {
+    const iconLevel = Math.min(6, Math.max(1, Number(this.level) || 2));
+    return html`
+      <button
+        type="button"
+        class=${this.btnClass}
+        title="${this.label} ${iconLevel}"
+        aria-label="${this.label} ${iconLevel}"
+        @click=${this.handleClick}
+      >
+        <k-icon name="format_h${iconLevel}"></k-icon>
+      </button>
+    `;
+  }
+}
+
+customElements.define('k-md-heading', MarkdownHeading);

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