kempo-ui 0.3.6 → 0.3.8

package/src/components/HtmlEditor.js

@@ -2,35 +2,32 @@ import { html, css } from '../lit-all.min.js';
 import ShadowComponent from './ShadowComponent.js';
 import formatCode from '../utils/formatCode.js';
 import debounce from '../utils/debounce.js';
+import { getCalculatedTheme, subscribeToTheme } from '../utils/theme.js';
+import Dialog from './Dialog.js';
+
+/*
+  Default CDN URLs
+*/
+const LEXICAL_VERSION = '0.43.0';
+const MONACO_VERSION = '0.52.2';
+const DEFAULT_LEXICAL_BASE = 'https://esm.sh';
+const DEFAULT_MONACO_SRC = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}/min`;
+
+const lexicalUrl = (base, pkg) => `${base}/${pkg}@${LEXICAL_VERSION}`;
 
 export default class HtmlEditor extends ShadowComponent {
 	static formAssociated = true;
 
 	static properties = {
-		name: {
-			type: String,
-			reflect: true
-		},
-		value: {
-			type: String,
-			reflect: true
-		},
-		selection: {
-			type: Object,
-			state: true
-		},
-		mode: {
-			type: String,
-			reflect: true
-		},
-		hasTopToolbar: {
-			type: Boolean,
-			state: true
-		},
-		hasBottomToolbar: {
-			type: Boolean,
-			state: true
-		}
+		name: { type: String, reflect: true },
+		value: { type: String, reflect: true },
+		selection: { type: Object, state: true },
+		mode: { type: String, reflect: true },
+		lexicalSrc: { type: String, attribute: 'lexical-src' },
+		monacoSrc: { type: String, attribute: 'monaco-src' },
+		nodes: { type: String },
+		hasTopToolbar: { type: Boolean, state: true },
+		hasBottomToolbar: { type: Boolean, state: true }
 	};
 
 	constructor() {
@@ -41,14 +38,18 @@ export default class HtmlEditor extends ShadowComponent {
 		this.selection = null;
 		this.cursor = null;
 		this.mode = 'visual';
+		this.lexicalSrc = '';
+		this.monacoSrc = '';
+		this.nodes = '';
 		this.hasTopToolbar = false;
 		this.hasBottomToolbar = false;
-		this.skipSync = false;
+		this.skipValueSync = false;
+		this.lexicalValueSync = false;
 		this.savedSelection = null;
-		
-		this.debouncedDispatchChange = debounce(() => {
-			this.value = this.editorEl.innerHTML;
-		}, 300);
+		this.lexicalEditor = null;
+		this.monacoEditor = null;
+		this.lx = {};
+		this.debouncedSyncValue = debounce(() => this.syncValueFromLexical(), 300);
 	}
 
 	/*
@@ -56,64 +57,49 @@ export default class HtmlEditor extends ShadowComponent {
 	*/
 	connectedCallback() {
 		super.connectedCallback();
-		
 		if(this.hasAttribute('value')){
 			this.value = this.getAttribute('value');
 		}
-
-		this.slotObserver = new MutationObserver(() => {
-			this.updateToolbarVisibility();
-		});
-
-		this.slotObserver.observe(this, {
-			childList: true,
-			subtree: true
-		});
-
+		this.slotObserver = new MutationObserver(() => this.updateToolbarVisibility());
+		this.slotObserver.observe(this, { childList: true, subtree: true });
 		this.updateToolbarVisibility();
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.slotObserver?.disconnect();
-		
-		if(this.boundUpdateSelection){
-			this.shadowRoot.removeEventListener('selectionchange', this.boundUpdateSelection);
-			
-			if(this.editorEl){
-				this.editorEl.removeEventListener('mouseup', this.boundUpdateSelection);
-				this.editorEl.removeEventListener('keyup', this.boundUpdateSelection);
-				this.editorEl.removeEventListener('focus', this.boundUpdateSelection);
-			}
-		}
+		this.cleanupFns?.forEach(fn => fn?.());
+		this.monacoEditor?.dispose();
+		this.unsubscribeTheme?.();
+		if(this.syncShadowSelection) document.removeEventListener('selectionchange', this.syncShadowSelection);
 	}
 
 	updateToolbarVisibility() {
-		const topSlotContent = Array.from(this.children).filter(child => 
-			child.getAttribute('slot') === 'toolbar-top'
-		);
-		const bottomSlotContent = Array.from(this.children).filter(child => 
-			child.getAttribute('slot') === 'toolbar-bottom'
-		);
-
-		this.hasTopToolbar = topSlotContent.length > 0;
-		this.hasBottomToolbar = bottomSlotContent.length > 0;
+		this.hasTopToolbar = Array.from(this.children).some(c => c.getAttribute('slot') === 'toolbar-top');
+		this.hasBottomToolbar = Array.from(this.children).some(c => c.getAttribute('slot') === 'toolbar-bottom');
 	}
 
 	updated(changedProperties) {
 		super.updated(changedProperties);
-
-		if(changedProperties.has('value')){
-			this.syncContent();
+		if(changedProperties.has('value') && !this.skipValueSync){
+			if(this.lexicalValueSync){
+				this.lexicalValueSync = false;
+			} else {
+				if(this.lexicalEditor && this.mode === 'visual' && !this.isVisualCompatible(this.value)){
+					this.skipLexicalExport = true;
+					this.mode = 'code';
+				} else {
+					this.syncContentToEditors();
+				}
+			}
 			this.updateFormValue();
 			this.dispatchEvent(new CustomEvent('change', {
 				detail: { value: this.value },
 				bubbles: true
 			}));
 		}
-
 		if(changedProperties.has('mode')){
-			this.syncContent();
+			this.handleModeSwitch(changedProperties.get('mode'));
 			this.dispatchEvent(new CustomEvent('mode-changed', {
 				detail: { mode: this.mode },
 				bubbles: true
@@ -121,22 +107,10 @@ export default class HtmlEditor extends ShadowComponent {
 		}
 	}
 
-	firstUpdated() {
-		this.editorEl = this.shadowRoot.querySelector('.editor');
-		this.textareaEl = this.shadowRoot.querySelector('textarea');
-		
-		if(this.value){
-			this.syncContent();
-		}
-
-		this.boundUpdateSelection = this.updateSelection.bind(this);
-		
-		this.shadowRoot.addEventListener('selectionchange', this.boundUpdateSelection);
-		this.editorEl.addEventListener('mouseup', this.boundUpdateSelection);
-		this.editorEl.addEventListener('keyup', this.boundUpdateSelection);
-		this.editorEl.addEventListener('focus', this.boundUpdateSelection);
-		this.editorEl.addEventListener('keydown', this.handleTableNavigation);
-		
+	async firstUpdated() {
+		this.lexicalContainer = this.shadowRoot.querySelector('.lexical-editor');
+		this.monacoContainer = this.shadowRoot.querySelector('.monaco-editor-container');
+		await this.initLexical();
 		this.dispatchEvent(new CustomEvent('ready', {
 			detail: { value: this.value },
 			bubbles: true
@@ -144,385 +118,406 @@ export default class HtmlEditor extends ShadowComponent {
 	}
 
 	/*
-		Form Integration
+		Module Loading
 	*/
-	updateFormValue() {
-		this.internals.setFormValue(this.getValue());
+	async loadNodeModules() {
+		if(!this.nodes?.trim()) return [];
+		const base = new URL('./htmlEditorNodes/', import.meta.url).href;
+		const modules = await Promise.all(
+			this.nodes.split(',').map(n => n.trim()).filter(Boolean).map(n => import(/* @vite-ignore */ `${base}${n}.js`))
+		);
+		return modules.map(m => m.default?.lexicalNode).filter(Boolean);
 	}
 
-	formResetCallback() {
-		this.value = '';
+	async loadLexicalModules() {
+		const base = this.lexicalSrc || DEFAULT_LEXICAL_BASE;
+		const url = pkg => lexicalUrl(base, pkg);
+		const [lexical, richText, lexicalHtml, history, list, link, selection, table, code] = await Promise.all([
+			import(/* @vite-ignore */ url('lexical')),
+			import(/* @vite-ignore */ url('@lexical/rich-text')),
+			import(/* @vite-ignore */ url('@lexical/html')),
+			import(/* @vite-ignore */ url('@lexical/history')),
+			import(/* @vite-ignore */ url('@lexical/list')),
+			import(/* @vite-ignore */ url('@lexical/link')),
+			import(/* @vite-ignore */ url('@lexical/selection')),
+			import(/* @vite-ignore */ url('@lexical/table')),
+			import(/* @vite-ignore */ url('@lexical/code'))
+		]);
+		this.lx = { lexical, richText, lexicalHtml, history, list, link, selection, table, code };
+		this.StyledTextNode = class extends lexical.TextNode {
+			static getType() { return 'styled-text'; }
+			static clone(node) { return new this(node.__text, node.__key); }
+			static importDOM() {
+				return {
+					span: () => ({
+						conversion: domNode => {
+							const style = domNode.getAttribute('style');
+							if(!style) return null;
+							const node = lexical.$createTextNode(domNode.textContent);
+							node.setStyle(style);
+							return { node };
+						},
+						priority: 1
+					})
+				};
+			}
+			static importJSON(json) { return lexical.$createTextNode(json.text); }
+			exportJSON() { return { ...super.exportJSON(), type: 'styled-text' }; }
+		};
 	}
 
-	formStateRestoreCallback(state) {
-		this.value = state;
-	}
+	async initLexical() {
+		await this.loadLexicalModules();
+		this.customNodes = await this.loadNodeModules();
+		this.nodeCompatCheckers = this.customNodes.filter(n => typeof n.isVisualCompatible === 'function').map(n => n.isVisualCompatible);
+		this.nodePreprocessors = this.customNodes.filter(n => typeof n.preprocessHtml === 'function').map(n => n.preprocessHtml);
+		const { lexical, richText, history, list, link, table, code } = this.lx;
+
+		const editorConfig = {
+			namespace: 'KempoHtmlEditor',
+			theme: {
+				paragraph: 'k-editor-p',
+				heading: { h1: 'k-editor-h1', h2: 'k-editor-h2', h3: 'k-editor-h3', h4: 'k-editor-h4', h5: 'k-editor-h5', h6: 'k-editor-h6' },
+				text: { underline: 'td-u', strikethrough: 'td-lt' },
+				list: { ul: 'k-editor-ul', ol: 'k-editor-ol', listitem: 'k-editor-li' },
+				link: 'k-editor-link',
+				quote: 'k-editor-quote',
+				code: 'k-editor-code-block',
+				codeHighlight: {},
+				table: 'k-editor-table',
+				tableCell: 'k-editor-table-cell',
+				tableCellHeader: 'k-editor-table-cell-header'
+			},
+			nodes: [richText.HeadingNode, richText.QuoteNode, list.ListNode, list.ListItemNode, link.LinkNode, table.TableNode, table.TableCellNode, table.TableRowNode, code.CodeNode, code.CodeHighlightNode, this.StyledTextNode, ...this.customNodes],
+			onError: console.error,
+			editorState: null
+		};
 
-	/*
-		Event Handlers
-	*/
-	handleTableNavigation = (e) => {
-		if(e.key !== 'Tab' && e.key !== 'Enter') return;
-		if(this.mode !== 'visual') return;
-		
-		const sel = this.shadowRoot.getSelection() || window.getSelection();
-		if(!sel.rangeCount) return;
-		
-		let node = sel.getRangeAt(0).startContainer;
-		
-		if(node.nodeType === Node.TEXT_NODE){
-			node = node.parentElement;
-		}
-		
-		const cell = node.closest('td, th');
-		if(!cell) return;
-		
-		e.preventDefault();
-		
-		if(e.key === 'Tab'){
-			const row = cell.parentElement;
-			const cells = Array.from(row.cells);
-			const currentIndex = cells.indexOf(cell);
-			
-			if(e.shiftKey){
-				// Shift+Tab: Go to previous cell
-				let prevCell = cells[currentIndex - 1];
-				
-				if(!prevCell){
-					const prevRow = row.previousElementSibling;
-					if(prevRow){
-						prevCell = prevRow.cells[prevRow.cells.length - 1];
-					}
-				}
-				
-				if(prevCell){
-					const range = document.createRange();
-					range.selectNodeContents(prevCell);
-					range.collapse(false);
-					sel.removeAllRanges();
-					sel.addRange(range);
-					prevCell.focus();
-				}
+		this.lexicalEditor = lexical.createEditor(editorConfig);
+		this.lexicalEditor.setRootElement(this.lexicalContainer);
+
+		this.cleanupFns = [
+			richText.registerRichText(this.lexicalEditor),
+			history.registerHistory(this.lexicalEditor, history.createEmptyHistoryState(), 300)
+		];
+		if(list.registerList) this.cleanupFns.push(list.registerList(this.lexicalEditor));
+		if(table.registerTable) this.cleanupFns.push(table.registerTable(this.lexicalEditor));
+		if(code.registerCodeHighlighting) this.cleanupFns.push(code.registerCodeHighlighting(this.lexicalEditor));
+		if(link.registerLink) this.cleanupFns.push(link.registerLink(this.lexicalEditor, {
+			validateUrl: url => { try { new URL(url); return true; } catch { return false; } }
+		}));
+
+		if(this.value){
+			if(this.isVisualCompatible(this.value)){
+				this.importHtmlToLexical(this.value);
 			} else {
-				// Tab: Go to next cell
-				let nextCell = cells[currentIndex + 1];
-				
-				if(!nextCell){
-					const nextRow = row.nextElementSibling;
-					if(nextRow){
-						nextCell = nextRow.cells[0];
-					}
-				}
-				
-				if(nextCell){
-					const range = document.createRange();
-					range.selectNodeContents(nextCell);
-					range.collapse(false);
-					sel.removeAllRanges();
-					sel.addRange(range);
-					nextCell.focus();
-				}
-			}
-		} else if(e.key === 'Enter'){
-			const row = cell.parentElement;
-			const cells = Array.from(row.cells);
-			const currentIndex = cells.indexOf(cell);
-			
-			if(e.shiftKey){
-				// Shift+Enter: Go to cell above
-				const prevRow = row.previousElementSibling;
-				if(prevRow && prevRow.cells[currentIndex]){
-					const prevCell = prevRow.cells[currentIndex];
-					const range = document.createRange();
-					range.selectNodeContents(prevCell);
-					range.collapse(false);
-					sel.removeAllRanges();
-					sel.addRange(range);
-					prevCell.focus();
-				}
-			} else {
-				// Enter: Go to cell below or create paragraph after table
-				const nextRow = row.nextElementSibling;
-				if(nextRow && nextRow.cells[currentIndex]){
-					const nextCell = nextRow.cells[currentIndex];
-					const range = document.createRange();
-					range.selectNodeContents(nextCell);
-					range.collapse(false);
-					sel.removeAllRanges();
-					sel.addRange(range);
-					nextCell.focus();
-				} else {
-					// Last row - create paragraph after table
-					const table = cell.closest('table');
-					if(table){
-						const p = document.createElement('p');
-						p.innerHTML = '<br>';
-						
-						if(table.nextSibling){
-							table.parentNode.insertBefore(p, table.nextSibling);
-						} else {
-							table.parentNode.appendChild(p);
-						}
-						
-						const range = document.createRange();
-						range.setStart(p, 0);
-						range.setEnd(p, 0);
-						sel.removeAllRanges();
-						sel.addRange(range);
-						p.focus();
-					}
-				}
+				this.skipLexicalExport = true;
+				this.mode = 'code';
 			}
 		}
-	};
 
-	updateSelection = () => {
-		if(this.mode !== 'visual'){
-			this.selection = null;
-			return;
-		}
+		this.lexicalEditor.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
+			if(dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
+			this.debouncedSyncValue();
+			this.dispatchEvent(new CustomEvent('input', {
+				detail: { value: this.exportHtmlFromLexical() },
+				bubbles: true
+			}));
+		});
 
-		const sel = this.shadowRoot.getSelection() || window.getSelection();
-		
-		if(!sel.rangeCount){
-			this.selection = null;
-			return;
+		this.lexicalEditor.registerCommand(
+			lexical.SELECTION_CHANGE_COMMAND,
+			() => { this.updateSelection(); return false; },
+			lexical.COMMAND_PRIORITY_LOW
+		);
+
+		this.syncShadowSelection = () => {
+			if(this.mode !== 'visual' || !this.lexicalEditor) return;
+			const shadowSel = this.shadowRoot.getSelection?.();
+			if(!shadowSel || shadowSel.rangeCount === 0) return;
+			const range = shadowSel.getRangeAt(0);
+			if(!this.lexicalContainer.contains(range.startContainer)) return;
+			this.lexicalEditor.update(() => {
+				const lexSel = lexical.$createRangeSelectionFromDom(shadowSel, this.lexicalEditor);
+				if(lexSel) lexical.$setSelection(lexSel);
+			}, { discrete: true });
+			this.updateSelection();
+		};
+		document.addEventListener('selectionchange', this.syncShadowSelection);
+	}
+
+	async initMonaco() {
+		if(this.monacoEditor) return;
+		if(this.monacoInitPromise) return this.monacoInitPromise;
+		this.monacoInitPromise = this._initMonaco();
+		await this.monacoInitPromise;
+		this.monacoInitPromise = null;
+	}
+
+	async _initMonaco() {
+		const src = this.monacoSrc || DEFAULT_MONACO_SRC;
+
+		await new Promise((resolve, reject) => {
+			if(window.monaco){ resolve(); return; }
+			if(window.require?.defined?.('vs/editor/editor.main')){ resolve(); return; }
+			const existing = document.querySelector(`script[src="${src}/vs/loader.js"]`);
+			if(existing){
+				existing.addEventListener('load', () => {
+					window.require.config({ paths: { vs: `${src}/vs` } });
+					window.require(['vs/editor/editor.main'], () => resolve(), reject);
+				});
+				return;
+			}
+			const script = document.createElement('script');
+			script.src = `${src}/vs/loader.js`;
+			script.onload = () => {
+				window.require.config({ paths: { vs: `${src}/vs` } });
+				window.require(['vs/editor/editor.main'], () => resolve(), reject);
+			};
+			script.onerror = reject;
+			document.head.appendChild(script);
+		});
+
+		this.monacoEditor = window.monaco.editor.create(this.monacoContainer, {
+			value: formatCode(this.value),
+			language: 'html',
+			theme: getCalculatedTheme() === 'dark' ? 'vs-dark' : 'vs',
+			minimap: { enabled: false },
+			wordWrap: 'on',
+			fontSize: 14,
+			scrollBeyondLastLine: false,
+			automaticLayout: true,
+			tabSize: 2
+		});
+
+		const monacoCSS = document.querySelector('link[href*="monaco"][href*="editor.main.css"]');
+		if(monacoCSS){
+			const link = document.createElement('link');
+			link.rel = 'stylesheet';
+			link.href = monacoCSS.href;
+			this.shadowRoot.appendChild(link);
 		}
 
-		const range = sel.getRangeAt(0);
-		
-		const isStartInEditor = this.editorEl.contains(range.startContainer) || this.editorEl === range.startContainer;
-		const isEndInEditor = this.editorEl.contains(range.endContainer) || this.editorEl === range.endContainer;
-		
-		if(!isStartInEditor || !isEndInEditor){
-			this.selection = null;
-			return;
+		this.unsubscribeTheme = subscribeToTheme(() => {
+			if(this.monacoEditor) window.monaco.editor.setTheme(getCalculatedTheme() === 'dark' ? 'vs-dark' : 'vs');
+		});
+
+		this.monacoEditor.onDidChangeModelContent(() => {
+			this.skipValueSync = true;
+			this.value = this.monacoEditor.getValue();
+			this.skipValueSync = false;
+			this.updateFormValue();
+			this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true }));
+			this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value }, bubbles: true }));
+		});
+	}
+
+	/*
+		Content Sync
+	*/
+	importHtmlToLexical(htmlString) {
+		if(!this.lexicalEditor || !this.lx.lexicalHtml) return;
+		const { lexical, lexicalHtml } = this.lx;
+		const processed = (this.nodePreprocessors || []).reduce((str, fn) => fn(str), htmlString);
+		this.lexicalEditor.update(() => {
+			const root = lexical.$getRoot();
+			root.clear();
+			if(!processed?.trim()) return;
+			const dom = new DOMParser().parseFromString(processed, 'text/html');
+			const nodes = lexicalHtml.$generateNodesFromDOM(this.lexicalEditor, dom);
+			if(nodes.length > 0) lexical.$insertNodes(nodes);
+		}, { discrete: true });
+	}
+
+	exportHtmlFromLexical() {
+		if(!this.lexicalEditor || !this.lx.lexicalHtml) return this.value;
+		let result = '';
+		this.lexicalEditor.getEditorState().read(() => {
+			result = this.lx.lexicalHtml.$generateHtmlFromNodes(this.lexicalEditor, null);
+		});
+		return this.cleanExportedHtml(result);
+	}
+
+	isVisualCompatible(htmlStr) {
+		if(!htmlStr?.trim()) return true;
+		const incompatibleTags = new Set(['script', 'style', 'meta', 'link', 'head', 'iframe', 'object', 'embed', 'canvas', 'video', 'audio', 'form', 'input', 'button', 'select', 'textarea', 'fieldset', 'label', 'noscript', 'template', 'slot', 'svg', 'math']);
+		const checkers = this.nodeCompatCheckers || [];
+		const doc = new DOMParser().parseFromString(htmlStr, 'text/html');
+		const walker = document.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
+		let node;
+		while((node = walker.nextNode())){
+			if(checkers.some(check => check(node))) continue;
+			if(node.nodeType === Node.COMMENT_NODE) return false;
+			if(incompatibleTags.has(node.tagName?.toLowerCase())) return false;
 		}
+		return true;
+	}
 
-		const selectedText = range.toString();
+	cleanExportedHtml(html) {
+		const doc = new DOMParser().parseFromString(html, 'text/html');
+		doc.body.querySelectorAll('[class]').forEach(el => {
+			const classes = Array.from(el.classList).filter(c => !c.startsWith('k-editor-') && c !== 'td-u' && c !== 'td-lt');
+			if(classes.length === 0) el.removeAttribute('class');
+			else el.className = classes.join(' ');
+		});
+		doc.body.querySelectorAll('[style]').forEach(el => {
+			const style = el.style.cssText.replace(/white-space:\s*pre-wrap;?\s*/g, '').trim();
+			if(!style) el.removeAttribute('style');
+			else el.style.cssText = style;
+		});
+		doc.body.querySelectorAll('span:not([class]):not([style]):not([id])').forEach(span => {
+			if(!span.attributes.length) span.replaceWith(...span.childNodes);
+		});
+		doc.body.querySelectorAll('b > strong, i > em, b > b, strong > strong, i > i, em > em').forEach(inner => {
+			inner.replaceWith(...inner.childNodes);
+		});
+		doc.body.querySelectorAll('pre[data-highlight-language], code[data-highlight-language]').forEach(el => {
+			el.removeAttribute('data-highlight-language');
+			el.removeAttribute('data-language');
+		});
+		return doc.body.innerHTML;
+	}
 
-		if(range.collapsed){
-			this.selection = null;
-			this.cursor = {
-				container: range.startContainer,
-				offset: range.startOffset
-			};
-		} else {
-			this.cursor = null;
-			this.selection = {
-				startContainer: range.startContainer,
-				startOffset: range.startOffset,
-				endContainer: range.endContainer,
-				endOffset: range.endOffset,
-			text: selectedText,
-			collapsed: false
-		};
+	syncValueFromLexical() {
+		if(!this.lexicalEditor) return;
+		this.lexicalValueSync = true;
+		this.value = this.exportHtmlFromLexical();
+		this.updateFormValue();
+	}
+
+	syncContentToEditors() {
+		if(this.mode === 'visual' && this.lexicalEditor){
+			this.importHtmlToLexical(this.value);
+		}
 	}
-	};	handleEditorInput = () => {
-		// Don't update this.value on every keystroke - it triggers Lit's reactive system
-		// which calls syncContent() and destroys the cursor position.
-		// Use debounce to only update after user stops typing for 300ms.
-		this.debouncedDispatchChange();
-		this.dispatchEvent(new CustomEvent('input', { detail: { value: this.editorEl.innerHTML } }));
-	};
 
-	handleTextareaInput = (e) => {
+	async handleModeSwitch(previousMode) {
 		if(this.mode === 'code'){
-			this.value = e.target.value;
+			if(this.lexicalEditor && !this.skipLexicalExport) this.value = this.exportHtmlFromLexical();
+			this.skipLexicalExport = false;
+			await this.initMonaco();
+			if(this.monacoEditor){
+				this.monacoEditor.setValue(formatCode(this.value));
+				this.monacoEditor.layout();
+			}
+		} else if(this.mode === 'visual'){
+			if(this.monacoEditor) this.value = this.monacoEditor.getValue();
+			if(this.lexicalEditor) this.importHtmlToLexical(this.value);
 		}
-	};
+		this.requestUpdate();
+	}
 
-	handleEditorPaste = (e) => {
-		e.preventDefault();
-		const text = e.clipboardData.getData('text/plain');
-		document.execCommand('insertText', false, text);
-	};
+	/*
+		Form Integration
+	*/
+	updateFormValue() {
+		this.internals.setFormValue(this.getValue());
+	}
 
-	handleEditorBlur = () => {
-		if(this.mode === 'visual'){
-			// Save selection before it's cleared
-			const selection = this.shadowRoot.getSelection() || window.getSelection();
-			if(selection.rangeCount > 0){
-				const range = selection.getRangeAt(0);
-				if(this.editorEl.contains(range.commonAncestorContainer)){
-					this.savedSelection = {
-						startContainer: range.startContainer,
-						startOffset: range.startOffset,
-						endContainer: range.endContainer,
-						endOffset: range.endOffset,
-						collapsed: range.collapsed
-					};
-				}
-			}
-			
-			const cleanedValue = this.cleanupHtml(this.editorEl.innerHTML);
-			if(cleanedValue !== this.value){
-				this.value = cleanedValue;
-				this.syncContent();
-			}
+	formResetCallback() {
+		this.value = '';
+	}
+
+	formStateRestoreCallback(state) {
+		this.value = state;
+	}
+
+	/*
+		Selection Management
+	*/
+	updateSelection = () => {
+		if(this.mode !== 'visual' || !this.lexicalEditor){
+			this.selection = null;
+			return;
 		}
+		const { lexical } = this.lx;
+		this.lexicalEditor.getEditorState().read(() => {
+			const sel = lexical.$getSelection();
+			if(lexical.$isRangeSelection(sel) && !sel.isCollapsed()){
+				this.selection = { text: sel.getTextContent(), collapsed: false };
+			} else {
+				this.selection = null;
+				this.cursor = sel ? { anchor: sel.anchor, focus: sel.focus } : null;
+			}
+		});
 	};
 
 	/*
 		Public Methods - Mode Control
 	*/
 	setMode(mode) {
-		if(['visual', 'code'].includes(mode)){
-			if(this.mode === 'visual' && mode === 'code'){
-				this.value = this.cleanupHtml(this.editorEl.innerHTML);
-			}
-			this.mode = mode;
+		if(!['visual', 'code'].includes(mode)) return this;
+		if(mode === 'visual' && !this.isVisualCompatible(this.getValue())){
+			Dialog.confirm(
+				'This html contains code that is not compatible with the visual editor, the incompatible code will be lost',
+				response => { if(response) this.mode = mode; },
+				{ title: 'Warning', confirmText: 'Change Anyways' }
+			);
+			return this;
 		}
+		this.mode = mode;
 		return this;
 	}
 
 	toggleMode() {
-		const newMode = this.mode === 'visual' ? 'code' : 'visual';
-		this.setMode(newMode);
-		return this;
+		return this.setMode(this.mode === 'visual' ? 'code' : 'visual');
 	}
 
 	/*
 		Public Methods - Content Management
 	*/
 	getValue() {
-		if(this.mode === 'visual'){
-			const content = this.editorEl ? this.editorEl.innerHTML : this.value;
-			return content.replace(/\u200B/g, '');
+		if(this.mode === 'visual' && this.lexicalEditor){
+			this.skipValueSync = true;
+			this.value = this.exportHtmlFromLexical();
+			this.skipValueSync = false;
+		} else if(this.mode === 'code' && this.monacoEditor){
+			return this.monacoEditor.getValue();
 		}
 		return this.value;
 	}
 
-	setValue(html) {
-		this.value = html;
-		this.syncContent();
+	setValue(htmlStr) {
+		if(this.lexicalEditor && this.mode === 'visual' && !this.isVisualCompatible(htmlStr)){
+			this.value = htmlStr;
+			this.skipLexicalExport = true;
+			this.mode = 'code';
+			this.updateFormValue();
+			return this;
+		}
+		this.skipValueSync = true;
+		this.value = htmlStr;
+		if(this.mode === 'visual') this.syncContentToEditors();
+		else if(this.mode === 'code' && this.monacoEditor) this.monacoEditor.setValue(formatCode(htmlStr));
+		this.updateFormValue();
+		this.skipValueSync = false;
 		return this;
 	}
 
 	clear() {
-		this.value = '';
-		this.syncContent();
-		return this;
-	}
-
-	cleanupHtml(html){
-		const tempDiv = document.createElement('div');
-		tempDiv.innerHTML = html;
-		
-		const inlineTags = ['code', 'a', 'span', 'strong', 'em', 'b', 'i', 'u', 's'];
-		const blockTags = ['pre', 'div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote'];
-		
-		const unwrapNested = (parent, tagName) => {
-			const elements = parent.querySelectorAll(tagName);
-			elements.forEach(el => {
-				let ancestor = el.parentElement;
-				while(ancestor && ancestor !== parent){
-					if(ancestor.tagName.toLowerCase() === tagName){
-						while(el.firstChild){
-							el.parentNode.insertBefore(el.firstChild, el);
-						}
-						el.parentNode.removeChild(el);
-						break;
-					}
-					ancestor = ancestor.parentElement;
-				}
-			});
-		};
-		
-		const removeUselessStyles = (parent) => {
-			const allElements = parent.querySelectorAll('*');
-			allElements.forEach(el => {
-				if(!el.hasAttribute('style')) return;
-				
-				const style = el.style;
-				const uselessProps = [
-					'font-size',
-					'font-family', 
-					'background-color',
-					'line-height',
-					'font-weight',
-					'font-style'
-				];
-				
-				const uselessValues = [
-					'inherit',
-					'rgba(0, 0, 0, 0)',
-					'transparent',
-					'initial',
-					'unset'
-				];
-				
-				uselessProps.forEach(prop => {
-					const value = style.getPropertyValue(prop);
-					if(value && uselessValues.some(uv => value.includes(uv))){
-						style.removeProperty(prop);
-					}
-				});
-				
-				if(style.length === 0){
-					el.removeAttribute('style');
-				}
-			});
-		};
-		
-		const unwrapEmptySpans = (parent) => {
-			const spans = parent.querySelectorAll('span');
-			spans.forEach(span => {
-				if(!span.className && !span.id && !span.hasAttribute('style')){
-					while(span.firstChild){
-						span.parentNode.insertBefore(span.firstChild, span);
-					}
-					span.parentNode.removeChild(span);
-				}
-			});
-		};
-		
-		const normalizeWhitespace = (parent) => {
-			const walker = document.createTreeWalker(
-				parent,
-				NodeFilter.SHOW_TEXT,
-				null
-			);
-			
-			const textNodes = [];
-			while(walker.nextNode()){
-				textNodes.push(walker.currentNode);
-			}
-			
-			textNodes.forEach(node => {
-				node.textContent = node.textContent.replace(/\u00A0/g, ' ');
-			});
-		};
-		
-		inlineTags.forEach(tag => unwrapNested(tempDiv, tag));
-		blockTags.forEach(tag => unwrapNested(tempDiv, tag));
-		removeUselessStyles(tempDiv);
-		unwrapEmptySpans(tempDiv);
-		normalizeWhitespace(tempDiv);
-		
-		return tempDiv.innerHTML;
+		return this.setValue('');
 	}
 
 	/*
 		Public Methods - Text Formatting
 	*/
 	bold() {
-		this.execCommand('bold');
+		this.lexicalFormat('bold');
 		return this;
 	}
 
 	italic() {
-		this.execCommand('italic');
+		this.lexicalFormat('italic');
 		return this;
 	}
 
 	underline() {
-		this.execCommand('underline');
+		this.lexicalFormat('underline');
 		return this;
 	}
 
 	strikethrough() {
-		this.execCommand('strikeThrough');
+		this.lexicalFormat('strikethrough');
 		return this;
 	}
 
@@ -530,12 +525,18 @@ export default class HtmlEditor extends ShadowComponent {
 		Public Methods - Lists
 	*/
 	orderedList() {
-		this.execCommand('insertOrderedList');
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		this.lexicalEditor.update(() => {
+			this.lx.list.$insertList('number');
+		}, { discrete: true });
 		return this;
 	}
 
 	unorderedList() {
-		this.execCommand('insertUnorderedList');
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		this.lexicalEditor.update(() => {
+			this.lx.list.$insertList('bullet');
+		}, { discrete: true });
 		return this;
 	}
 
@@ -543,22 +544,22 @@ export default class HtmlEditor extends ShadowComponent {
 		Public Methods - Text Alignment
 	*/
 	alignLeft() {
-		this.execCommand('justifyLeft');
+		this.lexicalFormatElement('left');
 		return this;
 	}
 
 	alignCenter() {
-		this.execCommand('justifyCenter');
+		this.lexicalFormatElement('center');
 		return this;
 	}
 
 	alignRight() {
-		this.execCommand('justifyRight');
+		this.lexicalFormatElement('right');
 		return this;
 	}
 
 	alignJustify() {
-		this.execCommand('justifyFull');
+		this.lexicalFormatElement('justify');
 		return this;
 	}
 
@@ -566,52 +567,46 @@ export default class HtmlEditor extends ShadowComponent {
 		Public Methods - Text Color
 	*/
 	setTextColor(color) {
-		this.execCommand('foreColor', color);
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const { lexical, selection } = this.lx;
+		this.lexicalEditor.update(() => {
+			const sel = lexical.$getSelection();
+			if(!lexical.$isRangeSelection(sel)) return;
+			selection.$patchStyleText(sel, { color });
+		}, { discrete: true });
 		return this;
 	}
 
 	removeTextColor() {
-		this.execCommand('removeFormat');
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const { lexical, selection } = this.lx;
+		this.lexicalEditor.update(() => {
+			const sel = lexical.$getSelection();
+			if(!lexical.$isRangeSelection(sel)) return;
+			selection.$patchStyleText(sel, { color: null });
+		}, { discrete: true });
 		return this;
 	}
 
 	setTextBackgroundColor(color) {
-		this.execCommand('backColor', color);
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const { lexical, selection } = this.lx;
+		this.lexicalEditor.update(() => {
+			const sel = lexical.$getSelection();
+			if(!lexical.$isRangeSelection(sel)) return;
+			selection.$patchStyleText(sel, { 'background-color': color });
+		}, { discrete: true });
 		return this;
 	}
 
 	removeTextBackgroundColor() {
-		const selection = this.shadowRoot.getSelection();
-		if(!selection || selection.rangeCount === 0) return this;
-
-		const range = selection.getRangeAt(0);
-		if(range.collapsed) return this;
-
-		const fragment = range.extractContents();
-		const walker = document.createTreeWalker(
-			fragment,
-			NodeFilter.SHOW_ELEMENT,
-			null
-		);
-
-		const removeBackground = (el) => {
-			if(el.style){
-				el.style.backgroundColor = '';
-				if(!el.style.cssText){
-					el.removeAttribute('style');
-				}
-			}
-		};
-
-		let node;
-		while(node = walker.nextNode()){
-			removeBackground(node);
-		}
-
-		removeBackground(fragment.firstChild);
-		range.insertNode(fragment);
-		
-		this.editorEl.dispatchEvent(new Event('input', {bubbles: true}));
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const { lexical, selection } = this.lx;
+		this.lexicalEditor.update(() => {
+			const sel = lexical.$getSelection();
+			if(!lexical.$isRangeSelection(sel)) return;
+			selection.$patchStyleText(sel, { 'background-color': null });
+		}, { discrete: true });
 		return this;
 	}
 
@@ -619,830 +614,305 @@ export default class HtmlEditor extends ShadowComponent {
 		Public Methods - Formatting Control
 	*/
 	removeFormat() {
-		if(this.mode !== 'visual') return this;
-		
-		// If there's a selection, use the standard removeFormat command
-		if(this.selection){
-			this.execCommand('removeFormat');
-			return this;
-		}
-		
-		// No selection - check if cursor is inside a formatting tag
-		const sel = this.shadowRoot.getSelection() || window.getSelection();
-		if(!sel.rangeCount) return this;
-		
-		let node = sel.getRangeAt(0).startContainer;
-		if(node.nodeType === Node.TEXT_NODE){
-			node = node.parentElement;
-		}
-		
-		// Find the closest formatting element
-		const formattingTags = ['B', 'I', 'U', 'S', 'STRONG', 'EM', 'CODE', 'MARK', 'SUB', 'SUP', 'SPAN'];
-		const formattingElement = node.closest(formattingTags.map(tag => tag.toLowerCase()).join(','));
-		
-		if(formattingElement && this.editorEl.contains(formattingElement)){
-			// Get the text content
-			const textContent = formattingElement.textContent;
-			
-			// Create a text node to replace the formatting element
-			const textNode = document.createTextNode(textContent);
-			formattingElement.replaceWith(textNode);
-			
-			// Place cursor at the end of the text
-			const range = document.createRange();
-			range.setStart(textNode, textContent.length);
-			range.setEnd(textNode, textContent.length);
-			sel.removeAllRanges();
-			sel.addRange(range);
-			
-			// Update value
-			this.value = this.editorEl.innerHTML;
-		}
-		
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const { lexical, selection } = this.lx;
+		this.lexicalEditor.update(() => {
+			const sel = lexical.$getSelection();
+			if(!lexical.$isRangeSelection(sel)) return;
+			sel.getNodes().forEach(node => {
+				if(lexical.$isTextNode(node)) node.setFormat(0);
+			});
+			selection.$patchStyleText(sel, { color: null, 'background-color': null });
+		}, { discrete: true });
 		return this;
 	}
 
 	formatBlock(tag) {
-		this.execCommand('formatBlock', tag);
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const { lexical, richText, code } = this.lx;
+		this.lexicalEditor.update(() => {
+			const sel = lexical.$getSelection();
+			if(!lexical.$isRangeSelection(sel)) return;
+			const anchor = sel.anchor.getNode();
+			const topLevel = anchor.getTopLevelElementOrThrow();
+			const isCodeNode = code.$isCodeNode(topLevel);
+
+			let newBlock;
+			if(tag === 'p'){
+				newBlock = lexical.$createParagraphNode();
+			} else if(tag.match(/^h[1-6]$/)){
+				newBlock = richText.$createHeadingNode(tag);
+			} else if(tag === 'blockquote'){
+				newBlock = richText.$createQuoteNode();
+			} else if(tag === 'pre'){
+				newBlock = code.$createCodeNode();
+			} else {
+				return;
+			}
+
+			if(isCodeNode && tag !== 'pre'){
+				const text = topLevel.getTextContent();
+				topLevel.replace(newBlock);
+				newBlock.append(lexical.$createTextNode(text));
+			} else {
+				const children = topLevel.getChildren();
+				topLevel.replace(newBlock);
+				children.forEach(child => newBlock.append(child));
+			}
+			newBlock.selectEnd();
+		}, { discrete: true });
 		return this;
 	}
 
-	insertHTML(html) {
-		this.execCommand('insertHTML', html);
+	insertHTML(htmlStr) {
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const { lexical, lexicalHtml } = this.lx;
+		this.lexicalEditor.update(() => {
+			const dom = new DOMParser().parseFromString(htmlStr, 'text/html');
+			const nodes = lexicalHtml.$generateNodesFromDOM(this.lexicalEditor, dom);
+			lexical.$insertNodes(nodes);
+		}, { discrete: true });
 		return this;
 	}
 
-	/**
-	 * Insert or edit a table at the cursor position
-	 * @param {number} rows - Number of rows (excluding header row if includeHeaders is true)
-	 * @param {number} columns - Number of columns
-	 * @param {boolean} includeHeaders - Whether to include a header row
-	 * @param {Array<Array<string>>|null} cellData - Optional 2D array of cell contents for editing existing tables
-	 * @returns {HtmlEditor} Returns this for chaining
-	 */
+	insertAtCursor(htmlStr) {
+		return this.insertHTML(htmlStr);
+	}
+
 	insertTable(rows, columns, includeHeaders = false, cellData = null) {
-		if(this.mode !== 'visual') return this;
-		
-		const CURSOR_MARKER = '\uFFF0';
-		const markerData = this.getValueWithSelectionMarkers();
-		let html = markerData.html;
-		
-		// Create table element
-		const table = document.createElement('table');
-		table.style.cssText = 'border-collapse: collapse; width: 100%;';
-		
-		// Create header if needed
-		if(includeHeaders){
-			const thead = document.createElement('thead');
-			const headerRow = document.createElement('tr');
-			
-			for(let c = 0; c < columns; c++){
-				const th = document.createElement('th');
-				th.style.cssText = 'border: 1px solid var(--border-color, #ccc); padding: 0.5rem; text-align: left; background-color: var(--background-secondary, #f5f5f5);';
-				
-				if(cellData && cellData[0] && cellData[0][c] !== undefined){
-					th.innerHTML = cellData[0][c];
-				} else {
-					th.innerHTML = `Header ${c + 1}`;
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const { lexical, table } = this.lx;
+		this.lexicalEditor.update(() => {
+			const totalRows = rows + (includeHeaders ? 1 : 0);
+			const rowNodes = [];
+			for(let r = 0; r < totalRows; r++){
+				const cells = [];
+				for(let c = 0; c < columns; c++){
+					const isHeader = includeHeaders && r === 0;
+					const headerState = isHeader ? table.TableCellHeaderStates.ROW : table.TableCellHeaderStates.NO_STATUS;
+					const cell = table.$createTableCellNode(headerState);
+					const content = cellData?.[r]?.[c] ?? (isHeader ? `Header ${c + 1}` : '');
+					const p = lexical.$createParagraphNode();
+					p.append(lexical.$createTextNode(content || '\u00A0'));
+					cell.append(p);
+					cells.push(cell);
 				}
-				
-				headerRow.appendChild(th);
+				rowNodes.push(table.$createTableRowNode().append(...cells));
 			}
-			
-			thead.appendChild(headerRow);
-			table.appendChild(thead);
-		}
-		
-		// Create body rows
-		const tbody = document.createElement('tbody');
-		const startRow = includeHeaders && cellData ? 1 : 0;
-		const dataStartRow = includeHeaders ? 1 : 0;
-		
-		for(let r = 0; r < rows; r++){
-			const row = document.createElement('tr');
-			
-			for(let c = 0; c < columns; c++){
-				const td = document.createElement('td');
-				td.style.cssText = 'border: 1px solid var(--border-color, #ccc); padding: 0.5rem;';
-				
-				if(cellData && cellData[r + dataStartRow] && cellData[r + dataStartRow][c] !== undefined){
-					td.innerHTML = cellData[r + dataStartRow][c];
-				} else {
-					td.innerHTML = '\u200B';
-				}
-				
-				row.appendChild(td);
+			const tableNode = table.$createTableNode().append(...rowNodes);
+			const sel = lexical.$getSelection();
+			if(lexical.$isRangeSelection(sel)){
+				const anchor = sel.anchor.getNode();
+				const topLevel = anchor.getTopLevelElementOrThrow();
+				topLevel.insertAfter(tableNode);
+				const trailing = lexical.$createParagraphNode();
+				tableNode.insertAfter(trailing);
+				trailing.selectEnd();
+			} else {
+				const root = lexical.$getRoot();
+				root.append(tableNode);
+				root.append(lexical.$createParagraphNode());
 			}
-			
-			tbody.appendChild(row);
-		}
-		
-		table.appendChild(tbody);
-		
-		// Convert to HTML
-		const tempDiv = document.createElement('div');
-		tempDiv.appendChild(table);
-		const tableHTML = tempDiv.innerHTML;
-		
-		const pAfter = document.createElement('p');
-		pAfter.innerHTML = '<br>';
-		const fullHTML = tableHTML + pAfter.outerHTML;
-		
-		// Insert or append table
-		if(markerData.hasCursor){
-			html = html.replace(CURSOR_MARKER, fullHTML + CURSOR_MARKER);
-		} else if(markerData.hasSelection){
-			// Replace selection with table
-			html = html.replace(markerData.selectionStart, '').replace(markerData.selectionEnd, '');
-			html = html + fullHTML;
-		} else {
-			// No cursor or selection - append to end
-			html = html + fullHTML;
-		}
-		
-		// Restore cursor position after table
-		const markers = {
-			hasCursor: markerData.hasCursor,
-			hasSelection: false,
-			cursorMarker: CURSOR_MARKER
-		};
-		
-		this.setValueFromSelectionMarkers(html, markers);
-		
+		}, { discrete: true });
 		return this;
 	}
 
-	insertElementAtCursor(element, selectAfter = true) {
-		if(this.mode !== 'visual') return this;
-		
-		const CURSOR_MARKER = '\uFFF0';
-		const SELECT_START = '\uFFF1';
-		const SELECT_END = '\uFFF2';
-		
-		const markerData = this.getValueWithSelectionMarkers();
-		let html = markerData.html;
-		
-		if(selectAfter){
-			element.textContent = SELECT_START + (element.textContent || '') + SELECT_END;
-		}
-		const elementHtml = element.outerHTML;
-		
-		if(markerData.hasCursor){
-			html = html.replace(CURSOR_MARKER, elementHtml);
-		} else {
-			// No cursor - append at the very end of content
-			// Wrap inline elements in a paragraph
-			const inlineElements = ['code', 'a', 'span', 'strong', 'em', 'b', 'i', 'u', 's', 'mark', 'sub', 'sup'];
-			const tagName = element.tagName.toLowerCase();
-			
-			if(inlineElements.includes(tagName)){
-				html = html + '<p>' + elementHtml + '</p>';
-			} else {
-				html = html + elementHtml;
-			}
-		}
-		
-		const markers = {
-			hasCursor: false,
-			hasSelection: selectAfter,
-			selectionStart: SELECT_START,
-			selectionEnd: SELECT_END,
-			selectedText: element.textContent || ''
-		};
-		
-		this.setValueFromSelectionMarkers(html, markers);
-		
-		return this;
+	insertElementAtCursor(element) {
+		return this.insertHTML(element.outerHTML);
 	}
 
-	replaceSelectionWithElement(element, selectAfter = true) {
-		if(this.mode !== 'visual') return this;
-		
-		const SELECT_START = '\uFFF1';
-		const SELECT_END = '\uFFF2';
-		
-		const markerData = this.getValueWithSelectionMarkers();
-		
-		if(!markerData.hasSelection) return this;
-		
-		let html = markerData.html;
-		
-		if(selectAfter){
-			element.textContent = SELECT_START + element.textContent + SELECT_END;
-		}
-		const elementHtml = element.outerHTML;
-		
-		const selectedPattern = SELECT_START + markerData.selectedText + SELECT_END;
-		html = html.replace(selectedPattern, elementHtml);
-		
-		const markers = {
-			hasCursor: false,
-			hasSelection: selectAfter,
-			selectionStart: SELECT_START,
-			selectionEnd: SELECT_END,
-			selectedText: markerData.selectedText
-		};
-		
-		this.setValueFromSelectionMarkers(html, markers);
-		
+	replaceSelectionWithElement(element) {
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const { lexical, lexicalHtml } = this.lx;
+		this.lexicalEditor.update(() => {
+			const sel = lexical.$getSelection();
+			if(!lexical.$isRangeSelection(sel)) return;
+			sel.removeText();
+			const dom = new DOMParser().parseFromString(element.outerHTML, 'text/html');
+			const nodes = lexicalHtml.$generateNodesFromDOM(this.lexicalEditor, dom);
+			lexical.$insertNodes(nodes);
+		}, { discrete: true });
 		return this;
 	}
 
+	wrapSelection(before, after, savedSelection = null) {
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const text = savedSelection || this.getSelectedText();
+		if(!text) return this;
+		return this.insertHTML(before + text + after);
+	}
+
 	/*
 		Public Methods - Selection Management
 	*/
 	getSelection() {
-		if(this.mode !== 'visual') return null;
-		
-		this.editorEl.focus();
-		const selection = window.getSelection();
-		
-		if(!selection.rangeCount) return null;
-
-		const range = selection.getRangeAt(0);
-		const isInEditor = this.editorEl.contains(range.commonAncestorContainer);
-		
-		if(!isInEditor) return null;
-
-		return {
-			text: selection.toString(),
-			html: range.cloneContents().textContent ? new XMLSerializer().serializeToString(range.cloneContents()) : '',
-			range: range,
-			selection: selection
-		};
+		if(this.mode !== 'visual' || !this.lexicalEditor) return null;
+		let result = null;
+		const { lexical } = this.lx;
+		this.lexicalEditor.getEditorState().read(() => {
+			const sel = lexical.$getSelection();
+			if(!lexical.$isRangeSelection(sel) || sel.isCollapsed()) return;
+			result = { text: sel.getTextContent(), html: sel.getTextContent(), selection: sel };
+		});
+		return result;
 	}
 
 	getSelectedText() {
-		const sel = this.getSelection();
-		return sel ? sel.text : '';
+		let text = '';
+		if(this.mode !== 'visual' || !this.lexicalEditor) return text;
+		const { lexical } = this.lx;
+		this.lexicalEditor.getEditorState().read(() => {
+			const sel = lexical.$getSelection();
+			if(lexical.$isRangeSelection(sel)) text = sel.getTextContent();
+		});
+		return text;
 	}
 
 	getSelectedHTML() {
-		const sel = this.getSelection();
-		return sel ? sel.html : '';
-	}
-
-	setSelection(startNode, startOffset, endNode, endOffset) {
-		if(this.mode !== 'visual') return this;
-
-		this.editorEl.focus();
-		const selection = window.getSelection();
-		const range = document.createRange();
-		
-		range.setStart(startNode, startOffset);
-		range.setEnd(endNode, endOffset);
-		
-		selection.removeAllRanges();
-		selection.addRange(range);
-		
-		return this;
+		return this.getSelectedText();
 	}
 
 	selectAll() {
-		if(this.mode === 'visual'){
-			this.execCommand('selectAll');
-		} else {
-			this.textareaEl.select();
+		if(this.mode === 'visual' && this.lexicalEditor){
+			const { lexical } = this.lx;
+			this.lexicalEditor.update(() => {
+				lexical.$selectAll();
+			}, { discrete: true });
+		} else if(this.monacoEditor){
+			const model = this.monacoEditor.getModel();
+			if(model) this.monacoEditor.setSelection(model.getFullModelRange());
 		}
 		return this;
 	}
 
-	replaceSelection(html) {
-		if(this.mode !== 'visual') return this;
-		
-		const sel = this.getSelection();
-		if(!sel) return this;
-
-		sel.range.deleteContents();
-		const fragment = sel.range.createContextualFragment(html);
-		sel.range.insertNode(fragment);
-		
-		this.value = this.editorEl.innerHTML;
-		return this;
+	replaceSelection(htmlStr) {
+		return this.insertHTML(htmlStr);
 	}
 
 	deleteSelection() {
 		if(this.mode === 'visual'){
-			this.execCommand('delete');
-		} else {
-			const start = this.textareaEl.selectionStart;
-			const end = this.textareaEl.selectionEnd;
-			this.textareaEl.value = this.textareaEl.value.substring(0, start) + this.textareaEl.value.substring(end);
-			this.value = this.textareaEl.value;
+			this.lexicalCmd('DELETE_CHARACTER_COMMAND', false);
+		} else if(this.monacoEditor){
+			this.monacoEditor.trigger('keyboard', 'deleteAllLeft', null);
 		}
 		return this;
 	}
 
-	getTextPosition(root, targetNode){
-		const walker = document.createTreeWalker(
-			root,
-			NodeFilter.SHOW_TEXT,
-			null
-		);
-		
-		let position = 0;
-		
-		while(walker.nextNode()){
-			const node = walker.currentNode;
-			
-			if(targetNode.contains(node)){
-				return position;
-			}
-			
-			position += node.textContent.length;
-		}
-		
-		return position;
-	}
-
-	wrapSelection(before, after, savedSelection = null){
-		if(this.mode !== 'visual') return this;
-		
-		let selectedText;
-		
-		if(savedSelection){
-			selectedText = savedSelection;
-		} else {
-			const selection = window.getSelection();
-			
-			if(!selection.rangeCount || selection.isCollapsed){
-				return this;
-			}
-			
-			const range = selection.getRangeAt(0);
-			const isInEditor = this.editorEl.contains(range.commonAncestorContainer);
-			
-			if(!isInEditor){
-				return this;
-			}
-			
-			selectedText = selection.toString();
-		}
-		
-		if(!selectedText) return this;
-		
-		this.editorEl.focus();
-		
-		const openingTagMatch = before.match(/<([a-zA-Z]+)/);
-		if(!openingTagMatch) return this;
-		const outerTagName = openingTagMatch[1];
-		
-		const tempDiv = document.createElement('div');
-		tempDiv.innerHTML = this.getValue();
-		
-		const textContent = tempDiv.textContent;
-		const textIndex = textContent.indexOf(selectedText);
-		
-		if(textIndex === -1) return this;
-		
-		const walker = document.createTreeWalker(
-			tempDiv,
-			NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
-			null
-		);
-		
-		let currentPos = 0;
-		let startNode = null;
-		let startOffset = 0;
-		let endNode = null;
-		let endOffset = 0;
-		const overlappingWrappers = [];
-		
-		while(walker.nextNode()){
-			const node = walker.currentNode;
-			
-			if(node.nodeType === Node.ELEMENT_NODE){
-				if(node.tagName.toLowerCase() === outerTagName){
-					const nodeTextStart = this.getTextPosition(tempDiv, node);
-					const nodeTextEnd = nodeTextStart + node.textContent.length;
-					
-					const selectionEnd = textIndex + selectedText.length;
-					const overlaps = !(nodeTextEnd <= textIndex || nodeTextStart >= selectionEnd);
-					
-					if(overlaps){
-						overlappingWrappers.push(node);
-					}
-				}
-				continue;
-			}
-			
-			const nodeLength = node.textContent.length;
-			const nodeStart = currentPos;
-			const nodeEnd = currentPos + nodeLength;
-			
-			if(!startNode && nodeEnd > textIndex){
-				startNode = node;
-				startOffset = textIndex - nodeStart;
-			}
-			
-			if(nodeEnd >= textIndex + selectedText.length){
-				endNode = node;
-				endOffset = (textIndex + selectedText.length) - nodeStart;
-				break;
-			}
-			
-			currentPos += nodeLength;
+	getValueWithSelectionMarkers() {
+		if(this.mode !== 'visual' || !this.lexicalEditor){
+			return { html: this.value, hasCursor: false, hasSelection: false, selectedText: '' };
 		}
-		
-		if(overlappingWrappers.length > 0){
-			overlappingWrappers.forEach(wrapper => {
-				const parent = wrapper.parentNode;
-				const isPreTag = wrapper.tagName.toLowerCase() === 'pre';
-				
-				const allTags = [];
-				const collectTags = (el) => {
-					allTags.push(el);
-					Array.from(el.children).forEach(child => collectTags(child));
-				};
-				collectTags(wrapper);
-				
-				if(isPreTag){
-					const p = document.createElement('p');
-					while(wrapper.firstChild){
-						p.appendChild(wrapper.firstChild);
-					}
-					parent.replaceChild(p, wrapper);
-				} else {
-					allTags.reverse().forEach(tag => {
-						if(tag.parentNode){
-							while(tag.firstChild){
-								tag.parentNode.insertBefore(tag.firstChild, tag);
-							}
-							tag.parentNode.removeChild(tag);
-						}
-					});
-				}
-			});
-		} else if(startNode && endNode){
-			const range = document.createRange();
-			range.setStart(startNode, startOffset);
-			range.setEnd(endNode, endOffset);
-			
-			const fragment = range.extractContents();
-			
-			const wrapperDiv = document.createElement('div');
-			wrapperDiv.innerHTML = before + after;
-			const wrapper = wrapperDiv.firstChild;
-			
-			let innermost = wrapper;
-			while(innermost.firstChild && innermost.firstChild.nodeType === Node.ELEMENT_NODE){
-				innermost = innermost.firstChild;
-			}
-			
-			innermost.appendChild(fragment);
-			range.insertNode(wrapper);
-			
-			if(outerTagName === 'pre'){
-				let parent = wrapper.parentNode;
-				while(parent && parent !== tempDiv){
-					if(parent.tagName && parent.tagName.toLowerCase() === 'p'){
-						const afterContent = [];
-						let sibling = wrapper.nextSibling;
-						while(sibling){
-							const next = sibling.nextSibling;
-							afterContent.push(sibling);
-							sibling = next;
-						}
-						
-						parent.parentNode.insertBefore(wrapper, parent.nextSibling);
-						
-						if(afterContent.length > 0 && afterContent.some(n => n.textContent.trim())){
-							const newP = document.createElement('p');
-							afterContent.forEach(node => newP.appendChild(node));
-							wrapper.parentNode.insertBefore(newP, wrapper.nextSibling);
-						}
-						
-						break;
-					}
-					parent = parent.parentNode;
-				}
-			}
-		}
-		
-		this.setValue(tempDiv.innerHTML);
-		
-		this.editorEl.focus();
-		
-		setTimeout(() => {
-			const textContent = this.editorEl.textContent;
-			const textIndex = textContent.indexOf(selectedText);
-			
-			if(textIndex === -1) return;
-			
-			const walker = document.createTreeWalker(
-				this.editorEl,
-				NodeFilter.SHOW_TEXT,
-				null
-			);
-			
-			let currentPos = 0;
-			let startNode = null;
-			let startOffset = 0;
-			let endNode = null;
-			let endOffset = 0;
-			
-			while(walker.nextNode()){
-				const node = walker.currentNode;
-				const nodeLength = node.textContent.length;
-				const nodeStart = currentPos;
-				const nodeEnd = currentPos + nodeLength;
-				
-				if(startNode === null && nodeEnd > textIndex){
-					startNode = node;
-					startOffset = textIndex - nodeStart;
-				}
-				
-				if(nodeEnd >= textIndex + selectedText.length){
-					endNode = node;
-					endOffset = (textIndex + selectedText.length) - nodeStart;
-					break;
-				}
-				
-				currentPos += nodeLength;
-			}
-			
-			if(startNode && endNode){
-				const range = document.createRange();
-				range.setStart(startNode, startOffset);
-				range.setEnd(endNode, endOffset);
-				
-				const selection = window.getSelection();
-				selection.removeAllRanges();
-				selection.addRange(range);
+		let result = { html: this.exportHtmlFromLexical(), hasCursor: false, hasSelection: false, selectedText: '' };
+		const { lexical } = this.lx;
+		this.lexicalEditor.getEditorState().read(() => {
+			const sel = lexical.$getSelection();
+			if(!lexical.$isRangeSelection(sel)) return;
+			if(sel.isCollapsed()){
+				result.hasCursor = true;
+			} else {
+				result.hasSelection = true;
+				result.selectedText = sel.getTextContent();
 			}
-		}, 0);
-		
-		return this;
+		});
+		return result;
 	}
 
-	insertAtCursor(html) {
-		this.insertHTML(html);
-		return this;
+	setValueFromSelectionMarkers(htmlStr) {
+		return this.setValue(htmlStr);
+	}
+
+	captureSelection() {
+		return this.selection;
+	}
+
+	restoreSavedSelection() {
+		return false;
+	}
+
+	clearSavedSelection() {
+		this.savedSelection = null;
 	}
 
 	/*
 		Public Methods - Links and Media
 	*/
 	createLink(url) {
-		this.execCommand('createLink', url);
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const { link } = this.lx;
+		this.lexicalEditor.update(() => {
+			link.$toggleLink(url);
+		}, { discrete: true });
+		return this;
+	}
+
+	createLinkWithText(url, text) {
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const { lexical, link } = this.lx;
+		this.lexicalEditor.update(() => {
+			const sel = lexical.$getSelection();
+			if(lexical.$isRangeSelection(sel) && !sel.isCollapsed()) sel.removeText();
+			const linkNode = link.$createLinkNode(url);
+			linkNode.append(lexical.$createTextNode(text));
+			lexical.$insertNodes([linkNode]);
+		}, { discrete: true });
 		return this;
 	}
 
 	unlink() {
-		this.execCommand('unlink');
+		if(this.mode !== 'visual' || !this.lexicalEditor) return this;
+		const { lexical, link } = this.lx;
+		this.lexicalEditor.update(() => {
+			const sel = lexical.$getSelection();
+			if(!lexical.$isRangeSelection(sel)) return;
+			sel.getNodes().forEach(node => {
+				const parent = node.getParent();
+				if(parent && link.$isLinkNode?.(parent)){
+					parent.getChildren().forEach(child => parent.insertBefore(child));
+					parent.remove();
+				}
+			});
+		}, { discrete: true });
 		return this;
 	}
 
 	insertImage(url) {
-		this.execCommand('insertImage', url);
-		return this;
+		return this.insertHTML(`<img src="${encodeURI(url)}" />`);
 	}
 
 	/*
 		Public Methods - History
 	*/
 	undo() {
-		this.execCommand('undo');
+		this.lexicalCmd('UNDO_COMMAND', undefined);
 		return this;
 	}
 
 	redo() {
-		this.execCommand('redo');
+		this.lexicalCmd('REDO_COMMAND', undefined);
 		return this;
 	}
 
 	/*
 		Utility Methods
 	*/
-	execCommand(command, value = null) {
-		if(this.mode !== 'visual') return;
-		
-		this.editorEl.focus();
-		document.execCommand(command, false, value);
-		this.value = this.editorEl.innerHTML;
-	}
-
-	captureSelection(){
-		if(this.mode !== 'visual') return null;
-		
-		const selection = window.getSelection();
-		
-		if(!selection.rangeCount){
-			return null;
-		}
-		
-		const range = selection.getRangeAt(0);
-		const isInEditor = this.editorEl.contains(range.commonAncestorContainer);
-		
-		if(!isInEditor){
-			return null;
-		}
-		
-		const selectedText = range.toString();
-		
-		if(range.collapsed){
-			return null;
-		}
-		
-		return {
-			startContainer: range.startContainer,
-			startOffset: range.startOffset,
-			endContainer: range.endContainer,
-			endOffset: range.endOffset,
-			text: selectedText,
-			collapsed: range.collapsed
-		};
-	}
-
-	restoreSavedSelection(){
-		if(!this.savedSelection) return false;
-		
-		const selection = this.shadowRoot.getSelection() || window.getSelection();
-		const range = document.createRange();
-		
-		try {
-			range.setStart(this.savedSelection.startContainer, this.savedSelection.startOffset);
-			range.setEnd(this.savedSelection.endContainer, this.savedSelection.endOffset);
-			selection.removeAllRanges();
-			selection.addRange(range);
-			return true;
-		} catch(e) {
-			this.savedSelection = null;
-			return false;
-		}
+	lexicalCmd(commandName, payload) {
+		if(this.mode !== 'visual' || !this.lexicalEditor) return;
+		const cmd = this.lx.lexical?.[commandName];
+		if(cmd) this.lexicalEditor.dispatchCommand(cmd, payload);
 	}
 
-	clearSavedSelection(){
-		this.savedSelection = null;
-	}
-
-	getValueWithSelectionMarkers(){
-		if(this.mode !== 'visual') return { html: this.value, hasCursor: false, hasSelection: false };
-		
-		const CURSOR_MARKER = '\uFFF0';
-		const SELECTION_START = '\uFFF1';
-		const SELECTION_END = '\uFFF2';
-		
-		const selection = this.shadowRoot.getSelection() || window.getSelection();
-		
-		// If no current selection, try to restore saved selection
-		if(!selection.rangeCount){
-			if(!this.restoreSavedSelection()){
-				return { html: this.editorEl.innerHTML, hasCursor: false, hasSelection: false };
-			}
-		}
-		
-		if(!selection.rangeCount){
-			return { html: this.editorEl.innerHTML, hasCursor: false, hasSelection: false };
-		}
-		
-		const range = selection.getRangeAt(0);
-		const isInEditor = this.editorEl.contains(range.commonAncestorContainer);
-		
-		if(!isInEditor){
-			return { html: this.editorEl.innerHTML, hasCursor: false, hasSelection: false };
-		}
-		
-		const selectedText = range.toString();
-		
-		if(range.collapsed){
-			const cursorMarker = document.createTextNode(CURSOR_MARKER);
-			const tempRange = document.createRange();
-			tempRange.setStart(range.startContainer, range.startOffset);
-			tempRange.insertNode(cursorMarker);
-			
-			const htmlWithMarker = this.editorEl.innerHTML;
-			cursorMarker.remove();
-			
-			return {
-				html: htmlWithMarker,
-				hasCursor: true,
-				hasSelection: false,
-				cursorMarker: CURSOR_MARKER,
-				selectedText: ''
-			};
-		} else {
-			const startMarker = document.createTextNode(SELECTION_START);
-			const endMarker = document.createTextNode(SELECTION_END);
-			
-			const tempRange = document.createRange();
-			tempRange.setStart(range.endContainer, range.endOffset);
-			tempRange.insertNode(endMarker);
-			
-			tempRange.setStart(range.startContainer, range.startOffset);
-			tempRange.insertNode(startMarker);
-			
-			const htmlWithMarkers = this.editorEl.innerHTML;
-			
-			startMarker.remove();
-			endMarker.remove();
-			
-			return {
-				html: htmlWithMarkers,
-				hasCursor: false,
-				hasSelection: true,
-				selectionStart: SELECTION_START,
-				selectionEnd: SELECTION_END,
-				selectedText: selectedText
-			};
-		}
-	}
-
-	setValueFromSelectionMarkers(html, markers){
-		if(this.mode !== 'visual') return this;
-		
-		const CURSOR_MARKER = markers.cursorMarker || '\uFFF0';
-		const SELECTION_START = markers.selectionStart || '\uFFF1';
-		const SELECTION_END = markers.selectionEnd || '\uFFF2';
-		
-		this.editorEl.innerHTML = html;
-		
-		if(markers.hasCursor){
-			const walker = document.createTreeWalker(
-				this.editorEl,
-				NodeFilter.SHOW_TEXT,
-				null
-			);
-			
-			while(walker.nextNode()){
-				const node = walker.currentNode;
-				const index = node.textContent.indexOf(CURSOR_MARKER);
-				
-				if(index !== -1){
-					node.textContent = node.textContent.replace(CURSOR_MARKER, '');
-					
-					const range = document.createRange();
-					range.setStart(node, index);
-					range.setEnd(node, index);
-					
-					const selection = this.shadowRoot.getSelection() || window.getSelection();
-					selection.removeAllRanges();
-					selection.addRange(range);
-					
-					break;
-				}
-			}
-		} else if(markers.hasSelection){
-			const walker = document.createTreeWalker(
-				this.editorEl,
-				NodeFilter.SHOW_TEXT,
-				null
-			);
-			
-			let startNode = null;
-			let startOffset = 0;
-			let endNode = null;
-			let endOffset = 0;
-			
-			while(walker.nextNode()){
-				const node = walker.currentNode;
-				
-				const startIndex = node.textContent.indexOf(SELECTION_START);
-				if(startIndex !== -1){
-					startNode = node;
-					startOffset = startIndex;
-					node.textContent = node.textContent.replace(SELECTION_START, '');
-				}
-				
-				const endIndex = node.textContent.indexOf(SELECTION_END);
-				if(endIndex !== -1){
-					endNode = node;
-					endOffset = endIndex;
-					node.textContent = node.textContent.replace(SELECTION_END, '');
-				}
-				
-				if(startNode && endNode) break;
-			}
-			
-			if(startNode && endNode){
-				const range = document.createRange();
-				range.setStart(startNode, startOffset);
-				range.setEnd(endNode, endOffset);
-				
-				const selection = this.shadowRoot.getSelection() || window.getSelection();
-				selection.removeAllRanges();
-				selection.addRange(range);
-			}
-		}
-		
-		this.editorEl.focus();
-		
-		return this;
+	lexicalFormat(format) {
+		if(this.mode !== 'visual' || !this.lexicalEditor) return;
+		const { lexical } = this.lx;
+		this.lexicalEditor.update(() => {
+			const sel = lexical.$getSelection();
+			if(lexical.$isRangeSelection(sel)) sel.formatText(format);
+		}, { discrete: true });
 	}
 
-	syncContent() {
-		if(!this.editorEl || !this.textareaEl || this.skipSync) return;
-
-		if(this.mode === 'visual'){
-			if(this.editorEl.innerHTML !== this.value){
-				this.editorEl.innerHTML = this.value;
-			}
-		} else {
-			const formattedValue = formatCode(this.value);
-			if(this.textareaEl.value !== formattedValue){
-				this.textareaEl.value = formattedValue;
-			}
-		}
+	lexicalFormatElement(alignment) {
+		if(this.mode !== 'visual' || !this.lexicalEditor) return;
+		this.lexicalEditor.dispatchCommand(this.lx.lexical.FORMAT_ELEMENT_COMMAND, alignment);
 	}
 
 	/*
@@ -1455,7 +925,6 @@ export default class HtmlEditor extends ShadowComponent {
 			gap: 0;
 			height: 300px;
 		}
-
 		.toolbar-top,
 		.toolbar-bottom {
 			display: flex;
@@ -1465,18 +934,20 @@ export default class HtmlEditor extends ShadowComponent {
 			background: var(--bg-secondary);
 			min-height: 40px;
 		}
-
 		.editor-container {
 			position: relative;
 			flex: 1;
 			min-height: 0;
 			overflow: hidden;
 		}
-
-		.editor,
-		textarea {
+		.lexical-editor,
+		.monaco-editor-container {
 			width: 100%;
 			height: 100%;
+			box-sizing: border-box;
+			overflow: auto;
+		}
+		.lexical-editor {
 			padding: 1rem;
 			border: 1px solid var(--border-color);
 			background: var(--bg-primary);
@@ -1484,31 +955,59 @@ export default class HtmlEditor extends ShadowComponent {
 			font-family: inherit;
 			font-size: inherit;
 			line-height: 1.5;
-			overflow: auto;
-			box-sizing: border-box;
-		}
-
-		.editor {
 			outline: none;
 		}
-
-		.editor:focus {
+		.lexical-editor:focus {
 			border-color: var(--primary-color);
 		}
-
-		textarea {
-			resize: none;
+		.lexical-editor p { margin: 0 0 0.5em 0; }
+		.lexical-editor h1,
+		.lexical-editor h2,
+		.lexical-editor h3,
+		.lexical-editor h4,
+		.lexical-editor h5,
+		.lexical-editor h6 { margin: 0.5em 0; }
+		.lexical-editor ul,
+		.lexical-editor ol { margin: 0.5em 0; padding-left: 1.5em; }
+		.lexical-editor blockquote {
+			margin: 0.5em 0;
+			padding-left: 1em;
+			border-left: 3px solid var(--border-color, #ccc);
+			color: var(--text-secondary, #666);
+		}
+		.lexical-editor a { color: var(--primary-color, #007acc); }
+		.lexical-editor code {
+			background: var(--bg-secondary, #f5f5f5);
+			padding: 0.125em 0.25em;
+			border-radius: 3px;
 			font-family: monospace;
 		}
-
-		textarea:focus {
-			outline: none;
-			border-color: var(--primary-color);
+		.lexical-editor pre {
+			background: var(--bg-secondary, #f5f5f5);
+			padding: 1em;
+			border-radius: 4px;
+			font-family: monospace;
+			overflow-x: auto;
+			white-space: pre-wrap;
 		}
-
-		.editor[hidden],
-		textarea[hidden] {
-			display: none;
+		.lexical-editor table {
+			border-collapse: collapse;
+			width: 100%;
+		}
+		.lexical-editor th,
+		.lexical-editor td {
+			border: 1px solid var(--border-color, #ccc);
+			padding: 0.5rem;
+		}
+		.lexical-editor th {
+			background-color: var(--bg-secondary, #f5f5f5);
+			text-align: left;
+		}
+		.monaco-editor-container {
+			border: 1px solid var(--border-color);
+		}
+		[hidden] {
+			display: none !important;
 		}
 	`;
 
@@ -1519,23 +1018,17 @@ export default class HtmlEditor extends ShadowComponent {
 					<slot name="toolbar-top"></slot>
 				</div>
 			` : ''}
-			
 			<div class="editor-container">
-				<div 
-					class="editor" 
+				<div
+					class="lexical-editor"
 					contenteditable="true"
 					?hidden=${this.mode !== 'visual'}
-					@input=${this.handleEditorInput}
-					@paste=${this.handleEditorPaste}
-					@blur=${this.handleEditorBlur}
 				></div>
-				
-				<textarea
+				<div
+					class="monaco-editor-container"
 					?hidden=${this.mode !== 'code'}
-					@input=${this.handleTextareaInput}
-				></textarea>
+				></div>
 			</div>
-			
 			${this.hasBottomToolbar ? html`
 				<div class="toolbar-bottom bt">
 					<slot name="toolbar-bottom"></slot>