Add meta data settings to documents

src/lib/components/ui/command/command-input.svelte

@@ -3,21 +3,28 @@
 	import { Search } from 'lucide-svelte';
 	import { cn } from '$lib/utils';
 
-	type $$Props = CommandPrimitive.InputProps;
+	type $$Props = CommandPrimitive.InputProps & { wrapperClass: any };
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
 	export let value: string = '';
+	export let wrapperClass;
 </script>
 
-<div class="flex items-center border-b px-2" data-cmdk-input-wrapper="">
-	<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+<div class={`flex items-center border-b px-2 ${wrapperClass || ''}`} data-cmdk-input-wrapper="">
+	<slot>
+		<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+	</slot>
 	<CommandPrimitive.Input
 		class={cn(
 			'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
 			className
 		)}
 		{...$$restProps}
+		on:blur
+		on:change
+		on:focus
+		on:input
 		bind:value
 	/>
 </div>

src/lib/components/ui/input/input.svelte

@@ -13,7 +13,7 @@
 
 <input
 	class={cn(
-		'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0  file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring focus-visible:ring focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+		'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0  file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	bind:value

src/routes/tiptap-styles.scss

@@ -27,6 +27,7 @@
 	}
 	.title {
 		font-size: 3rem;
+		font-weight: 700;
 	}
 }
 

src/routes/workspace/+page.svelte

@@ -1,6 +1,5 @@
 <script>
 	import { goto } from '$app/navigation';
-	import { redirect } from '@sveltejs/kit';
 
 	goto('workspace/home');
 </script>

src/routes/workspace/editor/FileEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Tiptap from './Tiptap.svelte';
+	import Tiptap from './tiptap/Tiptap.svelte';
 	import Overview from './Overview.svelte';
 	import { editor } from './editorStore';
 

src/routes/workspace/editor/Tiptap.svelte → src/routes/workspace/editor/tiptap/Tiptap.svelte

@@ -10,13 +10,14 @@
 	import type { AuthorizerState } from 'akademia-authorizer-svelte/types';
 	import { type Readable } from 'svelte/store';
 	import { goto } from '$app/navigation';
-	import TableOfContents from '../TableOfContents';
+	import TableOfContents from '../../TableOfContents';
 	import ApiHandler from '$lib/api';
 	import Document from '@tiptap/extension-document';
 	import Placeholder from '@tiptap/extension-placeholder';
-	import { Title } from '$lib/editor/extensions/title';
-	import { editor } from './editorStore';
+	import { Title } from './extensions/title';
+	import { editor } from '../editorStore';
 	import { FileInfo, currentFile, documentStore } from '@/api/apiStore';
+	import { MetaSettingsExtension } from './extensions/MetaSettingsExtension';
 
 	let state: AuthorizerState;
 
@@ -81,7 +82,7 @@
 								document: provider.document
 							}),
 							Document.extend({
-								content: 'title block+'
+								content: 'title metaSettings block+'
 							}),
 							TableOfContents,
 							Title,
@@ -126,7 +127,6 @@
 								if (steps.length != 1) {
 									return;
 								}
-								console.log('steps', steps);
 								const typedLetter: string = steps[0].slice?.content?.content[0]?.text;
 								if (!typedLetter) return false;
 
@@ -187,10 +187,6 @@
 		pointer-events: none;
 	}
 
-	:global(.title) {
-		font-size: 3rem;
-	}
-
 	:global() :global(.ProseMirror:focus) {
 		outline: none;
 	}

src/routes/workspace/editor/tiptap/extensions/MemberSearch.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import {
+		Command,
+		CommandEmpty,
+		CommandGroup,
+		CommandInput,
+		CommandItem,
+		CommandList,
+		CommandSeparator
+	} from '@/components/ui/command';
+	import Input from '@/components/ui/input/input.svelte';
+	import { AlignHorizontalSpaceBetween, X } from 'lucide-svelte';
+
+	let focused = false;
+	$: console.log(value);
+
+	let value: string;
+
+	let selectedMembers: string[] = ['9.A'];
+
+	let members = ['Emma Johnson', 'Aiden Smith', 'Sophia Davis', 'Liam Wilson', 'Olivia Thompson'];
+
+	let groups = ['9.A', '9.B', '9.C', '8.A', '8.B', '8.C', '7.A', '7.B', '7.C'];
+
+	function addMember(member: string) {
+		if (!selectedMembers.includes(member)) {
+			selectedMembers = [...selectedMembers, member];
+		}
+		value = '';
+	}
+</script>
+
+<Command class="grid overflow-visible">
+	<div
+		class={`absolute box-content w-[400px] rounded-md border-input bg-background ${focused && 'border drop-shadow-md'}`}
+	>
+		<CommandInput
+			placeholder={'Tilføj klasser eller elever'}
+			on:focus={() => {
+				focused = true;
+			}}
+			on:blur={() => {
+				focused = false;
+			}}
+			bind:value
+			wrapperClass={focused ? 'border-b' : 'border-none'}
+		>
+			{#each selectedMembers as member}
+				<!-- content here -->
+				<div class="mr-2 flex gap-1">
+					<div class="selectedMemeber">
+						<button
+							class="reset"
+							on:click={() => {
+								selectedMembers = selectedMembers.filter((item) => item !== member);
+							}}
+						>
+							<X size="10"></X>
+						</button>
+						<p>
+							{member}
+						</p>
+					</div>
+				</div>
+			{/each}
+		</CommandInput>
+		{#if focused}
+			<!-- content here -->
+
+			<CommandList>
+				<CommandEmpty>No results found.</CommandEmpty>
+				<CommandGroup heading="Grupper">
+					{#each groups as group}
+						<CommandItem onSelect={() => addMember(group)}>{group}</CommandItem>
+					{/each}
+				</CommandGroup>
+				<CommandSeparator />
+				<CommandGroup heading="Elever">
+					{#each members as member}
+						<CommandItem on:click={() => addMember(member)} onSelect={() => addMember(member)}
+							>{member}</CommandItem
+						>
+					{/each}
+				</CommandGroup>
+			</CommandList>
+		{/if}
+	</div>
+</Command>
+
+<style lang="scss">
+	.selectedMemeber {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.2rem 0.5rem;
+		border-radius: 0.5rem;
+		background-color: var(--color-bg-2);
+		/* height: 2rem; */
+		color: var(--color-text-1);
+
+		max-width: 7rem;
+
+		&:hover {
+			max-width: 13rem;
+		}
+
+		p {
+			white-space: nowrap;
+			margin: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+</style>

src/routes/workspace/editor/tiptap/extensions/MetaSettings.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import MemberSearch from './MemberSearch.svelte';
+	import type { NodeViewProps } from '@tiptap/core';
+	import { NodeViewWrapper } from 'svelte-tiptap';
+	import { CalendarClock, CalendarIcon, Users } from 'lucide-svelte';
+	import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+	import { Button } from '@/components/ui/button';
+	import { cn } from '@/utils';
+	import { Calendar } from '@/components/ui/calendar';
+	import {
+		DateFormatter,
+		getLocalTimeZone,
+		type DateValue,
+		CalendarDate,
+		today
+	} from '@internationalized/date';
+	import { Input } from '@/components/ui/input';
+
+	const df = new DateFormatter('en-US', {
+		dateStyle: 'long'
+	});
+
+	// This will set the date to tomorrow
+	let date: DateValue = today(getLocalTimeZone()).add({ days: 1 });
+</script>
+
+<NodeViewWrapper>
+	<div class="cont grid">
+		<div>
+			<CalendarClock size="18"></CalendarClock>
+			<p>Afleveringsfrist</p>
+		</div>
+
+		<div class="flex">
+			<Popover openFocus>
+				<PopoverTrigger asChild let:builder>
+					<Button
+						variant={'ghost'}
+						class={cn(
+							'w-auto justify-start px-2 py-1 text-left text-base font-normal',
+							!date && 'text-muted-foreground'
+						)}
+						builders={[builder]}
+					>
+						{#if date}
+							{df.format(date.toDate(getLocalTimeZone()))}
+						{:else}
+							<span>Vælg dato</span>
+						{/if}
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent class="w-auto p-0">
+					<Calendar bind:value={date} initialFocus />
+				</PopoverContent>
+			</Popover>
+			<p>kl.</p>
+			<Input type="time" class="h-full w-24 border-none text-base"></Input>
+		</div>
+		<div>
+			<Users size="18"></Users>
+			<p>Tildelte</p>
+		</div>
+		<MemberSearch></MemberSearch>
+		<!-- <Button
+			variant={'ghost'}
+			class={cn(
+				'w-[280px] justify-start px-2 py-1 text-left text-base font-normal text-muted-foreground'
+			)}
+		>
+			Ingen
+		</Button> -->
+	</div>
+</NodeViewWrapper>
+
+<style>
+	.cont {
+		grid-template-columns: 10rem 1fr;
+		column-gap: 1rem;
+	}
+
+	.cont p {
+		font-weight: 500;
+		color: var(--color-text-1-t);
+	}
+
+	.cont div {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.time-input {
+		width: 1.5rem;
+	}
+
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	/* Firefox */
+	input[type='number'] {
+		-moz-appearance: textfield;
+	}
+</style>

src/routes/workspace/editor/tiptap/extensions/MetaSettingsExtension.ts

@@ -0,0 +1,62 @@
+import { Editor, Node, mergeAttributes } from '@tiptap/core';
+import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import MetaSettings from './MetaSettings.svelte';
+
+let editor: Editor;
+export const MetaSettingsExtension = Node.create({
+	name: 'metaSettings',
+	group: 'block',
+	atom: true,
+
+	selectable: false,
+	// draggable: true, // Optional: to make the node draggable
+	// inline: false,
+	// isolating: true,
+	// allowGapCursor: true,
+	onTransaction: function ({ transaction }) {
+		// editor = this.editor;
+		// console.log(transaction);
+		// console.log(this.editor);
+		// console.log(transaction.curSelection.$anchor.path[1]);
+	},
+	addProseMirrorPlugins() {
+		const editor = this.editor;
+		return [
+			new Plugin({
+				key: new PluginKey('eventHandler'),
+				props: {
+					handleKeyDown(view, event) {
+						const selection = view.state.selection;
+						if (event.key === 'Backspace') {
+							if (selection.$anchor.pos != view.state.selection.$head.pos) return;
+							if (selection.$anchor.parentOffset !== 0) return;
+							if (selection.$anchor.path[1] !== 2) return;
+							editor
+								.chain()
+								.deleteCurrentNode()
+								.setTextSelection(selection.$anchor.pos - 3)
+								.run();
+							event.preventDefault();
+						} else if (event.key == 'Enter') {
+							if (selection.$anchor.path[1] !== 0) return;
+							if (selection.$anchor.path[3].content.size + 1 !== selection.$anchor.pos) return;
+							editor.commands.setTextSelection(selection.$anchor.pos + 2);
+						}
+					}
+				}
+			})
+		];
+	},
+	parseHTML() {
+		return [{ tag: 'meta-settings-component' }];
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return ['meta-settings-component', mergeAttributes(HTMLAttributes)];
+	},
+
+	addNodeView() {
+		return SvelteNodeViewRenderer(MetaSettings);
+	}
+});