@bagelink/vue 0.0.974 → 0.0.980

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>