Version 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prism-code-editor",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "description": "Lightweight, extensible code editor for the web using Prism",
   "main": "./dist/index.js",

package/src/core.ts

@@ -78,9 +78,7 @@ const createEditor = (
 
 		scrollContainer.style.tabSize = <any>currentOptions.tabSize || 2
 		if (isNewGrammar || value != textarea.value) {
-			// Safari focuses the textarea if you change its selection or value programmatically
-			if (isWebKit && !focused())
-				addTextareaListener("focus", e => (<HTMLElement>e.relatedTarget)?.focus(), { once: true })
+			focusRelatedTarget()
 			textarea.value = value
 			textarea.selectionEnd = 0
 			update()
@@ -181,6 +179,12 @@ const createEditor = (
 
 	const inputCommandMap: Record<string, InputCommandCallback | null> = {}
 
+	// Safari focuses the textarea if you change its selection or value programmatically
+	const focusRelatedTarget = () =>
+		isWebKit &&
+		!focused() &&
+		addTextareaListener("focus", e => e.relatedTarget ? (<HTMLElement>e.relatedTarget).focus() : textarea.blur(), { once: true })
+
 	const dispatchEvent = <T extends keyof EditorEventMap>(
 		name: T,
 		...args: Parameters<EditorEventMap[T]>
@@ -221,6 +225,7 @@ const createEditor = (
 		update,
 		getSelection: getInputSelection,
 		setSelection(start, end, direction) {
+			focusRelatedTarget()
 			textarea.setSelectionRange(start, end ?? start, direction)
 			dispatchSelection()
 		},
@@ -267,10 +272,10 @@ const createEditor = (
 	// For browsers that support selectionchange on textareas
 	addTextareaListener("selectionchange", e => {
 		dispatchSelection()
-		e.stopPropagation()
+		preventDefault(e)
 	})
 	// Hack to fix an obscure fontsize bug on iOS Safari when overflowing horizontally
-	if (isWebKit && /Mobile/.test(navigator.userAgent)) {
+	if (isWebKit && /Mobile/.test(userAgent)) {
 		scrollContainer.contentEditable = <any>true
 		wrapper.contentEditable = <any>false
 		scrollContainer.tabIndex = -1
@@ -288,9 +293,10 @@ const createTemplate = (innerHTML = "", style = "", className = ""): HTMLDivElem
 const getElement = (el?: ParentNode | string | null) =>
 	typeof el == "string" ? document.querySelector(el) : el
 
+const userAgent = navigator.userAgent
 const isMac = /Mac|iPhone|iPod|iPad/i.test(navigator.platform)
-const isChrome = /Chrome\//.test(navigator.userAgent)
-const isWebKit = !isChrome && /AppleWebKit\//.test(navigator.userAgent)
+const isChrome = /Chrome\//.test(userAgent)
+const isWebKit = !isChrome && /AppleWebKit\//.test(userAgent)
 
 /**
  * Counts number of lines in the string up to the position.
@@ -307,15 +313,18 @@ const numLines = (str: string, position = Infinity) => {
 const languages: Record<string, Language> = {}
 
 const editorTemplate = createTemplate(
-	'<div class="prism-editor-wrapper"><div class="editor-overlays"><textarea spellcheck="false"autocapitalize="off" autocomplete="off"></textarea></div></div>',
+	'<div class="prism-editor-wrapper"><div class="editor-overlays"><textarea spellcheck="false" autocapitalize="off" autocomplete="off"></textarea></div></div>',
 )
 /**
  * Sets whether editors should ignore tab or use it for indentation.
  * Users can always toggle this using Ctrl+M / Ctrl+Shift+M (Mac).
  */
 const setIgnoreTab = (newState: boolean) => (ignoreTab = newState)
 
-const preventDefault = (e: Event) => e.preventDefault()
+const preventDefault = (e: Event) => {
+	e.preventDefault()
+	e.stopImmediatePropagation()
+}
 
 const setSelection = (s?: InputSelection) => (selection = s)
 

package/src/extensions/copyButton/index.ts

@@ -3,7 +3,7 @@ import { Extension, PrismEditor } from "../../types"
 
 const template = createTemplate(
 		'<button style="display:none;" class="editor-copy" aria-label="Copy"><svg width="1.2em" viewbox="0 0 48 48" overflow="visible" stroke-width="4" stroke-linecap="round" fill="none" stroke="currentColor"><rect x="16" y="16" width="30" height="30" rx="3"/><path d="M32 9V5a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v24a3 3 0 0 0 3 3h4"/></svg></button>',
-		"display:flex;align-items:flex-start;justify-content:flex-end;grid-column:2/4;",
+		"display:flex;align-items:flex-start;justify-content:flex-end;",
 	),
 	clipboard = navigator.clipboard
 

package/src/extensions/search/search.css

@@ -27,9 +27,7 @@
 	border: none;
 	color: inherit;
 	font: inherit;
-	text-align: center;
 	cursor: pointer;
-	padding: 0;
 }
 
 [readonly] ~ .prism-search-container > div {
@@ -158,10 +156,11 @@
 .search-error {
 	display: none;
 	position: absolute;
-	top: calc(100% - 1px);
+	top: 100%;
 	box-shadow: inherit;
 	width: 100%;
 	white-space: normal;
+	word-break: break-word;
 	left: 0;
 	background: var(--widget__bg-error);
 	padding: 0.5em;
@@ -176,8 +175,7 @@ button.search-close {
 	display: grid;
 	width: 1.3em;
 	height: 1.3em;
-	align-items: center;
-	justify-items: center;
+	place-items: center;
 	margin-left: auto;
 	border-radius: 0.3em;
 }
@@ -218,8 +216,7 @@ button.search-close {
 
 button.expand-search {
 	display: grid;
-	justify-items: center;
-	align-items: center;
+	place-items: center;
 	border-radius: 0.25em;
 	margin: -0.15em;
 }
@@ -275,8 +272,7 @@ button.expand-search {
 
 button.find-in-selection {
 	display: grid;
-	align-items: center;
-	justify-items: center;
+	place-items: center;
 	align-self: stretch;
 }
 

package/src/extensions/search/selection.ts

@@ -6,7 +6,8 @@ import { createSearchAPI } from "./search"
  * @param caseSensitive Whether or not matches must have the same case. Defaults to false.
  * @param minLength Minimum length needed to perform a search. Defaults to 1.
  * @param maxLength Maximim length at which to perform a search. Defaults to 200.
- * Lower values of `minLength` and higher values of `maxLength` may reduce performance.
+ * 
+ * Lower values of `minLength` and higher values of `maxLength` can impact performance.
  */
 export const highlightSelectionMatches = (
 	caseSensitive?: boolean,
@@ -24,7 +25,7 @@ export const highlightSelectionMatches = (
 				container.style.zIndex = "-1"
 				container.className = "selection-matches"
 				editor.addListener("selectionChange", ([start, end], value) => {
-					value = value.slice(start, end)
+					value = editor.focused ? value.slice(start, end) : ''
 					let offset = value.search(/\S/),
 						l = (value = value.trim()).length
 

package/src/extensions/search/widget.ts

@@ -116,6 +116,8 @@ export const searchWidget = (): SearchWidget => {
 
 			const input = () => {
 				if (searchSelection) {
+					// This preserves the selection well for normal typing,
+					// but for indenting, toggling comments, etc. it doesn't
 					const diff = prevLength - (prevLength = editor.value.length),
 						[, end] = currentSelection,
 						[searchStart, searchEnd] = searchSelection
@@ -146,7 +148,7 @@ export const searchWidget = (): SearchWidget => {
 				if (isOpen != (isOpen = false)) {
 					replaceAPI.stopSearch()
 					editor.removeListener("update", input)
-					textarea.removeEventListener("beforeinput", input)
+					textarea.removeEventListener("beforeinput", beforeinput)
 					container.style.display = "none"
 					updateMargin()
 					observer?.disconnect()
@@ -234,7 +236,7 @@ export const searchWidget = (): SearchWidget => {
 
 			matchCaseEl.title = `Preserve Case${shortcut}P)`
 			wholeWordEl.title = `Match Whole Word${shortcut}W)`
-			useRegExpEl.title = `RegExmp Search${shortcut}R)`
+			useRegExpEl.title = `RegExp Search${shortcut}R)`
 			inSelectionEl.title = `Find in Selection${shortcut}L)`
 			replaceAllEl.title = `(${isMac ? "Cmd" : "Ctrl+Alt"}+Enter)`
 

package/src/setups/index.ts

@@ -50,9 +50,9 @@ const minimalEditor = (
 		if (!editor.removed) {
 			addStyles(shadow, style.default)
 			addStyles(shadow, theme || "", "theme")
-			editor.setOptions(options)
 			shadow.append(editor.scrollContainer)
-			readyCallback?.()
+			editor.setOptions(options)
+			readyCallback && readyCallback()
 		}
 	})
 

package/src/types.ts

@@ -47,7 +47,7 @@ export type Language = {
 export type PrismType = typeof Prism
 /**
  * Function called when a certain key is pressed.
- * If true is returned, `e.preventDefault()` is called automatically.
+ * If true is returned, `e.preventDefault()` and `e.stopImmediatePropagation()` is called automatically.
  */
 export type KeyCommandCallback = (
 	e: KeyboardEvent,
@@ -56,7 +56,7 @@ export type KeyCommandCallback = (
 ) => void | boolean
 /**
  * Function called when a certain input is typed.
- * If true is returned, `e.preventDefault()` is called automatically.
+ * If true is returned, `e.preventDefault()` and `e.stopImmediatePropagation()` is called automatically.
  */
 export type InputCommandCallback = (
 	e: InputEvent,
@@ -130,7 +130,6 @@ export interface PrismEditor extends EventHandler<EditorEventMap> {
 	getSelection(): InputSelection
 	/**
 	 * Sets the selection for the `textarea` and synchronously runs the selectionChange listeners.
-	 * Focuses the textarea in Safari.
 	 * @param start New selectionStart
 	 * @param end New selectionEnd
 	 * @param direction New direction