diff --git a/src/lib/components/ui/command/command-input.svelte b/src/lib/components/ui/command/command-input.svelte index 18c3408b..7d12dcb3 100644 --- a/src/lib/components/ui/command/command-input.svelte +++ b/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; -
- +
+ + +
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte index 031cdd6a..5e846cbb 100644 --- a/src/lib/components/ui/input/input.svelte +++ b/src/lib/components/ui/input/input.svelte @@ -13,7 +13,7 @@ import { goto } from '$app/navigation'; - import { redirect } from '@sveltejs/kit'; goto('workspace/home'); diff --git a/src/routes/workspace/editor/FileEditor.svelte b/src/routes/workspace/editor/FileEditor.svelte index 33509114..39daf616 100644 --- a/src/routes/workspace/editor/FileEditor.svelte +++ b/src/routes/workspace/editor/FileEditor.svelte @@ -1,5 +1,5 @@ + + +
+ { + focused = true; + }} + on:blur={() => { + focused = false; + }} + bind:value + wrapperClass={focused ? 'border-b' : 'border-none'} + > + {#each selectedMembers as member} + +
+
+ +

+ {member} +

+
+
+ {/each} + + {#if focused} + + + + No results found. + + {#each groups as group} + addMember(group)}>{group} + {/each} + + + + {#each members as member} + addMember(member)} onSelect={() => addMember(member)} + >{member} + {/each} + + + {/if} +
+ + + diff --git a/src/routes/workspace/editor/tiptap/extensions/MetaSettings.svelte b/src/routes/workspace/editor/tiptap/extensions/MetaSettings.svelte new file mode 100644 index 00000000..27cbb29b --- /dev/null +++ b/src/routes/workspace/editor/tiptap/extensions/MetaSettings.svelte @@ -0,0 +1,106 @@ + + + +
+
+ +

Afleveringsfrist

+
+ +
+ + + + + + + + +

kl.

+ +
+
+ +

Tildelte

+
+ + +
+ + + diff --git a/src/routes/workspace/editor/tiptap/extensions/MetaSettingsExtension.ts b/src/routes/workspace/editor/tiptap/extensions/MetaSettingsExtension.ts new file mode 100644 index 00000000..8c9939cc --- /dev/null +++ b/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); + } +}); diff --git a/src/lib/editor/extensions/title.ts b/src/routes/workspace/editor/tiptap/extensions/title.ts similarity index 100% rename from src/lib/editor/extensions/title.ts rename to src/routes/workspace/editor/tiptap/extensions/title.ts diff --git a/src/routes/workspace/sidebar/SidebarAssignment.svelte b/src/routes/workspace/sidebar/SidebarAssignment.svelte index 8a8a2fc8..c9512479 100644 --- a/src/routes/workspace/sidebar/SidebarAssignment.svelte +++ b/src/routes/workspace/sidebar/SidebarAssignment.svelte @@ -7,7 +7,7 @@ import type { Readable } from 'svelte/store'; import { EditorExtensions } from '@/editor/extensions'; import Document from '@tiptap/extension-document'; - import { Title } from '@/editor/extensions/title'; + import { Title } from '../editor/tiptap/extensions/title'; import ApiHandler from '@/api'; export let sidebarVisible: boolean; diff --git a/src/routes/workspace/tiptap-test/+page.svelte b/src/routes/workspace/tiptap-test/+page.svelte new file mode 100644 index 00000000..d4b4fb0f --- /dev/null +++ b/src/routes/workspace/tiptap-test/+page.svelte @@ -0,0 +1,32 @@ + + +
+ +
diff --git a/static/themes/light.css b/static/themes/light.css index 35d322ab..b27143fc 100644 --- a/static/themes/light.css +++ b/static/themes/light.css @@ -9,7 +9,7 @@ --color-theme-1: #56c7e0; --color-theme-2: #ff3e00; --color-text-0-t: rgba(0, 0, 0, 0.8); - --color-text-1-t: rgba(0, 0, 0, 0.7); + --color-text-1-t: rgba(0, 0, 0, 0.6); --color-text-2-t: rgba(0, 0, 0, 0.4); --color-text-0: hsl(0, 0%, 20%); --color-text-1: hsl(0, 0%, 30%); @@ -52,7 +52,8 @@ --destructive: 0 72.2% 50.6%; --destructive-foreground: 0 0% 98%; - --ring: 240 10% 70%; + /* --ring: 240 10% 70%; */ + --ring: 217 90% 80%; } .float-panel {