@bagelink/vue 0.0.1025 → 0.0.1031

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1025",
+  "version": "0.0.1031",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Image.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Skeleton, normalizeURL, normalizeDimension, appendScript } from '@bagelink/vue'
+import { Skeleton, normalizeDimension, appendScript } from '@bagelink/vue'
 import { watch } from 'vue'
 
 declare global {
@@ -23,7 +23,6 @@ async function loadImage(src: string) {
 		imageSrc = null
 		return
 	}
-	src = normalizeURL(src)
 	const ext = src.split('.').pop()?.toLowerCase().split('?').shift()
 
 	if (ext === 'heic') {

package/src/components/ToolBar.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+	<div class="bg-red">
+		123
+	</div>
+</template>

package/src/components/form/inputs/NumberInput.vue

@@ -104,7 +104,11 @@ watch(() => modelValue, (newVal) => {
 					v-model.trim="formattedValue"
 					v-pattern.number
 					type="text"
-					:class="{ 'txt-center': center, 'min0': layout }"
+					:class="{
+						'txt-center': center,
+						'min0': layout,
+						'bgl-number-input': layout !== 'vertical' && layout !== 'horizontal',
+					}"
 					:placeholder="placeholder || label"
 					:disabled
 					:required
@@ -160,4 +164,7 @@ watch(() => modelValue, (newVal) => {
 .bgl-big-ctrl-num-btn{
 	width: 100% !important;
 }
+.bgl-number-input{
+	padding-inline-end: 1.75rem !important;
+}
 </style>

package/src/components/form/inputs/RangeInput.vue

@@ -2,9 +2,9 @@
 import { watch } from 'vue'
 
 interface props {
-	min: number
-	max: number
 	modelValue: number | [number, number]
+	min?: number
+	max?: number
 	step?: number
 	required?: boolean
 	label?: string
@@ -41,7 +41,8 @@ const toPercentage = $computed(() => ((validTo - min) / (max - min)) * 100)
 
 const rangeStyle = $computed(() => {
 	const width = ((validTo - validFrom) / (max - min)) * 100
-	if (rtl || isRange)	return { left: `${fromPercentage}%`, width: `${width}%` }
+	if (isRange)	return { left: `${fromPercentage}%`, width: `${width}%` }
+	if (rtl) return { left: `${width}%`, width: `${fromPercentage}%` }
 	return { right: `${width}%`, width: `${fromPercentage}%` }
 })
 </script>
@@ -49,7 +50,7 @@ const rangeStyle = $computed(() => {
 <template>
 	<div>
 		<label class="label">{{ label }}</label>
-		<div class="range-slider relative w-100">
+		<div class="range-slider relative w-100" :dir="rtl ? 'rtl' : 'ltr'">
 			<input
 				:id="id"
 				v-model="from"
@@ -84,7 +85,7 @@ const rangeStyle = $computed(() => {
 			</div>
 			<p
 				v-if="from !== min"
-				class="txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0 "
+				class="txt-center txt-12 range-slider-position-txt absolute line-height-1 opacity-0"
 				:style="{ '--progress': `${fromPercentage}` }"
 			>
 				<span>

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

@@ -0,0 +1,114 @@
+import type { EditorState } from '../richTextTypes'
+import { type CommandRegistry, createCommandExecutor } from '../utils/commands'
+import { formatting } from '../utils/formatting'
+import { insertImage, insertLink } from '../utils/media'
+import { addRow, deleteRow, mergeCells, splitCell, insertTable, deleteTable, insertColumn, deleteColumn, alignColumn } from '../utils/table'
+
+export function useCommands(state: EditorState, debug?: { logCommand: (command: string, value?: string) => void }) {
+	const format = () => formatting(state)
+
+	const commands: CommandRegistry = {
+		// Text formatting commands
+		bold: {
+			name: 'Bold',
+			execute: (state: EditorState) => { format().text('bold') },
+			isActive: (state: EditorState) => state.selectedStyles.has('bold')
+		},
+		italic: {
+			name: 'Italic',
+			execute: (state: EditorState) => { format().text('italic') },
+			isActive: (state: EditorState) => state.selectedStyles.has('italic')
+		},
+		underline: {
+			name: 'Underline',
+			execute: (state: EditorState) => { format().text('underline') },
+			isActive: (state: EditorState) => state.selectedStyles.has('underline')
+		},
+
+		// Block formatting commands
+		h1: { name: 'Heading 1', execute: (state: EditorState) => { format().block('h1', 'h1') }, isActive: (state: EditorState) => state.selectedStyles.has('h1') },
+		h2: { name: 'Heading 2', execute: (state: EditorState) => { format().block('h2', 'h2') }, isActive: (state: EditorState) => state.selectedStyles.has('h2') },
+		h3: { name: 'Heading 3', execute: (state: EditorState) => { format().block('h3', 'h3') }, isActive: (state: EditorState) => state.selectedStyles.has('h3') },
+		h4: { name: 'Heading 4', execute: (state: EditorState) => { format().block('h4', 'h4') }, isActive: (state: EditorState) => state.selectedStyles.has('h4') },
+		h5: { name: 'Heading 5', execute: (state: EditorState) => { format().block('h5', 'h5') }, isActive: (state: EditorState) => state.selectedStyles.has('h5') },
+		h6: { name: 'Heading 6', execute: (state: EditorState) => { format().block('h6', 'h6') }, isActive: (state: EditorState) => state.selectedStyles.has('h6') },
+		p: { name: 'Paragraph', execute: (state: EditorState) => { format().block('p', 'p') }, isActive: (state: EditorState) => state.selectedStyles.has('p') },
+		blockquote: {
+			name: 'Blockquote',
+			execute: (state: EditorState) => { format().block('blockquote', 'blockquote') },
+			isActive: (state: EditorState) => state.selectedStyles.has('blockquote')
+		},
+
+		// List commands
+		orderedList: {
+			name: 'Ordered List',
+			execute: (state: EditorState) => { format().list('orderedList') },
+			isActive: (state: EditorState) => state.selectedStyles.has('orderedList')
+		},
+		unorderedList: {
+			name: 'Unordered List',
+			execute: (state: EditorState) => { format().list('unorderedList') },
+			isActive: (state: EditorState) => state.selectedStyles.has('unorderedList')
+		},
+
+		// Table commands
+		insertTable: {
+			name: 'Insert Table',
+			execute: (state: EditorState, value?: string) => {
+				const [rows, cols] = value?.split('x').map(Number) || [3, 3]
+				insertTable(rows, cols, state)
+			}
+		},
+		deleteTable: { name: 'Delete Table', execute: (state: EditorState) => state.range && deleteTable(state.range) },
+		mergeCells: { name: 'Merge Cells', execute: (state: EditorState) => state.range && state.doc && mergeCells(state.range, state.doc) },
+		splitCells: { name: 'Split Cells', execute: (state: EditorState) => state.range && state.doc && splitCell(state.range, state.doc) },
+		addRowBefore: { name: 'Add Row Before', execute: (state: EditorState) => state.range && state.doc && addRow('before', state.range, state.doc) },
+		addRowAfter: { name: 'Add Row After', execute: (state: EditorState) => state.range && state.doc && addRow('after', state.range, state.doc) },
+		deleteRow: { name: 'Delete Row', execute: (state: EditorState) => state.range && deleteRow(state.range) },
+		insertColumnLeft: { name: 'Insert Column Left', execute: (state: EditorState) => state.range && insertColumn('before', state.range) },
+		insertColumnRight: { name: 'Insert Column Right', execute: (state: EditorState) => state.range && insertColumn('after', state.range) },
+		deleteColumn: { name: 'Delete Column', execute: (state: EditorState) => state.range && deleteColumn(state.range) },
+
+		// Alignment commands
+		alignLeft: { name: 'Align Left', execute: (state: EditorState) => state.range && alignColumn(state.range, 'left') },
+		alignCenter: { name: 'Align Center', execute: (state: EditorState) => state.range && alignColumn(state.range, 'center') },
+		alignRight: { name: 'Align Right', execute: (state: EditorState) => state.range && alignColumn(state.range, 'right') },
+		alignJustify: { name: 'Align Justify', execute: (state: EditorState) => state.range && alignColumn(state.range, 'justify') },
+
+		// Media commands
+		image: { name: 'Insert Image', execute: (state: EditorState) => state.modal && insertImage(state.modal, state) },
+		link: { name: 'Insert Link', execute: (state: EditorState) => state.modal && state.range && insertLink(state.modal, state) },
+
+		// Other commands
+		clear: { name: 'Clear Formatting', execute: (state: EditorState) => { format().clear() } },
+		indent: { name: 'Indent', execute: (state: EditorState) => { format().text('indent') } },
+		outdent: { name: 'Outdent', execute: (state: EditorState) => { format().text('outdent') } },
+		fullScreen: {
+			name: 'Full Screen',
+			execute: (state: EditorState) => { state.isFullscreen = !state.isFullscreen },
+			isActive: (state: EditorState) => state.isFullscreen
+		},
+		splitView: {
+			name: 'Split View',
+			execute: (state: EditorState) => { state.isSplitView = !state.isSplitView },
+			isActive: (state: EditorState) => state.isSplitView
+		},
+		codeView: {
+			name: 'Code View',
+			execute: (state: EditorState) => { state.isCodeView = !state.isCodeView },
+			isActive: (state: EditorState) => state.isCodeView
+		}
+	}
+
+	const executor = createCommandExecutor(state, commands)
+
+	// Wrap executor with debug logging if available
+	return {
+		execute: (command: string, value?: string) => {
+			debug?.logCommand(command, value)
+			executor.execute(command, value)
+		},
+		isActive: executor.isActive,
+		getValue: executor.getValue
+	}
+}

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

@@ -1,41 +1,47 @@
-import type { EditorState, Modal } from '../richTextTypes'
-import { reactive } from 'vue'
+import type { EditorDebugger } from '../utils/debug'
+import { useModal } from '@bagelink/vue'
+import { reactive, ref } 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'
+import { addRow, deleteRow, mergeCells, splitCell, insertTable, deleteTable, insertColumn, deleteColumn, alignColumn } from '../utils/table'
+
+interface EditorState {
+	content: string
+	doc: Document | undefined
+	selection: Selection | null
+	selectedStyles: Set<string>
+	isFullscreen: boolean
+	isSplitView: boolean
+	isCodeView: boolean
+	hasInit: boolean
+	undoStack: string[]
+	redoStack: string[]
+	rangeCount: number
+	range: Range | null
+	modal: ReturnType<typeof useModal>
+}
 
 export function useEditor() {
-	const state = reactive<
-		EditorState
-	>({
+	const editorDebugger = ref<EditorDebugger>()
+	const modal = useModal()
+
+	const state = reactive<EditorState>({
+		content: '',
+		doc: undefined,
+		selection: null,
+		selectedStyles: new Set(),
 		isFullscreen: false,
-		hasInit: false,
-		isCodeView: false,
 		isSplitView: false,
-		selectedStyles: new Set<string>(),
+		isCodeView: false,
+		hasInit: false,
+		undoStack: [],
+		redoStack: [],
 		rangeCount: 0,
-		content: '',
+		range: null,
+		modal
 	})
 
-	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 = () => {
+	function updateActiveStyles() {
 		if (!state.doc) return
 		const styles = new Set<string>()
 		const styleTypes = [
@@ -60,11 +66,26 @@ export function useEditor() {
 				styles.add(style)
 			}
 		})
-		updateListStyles(styles)
 		state.selectedStyles = styles
 	}
 
-	const updateSelection = () => {
+	function updateContent(source: 'html' | 'text') {
+		if (!state.doc) return
+
+		// Save current state for undo
+		state.undoStack.push(state.content)
+		// Clear redo stack on new content
+		state.redoStack = []
+
+		if (source === 'html') {
+			state.doc.body.innerHTML = state.content
+		} else {
+			state.doc.body.textContent = state.content
+		}
+		updateActiveStyles()
+	}
+
+	function updateSelection() {
 		if (!state.doc) return
 		state.selection = state.doc.getSelection()
 		if (!state.selection) return
@@ -93,20 +114,132 @@ export function useEditor() {
 		}
 	}
 
-	const format = () => formatting(state)
+	function setupEventListeners(doc: Document) {
+		// Input and selection events
+		doc.addEventListener('input', () => {
+			state.content = doc.body.innerHTML
+			updateActiveStyles()
+		})
 
-	const updateContent = (type?: string) => {
-		if (!state.doc) return
-		if (type === 'html') {
-			state.doc.body.innerHTML = state.content
-		} else {
-			state.content = state.doc.body.innerHTML
+		doc.addEventListener('selectionchange', () => {
+			updateSelection()
+		})
+
+		doc.addEventListener('mouseup', () => {
+			updateSelection()
+		})
+
+		doc.addEventListener('keyup', (e) => {
+			if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+				updateSelection()
+			}
+		})
+
+		// Clean empty tags and normalize content
+		const cleanEmptyTags = () => {
+			const walker = doc.createTreeWalker(
+				doc.body,
+				NodeFilter.SHOW_ELEMENT,
+				null
+			)
+
+			const nodesToRemove: Element[] = []
+			let node = walker.nextNode() as Element
+
+			while (node) {
+				// Skip certain elements
+				if (['br', 'img', 'hr', 'input'].includes(node.tagName.toLowerCase())) {
+					node = walker.nextNode() as Element
+					continue
+				}
+
+				// Get text content without extra spaces
+				const textContent = node.textContent?.trim() || ''
+				const innerHTML = node.innerHTML.trim()
+				const hasOnlyBr = innerHTML === '<br>' || innerHTML === '<br/>'
+				const hasOnlyNbsp = innerHTML === '&nbsp;' || textContent === '\u00A0'
+				const isEmpty = !textContent && !innerHTML
+				const isDirectChildOfBody = node.parentElement === doc.body
+
+				// Handle empty or unnecessary tags
+				if (isEmpty || hasOnlyNbsp || (hasOnlyBr && !isDirectChildOfBody)) {
+					// If it's a direct child of body, replace with a proper paragraph
+					if (isDirectChildOfBody) {
+						if (!node.matches('p')) {
+							const p = doc.createElement('p')
+							p.innerHTML = '<br>'
+							node.parentNode?.replaceChild(p, node)
+						}
+					} else {
+						nodesToRemove.push(node)
+					}
+				}
+
+				node = walker.nextNode() as Element
+			}
+
+			// Remove all marked nodes
+			nodesToRemove.forEach((node) => { node.remove() })
 		}
-		updateActiveStyles()
+
+		// Regular cleanup
+		const observer = new MutationObserver(() => {
+			cleanEmptyTags()
+		})
+
+		observer.observe(doc.body, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		})
 	}
 
-	const handleToolbarAction = (action: string, value?: string) => {
+	function init(doc: Document) {
+		state.doc = doc
+		state.hasInit = true
+		setupEventListeners(doc)
+		updateContent('html')
+	}
+
+	function handleUndo() {
+		if (state.undoStack.length === 0) return
+
+		// Save current state to redo stack
+		state.redoStack.push(state.content)
+
+		// Pop and apply last state from undo stack
+		const lastContent = state.undoStack.pop()
+		if (lastContent !== undefined) {
+			state.content = lastContent
+			updateContent('html')
+		}
+	}
+
+	function handleRedo() {
+		if (state.redoStack.length === 0) return
+
+		// Save current state to undo stack
+		state.undoStack.push(state.content)
+
+		// Pop and apply last state from redo stack
+		const nextContent = state.redoStack.pop()
+		if (nextContent !== undefined) {
+			state.content = nextContent
+			updateContent('html')
+		}
+	}
+
+	function handleToolbarAction(action: string, value?: string) {
 		if (!state.doc) return
+
+		if (action === 'undo') {
+			handleUndo()
+			return
+		}
+		if (action === 'redo') {
+			handleRedo()
+			return
+		}
 		if (action === 'fullScreen') {
 			state.isFullscreen = !state.isFullscreen
 			return
@@ -120,108 +253,103 @@ export function useEditor() {
 			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
+		// Apply formatting based on action
+		const format = formatting(state)
+		state.doc.body.focus()
 
-			if (!state.doc.body.contains(selection.anchorNode)) {
-				state.doc.body.focus()
+		switch (action) {
+			case 'bold':
+			case 'italic':
+			case 'underline':
+				format.text(action)
+				break
+			case 'orderedList':
+				format.list('ol')
+				break
+			case 'unorderedList':
+				format.list('ul')
+				break
+			case 'blockquote':
+			case 'p':
+			case 'h1':
+			case 'h2':
+			case 'h3':
+			case 'h4':
+			case 'h5':
+			case 'h6':
+				format.block(action, action)
+				break
+			case 'insertTable': {
+				const [rows, cols] = value?.split('x').map(Number) || [3, 3]
+				insertTable(rows, cols, state)
+				break
 			}
-			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 'deleteTable':
+				if (state.range) deleteTable(state.range)
+				break
+			case 'mergeCells':
+				if (state.range && state.doc) mergeCells(state.range, state.doc)
+				break
+			case 'splitCells':
+				if (state.range && state.doc) splitCell(state.range, state.doc)
+				break
+			case 'addRowBefore':
+			case 'addRowAfter':
+				if (state.range && state.doc) {
+					addRow(action === 'addRowBefore' ? 'before' : 'after', state.range, state.doc)
 				}
-				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 'clear':{
-					format().clear()
-					break
+				break
+			case 'deleteRow':
+				if (state.range) deleteRow(state.range)
+				break
+			case 'insertColumnLeft':
+			case 'insertColumnRight':
+				if (state.range) {
+					insertColumn(action === 'insertColumnLeft' ? 'before' : 'after', state.range)
 				}
-				case 'orderedList':
-				case 'unorderedList':
-					format().list(command)
-					break
-				case 'image':
-					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)
-					break
-
-				case 'blockquote':
-				case 'p':
-					format().block(command, value || command)
-					break
-				default:
-					if (/^h[1-6]$/.test(command)) {
-						format().block(command, value || command)
-					}
-			}
+				break
+			case 'deleteColumn':
+				if (state.range) deleteColumn(state.range)
+				break
+			case 'alignLeft':
+			case 'alignCenter':
+			case 'alignRight':
+			case 'alignJustify':
+				if (state.range) {
+					alignColumn(state.range, action.replace('align', '').toLowerCase() as 'left' | 'center' | 'right' | 'justify')
+				}
+				break
+			case 'clear':
+				format.clear()
+				break
+			default:
+				format.text(action)
 		}
-		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
 	}
 
+	// Debug methods
+	const getDebugSession = () => editorDebugger.value?.getSession()
+	const clearDebugSession = () => editorDebugger.value?.clearSession()
+	const downloadDebugSession = () => editorDebugger.value?.downloadSession()
+	const logCommand = (command: string, value?: string) => editorDebugger.value?.logCommand(command, value, state)
+	const exportDebugWithPrompt = (message?: string) => editorDebugger.value?.exportSessionWithPrompt(message)
+
 	return {
 		state,
 		init,
 		handleToolbarAction,
 		updateContent,
+		handleUndo,
+		handleRedo,
+		// Debug methods
+		debug: {
+			getSession: getDebugSession,
+			clearSession: clearDebugSession,
+			downloadSession: downloadDebugSession,
+			logCommand,
+			exportDebugWithPrompt
+		}
 	}
 }