@bagelink/vue 1.15.200 → 1.15.202

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.200",
+  "version": "1.15.202",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -53,6 +53,20 @@ const maxHeight = computed(() => {
 	return h.match(/^\d+$/) ? `${h}px` : h
 })
 
+/** Light hljs themes need a dark caret + light color-scheme for native scrollbars. */
+const isLightTheme = computed(() => {
+	const t = String(props.theme).toLowerCase()
+	if (t === 'light') return true
+	if (t === 'dark') return false
+	if (t.includes('dark')) return false
+	if (t.includes('light') || t.includes('dawn')) return true
+	return [
+		'github', 'xcode', 'vs', 'docco', 'default', 'foundation', 'googlecode',
+		'idea', 'magula', 'ascetic', 'brown-paper', 'color-brewer', 'grayscale',
+		'school-book', 'routeros', 'purebasic',
+	].includes(t)
+})
+
 const formattedCode = computed(() => {
 	return highlightCode(
 		code.value,
@@ -144,10 +158,15 @@ watch(() => props.modelValue, () => {
 		:style="[{ height: maxHeight }, shellStyle]"
 	>
 		<label v-if="label" class="label">{{ label }}</label>
-		<div v-if="loaded" ref="editorRef" class="code-editor-grandpa hljs">
-			<div class="editor-content-papa relative">
-				<pre class="code-display" wrap><code v-html="formattedCode" /></pre>
-				<pre v-if="placeholder && !hasCodeValue" class="code-placeholder" wrap>{{ placeholder }}</pre>
+		<div
+			v-if="loaded"
+			ref="editorRef"
+			class="code-editor-grandpa hljs"
+			:class="isLightTheme ? 'theme-light' : 'theme-dark'"
+		>
+			<div class="editor-content-papa">
+				<pre class="code-display"><code v-html="formattedCode" /></pre>
+				<pre v-if="placeholder && !hasCodeValue" class="code-placeholder">{{ placeholder }}</pre>
 				<textarea
 					v-if="!readonly && !disabled" :value="code" class="code-input" spellcheck="false"
 					autocomplete="off" autocorrect="off" autocapitalize="off" @input="handleInput"
@@ -161,105 +180,116 @@ watch(() => props.modelValue, () => {
 </template>
 
 <style scoped>
-
 .code-editor-container {
-margin-bottom: 0.5rem;
-height: 100%;
+	margin-bottom: 0.5rem;
+	height: 100%;
 }
 
 .label {
-display: block;
-text-align: left;
-margin-bottom: 0.25rem;
+	display: block;
+	text-align: left;
+	margin-bottom: 0.25rem;
 }
 
 .code-editor-grandpa {
-border-radius: var(--code-border-radius, 0.25rem);
-width: 100%;
-height: 100%;
-overflow: auto;
-padding: 1ch;
-padding-inline-start: 2ch;
+	--code-caret-color: #fff;
+	border-radius: var(--code-border-radius, 0.25rem);
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	overscroll-behavior: contain;
+	padding: 1ch;
+	padding-inline-start: 2ch;
+	color-scheme: dark;
+}
+
+.code-editor-grandpa.theme-light {
+	--code-caret-color: #1b1f23;
+	color-scheme: light;
 }
 
 .code-editor-grandpa:focus-within {
-outline: solid 1px var(--bgl-border-color, #4f575f);
-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.13);
+	outline: solid 1px var(--bgl-border-color, #4f575f);
+	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.13);
 }
 
 .editor-content-papa {
-position: relative;
-width: 100%;
+	/* Stack pre + textarea in one cell so both share the content-sized box */
+	display: grid;
+	min-width: 100%;
+	width: max-content;
 	min-height: 100%;
+	/* Cover the scrollable overflow area (grandpa bg doesn't paint past its box) */
+	background: inherit;
 }
 
 .code-display,
-.code-input {
-inset: 0;
-margin: 0;
-padding: 0;
-width: 100%;
-height: 100%;
-font-family: monospace;
-font-size: 1em;
-line-height: 1.5;
-tab-size: 2;
-word-break: keep-all;
-text-align: left;
+.code-input,
+.code-placeholder {
+	grid-area: 1 / 1;
+	box-sizing: border-box;
+	margin: 0;
+	/* Extra line so caret can sit on a trailing empty line */
+	padding: 0 0 1.5em;
+	min-width: 100%;
+	width: auto;
+	height: auto;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	font-size: 1em;
+	font-variant-ligatures: none;
+	letter-spacing: normal;
+	line-height: 1.5;
+	tab-size: 2;
+	/* Match wrapping: pre defaults to `pre`, textarea to `pre-wrap` */
+	white-space: pre;
+	overflow-wrap: normal;
+	word-break: normal;
+	text-align: left;
+	border: none;
 }
 
 .code-display {
-position: relative;
-pointer-events: none;
-z-index: 1;
+	pointer-events: none;
+	z-index: 1;
 }
 
 .code-placeholder {
-position: absolute;
-inset: 0;
-margin: 0;
-padding: 0;
-width: 100%;
-height: 100%;
-font-family: monospace;
-font-size: 1em;
-line-height: 1.5;
-text-align: left;
-pointer-events: none;
-opacity: 0.4;
-z-index: 1;
+	pointer-events: none;
+	opacity: 0.4;
+	z-index: 1;
 }
 
 .code-display code {
-display: block;
-background: transparent !important;
-padding: 0 !important;
+	display: block;
+	background: transparent !important;
+	padding: 0 !important;
 }
 
 .code-input {
-position: absolute;
-background: transparent;
-color: transparent;
-caret-color: #fff;
-border: none;
-resize: none;
-outline: none;
-z-index: 2;
+	width: 100%;
+	height: 100%;
+	background: transparent;
+	color: transparent;
+	-webkit-text-fill-color: transparent;
+	caret-color: var(--code-caret-color);
+	resize: none;
+	outline: none;
+	/* Grandpa handles scrolling — avoid a second scrollbar */
+	overflow: hidden;
+	z-index: 2;
 }
 
 .code-input::selection {
-background-color: rgba(36, 102, 188, 0.3);
-color: transparent;
+	background-color: rgba(36, 102, 188, 0.3);
+	color: transparent;
+	-webkit-text-fill-color: transparent;
 }
-
 </style>
 
 <style>
-
 /* Global styles */
 pre code.hljs {
-padding: 0 !important;
-background: transparent !important;
+	padding: 0 !important;
+	background: transparent !important;
 }
-
 </style>