@bagelink/vue 0.0.986 → 0.0.988

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

@@ -1,87 +0,0 @@
-<script lang="ts" setup>
-import type { ToolbarConfig, ToolbarConfigOption } from './richtext-types'
-import { Btn, type MaterialIcons } from '@bagelink/vue'
-
-defineProps<{ config: ToolbarConfig }>()
-const emit = defineEmits(['action'])
-
-// const colorPicker = $ref<HTMLInputElement | undefined>()
-// const fontSizeInput = $ref<HTMLInputElement | undefined>()
-
-interface toolbarOption {
-	name: ToolbarConfigOption | 'separator'
-	label?: string
-	icon?: MaterialIcons
-	class?: string
-}
-const toolbarOptions: toolbarOption[] = [
-	{ name: 'formatBlock', label: 'h2', icon: 'format_h2' },
-	{ name: 'formatBlock', label: 'h3', icon: 'format_h3' },
-	{ name: 'formatBlock', label: 'h4', icon: 'format_h4' },
-	{ name: 'formatBlock', label: 'h5', icon: 'format_h5' },
-	{ name: 'formatBlock', label: 'h6', icon: 'format_h6' },
-	{ name: 'separator' },
-	{ name: 'bold', label: 'Bold', icon: 'format_bold' },
-	{ name: 'italic', label: 'Italic', icon: 'format_italic' },
-	{ name: 'underline', label: 'Underline', icon: 'format_underlined' },
-	{ name: 'separator' },
-	{ name: 'orderedList', label: 'Ordered List', icon: 'format_list_numbered' },
-	{ name: 'unorderedList', label: 'Unordered List', icon: 'format_list_bulleted' },
-	{ name: 'separator' },
-	{ name: 'link', label: 'Link', icon: 'add_link' },
-	{ name: 'image', label: 'Image', icon: 'add_photo_alternate' },
-	{ name: 'youtube', label: 'YouTube', icon: 'youtube_activity' },
-	{ name: 'separator' },
-	{ name: 'splitView', label: 'Split View', icon: 'code' },
-	{ name: 'clear', label: 'Clear Formatting', icon: 'format_clear' },
-	{ name: 'fullScreen', label: 'Full Screen', icon: 'fullscreen', class: 'ms-auto' },
-]
-
-// function handleColorPick(type: 'textColor' | 'backgroundColor') {
-// 	const color = colorPicker?.value
-// 	if (color) {
-// 		emit('action', type, color)
-// 	}
-// }
-
-// function handleFontSizeChange() {
-// 	const size = fontSizeInput?.value
-// 	if (size) {
-// 		emit('action', 'fontSize', size)
-// 	}
-// }
-</script>
-
-<template>
-  <div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
-    <template v-for="(action, index) in toolbarOptions" :key="index">
-      <Btn
-        v-if="action.name !== 'separator' && config.includes(action.name)"
-        v-tooltip="action.label"
-        :icon="action.icon"
-        thin
-        flat
-        :aria-label="action.name"
-        :class="[action.class, { active: selectedStyles?.has(action.name) }]"
-        class="radius-05"
-        @click="emit('action', action.name, action.label)"
-      />
-      <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(--primary-color);
-  color: white;
-}
-</style>
-
-<style scoped>
-
-</style>

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

@@ -1,246 +0,0 @@
-let modal: any
-
-export function applyFormatting(command: string, value: string = '') {
-	const selection = window.getSelection()
-	if (selection && selection.rangeCount > 0) {
-		const range = selection.getRangeAt(0)
-		const span = document.createElement('span')
-
-		switch (command) {
-			case 'formatBlock':
-				formatBlock(value)
-				break
-			case 'bold':
-				span.style.fontWeight = 'bold'
-				break
-			case 'italic':
-				span.style.fontStyle = 'italic'
-				break
-			case 'underline':
-				span.style.textDecoration = 'underline'
-				break
-			case 'strikeThrough':
-				span.style.textDecoration = 'line-through'
-				break
-			case 'fontSize':
-				span.style.fontSize = value
-				break
-			case 'foreColor':
-				span.style.color = value
-				break
-			case 'backColor':
-				span.style.backgroundColor = value
-				break
-			case 'justifyLeft':
-				span.style.textAlign = 'left'
-				break
-			case 'justifyCenter':
-				span.style.textAlign = 'center'
-				break
-			case 'justifyRight':
-				span.style.textAlign = 'right'
-				break
-			case 'justifyFull':
-				span.style.textAlign = 'justify'
-				break
-			case 'insertOrderedList':
-				insertList('ol')
-				return
-			case 'insertUnorderedList':
-				insertList('ul')
-				return
-			case 'indent':
-				span.style.marginLeft = '40px'
-				break
-			case 'outdent':
-				span.style.marginLeft = '-40px'
-				break
-			case 'removeFormatting':
-				removeFormatting()
-				break
-			case 'insertHorizontalRule':
-				insertHorizontalRule()
-				break
-			case 'subscript':
-				span.style.verticalAlign = 'sub'
-				break
-			case 'superscript':
-				span.style.verticalAlign = 'super'
-				break
-			case 'fontName':
-				span.style.fontFamily = value
-				break
-			case 'increaseFontSize':
-				increaseFontSize()
-				break
-			case 'decreaseFontSize':
-				decreaseFontSize()
-				break
-			case 'link':
-				insertLink()
-				break
-			case 'image':
-				insertImage()
-				break
-			case 'createTable':
-				createTable()
-				break
-			default:
-				console.warn(`Command ${command} is not supported`)
-				return
-		}
-
-		range.surroundContents(span)
-	}
-}
-
-function formatBlock(value: string) {
-	if (!value) return
-	const selection = window.getSelection()
-	const range = selection?.getRangeAt(0)
-	if (!range) return
-	range.selectNodeContents(range.startContainer)
-	const el = document.createElement(value)
-	range.surroundContents(el)
-}
-
-function increaseFontSize() {
-	const selection = window.getSelection()
-	if (selection && selection.rangeCount > 0) {
-		const range = selection.getRangeAt(0)
-		const span = document.createElement('span')
-		const currentFontSize = Number.parseInt((range.startContainer.parentNode as HTMLElement).style.fontSize || '16', 10)
-		const newFontSize = currentFontSize + 2
-		span.style.fontSize = `${newFontSize}px`
-		range.surroundContents(span)
-	}
-}
-
-function decreaseFontSize() {
-	const selection = window.getSelection()
-	if (selection && selection.rangeCount > 0) {
-		const range = selection.getRangeAt(0)
-		const span = document.createElement('span')
-		const currentFontSize = Number.parseInt((range.startContainer.parentNode as HTMLElement).style.fontSize || '16', 10)
-		const newFontSize = currentFontSize - 2
-		span.style.fontSize = `${newFontSize}px`
-		range.surroundContents(span)
-	}
-}
-
-function removeFormatting() {
-	const selection = window.getSelection()
-	if (selection && selection.rangeCount > 0) {
-		const range = selection.getRangeAt(0)
-		const span = document.createElement('span')
-		span.textContent = range.toString()
-		range.deleteContents()
-		range.insertNode(span)
-	}
-}
-
-function insertHorizontalRule() {
-	const selection = window.getSelection()
-	if (selection && selection.rangeCount > 0) {
-		const range = selection.getRangeAt(0)
-		const hr = document.createElement('hr')
-		range.deleteContents()
-		range.insertNode(hr)
-	}
-}
-
-function insertList(type: string) {
-	const selection = window.getSelection()
-	if (selection && selection.rangeCount > 0) {
-		const range = selection.getRangeAt(0)
-		const list = document.createElement(type)
-		const listItem = document.createElement('li')
-		listItem.textContent = range.toString()
-		list.append(listItem)
-		range.deleteContents()
-		range.insertNode(list)
-	}
-}
-
-export function insertLink() {
-	const selection = window.getSelection()
-	if (!selection || selection.rangeCount < 1) return
-	const range = selection.getRangeAt(0)
-	modal.showModalForm({ title: 'Insert Link', schema: [
-		{ id: 'url', $el: 'text', label: 'URL' },
-		{ id: 'openInNewTab', $el: 'check', label: 'Open in new tab' },
-	], onSubmit: (data: any) => {
-		const { url, openInNewTab } = data
-		if (url) {
-			const anchor = document.createElement('a')
-			anchor.href = url
-			range.surroundContents(anchor)
-			if (openInNewTab) anchor.target = '_blank'
-		}
-	} })
-}
-
-export function insertImage() {
-	const selection = window.getSelection()
-	if (!selection || selection.rangeCount < 1) return
-	const range = selection.getRangeAt(0)
-	modal.showModalForm({ title: 'Upload Image', schema: [
-		{ id: 'src', $el: 'file', attrs: { bindkey: 'url' } },
-		{ id: 'alt', $el: 'text', label: 'Alt Text' },
-	], onSubmit: (_data: any) => {
-		const { src } = _data
-		if (src) {
-			const img = document.createElement('img')
-			img.src = src
-			img.alt = _data.alt
-			range.deleteContents()
-			range.insertNode(img)
-		}
-	} })
-}
-
-export function createTable() {
-	const rows = prompt('Enter the number of rows:')
-	const cols = prompt('Enter the number of columns:')
-	if (rows && cols) {
-		const table = document.createElement('table')
-		table.style.border = '1px solid black'
-		table.style.borderCollapse = 'collapse'
-
-		for (let i = 0; i < Number.parseInt(rows); i++) {
-			const row = table.insertRow()
-			for (let j = 0; j < Number.parseInt(cols); j++) {
-				const cell = row.insertCell()
-				cell.style.border = '1px solid black'
-				cell.style.padding = '5px'
-				cell.textContent = `Cell ${i + 1},${j + 1}`
-			}
-		}
-
-		const selection = window.getSelection()
-		if (selection && selection.rangeCount > 0) {
-			const range = selection.getRangeAt(0)
-			range.deleteContents()
-			range.insertNode(table)
-		}
-	}
-}
-
-function clearFormatting() {
-	const selection = window.getSelection()
-	const range = selection?.getRangeAt(0)
-	if (!range) return
-	range.selectNodeContents(range.startContainer)
-	const contents = range.extractContents()
-	const text = contents.textContent
-	if (text !== null && text !== '') {
-		range.deleteContents()
-		const textNode = document.createTextNode(`${text}`)
-		setTimeout(() => { range.insertNode(textNode) }, 1)
-	}
-}
-
-export function useFormatting(modalInstance?: any) {
-	modal = modalInstance
-	return { applyFormatting, clearFormatting }
-}

package/src/components/form/inputs/RichText/richtext-types.ts

@@ -1,29 +0,0 @@
-export type ToolbarConfigOption = 'bold'
-	| 'italic'
-	| 'underline'
-	| 'strikethrough'
-	| 'fontSize'
-	| 'fontFamily'
-	| 'textColor'
-	| 'backgroundColor'
-	| 'alignLeft'
-	| 'alignCenter'
-	| 'alignRight'
-	| 'alignJustify'
-	| 'orderedList'
-	| 'unorderedList'
-	| 'indent'
-	| 'outdent'
-	| 'link'
-	| 'image'
-	| 'table'
-	| 'blockquote'
-	| 'codeBlock'
-	| 'splitView'
-	| 'codeView'
-	| 'youtube'
-	| 'clear'
-	| 'fullScreen'
-	| 'formatBlock'
-
-export type ToolbarConfig = ToolbarConfigOption[]