Version 1.0.1

FIameCaster · Sep 5, 2023 · 8f1cf24 · 8f1cf24
1 parent fbda144
commit 8f1cf24
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 40 deletions.
diff --git a/package/package.json b/package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prism-code-editor",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "description": "Lightweight, extensible code editor component for the web using Prism",
   "main": "./dist/index.js",

diff --git a/package/src/extensions/folding/folding.css b/package/src/extensions/folding/folding.css
@@ -4,9 +4,13 @@
 	margin: 0 0 0 calc(2px - var(--number-spacing, 0.75em));
 	width: calc(var(--number-spacing, 0.75em) - 2px);
 	place-items: center;
+}
+
+.fold-line-btn,
+.fold-placeholder span {
 	pointer-events: auto;
 	cursor: pointer;
-	z-index: 2;
+	z-index: 1;
 }
 
 .fold-line-btn > * {
@@ -46,6 +50,6 @@
 	border-radius: 0.3em;
 	pointer-events: auto;
 	cursor: pointer;
-	background: var(--widget__bg) calc(1.5ch - 1.3px) 0.5em/0.85ch
+	background: repeat-x var(--widget__bg) calc(1.5ch - 1.3px) 0.5em/0.85ch
 		url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle fill="%23999" r="1.3" cx="1.3" cy="1.3"/></svg>');
 }
diff --git a/package/src/extensions/search/search.css b/package/src/extensions/search/search.css
@@ -12,7 +12,7 @@
 	position: sticky;
 	top: 0.5em;
 	right: 0.5em;
-	z-index: 2;
+	z-index: 1;
 	pointer-events: auto;
 	box-sizing: border-box;
 }
@@ -63,6 +63,7 @@
 	padding: 0 0.2em;
 	border-radius: 0.2em;
 	width: 1.2em;
+	text-align: center;
 	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
 }
 
@@ -72,16 +73,16 @@
 
 .prism-search button:focus-visible {
 	outline: 1px solid var(--widget__focus-ring);
-	z-index: 2;
+	z-index: 1;
 }
 
-.prism-search .input,
+.prism-search .search-input,
 .search-options button {
 	box-shadow: 0 0 0 1px var(--_border, var(--widget__border));
 	margin: 1px;
 }
 
-.prism-search .input {
+.prism-search .search-input {
 	display: flex;
 	position: relative;
 	justify-content: flex-end;
@@ -91,32 +92,31 @@
 }
 
 .prism-search input:focus {
-	outline: none;
+	outline: 0;
 }
 
-.input:focus-within {
+.search-input:focus-within {
 	--_border: var(--widget__focus-ring);
 }
 
-.input.find button {
+.search-input.find button {
 	display: grid;
 	align-items: center;
 	padding: 0 0.4em;
 }
 
-.input.replace button {
+.search-input.replace button {
 	width: 7.3ch;
 	text-align: center;
 }
 
-.input.replace :last-child {
+.search-input.replace :last-child {
 	width: 2.7ch;
 }
 
-.input button {
+.search-input button {
 	box-shadow: -1px 0 0 0 var(--widget__border);
 	margin-left: 1px;
-	z-index: 1;
 }
 
 .prev-match::before {
@@ -140,11 +140,11 @@
 	--_border: var(--widget__focus-ring);
 }
 
-.input > :nth-child(3) {
-	border-radius: 0 0.16em 0.16em 0;
+.search-input > :nth-child(3) {
+	border-radius: 0 0.15em 0.15em 0;
 }
 
-.input.find.has-error {
+.search-input.find.has-error {
 	--_border: var(--widget__error-ring);
 	position: relative;
 }
@@ -160,7 +160,7 @@
 	left: 0;
 	background: var(--widget__bg-error);
 	padding: 0.5em;
-	z-index: 2;
+	z-index: 1;
 }
 
 .has-error:focus-within .search-error {
@@ -176,8 +176,16 @@ button.search-close {
 	border-radius: 0.3em;
 }
 
+.search-input.find button::before,
+.expand-search::before,
 .search-close::before {
 	content: "";
+	background: currentColor;
+	height: 1.2em;
+	opacity: 0.75;
+}
+
+.search-close::before {
 	clip-path: polygon(
 		50% 44.34%,
 		0% 74.34%,
@@ -194,10 +202,7 @@ button.search-close {
 		90.57% 80%,
 		100% 74.34%
 	);
-	background: currentColor;
 	width: 0.72em;
-	height: 1.2em;
-	opacity: 0.75;
 }
 
 .prism-search > div {
@@ -206,10 +211,6 @@ button.search-close {
 	width: var(--search-width, 20em);
 }
 
-.input.replace {
-	margin-right: auto;
-}
-
 button.expand-search {
 	display: grid;
 	place-items: center;
@@ -230,14 +231,10 @@ button.expand-search {
 	transform: rotate(180deg);
 }
 
-.input.find button::before,
+.search-input.find button::before,
 .expand-search::before {
-	content: "";
 	width: 0.84em;
-	height: 1.2em;
-	background: currentColor;
 	clip-path: polygon(50% 28.96%, 0% 63.96%, 10.1% 71.04%, 50% 43.11%, 89.9% 71.04%, 100% 63.96%);
-	opacity: 0.75;
 }
 
 button.use-regexp {
@@ -279,19 +276,18 @@ button.whole-word {
 .whole-word::after {
 	content: "";
 	position: absolute;
-	bottom: 0.33em;
+	bottom: 0.31em;
 	right: 0.27em;
 	left: 0.27em;
-	height: 0.18em;
-	clip-path: polygon(-1px 0.1px, 9em 0.1px, 9em 9em, -1px 9em);
+	height: 0.25em;
+	clip-path: inset(1px -1px -1px);
 	box-shadow: 0 0 0 1px;
 }
 
 .find-in-selection::before {
 	content: "";
 	height: 80%;
 	width: 90%;
-	display: inline-block;
 	background: currentColor;
 	clip-path: polygon(
 		0 16%,

diff --git a/package/src/extensions/search/widget.ts b/package/src/extensions/search/widget.ts
@@ -4,7 +4,7 @@ import { regexEscape, getLines, getModifierCode } from "../../utils"
 import { createReplaceAPI } from "./replace"
 
 const template = createTemplate(
-	'<div class="prism-search"><button aria-expanded="false" title="Toggle Replace" class="expand-search"></button><div spellcheck="false"><div><div class="input find"><input autocorrect="off" autocapitalize="off" placeholder="Find" aria-label="Find"><button class="prev-match" title="Previous Match (Shift+Enter)"></button><button class="next-match" title="Next Match (Enter)"></button><div class="search-error"></div></div><button class="search-close" title="Close (Esc)"></button></div><div class="input replace"><input autocorrect="off" autocapitalize="off" placeholder="Replace" aria-label="Replace"><button title="(Enter)">Replace</button><button>All</button></div><div class="search-options"><div class="match-count">0<span> of </span>0</div><button aria-pressed="false" class="use-regexp"><span aria-hidden="true"></span></button><button aria-pressed="false"><span aria-hidden="true">Aa</span></button><button aria-pressed="false" class="whole-word"><span aria-hidden="true">ab</span></button><button aria-pressed="false" class="find-in-selection"></button></div></div></div>',
+	'<div class="prism-search"><button aria-expanded="false" title="Toggle Replace" class="expand-search"></button><div spellcheck="false"><div><div class="search-input find"><input autocorrect="off" autocapitalize="off" placeholder="Find" aria-label="Find"><button class="prev-match" title="Previous Match (Shift+Enter)"></button><button class="next-match" title="Next Match (Enter)"></button><div class="search-error"></div></div><button class="search-close" title="Close (Esc)"></button></div><div class="search-input replace"><input autocorrect="off" autocapitalize="off" placeholder="Replace" aria-label="Replace"><button title="(Enter)">Replace</button><button>All</button></div><div class="search-options"><div class="match-count">0<span> of </span>0</div><button aria-pressed="false" class="use-regexp"><span aria-hidden="true"></span></button><button aria-pressed="false"><span aria-hidden="true">Aa</span></button><button aria-pressed="false" class="whole-word"><span aria-hidden="true">ab</span></button><button aria-pressed="false" class="find-in-selection"></button></div></div></div>',
 	"display:none;align-items:flex-start;justify-content:flex-end;left:var(--padding-left);",
 	"prism-search-container",
 )
@@ -179,9 +179,7 @@ export const searchWidget = (): SearchWidget => {
 			const resize = () =>
 				div.style.setProperty(
 					"--search-width",
-					`min(${
-						(scrollContainer.clientWidth / getStyleValue(div, "fontSize")) * 0.9
-					}em - var(--padding-left) - var(--padding-inline,.75em),20em)`,
+					`min(${scrollContainer.clientWidth - 2}px - 2.4em - var(--padding-left),20em)`,
 				)
 
 			const observer = window.ResizeObserver ? new ResizeObserver(resize) : null

diff --git a/package/src/layout.css b/package/src/layout.css
@@ -30,6 +30,8 @@
 	height: 100%;
 	width: 100%;
 	color: #0000;
+	-webkit-user-select: auto;
+	user-select: auto;
 	pointer-events: auto;
 	padding: 0 var(--padding-inline, 0.75em) 0 var(--padding-left);
 }
@@ -64,7 +66,7 @@
 .code-line::before {
 	position: sticky;
 	height: 100%;
-	z-index: 2;
+	z-index: 1;
 	left: 0;
 	width: var(--padding-left);
 }
@@ -74,7 +76,7 @@
 }
 
 .editor-overlays,
-.editor-overlays > *,
+div.editor-overlays > *,
 .no-selection ~ .active-line::after,
 .active-line.match-highlight::after {
 	content: "";