solarite 0.2.1 → 0.2.3

package/docs/js/ui/CodeEditor.js

@@ -1,978 +0,0 @@
-import {
-	autocompletion,
-	bracketMatching,
-	closeBrackets,
-	closeBracketsKeymap,
-	closeSearchPanel,
-	Compartment,
-	completionKeymap,
-	crosshairCursor,
-	css,
-	cssParser,
-	defaultHighlightStyle,
-	defaultKeymap,
-	drawSelection,
-	EditorState,
-	EditorView,
-	foldKeymap,
-	highlightActiveLine,
-	highlightActiveLineGutter,
-	highlightSelectionMatches,
-	highlightSpecialChars,
-	history,
-	historyKeymap,
-	html,
-	htmlParser,
-	indentOnInput,
-	indentUnit,
-	indentWithTab,
-	javascript,
-	json,
-	jsParser,
-	keymap,
-	lineNumbers,
-	LRLanguage,
-	markdown,
-	openSearchPanel,
-	parseMixed,
-	php,
-	phpParser,
-	python,
-	rectangularSelection,
-	redo,
-	redoDepth,
-	searchKeymap,
-	searchPanelOpen,
-	sql,
-	StateEffect,
-	StateField,
-	syntaxHighlighting,
-	undo,
-	undoDepth
-} from '../codemirror/codemirror6.js';
-import themeSolarIce from "../codemirror/themeSolarIce.js";
-import {r, Solarite, getArg, ArgType} from "../../../src/solarite/Solarite.js";
-import Icons from "../util/Icons.js";
-import Util from "../util/Util.js";
-
-
-
-/**
- * Wraps CodeMirror into a web component and provides some useful functions and default settings.
- * TODO: Emmet support for html:  https://discuss.codemirror.net/t/is-it-able-to-use-tab-to-generate-code-snippets-for-html-tag/5502
- *
- * @example
- * new CodeEditor('sql', 'SELECT * FROM users', {}, 'undo redo | run'); */
-export default class CodeEditor extends Solarite {
-	
-	/** @type {EditorView} */
-	view;
-	
-	extensions = [];
-
-	/**
-	 * @type {Callbacks|function}
-	 *
-	 * @example
-	 * codeEditor.onChange.push(update => {
-	 *     console.log(update.state.doc.toString();
-	 * });
-	 * */
-	onChange = Util.callback();
-	
-	/**
-	 * Called every time CodeMirror selection or content changes.
-	 * @type {Callbacks|function} */
-	onInternalChange = Util.callback();
-	
-	/** @type {Callbacks|function(range:{start: {line:int, column:int}, end: {line:int, column:int}})} */
-	onSelectionChange = Util.callback();
-	
-	/** @type {Callbacks|function} */
-	onOptionChange = Util.callback();
-
-	allowChanges = true;
-	
-	/**
-	 * Serialized selection range.  Line numbers start at 0.
-	 * @type {string} */
-	lastSelection = '0-0';
-
-	/** @type {HTMLElement} */
-	editor;
-
-	/** @type {?CodeEditorToolbar} */
-	toolbar;
-	
-	/** @type {string} */
-	language;
-	
-	/**
-	 * Compartments wrap extensions and allow changing thier settings after init. */
-	compartments = {
-		lineWrapping: new Compartment(),
-		language: new Compartment(),
-		tabSize: new Compartment(),
-		theme: new Compartment()
-	};
-	
-	wordWrap = false;
-
-	/**
-	 * Example languageConfig for SQL:
-	 * https://github.com/codemirror/lang-sql#----interface----sqlconfig
-	 * {
-	 *      upperCaseKeywords: true,
-	 * 	    schema: { // Define tables and their columns for auto-complete.
-	 * 	    	users: ['email', 'passwordHash'],
-	 * 			stats: ['id', 'created']
-	 * 		}
-	 *  }
-	 *
-	 * @param value {string}
-	 * @param language {?string} Can be the name of the language or one of the file extensions.
-	 *     Supported languages: php, php-plain, javascript, html, markdown, sql, css
-	 * @param languageconfig {?Object} Options for CodeMirror.
-	 * @param toolbar {string|Object<html:Template, update:function>[]} Names of buttons from CodeEditiorToolbar.buttonTemplates or an array of HTMLElements to use as buttons.
-	 * @param options {object}
-	 * @param options.wordWrap {boolean}
-	 * @param options.tabSize {int}
-	 * @param options.fontSize {int} */
-	constructor({value='', language=null, languageconfig=null, toolbar='', options={}}={}) {
-		super();
-		
-		value = getArg(this, 'value', value, ArgType.String);
-		this.language = (language||'php').toLowerCase();
-		this.languageConfig = languageconfig || {};
-		this.wordWrap = options.wordWrap || false;
-		this.tabSize = options.tabSize || 4;
-		
-		
-
-		// https://github.com/codemirror/lang-php
-		if (this.language === 'php-plain')
-			this.languageConfig.plain = true;
-
-		// TODO: Use this to specify markdown code block languages:
-		// And add keybindings for ctrl+1 headers, etc.
-		// https://github.com/codemirror/lang-markdown
-		
-		this.render();
-		
-		let state = EditorState.create({
-			doc: value,
-			extensions: this.getExtensions(options.wordWrap)
-		})
-		this.view = new EditorView({
-			state,
-			parent: this.editor
-		});
-		
-		// Create the toolbar
-		if (toolbar) {
-			this.toolbar = new CodeEditorToolbar({ed: this, buttons: toolbar});
-			this.insertBefore(this.toolbar, this.editor);
-		}
-		
-		
-		// Watch for dark attribute change on <html> element.
-		// So we can update our own theme in response.
-		this.onConnect.push(() => {
-			if (this.ownerDocument.documentElement) {
-				const observer = new MutationObserver((mutations) => {
-					mutations.forEach((mutation) => {
-						if (mutation.type === 'attributes' && mutation.attributeName === 'dark') {
-							let state = mutation.target.hasAttribute('dark');
-							this.setTheme(themeSolarIce(this.language, state));
-						}
-					});
-				});
-				
-				observer.observe(this.ownerDocument.documentElement, {attributes: true});
-			}
-		});
-		
-		this.onInternalChange.push((update, codeEditor) => {
-			let sel = update.state.selection.main;
-			let lineObj = update.state.doc.lineAt(sel.head);
-			
-			let newSelection = lineObj.number + '-' + (sel.head - lineObj.from);
-			
-			if (newSelection !== codeEditor.lastSelection) {
-				if (codeEditor.allowChanges && codeEditor.onSelectionChange.length) {
-					let range = {
-						start: {
-							line: lineObj.number - 1,
-							column: sel.head - lineObj.from
-						},
-						end: {}
-					};
-					
-					lineObj = sel.head === sel.anchor ? lineObj : update.state.doc.lineAt(sel.anchor);
-					range.end.line = lineObj.number - 1;
-					range.end.column = sel.anchor - lineObj.from
-					
-					codeEditor.onSelectionChange(range, update);
-				}
-				this.lastSelection = newSelection;
-				if (this.toolbar)
-					this.toolbar.update(update);
-			}
-			// console.log(startLine, startColumn, endLine, endColumn, update)
-			if (this.allowChanges && update.changedRanges.length && this.onChange.length) {
-				let codeChange = {
-					beforeStart: update.changedRanges[0].fromA,
-					beforeEnd: update.changedRanges[0].toA,
-					afterStart: update.changedRanges[0].fromB,
-					afterEnd: update.changedRanges[0].toB,
-					text: update.state.doc.sliceString(update.changedRanges[0].fromB, update.changedRanges[0].toB)
-				};
-				this.onChange(codeChange, update);
-			}
-		});
-
-
-		Object.defineProperty(this, 'value', {
-			get() {
-				return this.getValue();
-			},
-			set(val) {
-				this.setValue(val, false);
-			}
-		});
-	}
-	
-	getExtensions(wordWrap=false, isDark=undefined) {
-		let doc = this.ownerDocument || window.top.document;
-		if (isDark === undefined)
-			isDark = doc.documentElement.hasAttribute('dark');
-
-		let languageExtensions = this.getLanguageExtension(this.language, this.languageConfig)
-		return [
-			//basicSetup,
-			
-			lineNumbers(),
-			highlightActiveLineGutter(),
-			highlightSpecialChars(),
-			history(),
-			//foldGutter(),
-			drawSelection(),
-			indentUnit.of("\t"),
-			EditorState.allowMultipleSelections.of(true),
-			indentOnInput(),
-			bracketMatching(),
-			closeBrackets(),
-			autocompletion(),
-			rectangularSelection(),
-			crosshairCursor(),
-			highlightActiveLine(),
-			highlightSelectionMatches(),
-			keymap.of([
-				indentWithTab,
-				...closeBracketsKeymap,
-				{
-					key: 'Tab', // TODO: What does this do?
-					//run: target => acceptCompletion(target),
-				},
-				...defaultKeymap,
-				...historyKeymap,
-				...foldKeymap,
-				...completionKeymap,
-				...searchKeymap
-			]),
-			
-			Extensions.changeDetection(this),
-			Extensions.asyncField,
-
-			
-			syntaxHighlighting(defaultHighlightStyle, {fallback: true}), // fallback: true lets us use our own theme.
-
-			// Compartments let options be changed after init.
-			this.compartments.theme.of(themeSolarIce(this.language, isDark)),
-			this.compartments.tabSize.of(EditorState.tabSize.of(this.tabSize)),
-			this.compartments.lineWrapping.of(wordWrap ? EditorView.lineWrapping : []),
-			this.compartments.language.of(languageExtensions)
-		];
-	}
-
-	focus() {
-		this.view.focus();
-	}
-	
-	/**
-	 * Set the colors, fonts, and sizes.
-	 * @param theme
-	 * @returns {Promise<void>} */
-	async setTheme(theme) {
-		this.view.dispatch({
-			effects: this.compartments.theme.reconfigure(theme)
-		})
-	}
-
-	getValue() {
-		return this.view.viewState.state.doc.toString()
-	}
-
-	undo() {
-		undo(this.view);
-	}
-
-	redo() {
-		redo(this.view);
-	}
-	
-	
-	toggleWordWrap(status=undefined) {
-		if (status===undefined)
-			status = !this.isWordWrapped();
-		
-		this.view.dispatch({ // Update codemirror.
-			effects: this.compartments.lineWrapping.reconfigure(status ? EditorView.lineWrapping : [])
-		});
-		this.wordWrap = status;
-		
-		if (this.toolbar)
-			this.toolbar.update();
-		
-		this.onOptionChange();
-	}
-	
-	isWordWrapped() {
-		return this.wordWrap;
-	}
-
-	toggleSearchPanel(status=undefined) {
-		if (status===undefined)
-			status = !searchPanelOpen(this.view.state);
-
-		if (status) {
-			openSearchPanel(this.view)
-
-			// Make search panel styles a little closer to SiteCrafter styles.
-			for (let btn of this.querySelectorAll('.cm-search .cm-button'))
-				btn.classList.replace('cm-button', 'button')
-		}
-		else
-			closeSearchPanel(this.view)
-		if (this.toolbar)
-			this.toolbar.update();
-	}
-
-	isSearchPanelOpen() {
-		return this.view && searchPanelOpen(this.view.state);
-	}
-
-	/**
-	 * Used internally.  Use setValue() to change the language. */
-	getLanguageExtension(language, languageConfig) {
-		this.language = language;
-
-		// TODO: It may be possible to provide additional style overrides, e.g. for css tag selectors:
-		// https://discuss.codemirror.net/t/highlighting-markdown-mark-only/3964/3
-
-		let langExt;
-		if (['css', 'scss', 'less'].includes(language))
-			langExt = css;
-		else if (['htm', 'html'].includes(language))
-			langExt = ParseUtil.htmlWithJavaScript;
-		else if (['js', 'ts', 'jsx', 'tsx', 'jscript', 'javascript'].includes(language))
-			langExt = ParseUtil.javascriptWithHtml;  // TODO: Support it inside html and php
-		else if (language === 'json')
-			langExt = json;
-			// else if (language === 'ts') // TODO: jsx, tsx, python
-		// 	langExt = typescript();
-		else if (['md', 'markdown'].includes(language))
-			langExt = markdown;
-		else if (language === 'php')
-			langExt = ParseUtil.phpWithHtmlWithJavaScript;
-		else if (language === 'php-plain')
-			langExt = php; // Use this to default into php mode without an opening <? tag.
-		else if (language === 'sql')
-			langExt = sql;
-		else if (['py', 'python'].includes(language))
-			langExt = python;
-		if (!langExt)
-			return []; // plain text.
-
-		return [
-			langExt(languageConfig)
-		];
-	}
-	
-	/**
-	 *
-	 * @param range {CodeRange}*/
-	async selectRange(range) {
-		range = range.clone();
-		if (range.start.line === null) {
-			await asyncDispatch(this.view, {
-				selection: { // Deselect all.
-					head: 0,
-					anchor: 0
-				}
-			});
-			return;
-		}
-		
-		
-		let doc = this.view.state.doc;
-		
-		// Keep within bounds.
-		if (doc.lines < range.start.line)
-			range.start.line = doc.lines-1;
-		if (doc.lines < range.end.line)
-			range.end.line = doc.lines-1;
-		if (range.end.line === null)
-			range.end.line = range.start.line;
-		
-		// Sometimes these can be out of bounds if the line is pair of comments for a php print.
-		// In that case we just select the whole line for now.
-		if (doc.line(range.start.line+1).length < range.start.column)
-			range.start.column = 0; //doc.text[range.start.line].length
-		if (doc.line(range.end.line+1).length < range.end.column)
-			range.end.column = doc.line(range.end.line+1).length;
-
-		const startLineObj = doc.line(range.start.line+1);
-		const endLineObj = doc.line(range.end.line+1);
-		
-		this.allowChanges = false; // Don't call onSelectionChange()
-
-		await asyncDispatch(this.view, {
-			// Set selection to that entire line.
-			selection: {
-				head: startLineObj.from + range.start.column,
-				anchor: range.end.column === null
-					? endLineObj.to // If no end column, select until end of line.
-					: endLineObj.from + range.end.column
-			},
-			// Ensure the selection is shown in viewport
-			scrollIntoView: true
-		});
-
-		this.allowChanges = true;
-	}
-	
-	setLanguage(language=null, languageConfig=null) {
-		languageConfig = languageConfig || {};
-		this.view.dispatch({ // Update codemirror.
-			effects: this.compartments.language.reconfigure(this.getLanguageExtension(language, languageConfig))
-		});
-	}
-	
-	setTabSize(tabSize) {
-		this.tabSize = tabSize;
-		this.view.dispatch({ // Update codemirror.
-			effects: this.compartments.tabSize.reconfigure(EditorState.tabSize.of(tabSize))
-		});
-	}
-
-	/**
-	 * TODO: Can't change language if createHistory=false */
-	async setValue(value, createHistory=true) {
-		let scroller = this.querySelector('.cm-editor > .cm-scroller');
-		let scroll = {x: scroller?.scrollLeft||0, y: scroller?.scrollTop||0};
-		
-		// Don't trigger the onChange function
-		this.allowChanges = false;
-
-		// https://codemirror.net/docs/migration/
-		if (createHistory)
-			await asyncDispatch(this.view, { // Also triggers the change event.
-				changes: {from: 0, to: this.view.state.doc.length, insert: value}
-			})
-
-		// https://discuss.codemirror.net/t/codemirror-6-cm-clearhistory-equivalent/2851/2
-		else {
-			this.view.setState(EditorState.create({
-				doc: value,
-				extensions: this.getExtensions(this.wordWrap)
-			}));
-		}
-		
-		this.allowChanges = true;
-
-		// if (!triggerChange)
-		// 	this.allowChanges = true;
-		
-		// Not sure why both of these are necessary, but in my testing they were.
-		if (scroller) {
-			scroller.scrollTop = scroll.y;
-			scroller.scrollLeft = scroll.x;
-			requestAnimationFrame(() => {
-				scroller.scrollTop = scroll.y;
-				scroller.scrollLeft = scroll.x;
-			});
-		}
-	}
-	
-	getUndoDepth() {
-		if (this.view)
-		return undoDepth(this.view.state);
-	}
-	
-	getRedoDepth() {
-		if (this.view)
-		return redoDepth(this.view.state);
-	}
-
-
-	render() {
-		r(this)`
-		<code-editor>
-			<style>
-				:host { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0 }
-				:host [data-id=editor] { height: 100%; width: 100%; min-height: 0 }
-				:host [data-id=editor] .cm-editor { height: 100%; width: 100%; min-height: 0 }
-				:host .cm-scroller { overflow: auto; min-height: 10px; height: 100%; width: 100%; font: 13px Hack, monospace !important  }
-				
-				/* Remove outline added by CodeMirror on focus. */
-				:host [data-id=editor] .cm-editor.cm-focused { outline: none }
-				:host .cm-activeLineGutter { background: transparent} /* Only highlight on focus, set in the theme.js file */
-				
-				/* Search Panel styles */
-				:host .cm-panels.cm-panels-bottom { border-top: var(--border, 1px solid #cbcfd7) }
-				:host .cm-panels { background-color: var(--background, white) !important; color: var(--text, #333) !important }
-				:host .cm-panels label { display: inline-flex; align-items: center; user-select: none }
-				:host .cm-textfield { font-size: inherit }
-			</style>
-			<div data-id="editor" class="col"></div>
-		</code-editor>`
-	}
-}
-CodeEditor.define();
-
-
-
-
-
-// Define a unique effect to listen for
-const asyncEffect = StateEffect.define();
-
-
-
-/**
- * Use this function to allow awaiting a CodeMirror state.dispatch() call.
- * @param view
- * @param options
- * @returns {Promise<unknown>}
- *
- * @example
- * await asyncDispatch(this.view, dispatchArgs);  */
-async function asyncDispatch(view, options) {
-	//view.dispatch(options); // non-async version
-	return new Promise(resolve => {
-		options.effects = asyncEffect.of(resolve);
-		view.dispatch(options);
-	});
-}
-
-
-var Extensions = {
-	
-	// Create a state field that listens for your effect
-	asyncField: StateField.define({
-		create() {
-			return {}; // Initial state (can be anything relevant)
-		},
-		update(value, tr, a) {
-			if (tr.effects.some(e => e.is(asyncEffect))) {
-				// Supposedly called after dispatched event is done, but doesn't seem to be?
-				let resolve = tr.effects[0].value; // arg sent to asncEffect.of() in asyncDispatch()
-				resolve();
-			}
-			return value; // Return the updated state
-		}
-	}),
-	
-	// Call onChange() when the document changes.
-	// https://discuss.codemirror.net/t/how-to-listen-to-changes-for-react-controlled-component/4506/4
-	changeDetection(codeEditor) {
-		return EditorView.updateListener.of(update => {
-			if (update.docChanged || update.selectionSet)
-				codeEditor.onInternalChange(update, codeEditor);
-		})
-	}
-}
-
-var ParseUtil = {
-	
-	/**
-	 * A langauge extension for CodeMirror to support highlighting nested javascript/html inside javascript templates.
-	 * https://codemirror.net/examples/mixed-language/
-	 * @return {LRLanguage} */
-	javascriptWithHtml: () => LRLanguage.define({parser: ParseUtil.jsParser}),
-	htmlWithJavaScript: () => LRLanguage.define({parser: ParseUtil.htmlParser}),
-	phpWithHtmlWithJavaScript: () => LRLanguage.define({parser: ParseUtil.phpParser}),
-	
-	/**
-	 * Used by javascriptWithHtml() */
-	htmlParser: htmlParser.configure({
-		wrap: parseMixed((node, docInput) => {
-			if (node.name == "StyleText")
-				return {parser: cssParser}
-			if (node.name == "ScriptText"/* || node.name == "Interpolation"*/)
-				return {parser: ParseUtil.jsParser}
-			
-			// Use javascript parser for template expressions
-			if (node.type.name === 'Document' && docInput.doc) {
-				let code = docInput.doc.sliceString(node.from, node.to);
-				let overlay = [];
-				//code.replace(/\${/g, (a, startIndex) => {
-
-				let ranges = ParseUtil.findJavaScriptRanges(code, 0);
-
-				if (ranges.length) {
-
-					ranges = ranges.map(item => ({
-						from: node.from + item[0],
-						to: node.from + item[1]
-					}));
-
-					overlay.push(...ranges);
-				}
-				//});
-
-				// Make sure overlays don't overlap.
-				// TODO: Is this still necessary?
-				overlay.sort((a, b) => a.from - b.from);
-				for (let i=0; i<overlay.length-1; i++) {
-					let cur = overlay[i];
-					let next = overlay[i+1];
-					if (cur.to >= next.from)
-						cur.to = next.from;
-				}
-
-				return {
-					parser: ParseUtil.jsParser,
-					overlay
-				}
-			}
-		})
-	}),
-	
-	/**
-	 * Used by javascriptWithHtml() */
-	jsParser: jsParser.configure({
-		wrap: parseMixed((node, docInput) => {
-			if (node.name == "TemplateString") {
-				let code = docInput.doc.sliceString(node.from, node.to);
-				
-				// Only if node text starts and ends with tags, allowing for spaces.
-				if (code.match(/^`\s*</)/* && code.match(/>\s*`$/)*/) {
-					return {
-						parser: ParseUtil.htmlParser,
-					}
-				}
-			}
-			return null;
-		})
-	}),
-	
-	/**
-	 * Replaces CodeMirror's php() function with one that uses the htmlParser above.
-	 * This lets us syntax highlight html in javascript template tags.
-	 * Search codemirror6.js for "PHP language support"
-	 * to find the original function this is copied from. */
-	phpParser: phpParser.configure({
-		wrap: parseMixed(node => {
-			if (!node.type.isTop)
-				return null;
-			return {
-				parser: ParseUtil.htmlParser,
-				overlay: node => node.name == "Text"
-			};
-		}),
-		top: "Template"
-	
-	}),
-
-	/**
-	 * Used by javascriptWithHtml()
-	 * Handles single and multiline comments and all three string types.
-	 * TODO: This needs tests!
-	 * @param str {string}
-	 * @param startIndex {int}
-	 * @returns {int[][]}  */
-	findJavaScriptRanges(str, startIndex) {
-		let depth = 0;
-		let depthStack = [];
-		let inString = null;
-		let stringStack = [];
-		let inComment = null;
-
-		let result = [];
-
-		for (let i = startIndex; i < str.length; i++) {
-
-			let char = str[i];
-			if (inString && char === '\\') { // Skip escaped characters in strings.
-				i++;
-				continue;
-			}
-			let nextChar = i + 1 < str.length ? str[i + 1] : '';
-
-			// String start/end
-			if (!inComment) {
-				if (!inString && (char === '`' || char === '`' || char === '`')) {
-					inString = char;
-					if (char === '`') {
-						if (i > startIndex) {
-							result.push([startIndex, i]);
-						}
-					}
-				}
-				else if (inString === char) {
-					if (inString === '`')
-						startIndex = i + 1;
-					inString = null;
-				}
-			}
-
-
-			if (!inString) {
-				// Comment start/end
-				if (char === '/' && (nextChar === '*' || nextChar === '/')) {
-					inComment = nextChar === '*' ? 'block' : 'line';
-					i++; // Skip the next character as it's part of the comment syntax
-				}
-
-				// End block comment
-				else if (inComment === 'block' && char === '*' && nextChar === '/') {
-					inComment = null;
-					i++; // Skip the '/' character
-				}
-
-				// End line comment
-				else if (inComment === 'line' && char === '\n')
-					inComment = null;
-			}
-
-			// Template literal boundaries
-			if (!inComment) {
-
-				if (inString) {
-					if (char === '$' && nextChar === '{') {
-						startIndex = i;
-						i++; // Skip the '{' character
-						stringStack.push(inString);
-						inString = null;
-						depthStack.push(depth);
-						depth = 0;
-					}
-				}
-
-				else {
-					if (char === '{')
-						depth++;
-
-					else if (char === '}') {
-						if (depth === 0) {
-							inString = stringStack.pop();
-							depth = depthStack.pop();
-							if (i > startIndex)
-								result.push([startIndex, i+1]);
-						}
-						else
-							depth--;
-					}
-				}
-			}
-		}
-
-		return result;
-	},
-
-	/**
-	 * @deprecated
-	 * Used by javascriptWithHtml()
-	 * TODO: This needs tests!
-	 * @param str {string}
-	 * @param startIndex {int}
-	 * @returns {int} -1 if no match. */
-	findMatchingBrace(str, startIndex) {
-		let stack = 0;
-		let inString = null;
-		let inComment = null;
-
-		for (let i = startIndex; i < str.length; i++) {
-			let char = str[i];
-			if (inString && char === '\\') { // Skip escaped characters in strings.
-				i++;
-				continue;
-			}
-			let nextChar = i + 1 < str.length ? str[i + 1] : '';
-
-			// String start/end
-			if (!inComment) {
-				if (!inString && (char === '`' || char === '`' || char === '`'))
-					inString = char;
-				else if (inString === char)
-					inString = null;
-			}
-
-			// Comment start/end
-			if (!inString) {
-				if (char === '/' && (nextChar === '*' || nextChar === '/')) {
-					inComment = nextChar === '*' ? 'block' : 'line';
-					i++; // Skip the next character as it's part of the comment syntax
-				}
-
-				// End block comment
-				else if (inComment === 'block' && char === '*' && nextChar === '/') {
-					inComment = null;
-					i++; // Skip the '/' character
-				}
-
-				// End line comment
-				else if (inComment === 'line' && char === '\n')
-					inComment = null;
-			}
-
-			// Template literal boundaries
-			if (!inString && !inComment) {
-				if (char === '{')
-					stack++;
-
-				else if (char === '$' && nextChar === '{') {
-					stack++;
-					i++; // Skip the '{' character
-				}
-
-				else if (char === '}') {
-					if (stack === 0)
-						return i; // Matching closing brace found
-					stack--;
-				}
-			}
-		}
-
-		return -1;
-	}
-};
-
-
-/**
- * @typedef {Object} ToolbarButton
- * @property {string} html
- * @property {function(el:Node|HTMLElement)=} update */
-
-/**
- *
- */
-export class CodeEditorToolbar extends HTMLElement {
-
-	/** @type {object} Should have functions for everything the buttons array uses. */
-	ed;
-	
-	/**
-	 * Internal representation of buttons.
-	 * @type {{html:string, update:function}[]} */
-	buttons = [];
-
-	buttonTemplates
-
-	/** @type {HTMLElement} */
-	buttonEls;
-
-	/**
-	 * @param ed {CodeEditor}
-	 * @param buttons {(string|ToolbarButton)[]} Names of built-in buttons to use, or objects to define new buttons */
-	constructor({ed, buttons=[]}={}) {
-		super();
-		this.ed = ed;
-		
-		this.buttonTemplates = {
-			'|': {
-				html: r`<span>|</span>`
-			},
-			undo: {
-				html: r`<button onclick="${e => this.ed.undo()}" class="flat" title="Undo">${r(Icons.undo)}</button>`,
-				update: (el, sel) => el.toggleAttribute('disabled', this.ed.getUndoDepth() === 0)
-			},
-			redo: {
-				html: r`<button onclick="${e => this.ed.redo()}" class="flat" title="Redo">${r(Icons.redo)}</button>`,
-				update: (el, sel) => el.toggleAttribute('disabled', this.ed.getRedoDepth() === 0)
-			},
-			wordWrap: {
-				html: r`<button onclick="${e => this.ed.toggleWordWrap()}" class="flat ${ed.isWordWrapped() && 'selected'}" title="Word Wrap">${r(Icons.wordWrap)}</button>`,
-				update: (el, sel) => el.classList.toggle('selected', this.ed.isWordWrapped())
-			},
-			run: {
-				html: r`<button onclick="${e => this.ed.run()}" data-id="btnRun" title="Ctrl+Enter" class="flat">${r(Icons.triangleRight)}Run</button>`
-			},
-			findReplace: {
-				html: r`<button onclick="${e => this.ed.toggleSearchPanel()}" class="flat" title="Find and replace (ctrl+f)">${r(Icons.findReplace)}</button>`,
-				update: (el, sel) => el.classList.toggle('selected', this.ed.isSearchPanelOpen())
-			}
-		};
-		
-		if (typeof buttons === 'string')
-			buttons = buttons.split(/[,\s]+/g);
-
-		for (let button of buttons||[]) {
-			let item = typeof button === 'string'
-				? this.buttonTemplates[button]
-				: button;
-			if (!item)
-				throw new Error('Invalid button ' + button);
-			this.buttons.push(item);
-		}
-
-		this.render();
-		
-		Util.on(this, 'mousedown', '[data-id=buttonEls] .icon', e => {
-			let btn = e.target.closest('.icon');
-			
-			if (btn.hasAttribute('disabled')) {
-				e.stopPropagation();
-				e.stopImmediatePropagation();
-				e.preventDefault();
-				return false;
-			}
-		});
-		
-		this.update();
-	}
-
-	command(e, func) {
-		e.preventDefault(); // Don't lose focus
-		this.ed[func]();
-	}
-
-	/**
-	 * Update toolbar buttons depending on the editor state*/
-	update() {
-		for (let i in this.buttons) {
-			let button = this.buttons[i];
-			if (button.update)
-				button.update(this.buttonEls.children[i], this);
-		}
-	}
-
-	render() {
-		r(this)`
-		<code-editor-toolbar>
-			<style>
-				:host { display: block }
-				:host [data-id='buttonEls'] span { user-select: none }
-				:host .blockSelect [data-id='dropdown'] > div span { opacity: .5 } /* Hotkey text */
-			</style>
-		
-			<div data-id="buttonEls" class="row wrap center-v toolbar">
-				${this.buttons.map(button => button.html || button)}
-			</div>
-		
-			<!--
-			Run
-			Word wrap
-			format
-			find/replace
-			undo/redo
-			show line numbers
-			-->		
-		</code-editor-toolbar>`
-	}
-
-}
-customElements.define('code-editor-toolbar', CodeEditorToolbar);
-