@bagelink/vue 0.0.863 → 0.0.869

package/src/components/form/inputs/RichText2/formatting.ts

@@ -1,4 +1,4 @@
-import { useModal } from '@bagelink/vue'
+let modal: any
 
 export function applyFormatting(command: string, value: string = '') {
 	const selection = window.getSelection()
@@ -7,6 +7,9 @@ export function applyFormatting(command: string, value: string = '') {
 		const span = document.createElement('span')
 
 		switch (command) {
+			case 'formatBlock':
+				formatBlock(value)
+				break
 			case 'bold':
 				span.style.fontWeight = 'bold'
 				break
@@ -73,7 +76,7 @@ export function applyFormatting(command: string, value: string = '') {
 			case 'decreaseFontSize':
 				decreaseFontSize()
 				break
-			case 'insertLink':
+			case 'link':
 				insertLink()
 				break
 			case 'image':
@@ -91,6 +94,16 @@ export function applyFormatting(command: string, value: string = '') {
 	}
 }
 
+function formatBlock(value: string) {
+	if (!value) return
+	const selection = window.getSelection()
+	const range = selection?.getRangeAt(0)
+	if (!range) return
+	range.selectNodeContents(range.startContainer)
+	const el = document.createElement(value)
+	range.surroundContents(el)
+}
+
 function increaseFontSize() {
 	const selection = window.getSelection()
 	if (selection && selection.rangeCount > 0) {
@@ -104,7 +117,15 @@ function increaseFontSize() {
 }
 
 function decreaseFontSize() {
-// TODO:
+	const selection = window.getSelection()
+	if (selection && selection.rangeCount > 0) {
+		const range = selection.getRangeAt(0)
+		const span = document.createElement('span')
+		const currentFontSize = Number.parseInt((range.startContainer.parentNode as HTMLElement).style.fontSize || '16', 10)
+		const newFontSize = currentFontSize - 2
+		span.style.fontSize = `${newFontSize}px`
+		range.surroundContents(span)
+	}
 }
 
 function removeFormatting() {
@@ -142,36 +163,40 @@ function insertList(type: string) {
 }
 
 export function insertLink() {
-	const url = prompt('Enter the URL:')
-	if (url) {
-		const selection = window.getSelection()
-		if (selection && selection.rangeCount > 0) {
-			const range = selection.getRangeAt(0)
+	const selection = window.getSelection()
+	if (!selection || selection.rangeCount < 1) return
+	const range = selection.getRangeAt(0)
+	modal.showModalForm({ title: 'Insert Link', schema: [
+		{ id: 'url', $el: 'text', label: 'URL' },
+		{ id: 'openInNewTab', $el: 'check', label: 'Open in new tab' },
+	], onSubmit: (data: any) => {
+		const { url, openInNewTab } = data
+		if (url) {
 			const anchor = document.createElement('a')
 			anchor.href = url
 			range.surroundContents(anchor)
+			if (openInNewTab) anchor.target = '_blank'
 		}
-	}
+	} })
 }
 
 export function insertImage() {
-	console.log('image')
-	const { showModalForm } = useModal()
-	console.log(showModalForm)
-	showModalForm({ title: 'Upload Image', schema: [{ id: 'image', type: 'file' }], onSubmit: (_data) => {
-		//
+	const selection = window.getSelection()
+	if (!selection || selection.rangeCount < 1) return
+	const range = selection.getRangeAt(0)
+	modal.showModalForm({ title: 'Upload Image', schema: [
+		{ id: 'src', $el: 'file', attrs: { bindkey: 'url' } },
+		{ id: 'alt', $el: 'text', label: 'Alt Text' },
+	], onSubmit: (_data: any) => {
+		const { src } = _data
+		if (src) {
+			const img = document.createElement('img')
+			img.src = src
+			img.alt = _data.alt
+			range.deleteContents()
+			range.insertNode(img)
+		}
 	} })
-	// const url = prompt('Enter the image URL:')
-	// if (url) {
-	// 	const selection = window.getSelection()
-	// 	if (selection && selection.rangeCount > 0) {
-	// 		const range = selection.getRangeAt(0)
-	// 		const img = document.createElement('img')
-	// 		img.src = url
-	// 		range.deleteContents()
-	// 		range.insertNode(img)
-	// 	}
-	// }
 }
 
 export function createTable() {
@@ -200,3 +225,22 @@ export function createTable() {
 		}
 	}
 }
+
+function clearFormatting() {
+	const selection = window.getSelection()
+	const range = selection?.getRangeAt(0)
+	if (!range) return
+	range.selectNodeContents(range.startContainer)
+	const contents = range.extractContents()
+	const text = contents.textContent
+	if (text !== null && text !== '') {
+		range.deleteContents()
+		const textNode = document.createTextNode(`${text}`)
+		setTimeout(() => { range.insertNode(textNode) }, 1)
+	}
+}
+
+export function useFormatting(modalInstance?: any) {
+	modal = modalInstance
+	return { applyFormatting, clearFormatting }
+}

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

@@ -1,14 +1,19 @@
 <script lang="ts" setup>
 import type { ToolbarConfig } from './richtext-types'
+import { useModal } from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
-import { applyFormatting } from './formatting'
+import { useFormatting } from './formatting'
 import Toolbar from './Toolbar.vue'
 
 const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig }>()
 const emit = defineEmits(['update:modelValue'])
 
+const modal = useModal()
+const { applyFormatting, clearFormatting } = useFormatting(modal)
+
 const editableContent = $ref<HTMLElement | undefined>()
 const defaultConfig: ToolbarConfig = [
+	'formatBlock',
 	'bold',
 	'italic',
 	'underline',
@@ -47,36 +52,37 @@ function updateContent() {
 	emit('update:modelValue', contentHtml)
 }
 
+function updateToolbarHighlight() {
+	if (document.getSelection()) {
+		const selection = document.getSelection()
+		const range = selection?.rangeCount ? selection.getRangeAt(0) : null
+		const container = range?.commonAncestorContainer as HTMLElement
+		if (container) {
+			let currentElement = container.nodeType === 3 ? container.parentElement : container
+			while (currentElement && currentElement !== editableContent) {
+				if (['H1', 'H2', 'H3'].includes(currentElement.tagName)) {
+					// emit('action', { type: currentElement.tagName.toLowerCase() }); // Emit the tag to highlight button
+					break
+				}
+				currentElement = currentElement.parentElement
+			}
+		}
+	}
+}
+
+document.addEventListener('selectionchange', updateToolbarHighlight)
+
+type ToolbarAction = 'link' | 'image' | 'table' | 'youtube' | 'fontSize' | 'fontFamily' | 'textColor' | 'backgroundColor' | 'bold' | 'italic' | 'underline' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'orderedList' | 'unorderedList' | 'indent' | 'outdent' | 'blockquote' | 'codeBlock' | 'splitView' | 'codeView' | 'clear' | 'fullScreen'
+
 function handleToolbarAction(action: string, value?: string) {
 	if (!editableContent) return
 	if (['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'].includes(action))
 		value = action.replace('align', '').toLowerCase()
-	switch (action) {
-		case 'orderedList':
-			applyFormatting('insertOrderedList')
-			break
-		case 'unorderedList':
-			applyFormatting('insertUnorderedList')
-			break
-		case 'blockquote':
-			applyFormatting('formatBlock', '<blockquote>')
-			break
-		case 'codeBlock':
-			applyFormatting('formatBlock', '<pre>')
-			break
-		case 'splitView':
-			isSplitView = !isSplitView
-			break
-		case 'codeView':
-			isCodeView = !isCodeView
-			break
-		case 'fullScreen':
-			toggleFullScreen()
-			break
-		default:
-			applyFormatting(action, value)
-			break
-	}
+	if (action === 'splitView') isSplitView = !isSplitView
+	else if (action === 'codeView') isCodeView = !isCodeView
+	else if (action === 'fullScreen') toggleFullScreen()
+	else if (action === 'clear') clearFormatting()
+	else applyFormatting(action, value)
 	updateContent()
 }
 
@@ -131,13 +137,17 @@ function handleKeyDown(event: KeyboardEvent) {
 		}
 	}
 }
+function logInput(e: InputEvent) {
+	const target = e.target as HTMLElement
+	contentHtml = target.textContent || ''
+}
 </script>
 
 <template>
-	<div class="rich-text-editor rounded pt-05 px-1 pb-1">
+	<div class="rich-text-editor rounded pt-05 px-05 pb-1">
 		<Toolbar :config @action="handleToolbarAction" />
 		<div class="editor-container flex flex-stretch gap-1 m_column">
-			<div class="content-area radius-05 p-1 shadow-light w-100 grid">
+			<div class="content-area radius-05 p-1 w-100 grid">
 				<textarea v-if="isCodeView" v-model="contentHtml" @input="updateContent" />
 				<div
 					v-else
@@ -151,7 +161,13 @@ function handleKeyDown(event: KeyboardEvent) {
 					@keydown="handleKeyDown"
 				/>
 			</div>
-			<code v-if="isSplitView" class="preview-area  w-100 radius-05 p-1">{{ contentHtml }}</code>
+			<code
+				v-if="isSplitView"
+				contenteditable="true"
+				class="preview-area w-100 radius-05 p-1"
+				@input="(e) => logInput(e as InputEvent)"
+				v-text="contentHtml"
+			/>
 		</div>
 	</div>
 </template>

package/src/components/form/inputs/RichText2/richtext-types.ts

@@ -24,5 +24,6 @@ export type ToolbarConfigOption = 'bold'
 	| 'youtube'
 	| 'clear'
 	| 'fullScreen'
+	| 'formatBlock'
 
 export type ToolbarConfig = ToolbarConfigOption[]

package/src/components/form/inputs/index.ts

@@ -10,8 +10,8 @@ export { default as PasswordInput } from './PasswordInput.vue'
 export { default as RadioGroup } from './RadioGroup.vue'
 export { default as RadioPillsInput } from './RadioPillsInput.vue'
 export { default as RangeInput } from './RangeInput.vue'
-export { default as RichText } from './RichText.vue'
-export { default as RichText2 } from './RichText2/index.vue'
+export { default as RichText2 } from './RichText.vue'
+export { default as RichText } from './RichText2/index.vue'
 export { default as SelectInput } from './SelectInput.vue'
 export { default as SignaturePad } from './SignaturePad.vue'
 export { default as TableField } from './TableField.vue'

package/src/styles/layout.css

@@ -51,6 +51,10 @@
     border-radius: 100%;
 }
 
+.aspect-ratio-1 {
+    aspect-ratio: 1;
+}
+
 .flex-center {
     justify-content: center;
     align-items: center;

package/src/styles/mobilLayout.css

@@ -72,6 +72,10 @@
         border-radius: 100%;
     }
 
+    .m_aspect-ratio-1 {
+        aspect-ratio: 1;
+    }
+
     .m_flex-center {
         justify-items: center;
         align-items: center;