@bagelink/vue 0.0.988 → 0.0.996

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

@@ -3,7 +3,7 @@ import { reactive } from 'vue'
 import { formatting } from '../utils/formatting'
 import { insertImage, insertLink } from '../utils/media'
 import { isStyleActive } from '../utils/selection'
-import { addRow, deleteRow, mergeCells, splitCell } from '../utils/table'
+import { addRow, deleteRow, mergeCells, splitCell, insertTable } from '../utils/table'
 
 export function useEditor() {
 	const state = reactive<
@@ -48,6 +48,11 @@ export function useEditor() {
 			'h4',
 			'h5',
 			'h6',
+			'blockquote',
+			'table',
+			'p',
+			'ol',
+			'li'
 		]
 
 		styleTypes.forEach((style) => {
@@ -70,7 +75,6 @@ export function useEditor() {
 				state.doc.body.focus()
 				return
 			}
-
 			state.rangeCount = state.selection.rangeCount
 			if (!state.rangeCount) {
 				const range = state.doc.createRange()
@@ -127,8 +131,13 @@ export function useEditor() {
 			if (!state.doc.body.contains(selection.anchorNode)) {
 				state.doc.body.focus()
 			}
-
+			console.log('command', command, value)
 			switch (command) {
+				case 'insertTable': {
+					const [rows, cols] = value?.split('x').map(Number) || [3, 3]
+					insertTable(rows, cols, state)
+					break
+				}
 				case 'mergeCells':
 					if (isCaret) return
 					mergeCells(range, state.doc)
@@ -155,18 +164,29 @@ export function useEditor() {
 				case 'underline':
 					format().text(command)
 					break
+				case 'clear':{
+					format().clear()
+					break
+				}
 				case 'orderedList':
 				case 'unorderedList':
 					format().list(command)
 					break
 				case 'image':
-				case 'youtube':
-					if (isCaret) return
-					insertImage(state.modal, state.doc, range)
+					insertImage(state.modal, state)
 					break
+				// case 'youtube':
+				// 	if (isCaret) return
+				// 	insertImage(state.modal, state.doc, range)
+				// 	break
 				case 'link':
 					if (isCaret) return
-					insertLink(state.modal, state.doc, range)
+					insertLink(state.modal, state)
+					break
+
+				case 'blockquote':
+				case 'p':
+					format().block(command, value || command)
 					break
 				default:
 					if (/^h[1-6]$/.test(command)) {

package/src/components/form/inputs/RichText/config.ts

@@ -19,17 +19,19 @@ export const defaultToolbarConfig: ToolbarConfig = [
 	'italic',
 	'underline',
 	'separator',
+	'p',
+	'blockquote',
 	'orderedList',
 	'unorderedList',
 	'separator',
 	'link',
 	'image',
-	'youtube',
+	// 'youtube',
 	'separator',
 	'splitView',
 	'clear',
 	'insertTable',
-	...tableTools, // Adding table tools to the default toolbar
+	// ...tableTools,
 	'fullScreen',
 ]
 
@@ -39,6 +41,8 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ name: 'h4', label: 'h4', icon: 'format_h4' },
 	{ name: 'h5', label: 'h5', icon: 'format_h5' },
 	{ name: 'h6', label: 'h6', icon: 'format_h6' },
+	{ name: 'p', label: 'Paragraph', icon: 'format_paragraph' },
+	{ name: 'blockquote', label: 'Blockquote', icon: 'format_quote' },
 	{ name: 'bold', label: 'Bold', icon: 'format_bold' },
 	{ name: 'italic', label: 'Italic', icon: 'format_italic' },
 	{ name: 'underline', label: 'Underline', icon: 'format_underlined' },

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

@@ -1,25 +1,25 @@
 body {
-  margin: 0;
-  padding: 8px;
-  min-height: 200px;
-  font-family: sans-serif;
-  color: inherit;
-  background: transparent;
+	margin: 0;
+	padding: 8px;
+	min-height: 200px;
+	font-family: sans-serif;
+	color: inherit;
+	background: transparent;
 }
 
 table {
-  border-collapse: collapse;
-  margin-bottom: 1rem;
+	border-collapse: collapse;
+	margin-bottom: 1rem;
 }
 
 th,
 td {
-  padding: 1rem;
-  text-align: left;
-  border: 1px solid #ddd;
-  line-height: 1.5;
+	padding: 1rem;
+	text-align: left;
+	border: 1px solid #2a2a2a;
+	line-height: 1.5;
 }
 
 th {
-  background-color: #f4f4f4;
-}
+	background-color: #f4f4f4;
+}

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

@@ -40,6 +40,7 @@ async function initEditor() {
 watch(() => props.modelValue, (newValue) => {
 	if (newValue !== editor.state.content) {
 		editor.state.content = newValue
+		editor.updateContent('html')
 	}
 })
 
@@ -49,7 +50,7 @@ watch(() => editor.state.content, (newValue) => {
 </script>
 
 <template>
-	<div class="rich-text-editor rounded pt-05 px-05 pb-1" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
+	<div class="rich-text-editor rounded pt-05 px-05 pb-075" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
 		<Toolbar
 			v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
 			@action="editor.handleToolbarAction"
@@ -59,14 +60,11 @@ watch(() => editor.state.content, (newValue) => {
 				<iframe id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" @load="initEditor" />
 			</div>
 			<CodeEditor
-				v-if="editor?.state.isSplitView" v-model="editor.state.content" :languages="['html']"
+				v-if="editor?.state.isSplitView" v-model="editor.state.content" language="html"
 				@update:modelValue="editor.updateContent('html')"
 			/>
 		</div>
 	</div>
-	<pre wrap>
-	{{ editor.state }}
-	</pre>
 </template>
 
 <style scoped>
@@ -88,14 +86,15 @@ watch(() => editor.state.content, (newValue) => {
 	background: var(--bgl-richtext-color);
 }
 
-.split-view .content-area,
-.split-view .preview-area {
-	width: 50%;
+.split-view {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
 }
 
 .editableContent {
 	width: 100%;
-	min-height: 200px;
+	min-height: 240px;
+	height: 100%;
 	border: none;
 	outline: none;
 	background: transparent;
@@ -130,7 +129,7 @@ watch(() => editor.state.content, (newValue) => {
 }
 
 .fullscreen-mode .editor-container {
-	height: calc(100vh - 8rem);
+	height: calc(100vh - 4rem);
 }
 
 .fullscreen-mode .content-area,
@@ -138,4 +137,7 @@ watch(() => editor.state.content, (newValue) => {
 	height: 100%;
 	overflow-y: auto;
 }
+.fullscreen-mode .code-editor{
+	height: 100% !important;
+}
 </style>

package/src/components/form/inputs/RichText/richTextTypes.d.ts

@@ -41,6 +41,8 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 export type ToolbarConfigOption =
 	| FormattingCommand
 	| HeadingLevel
+	| 'p'
+	| 'blockquote'
 	| 'separator'
 	| 'fullScreen'
 	| 'clear'

package/src/components/form/inputs/RichText/utils/formatting.ts

@@ -1,9 +1,113 @@
 import type { EditorState } from '../richTextTypes'
 
 export function formatting(state: EditorState) {
+	const { doc, range, selection } = state
+	function setRangeAndSelect(node: Node, start: number, end: number) {
+		if (!range) return
+		range.setStart(node, start)
+		range.setEnd(node, end)
+	}
+	const wrapWithTag = (content: string, tag: string): HTMLElement => {
+		const wrapper = doc!.createElement(tag)
+		wrapper.textContent = content
+		return wrapper
+	}
+
+	const createBlockElement = (tag: string, content: DocumentFragment): HTMLElement => {
+		const block = doc!.createElement(tag)
+		block.appendChild(content)
+		return block
+	}
+	const clear = () => {
+		if (!doc || !range || !selection) return
+
+		const inlineTags = ['b', 'i', 'u', 'strong', 'em']
+
+		const isInlineTag = (el: HTMLElement | null) => el && inlineTags.includes(el.tagName.toLowerCase())
+
+		if (range.collapsed) {
+			// No action if the selection is collapsed
+			return
+		}
+
+		// Extract the selected content
+		const selectedContent = range.extractContents()
+
+		// Helper function to recursively clean inline tags
+		const cleanInlineTags = (node: Node): Node => {
+			if (node.nodeType === 1 && isInlineTag(node as HTMLElement)) {
+				// Inline element: replace it with its children
+				const fragment = doc.createDocumentFragment()
+				let child = node.firstChild // Start with the first child
+				while (child) {
+					const { nextSibling } = child // Store the next sibling before appending
+					fragment.appendChild(cleanInlineTags(child))
+					child = nextSibling // Move to the next sibling
+				}
+				return fragment
+			} else if (node.nodeType === 1) {
+				// Non-inline element: clean its children
+				const element = node.cloneNode(false) as HTMLElement
+				let child = node.firstChild // Start with the first child
+				while (child) {
+					const { nextSibling } = child // Store the next sibling before appending
+					element.appendChild(cleanInlineTags(child))
+					child = nextSibling // Move to the next sibling
+				}
+				return element
+			} else if (node.nodeType === 3) {
+				// Text node: return as is
+				return node
+			}
+			return doc.createTextNode('') // Ignore other node types
+		}
+
+		// Clean the extracted content
+		const fragment = doc.createDocumentFragment()
+		Array.from(selectedContent.childNodes).forEach((child) => {
+			const cleanedChild = cleanInlineTags(child)
+			if (cleanedChild.nodeType === 11) {
+				// If it's a DocumentFragment, append its children directly
+				fragment.appendChild(cleanedChild)
+			} else {
+				fragment.appendChild(cleanedChild)
+			}
+		})
+
+		// Replace the range content with the cleaned content
+		range.deleteContents()
+		range.insertNode(fragment)
+
+		// Normalize the DOM (merge adjacent text nodes)
+		const normalizeDom = (node: Node) => {
+			if (node.nodeType === 3 && node.nextSibling?.nodeType === 3) {
+				// Merge adjacent text nodes
+				if (node.textContent && node.nextSibling.textContent) {
+					node.textContent += node.nextSibling.textContent
+				}
+				node.parentNode?.removeChild(node.nextSibling)
+			} else if (node.nodeType === 1) {
+				// Recursively normalize child nodes
+				Array.from(node.childNodes).forEach((child) => {
+					normalizeDom(child)
+				})
+			}
+		}
+
+		Array.from(fragment.childNodes).forEach((child) => {
+			normalizeDom(child)
+		})
+
+		// Update the selection to cover the cleaned content
+		selection.removeAllRanges()
+		range.selectNodeContents(fragment)
+		selection.addRange(range)
+	}
+
 	const text = (command: string) => {
-		const { doc, range, selection } = state
 		if (!doc || !range || !selection) return
+		const { startOffset, endOffset } = range
+
 		let tag = ''
 		if (command === 'bold') tag = 'b'
 		if (command === 'italic') tag = 'i'
@@ -14,52 +118,95 @@ export function formatting(state: EditorState) {
 		const relatedTags: { [key: string]: string[] } = {
 			b: ['strong'],
 			i: ['em'],
-			u: [],
+			u: ['u'],
 			em: ['i'],
-			strong: ['b']
+			strong: ['b'],
+		}
+
+		const isTagMatch = (el: HTMLElement | null) => el
+			&& (el.tagName.toLowerCase() === tag || relatedTags[tag].includes(el.tagName.toLowerCase()))
+
+		if (range.collapsed) {
+			// Handle collapsed range
+			const container = range.commonAncestorContainer
+			const parent = container.parentElement
+			if (parent && isTagMatch(parent)) {
+				const textNode = doc.createTextNode(parent.textContent || '')
+				parent.parentNode?.replaceChild(textNode, parent)
+				range.selectNodeContents(textNode)
+				selection.removeAllRanges()
+				setRangeAndSelect(textNode, startOffset, endOffset)
+				selection.addRange(range)
+			}
+			return
 		}
 
-		const selectedContent = range.extractContents()
-		const wrapper = doc.createElement(tag)
-		wrapper.appendChild(selectedContent)
 		const container = range.commonAncestorContainer
 		const parent = container.parentElement
 
-		if (parent && (parent.tagName.toLowerCase() === tag || relatedTags[tag].includes(parent.tagName.toLowerCase()))) {
-			while (wrapper.firstChild) {
-				parent.parentNode?.insertBefore(wrapper.firstChild, parent)
+		if (parent && isTagMatch(parent)) {
+			// Split text content into three parts: before, selected, and after
+			const parentText = parent.textContent || ''
+			const beforeText = parentText.substring(0, range.startOffset - parentText.indexOf(parent.textContent || ''))
+			const selectedText = parentText.substring(range.startOffset, range.endOffset)
+			const afterText = parentText.substring(range.endOffset)
+
+			// Create text nodes for before, selected, and after
+			if (beforeText) {
+				const beforeNode = wrapWithTag(beforeText, tag)
+				parent.parentNode?.insertBefore(beforeNode, parent)
+			}
+
+			// Add unwrapped selected text
+			const unwrappedTextNode = doc.createTextNode(selectedText)
+			parent.parentNode?.insertBefore(unwrappedTextNode, parent)
+
+			if (afterText) {
+				const afterNode = wrapWithTag(afterText, tag)
+				parent.parentNode?.insertBefore(afterNode, parent)
 			}
+
+			// Remove the original parent node
 			parent.parentNode?.removeChild(parent)
+
+			// Reselect the unwrapped text
+			range.selectNode(unwrappedTextNode)
 		} else {
+			// Standard case: wrap the selection
+			const selectedContent = range.extractContents()
+			const wrapper = doc.createElement(tag)
+			wrapper.appendChild(selectedContent)
 			range.insertNode(wrapper)
-		}
 
-		const nestedTags = wrapper.querySelectorAll(`${tag},${(relatedTags[tag] || []).join(',')}`)
-		nestedTags.forEach((nestedTag) => {
-			while (nestedTag.firstChild) {
-				nestedTag.parentNode?.insertBefore(nestedTag.firstChild, nestedTag)
-			}
-			nestedTag.parentNode?.removeChild(nestedTag)
-		})
+			// Clean up nested tags
+			const nestedTags = wrapper.querySelectorAll(`${tag},${(relatedTags[tag] || []).join(',')}`)
+			nestedTags.forEach((nestedTag) => {
+				while (nestedTag.firstChild) {
+					nestedTag.parentNode?.insertBefore(nestedTag.firstChild, nestedTag)
+				}
+				nestedTag.parentNode?.removeChild(nestedTag)
+			})
+
+			// Reselect the wrapped content
+			range.selectNodeContents(wrapper)
+		}
 
 		selection.removeAllRanges()
 		selection.addRange(range)
 	}
 	const block = (command: string, value: string) => {
-		const { doc, range, selection } = state
 		if (!doc || !range || !selection) return
 		const container = range.commonAncestorContainer
 		const parent = container.nodeType === 3 ? container.parentElement : (container as Element)
 		if (!parent) return
 
-		const currentHeading = parent.closest('p,h1,h2,h3,h4,h5,h6')
+		const currentHeading = parent.closest('p,h1,h2,h3,h4,h5,h6,blockquote')
 		const { startOffset, endOffset } = range
 		const blockEl = currentHeading || parent.closest('p,h1,h2,h3,h4,h5,h6') || parent
 		range.selectNodeContents(blockEl)
 
 		const content = range.extractContents()
-		const newElement = doc.createElement(currentHeading && currentHeading.tagName.toLowerCase() === value ? 'p' : value)
-		newElement.appendChild(content)
+		const newElement = createBlockElement(value, content)
 
 		if (currentHeading) {
 			currentHeading.parentNode?.replaceChild(newElement, currentHeading)
@@ -68,31 +215,131 @@ export function formatting(state: EditorState) {
 		}
 
 		selection.removeAllRanges()
-		range.setStart(container, startOffset)
-		range.setEnd(container, endOffset)
+		setRangeAndSelect(container, startOffset, endOffset)
 		selection.addRange(range)
 	}
 	const list = (command: string) => {
-		const { doc, range } = state
-		if (!doc || !range) return
+		if (!doc || !range || !selection) return
+
 		const listTag = command === 'orderedList' ? 'ol' : 'ul'
 		const container = range.commonAncestorContainer
 		const parent = container.nodeType === 3 ? container.parentElement : (container as Element)
 		const currentList = parent?.closest('ul,ol')
 
+		if (!parent) return
+
+		// Expand range to include the entire list item if the caret is inside one
+		const listItem = parent.closest('li')
+		if (listItem) {
+			const listParent = listItem.parentElement // The <ol> or <ul>
+			if (!listParent) return
+
+			// Create new fragments for before and after the selected list item
+			const beforeFragment = doc.createDocumentFragment()
+			const afterFragment = doc.createDocumentFragment()
+
+			let currentNode = listParent.firstChild
+			let isBefore = true
+
+			while (currentNode) {
+				if (currentNode === listItem) {
+					isBefore = false // Mark as "after" once we reach the selected item
+				} else if (isBefore) {
+					beforeFragment.appendChild(currentNode.cloneNode(true))
+				} else {
+					afterFragment.appendChild(currentNode.cloneNode(true))
+				}
+				currentNode = currentNode.nextSibling
+			}
+
+			// Convert the selected list item to a standalone block (e.g., <p>)
+			const standaloneBlock = doc.createElement('p')
+			while (listItem.firstChild) {
+				standaloneBlock.appendChild(listItem.firstChild)
+			}
+
+			// Replace the original list with the split fragments and the standalone block
+			const grandParent = listParent.parentNode
+			if (!grandParent) return
+
+			if (beforeFragment.childNodes.length > 0) {
+				const newListBefore = doc.createElement(listParent.tagName.toLowerCase())
+				newListBefore.appendChild(beforeFragment)
+				grandParent.insertBefore(newListBefore, listParent)
+			}
+
+			grandParent.insertBefore(standaloneBlock, listParent)
+
+			if (afterFragment.childNodes.length > 0) {
+				const newListAfter = doc.createElement(listParent.tagName.toLowerCase())
+				newListAfter.appendChild(afterFragment)
+				grandParent.insertBefore(newListAfter, listParent.nextSibling)
+			}
+
+			// Remove the original list
+			grandParent.removeChild(listParent)
+
+			// Update the selection
+			selection.removeAllRanges()
+			range.selectNodeContents(standaloneBlock)
+			selection.addRange(range)
+
+			return
+		}
+
+		// Fallback for toggling list behavior (same as previous implementation)
+		const startBlock = parent.closest('p,h1,h2,h3,h4,h5,h6,blockquote') || parent
+		const endBlock = range.endContainer.nodeType === 3
+			? (range.endContainer.parentElement?.closest('p,h1,h2,h3,h4,h5,h6,blockquote') || range.endContainer.parentElement)
+			: (range.endContainer as Element)
+
+		const blocks = []
+		let currentBlock = startBlock
+		while (currentBlock) {
+			blocks.push(currentBlock)
+			if (currentBlock === endBlock) break
+			currentBlock = currentBlock.nextElementSibling as Element
+		}
+
 		if (currentList) {
-			const content = range.extractContents()
-			const p = doc.createElement('p')
-			p.appendChild(content)
-			currentList.parentNode?.replaceChild(p, currentList)
+			const fragment = doc.createDocumentFragment()
+			blocks.forEach((block) => {
+				const paragraph = doc.createElement('p')
+				while (block.firstChild) {
+					paragraph.appendChild(block.firstChild)
+				}
+				fragment.appendChild(paragraph)
+			})
+
+			const listParent = currentList.parentNode
+			if (listParent) {
+				listParent.insertBefore(fragment, currentList.nextSibling)
+
+				if (!currentList.querySelector('li')) {
+					listParent.removeChild(currentList)
+				}
+			}
+
+			selection.removeAllRanges()
+			range.selectNodeContents(fragment)
+			selection.addRange(range)
 		} else {
 			const listEl = doc.createElement(listTag)
-			const li = doc.createElement('li')
-			const content = range.extractContents()
-			li.appendChild(content)
-			listEl.appendChild(li)
+
+			blocks.forEach((block) => {
+				const li = doc.createElement('li')
+				while (block.firstChild) {
+					li.appendChild(block.firstChild)
+				}
+				listEl.appendChild(li)
+			})
+
 			range.insertNode(listEl)
+
+			selection.removeAllRanges()
+			range.selectNodeContents(listEl)
+			selection.addRange(range)
 		}
 	}
-	return { text, block, list }
+	return { text, block, list, clear }
 }

package/src/components/form/inputs/RichText/utils/media.ts

@@ -1,7 +1,8 @@
-import type { Modal } from '../richTextTypes'
+import type { EditorState, Modal } from '../richTextTypes'
 
-export function insertImage(modal: Modal, doc: Document, range: Range | null) {
-	if (!range) return
+export function insertImage(modal: Modal, state: EditorState) {
+	const { range, doc } = state
+	if (!range || !doc) return
 
 	modal.showModalForm({
 		title: 'Upload Image',
@@ -14,15 +15,17 @@ export function insertImage(modal: Modal, doc: Document, range: Range | null) {
 				const img = doc.createElement('img')
 				img.src = data.src
 				img.alt = data.alt
-				range.deleteContents()
+				// range.deleteContents()
+				range.collapse(false)
 				range.insertNode(img)
 			}
 		}
 	})
 }
 
-export function insertLink(modal: Modal, doc: Document, range: Range | null) {
-	if (!range) return
+export function insertLink(modal: Modal, state: EditorState) {
+	const { range, doc } = state
+	if (!range || !doc) return
 
 	modal.showModalForm({
 		title: 'Insert Link',

package/src/components/form/inputs/RichText/utils/selection.ts

@@ -1,4 +1,3 @@
-
 export function getSelection(state: any) {
 	return state.selection
 }
@@ -23,26 +22,11 @@ export function isStyleActive(style: string, doc: Document) {
 		return checkParent(element.parentElement, tags)
 	}
 
-	switch (style) {
-		case 'bold':
-			return checkParent(parent, ['strong', 'b'])
-		case 'italic':
-			return checkParent(parent, ['em', 'i'])
-		case 'underline':
-			return checkParent(parent, ['u'])
-		case 'h1':
-			return checkParent(parent, ['h1'])
-		case 'h2':
-			return checkParent(parent, ['h2'])
-		case 'h3':
-			return checkParent(parent, ['h3'])
-		case 'h4':
-			return checkParent(parent, ['h4'])
-		case 'h5':
-			return checkParent(parent, ['h5'])
-		case 'h6':
-			return checkParent(parent, ['h6'])
-		default:
-			return false
+	const styleTags: { [key: string]: string[] } = {
+		bold: ['strong', 'b'],
+		italic: ['em', 'i'],
+		underline: ['u'],
 	}
+
+	return checkParent(parent, styleTags[style] ?? [style])
 }