@bagelink/vue 1.15.271 → 1.15.273

package/package.json

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

package/src/components/Image.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'BglImage', inheritAttrs: false })
 import { Skeleton, normalizeDimension, Icon, useImageSrc } from '@bagelink/vue'
-import { Comment, computed, useSlots, type StyleValue, type VNode } from 'vue'
+import { Comment, computed, ref, useSlots, watch, type StyleValue, type VNode } from 'vue'
 
 interface ImageProps {
 	src?: string
@@ -26,6 +26,15 @@ interface ImageProps {
 const props = defineProps<ImageProps>()
 
 const { imageSrc, loadingError } = useImageSrc(() => props.src ?? props.pathKey ?? props.modelValue)
+const imageLoaded = ref(false)
+
+watch(imageSrc, () => {
+	imageLoaded.value = false
+})
+
+function onImageLoad() {
+	imageLoaded.value = true
+}
 
 // ── Framed mode (ratio / gradient / blend / rounded / overlay slot) ──────────
 const slots = useSlots()
@@ -89,10 +98,11 @@ const imgFit = computed(() => props.fit ?? 'cover')
 			:src="imageSrc"
 			:alt="alt"
 			class="bgl-image-frame-img h-100p"
-			:class="frameHasHeight ? 'absolute-fill' : 'bgl-image-frame-img--flow'"
+			:class="[frameHasHeight ? 'absolute-fill' : 'bgl-image-frame-img--flow', { 'opacity-0': !imageLoaded }]"
 			:style="{ objectFit: imgFit, mixBlendMode: blend } as StyleValue"
+			@load="onImageLoad"
 		>
-		<Skeleton v-else-if="!gradientCss && !loadingError" class="absolute-fill" />
+		<Skeleton v-if="!imageLoaded && !loadingError" class="absolute-fill" />
 		<div v-else-if="loadingError && !gradientCss" class="flex-center absolute-fill error-image">
 			<Icon name="broken_image" />
 		</div>
@@ -100,6 +110,7 @@ const imgFit = computed(() => props.fit ?? 'cover')
 	</div>
 
 	<figcaption v-else-if="caption">
+		<div class="relative">
 		<img
 			v-if="imageSrc"
 			:src="imageSrc"
@@ -107,39 +118,38 @@ const imgFit = computed(() => props.fit ?? 'cover')
 			:alt="alt"
 			:width="normalizeDimension(width)"
 			:height="normalizeDimension(height)"
+				:class="{ 'opacity-0': !imageLoaded }"
+				@load="onImageLoad"
 		>
 		<Skeleton
-			v-else
+				v-if="!imageLoaded && !loadingError"
 			class="img-web-kit"
 			:width="normalizeDimension(width)"
 			:height="normalizeDimension(height)"
 		/>
+		</div>
 	</figcaption>
 
-	<img
-		v-else-if="imageSrc"
-		:src="imageSrc"
-		v-bind="$attrs"
-		:alt="alt"
-		:width="normalizeDimension(width)"
-		:height="normalizeDimension(height)"
-	>
 	<div
-		v-else-if="loadingError"
-		class="flex-center error-image"
-		:style="{
-			width: normalizeDimension(width),
-			height: normalizeDimension(height),
-		}"
+		v-else
+		v-bind="$attrs"
+		class="relative"
+		:style="{ width: normalizeDimension(width), height: normalizeDimension(height) }"
 	>
-		<Icon name="broken_image" />
+		<img
+			v-if="imageSrc"
+			:src="imageSrc"
+			:alt="alt"
+			class="w-100p h-100p"
+			:class="{ 'opacity-0': !imageLoaded }"
+			:style="{ objectFit: imgFit }"
+			@load="onImageLoad"
+		>
+		<div v-if="loadingError" class="flex-center absolute-fill error-image">
+			<Icon name="broken_image" />
+		</div>
+		<Skeleton v-else-if="!imageLoaded" class="absolute-fill" />
 	</div>
-	<Skeleton
-		v-else
-		class="img-web-kit"
-		:width="normalizeDimension(width)"
-		:height="normalizeDimension(height)"
-	/>
 </template>
 
 <style scoped>

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

@@ -16,6 +16,8 @@ const props = defineProps({
 	placeholder: { type: String, default: '' },
 	height: { type: String, default: '240px' },
 	disabled: { type: Boolean, default: false },
+	/** Wrap long lines instead of scrolling horizontally */
+	wrap: { type: Boolean, default: false },
 	theme: { type: String as PropType<HighlightTheme>, default: 'dark' },
 	frame: { type: Boolean, default: undefined },
 	outline: { type: Boolean, default: undefined },
@@ -162,7 +164,7 @@ watch(() => props.modelValue, () => {
 			v-if="loaded"
 			ref="editorRef"
 			class="code-editor-grandpa hljs"
-			:class="isLightTheme ? 'theme-light' : 'theme-dark'"
+			:class="[isLightTheme ? 'theme-light' : 'theme-dark', { 'code-wrap': wrap }]"
 		>
 			<div class="editor-content-papa">
 				<pre class="code-display"><code v-html="formattedCode" /></pre>
@@ -284,6 +286,24 @@ watch(() => props.modelValue, () => {
 	color: transparent;
 	-webkit-text-fill-color: transparent;
 }
+
+/* Wrap mode: long lines break onto the next line instead of scrolling.
+   The content box must fill the width so wrapping has a boundary to break at. */
+.code-editor-grandpa.code-wrap {
+	overflow-x: hidden;
+}
+
+.code-editor-grandpa.code-wrap .editor-content-papa {
+	width: 100%;
+}
+
+.code-editor-grandpa.code-wrap .code-display,
+.code-editor-grandpa.code-wrap .code-input,
+.code-editor-grandpa.code-wrap .code-placeholder {
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	word-break: break-word;
+}
 </style>
 
 <style>

package/src/components/form/inputs/RichText/editor.css

@@ -181,6 +181,11 @@ th {
 	pointer-events: none;
 }
 
+/* Linked image: the wrapping <a> behaves like the image block so layout is unchanged */
+.richtext-editor-content .image-figure > a {
+	display: block;
+}
+
 .richtext-editor-content .image-figure figcaption {
 	margin-top: 0.5rem;
 	font-size: 0.9em;

package/src/components/form/inputs/RichText/index.vue

@@ -230,7 +230,9 @@ const imageForm = ref({
 	height: '',
 	credit: '',
 	figcaption: false,
-	align: 'full' // full, start, end
+	align: 'full', // full, start, end
+	link: '',
+	linkNewTab: false
 })
 let pendingImageData: {
 	selection: Selection
@@ -708,6 +710,11 @@ function openImageModal(existingImage: HTMLElement | null = null) {
 		const alignSource = existingImage.tagName === 'IMG' ? img : existingImage
 		const align = alignSource?.getAttribute('data-align') || 'full'
 
+		// Read link from the anchor wrapping the image (if any)
+		const anchor = img?.closest('a')
+		const link = anchor?.getAttribute('href') || ''
+		const linkNewTab = anchor?.getAttribute('target') === '_blank'
+
 		imageForm.value = {
 			src: img?.src || '',
 			alt: img?.alt || '',
@@ -715,7 +722,9 @@ function openImageModal(existingImage: HTMLElement | null = null) {
 			height: img?.getAttribute('data-height') || img?.style.height || '',
 			credit,
 			figcaption: !!figcaption,
-			align
+			align,
+			link,
+			linkNewTab
 		}
 	} else {
 		// Reset form for new image
@@ -726,7 +735,9 @@ function openImageModal(existingImage: HTMLElement | null = null) {
 			height: '',
 			credit: '',
 			figcaption: false,
-			align: 'full'
+			align: 'full',
+			link: '',
+			linkNewTab: false
 		}
 	}
 
@@ -791,6 +802,21 @@ function submitImage() {
 		return figcaption
 	}
 
+	// Wrap the image in an anchor when a link is provided, otherwise return the bare image
+	function createImageContent(): HTMLElement {
+		const link = imageForm.value.link?.trim()
+		if (!link) { return img }
+
+		const anchor = doc!.createElement('a')
+		anchor.setAttribute('href', link)
+		if (imageForm.value.linkNewTab) {
+			anchor.setAttribute('target', '_blank')
+			anchor.setAttribute('rel', 'noopener noreferrer')
+		}
+		anchor.appendChild(img)
+		return anchor
+	}
+
 	// Create or update figure/image - always wrap in figure
 	let elementToUpdate: HTMLElement
 	if (existingImage) {
@@ -801,7 +827,7 @@ function submitImage() {
 			if (imageForm.value.credit) {
 				figure.setAttribute('data-credit', imageForm.value.credit)
 			}
-			figure.appendChild(img)
+			figure.appendChild(createImageContent())
 
 			// Add caption if needed (alt with checkbox checked OR credit exists)
 			if ((imageForm.value.figcaption && imageForm.value.alt) || imageForm.value.credit) {
@@ -816,7 +842,7 @@ function submitImage() {
 			if (imageForm.value.credit) {
 				existingImage.setAttribute('data-credit', imageForm.value.credit)
 			}
-			existingImage.appendChild(img)
+			existingImage.appendChild(createImageContent())
 
 			// Add caption if needed (alt with checkbox checked OR credit exists)
 			if ((imageForm.value.figcaption && imageForm.value.alt) || imageForm.value.credit) {
@@ -831,7 +857,7 @@ function submitImage() {
 		if (imageForm.value.credit) {
 			figure.setAttribute('data-credit', imageForm.value.credit)
 		}
-		figure.appendChild(img)
+		figure.appendChild(createImageContent())
 
 		// Add caption if needed (alt with checkbox checked OR credit exists)
 		if ((imageForm.value.figcaption && imageForm.value.alt) || imageForm.value.credit) {
@@ -2931,6 +2957,13 @@ async function initEditor() {
 				width: 100%;
 			}
 
+			/* Linked images: the wrapping <a> should behave like the image block.
+			   In the editor, disable navigation so clicks open the edit modal. */
+			figure.image-figure > a {
+				display: block;
+				pointer-events: none;
+			}
+
 			/* Selected state — applied via JS on click, stripped by getCleanHTML() */
 			.media-selected {
 				outline: 2px solid #007bff !important;
@@ -3352,7 +3385,7 @@ const imgTransform = computed({
 					/>
 				</div>
 				<CodeEditor
-					v-if="editor.state.isSplitView" v-model="editor.state.content" language="html"
+					v-if="editor.state.isSplitView" v-model="editor.state.content" language="html" wrap
 					:height="editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight"
 					@update:modelValue="editor.updateState.content('html')"
 				/>
@@ -3537,6 +3570,13 @@ const imgTransform = computed({
 			help="Full width fills the container. Start/End float the image so text flows alongside."
 		/>
 		<TextInput v-model="imageForm.credit" label="Photo Credit" placeholder="Photographer name (optional)" />
+		<TextInput
+			v-model="imageForm.link" label="Link URL" type="url" placeholder="https://example.com (optional)"
+			help="Make the image clickable by linking it to a URL"
+		/>
+		<CheckInput
+			v-if="imageForm.link" v-model="imageForm.linkNewTab" label="Open link in new tab"
+		/>
 		<CheckInput
 			v-model="imageForm.figcaption" label="Show alt text as caption"
 			help="Photo credit will always be shown if provided"
@@ -3889,9 +3929,21 @@ background: var(--bgl-richtext-color);
 font-size: var(--richtext-font-size, 16px);
 }
 
-.split-view {
+/* Split view: editor + code side by side, each taking half the width.
+   Use a compound selector so it overrides the base `.editor-container`
+   `display: flex` regardless of source order or other modifiers. */
+.editor-container.split-view {
 display: grid;
 grid-template-columns: 1fr 1fr;
+align-items: stretch;
+}
+
+/* Prevent either pane from overflowing its track (the code editor has
+   min-width: 100% internally, which would otherwise blow out the grid). */
+.editor-container.split-view > .content-area,
+.editor-container.split-view > :deep(.code-editor-container) {
+min-width: 0;
+overflow: hidden;
 }
 
 .editableContent {