@bagelink/vue 0.0.978 → 0.0.982

package/src/plugins/bagel.ts

@@ -28,7 +28,7 @@ export interface BagelOptions {
 	availableLangs?: string[]
 	defaultLang?: string
 	language?: string
-	host: string
+	host?: string
 
 	onError?: (err: Error) => void
 

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

@@ -1,420 +0,0 @@
-<script setup lang="ts">
-import type { MaterialIcons } from '@bagelink/vue'
-import {
-	FileUpload as $el,
-	BglVideo,
-	Btn,
-	bagelFormUtils,
-	useModal,
-} from '@bagelink/vue'
-import Image from '@tiptap/extension-image'
-import Table from '@tiptap/extension-table'
-import TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
-import YouTube from '@tiptap/extension-youtube'
-import StarterKit from '@tiptap/starter-kit'
-import { Editor, EditorContent } from '@tiptap/vue-3'
-import { onBeforeUnmount, onMounted, watch } from 'vue'
-
-const props = defineProps<{ modelValue: string }>()
-const emit = defineEmits(['update:modelValue'])
-// import $el from './FileUploadURL.vue';
-const { txtField } = bagelFormUtils
-let editor = $ref<Editor>()
-
-function focus() {
-	if (!editor) throw new Error('editor is not defined')
-	return editor.chain().focus()
-}
-const { showModalForm } = useModal()
-
-Image.configure({
-	inline: true,
-	allowBase64: true,
-})
-
-function addImage() {
-	showModalForm({
-		title: 'Add Image',
-		schema: [
-			txtField('title', 'Title'),
-			{ $el, id: 'src', attrs: { bindkey: 'url' } },
-			txtField('alt', 'Alt Text'),
-		],
-		onSubmit: imgObj => focus().setImage(imgObj).run(),
-	})
-}
-
-const config: {
-	name: string
-	command: any
-	icon: MaterialIcons
-	option?: { [key: string]: any }
-	disabled?: () => boolean
-}[] = [
-	{
-		name: 'Bold',
-		command: () => focus().toggleBold().run(),
-		icon: 'format_bold',
-		disabled: () => !editor?.can().chain().focus().toggleBold().run(),
-	},
-	{
-		name: 'Italic',
-		command: () => focus().toggleItalic().run(),
-		icon: 'format_italic',
-		disabled: () => !editor?.can().chain().focus().toggleItalic().run(),
-	},
-	{
-		name: 'Strike',
-		command: () => focus().toggleStrike().run(),
-		icon: 'format_strikethrough',
-		disabled: () => !editor?.can().chain().focus().toggleStrike().run(),
-	},
-	{
-		name: 'Code Text',
-		command: () => focus().toggleCode().run(),
-		icon: 'code',
-	},
-	{
-		name: 'Image',
-		command: addImage,
-		icon: 'image',
-	},
-	{
-		name: 'YouTube',
-		command: () => {
-			showModalForm({
-				title: 'Add YouTube Video',
-				schema: [
-					txtField('src', 'YouTube URL'),
-					{
-						$el: BglVideo,
-						attrs: { src: (_: any, { src }: { src: string }) => src || '' },
-					},
-				],
-				onSubmit: videoObj => editor?.commands.setYoutubeVideo(videoObj),
-			})
-		},
-		icon: 'youtube_activity',
-	},
-	{
-		name: 'Clear',
-		command: () => focus().clearNodes().run(),
-		icon: 'format_clear',
-	},
-	{
-		name: 'Paragraph',
-		command: () => focus().setParagraph().run(),
-		icon: 'format_paragraph',
-	},
-	{
-		name: 'Heading',
-		command: () => focus().toggleHeading({ level: 1 }).run(),
-		icon: 'format_h1',
-		option: { level: 1 },
-	},
-	{
-		name: 'Heading',
-		command: () => focus().toggleHeading({ level: 2 }).run(),
-		icon: 'format_h2',
-		option: { level: 2 },
-	},
-	{
-		name: 'Heading',
-		command: () => focus().toggleHeading({ level: 3 }).run(),
-		icon: 'format_h3',
-		option: { level: 3 },
-	},
-	{
-		name: 'Heading',
-		command: () => focus().toggleHeading({ level: 4 }).run(),
-		icon: 'format_h4',
-		option: { level: 4 },
-	},
-	{
-		name: 'Heading',
-		command: () => focus().toggleHeading({ level: 5 }).run(),
-		icon: 'format_h5',
-		option: { level: 5 },
-	},
-	{
-		name: 'Heading',
-		command: () => focus().toggleHeading({ level: 6 }).run(),
-		icon: 'format_h6',
-		option: { level: 6 },
-	},
-	{
-		name: 'Bullet List',
-		command: () => focus().toggleBulletList().run(),
-		icon: 'format_list_bulleted',
-	},
-	{
-		name: 'Ordered List',
-		command: () => focus().toggleOrderedList().run(),
-		icon: 'format_list_numbered',
-	},
-	{
-		name: 'Code Block',
-		command: () => focus().toggleCodeBlock().run(),
-		icon: 'code_blocks',
-	},
-	{
-		name: 'Blockquote',
-		command: () => focus().toggleBlockquote().run(),
-		icon: 'format_quote',
-	},
-	{
-		name: 'Horizontal Rule',
-		command: () => focus().setHorizontalRule().run(),
-		icon: 'horizontal_rule',
-	},
-	{
-		name: 'Hard Break',
-		command: () => focus().setHardBreak().run(),
-		icon: 'keyboard_return',
-	},
-	{
-		name: 'Table',
-		command: () => editor
-			?.chain()
-			.focus()
-			.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-			.run(),
-		icon: 'table_chart',
-	},
-	{
-		name: 'Undo',
-		command: () => focus().undo().run(),
-		icon: 'undo',
-		disabled: () => !editor?.can().chain().focus().undo().run(),
-	},
-	{
-		name: 'Redo',
-		command: () => focus().redo().run(),
-		icon: 'redo',
-		disabled: () => !editor?.can().chain().focus().redo().run(),
-	},
-]
-
-function initEditor() {
-	editor = new Editor({
-		extensions: [
-			StarterKit,
-			Image,
-			YouTube,
-			Table,
-			TableRow,
-			TableCell,
-			TableHeader,
-		],
-		content: props.modelValue,
-		onUpdate: ({ editor }) => { emit('update:modelValue', editor.getHTML()) },
-	})
-}
-
-watch(
-	() => props.modelValue,
-	(value) => {
-		if (editor?.getHTML() === value) return
-		editor?.commands.setContent(value, false)
-	},
-	{ immediate: true },
-)
-
-onMounted(initEditor)
-
-onBeforeUnmount(() => editor?.destroy())
-</script>
-
-<template>
-	<div class="RichText">
-		<div v-if="editor" class="RichText-tools">
-			<Btn
-				v-for="item in config"
-				:key="item.name"
-				v-tooltip="item.name"
-				tabindex="-1"
-				:flat="!editor.isActive(item.name, item.option)"
-				thin
-				:icon="item.icon"
-				:disabled="item.disabled?.()"
-				@click="item.command"
-			/>
-		</div>
-		<EditorContent :editor="editor" />
-	</div>
-</template>
-
-<style>
-/* Basic editor styles */
-.tiptap > * + * {
-	margin-top: 0.75em;
-}
-
-.tiptap ul,
-.tiptap ol {
-	padding: 0 1rem;
-}
-
-.tiptap h1,
-.tiptap h2 {
-	line-height: 1;
-}
-
-.tiptap h3,
-.tiptap h4,
-.tiptap h5,
-.tiptap h6 {
-	line-height: 1.1;
-}
-
-.tiptap pre {
-	background: #0d0d0d;
-	color: var(--bgl-light-text);
-	font-family: 'JetBrainsMono', monospace;
-	padding: 0.75rem 1rem;
-	border-radius: 0.5rem;
-	margin: 0;
-}
-
-.tiptap pre code {
-	color: inherit;
-	padding: 0;
-	background: none;
-	font-size: 0.8rem;
-}
-
-.tiptap img {
-	max-width: 100%;
-	height: auto;
-}
-
-.tiptap blockquote {
-	padding-inline-start: 0.5rem;
-	border-inline-start: 2px solid var(--border-color);
-	margin: 0.5rem
-}
-
-.tiptap hr {
-	border: none;
-	border-top: 2px solid var(--border-color);
-	margin: 1rem 0;
-}
-
-.tiptap {
-	min-height: 200px;
-	background: var(--input-bg);
-	overflow: auto;
-	max-height: 500px;
-	padding: 0.7rem;
-	color: var(--input-color);
-	border-radius: var(--input-border-radius);
-	font-size: var(--input-font-size);
-	line-height: 1.5;
-}
-.tiptap.ProseMirror-focused {
-	outline: none;
-	box-shadow: inset 0 0 10px #00000012;
-}
-.RichText {
-	margin-bottom: 0.5rem;
-}
-.RichText-tools {
-	background: var(--input-bg);
-	margin-bottom: 0.125rem;
-	border-radius: var(--input-border-radius);
-}
-
-.tiptap {
-	table {
-		border-collapse: collapse;
-		table-layout: fixed;
-		width: 100%;
-		margin: 0;
-		overflow: hidden;
-
-		td,
-		th {
-			min-width: 1em;
-			border: 2px solid var(--border-color);
-			padding: 3px 5px;
-			vertical-align: top;
-			box-sizing: border-box;
-			position: relative;
-
-			> * {
-				margin-bottom: 0;
-				margin-top: 0;
-			}
-		}
-
-		th {
-			font-weight: bold;
-			text-align: start;
-			background-color: var(--bgl-gray-80);
-		}
-
-		.selectedCell:after {
-			z-index: 2;
-			position: absolute;
-			content: '';
-			left: 0;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			background: var(--bgl-gray-20);
-			pointer-events: none;
-		}
-		.selectedCell p::selection{
-			color: var(--bgl-popup-text)
-		}
-
-		.column-resize-handle {
-			position: absolute;
-			inset-inline-start: -2px;
-			top: 0;
-			bottom: -2px;
-			width: 4px;
-			background-color: #adf;
-			pointer-events: none;
-		}
-
-		p {
-			margin: 0;
-		}
-	}
-}
-
-.tableWrapper {
-	padding: 1rem 0;
-	overflow-x: auto;
-}
-
-.resize-cursor {
-	cursor: ew-resize;
-	cursor: col-resize;
-}
-.RichText-tools [disabled]{
-	color: var(--bgl-popup-text) !important;
-	opacity: 0.3;
-}
-.RichText iframe{
-	width: 100%;
-	max-width: 700px;
-	margin: 0 auto;
-	height: auto;
-	display: block;
-	border-radius: var(--input-border-radius);
-	border: none;
-	aspect-ratio: 16/9;
-}
-.RichText img{
-	width: 100%;
-	max-width: 700px;
-	margin: 0 auto;
-	height: auto;
-	display: block;
-	border-radius: var(--input-border-radius);
-}
-</style>

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

@@ -1,301 +0,0 @@
-<script lang="ts" setup>
-import type { ToolbarConfig } from './richtext-types'
-import { useModal } from '@bagelink/vue'
-import { onMounted, watch } from 'vue'
-import { useFormatting } from './formatting'
-import Toolbar from './Toolbar.vue'
-
-const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig }>()
-const emit = defineEmits(['update:modelValue'])
-
-const modal = useModal()
-const { applyFormatting, clearFormatting } = useFormatting(modal)
-
-const editableContent = $ref<HTMLElement | undefined>()
-const defaultConfig: ToolbarConfig = [
-	'formatBlock',
-	'bold',
-	'italic',
-	'underline',
-	'fontSize',
-	'fontFamily',
-	'textColor',
-	'backgroundColor',
-	'alignLeft',
-	'alignCenter',
-	'alignRight',
-	'alignJustify',
-	'orderedList',
-	'unorderedList',
-	'indent',
-	'outdent',
-	'link',
-	'image',
-	'table',
-	'blockquote',
-	'codeBlock',
-	'splitView',
-	'youtube',
-	'codeView',
-	'clear',
-	'fullScreen'
-]
-const config = $ref<ToolbarConfig>(props.toolbarConfig || defaultConfig)
-let contentHtml = $ref(props.modelValue)
-let isCodeView = $ref(false)
-let isSplitView = $ref(false)
-
-function updateContent() {
-	if (!isCodeView) {
-		contentHtml = editableContent?.innerHTML ?? ''
-	}
-	emit('update:modelValue', contentHtml)
-}
-
-function updateToolbarHighlight() {
-	if (document.getSelection()) {
-		const selection = document.getSelection()
-		const range = selection?.rangeCount ? selection.getRangeAt(0) : null
-		const container = range?.commonAncestorContainer as HTMLElement
-		if (container) {
-			let currentElement = container.nodeType === 3 ? container.parentElement : container
-			while (currentElement && currentElement !== editableContent) {
-				if (['H1', 'H2', 'H3'].includes(currentElement.tagName)) {
-					// emit('action', { type: currentElement.tagName.toLowerCase() }); // Emit the tag to highlight button
-					break
-				}
-				currentElement = currentElement.parentElement
-			}
-		}
-	}
-}
-
-document.addEventListener('selectionchange', updateToolbarHighlight)
-
-// type ToolbarAction = 'link' | 'image' | 'table' | 'youtube' | 'fontSize' | 'fontFamily' | 'textColor' | 'backgroundColor' | 'bold' | 'italic' | 'underline' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'orderedList' | 'unorderedList' | 'indent' | 'outdent' | 'blockquote' | 'codeBlock' | 'splitView' | 'codeView' | 'clear' | 'fullScreen'
-export type ToolbarAction = ToolbarConfig[number]
-
-function handleToolbarAction(action: string, value?: string) {
-	if (!editableContent) return
-	if (['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'].includes(action))
-		value = action.replace('align', '').toLowerCase()
-	if (action === 'splitView') isSplitView = !isSplitView
-	else if (action === 'codeView') isCodeView = !isCodeView
-	else if (action === 'fullScreen') toggleFullScreen()
-	else if (action === 'clear') clearFormatting()
-	else applyFormatting(action, value)
-	updateContent()
-}
-
-function toggleFullScreen() {
-	const editor = document.querySelector('.rich-text-editor')
-	if (editor) {
-		editor.classList.toggle('fullscreen-mode')
-	}
-}
-
-watch(() => props.modelValue, (newValue) => {
-	if (newValue !== contentHtml) {
-		contentHtml = newValue
-		if (editableContent) {
-			editableContent.innerHTML = newValue
-		}
-	}
-})
-
-onMounted(() => {
-	if (editableContent) {
-		editableContent.innerHTML = contentHtml
-	}
-})
-
-// 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
-			case 'k':
-				event.preventDefault()
-				handleToolbarAction('link')
-				break
-			case 'l':
-				event.preventDefault()
-				handleToolbarAction('orderedList')
-				break
-			default:
-				break
-		}
-	}
-}
-function logInput(e: InputEvent) {
-	const target = e.target as HTMLElement
-	contentHtml = target.textContent || ''
-}
-</script>
-
-<template>
-	<div class="rich-text-editor rounded pt-05 px-05 pb-1">
-		<Toolbar :config @action="handleToolbarAction" />
-		<div class="editor-container flex flex-stretch gap-1 m_column">
-			<div class="content-area radius-05 p-1 w-100 grid">
-				<textarea v-if="isCodeView" v-model="contentHtml" @input="updateContent" />
-				<div
-					v-else
-					ref="editableContent"
-					contenteditable="true"
-					class="editableContent"
-					role="textbox"
-					aria-multiline="true"
-					tabindex="0"
-					@input="updateContent"
-					@keydown="handleKeyDown"
-				/>
-			</div>
-			<code
-				v-if="isSplitView"
-				contenteditable="true"
-				class="preview-area w-100 radius-05 p-1"
-				@input="(e) => logInput(e as InputEvent)"
-				v-text="contentHtml"
-			/>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-@font-face {
-    font-family: 'FontWithASyntaxHighlighter';
-    font-style: normal;
-    font-weight: 400;
-    font-stretch: 100%;
-    font-display: swap;
-    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/FontWithASyntaxHighlighter-Regular.woff2) format('woff2')
-}
-
-@font-palette-values --myCustomPalette {
-  font-family: 'FontWithASyntaxHighlighter';
-  override-colors:
-    0 #6191c2, /* keywords, {} */
-    1 #75975d, /* comments */
-    2 yellow, /* literals */
-    3 #a3c19a, /* numbers */
-    4 lightblue, /* functions, [] */
-    5 orange, /* js others */
-    6 black, /* not in use */
-    7 #bc8abd, /* inside quotes, css properties, few chars */
-    8 #818181 /* few chars */
-  ;
-}
-.preview-area{
-	font-family: "FontWithASyntaxHighlighter", monospace;
-  	font-palette: --myCustomPalette;
-	background: var(--bgl-code-bg);
-	color: var(--bgl-code-color)
-
-}
-.rich-text-editor {
-	background: var(--input-bg);
-	margin-bottom: 0.5rem;
-	width: 100%;
-}
-.editableContent{
-	min-height: 100%;
-	white-space: pre-wrap;
-	outline: none;
-}
-.content-area{
-	background: var(--bgl-richtext-color);
-}
-.content-area, .preview-area{
-	min-height: 200px;
-}
-.fullscreen-mode {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 9999;
-    background: var(--input-bg);
-    padding: 2rem;
-    overflow: auto;
-	border-radius: 0;
-}
-.fullscreen-mode .content-area{
-	height: calc(100vh - 5rem);
-	padding: 4rem !important;
-	max-width: 900px;
-	margin-inline: auto ;
-	overflow-y: auto;
-}
-.fullscreen-mode .toolbar{
-	max-width: 900px;
-	margin-inline: auto ;
-	/* border-bottom: 1px solid var(--border-color); */
-	/* margin-bottom: 2rem; */
-}
-
-/* [contenteditable='true'] {
-	  white-space: pre-wrap;
-	  word-wrap: break-word;
-	outline: none;
-	height: 100%;
-} */
-/*
-
-.editor-container {
-  display: flex;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.content-area,
-.preview-area {
-  flex: 1;
-  min-height: 300px;
-  padding: 10px;
-  overflow-y: auto;
-}
-
-.content-area:focus {
-  outline: none;
-}
-
-.split-view .content-area,
-.split-view .preview-area {
-  width: 50%;
-}
-
-.preview-area {
-  background-color: #f9f9f9;
-  border-left: 1px solid #ccc;
-} */
-
-/* @media (max-width: 768px) {
-  .split-view {
-    flex-direction: column;
-  }
-
-  .split-view .content-area,
-  .split-view .preview-area {
-    width: 100%;
-  }
-
-  .preview-area {
-    border-left: none;
-    border-top: 1px solid #ccc;
-  }
-} */
-</style>