@dynect/base 0.1.0 → 0.2.0

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

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3';
+import type { HTMLAttributes } from 'vue';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+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'];
+}>();
+
+// Get editor from context if not provided directly
+const { editor: contextEditor } = useTiptapContext();
+const editor = computed(() => props.editor ?? contextEditor.value);
+
+// Check if editor is ready and focused on a table
+const isEditorReady = computed(() => editor.value && editor.value.isEditable);
+const isTableSelected = computed(() => isEditorReady.value && (editor.value!.isActive('table') || editor.value!.isActive('tableRow') || editor.value!.isActive('tableCell') || editor.value!.isActive('tableHeader')));
+
+// Create new table dialog
+const showCreateTableDialog = ref(false);
+const newTableRows = ref(3);
+const newTableCols = ref(3);
+
+// Create new table
+function createTable() {
+	if (!isEditorReady.value) return;
+
+	editor.value!.chain().focus().insertTable({ rows: newTableRows.value, cols: newTableCols.value, withHeaderRow: true }).run();
+
+	showCreateTableDialog.value = false;
+}
+</script>
+
+<template>
+	<div :class="cn('tiptap-table-toolbar flex flex-wrap items-center gap-1', props.class)" data-slot="tiptap-table-toolbar">
+		<!-- Table creation -->
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger as-child>
+					<Button variant="outline" size="sm" :disabled="!isEditorReady" @click="showCreateTableDialog = true">
+						<Icon name="mdi:table" class="mr-2 h-4 w-4" />
+						Insert Table
+					</Button>
+				</TooltipTrigger>
+				<TooltipContent>Insert a new table</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+
+		<!-- Table manipulation (only shown when a table is selected) -->
+		<div v-if="isTableSelected" class="flex items-center gap-1">
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :disabled="!isEditorReady" @click="editor?.chain().focus().addColumnBefore().run()">
+							<Icon name="mdi:table-column-plus-before" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Add column before</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :disabled="!isEditorReady" @click="editor?.chain().focus().addColumnAfter().run()">
+							<Icon name="mdi:table-column-plus-after" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Add column after</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :disabled="!isEditorReady" @click="editor?.chain().focus().deleteColumn().run()">
+							<Icon name="mdi:table-column-remove" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Delete column</TooltipContent>
+				</Tooltip>
+
+				<Separator orientation="vertical" class="h-6" />
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :disabled="!isEditorReady" @click="editor?.chain().focus().addRowBefore().run()">
+							<Icon name="mdi:table-row-plus-before" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Add row before</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :disabled="!isEditorReady" @click="editor?.chain().focus().addRowAfter().run()">
+							<Icon name="mdi:table-row-plus-after" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Add row after</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :disabled="!isEditorReady" @click="editor?.chain().focus().deleteRow().run()">
+							<Icon name="mdi:table-row-remove" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Delete row</TooltipContent>
+				</Tooltip>
+
+				<Separator orientation="vertical" class="h-6" />
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :disabled="!isEditorReady" @click="editor?.chain().focus().toggleHeaderCell().run()">
+							<Icon name="mdi:format-header-pound" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Toggle header cell</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :disabled="!isEditorReady" @click="editor?.chain().focus().mergeOrSplit().run()">
+							<Icon name="mdi:table-merge-cells" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Merge or split cells</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :disabled="!isEditorReady" class="text-destructive hover:bg-destructive/10" @click="editor?.chain().focus().deleteTable().run()">
+							<Icon name="mdi:table-remove" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Delete table</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+		</div>
+
+		<!-- Create table dialog -->
+		<Dialog v-model:open="showCreateTableDialog">
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Insert Table</DialogTitle>
+					<DialogDescription> Choose the size of your new table. </DialogDescription>
+				</DialogHeader>
+
+				<div class="grid gap-4 py-4">
+					<div class="grid grid-cols-2 gap-4">
+						<div class="flex flex-col gap-2">
+							<Label for="rows">Rows</Label>
+							<Input id="rows" v-model="newTableRows" type="number" min="1" max="20" />
+						</div>
+						<div class="flex flex-col gap-2">
+							<Label for="columns">Columns</Label>
+							<Input id="columns" v-model="newTableCols" type="number" min="1" max="10" />
+						</div>
+					</div>
+				</div>
+
+				<DialogFooter>
+					<Button color="ghost" @click="showCreateTableDialog = false"> Cancel </Button>
+					<Button @click="createTable"> Insert </Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	</div>
+</template>

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

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3';
+import type { HTMLAttributes } from 'vue';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+import { useTiptapContext } from '.';
+import Icon from './TiptapIcon.vue';
+
+const props = defineProps<{
+	editor?: Editor | null;
+	class?: HTMLAttributes['class'];
+}>();
+
+// 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;
+});
+
+// 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);
+}
+
+// Character and word count
+const wordCount = computed(() => {
+	if (!isEditorReady.value) return { characters: 0, words: 0 };
+	const text = editor.value?.state.doc.textContent || '';
+	return {
+		characters: text.length,
+		words: text.split(/\s+/).filter((word) => word.length > 0).length,
+	};
+});
+</script>
+
+<template>
+	<div :class="cn('tiptap-toolbar flex flex-wrap items-center gap-1', props.class)" data-slot="tiptap-toolbar">
+		<!-- History controls -->
+		<div class="flex items-center gap-1">
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :disabled="!editor?.can().undo()" @click="editor?.chain().focus().undo().run()">
+							<Icon name="mdi:undo" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Undo (Ctrl+Z)</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :disabled="!editor?.can().redo()" @click="editor?.chain().focus().redo().run()">
+							<Icon name="mdi:redo" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Redo (Ctrl+Y)</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+		</div>
+
+		<Separator orientation="vertical" class="h-6" />
+
+		<!-- Basic Text Formatting -->
+		<div class="flex items-center gap-1">
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<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>
+					</TooltipTrigger>
+					<TooltipContent>Bold</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<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>
+					</TooltipTrigger>
+					<TooltipContent>Italic</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<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>
+					</TooltipTrigger>
+					<TooltipContent>Strike Through</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<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>
+					</TooltipTrigger>
+					<TooltipContent>Inline Code</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+		</div>
+
+		<Separator orientation="vertical" class="h-6" />
+
+		<!-- Headings -->
+		<div class="flex items-center gap-1">
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<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>
+					</TooltipTrigger>
+					<TooltipContent>Heading 1</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<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>
+					</TooltipTrigger>
+					<TooltipContent>Heading 2</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('heading', { level: 3 }) }" :disabled="!isEditorReady" @click="editor?.chain().focus().toggleHeading({ level: 3 }).run()">
+							<Icon name="mdi:format-header-3" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Heading 3</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<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>
+					</TooltipTrigger>
+					<TooltipContent>Paragraph</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+		</div>
+
+		<Separator orientation="vertical" class="h-6" />
+
+		<!-- Lists -->
+		<div class="flex items-center gap-1">
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<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>
+					</TooltipTrigger>
+					<TooltipContent>Bullet List</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<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>
+					</TooltipTrigger>
+					<TooltipContent>Numbered List</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+		</div>
+
+		<Separator orientation="vertical" class="h-6" />
+
+		<!-- Special Elements -->
+		<div class="flex items-center gap-1">
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<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>
+					</TooltipTrigger>
+					<TooltipContent>Quote</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<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>
+					</TooltipTrigger>
+					<TooltipContent>Horizontal Divider</TooltipContent>
+				</Tooltip>
+
+				<Tooltip>
+					<TooltipTrigger as-child>
+						<Button size="xs" :icon-only="true" color="ghost" :class="{ 'bg-accent': isActive('codeBlock') }" :disabled="!isEditorReady" @click="editor?.chain().focus().setCodeBlock().run()">
+							<Icon name="mdi:code-braces" class="h-5 w-5" />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Code Block</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+		</div>
+
+		<Separator orientation="vertical" class="h-6" />
+
+		<!-- Word count -->
+		<div class="text-muted-foreground ml-auto flex items-center text-xs">
+			<span>{{ wordCount.words }} words</span>
+			<Separator orientation="vertical" class="mx-2 h-4" />
+			<span>{{ wordCount.characters }} characters</span>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import type { FlattenedItem } from 'reka-ui';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { attachInstruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { unrefElement } from '@vueuse/core';
+import { TreeItem } from 'reka-ui';
+import { computed, h, ref, render, watchEffect } from 'vue';
+import Icon from './TiptapIcon.vue';
+
+const props = defineProps<{
+	item: FlattenedItem<any>;
+}>();
+
+const emits = defineEmits<{
+	'select-node': [id: string];
+	'duplicate-node': [id: string];
+	'delete-node': [id: string];
+}>();
+
+const elRef = ref();
+const isDragging = ref(false);
+const isDraggedOver = ref(false);
+const instruction = ref<Extract<Instruction, { type: 'reorder-above' | 'reorder-below' | 'make-child' }> | null>(null);
+
+const node = computed(() => {
+	return {
+		id: props.item.value.title,
+		name: props.item.value.name,
+		icon: props.item.value.icon || 'mdi:circle',
+		content: props.item.value.content,
+		selected: props.item.value.selected,
+		depth: props.item.value.depth,
+	};
+});
+
+const mode = computed(() => {
+	if (props.item.hasChildren) return 'expanded';
+	if (props.item.index + 1 === props.item.parentItem?.children?.length) return 'last-in-group';
+	return 'standard';
+});
+
+watchEffect((onCleanup) => {
+	const currentElement = unrefElement(elRef);
+
+	if (!currentElement) return;
+
+	const item = {
+		...props.item.value,
+		level: props.item.level,
+		id: props.item._id,
+	};
+
+	const dndFunction = combine(
+		draggable({
+			element: currentElement,
+			getInitialData: () => item,
+			onDragStart: () => {
+				isDragging.value = true;
+			},
+			onDrop: () => {
+				isDragging.value = false;
+			},
+			onGenerateDragPreview({ nativeSetDragImage }) {
+				setCustomNativeDragPreview({
+					getOffset: pointerOutsideOfPreview({ x: '16px', y: '8px' }),
+					render: ({ container }) => {
+						return render(h('div', { class: 'bg-white text-muted-foreground rounded-md text-sm font-medium px-3 py-1.5 border' }, node.value.name || item.id), container);
+					},
+					nativeSetDragImage,
+				});
+			},
+		}),
+
+		dropTargetForElements({
+			element: currentElement,
+			getData: ({ input, element }) => {
+				const data = { id: item.id };
+
+				return attachInstruction(data, {
+					input,
+					element,
+					indentPerLevel: 16,
+					currentLevel: props.item.level,
+					mode: mode.value,
+					block: [],
+				});
+			},
+			canDrop: ({ source }) => {
+				return source.data.id !== item.id;
+			},
+			onDrag: ({ self }) => {
+				instruction.value = extractInstruction(self.data) as typeof instruction.value;
+			},
+			onDragEnter: ({ source }) => {
+				if (source.data.id !== item.id) {
+					isDraggedOver.value = true;
+				}
+			},
+			onDragLeave: () => {
+				isDraggedOver.value = false;
+				instruction.value = null;
+			},
+			onDrop: () => {
+				isDraggedOver.value = false;
+				instruction.value = null;
+			},
+			getIsSticky: () => true,
+		}),
+
+		monitorForElements({
+			canMonitor: ({ source }) => {
+				return source.data.id !== item.id;
+			},
+		})
+	);
+
+	// Cleanup dnd function
+	onCleanup(() => dndFunction());
+});
+
+// Handle node selection
+function handleClick(event: MouseEvent) {
+	event.preventDefault();
+	emits('select-node', node.value.id);
+}
+
+// Handle node duplication
+function handleDuplicate(event: MouseEvent) {
+	event.stopPropagation();
+	emits('duplicate-node', node.value.id);
+}
+
+// Handle node deletion
+function handleDelete(event: MouseEvent) {
+	event.stopPropagation();
+	emits('delete-node', node.value.id);
+}
+</script>
+
+<template>
+	<TreeItem
+		ref="elRef"
+		:value="item.value"
+		:level="item.level"
+		class="outline-node group relative w-full cursor-pointer rounded-md border-none px-3 py-2"
+		:class="{
+			'opacity-50': isDragging,
+			'bg-accent text-accent-foreground font-medium': node.selected,
+			'hover:bg-accent hover:text-accent-foreground': !node.selected,
+			'text-muted-foreground': !node.selected,
+		}"
+		@click="handleClick"
+		@select.prevent
+	>
+		<div class="flex w-full items-center gap-2">
+			<!-- Icon and name -->
+			<div class="flex flex-1 items-center gap-2 overflow-hidden">
+				<Icon :name="node.icon" class="h-4 w-4 shrink-0" />
+				<span class="truncate">{{ node.name }}</span>
+				<span v-if="node.content" class="text-muted-foreground truncate text-xs">
+					{{ node.content }}
+				</span>
+			</div>
+
+			<!-- Actions -->
+			<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100">
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger as-child>
+							<Button size="xs" :icon-only="true" color="ghost" class="h-6 w-6" @click.stop="handleDuplicate">
+								<Icon name="mdi:content-copy" class="h-3.5 w-3.5" />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>Duplicate</TooltipContent>
+					</Tooltip>
+
+					<Tooltip>
+						<TooltipTrigger as-child>
+							<Button size="xs" :icon-only="true" color="ghost" class="text-destructive hover:text-destructive h-6 w-6" @click.stop="handleDelete">
+								<Icon name="mdi:delete" class="h-3.5 w-3.5" />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>Delete</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			</div>
+		</div>
+
+		<!-- Drag indicator -->
+		<div
+			v-if="instruction"
+			class="border-primary absolute top-0 h-full w-full"
+			:style="{
+				left: `${instruction?.currentLevel * instruction?.indentPerLevel}px`,
+				width: `calc(100% - ${instruction?.currentLevel * instruction?.indentPerLevel}px)`,
+			}"
+			:class="{
+				'border-b-2!': instruction?.type === 'reorder-below',
+				'border-t-2!': instruction?.type === 'reorder-above',
+				'rounded border-2!': instruction?.type === 'make-child',
+			}"
+		/>
+	</TreeItem>
+</template>