kempo-ui 0.3.8 → 0.3.10

package/dist/components/codeEditorControls/WordWrap.js

@@ -0,0 +1,8 @@
+import t from"./CodeEditorControl.js";import{html as e,css as r}from"../../lit-all.min.js";import"../Icon.js";export default class a extends t{static properties={active:{type:Boolean,state:!0}};constructor(){super(),this.active=!0}connectedCallback(){super.connectedCallback();const t=this.editor;t&&(this.active=t.wordWrap,this.wordWrapHandler=t=>{this.active=t.detail.wordWrap},t.addEventListener("word-wrap-changed",this.wordWrapHandler))}disconnectedCallback(){super.disconnectedCallback(),this.editor?.removeEventListener("word-wrap-changed",this.wordWrapHandler),this.wordWrapHandler=null}handleClick=()=>{this.editor?.toggleWordWrap()};static styles=[t.styles,r`
+			:host { display: inline-flex; }
+			button.active { background: var(--primary-bg, rgba(0,120,212,0.15)); }
+		`];render(){return e`
+			<button class="${this.buttonClasses} ${this.active?"active":""}" @click="${this.handleClick}" title="Word Wrap">
+				<k-icon name="wrap_text"></k-icon>
+			</button>
+		`}}customElements.define("k-cec-word-wrap",a);

package/dist/components/htmlEditorControls/AlignCenter.js

@@ -1,12 +1,12 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
+import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.alignCenter()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.alignCenter()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="format_align_center"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-align-center",i);
+		`}}customElements.define("k-hec-align-center",o);

package/dist/components/htmlEditorControls/AlignJustify.js

@@ -1,12 +1,12 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
+import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.alignJustify()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.alignJustify()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="format_align_justify"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-align-justify",i);
+		`}}customElements.define("k-hec-align-justify",o);

package/dist/components/htmlEditorControls/AlignLeft.js

@@ -1,12 +1,12 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
+import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.alignLeft()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.alignLeft()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="format_align_left"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-align-left",i);
+		`}}customElements.define("k-hec-align-left",o);

package/dist/components/htmlEditorControls/AlignRight.js

@@ -1,12 +1,12 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
+import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.alignRight()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.alignRight()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="format_align_right"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-align-right",i);
+		`}}customElements.define("k-hec-align-right",o);

package/dist/components/htmlEditorControls/Bold.js

@@ -1,12 +1,12 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.bold()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.bold()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="format_bold"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-bold",s);
+		`}}customElements.define("k-hec-bold",i);

package/dist/components/htmlEditorControls/BulletList.js

@@ -1,12 +1,12 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
+import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.unorderedList()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.unorderedList()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="format_list_bulleted"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-bullet-list",s);
+		`}}customElements.define("k-hec-bullet-list",o);

package/dist/components/htmlEditorControls/ClearFormatting.js

@@ -1,12 +1,12 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.removeFormat()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.removeFormat()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="format_clear"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-clear-formatting",s);
+		`}}customElements.define("k-hec-clear-formatting",i);

package/dist/components/htmlEditorControls/CodeBlock.js

@@ -2,8 +2,8 @@ import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-a
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.formatBlock(this.isInCodeBlock()?"p":"pre")};isInCodeBlock(){if(!this.editor?.lexicalEditor)return!1;let t=!1;const{lexical:e,code:o}=this.editor.lx;return this.editor.lexicalEditor.getEditorState().read(()=>{const i=e.$getSelection();if(!e.$isRangeSelection(i))return;const s=i.anchor.getNode().getTopLevelElementOrThrow();t=o.$isCodeNode(s)}),t}updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.formatBlock(this.editor.isSelectionInCodeBlock()?"p":"pre")};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="code_blocks"></k-icon>
 				</slot>

package/dist/components/htmlEditorControls/ControlGroup.js

@@ -1,14 +1,12 @@
-import t from"../ShadowComponent.js";import{html as e,css as i}from"../../lit-all.min.js";export default class s extends t{static properties={editorMode:{type:String,state:!0},hidden:{type:Boolean,reflect:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.hasAttribute("class")||this.setAttribute("class","b r mq"),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}get editor(){return this.closest("k-html-editor")}updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode,this.requestUpdate())}hasVisibleChildren(){return Array.from(this.children).filter(t=>t.tagName.startsWith("K-HEC-")&&"K-HEC-SPACER"!==t.tagName).some(t=>{if(!1===t.hidden||void 0===t.hidden){return"none"!==window.getComputedStyle(t).display}return!1})}static styles=i`
+import t from"../ShadowComponent.js";import{html as e,css as i}from"../../lit-all.min.js";export default class s extends t{static properties={hidden:{type:Boolean,reflect:!0}};constructor(){super(),this.hidden=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("class")||this.setAttribute("class","b r mq"),this.addEventListener("control_visibility_change",this.checkVisibility)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("control_visibility_change",this.checkVisibility)}checkVisibility=t=>{if(t.target===this)return;const e=this.hidden;this.hidden=Array.from(this.children).every(t=>!0===t.hidden),this.hidden!==e&&this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0}))};static styles=i`
 		:host {
 			display: inline-flex;
 		}
-		
 		:host([hidden]) {
 			display: none !important;
 		}
-		
 		::slotted(*) {
 			margin-top: -1px;
 			margin-bottom: -1px;
 		}
-	`;render(){return e`<slot></slot>`}updated(){super.updated(),requestAnimationFrame(()=>{this.hidden=!this.hasVisibleChildren()})}}customElements.define("k-hec-group",s);
+	`;render(){return e`<slot></slot>`}}customElements.define("k-hec-group",s);

package/dist/components/htmlEditorControls/CreateLink.js

@@ -1,7 +1,7 @@
-import e from"./HtmlEditorControl.js";import{html as t,css as i}from"../../lit-all.min.js";import"../Icon.js";import o from"../Dialog.js";export default class n extends e{static properties={editorMode:{type:String,state:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.editor&&(this.editorMode=this.editor.mode,this.editor?.addEventListener("mode-changed",()=>{this.editor&&(this.editorMode=this.editor.mode)}))}handleMouseDown=e=>{if(!this.editor)return;e.preventDefault(),e.stopPropagation();const t=this.editor.selection?.text||"",i=document.createElement("input");i.type="text",i.placeholder="https://example.com",i.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const n=document.createElement("input");n.type="text",n.placeholder="Enter link text",n.value=t,n.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const s=document.createElement("div");s.className="p",s.style.cssText="display: flex; flex-direction: column; gap: 1rem;",s.innerHTML='\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">URL</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Link Text</label>\n\t\t\t</div>\n\t\t',s.children[0].appendChild(i),s.children[1].appendChild(n),o.create(s,{title:"Create Link",cancelText:"Cancel",confirmText:"Insert Link",confirmClasses:"success ml",confirmAction:e=>{const o=i.value.trim(),s=n.value.trim();o?!this.editor.selection||s&&s!==t?this.editor.createLinkWithText(o,s||o):this.editor.createLink(o):e.keepDialogOpen=!0}})};render(){return this.hidden="code"===this.editorMode,t`
+import e from"./HtmlEditorControl.js";import{html as t,css as i}from"../../lit-all.min.js";import"../Icon.js";import o from"../Dialog.js";export default class l extends e{static properties={editorMode:{type:String,state:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.editor&&(this.editorMode=this.editor.mode,this.editor?.addEventListener("mode-changed",()=>{this.editor&&(this.editorMode=this.editor.mode)}))}handleClick=()=>{if(!this.editor)return;const e=this.editor.getSelectedText(),t=document.createElement("input");t.type="text",t.placeholder="https://example.com",t.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const i=document.createElement("input");i.type="text",i.placeholder="Enter link text",i.value=e,i.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const l=document.createElement("div");l.className="p",l.style.cssText="display: flex; flex-direction: column; gap: 1rem;",l.innerHTML='\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">URL</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Link Text</label>\n\t\t\t</div>\n\t\t',l.children[0].appendChild(t),l.children[1].appendChild(i),o.create(l,{title:"Create Link",cancelText:"Cancel",confirmText:"Insert Link",confirmClasses:"success ml",confirmAction:o=>{const l=t.value.trim(),n=i.value.trim();l?!this.editor.selection||n&&n!==e?this.editor.createLinkWithText(l,n||l):this.editor.createLink(l):o.keepDialogOpen=!0}})};render(){return this.hidden="code"===this.editorMode,t`
 			<button
 				class="${this.buttonClasses}"
-				@mousedown="${this.handleMouseDown}"
+				@click="${this.handleClick}"
 			>
 				<slot name="icon">
 					<k-icon name="link"></k-icon>
@@ -12,4 +12,4 @@ import e from"./HtmlEditorControl.js";import{html as t,css as i}from"../../lit-a
 			:host {
 				display: inline-flex;
 			}
-		`]}customElements.define("k-hec-create-link",n);
+		`]}customElements.define("k-hec-create-link",l);

package/dist/components/htmlEditorControls/FormatBlock.js

@@ -1,12 +1,12 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class a extends t{static properties={editorMode:{type:String,state:!0},tag:{type:String},label:{type:String}};static styles=[t.styles,o`
+import t from"./HtmlEditorControl.js";import{html as e,css as a}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0},tag:{type:String},label:{type:String}};static styles=[t.styles,a`
 			:host {
 				display: inline-flex;
 			}
-		`];constructor(){super(),this.tag="p",this.label=""}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.formatBlock(this.tag)};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){this.hidden="code"===this.editorMode;this.label||this.getDefaultLabel();const t=this.getDefaultIcon();return e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];constructor(){super(),this.tag="p",this.label=""}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.formatBlock(this.tag)};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){this.hidden="code"===this.editorMode;this.label||this.getDefaultLabel();const t=this.getDefaultIcon();return e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="${t}"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}getDefaultLabel(){return{h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",h4:"Heading 4",h5:"Heading 5",h6:"Heading 6",p:"Paragraph"}[this.tag]||this.tag.toUpperCase()}getDefaultIcon(){return{h1:"format_h1",h2:"format_h2",h3:"format_h3",h4:"format_h4",h5:"format_h5",h6:"format_h6",p:"format_paragraph"}[this.tag]||"format_paragraph"}}customElements.define("k-hec-format-block",a);
+		`}getDefaultLabel(){return{h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",h4:"Heading 4",h5:"Heading 5",h6:"Heading 6",p:"Paragraph"}[this.tag]||this.tag.toUpperCase()}getDefaultIcon(){return{h1:"format_h1",h2:"format_h2",h3:"format_h3",h4:"format_h4",h5:"format_h5",h6:"format_h6",p:"format_paragraph"}[this.tag]||"format_paragraph"}}customElements.define("k-hec-format-block",o);

package/dist/components/htmlEditorControls/FormatCode.js

@@ -0,0 +1 @@
+import o from"../codeEditorControls/FormatCode.js";export default o;

package/dist/components/htmlEditorControls/HtmlEditorControl.js

@@ -1,4 +1,4 @@
-import t from"../ShadowComponent.js";import{html as n,css as o}from"../../lit-all.min.js";export default class r extends t{static properties={btnClass:{type:String,attribute:"btn-class"},groupBtnClass:{type:String,attribute:"group-btn-class"},groupLastBtnClass:{type:String,attribute:"group-last-btn-class"},hidden:{type:Boolean,reflect:!0}};constructor(){super(),this.btnClass="b r mq ph",this.groupBtnClass="br ph",this.groupLastBtnClass="ph"}get editor(){let t=this.getRootNode();for(;t instanceof ShadowRoot;){const n=t.host,o=n.closest("k-html-editor");if(o)return o;t=n.getRootNode()}return this.closest("k-html-editor")}get isInGroup(){const t=this.parentElement;return t&&"K-HEC-GROUP"===t.tagName}get isInDropdown(){const t=this.parentElement;return t&&"K-HEC-DROPDOWN"===t.tagName}get isLastInGroup(){if(!this.isInGroup)return!1;const t=this.parentElement,n=Array.from(t.children).filter(t=>t.tagName.startsWith("K-HEC-")&&"K-HEC-SPACER"!==t.tagName);return n[n.length-1]===this}get buttonClasses(){let t;return t=this.isInDropdown?"dropdown-item":this.isInGroup?this.isLastInGroup?this.groupLastBtnClass:this.groupBtnClass:this.btnClass,`no-btn icon-btn ${t}`.trim()}static styles=o`
+import t from"../ShadowComponent.js";import{html as e,css as n}from"../../lit-all.min.js";export default class o extends t{static properties={btnClass:{type:String,attribute:"btn-class"},groupBtnClass:{type:String,attribute:"group-btn-class"},groupLastBtnClass:{type:String,attribute:"group-last-btn-class"},hidden:{type:Boolean,reflect:!0}};constructor(){super(),this.btnClass="b r mq ph",this.groupBtnClass="br ph",this.groupLastBtnClass="ph",this.hidesInCodeMode=!0}connectedCallback(){super.connectedCallback();const t=this.editor;t&&(this.modeEditor=t,this.modeHandler=()=>{const t=this.hidesInCodeMode&&"code"===this.modeEditor.mode;this.hidden!==t&&(this.hidden=t,this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0})))},t.addEventListener("mode-changed",this.modeHandler))}disconnectedCallback(){super.disconnectedCallback(),this.modeEditor?.removeEventListener("mode-changed",this.modeHandler),this.modeEditor=null,this.modeHandler=null}updated(t){super.updated(t),t.has("hidden")&&this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0}))}get editor(){const t=t=>t?.tagName?.startsWith("K-HTML-EDITOR");let e=this.getRootNode();for(;e instanceof ShadowRoot;){const n=e.host;if(t(n))return n;e=n.getRootNode()}let n=this.parentElement;for(;n;){if(t(n))return n;n=n.parentElement}return null}get isInGroup(){const t=this.parentElement;return t&&"K-HEC-GROUP"===t.tagName}get isInDropdown(){const t=this.parentElement;return t&&"K-HEC-DROPDOWN"===t.tagName}get isLastInGroup(){if(!this.isInGroup)return!1;const t=this.parentElement,e=Array.from(t.children).filter(t=>t.tagName.startsWith("K-HEC-")&&"K-HEC-SPACER"!==t.tagName);return e[e.length-1]===this}get buttonClasses(){let t;return t=this.isInDropdown?"dropdown-item":this.isInGroup?this.isLastInGroup?this.groupLastBtnClass:this.groupBtnClass:this.btnClass,`no-btn icon-btn ${t}`.trim()}static styles=n`
 		:host {
 			display: inline-flex;
 		}
@@ -41,4 +41,4 @@ import t from"../ShadowComponent.js";import{html as n,css as o}from"../../lit-al
 		:host(:last-child) .icon-btn.dropdown-item {
 			border-bottom: none !important;
 		}
-	`}customElements.define("k-html-editor-control",r);
+	`}customElements.define("k-html-editor-control",o);

package/dist/components/htmlEditorControls/InlineCode.js

@@ -2,8 +2,8 @@ import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-a
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.lexicalFormat("code")};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor?.inlineCode()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="code_blocks"></k-icon>
 				</slot>

package/dist/components/htmlEditorControls/InsertTable.js

@@ -1,7 +1,7 @@
-import e from"./HtmlEditorControl.js";import{html as t,css as l}from"../../lit-all.min.js";import"../Icon.js";import i from"../Dialog.js";export default class o extends e{static properties={editorMode:{type:String,state:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.editor&&(this.editorMode=this.editor.mode,this.editor?.addEventListener("mode-changed",()=>{this.editor&&(this.editorMode=this.editor.mode)}))}handleMouseDown=e=>{if(!this.editor)return;e.preventDefault(),e.stopPropagation();let t=!1,l=3,o=3,n=!0,r=null,s=null;if(this.editor.lexicalEditor){const{lexical:e,table:i}=this.editor.lx;this.editor.lexicalEditor.getEditorState().read(()=>{const d=e.$getSelection();if(!e.$isRangeSelection(d))return;let a=d.anchor.getNode();for(;a;){if(i.$isTableNode(a)){t=!0,s=a.getKey(),r=[];const e=a.getChildren();let d=!1;e.forEach((e,t)=>{const l=[];e.getChildren().forEach(e=>{0===t&&i.$isTableCellNode(e)&&e.getHeaderStyles()===i.TableCellHeaderStates.ROW&&(d=!0),l.push(e.getTextContent())}),r.push(l),l.length>o&&(o=l.length)}),n=d,l=d?e.length-1:e.length;break}a=a.getParent()}})}const d=document.createElement("input");d.type="number",d.min="1",d.max="20",d.value=l.toString(),d.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const a=document.createElement("input");a.type="number",a.min="1",a.max="10",a.value=o.toString(),a.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const c=document.createElement("input");c.type="checkbox",c.checked=n,c.id="table-headers-checkbox";const h=document.createElement("div");h.className="p",h.style.cssText="display: flex; flex-direction: column; gap: 1rem;",h.innerHTML='\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Rows</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Columns</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; align-items: center; gap: 0.5rem;">\n\t\t\t\t<label for="table-headers-checkbox" style="font-weight: bold;">Include Headers</label>\n\t\t\t</div>\n\t\t',h.children[0].appendChild(d),h.children[1].appendChild(a),h.children[2].insertBefore(c,h.children[2].firstChild),i.create(h,{title:t?"Edit Table":"Insert Table",cancelText:"Cancel",confirmText:t?"Update Table":"Insert Table",confirmClasses:"success",confirmAction:()=>{const e=parseInt(d.value)||3,l=parseInt(a.value)||3,i=c.checked;if(t&&s){const{lexical:e}=this.editor.lx;this.editor.lexicalEditor.update(()=>{const t=e.$getNodeByKey(s);t&&t.remove()},{discrete:!0})}this.editor.insertTable(e,l,i,r)}})};render(){return this.hidden="code"===this.editorMode,t`
+import e from"./HtmlEditorControl.js";import{html as t,css as l}from"../../lit-all.min.js";import"../Icon.js";import i from"../Dialog.js";export default class n extends e{static properties={editorMode:{type:String,state:!0}};constructor(){super()}connectedCallback(){super.connectedCallback(),this.editor&&(this.editorMode=this.editor.mode,this.editor?.addEventListener("mode-changed",()=>{this.editor&&(this.editorMode=this.editor.mode)}))}handleClick=()=>{if(!this.editor)return;const e=this.editor.getTableAtSelection(),t=!!e,l=e?.rows??3,n=e?.cols??3,o=e?.hasHeaders??!0,s=e?.cellData??null,r=document.createElement("input");r.type="number",r.min="1",r.max="20",r.value=l.toString(),r.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const d=document.createElement("input");d.type="number",d.min="1",d.max="10",d.value=n.toString(),d.style.cssText="padding: 0.5rem; border: 1px solid var(--border-color, #ccc); border-radius: 4px; font-size: 1rem;";const c=document.createElement("input");c.type="checkbox",c.checked=o,c.id="table-headers-checkbox";const a=document.createElement("div");a.className="p",a.style.cssText="display: flex; flex-direction: column; gap: 1rem;",a.innerHTML='\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Rows</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; flex-direction: column; gap: 0.5rem;">\n\t\t\t\t<label style="font-weight: bold;">Columns</label>\n\t\t\t</div>\n\t\t\t<div style="display: flex; align-items: center; gap: 0.5rem;">\n\t\t\t\t<label for="table-headers-checkbox" style="font-weight: bold;">Include Headers</label>\n\t\t\t</div>\n\t\t',a.children[0].appendChild(r),a.children[1].appendChild(d),a.children[2].insertBefore(c,a.children[2].firstChild),i.create(a,{title:t?"Edit Table":"Insert Table",cancelText:"Cancel",confirmText:t?"Update Table":"Insert Table",confirmClasses:"success",confirmAction:()=>{const l=parseInt(r.value)||3,i=parseInt(d.value)||3,n=c.checked;t&&this.editor.removeTableByKey(e.key),this.editor.insertTable(l,i,n,s)}})};render(){return this.hidden="code"===this.editorMode,t`
 			<button
 				class="${this.buttonClasses}"
-				@mousedown="${this.handleMouseDown}"
+				@click="${this.handleClick}"
 			>
 				<slot name="icon">
 					<k-icon name="table"></k-icon>
@@ -12,4 +12,4 @@ import e from"./HtmlEditorControl.js";import{html as t,css as l}from"../../lit-a
 			:host {
 				display: inline-flex;
 			}
-		`]}customElements.define("k-hec-insert-table",o);
+		`]}customElements.define("k-hec-insert-table",n);

package/dist/components/htmlEditorControls/Italic.js

@@ -1,12 +1,12 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
+import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.italic()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.italic()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="format_italic"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-italic",i);
+		`}}customElements.define("k-hec-italic",o);

package/dist/components/htmlEditorControls/Mode.js

@@ -1,9 +1,9 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static properties={mode:{type:String,reflect:!0}};connectedCallback(){super.connectedCallback(),this.updateMode(),this.editor?.addEventListener("mode-changed",()=>this.updateMode())}handleClick=()=>{this.editor&&this.editor.toggleMode()};updateMode(){this.editor&&(this.mode=this.editor.mode)}static styles=[t.styles,o`
+import e from"./HtmlEditorControl.js";import{html as t,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends e{static properties={mode:{type:String,reflect:!0}};hidesInCodeMode=!1;connectedCallback(){super.connectedCallback(),this.updateMode(),this.editor?.addEventListener("mode-changed",()=>this.updateMode())}handleClick=()=>{this.editor&&this.editor.toggleMode()};updateMode(){this.editor&&(this.mode=this.editor.mode)}static styles=[e.styles,o`
       :host {
         display: inline-flex;
       }
-    `];render(){const t="code"===this.mode?`${this.buttonClasses} bg-primary`:this.buttonClasses;return e`
-      <button class="${t}" @click="${this.handleClick}">
+    `];render(){const e="code"===this.mode?`${this.buttonClasses} bg-primary`:this.buttonClasses;return t`
+      <button class="${e}" @click="${this.handleClick}">
         <k-icon name="code"></k-icon>
       </button>
     `}}customElements.define("k-hec-mode",s);

package/dist/components/htmlEditorControls/NumberList.js

@@ -1,12 +1,12 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
+import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.orderedList()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.orderedList()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="format_list_numbered"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-number-list",s);
+		`}}customElements.define("k-hec-number-list",o);

package/dist/components/htmlEditorControls/Strikethrough.js

@@ -1,12 +1,12 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
+import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.strikethrough()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.strikethrough()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @click="${this.handleClick}">
 				<slot name="icon">
 					<k-icon name="strikethrough_s"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-strikethrough",s);
+		`}}customElements.define("k-hec-strikethrough",o);

package/dist/components/htmlEditorControls/TextBackgroundColor.js

@@ -53,7 +53,7 @@ import o from"./DropdownControl.js";import{html as e,css as t}from"../../lit-all
 				border-radius: 4px;
 				cursor: pointer;
 			}
-		`];constructor(){super(),this.colors="#ffff00,#00ffff,#ff66ff,#99ff99,#ffcc99,#ff9999,#cccccc,#ffffff,#ffffcc,#ccffff,#ffccff,#ccffcc",this.disableRemove=!1,this.disablePicker=!1,this.icon="format_color_fill"}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleRemove=o=>{o.preventDefault(),o.stopPropagation(),this.editor&&this.editor.removeTextBackgroundColor(),this.opened=!1};handleSwatchClick=o=>{o.preventDefault(),o.stopPropagation();const e=o.target.style.backgroundColor;if(this.editor&&e){const o=e.match(/\d+/g),t=o?"#"+o.map(o=>parseInt(o).toString(16).padStart(2,"0")).join(""):e;this.editor.setTextBackgroundColor(t)}this.opened=!1};handlePickerChange=o=>{o.preventDefault(),o.stopPropagation();const e=o.target.value;this.editor&&e&&this.editor.setTextBackgroundColor(e),this.opened=!1};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}getColorArray(){return this.colors.split(",").map(o=>o.trim()).filter(o=>o)}render(){this.hidden="code"===this.editorMode;const o=this.getColorArray();return e`
+		`];constructor(){super(),this.colors="#ffff00,#00ffff,#ff66ff,#99ff99,#ffcc99,#ff9999,#cccccc,#ffffff,#ffffcc,#ccffff,#ffccff,#ccffcc",this.disableRemove=!1,this.disablePicker=!1,this.icon="format_color_fill"}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleRemove=o=>{this.editor&&this.editor.removeTextBackgroundColor(),this.opened=!1};handleSwatchClick=o=>{const e=o.target.style.backgroundColor;if(this.editor&&e){const o=e.match(/\d+/g),t=o?"#"+o.map(o=>parseInt(o).toString(16).padStart(2,"0")).join(""):e;this.editor.setTextBackgroundColor(t)}this.opened=!1};handlePickerChange=o=>{const e=o.target.value;this.editor&&e&&this.editor.setTextBackgroundColor(e),this.opened=!1};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}getColorArray(){return this.colors.split(",").map(o=>o.trim()).filter(o=>o)}render(){this.hidden="code"===this.editorMode;const o=this.getColorArray();return e`
 			<k-dropdown 
 				?opened=${this.opened}
 				@opened=${this.handleOpened}

package/dist/components/htmlEditorControls/TextColor.js

@@ -53,7 +53,7 @@ import e from"./DropdownControl.js";import{html as o,css as t}from"../../lit-all
 				border-radius: 4px;
 				cursor: pointer;
 			}
-		`];constructor(){super(),this.colors="#000000,#e60000,#ff9900,#ffff00,#008a00,#0066cc,#9933ff,#ffffff,#facccc,#ffebcc,#ffffcc,#cce8cc,#cce0f5,#ebd6ff",this.disableRemove=!1,this.disablePicker=!1,this.icon="format_color_text"}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleRemove=e=>{e.preventDefault(),e.stopPropagation(),this.editor&&this.editor.removeTextColor(),this.opened=!1};handleSwatchClick=e=>{e.preventDefault(),e.stopPropagation();const o=e.target.style.backgroundColor;if(this.editor&&o){const e=o.match(/\d+/g),t=e?"#"+e.map(e=>parseInt(e).toString(16).padStart(2,"0")).join(""):o;this.editor.setTextColor(t)}this.opened=!1};handlePickerChange=e=>{e.preventDefault(),e.stopPropagation();const o=e.target.value;this.editor&&o&&this.editor.setTextColor(o),this.opened=!1};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}getColorArray(){return this.colors.split(",").map(e=>e.trim()).filter(e=>e)}render(){this.hidden="code"===this.editorMode;const e=this.getColorArray();return o`
+		`];constructor(){super(),this.colors="#000000,#e60000,#ff9900,#ffff00,#008a00,#0066cc,#9933ff,#ffffff,#facccc,#ffebcc,#ffffcc,#cce8cc,#cce0f5,#ebd6ff",this.disableRemove=!1,this.disablePicker=!1,this.icon="format_color_text"}connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleRemove=e=>{this.editor&&this.editor.removeTextColor(),this.opened=!1};handleSwatchClick=e=>{const o=e.target.style.backgroundColor;if(this.editor&&o){const e=o.match(/\d+/g),t=e?"#"+e.map(e=>parseInt(e).toString(16).padStart(2,"0")).join(""):o;this.editor.setTextColor(t)}this.opened=!1};handlePickerChange=e=>{const o=e.target.value;this.editor&&o&&this.editor.setTextColor(o),this.opened=!1};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}getColorArray(){return this.colors.split(",").map(e=>e.trim()).filter(e=>e)}render(){this.hidden="code"===this.editorMode;const e=this.getColorArray();return o`
 			<k-dropdown 
 				?opened=${this.opened}
 				@opened=${this.handleOpened}

package/dist/components/htmlEditorControls/Underline.js

@@ -1,12 +1,12 @@
-import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
+import t from"./HtmlEditorControl.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,i`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.underline()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
-			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.underline()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<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",i);
+		`}}customElements.define("k-hec-underline",o);

package/docs/components/accordion.html

@@ -30,6 +30,7 @@
           <k-filter-item filter-keywords="accordion components"><a href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="code editor codeeditor monaco components"><a href="../components/code-editor.html">Code Editor<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="color picker colorpicker components"><a href="../components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="content slider components"><a href="../components/content-slider.html">Content Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="context state global components"><a href="../components/context.html">Context<br><small>Component</small></a></k-filter-item>
@@ -108,6 +109,7 @@
         <a href="../components/accordion.html">Accordion</a>
         <a href="../components/aside.html">Aside</a>
         <a href="../components/card.html">Card</a>
+        <a href="../components/code-editor.html">Code Editor</a>
         <a href="../components/color-picker.html">ColorPicker</a>
         <a href="../components/content-slider.html">Content Slider</a>
         <a href="../components/context.html">Context</a>

package/docs/components/aside.html

@@ -30,6 +30,7 @@
           <k-filter-item filter-keywords="accordion components"><a href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="code editor codeeditor monaco components"><a href="../components/code-editor.html">Code Editor<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="color picker colorpicker components"><a href="../components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="content slider components"><a href="../components/content-slider.html">Content Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="context state global components"><a href="../components/context.html">Context<br><small>Component</small></a></k-filter-item>
@@ -108,6 +109,7 @@
         <a href="../components/accordion.html">Accordion</a>
         <a href="../components/aside.html">Aside</a>
         <a href="../components/card.html">Card</a>
+        <a href="../components/code-editor.html">Code Editor</a>
         <a href="../components/color-picker.html">ColorPicker</a>
         <a href="../components/content-slider.html">Content Slider</a>
         <a href="../components/context.html">Context</a>

package/docs/components/card.html

@@ -30,6 +30,7 @@
           <k-filter-item filter-keywords="accordion components"><a href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="code editor codeeditor monaco components"><a href="../components/code-editor.html">Code Editor<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="color picker colorpicker components"><a href="../components/color-picker.html">Color Picker<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="content slider components"><a href="../components/content-slider.html">Content Slider<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="context state global components"><a href="../components/context.html">Context<br><small>Component</small></a></k-filter-item>
@@ -108,6 +109,7 @@
         <a href="../components/accordion.html">Accordion</a>
         <a href="../components/aside.html">Aside</a>
         <a href="../components/card.html">Card</a>
+        <a href="../components/code-editor.html">Code Editor</a>
         <a href="../components/color-picker.html">ColorPicker</a>
         <a href="../components/content-slider.html">Content Slider</a>
         <a href="../components/context.html">Context</a>