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 <[email protected]> * 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 <[email protected]>
2025-11-01 16:18:29 +01:00
parent 0fb66a3782
commit f5a4156c8b
159 changed files with 15225 additions and 3722 deletions
@@ -0,0 +1,147 @@
+import { Node, nodeInputRule } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+
+export interface VideoOptions {
+	HTMLAttributes: Record<string, unknown>;
+}
+
+declare module '@tiptap/core' {
+	interface Commands<ReturnType> {
+		video: {
+			/**
+			 * Set a video node
+			 */
+			setVideo: (src: string) => ReturnType;
+			/**
+			 * Toggle a video
+			 */
+			toggleVideo: (src: string) => ReturnType;
+			/**
+			 * Remove a video
+			 */
+			removeVideo: () => ReturnType;
+		};
+	}
+}
+
+const VIDEO_INPUT_REGEX = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/;
+
+export const Video = Node.create<VideoOptions>({
+	name: 'video',
+	group: 'block',
+	content: 'inline*',
+	draggable: true,
+	isolating: true,
+	addOptions() {
+		return {
+			HTMLAttributes: {}
+		};
+	},
+	addAttributes() {
+		return {
+			src: {
+				default: null,
+				parseHTML: (el) => (el as HTMLSpanElement).getAttribute('src'),
+				renderHTML: (attrs) => ({ src: attrs.src })
+			}
+		};
+	},
+	parseHTML() {
+		return [
+			{
+				tag: 'video',
+				getAttrs: (el) => ({ src: (el as HTMLVideoElement).getAttribute('src') })
+			}
+		];
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return [
+			'video',
+			{ controls: 'true', style: 'width: fit-content;', ...HTMLAttributes },
+			['source', HTMLAttributes]
+		];
+	},
+	addCommands() {
+		return {
+			setVideo:
+				(src: string) =>
+				({ commands }) =>
+					commands.insertContent(
+						`<video controls="true" autoplay="false" style="width: fit-content" src="${src}" />`
+					),
+
+			toggleVideo:
+				() =>
+				({ commands }) =>
+					commands.toggleNode(this.name, 'paragraph'),
+			removeVideo:
+				() =>
+				({ commands }) =>
+					commands.deleteNode(this.name)
+		};
+	},
+	addInputRules() {
+		return [
+			nodeInputRule({
+				find: VIDEO_INPUT_REGEX,
+				type: this.type,
+				getAttributes: (match) => {
+					const [, , src] = match;
+
+					return { src };
+				}
+			})
+		];
+	},
+	addProseMirrorPlugins() {
+		return [
+			new Plugin({
+				key: new PluginKey('videoDropPlugin'),
+
+				props: {
+					handleDOMEvents: {
+						drop(view, event) {
+							const {
+								state: { schema, tr },
+								dispatch
+							} = view;
+							const hasFiles =
+								event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length;
+
+							if (!hasFiles) return false;
+
+							const videos = Array.from(event.dataTransfer.files).filter((file) =>
+								/video/i.test(file.type)
+							);
+
+							if (videos.length === 0) return false;
+
+							event.preventDefault();
+
+							const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY });
+
+							videos.forEach((video) => {
+								const reader = new FileReader();
+
+								reader.onload = (readerEvent) => {
+									const node = schema.nodes.video.create({ src: readerEvent.target?.result });
+
+									if (coordinates && typeof coordinates.pos === 'number') {
+										const transaction = tr.insert(coordinates?.pos, node);
+
+										dispatch(transaction);
+									}
+								};
+
+								reader.readAsDataURL(video);
+							});
+
+							return true;
+						}
+					}
+				}
+			})
+		];
+	}
+});