kempo-ui 0.3.8 → 0.3.10

package/src/components/htmlEditorControls/InsertTable.js

@@ -30,52 +30,16 @@ export default class InsertTable extends HtmlEditorControl {
 	/*
 		Event Handlers
 	*/
-	handleMouseDown = (e) => {
+	handleClick = () => {
 		if(!this.editor) return;
 
-		e.preventDefault();
-		e.stopPropagation();
 
-		// Check if cursor is in a table using Lexical
-		let isEditing = false;
-		let defaultRows = 3;
-		let defaultCols = 3;
-		let defaultHeaders = true;
-		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();
-				}
-			});
-		}
+		const existing = this.editor.getTableAtSelection();
+		const isEditing = !!existing;
+		const defaultRows = existing?.rows ?? 3;
+		const defaultCols = existing?.cols ?? 3;
+		const defaultHeaders = existing?.hasHeaders ?? true;
+		const cellData = existing?.cellData ?? null;
 
 		// Create dialog inputs
 		const rowsInput = document.createElement('input');
@@ -124,15 +88,7 @@ export default class InsertTable extends HtmlEditorControl {
 				const rows = parseInt(rowsInput.value) || 3;
 				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 });
-				}
-
+				if(isEditing) this.editor.removeTableByKey(existing.key);
 				this.editor.insertTable(rows, cols, includeHeaders, cellData);
 			}
 		});
@@ -147,7 +103,7 @@ export default class InsertTable extends HtmlEditorControl {
 		return html`
 			<button
 				class="${this.buttonClasses}"
-				@mousedown="${this.handleMouseDown}"
+				@click="${this.handleClick}"
 			>
 				<slot name="icon">
 					<k-icon name="table"></k-icon>

package/src/components/htmlEditorControls/Italic.js

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

package/src/components/htmlEditorControls/Mode.js

@@ -11,6 +11,8 @@ export default class Mode extends HtmlEditorControl {
     mode: {type: String, reflect: true}
   };
 
+  hidesInCodeMode = false;
+
   /*
     Lifecycle Callbacks
   */

package/src/components/htmlEditorControls/NumberList.js

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

package/src/components/htmlEditorControls/Strikethrough.js

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

package/src/components/htmlEditorControls/TextBackgroundColor.js

@@ -97,8 +97,6 @@ export default class TextBackgroundColor extends DropdownControl {
 		Event Handlers
 	*/
 	handleRemove = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
 		if(this.editor){
 			this.editor.removeTextBackgroundColor();
 		}
@@ -106,8 +104,6 @@ export default class TextBackgroundColor extends DropdownControl {
 	};
 
 	handleSwatchClick = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
 		const color = e.target.style.backgroundColor;
 		if(this.editor && color){
 			const rgb = color.match(/\d+/g);
@@ -118,8 +114,6 @@ export default class TextBackgroundColor extends DropdownControl {
 	};
 
 	handlePickerChange = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
 		const color = e.target.value;
 		if(this.editor && color){
 			this.editor.setTextBackgroundColor(color);

package/src/components/htmlEditorControls/TextColor.js

@@ -97,8 +97,6 @@ export default class TextColor extends DropdownControl {
 		Event Handlers
 	*/
 	handleRemove = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
 		if(this.editor){
 			this.editor.removeTextColor();
 		}
@@ -106,8 +104,6 @@ export default class TextColor extends DropdownControl {
 	};
 
 	handleSwatchClick = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
 		const color = e.target.style.backgroundColor;
 		if(this.editor && color){
 			const rgb = color.match(/\d+/g);
@@ -118,8 +114,6 @@ export default class TextColor extends DropdownControl {
 	};
 
 	handlePickerChange = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
 		const color = e.target.value;
 		if(this.editor && color){
 			this.editor.setTextColor(color);

package/src/components/htmlEditorControls/Underline.js

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

package/tests/components/CodeEditor.browser-test.js

@@ -0,0 +1,297 @@
+import '../../src/components/CodeEditor.js';
+
+const createEditor = async (attrs = '') => {
+	const container = document.createElement('div');
+	container.innerHTML = `<k-code-editor language="javascript" ${attrs} style="height:200px"></k-code-editor>`;
+	document.body.appendChild(container);
+	const editor = container.querySelector('k-code-editor');
+	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
+	return { container, editor };
+};
+
+const cleanup = container => {
+	const editor = container.querySelector('k-code-editor');
+	if(editor?.fullscreen) editor.exitFullscreen();
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Fullscreen
+	*/
+	'fullscreen should default to false': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(editor.fullscreen !== false){
+			cleanup(container);
+			return fail('fullscreen should default to false');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'enterFullscreen should set fullscreen to true': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.enterFullscreen();
+		if(!editor.fullscreen){
+			cleanup(container);
+			return fail('fullscreen should be true after enterFullscreen()');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'exitFullscreen should set fullscreen to false': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.enterFullscreen();
+		editor.exitFullscreen();
+		if(editor.fullscreen){
+			cleanup(container);
+			return fail('fullscreen should be false after exitFullscreen()');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'toggleFullscreen should alternate fullscreen': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.toggleFullscreen();
+		if(!editor.fullscreen){
+			cleanup(container);
+			return fail('First toggle should set fullscreen to true');
+		}
+		editor.toggleFullscreen();
+		if(editor.fullscreen){
+			cleanup(container);
+			return fail('Second toggle should set fullscreen to false');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'enterFullscreen should dispatch fullscreen-changed with true': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		let detail = null;
+		editor.addEventListener('fullscreen-changed', e => { detail = e.detail; }, { once: true });
+		editor.enterFullscreen();
+		if(!detail || detail.fullscreen !== true){
+			cleanup(container);
+			return fail('Should dispatch fullscreen-changed with fullscreen: true');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'exitFullscreen should dispatch fullscreen-changed with false': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.enterFullscreen();
+		let detail = null;
+		editor.addEventListener('fullscreen-changed', e => { detail = e.detail; }, { once: true });
+		editor.exitFullscreen();
+		if(!detail || detail.fullscreen !== false){
+			cleanup(container);
+			return fail('Should dispatch fullscreen-changed with fullscreen: false');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'fullscreen should reflect as attribute': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.enterFullscreen();
+		await editor.updateComplete;
+		if(!editor.hasAttribute('fullscreen')){
+			cleanup(container);
+			return fail('Should have fullscreen attribute when fullscreen=true');
+		}
+		editor.exitFullscreen();
+		await editor.updateComplete;
+		if(editor.hasAttribute('fullscreen')){
+			cleanup(container);
+			return fail('Should remove fullscreen attribute when fullscreen=false');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	/*
+		Word Wrap
+	*/
+	'wordWrap should default to true': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(editor.wordWrap !== true){
+			cleanup(container);
+			return fail('wordWrap should default to true');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'toggleWordWrap should alternate wordWrap': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.toggleWordWrap();
+		if(editor.wordWrap !== false){
+			cleanup(container);
+			return fail('First toggle should set wordWrap to false');
+		}
+		editor.toggleWordWrap();
+		if(editor.wordWrap !== true){
+			cleanup(container);
+			return fail('Second toggle should set wordWrap to true');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'setWordWrap should dispatch word-wrap-changed': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		let detail = null;
+		editor.addEventListener('word-wrap-changed', e => { detail = e.detail; }, { once: true });
+		editor.setWordWrap(false);
+		await editor.updateComplete;
+		if(!detail || detail.wordWrap !== false){
+			cleanup(container);
+			return fail('Should dispatch word-wrap-changed with wordWrap: false');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	/*
+		Minimap
+	*/
+	'minimapEnabled should default to false': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(editor.minimapEnabled !== false){
+			cleanup(container);
+			return fail('minimapEnabled should default to false');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'toggleMinimap should alternate minimapEnabled': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.toggleMinimap();
+		if(editor.minimapEnabled !== true){
+			cleanup(container);
+			return fail('First toggle should set minimapEnabled to true');
+		}
+		editor.toggleMinimap();
+		if(editor.minimapEnabled !== false){
+			cleanup(container);
+			return fail('Second toggle should set minimapEnabled to false');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'setMinimap should dispatch minimap-changed': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		let detail = null;
+		editor.addEventListener('minimap-changed', e => { detail = e.detail; }, { once: true });
+		editor.setMinimap(true);
+		await editor.updateComplete;
+		if(!detail || detail.minimapEnabled !== true){
+			cleanup(container);
+			return fail('Should dispatch minimap-changed with minimapEnabled: true');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	/*
+		Language
+	*/
+	'setLanguage should dispatch language-changed': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		let detail = null;
+		editor.addEventListener('language-changed', e => { detail = e.detail; }, { once: true });
+		editor.setLanguage('css');
+		await editor.updateComplete;
+		if(!detail || detail.language !== 'css'){
+			cleanup(container);
+			return fail('Should dispatch language-changed with language: css');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	/*
+		Editor Theme
+	*/
+	'setEditorTheme should dispatch editor-theme-changed': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		let detail = null;
+		editor.addEventListener('editor-theme-changed', e => { detail = e.detail; }, { once: true });
+		editor.setEditorTheme('dark');
+		await editor.updateComplete;
+		if(!detail || detail.editorTheme !== 'dark'){
+			cleanup(container);
+			return fail('Should dispatch editor-theme-changed with editorTheme: dark');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'setEditorTheme should reject invalid values': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.setEditorTheme('auto');
+		editor.setEditorTheme('invalid');
+		if(editor.editorTheme !== 'auto'){
+			cleanup(container);
+			return fail('Should not change editorTheme to invalid value');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	/*
+		Public API
+	*/
+	'formatCode should not throw without monacoEditor': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		try {
+			editor.formatCode();
+			cleanup(container);
+			pass();
+		} catch(e) {
+			cleanup(container);
+			fail(`formatCode threw: ${e.message}`);
+		}
+	},
+
+	'getValue should return current value': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		const val = editor.getValue();
+		if(typeof val !== 'string'){
+			cleanup(container);
+			return fail('getValue should return a string');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'setValue should update value': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.setValue('console.log("test");');
+		const val = editor.getValue();
+		if(val !== 'console.log("test");'){
+			cleanup(container);
+			return fail(`Expected "console.log("test");", got "${val}"`);
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'clear should empty the editor': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.setValue('some code');
+		editor.clear();
+		if(editor.getValue() !== ''){
+			cleanup(container);
+			return fail('clear should set value to empty string');
+		}
+		cleanup(container);
+		pass();
+	}
+};