@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/ui/tiptap/TiptapIcon.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+
+const props = defineProps<{
+	name: keyof typeof icons | (string & {});
+	size?: 'sm' | 'md' | 'lg';
+	class?: HTMLAttributes['class'];
+}>();
+
+const icons = {
+	Bold: 'lucide:bold',
+	LoaderCircle: 'lucide:loader-circle',
+	Italic: 'lucide:italic',
+	Underline: 'lucide:underline',
+	Quote: 'lucide:quote',
+	TextQuote: 'lucide:text-quote',
+	Strikethrough: 'lucide:strikethrough',
+	Minus: 'lucide:minus',
+	Eraser: 'lucide:eraser',
+	PaintRoller: 'lucide:paint-roller',
+	Redo2: 'lucide:redo-2',
+	Undo2: 'lucide:undo-2',
+	AlignCenter: 'radix-icons:text-align-center',
+	AlignJustify: 'radix-icons:text-align-justify',
+	AlignLeft: 'radix-icons:text-align-left',
+	AlignRight: 'radix-icons:text-align-right',
+	ChevronUp: 'lucide:chevron-up',
+	ChevronDown: 'lucide:chevron-down',
+	Subscript: 'lucide:subscript',
+	Superscript: 'lucide:superscript',
+	Code: 'lucide:code',
+	Code2: 'lucide:code-2',
+	Type: 'lucide:type',
+	IndentIncrease: 'lucide:indent-increase',
+	IndentDecrease: 'lucide:indent-decrease',
+	List: 'lucide:list',
+	ListOrdered: 'lucide:list-ordered',
+	ListTodo: 'lucide:list-todo',
+	Link: 'lucide:link',
+	ImageUp: 'lucide:image-up',
+	Video: 'lucide:video',
+	Maximize: 'lucide:maximize',
+	Minimize: 'lucide:minimize',
+	Table: 'lucide:table',
+	Sparkles: 'lucide:sparkles',
+	Magic: 'mdi:magic',
+	Pencil: 'lucide:pencil',
+	Unlink: 'lucide:unlink',
+	BetweenHorizonalEnd: 'lucide:between-horizontal-end',
+	BetweenHorizonalStart: 'lucide:between-horizontal-start',
+	ColumnDelete: 'hugeicons:column-delete',
+	BetweenVerticalStart: 'lucide:between-vertical-start',
+	BetweenVerticalEnd: 'lucide:between-vertical-end',
+	RowDelete: 'hugeicons:row-delete',
+	TableCellsMerge: 'lucide:table-cells-merge',
+	TableCellsSplit: 'lucide:table-cells-split',
+	Trash2: 'lucide:trash-2',
+	Trash: 'lucide:trash',
+	Replace: 'lucide:replace',
+	ChevronsUpDown: 'lucide:chevrons-up-down',
+	LineHeight: 'mdi:format-line-height',
+	Word: 'mdi:file-word-outline',
+	Paragraph: 'ci:text',
+	Heading1: 'lucide:heading-1',
+	Heading2: 'lucide:heading-2',
+	Heading3: 'lucide:heading-3',
+	Columns2: 'lucide:columns-2',
+	Columns3: 'lucide:columns-3',
+	Columns4: 'lucide:columns-4',
+	Plus: 'lucide:plus',
+	Grip: 'lucide:grip-vertical',
+	Copy: 'lucide:copy',
+	Clipboard: 'lucide:clipboard',
+	MenuDown: 'icon-park-solid:down-one',
+	SizeS: 'mdi:size-s',
+	SizeM: 'mdi:size-m',
+	SizeL: 'mdi:size-l',
+	AspectRatio: 'mdi:aspect-ratio',
+	Gaode: 'echo-gaode',
+	Baidu: 'echo-baidu',
+	Youku: 'echo-youku',
+	BiliBili: 'echo-bilibili',
+	Modao: 'echo-modao',
+	Lanhu: 'echo-lanhu',
+	QQVideo: 'echo-qqvideo',
+	Figma: 'echo-figma',
+	Canva: 'echo-canva',
+	Processon: 'echo-processon',
+	Codepen: 'echo-codepen',
+	Jinshuju: 'echo-jinshuju',
+	PanelLeft: 'lucide:panel-left',
+	PanelRight: 'lucide:panel-right',
+	Columns: 'lucide:columns',
+	AI: 'meteocons:star-fill',
+	ChevronRight: 'lucide:chevron-right',
+	ArrowUp: 'lucide:arrow-up',
+	Paste: 'lucide:clipboard-paste',
+	Cut: 'lucide:scissors',
+	File: 'lucide:file',
+	Refresh: 'lucide:refresh-ccw',
+	Eye: 'lucide:eye',
+	Printer: 'lucide:printer',
+	Tablet: 'lucide:tablet',
+	Phone: 'lucide:smartphone',
+	Monitor: 'lucide:monitor',
+	TextSelect: 'lucide:text-select',
+	SpellCheck: 'lucide:spell-check-2',
+	DocSearch: 'lucide:text-search',
+	Close: 'lucide:x',
+	ImageSize: 'fluent:resize-image-24-filled',
+	FlipVertical: 'lucide:flip-vertical',
+	FlipHorizontal: 'lucide:flip-horizontal',
+	WrapText: 'lucide:wrap-text',
+};
+
+// Resolve the icon name
+const iconName = computed(() => ((icons as any)[props.name] as string) || props.name);
+
+// Compute size classes
+const sizeClasses = computed(() => {
+	switch (props.size) {
+		case 'sm':
+			return 'h-4 w-4';
+		case 'lg':
+			return 'h-6 w-6';
+		default:
+			return 'h-5 w-5';
+	}
+});
+
+// Log a warning if the icon is not found
+if (!iconName.value) {
+	console.error(`Icon ${props.name} not found`);
+}
+</script>
+
+<template>
+	<Icon :name="iconName" :class="cn(sizeClasses, props.class)" data-slot="tiptap-icon" />
+</template>

package/src/runtime/components/ui/tiptap/TiptapKeyboardShortcuts.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { shortcuts } from './tiptapTreeUtils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div :class="cn('tiptap-keyboard-shortcuts p-4', props.class)" data-slot="tiptap-keyboard-shortcuts">
+		<h3 class="mb-2 text-lg font-medium">Keyboard Shortcuts</h3>
+		<div class="grid gap-2">
+			<div v-for="(shortcut, index) in shortcuts" :key="index" class="flex items-center justify-between">
+				<div class="flex gap-1">
+					<kbd v-for="(key, kIndex) in shortcut.keys" :key="kIndex" class="rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-800 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100">
+						{{ key }}
+					</kbd>
+				</div>
+				<span class="text-muted-foreground text-sm">{{ shortcut.description }}</span>
+			</div>
+		</div>
+	</div>
+</template>

package/src/runtime/components/ui/tiptap/TiptapMobileToolbar.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3';
+import type { HTMLAttributes } from 'vue';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { computed, ref } from 'vue';
+import { useTiptapContext } from '.';
+import Icon from './TiptapIcon.vue';
+
+const props = defineProps<{
+	editor?: Editor | null;
+	class?: HTMLAttributes['class'];
+}>();
+
+defineEmits<{
+	'open-component-selector': [];
+}>();
+
+// Get editor from context if not provided directly
+const { editor: contextEditor } = useTiptapContext();
+const editor = computed(() => props.editor ?? contextEditor.value);
+
+// Check if editor is ready
+const isEditorReady = computed(() => {
+	return editor.value && editor.value.isEditable;
+});
+
+// Active formatting menu
+const activeMenu = ref<'text' | 'paragraph' | 'list' | 'insert' | null>(null);
+
+// Toggle active menu
+function toggleMenu(menu: 'text' | 'paragraph' | 'list' | 'insert') {
+	if (activeMenu.value === menu) {
+		activeMenu.value = null;
+	} else {
+		activeMenu.value = menu;
+	}
+}
+
+// Check if the current selection has an active mark
+function isActive(type: string, attributes = {}) {
+	if (!isEditorReady.value) return false;
+
+	return editor.value!.isActive(type, attributes);
+}
+</script>
+
+<template>
+	<div :class="cn('tiptap-mobile-toolbar bg-background fixed right-0 bottom-0 left-0 z-50 border-t', props.class)" data-slot="tiptap-mobile-toolbar">
+		<!-- Main toolbar buttons -->
+		<div class="flex items-center justify-around p-2">
+			<Button size="sm" color="ghost" :class="{ 'bg-accent': activeMenu === 'text' }" @click="toggleMenu('text')">
+				<Icon name="mdi:format-bold" class="h-5 w-5" />
+				<span class="ml-1 text-xs">Text</span>
+			</Button>
+
+			<Button size="sm" color="ghost" :class="{ 'bg-accent': activeMenu === 'paragraph' }" @click="toggleMenu('paragraph')">
+				<Icon name="mdi:format-paragraph" class="h-5 w-5" />
+				<span class="ml-1 text-xs">Style</span>
+			</Button>
+
+			<Button size="sm" color="ghost" :class="{ 'bg-accent': activeMenu === 'list' }" @click="toggleMenu('list')">
+				<Icon name="mdi:format-list-bulleted" class="h-5 w-5" />
+				<span class="ml-1 text-xs">List</span>
+			</Button>
+
+			<Button size="sm" color="ghost" :class="{ 'bg-accent': activeMenu === 'insert' }" @click="toggleMenu('insert')">
+				<Icon name="mdi:plus" class="h-5 w-5" />
+				<span class="ml-1 text-xs">Insert</span>
+			</Button>
+		</div>
+
+		<!-- Expandable submenus -->
+		<div v-if="activeMenu" class="pb-safe flex gap-1 overflow-x-auto border-t p-2">
+			<!-- Text formatting submenu -->
+			<template v-if="activeMenu === 'text'">
+				<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('bold') }" :disabled="!isEditorReady" @click="editor?.chain().focus().toggleBold().run()">
+					<Icon name="mdi:format-bold" class="h-5 w-5" />
+				</Button>
+
+				<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('italic') }" :disabled="!isEditorReady" @click="editor?.chain().focus().toggleItalic().run()">
+					<Icon name="mdi:format-italic" class="h-5 w-5" />
+				</Button>
+
+				<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('strike') }" :disabled="!isEditorReady" @click="editor?.chain().focus().toggleStrike().run()">
+					<Icon name="mdi:format-strikethrough" class="h-5 w-5" />
+				</Button>
+
+				<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('code') }" :disabled="!isEditorReady" @click="editor?.chain().focus().toggleCode().run()">
+					<Icon name="mdi:code-tags" class="h-5 w-5" />
+				</Button>
+			</template>
+
+			<!-- Paragraph styles submenu -->
+			<template v-if="activeMenu === 'paragraph'">
+				<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('paragraph') }" :disabled="!isEditorReady" @click="editor?.chain().focus().setParagraph().run()">
+					<Icon name="mdi:format-paragraph" class="h-5 w-5" />
+				</Button>
+
+				<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('heading', { level: 1 }) }" :disabled="!isEditorReady" @click="editor?.chain().focus().toggleHeading({ level: 1 }).run()">
+					<Icon name="mdi:format-header-1" class="h-5 w-5" />
+				</Button>
+
+				<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('heading', { level: 2 }) }" :disabled="!isEditorReady" @click="editor?.chain().focus().toggleHeading({ level: 2 }).run()">
+					<Icon name="mdi:format-header-2" class="h-5 w-5" />
+				</Button>
+
+				<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('blockquote') }" :disabled="!isEditorReady" @click="editor?.chain().focus().toggleBlockquote().run()">
+					<Icon name="mdi:format-quote-close" class="h-5 w-5" />
+				</Button>
+
+				<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('codeBlock') }" :disabled="!isEditorReady" @click="editor?.chain().focus().toggleCode().run()">
+					<Icon name="mdi:code-braces" class="h-5 w-5" />
+				</Button>
+			</template>
+
+			<!-- List styles submenu -->
+			<template v-if="activeMenu === 'list'">
+				<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('bulletList') }" :disabled="!isEditorReady" @click="editor?.chain().focus().toggleBulletList().run()">
+					<Icon name="mdi:format-list-bulleted" class="h-5 w-5" />
+				</Button>
+
+				<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('orderedList') }" :disabled="!isEditorReady" @click="editor?.chain().focus().toggleOrderedList().run()">
+					<Icon name="mdi:format-list-numbered" class="h-5 w-5" />
+				</Button>
+
+				<Button size="xs" :icon-only="true" color="ghost" :disabled="!editor?.can().sinkListItem('listItem')" @click="editor?.chain().focus().sinkListItem('listItem').run()">
+					<Icon name="mdi:format-indent-increase" class="h-5 w-5" />
+				</Button>
+
+				<Button size="xs" :icon-only="true" color="ghost" :disabled="!editor?.can().liftListItem('listItem')" @click="editor?.chain().focus().liftListItem('listItem').run()">
+					<Icon name="mdi:format-indent-decrease" class="h-5 w-5" />
+				</Button>
+			</template>
+
+			<!-- Insert submenu -->
+			<template v-if="activeMenu === 'insert'">
+				<Button size="xs" :icon-only="true" color="ghost" :disabled="!isEditorReady" @click="editor?.chain().focus().setHorizontalRule().run()">
+					<Icon name="mdi:minus" class="h-5 w-5" />
+				</Button>
+
+				<Button size="xs" :icon-only="true" color="ghost" :disabled="!isEditorReady" @click="$emit('open-component-selector')">
+					<Icon name="mdi:puzzle-outline" class="h-5 w-5" />
+				</Button>
+			</template>
+		</div>
+	</div>
+</template>