@bagelink/vue 1.4.62 → 1.4.69

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.62",
+  "version": "1.4.69",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/BglVideo.vue

@@ -66,7 +66,7 @@ defineExpose({ play, pause })
 const embedType = $computed<'YouTube' | 'Vimeo' | undefined>(() => {
 	const youtubeRegex = /youtube\.com|youtu\.be/
 	if (youtubeRegex.test(props.src || '')) return 'YouTube'
-	const vimeoRegex = /vimeo\.com/
+	const vimeoRegex = /(?:player\.)?vimeo\.com/
 	if (vimeoRegex.test(props.src || '')) return 'Vimeo'
 })
 
@@ -90,10 +90,15 @@ const videoUrl = $computed(() => {
 			return `https://www.youtube.com/embed/${videoId}?${queryParams}`
 		}
 		if (embedType === 'Vimeo') {
-			const vimeoRegex
-			// eslint-disable-next-line regexp/no-unused-capturing-group
-				= /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/
-			const videoId = props.src?.match(vimeoRegex)?.[3]
+			// Handle both regular Vimeo URLs and player.vimeo.com embed URLs
+			const playerVimeoRegex = /player\.vimeo\.com\/video\/(\d+)/
+			const regularVimeoRegex = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/)?(\d+)(?:$|\/|\?)/
+
+			const playerMatch = props.src?.match(playerVimeoRegex)
+			const regularMatch = props.src?.match(regularVimeoRegex)
+
+			const videoId = playerMatch?.[1] || regularMatch?.[3]
+			console.log(videoId, { playerMatch, regularMatch })
 			return `https://player.vimeo.com/video/${videoId}`
 		}
 	}
@@ -104,24 +109,13 @@ const videoUrl = $computed(() => {
 <template>
 	<div ref="videoContainer" class="bgl_vid" :class="{ vid_empty: !src, vid_short: isYoutubeShort }">
 		<iframe
-			v-if="embedType"
-			:src="videoUrl"
-			:style="{ aspectRatio }"
-			frameborder="0"
-			title="Video"
+			v-if="embedType" :src="videoUrl" :style="{ aspectRatio }" frameborder="0" title="Video"
 			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-			referrerpolicy="strict-origin-when-cross-origin"
-			allowfullscreen
+			referrerpolicy="strict-origin-when-cross-origin" allowfullscreen
 		/>
 		<video
-			v-else-if="src"
-			ref="video"
-			:autoplay="autoplay === true"
-			:muted="mute"
-			:loop="loop"
-			:style="{ aspectRatio }"
-			:controls="controls"
-			:playsinline="playsinline"
+			v-else-if="src" ref="video" :autoplay="autoplay === true" :muted="mute" :loop="loop"
+			:style="{ aspectRatio }" :controls="controls" :playsinline="playsinline"
 		>
 			<source :src="src" :type="`video/${videoFormat}`">
 		</video>
@@ -145,7 +139,8 @@ const videoUrl = $computed(() => {
 }
 
 .bgl_vid.vid_short {
-	max-width: 56.25vh; /* Limit width for shorts to maintain aspect ratio */
+	max-width: 56.25vh;
+	/* Limit width for shorts to maintain aspect ratio */
 	margin: 0 auto;
 }
 </style>

package/src/components/NavBar.vue

@@ -41,7 +41,11 @@ onMounted(calcIsOpen)
 	<div :class="{ open: isOpen, closed: !isOpen }">
 		<slot name="top" :isOpen="isOpen" />
 		<div
-			class="nav-expend" role="button" aria-label="Toggle Navigation" tabindex="0" @click="toggleMenu"
+			class="nav-expend"
+			role="button"
+			aria-label="Toggle Navigation"
+			tabindex="0"
+			@click="toggleMenu"
 			@keypress.enter="toggleMenu"
 		>
 			<Icon icon="chevron_right" class="top-arrow" />
@@ -51,8 +55,12 @@ onMounted(calcIsOpen)
 			<div class="nav-scroll">
 				<div class="nav-links-wrapper">
 					<component
-						:is="link.to ? 'router-link' : 'div'" v-for="link in links" :key="link.label"
-						class="nav-button" :to="link.to" @click="link.onClick?.()"
+						:is="link.to ? 'router-link' : 'div'"
+						v-for="link in links"
+						:key="link.label"
+						class="nav-button"
+						:to="link.to"
+						@click="link.onClick?.()"
 					>
 						<Icon :icon="link.icon" />
 						<div class="tooltip">
@@ -64,8 +72,12 @@ onMounted(calcIsOpen)
 
 			<div class="bot-buttons-wrapper">
 				<component
-					:is="link.to ? 'router-link' : 'div'" v-for="link in footerLinks" :key="link.label"
-					class="nav-button" :to="link.to" @click="link.onClick?.()"
+					:is="link.to ? 'router-link' : 'div'"
+					v-for="link in footerLinks"
+					:key="link.label"
+					class="nav-button"
+					:to="link.to"
+					@click="link.onClick?.()"
 				>
 					<Icon :icon="link.icon" />
 					<div class="tooltip">

package/src/components/form/inputs/RichText/composables/useCommands.ts

@@ -7,8 +7,6 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 
 	return {
 		execute: (command: string, value?: string) => {
-			console.log(`[useCommands] Executing command: ${command}`, value ? `with value: ${value}` : '')
-
 			if (!state.doc) {
 				console.log('[useCommands] No document available, skipping command')
 				return
@@ -17,9 +15,8 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 			// Log command if debug is enabled
 			debug?.logCommand(command, value)
 
-			// Handle view state commands directly
+			// Handle view state commands directly (these don't need DOM manipulation)
 			if (['splitView', 'codeView', 'fullScreen'].includes(command)) {
-				console.log(`[useCommands] Handling view state command: ${command}`)
 				switch (command) {
 					case 'splitView':
 						state.isSplitView = !state.isSplitView
@@ -36,41 +33,24 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 			// Focus the editor before executing command
 			try {
 				state.doc.body.focus()
-				console.log('[useCommands] Editor focused')
 			} catch (e) {
 				console.error('[useCommands] Error focusing editor:', e)
 			}
 
+			// Update current selection state before command execution
+			const selection = state.doc.getSelection()
+			if (selection?.rangeCount) {
+				state.selection = selection
+				state.range = selection.getRangeAt(0).cloneRange()
+				state.rangeCount = selection.rangeCount
+			}
+
 			// Execute the command
 			try {
-				console.log('[useCommands] Executing command via executor')
 				executor.execute(command, value)
-				console.log('[useCommands] Command execution completed')
 			} catch (e) {
 				console.error('[useCommands] Error during command execution:', e)
 			}
-
-			// Update content state only if it has changed
-			const newContent = state.doc.body.innerHTML
-			if (newContent !== state.content) {
-				console.log('[useCommands] Content changed, updating state')
-				state.content = newContent
-			}
-
-			// Update selection state if needed
-			const selection = state.doc.getSelection()
-			if (selection?.rangeCount) {
-				const hasSelectionChanged = !state.selection
-					|| state.selection !== selection
-					|| state.rangeCount !== selection.rangeCount
-
-				if (hasSelectionChanged) {
-					console.log('[useCommands] Selection changed, updating state')
-					state.selection = selection
-					state.range = selection.getRangeAt(0).cloneRange()
-					state.rangeCount = selection.rangeCount
-				}
-			}
 		},
 		isActive: executor.isActive,
 		getValue: executor.getValue

package/src/components/form/inputs/RichText/composables/useEditor.ts

@@ -70,10 +70,9 @@ export function useEditor() {
 				'h5',
 				'h6',
 				'blockquote',
-				'table',
 				'p',
-				'ol',
-				'li'
+				'orderedList',
+				'unorderedList'
 			]
 			styleTypes.forEach((style) => {
 				if (state.doc && isStyleActive(style, state.doc)) {
@@ -209,44 +208,28 @@ export function useEditor() {
 				const isDirectChildOfBody = node.parentElement === doc.body
 
 				if (isEmpty || hasOnlyNbsp || (hasOnlyBr && !isDirectChildOfBody)) {
-					if (isDirectChildOfBody && !node.matches('p')) {
-						const p = doc.createElement('p')
-						p.innerHTML = '<br>'
-						node.parentNode?.replaceChild(p, node)
-					} else {
-						nodesToRemove.push(node)
-					}
+					nodesToRemove.push(node)
 				}
 				node = walker.nextNode() as Element
 			}
 			nodesToRemove.forEach((node) => { node.remove() })
 		},
 		normalizeContent: (doc: Document) => {
-			if (!doc.body.firstElementChild) {
-				const p = doc.createElement('p')
-				p.dir = doc.body.dir
-				p.innerHTML = '<br>'
-				doc.body.appendChild(p)
-			} else {
-				const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
-				const textNodes: Text[] = []
-				let node: Node | null
-				while ((node = walker.nextNode())) {
-					if (node.parentElement === doc.body) {
-						textNodes.push(node as Text)
-					}
+			// Only normalize direct text nodes to paragraphs, don't force any structure
+			const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
+			const textNodes: Text[] = []
+			let node: Node | null
+			while ((node = walker.nextNode())) {
+				if (node.parentElement === doc.body && node.textContent?.trim()) {
+					textNodes.push(node as Text)
 				}
-				textNodes.forEach((textNode) => {
-					if (textNode.textContent?.trim()) {
-						const p = doc.createElement('p')
-						p.dir = doc.body.dir
-						p.appendChild(textNode.cloneNode())
-						doc.body.replaceChild(p, textNode)
-					} else {
-						doc.body.removeChild(textNode)
-					}
-				})
 			}
+			textNodes.forEach((textNode) => {
+				const p = doc.createElement('p')
+				p.dir = doc.body.dir
+				p.appendChild(textNode.cloneNode())
+				doc.body.replaceChild(p, textNode)
+			})
 		}
 	}
 
@@ -320,8 +303,9 @@ export function useEditor() {
 		// Store state reference in document for table operations
 		(doc as any).editorState = state
 
-		// Initial setup without triggering updates
-		if (state.content) {
+		// Initial setup without triggering updates - only set content if it exists and is not just empty paragraphs
+		if (state.content && state.content.trim()
+			&& !state.content.match(/^<p(?:\s[^>]*)?>(?:<br\s*\/?>)?\s*<\/p>$/i)) {
 			const preserved = preserveIframes(state.content)
 			doc.body.innerHTML = preserved.html
 			setTimeout(() => {
@@ -333,17 +317,32 @@ export function useEditor() {
 
 		cleanup.normalizeContent(doc)
 
-		// Set initial selection at the end
-		const range = doc.createRange()
-		const selection = doc.getSelection()
-		if (selection) {
-			range.selectNodeContents(doc.body)
-			range.collapse(false)
-			selection.removeAllRanges()
-			selection.addRange(range)
-			state.range = range.cloneRange()
-			state.selection = selection
-			state.rangeCount = selection.rangeCount
+		// Set initial selection only if there's content
+		if (doc.body.firstElementChild) {
+			const range = doc.createRange()
+			const selection = doc.getSelection()
+			if (selection) {
+				range.selectNodeContents(doc.body)
+				range.collapse(false)
+				selection.removeAllRanges()
+				selection.addRange(range)
+				state.range = range.cloneRange()
+				state.selection = selection
+				state.rangeCount = selection.rangeCount
+			}
+		} else {
+			// For empty editor, set cursor at the beginning of body
+			const selection = doc.getSelection()
+			if (selection) {
+				const range = doc.createRange()
+				range.setStart(doc.body, 0)
+				range.setEnd(doc.body, 0)
+				selection.removeAllRanges()
+				selection.addRange(range)
+				state.range = range.cloneRange()
+				state.selection = selection
+				state.rangeCount = selection.rangeCount
+			}
 		}
 
 		// Setup event listeners immediately

package/src/components/form/inputs/RichText/composables/useEditorKeyboard.ts

@@ -31,7 +31,7 @@ const shortcuts: KeyboardShortcut[] = [
 export function useEditorKeyboard(doc: Document, executor: CommandExecutor): void {
 	// Handle keyboard shortcuts
 	doc.addEventListener('keydown', (e) => {
-		// Handle Enter key in lists
+		// Handle Enter key in lists and empty editor
 		if (e.key === 'Enter' && !e.shiftKey) {
 			const selection = doc.getSelection()
 			if (!selection || !selection.rangeCount) return
@@ -56,7 +56,7 @@ export function useEditorKeyboard(doc: Document, executor: CommandExecutor): voi
 						// If the list is now empty, remove it
 						if (!list.querySelector('li')) {
 							const p = doc.createElement('p')
-							p.innerHTML = '<br>'
+							p.innerHTML = ''
 							list.parentNode?.replaceChild(p, list)
 
 							// Set cursor in the new paragraph
@@ -69,7 +69,7 @@ export function useEditorKeyboard(doc: Document, executor: CommandExecutor): voi
 						// Create a new list item
 						e.preventDefault()
 						const newLi = doc.createElement('li')
-						newLi.innerHTML = '&nbsp;<br>' // Use non-breaking space with br
+						newLi.innerHTML = '' // Start with empty list item
 						listItem.insertAdjacentElement('afterend', newLi)
 
 						// Move cursor to new list item
@@ -79,6 +79,55 @@ export function useEditorKeyboard(doc: Document, executor: CommandExecutor): voi
 						selection.addRange(range)
 					}
 				}
+			} else {
+				// Handle Enter in regular content - create new paragraph
+				const blockElement = (container.nodeType === 3 ? container.parentElement : container as Element)?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,div')
+
+				if (blockElement && range.collapsed) {
+					// If we're at the end of a block element, create a new paragraph
+					if (isAtEndOfNode(blockElement, range)) {
+						e.preventDefault()
+						const newP = doc.createElement('p')
+						newP.innerHTML = ''
+						blockElement.insertAdjacentElement('afterend', newP)
+
+						// Move cursor to new paragraph
+						range.selectNodeContents(newP)
+						range.collapse(true)
+						selection.removeAllRanges()
+						selection.addRange(range)
+					}
+				} else if (!blockElement && doc.body.textContent?.trim()) {
+					// If we're typing directly in the body and press Enter, wrap in paragraphs
+					e.preventDefault()
+
+					// Split content at cursor position
+					const textContent = doc.body.textContent || ''
+					const cursorPos = range.startOffset
+					const beforeText = textContent.substring(0, cursorPos).trim()
+					const afterText = textContent.substring(cursorPos).trim()
+
+					// Clear body
+					doc.body.innerHTML = ''
+
+					// Create first paragraph with before text
+					if (beforeText) {
+						const p1 = doc.createElement('p')
+						p1.textContent = beforeText
+						doc.body.appendChild(p1)
+					}
+
+					// Create second paragraph for after text
+					const p2 = doc.createElement('p')
+					p2.textContent = afterText
+					doc.body.appendChild(p2)
+
+					// Set cursor at beginning of second paragraph
+					range.selectNodeContents(p2)
+					range.collapse(true)
+					selection.removeAllRanges()
+					selection.addRange(range)
+				}
 			}
 		}
 

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

@@ -44,6 +44,107 @@ onUnmounted(() => {
 	editor.cleanup()
 })
 
+function setupAutoWrapping(doc: Document) {
+	// Handle typing in empty editor
+	doc.addEventListener('input', () => {
+		// If the editor is empty or only has whitespace, wrap content in a paragraph
+		if (!doc.body.firstElementChild
+			|| (!doc.body.textContent?.trim() && !doc.body.querySelector('p,h1,h2,h3,h4,h5,h6,blockquote,ul,ol,table'))) {
+			// If there's any text content, wrap it in a paragraph
+			if (doc.body.textContent?.trim()) {
+				const p = doc.createElement('p')
+				p.dir = doc.body.dir
+
+				// Move all content to the paragraph
+				while (doc.body.firstChild) {
+					p.appendChild(doc.body.firstChild)
+				}
+
+				doc.body.appendChild(p)
+
+				// Set cursor at the end of the paragraph
+				const selection = doc.getSelection()
+				if (selection) {
+					const range = doc.createRange()
+					range.selectNodeContents(p)
+					range.collapse(false)
+					selection.removeAllRanges()
+					selection.addRange(range)
+				}
+
+				// Update editor state
+				editor.state.content = doc.body.innerHTML
+			}
+		}
+	})
+
+	// Handle backspace to prevent completely empty editor
+	doc.addEventListener('keydown', (e) => {
+		if (e.key === 'Backspace') {
+			// Check if this would make the editor completely empty
+			const selection = doc.getSelection()
+			if (!selection || !selection.rangeCount) return
+
+			const range = selection.getRangeAt(0)
+
+			// If we're about to delete the last block element
+			const blockElements = doc.body.querySelectorAll('p,h1,h2,h3,h4,h5,h6,blockquote,li,div')
+			if (blockElements.length <= 1) {
+				const lastBlock = blockElements[0]
+
+				// If we're in the last block and it's about to be empty
+				if (lastBlock && (
+					(lastBlock.textContent?.trim() === '' && range.collapsed)
+					|| (range.startContainer === lastBlock && range.endContainer === lastBlock
+						&& range.startOffset === 0 && range.endOffset === lastBlock.childNodes.length)
+				)) {
+					e.preventDefault()
+
+					// Clear the content but keep the block structure
+					lastBlock.innerHTML = ''
+
+					// Set cursor in the empty block
+					const newRange = doc.createRange()
+					newRange.selectNodeContents(lastBlock)
+					newRange.collapse(true)
+					selection.removeAllRanges()
+					selection.addRange(newRange)
+
+					// Update editor state
+					editor.state.content = doc.body.innerHTML
+				}
+			}
+		}
+	})
+
+	// Handle paste events to ensure content is properly wrapped
+	doc.addEventListener('paste', (e) => {
+		setTimeout(() => {
+			// After paste, ensure any unwrapped text gets wrapped in paragraphs
+			const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
+			const textNodes: Text[] = []
+			let node: Node | null
+			while ((node = walker.nextNode())) {
+				if (node.parentElement === doc.body && node.textContent?.trim()) {
+					textNodes.push(node as Text)
+				}
+			}
+
+			textNodes.forEach((textNode) => {
+				const p = doc.createElement('p')
+				p.dir = doc.body.dir
+				p.appendChild(textNode.cloneNode())
+				doc.body.replaceChild(p, textNode)
+			})
+
+			// Update editor state if changes were made
+			if (textNodes.length > 0) {
+				editor.state.content = doc.body.innerHTML
+			}
+		}, 0)
+	})
+}
+
 async function initEditor() {
 	if (isInitializing.value || !iframe.value || hasInitialized.value) {
 		return
@@ -103,37 +204,31 @@ async function initEditor() {
 		editor.init(doc)
 		useEditorKeyboard(doc, commands)
 
-		// Initial cleanup and ensure there's at least one paragraph
-		if (!doc.body.firstElementChild) {
-			const p = doc.createElement('p')
-			p.dir = doc.body.dir
-			p.innerHTML = '<br>'
-			doc.body.appendChild(p)
-			// Update state.content after changes
-			editor.state.content = doc.body.innerHTML
-		} else {
-			// Convert any direct text nodes to paragraphs
-			const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
-			const textNodes: Text[] = []
-			let node: Node | null
-			while ((node = walker.nextNode())) {
-				if (node.parentElement === doc.body) {
-					textNodes.push(node as Text)
-				}
+		// Clean up any existing content and convert direct text nodes to paragraphs
+		const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
+		const textNodes: Text[] = []
+		let node: Node | null
+		while ((node = walker.nextNode())) {
+			if (node.parentElement === doc.body) {
+				textNodes.push(node as Text)
 			}
-			textNodes.forEach((textNode) => {
-				if (textNode.textContent?.trim()) {
-					const p = doc.createElement('p')
-					p.dir = doc.body.dir
-					p.appendChild(textNode.cloneNode())
-					doc.body.replaceChild(p, textNode)
-				} else {
-					doc.body.removeChild(textNode)
-				}
-			})
-			// Update state.content after cleanup
-			editor.state.content = doc.body.innerHTML
 		}
+		textNodes.forEach((textNode) => {
+			if (textNode.textContent?.trim()) {
+				const p = doc.createElement('p')
+				p.dir = doc.body.dir
+				p.appendChild(textNode.cloneNode())
+				doc.body.replaceChild(p, textNode)
+			} else {
+				doc.body.removeChild(textNode)
+			}
+		})
+
+		// Setup auto-wrapping for typed content
+		setupAutoWrapping(doc)
+
+		// Update state.content after cleanup
+		editor.state.content = doc.body.innerHTML
 
 		doc.body.focus()
 		hasInitialized.value = true
@@ -163,32 +258,39 @@ watch(() => editor.state.content, (newValue) => {
 	}
 	emit('update:modelValue', newValue)
 })
+
+// Expose for testing
+defineExpose({
+	editor,
+	commands
+})
 </script>
 
 <template>
 	<div class="bagel-input">
 		<label>{{ label }}</label>
-		<div class="rich-text-editor rounded pt-05 px-05 pb-075" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
+
+		<div
+			class="rich-text-editor rounded pt-05 px-05 pb-075"
+			:class="{ 'fullscreen-mode': editor.state.isFullscreen }"
+		>
 			<EditorToolbar
-				v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
-				@action="commands.execute"
+				v-if="editor.state.hasInit" :config="toolbarConfig"
+				:selectedStyles="editor.state.selectedStyles" @action="commands.execute"
 			/>
 			<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
-				<div class="content-area radius-05" :style="{ height: editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight }">
+				<div
+					class="content-area radius-05"
+					:style="{ height: editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight }"
+				>
 					<iframe
-						id="rich-text-iframe"
-						ref="iframe"
-						class="editableContent"
-						title="Editor"
-						srcdoc=""
+						id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" srcdoc=""
 						sandbox="allow-same-origin allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-top-navigation allow-top-navigation-by-user-activation"
 						@load="initEditor"
 					/>
 				</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"
 					:height="editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight"
 					@update:modelValue="editor.updateState.content('html')"
 				/>
@@ -203,7 +305,10 @@ watch(() => editor.state.content, (newValue) => {
 				<Btn thin color="gray" icon="download" @click="debugMethods?.downloadSession">
 					Download Log
 				</Btn>
-				<Btn thin color="gray" icon="content_copy" @click="copyText(debugMethods?.exportDebugWithPrompt() || '')">
+				<Btn
+					thin color="gray" icon="content_copy"
+					@click="copyText(debugMethods?.exportDebugWithPrompt() || '')"
+				>
 					Copy Log
 				</Btn>
 			</div>
@@ -214,7 +319,7 @@ watch(() => editor.state.content, (newValue) => {
 <style>
 .content-area p,
 .content-area span,
-.content-area li{
+.content-area li {
 	line-height: 1.65;
 }
 </style>