@bagelink/vue 0.0.986 → 0.0.992

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

@@ -1,253 +1,142 @@
-<script lang="ts" setup>
-import type { ToolbarConfig } from './richtext-types'
-import { useModal } from '@bagelink/vue'
-import { onMounted, watch, ref } from 'vue'
-import { useFormatting } from './formatting'
-import Toolbar from './Toolbar.vue'
+<script setup lang="ts">
+import type { ToolbarConfig } from './richTextTypes'
+import { useModal, CodeEditor } from '@bagelink/vue'
+import { watch } from 'vue'
+import Toolbar from './components/Toolbar.vue'
+import { useEditor } from './composables/useEditor'
+import { useEditorKeyboard } from './composables/useEditorKeyboard'
 
 const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig }>()
 const emit = defineEmits(['update:modelValue'])
 
+const iframe = $ref<HTMLIFrameElement>()
 const modal = useModal()
-const { applyFormatting, clearFormatting } = useFormatting(modal)
-
-const editableContent = ref<HTMLElement>()
-const defaultConfig: ToolbarConfig = [
-	'formatBlock',
-	'bold',
-	'italic',
-	'underline',
-	'fontSize',
-	'fontFamily',
-	'textColor',
-	'backgroundColor',
-	'alignLeft',
-	'alignCenter',
-	'alignRight',
-	'alignJustify',
-	'orderedList',
-	'unorderedList',
-	'indent',
-	'outdent',
-	'link',
-	'image',
-	'table',
-	'splitView',
-	'clear',
-	'fullScreen'
-]
-
-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.value)
-}
+const editor = useEditor()
 
-function handleHtmlInput(e: Event) {
-	const target = e.target as HTMLTextAreaElement
-	contentHtml.value = target.value
-	if (editableContent.value) {
-		editableContent.value.innerHTML = target.value
+async function initEditor() {
+	if (!iframe) {
+		setTimeout(initEditor, 100)
+		return
 	}
-	updateContent('html')
-}
-
-function updateToolbarHighlight() {
-	selectedStyles.value.clear()
-	const selection = window.getSelection()
-	if (!selection?.rangeCount) return
-
-	const range = selection.getRangeAt(0)
-	const element = range.commonAncestorContainer as HTMLElement
-	const parent = element.nodeType === 3 ? element.parentElement : element
+	editor.state.content = props.modelValue || ''
+	const doc = iframe.contentDocument || iframe.contentWindow?.document
+	if (!doc) return
 
-	if (!parent) return
+	doc.designMode = 'on'
+	doc.body.contentEditable = 'true'
 
-	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.value) return
+	const style = doc.createElement('style')
+	style.textContent = (await import('./editor.css?inline')).default
+	doc.head.appendChild(style)
 
-	if (['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'].includes(action)) {
-		value = action.replace('align', '').toLowerCase()
-	}
-
-	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()
-}
+	editor.init(doc, modal)
+	useEditorKeyboard(doc, (action, value) => {
+		editor.handleToolbarAction(action, value)
+	})
 
-function toggleFullScreen() {
-	const editor = document.querySelector('.rich-text-editor')
-	editor?.classList.toggle('fullscreen-mode')
+	doc.body.focus()
 }
 
 watch(() => props.modelValue, (newValue) => {
-	if (newValue !== contentHtml.value) {
-		contentHtml.value = newValue
-		if (editableContent.value) {
-			editableContent.value.innerHTML = newValue
-		}
+	if (newValue !== editor.state.content) {
+		editor.state.content = newValue
 	}
 })
 
-onMounted(() => {
-	if (editableContent.value) {
-		editableContent.value.innerHTML = contentHtml.value
-	}
-	document.addEventListener('selectionchange', updateToolbarHighlight)
+watch(() => editor.state.content, (newValue) => {
+	emit('update:modelValue', newValue)
 })
-
-// Keyboard shortcuts
-function handleKeyDown(event: KeyboardEvent) {
-	if (event.ctrlKey || event.metaKey) {
-		switch (event.key.toLowerCase()) {
-			case 'b':
-				event.preventDefault()
-				handleToolbarAction('bold')
-				break
-			case 'i':
-				event.preventDefault()
-				handleToolbarAction('italic')
-				break
-			case 'u':
-				event.preventDefault()
-				handleToolbarAction('underline')
-				break
-		}
-	}
-}
 </script>
 
 <template>
-	<div class="rich-text-editor rounded pt-05 px-05 pb-1">
+	<div class="rich-text-editor rounded pt-05 px-05 pb-075" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
 		<Toolbar
-			:config="config"
-			:selected-styles="selectedStyles"
-			@action="handleToolbarAction"
+			v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
+			@action="editor.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"
-					contenteditable="true"
-					class="editableContent"
-					role="textbox"
-					aria-multiline="true"
-					tabindex="0"
-					@input="updateContent()"
-					@keydown="handleKeyDown"
-				/>
-			</div>
-			<div
-				v-if="isSplitView"
-				class="preview-area radius-05 p-1"
-			>
-				<pre><code v-text="contentHtml" /></pre>
+		<div class="editor-container" :class="{ 'split-view': editor?.state.isSplitView }">
+			<div class="content-area radius-05">
+				<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" language="html"
+				@update:modelValue="editor.updateContent('html')"
+			/>
 		</div>
 	</div>
 </template>
 
 <style scoped>
 .rich-text-editor {
-  background: var(--input-bg);
-  border: 1px solid var(--border-color);
-  transition: all 0.3s ease;
+	background: var(--input-bg);
+	border: 1px solid var(--border-color);
+	transition: all 0.3s ease;
 }
 
 .editor-container {
-  display: flex;
-  gap: 1rem;
+	display: flex;
+	gap: 1rem;
 }
 
-.content-area, .preview-area {
-  flex: 1;
-  min-height: 200px;
-  background: var(--bgl-richtext-color);
+.content-area,
+.preview-area {
+	flex: 1;
+	min-height: 200px;
+	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 {
-  min-height: 100%;
-  white-space: pre-wrap;
-  outline: none;
+	width: 100%;
+	min-height: 240px;
+	height: 100%;
+	border: none;
+	outline: none;
+	background: transparent;
 }
 
 .html-editor {
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
-  font-family: monospace;
-  background: transparent;
-  border: none;
-  outline: none;
-  resize: none;
+	width: 100%;
+	height: 100%;
+	min-height: 200px;
+	font-family: monospace;
+	border: none;
+	outline: none;
+	resize: none;
+	color: white;
+	background-color: var(--bgl-black);
 }
 
 .preview-area {
-  font-family: monospace;
-  white-space: pre-wrap;
-  overflow-x: auto;
-}
-
-.preview-area code {
-  display: block;
-  padding: 1rem;
+	font-family: monospace;
+	white-space: pre-wrap;
+	overflow-x: auto;
 }
 
 .fullscreen-mode {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 9999;
-  padding: 2rem;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: 9999;
+	padding: 2rem;
 }
 
 .fullscreen-mode .editor-container {
-  height: calc(100vh - 8rem);
+	height: calc(100vh - 4rem);
 }
 
 .fullscreen-mode .content-area,
 .fullscreen-mode .preview-area {
-  height: 100%;
-  overflow-y: auto;
+	height: 100%;
+	overflow-y: auto;
+}
+.fullscreen-mode .code-editor{
+	height: 100% !important;
 }
 </style>

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

@@ -0,0 +1,77 @@
+import type { MaterialIcons } from '@bagelink/vue'
+
+export interface Modal {
+	showModalForm: (options: {
+		title: string
+		schema: any[]
+		onSubmit: (data: any) => void
+	}) => void
+}
+
+export interface EditorState {
+	isFullscreen: boolean
+	hasInit: boolean
+	isCodeView: boolean
+	isSplitView: boolean
+	selectedStyles: Set<string>
+	content: string
+	rangeCount: number
+	selection?: Selection | null
+	range?: Range | null
+	doc?: Document
+	modal?: Modal
+}
+
+export type FormattingCommand =
+	| 'bold'
+	| 'italic'
+	| 'underline'
+	| 'formatBlock'
+	| 'orderedList'
+	| 'unorderedList'
+	| 'link'
+	| 'image'
+	| 'youtube'
+	| 'table'
+	| 'splitView'
+	| 'codeView'
+
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+export type ToolbarConfigOption =
+	| FormattingCommand
+	| HeadingLevel
+	| 'separator'
+	| 'fullScreen'
+	| 'clear'
+	| 'mergeCells'
+	| 'splitCells'
+	| 'addRowBefore'
+	| 'addRowAfter'
+	| 'deleteRow'
+	| 'alignLeft'
+	| 'alignCenter'
+	| 'alignRight'
+	| 'alignJustify'
+	| 'indent'
+	| 'outdent'
+	| 'fontColor'
+	| 'bgColor'
+	| 'insertTable'
+	| 'deleteTable'
+	| 'insertRowAbove'
+	| 'insertRowBelow'
+	| 'insertColumnLeft'
+	| 'insertColumnRight'
+	| 'deleteColumn'
+	| 'undo'
+	| 'redo'
+
+export type ToolbarConfig = ToolbarConfigOption[]
+
+export interface ToolbarOption {
+	name: ToolbarConfigOption
+	label?: string
+	icon?: MaterialIcons
+	class?: string
+}

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

@@ -0,0 +1,98 @@
+import type { EditorState } from '../richTextTypes'
+
+export function formatting(state: EditorState) {
+	const text = (command: string) => {
+		const { doc, range, selection } = state
+		if (!doc || !range || !selection) return
+		let tag = ''
+		if (command === 'bold') tag = 'b'
+		if (command === 'italic') tag = 'i'
+		if (command === 'underline') tag = 'u'
+		if (command === 'emphasis') tag = 'em'
+		if (command === 'strong') tag = 'strong'
+
+		const relatedTags: { [key: string]: string[] } = {
+			b: ['strong'],
+			i: ['em'],
+			u: [],
+			em: ['i'],
+			strong: ['b']
+		}
+
+		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)
+			}
+			parent.parentNode?.removeChild(parent)
+		} else {
+			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)
+		})
+
+		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 { 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)
+
+		if (currentHeading) {
+			currentHeading.parentNode?.replaceChild(newElement, currentHeading)
+		} else {
+			range.insertNode(newElement)
+		}
+
+		selection.removeAllRanges()
+		range.setStart(container, startOffset)
+		range.setEnd(container, endOffset)
+		selection.addRange(range)
+	}
+	const list = (command: string) => {
+		const { doc, range } = state
+		if (!doc || !range) 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 (currentList) {
+			const content = range.extractContents()
+			const p = doc.createElement('p')
+			p.appendChild(content)
+			currentList.parentNode?.replaceChild(p, currentList)
+		} else {
+			const listEl = doc.createElement(listTag)
+			const li = doc.createElement('li')
+			const content = range.extractContents()
+			li.appendChild(content)
+			listEl.appendChild(li)
+			range.insertNode(listEl)
+		}
+	}
+	return { text, block, list }
+}

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

@@ -0,0 +1,42 @@
+import type { Modal } from '../richTextTypes'
+
+export function insertImage(modal: Modal, doc: Document, range: Range | null) {
+	if (!range) return
+
+	modal.showModalForm({
+		title: 'Upload Image',
+		schema: [
+			{ id: 'src', $el: 'file', attrs: { bindkey: 'url' } },
+			{ id: 'alt', $el: 'text', label: 'Alt Text' },
+		],
+		onSubmit: (data: { src: string, alt: string }) => {
+			if (data.src) {
+				const img = doc.createElement('img')
+				img.src = data.src
+				img.alt = data.alt
+				range.deleteContents()
+				range.insertNode(img)
+			}
+		}
+	})
+}
+
+export function insertLink(modal: Modal, doc: Document, range: Range | null) {
+	if (!range) return
+
+	modal.showModalForm({
+		title: 'Insert Link',
+		schema: [
+			{ id: 'url', $el: 'text', label: 'URL' },
+			{ id: 'openInNewTab', $el: 'check', label: 'Open in new tab' },
+		],
+		onSubmit: (data: { url: string, openInNewTab: boolean }) => {
+			if (data.url) {
+				const anchor = doc.createElement('a')
+				anchor.href = data.url
+				if (data.openInNewTab) anchor.target = '_blank'
+				range.surroundContents(anchor)
+			}
+		}
+	})
+}

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

@@ -0,0 +1,48 @@
+
+export function getSelection(state: any) {
+	return state.selection
+}
+
+export function getSelectionRange(state: any) {
+	return state.range
+}
+
+export function isStyleActive(style: string, doc: Document) {
+	const selection = doc.getSelection()
+	if (!selection || !selection.rangeCount) return false
+
+	const range = selection.getRangeAt(0)
+	const container = range.commonAncestorContainer
+	const parent = container.nodeType === 3 ? container.parentElement : container as Element
+
+	if (!parent) return false
+
+	const checkParent = (element: Element | null, tags: string[]): boolean => {
+		if (!element) return false
+		if (tags.includes(element.tagName.toLowerCase())) return true
+		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
+	}
+}

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

@@ -0,0 +1,81 @@
+import type { EditorState } from '../richTextTypes'
+
+export function insertTable(rows: number, cols: number, state: EditorState) {
+	if (!state.doc) return
+	const table = state.doc.createElement('table')
+	table.style.width = '100%'
+	table.style.borderCollapse = 'collapse'
+
+	for (let i = 0; i < rows; i++) {
+		const row = table.insertRow()
+		for (let j = 0; j < cols; j++) {
+			const cell = row.insertCell()
+			cell.innerHTML = '&nbsp;'
+		}
+	}
+	const { range } = state
+	if (range) {
+		range.insertNode(table)
+	} else {
+		state.doc.body.appendChild(table)
+	}
+}
+
+export function mergeCells(range: Range, doc: Document) {
+	const cells = Array.from(range.cloneContents().querySelectorAll('td'))
+	if (cells.length < 2) return
+
+	const firstCell = range.startContainer.parentElement?.closest('td')
+	if (!firstCell) return
+
+	firstCell.colSpan = cells.length
+	firstCell.innerHTML = cells.map(cell => cell.innerHTML).join(' ')
+
+	cells.slice(1).forEach((cell) => {
+		const actualCell = doc.getElementById(cell.id)
+		actualCell?.remove()
+	})
+}
+
+export function splitCell(range: Range, doc: Document) {
+	const cell = range.startContainer.parentElement?.closest('td')
+	if (!cell || !cell.colSpan || cell.colSpan === 1) return
+
+	const newCells = new Array(cell.colSpan - 1).fill(0).map(() => {
+		const newCell = doc.createElement('td')
+		newCell.style.border = '1px solid var(--border-color)'
+		newCell.style.padding = '8px'
+		newCell.innerHTML = '&nbsp;'
+		return newCell
+	})
+
+	cell.colSpan = 1
+	cell.insertAdjacentElement('afterend', newCells[0])
+	newCells.slice(1).forEach((newCell) => {
+		newCells[0].insertAdjacentElement('afterend', newCell)
+	})
+}
+
+export function addRow(position: 'before' | 'after', range: Range, doc: Document) {
+	const cell = range.startContainer.parentElement?.closest('td')
+	if (!cell) return
+
+	const row = cell.parentElement
+	const table = row?.parentElement
+	if (!row || !table) return
+
+	const newRow = row.cloneNode(true) as HTMLTableRowElement
+	Array.from(newRow.cells).forEach(cell => cell.innerHTML = '&nbsp;')
+
+	row.insertAdjacentElement(position === 'before' ? 'beforebegin' : 'afterend', newRow)
+}
+
+export function deleteRow(range: Range) {
+	const cell = range.startContainer.parentElement?.closest('td')
+	if (!cell) return
+
+	const row = cell.parentElement
+	if (!row) return
+
+	row.remove()
+}

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

@@ -1,5 +1,6 @@
 export { default as Checkbox } from './Checkbox.vue'
 export { default as CheckInput } from './CheckInput.vue'
+export { default as CodeEditor } from './CodeEditor/Index.vue'
 export { default as ColorPicker } from './ColorPicker.vue'
 export { default as DateInput } from './DateInput.vue'
 export { default as DatePicker } from './DatePicker.vue'