@bagelink/vue 0.0.986 → 0.0.992

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

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import type { ToolbarConfig, ToolbarConfigOption, ToolbarOption } from '../richTextTypes'
+import { Btn, Dropdown } from '@bagelink/vue'
+import { defaultToolbarConfig, toolbarOptions } from '../config'
+import GridBox from './gridBox.vue'
+
+const { config = defaultToolbarConfig, selectedStyles } = defineProps<{
+	config?: ToolbarConfig
+	selectedStyles: Set<string>
+}>()
+const emit = defineEmits(['action'])
+
+const configToOption = (action: ToolbarConfigOption) => toolbarOptions.find(option => option.name === action) as ToolbarOption
+
+function runAction(name: ToolbarConfigOption, value?: string) {
+	emit('action', name, value)
+}
+</script>
+
+<template>
+	<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
+		<template v-for="(action, index) in config.map(configToOption).filter(Boolean)" :key="index">
+			<Dropdown v-if="action.name === 'insertTable'" placement="bottom-start" thin flat icon="table">
+				<template #default="{ hide }">
+					<GridBox
+						:gridSize="5" @select="$event => {
+							runAction('insertTable', $event);
+							($event.target as any)?.blur();
+							hide()
+						}"
+					/>
+				</template>
+			</Dropdown>
+			<Btn
+				v-if="action.name !== 'separator'" v-tooltip="action.label" :icon="action.icon" thin flat
+				:aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]"
+				@click="runAction(action.name)"
+			/>
+			<span v-else-if="action.name === 'separator'" :key="`separator-${index}`" class="opacity-2 mb-025">|</span>
+		</template>
+	</div>
+</template>
+
+<style scoped>
+.toolbar :deep(.active) {
+	background: var(--bgl-primary);
+	color: white;
+}
+</style>
+
+<style scoped></style>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const emit = defineEmits(['select'])
+const fb = 1
+const base = 5
+const hoveredRow = $ref(fb)
+const hoveredCol = $ref(fb)
+
+const rowSize = $computed(() => {
+	const enlarge = Math.min(hoveredRow + 1, 20)
+	return hoveredRow > (base - 1) ? enlarge : base
+})
+const colSize = $computed(() => {
+	const enlarge = Math.min(hoveredCol + 1, 20)
+	return hoveredCol > (base - 1) ? enlarge : base
+})
+</script>
+
+<template>
+	<div class="grid grid-wrap p-05">
+		<div
+			v-for="row in rowSize" :key="`row-${row}`" class="flex" @mouseout="hoveredRow = fb; hoveredCol = fb"
+			@focusout="hoveredRow = fb; hoveredCol = fb"
+		>
+			<div
+				v-for="col in colSize" :key="`col-${col}`" role="button" tabindex="0" aria-label="Insert Table"
+				:style="{ width: '20px', height: '20px' }" class="flex pointer gap-025 tableBoxSelect"
+				:class="{ borderSelect: hoveredRow >= row && hoveredCol >= col }"
+				@mousemove="hoveredRow = row; hoveredCol = col" @click="emit('select', `${row}x${col}`)"
+			/>
+		</div>
+		<p class="txt-center txt-12 color-gray">
+			{{ hoveredRow }}x{{ hoveredCol }}
+		</p>
+	</div>
+</template>
+
+<style scoped>
+.tableBoxSelect::after {
+	content: '';
+	display: block;
+	width: calc(100% - 4px);
+	height:	calc(100% - 4px);
+	border: 1px solid var(--bgl-gray);
+	background: var(--bgl-gray-light);
+
+}
+.borderSelect::after {
+	border-color: var(--bgl-primary-tint);
+	background: var(--bgl-primary-light);
+}
+</style>

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

@@ -0,0 +1,215 @@
+import type { EditorState, Modal } from '../richTextTypes'
+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, insertTable } from '../utils/table'
+
+export function useEditor() {
+	const state = reactive<
+		EditorState
+	>({
+		isFullscreen: false,
+		hasInit: false,
+		isCodeView: false,
+		isSplitView: false,
+		selectedStyles: new Set<string>(),
+		rangeCount: 0,
+		content: '',
+	})
+
+	const updateListStyles = (styles: Set<string>) => {
+		if (state.selection?.rangeCount) {
+			const node = state.selection.getRangeAt(0).commonAncestorContainer
+			const parentElement = node.nodeType === 3 ? node.parentElement : node
+			if (parentElement) {
+				const list = (parentElement as Element).closest('ul, ol')
+				if (list) {
+					styles.add(
+						list.tagName.toLowerCase() === 'ul'
+							? 'unorderedList'
+							: 'orderedList'
+					)
+				}
+			}
+		}
+	}
+
+	const updateActiveStyles = () => {
+		if (!state.doc) return
+		const styles = new Set<string>()
+		const styleTypes = [
+			'bold',
+			'italic',
+			'underline',
+			'h1',
+			'h2',
+			'h3',
+			'h4',
+			'h5',
+			'h6',
+		]
+
+		styleTypes.forEach((style) => {
+			if (state.doc && isStyleActive(style, state.doc)) {
+				styles.add(style)
+			}
+		})
+
+		updateListStyles(styles)
+		state.selectedStyles = styles
+	}
+
+	const updateSelection = () => {
+		if (!state.doc) return
+		state.selection = state.doc.getSelection()
+		if (!state.selection) return
+
+		try {
+			if (!state.doc.body.contains(state.selection.anchorNode)) {
+				state.doc.body.focus()
+				return
+			}
+
+			state.rangeCount = state.selection.rangeCount
+			if (!state.rangeCount) {
+				const range = state.doc.createRange()
+				range.selectNodeContents(state.doc.body)
+				range.collapse(false)
+				state.selection.removeAllRanges()
+				state.selection.addRange(range)
+			}
+			state.range = state.selection.getRangeAt(0).cloneRange()
+			updateActiveStyles()
+		} catch (e) {
+			console.warn('Selection error:', e)
+			state.selection = null
+			state.range = null
+			state.rangeCount = 0
+			state.selectedStyles = new Set()
+		}
+	}
+
+	const format = () => formatting(state)
+
+	const updateContent = (type?: string) => {
+		if (!state.doc) return
+		if (type === 'html') {
+			state.doc.body.innerHTML = state.content
+		} else {
+			state.content = state.doc.body.innerHTML
+		}
+		updateActiveStyles()
+	}
+
+	const handleToolbarAction = (action: string, value?: string) => {
+		if (!state.doc) return
+		if (action === 'fullScreen') {
+			state.isFullscreen = !state.isFullscreen
+			return
+		}
+		if (action === 'splitView') {
+			state.isSplitView = !state.isSplitView
+			return
+		}
+		if (action === 'codeView') {
+			state.isCodeView = !state.isCodeView
+			return
+		}
+
+		const applyFormatting = (command: string, value?: string) => {
+			const { selection, range } = state
+			if (!state.doc || !state.modal || !selection || !range) return
+
+			// Check if there is a selection or just a caret position
+			const isCaret = selection.isCollapsed
+
+			if (!state.doc.body.contains(selection.anchorNode)) {
+				state.doc.body.focus()
+			}
+			console.log(command)
+			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)
+					break
+				case 'splitCells':
+					if (isCaret) return
+					splitCell(range, state.doc)
+					break
+				case 'addRowBefore':
+				case 'addRowAfter':
+					if (isCaret) return
+					addRow(
+						command === 'addRowBefore' ? 'before' : 'after',
+						range,
+						state.doc
+					)
+					break
+				case 'deleteRow':
+					if (isCaret) return
+					deleteRow(range)
+					break
+				case 'bold':
+				case 'italic':
+				case 'underline':
+					format().text(command)
+					break
+				case 'orderedList':
+				case 'unorderedList':
+					format().list(command)
+					break
+				case 'image':
+					insertImage(state.modal, state.doc, range)
+					break
+				// case 'youtube':
+				// 	if (isCaret) return
+				// 	insertImage(state.modal, state.doc, range)
+				// 	break
+				case 'link':
+					if (isCaret) return
+					insertLink(state.modal, state.doc, range)
+					break
+				default:
+					if (/^h[1-6]$/.test(command)) {
+						format().block(command, value || command)
+					}
+			}
+		}
+		state.doc.body.focus()
+		applyFormatting(action, value)
+		updateContent()
+		updateActiveStyles()
+	}
+	const setupEventListeners = () => {
+		if (!state.doc) return
+		state.doc.addEventListener('selectionchange', () => { updateSelection() })
+		state.doc.addEventListener('input', () => { updateContent() })
+		state.doc.addEventListener('mouseup', () => { updateSelection() })
+		state.doc.addEventListener('keyup', (e) => {
+			if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+				updateSelection()
+			}
+		})
+	}
+
+	const init = (doc: Document, modal: Modal) => {
+		state.doc = doc
+		state.modal = modal
+		setupEventListeners()
+		updateContent('html')
+		state.hasInit = true
+	}
+
+	return {
+		state,
+		init,
+		handleToolbarAction,
+		updateContent,
+	}
+}

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

@@ -0,0 +1,21 @@
+
+export function useEditorKeyboard(doc: Document, handleToolbarAction: (action: string, value?: string) => void): void {
+  doc.addEventListener('keydown', (e) => {
+    if (e.ctrlKey || e.metaKey) {
+      switch (e.key) {
+        case 'b':
+          e.preventDefault()
+          handleToolbarAction('bold')
+          break
+        case 'i':
+          e.preventDefault()
+          handleToolbarAction('italic')
+          break
+        case 'u':
+          e.preventDefault()
+          handleToolbarAction('underline')
+          break
+      }
+    }
+  })
+}

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

@@ -0,0 +1,73 @@
+import type { ToolbarConfig, ToolbarOption } from './richTextTypes'
+
+export const tableTools: ToolbarConfig = [
+	'mergeCells',
+	'splitCells',
+	'addRowBefore',
+	'addRowAfter',
+	'deleteRow'
+]
+
+export const defaultToolbarConfig: ToolbarConfig = [
+	'h2',
+	'h3',
+	'h4',
+	'h5',
+	'h6',
+	'separator',
+	'bold',
+	'italic',
+	'underline',
+	'separator',
+	'orderedList',
+	'unorderedList',
+	'separator',
+	'link',
+	'image',
+	'youtube',
+	'separator',
+	'splitView',
+	'clear',
+	'insertTable',
+	// ...tableTools,
+	'fullScreen',
+]
+
+export const toolbarOptions: ToolbarOption[] = [
+	{ name: 'h2', label: 'h2', icon: 'format_h2' },
+	{ name: 'h3', label: 'h3', icon: 'format_h3' },
+	{ name: 'h4', label: 'h4', icon: 'format_h4' },
+	{ name: 'h5', label: 'h5', icon: 'format_h5' },
+	{ name: 'h6', label: 'h6', icon: 'format_h6' },
+	{ name: 'bold', label: 'Bold', icon: 'format_bold' },
+	{ name: 'italic', label: 'Italic', icon: 'format_italic' },
+	{ name: 'underline', label: 'Underline', icon: 'format_underlined' },
+	{ name: 'orderedList', label: 'Ordered List', icon: 'format_list_numbered' },
+	{ name: 'unorderedList', label: 'Unordered List', icon: 'format_list_bulleted' },
+	{ name: 'link', label: 'Link', icon: 'add_link' },
+	{ name: 'image', label: 'Image', icon: 'add_photo_alternate' },
+	{ name: 'youtube', label: 'YouTube', icon: 'youtube_activity' },
+	{ name: 'splitView', label: 'Split View', icon: 'code' },
+	{ name: 'clear', label: 'Clear Formatting', icon: 'format_clear' },
+	{ name: 'alignLeft', label: 'Align Left', icon: 'format_align_left' },
+	{ name: 'alignCenter', label: 'Align Center', icon: 'format_align_center' },
+	{ name: 'alignRight', label: 'Align Right', icon: 'format_align_right' },
+	{ name: 'alignJustify', label: 'Align Justify', icon: 'format_align_justify' },
+	{ name: 'indent', label: 'Indent', icon: 'format_indent_increase' },
+	{ name: 'outdent', label: 'Outdent', icon: 'format_indent_decrease' },
+	{ name: 'fontColor', label: 'Font Color', icon: 'format_color_text' },
+	{ name: 'bgColor', label: 'Background Color', icon: 'format_color_fill' },
+	{ name: 'insertTable', label: 'Insert Table', icon: 'table' },
+	{ name: 'deleteTable', label: 'Delete Table', icon: 'table_rows' },
+	{ name: 'insertRowAbove', label: 'Insert Row Above', icon: 'table_rows' },
+	{ name: 'insertRowBelow', label: 'Insert Row Below', icon: 'table_rows' },
+	{ name: 'deleteRow', label: 'Delete Row', icon: 'table_rows' },
+	{ name: 'insertColumnLeft', label: 'Insert Column Left', icon: 'add_column_left' },
+	{ name: 'insertColumnRight', label: 'Insert Column Right', icon: 'add_column_right' },
+	{ name: 'deleteColumn', label: 'Delete Column', icon: 'view_column' },
+	{ name: 'separator' },
+	{ name: 'undo', label: 'Undo', icon: 'undo' },
+	{ name: 'redo', label: 'Redo', icon: 'redo' },
+	{ name: 'separator' },
+	{ name: 'fullScreen', label: 'Full Screen', icon: 'fullscreen', class: 'ms-auto' },
+]

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

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