feat: migrate dashboard to svelte 5 (#577)

* chore: migration to SvelteKit 2 * stage 1: migrate to svelte 5 and fix rerendering issues * stage 2: fix more $: reactivity across dashboard * fix merge conflicts * chore: migrate code in main to svelte 5 * chore: update preventDefault * chore: simplify tsconfig and remove unused mobileMenuRef in MobileMenu.svelte * chore: enforce .ts across dashboard * rename from classroomio-com to website * stage-3: Replace carbon icon svelte with lucide icon * update lock file * chore: finish icon replacement * fix: settings and setup page multiple rerender * stage 3: More icon and rerendering fixes * feat: checkpoint * feat: update editor * [not working] connect everything with ui build * storybook + ui + dashboard all working independently * add bg-black to +page.svelte * feat: add editor to storybook * chore: animate lucid icons (#590) * v1 animations * feat: change some course navigation icons & animate org navigation icons * chore: change settings icon * chore: use css instead of js for hover * rename animations --------- Co-authored-by: tunny17 <tvnji01@gmail.com> * chore: update path to node_modules types in api tsconfig * fix: update import path for DropdownMenu component * fix: add rollupOptions to build configuration in vite.config.ts * fix: remove rollupOptions from build configuration and add @floating-ui/dom dependency * install --------- Co-authored-by: tunny17 <tvnji01@gmail.com>
2025-11-01 16:18:29 +01:00
parent 0fb66a3782
commit f5a4156c8b
159 changed files with 15225 additions and 3722 deletions
@@ -0,0 +1,36 @@
+import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+import Image, { type ImageOptions } from '@tiptap/extension-image';
+import type { Component } from 'svelte';
+import type { NodeViewProps, Node } from '@tiptap/core';
+
+export const ImageExtended = (component: Component<NodeViewProps>): Node<ImageOptions, unknown> => {
+	return Image.extend({
+		addAttributes() {
+			return {
+				src: {
+					default: null
+				},
+				alt: {
+					default: null
+				},
+				title: {
+					default: null
+				},
+				width: {
+					default: '100%'
+				},
+				height: {
+					default: null
+				},
+				align: {
+					default: 'left'
+				}
+			};
+		},
+		addNodeView: () => {
+			return SvelteNodeViewRenderer(component);
+		}
+	}).configure({
+		allowBase64: true
+	});
+};
@@ -0,0 +1,64 @@
+import { Editor, Node, mergeAttributes, type CommandProps, type NodeViewProps } from '@tiptap/core';
+import type { Component } from 'svelte';
+import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+
+export interface ImagePlaceholderOptions {
+	HTMLAttributes: Record<string, object>;
+	onDrop: (files: File[], editor: Editor) => void;
+	onDropRejected?: (files: File[], editor: Editor) => void;
+	onEmbed: (url: string, editor: Editor) => void;
+	allowedMimeTypes?: Record<string, string[]>;
+	maxFiles?: number;
+	maxSize?: number;
+}
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		imagePlaceholder: {
+			/**
+			 * Inserts an image placeholder
+			 */
+			insertImagePlaceholder: () => ReturnType;
+		};
+	}
+}
+
+export const ImagePlaceholder = (
+	component: Component<NodeViewProps>
+): Node<ImagePlaceholderOptions> =>
+	Node.create<ImagePlaceholderOptions>({
+		name: 'image-placeholder',
+		addOptions() {
+			return {
+				HTMLAttributes: {},
+				onDrop: () => {},
+				onDropRejected: () => {},
+				onEmbed: () => {}
+			};
+		},
+		parseHTML() {
+			return [{ tag: `div[data-type="${this.name}"]` }];
+		},
+
+		renderHTML({ HTMLAttributes }) {
+			return ['div', mergeAttributes(HTMLAttributes)];
+		},
+		group: 'block',
+		draggable: true,
+		atom: true,
+		content: 'inline*',
+		isolating: true,
+
+		addNodeView() {
+			return SvelteNodeViewRenderer(component);
+		},
+		addCommands() {
+			return {
+				insertImagePlaceholder: () => (props: CommandProps) => {
+					return props.commands.insertContent({
+						type: 'image-placeholder'
+					});
+				}
+			};
+		}
+	});