kempo-ui 0.4.20 → 0.4.21

package/src/components/htmlEditorControls/TextColor.js

@@ -1,189 +0,0 @@
-import DropdownControl from './DropdownControl.js';
-import {html, css} from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class TextColor extends DropdownControl {
-	static properties = {
-		editorMode: {type: String, state: true},
-		colors: {type: String},
-		disableRemove: {type: Boolean, attribute: 'disable-remove'},
-		disablePicker: {type: Boolean, attribute: 'disable-picker'}
-	};
-
-	/*
-		Styles
-	*/
-	static styles = [
-		DropdownControl.styles,
-		css`
-			.dropdown-content {
-				padding: 8px;
-				min-width: 200px;
-			}
-
-			.remove-btn {
-				width: 100%;
-				padding: 8px;
-				margin-bottom: 8px;
-				border: 1px solid var(--border-color, #ccc);
-				background: var(--background-color, white);
-				cursor: pointer;
-				border-radius: 4px;
-			}
-
-			.remove-btn:hover {
-				background: var(--hover-background-color, #f5f5f5);
-			}
-
-			.color-swatches {
-				display: grid;
-			grid-template-columns: repeat(6, 1fr);
-			}
-
-			.color-swatch {
-				width: 32px;
-				height: 32px;
-				border: 1px solid var(--border-color, #ccc);
-				cursor: pointer;
-				border-radius: 4px;
-			}
-
-			.color-swatch:hover {
-				border-color: var(--primary-color, #007acc);
-				box-shadow: 0 0 4px rgba(0, 122, 204, 0.3);
-			}
-
-			.picker-row {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-			}
-
-			.picker-row label {
-				flex-shrink: 0;
-			}
-
-			.picker-row input[type="color"] {
-				flex: 1;
-				height: 32px;
-				border: 1px solid var(--border-color, #ccc);
-				border-radius: 4px;
-				cursor: pointer;
-			}
-		`
-	];
-
-	/*
-		Constructor
-	*/
-	constructor(){
-		super();
-		this.colors = '#000000,#e60000,#ff9900,#ffff00,#008a00,#0066cc,#9933ff,#ffffff,#facccc,#ffebcc,#ffffcc,#cce8cc,#cce0f5,#ebd6ff';
-		this.disableRemove = false;
-		this.disablePicker = false;
-		this.icon = 'format_color_text';
-	}
-
-	/*
-		Lifecycle Callbacks
-	*/
-	connectedCallback(){
-		super.connectedCallback();
-		this.updateEditorMode();
-		this.editor?.addEventListener('mode-changed', () => this.updateEditorMode());
-	}
-
-	/*
-		Event Handlers
-	*/
-	handleRemove = (e) => {
-		if(this.editor){
-			this.editor.removeTextColor();
-		}
-		this.opened = false;
-	};
-
-	handleSwatchClick = (e) => {
-		const color = e.target.style.backgroundColor;
-		if(this.editor && color){
-			const rgb = color.match(/\d+/g);
-			const hex = rgb ? '#' + rgb.map(x => parseInt(x).toString(16).padStart(2, '0')).join('') : color;
-			this.editor.setTextColor(hex);
-		}
-		this.opened = false;
-	};
-
-	handlePickerChange = (e) => {
-		const color = e.target.value;
-		if(this.editor && color){
-			this.editor.setTextColor(color);
-		}
-		this.opened = false;
-	};
-
-	/*
-		Utility Functions
-	*/
-	updateEditorMode(){
-		if(!this.editor) return;
-		this.editorMode = this.editor.mode;
-	}
-
-	getColorArray(){
-		return this.colors.split(',').map(c => c.trim()).filter(c => c);
-	}
-
-	/*
-		Rendering
-	*/
-	render(){
-		this.hidden = this.editorMode === 'code';
-
-		const colorArray = this.getColorArray();
-
-		return html`
-			<k-dropdown 
-				?opened=${this.opened}
-				@opened=${this.handleOpened}
-				@closed=${this.handleClosed}
-			>
-				<button 
-					slot="trigger" 
-					class="${this.buttonClasses}"
-				>
-					<k-icon name="format_color_text"></k-icon>
-				</button>
-				
-				<div class="dropdown-content">
-					${!this.disableRemove ? html`
-						<button class="remove-btn" @click=${this.handleRemove}>
-							Remove Color
-						</button>
-					` : ''}
-					
-					<div class="color-swatches">
-						${colorArray.map(color => html`
-							<button 
-								class="color-swatch" 
-								style="background-color: ${color}"
-								@click=${this.handleSwatchClick}
-							></button>
-						`)}
-					</div>
-
-					${!this.disablePicker ? html`
-						<div class="picker-row">
-							<label>Custom:</label>
-							<input 
-								type="color" 
-								@input=${this.handlePickerChange}
-							/>
-						</div>
-					` : ''}
-				</div>
-			</k-dropdown>
-		`;
-	}
-}
-
-customElements.define('k-hec-text-color', TextColor);

package/src/components/htmlEditorControls/Underline.js

@@ -1,63 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class Underline extends HtmlEditorControl {
-	static properties = {
-		editorMode: {type: String, state: true}
-	};
-
-	/*
-		Styles
-	*/
-	static styles = [
-		HtmlEditorControl.styles,
-		css`
-			:host {
-				display: inline-flex;
-			}
-		`
-	];
-
-	/*
-		Lifecycle Callbacks
-	*/
-	connectedCallback(){
-		super.connectedCallback();
-		this.updateEditorMode();
-		this.editor?.addEventListener('mode-changed', () => this.updateEditorMode());
-	}
-
-	/*
-		Event Handlers
-	*/
-	handleClick = () => {
-		if(this.editor) this.editor.underline();
-	};
-
-	/*
-		Utility Functions
-	*/
-	updateEditorMode(){
-		if(!this.editor) return;
-		this.editorMode = this.editor.mode;
-	}
-
-	/*
-		Rendering
-	*/
-	render() {
-		this.hidden = this.editorMode === 'code';
-		
-		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
-				<slot name="icon">
-					<k-icon name="format_underlined"></k-icon>
-				</slot>
-				<slot></slot>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-hec-underline', Underline);

package/src/components/htmlEditorControls/WordCount.js

@@ -1,76 +0,0 @@
-import HtmlEditorControl from './HtmlEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-
-export default class WordCount extends HtmlEditorControl {
-	static properties = {
-		count: {type: Number, state: true}
-	};
-
-	/*
-		Lifecycle Callbacks
-	*/
-	constructor(){
-		super();
-		this.count = 0;
-	}
-
-	connectedCallback(){
-		super.connectedCallback();
-		
-		if(!this.editor) return;
-		
-		this.editor.addEventListener('ready', () => {
-			this.updateCount();
-		});
-		
-		this.editor.addEventListener('change', () => {
-			this.updateCount();
-		});
-		
-		setTimeout(() => this.updateCount(), 0);
-	}
-
-	/*
-		Utility Functions
-	*/
-	updateCount = () => {
-		if(!this.editor) return;
-		
-		const parser = new DOMParser();
-		const doc = parser.parseFromString(this.editor.getValue(), 'text/html');
-		const text = doc.body.innerText || '';
-		const words = text.trim().split(/\s+/).filter(word => word.length > 0);
-		this.count = words.length;
-	};
-
-	/*
-		Rendering
-	*/
-	render(){
-		return html`
-			<span class="word-count">
-				<slot name="label">Words:</slot> ${this.count}
-			</span>
-		`;
-	}
-
-	static styles = [
-		HtmlEditorControl.styles,
-		css`
-			:host {
-				display: inline-flex;
-				align-items: center;
-				padding: 0 0.5rem;
-				font-size: 0.875rem;
-				color: var(--text-color-secondary, #666);
-			}
-			.word-count {
-				display: flex;
-				align-items: center;
-				gap: 0.25rem;
-			}
-		`
-	];
-}
-
-customElements.define('k-hec-word-count', WordCount);

package/src/components/markdownEditorControls/Bold.js

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,46 +0,0 @@
-import MarkdownEditorControl from './MarkdownEditorControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-import { bound } from '../../utils/number.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 = bound(Number(this.level) || 2, 1, 6);
-    // 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 = bound(Number(this.level) || 2, 1, 6);
-    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);