kempo-ui 0.3.7 → 0.3.8

package/src/components/NavSpacer.js

@@ -0,0 +1,55 @@
+import ShadowComponent from './ShadowComponent.js';
+import { html, css } from '../lit-all.min.js';
+
+export default class NavSpacer extends ShadowComponent {
+	#resizeObserver = null;
+
+	/*
+		Lifecycle Callbacks
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this.#observe();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = null;
+	}
+
+	/*
+		Utility Functions
+	*/
+	#observe() {
+		this.#resizeObserver?.disconnect();
+		const nav = document.querySelector('k-nav[fixed]');
+		if(!nav) {
+			this.style.height = '0px';
+			return;
+		}
+		this.#resizeObserver = new ResizeObserver(entries => {
+			this.style.height = `${entries[0].contentRect.height}px`;
+		});
+		this.#resizeObserver.observe(nav);
+	}
+
+	/*
+		Rendering
+	*/
+	render() {
+		return html``;
+	}
+
+	/*
+		Styles
+	*/
+	static styles = css`
+		:host {
+			display: block;
+			margin-bottom: var(--spacer);
+		}
+	`;
+}
+
+customElements.define('k-nav-spacer', NavSpacer);

package/src/components/htmlEditorControls/AlignCenter.js

@@ -31,10 +31,10 @@ export default class AlignCenter extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleClick = () => {
-		if(this.editor){
-			this.editor.alignCenter();
-		}
+	handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if(this.editor) this.editor.alignCenter();
 	};
 
 	/*
@@ -52,7 +52,7 @@ export default class AlignCenter extends HtmlEditorControl {
 		this.hidden = this.editorMode === 'code';
 		
 		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_align_center"></k-icon>
 				</slot>

package/src/components/htmlEditorControls/AlignJustify.js

@@ -31,10 +31,10 @@ export default class AlignJustify extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleClick = () => {
-		if(this.editor){
-			this.editor.alignJustify();
-		}
+	handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if(this.editor) this.editor.alignJustify();
 	};
 
 	/*
@@ -52,7 +52,7 @@ export default class AlignJustify extends HtmlEditorControl {
 		this.hidden = this.editorMode === 'code';
 		
 		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_align_justify"></k-icon>
 				</slot>

package/src/components/htmlEditorControls/AlignLeft.js

@@ -31,10 +31,10 @@ export default class AlignLeft extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleClick = () => {
-		if(this.editor){
-			this.editor.alignLeft();
-		}
+	handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if(this.editor) this.editor.alignLeft();
 	};
 
 	/*
@@ -52,7 +52,7 @@ export default class AlignLeft extends HtmlEditorControl {
 		this.hidden = this.editorMode === 'code';
 		
 		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_align_left"></k-icon>
 				</slot>

package/src/components/htmlEditorControls/AlignRight.js

@@ -31,10 +31,10 @@ export default class AlignRight extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleClick = () => {
-		if(this.editor){
-			this.editor.alignRight();
-		}
+	handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if(this.editor) this.editor.alignRight();
 	};
 
 	/*
@@ -52,7 +52,7 @@ export default class AlignRight extends HtmlEditorControl {
 		this.hidden = this.editorMode === 'code';
 		
 		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_align_right"></k-icon>
 				</slot>

package/src/components/htmlEditorControls/Bold.js

@@ -31,10 +31,10 @@ export default class Bold extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleClick = () => {
-		if(this.editor){
-			this.editor.bold();
-		}
+	handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if(this.editor) this.editor.bold();
 	};
 
 	/*
@@ -52,7 +52,7 @@ export default class Bold extends HtmlEditorControl {
 		this.hidden = this.editorMode === 'code';
 		
 		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_bold"></k-icon>
 				</slot>

package/src/components/htmlEditorControls/BulletList.js

@@ -31,10 +31,10 @@ export default class BulletList extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleClick = () => {
-		if(this.editor){
-			this.editor.unorderedList();
-		}
+	handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if(this.editor) this.editor.unorderedList();
 	};
 
 	/*
@@ -52,7 +52,7 @@ export default class BulletList extends HtmlEditorControl {
 		this.hidden = this.editorMode === 'code';
 		
 		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_list_bulleted"></k-icon>
 				</slot>

package/src/components/htmlEditorControls/ClearFormatting.js

@@ -31,10 +31,10 @@ export default class ClearFormatting extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleClick = () => {
-		if(this.editor){
-			this.editor.removeFormat();
-		}
+	handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if(this.editor) this.editor.removeFormat();
 	};
 
 	/*
@@ -52,7 +52,7 @@ export default class ClearFormatting extends HtmlEditorControl {
 		this.hidden = this.editorMode === 'code';
 		
 		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_clear"></k-icon>
 				</slot>

package/src/components/htmlEditorControls/CodeBlock.js

@@ -32,18 +32,26 @@ export default class CodeBlock extends HtmlEditorControl {
 		Event Handlers
 	*/
 	handleMouseDown = (e) => {
-		const savedSelection = window.getSelection()?.toString();
 		e.preventDefault();
 		e.stopPropagation();
-		if(this.editor){
-			if(savedSelection){
-				this.editor.wrapSelection('<pre>', '</pre>', savedSelection);
-			} else {
-				this.editor.formatBlock('pre');
-			}
-		}
+		if(!this.editor) return;
+		this.editor.formatBlock(this.isInCodeBlock() ? 'p' : 'pre');
 	};
 
+	isInCodeBlock() {
+		if(!this.editor?.lexicalEditor) return false;
+		let result = false;
+		const { lexical, code } = this.editor.lx;
+		this.editor.lexicalEditor.getEditorState().read(() => {
+			const sel = lexical.$getSelection();
+			if(!lexical.$isRangeSelection(sel)) return;
+			const node = sel.anchor.getNode();
+			const topLevel = node.getTopLevelElementOrThrow();
+			result = code.$isCodeNode(topLevel);
+		});
+		return result;
+	}
+
 	/*
 		Utility Functions
 	*/

package/src/components/htmlEditorControls/CreateLink.js

@@ -77,14 +77,10 @@ export default class CreateLink extends HtmlEditorControl {
 					return;
 				}
 
-				const linkEl = document.createElement('a');
-				linkEl.href = url;
-				linkEl.textContent = text || url;
-
-				if(this.editor.selection){
-					this.editor.replaceSelectionWithElement(linkEl, true);
+				if(this.editor.selection && (!text || text === selectedText)){
+					this.editor.createLink(url);
 				} else {
-					this.editor.insertElementAtCursor(linkEl, true);
+					this.editor.createLinkWithText(url, text || url);
 				}
 			}
 		});

package/src/components/htmlEditorControls/FormatBlock.js

@@ -42,10 +42,10 @@ export default class FormatBlock extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleClick = () => {
-		if(this.editor){
-			this.editor.formatBlock(this.tag);
-		}
+	handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if(this.editor) this.editor.formatBlock(this.tag);
 	};
 
 	/*
@@ -66,7 +66,7 @@ export default class FormatBlock extends HtmlEditorControl {
 		const iconName = this.getDefaultIcon();
 		
 		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="${iconName}"></k-icon>
 				</slot>

package/src/components/htmlEditorControls/InlineCode.js

@@ -32,21 +32,9 @@ export default class InlineCode extends HtmlEditorControl {
 		Event Handlers
 	*/
 	handleMouseDown = (e) => {
-		if(!this.editor) return;
-
 		e.preventDefault();
 		e.stopPropagation();
-
-		const codeEl = document.createElement('code');
-		
-		const markerData = this.editor.getValueWithSelectionMarkers();
-		if(markerData.hasSelection){
-			codeEl.textContent = markerData.selectedText;
-			this.editor.replaceSelectionWithElement(codeEl, true);
-		} else {
-			codeEl.textContent = '\u200B';
-			this.editor.insertElementAtCursor(codeEl, true);
-		}
+		if(this.editor) this.editor.lexicalFormat('code');
 	};
 
 	/*

package/src/components/htmlEditorControls/InsertTable.js

@@ -36,54 +36,45 @@ export default class InsertTable extends HtmlEditorControl {
 		e.preventDefault();
 		e.stopPropagation();
 
-		// Check if cursor is in a table
-		const sel = this.editor.shadowRoot.getSelection() || window.getSelection();
-		let currentTable = null;
-		let cellData = null;
-		
-		if(sel.rangeCount){
-			let node = sel.getRangeAt(0).startContainer;
-			if(node.nodeType === Node.TEXT_NODE){
-				node = node.parentElement;
-			}
-			currentTable = node.closest('table');
-		}
-
-		// Determine if we're editing or inserting
-		const isEditing = !!currentTable;
+		// Check if cursor is in a table using Lexical
+		let isEditing = false;
 		let defaultRows = 3;
 		let defaultCols = 3;
 		let defaultHeaders = true;
-
-		if(isEditing){
-			// Extract existing table data
-			const thead = currentTable.querySelector('thead');
-			const tbody = currentTable.querySelector('tbody');
-			const hasHeaders = !!thead;
-			
-			cellData = [];
-			
-			// Get header data
-			if(hasHeaders){
-				const headerRow = thead.querySelector('tr');
-				const headers = Array.from(headerRow.cells).map(cell => cell.innerHTML);
-				cellData.push(headers);
-				defaultCols = headers.length;
-			}
-			
-			// Get body data
-			const bodyRows = tbody.querySelectorAll('tr');
-			bodyRows.forEach(row => {
-				const rowData = Array.from(row.cells).map(cell => cell.innerHTML);
-				cellData.push(rowData);
-				if(rowData.length > defaultCols) defaultCols = rowData.length;
+		let cellData = null;
+		let tableNodeKey = null;
+
+		if(this.editor.lexicalEditor){
+			const { lexical, table } = this.editor.lx;
+			this.editor.lexicalEditor.getEditorState().read(() => {
+				const sel = lexical.$getSelection();
+				if(!lexical.$isRangeSelection(sel)) return;
+				let node = sel.anchor.getNode();
+				while(node){
+					if(table.$isTableNode(node)){
+						isEditing = true;
+						tableNodeKey = node.getKey();
+						cellData = [];
+						const rows = node.getChildren();
+						let hasHeaders = false;
+						rows.forEach((row, rowIndex) => {
+							const rowData = [];
+							row.getChildren().forEach(cell => {
+								if(rowIndex === 0 && table.$isTableCellNode(cell) && cell.getHeaderStyles() === table.TableCellHeaderStates.ROW){
+									hasHeaders = true;
+								}
+								rowData.push(cell.getTextContent());
+							});
+							cellData.push(rowData);
+							if(rowData.length > defaultCols) defaultCols = rowData.length;
+						});
+						defaultHeaders = hasHeaders;
+						defaultRows = hasHeaders ? rows.length - 1 : rows.length;
+						break;
+					}
+					node = node.getParent();
+				}
 			});
-			
-			defaultRows = bodyRows.length;
-			defaultHeaders = hasHeaders;
-			
-			// Remove the existing table
-			currentTable.remove();
 		}
 
 		// Create dialog inputs
@@ -134,6 +125,14 @@ export default class InsertTable extends HtmlEditorControl {
 				const cols = parseInt(colsInput.value) || 3;
 				const includeHeaders = headersCheckbox.checked;
 
+				if(isEditing && tableNodeKey){
+					const { lexical } = this.editor.lx;
+					this.editor.lexicalEditor.update(() => {
+						const tableNode = lexical.$getNodeByKey(tableNodeKey);
+						if(tableNode) tableNode.remove();
+					}, { discrete: true });
+				}
+
 				this.editor.insertTable(rows, cols, includeHeaders, cellData);
 			}
 		});

package/src/components/htmlEditorControls/Italic.js

@@ -31,10 +31,10 @@ export default class Italic extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleClick = () => {
-		if(this.editor){
-			this.editor.italic();
-		}
+	handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if(this.editor) this.editor.italic();
 	};
 
 	/*
@@ -52,7 +52,7 @@ export default class Italic extends HtmlEditorControl {
 		this.hidden = this.editorMode === 'code';
 		
 		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_italic"></k-icon>
 				</slot>

package/src/components/htmlEditorControls/Mode.js

@@ -25,7 +25,7 @@ export default class Mode extends HtmlEditorControl {
   */
   handleClick = () => {
     if(!this.editor) return;
-    this.editor.mode = this.editor.mode === 'visual' ? 'code' : 'visual';
+    this.editor.toggleMode();
   };
 
   /*

package/src/components/htmlEditorControls/NumberList.js

@@ -31,10 +31,10 @@ export default class NumberList extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleClick = () => {
-		if(this.editor){
-			this.editor.orderedList();
-		}
+	handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if(this.editor) this.editor.orderedList();
 	};
 
 	/*
@@ -52,7 +52,7 @@ export default class NumberList extends HtmlEditorControl {
 		this.hidden = this.editorMode === 'code';
 		
 		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_list_numbered"></k-icon>
 				</slot>

package/src/components/htmlEditorControls/Strikethrough.js

@@ -31,10 +31,10 @@ export default class Strikethrough extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleClick = () => {
-		if(this.editor){
-			this.editor.strikethrough();
-		}
+	handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if(this.editor) this.editor.strikethrough();
 	};
 
 	/*
@@ -52,7 +52,7 @@ export default class Strikethrough extends HtmlEditorControl {
 		this.hidden = this.editorMode === 'code';
 		
 		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="strikethrough_s"></k-icon>
 				</slot>

package/src/components/htmlEditorControls/Underline.js

@@ -31,10 +31,10 @@ export default class Underline extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleClick = () => {
-		if(this.editor){
-			this.editor.underline();
-		}
+	handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if(this.editor) this.editor.underline();
 	};
 
 	/*
@@ -52,7 +52,7 @@ export default class Underline extends HtmlEditorControl {
 		this.hidden = this.editorMode === 'code';
 		
 		return html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_underlined"></k-icon>
 				</slot>

package/src/components/htmlEditorNodes/HtmlComment.js

@@ -0,0 +1,118 @@
+import { html, render } from '../../lit-all.min.js';
+import '../Icon.js';
+import '../Dropdown.js';
+const LEXICAL_VERSION = '0.43.0';
+const { DecoratorNode, $applyNodeReplacement, $getNodeByKey } = await import(`https://esm.sh/lexical@${LEXICAL_VERSION}`);
+
+class HtmlCommentLexicalNode extends DecoratorNode {
+  static getType() { return 'html-comment'; }
+
+  static clone(node) { return new HtmlCommentLexicalNode(node.__comment, node.__key); }
+
+  static isVisualCompatible(domNode) {
+    return domNode.nodeType === Node.COMMENT_NODE;
+  }
+
+  static preprocessHtml(htmlString) {
+    return htmlString.replace(/<!--(.*?)-->/gs, (_, text) => `<span data-html-comment="${text.replace(/"/g, '&quot;')}"></span>`);
+  }
+
+  static importDOM() {
+    return {
+      span: domNode => {
+        if(!domNode.hasAttribute('data-html-comment')) return null;
+        return {
+          conversion: n => ({ node: $createHtmlCommentNode(n.getAttribute('data-html-comment') || '') }),
+          priority: 2
+        };
+      }
+    };
+  }
+
+  static importJSON(json) { return $createHtmlCommentNode(json.comment || ''); }
+
+  constructor(comment = '', key) {
+    super(key);
+    this.__comment = comment;
+  }
+
+  getComment() { return this.getLatest().__comment; }
+
+  setComment(comment) {
+    const self = this.getWritable();
+    self.__comment = comment;
+    return self;
+  }
+
+  createDOM(config, editor) {
+    const container = document.createElement('span');
+    const key = this.__key;
+    render(html`
+      <k-dropdown close-on-select="false" open-direction="down left"
+        contenteditable="false"
+        data-html-comment=${this.__comment}
+        title=${this.__comment || 'HTML Comment (empty)'}
+        @mousedown=${e => e.stopPropagation()}
+      >
+        <k-icon slot="trigger" name="comment" class="tc-muted"
+          style="cursor:pointer"
+          @mousedown=${e => { e.preventDefault(); e.stopPropagation(); }}
+        ></k-icon>
+        <div class="pq">
+          <div class="small tc-muted mbh">HTML Comment</div>
+          <textarea class="ff-mono full p0"
+					style="resize: both"
+            .value=${this.__comment}
+            @input=${e => {
+              const host = e.target.closest('[data-html-comment]');
+              if(host) { host.setAttribute('data-html-comment', e.target.value); host.title = e.target.value; }
+            }}
+            @blur=${e => {
+              editor.update(() => {
+                const node = $getNodeByKey(key);
+                if(node) node.setComment(e.target.value);
+              });
+            }}
+            @keydown=${e => e.stopPropagation()}
+            @beforeinput=${e => e.stopPropagation()}
+          ></textarea>
+        </div>
+      </k-dropdown>
+    `, container);
+    return container.firstElementChild;
+  }
+
+  updateDOM(prevNode, dom) {
+    if(prevNode.__comment !== this.__comment){
+      dom.setAttribute('data-html-comment', this.__comment);
+      dom.title = this.__comment || 'HTML Comment (empty)';
+    }
+    return false;
+  }
+
+  exportDOM() {
+    return { element: document.createComment(this.__comment) };
+  }
+
+  exportJSON() {
+    return { ...super.exportJSON(), type: 'html-comment', comment: this.__comment };
+  }
+
+  isInline() { return true; }
+
+  isKeyboardSelectable() { return true; }
+
+  decorate() { return null; }
+}
+
+const $createHtmlCommentNode = (comment = '') => $applyNodeReplacement(new HtmlCommentLexicalNode(comment));
+
+const $isHtmlCommentNode = node => node instanceof HtmlCommentLexicalNode;
+
+export { HtmlCommentLexicalNode, $createHtmlCommentNode, $isHtmlCommentNode };
+
+export default class HenHtmlComment extends HTMLElement {
+  static lexicalNode = HtmlCommentLexicalNode;
+}
+
+customElements.define('k-hen-html-comment', HenHtmlComment);