@bagelink/vue 0.0.978 → 0.0.980

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ToolbarConfig } from './richtext-types'
 import { useModal } from '@bagelink/vue'
-import { onMounted, watch } from 'vue'
+import { onMounted, watch, ref } from 'vue'
 import { useFormatting } from './formatting'
 import Toolbar from './Toolbar.vue'
 
@@ -11,7 +11,7 @@ const emit = defineEmits(['update:modelValue'])
 const modal = useModal()
 const { applyFormatting, clearFormatting } = useFormatting(modal)
 
-const editableContent = $ref<HTMLElement | undefined>()
+const editableContent = ref<HTMLElement>()
 const defaultConfig: ToolbarConfig = [
 	'formatBlock',
 	'bold',
@@ -32,81 +32,94 @@ const defaultConfig: ToolbarConfig = [
 	'link',
 	'image',
 	'table',
-	'blockquote',
-	'codeBlock',
 	'splitView',
-	'youtube',
-	'codeView',
 	'clear',
 	'fullScreen'
 ]
-const config = $ref<ToolbarConfig>(props.toolbarConfig || defaultConfig)
-let contentHtml = $ref(props.modelValue)
-let isCodeView = $ref(false)
-let isSplitView = $ref(false)
 
-function updateContent() {
-	if (!isCodeView) {
-		contentHtml = editableContent?.innerHTML ?? ''
+const config = ref<ToolbarConfig>(props.toolbarConfig || defaultConfig)
+const contentHtml = ref(props.modelValue)
+const isCodeView = ref(false)
+const isSplitView = ref(false)
+const selectedStyles = ref(new Set<string>())
+
+function updateContent(source: 'html' | 'editor' = 'editor') {
+	if (source === 'editor' && !isCodeView.value) {
+		contentHtml.value = editableContent.value?.innerHTML ?? ''
 	}
-	emit('update:modelValue', contentHtml)
+	emit('update:modelValue', contentHtml.value)
 }
 
-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
-			}
-		}
+function handleHtmlInput(e: Event) {
+	const target = e.target as HTMLTextAreaElement
+	contentHtml.value = target.value
+	if (editableContent.value) {
+		editableContent.value.innerHTML = target.value
 	}
+	updateContent('html')
 }
 
-document.addEventListener('selectionchange', updateToolbarHighlight)
+function updateToolbarHighlight() {
+	selectedStyles.value.clear()
+	const selection = window.getSelection()
+	if (!selection?.rangeCount) return
 
-// 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'
-export type ToolbarAction = ToolbarConfig[number]
+	const range = selection.getRangeAt(0)
+	const element = range.commonAncestorContainer as HTMLElement
+	const parent = element.nodeType === 3 ? element.parentElement : element
+
+	if (!parent) return
+
+	if (parent.style.fontWeight === 'bold') selectedStyles.value.add('bold')
+	if (parent.style.fontStyle === 'italic') selectedStyles.value.add('italic')
+	if (parent.style.textDecoration === 'underline') selectedStyles.value.add('underline')
+}
 
 function handleToolbarAction(action: string, value?: string) {
-	if (!editableContent) return
-	if (['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'].includes(action))
+	if (!editableContent.value) return
+
+	if (['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'].includes(action)) {
 		value = action.replace('align', '').toLowerCase()
-	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)
+	}
+
+	switch (action) {
+		case 'splitView':
+			isSplitView.value = !isSplitView.value
+			break
+		case 'codeView':
+			isCodeView.value = !isCodeView.value
+			break
+		case 'fullScreen':
+			toggleFullScreen()
+			break
+		case 'clear':
+			clearFormatting()
+			break
+		default:
+			applyFormatting(action, value)
+	}
 	updateContent()
 }
 
 function toggleFullScreen() {
 	const editor = document.querySelector('.rich-text-editor')
-	if (editor) {
-		editor.classList.toggle('fullscreen-mode')
-	}
+	editor?.classList.toggle('fullscreen-mode')
 }
 
 watch(() => props.modelValue, (newValue) => {
-	if (newValue !== contentHtml) {
-		contentHtml = newValue
-		if (editableContent) {
-			editableContent.innerHTML = newValue
+	if (newValue !== contentHtml.value) {
+		contentHtml.value = newValue
+		if (editableContent.value) {
+			editableContent.value.innerHTML = newValue
 		}
 	}
 })
 
 onMounted(() => {
-	if (editableContent) {
-		editableContent.innerHTML = contentHtml
+	if (editableContent.value) {
+		editableContent.value.innerHTML = contentHtml.value
 	}
+	document.addEventListener('selectionchange', updateToolbarHighlight)
 })
 
 // Keyboard shortcuts
@@ -125,31 +138,26 @@ function handleKeyDown(event: KeyboardEvent) {
 				event.preventDefault()
 				handleToolbarAction('underline')
 				break
-			case 'k':
-				event.preventDefault()
-				handleToolbarAction('link')
-				break
-			case 'l':
-				event.preventDefault()
-				handleToolbarAction('orderedList')
-				break
-			default:
-				break
 		}
 	}
 }
-function logInput(e: InputEvent) {
-	const target = e.target as HTMLElement
-	contentHtml = target.textContent || ''
-}
 </script>
 
 <template>
 	<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 w-100 grid">
-				<textarea v-if="isCodeView" v-model="contentHtml" @input="updateContent" />
+		<Toolbar
+			:config="config"
+			:selected-styles="selectedStyles"
+			@action="handleToolbarAction"
+		/>
+		<div class="editor-container" :class="{ 'split-view': isSplitView }">
+			<div class="content-area radius-05 p-1">
+				<textarea
+					v-if="isCodeView"
+					v-model="contentHtml"
+					class="html-editor"
+					@input="handleHtmlInput"
+				/>
 				<div
 					v-else
 					ref="editableContent"
@@ -158,119 +166,36 @@ function logInput(e: InputEvent) {
 					role="textbox"
 					aria-multiline="true"
 					tabindex="0"
-					@input="updateContent"
+					@input="updateContent()"
 					@keydown="handleKeyDown"
 				/>
 			</div>
-			<code
+			<div
 				v-if="isSplitView"
-				contenteditable="true"
-				class="preview-area w-100 radius-05 p-1"
-				@input="(e) => logInput(e as InputEvent)"
-				v-text="contentHtml"
-			/>
+				class="preview-area radius-05 p-1"
+			>
+				<pre><code v-text="contentHtml" /></pre>
+			</div>
 		</div>
 	</div>
 </template>
 
 <style scoped>
-@font-face {
-    font-family: 'FontWithASyntaxHighlighter';
-    font-style: normal;
-    font-weight: 400;
-    font-stretch: 100%;
-    font-display: swap;
-    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/FontWithASyntaxHighlighter-Regular.woff2) format('woff2')
-}
-
-@font-palette-values --myCustomPalette {
-  font-family: 'FontWithASyntaxHighlighter';
-  override-colors:
-    0 #6191c2, /* keywords, {} */
-    1 #75975d, /* comments */
-    2 yellow, /* literals */
-    3 #a3c19a, /* numbers */
-    4 lightblue, /* functions, [] */
-    5 orange, /* js others */
-    6 black, /* not in use */
-    7 #bc8abd, /* inside quotes, css properties, few chars */
-    8 #818181 /* few chars */
-  ;
-}
-.preview-area{
-	font-family: "FontWithASyntaxHighlighter", monospace;
-  	font-palette: --myCustomPalette;
-	background: var(--bgl-code-bg);
-	color: var(--bgl-code-color)
-
-}
 .rich-text-editor {
-	background: var(--input-bg);
-	margin-bottom: 0.5rem;
-	width: 100%;
-}
-.editableContent{
-	min-height: 100%;
-	white-space: pre-wrap;
-	outline: none;
+  background: var(--input-bg);
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
 }
-.content-area{
-	background: var(--bgl-richtext-color);
-}
-.content-area, .preview-area{
-	min-height: 200px;
-}
-.fullscreen-mode {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 9999;
-    background: var(--input-bg);
-    padding: 2rem;
-    overflow: auto;
-	border-radius: 0;
-}
-.fullscreen-mode .content-area{
-	height: calc(100vh - 5rem);
-	padding: 4rem !important;
-	max-width: 900px;
-	margin-inline: auto ;
-	overflow-y: auto;
-}
-.fullscreen-mode .toolbar{
-	max-width: 900px;
-	margin-inline: auto ;
-	/* border-bottom: 1px solid var(--border-color); */
-	/* margin-bottom: 2rem; */
-}
-
-/* [contenteditable='true'] {
-	  white-space: pre-wrap;
-	  word-wrap: break-word;
-	outline: none;
-	height: 100%;
-} */
-/*
 
 .editor-container {
   display: flex;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  overflow: hidden;
+  gap: 1rem;
 }
 
-.content-area,
-.preview-area {
+.content-area, .preview-area {
   flex: 1;
-  min-height: 300px;
-  padding: 10px;
-  overflow-y: auto;
-}
-
-.content-area:focus {
-  outline: none;
+  min-height: 200px;
+  background: var(--bgl-richtext-color);
 }
 
 .split-view .content-area,
@@ -278,24 +203,51 @@ function logInput(e: InputEvent) {
   width: 50%;
 }
 
+.editableContent {
+  min-height: 100%;
+  white-space: pre-wrap;
+  outline: none;
+}
+
+.html-editor {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  font-family: monospace;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+}
+
 .preview-area {
-  background-color: #f9f9f9;
-  border-left: 1px solid #ccc;
-} */
+  font-family: monospace;
+  white-space: pre-wrap;
+  overflow-x: auto;
+}
 
-/* @media (max-width: 768px) {
-  .split-view {
-    flex-direction: column;
-  }
+.preview-area code {
+  display: block;
+  padding: 1rem;
+}
 
-  .split-view .content-area,
-  .split-view .preview-area {
-    width: 100%;
-  }
+.fullscreen-mode {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  padding: 2rem;
+}
+
+.fullscreen-mode .editor-container {
+  height: calc(100vh - 8rem);
+}
 
-  .preview-area {
-    border-left: none;
-    border-top: 1px solid #ccc;
-  }
-} */
+.fullscreen-mode .content-area,
+.fullscreen-mode .preview-area {
+  height: 100%;
+  overflow-y: auto;
+}
 </style>

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 RichText } 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/plugins/bagel.ts

@@ -28,7 +28,7 @@ export interface BagelOptions {
 	availableLangs?: string[]
 	defaultLang?: string
 	language?: string
-	host: string
+	host?: string
 
 	onError?: (err: Error) => void