✨ Added circle and rectangle

frontend/src/lib/editor/slides/element_selection.svelte

@@ -11,7 +11,9 @@
 	export let selected_element;
 	const keybinding_list = {
 		t: ElementTypes.Text,
-		h: ElementTypes.Headline
+		h: ElementTypes.Headline,
+		r: ElementTypes.Rectangle,
+		c: ElementTypes.Circle
 		// "i": ElementTypes.Image
 	};
 
@@ -50,6 +52,20 @@
 			type: ElementTypes.Text,
 			icon: undefined,
 			shortcut: 't'
+		},
+		{
+			name: 'Rectangle',
+			description: 'Just a rectangle',
+			type: ElementTypes.Rectangle,
+			icon: undefined,
+			shortcut: 'r'
+		},
+		{
+			name: 'Circle',
+			description: 'Just a circle',
+			type: ElementTypes.Circle,
+			icon: undefined,
+			shortcut: 'c'
 		}
 	];
 </script>

frontend/src/lib/editor/slides/types/circle.svelte

@@ -0,0 +1,20 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	export let data: string;
+	export let editor = true;
+
+	if (!data) {
+		data = '#ed333b';
+	}
+	$: console.log(data);
+</script>
+
+<div class="rounded-full w-full h-full flex justify-center p-2" style="background-color: {data}">
+	{#if editor}
+		<input type="color" bind:value={data} class="m-auto hover:cursor-pointer" />
+	{/if}
+</div>

frontend/src/lib/editor/slides/types/rectangle.svelte

@@ -0,0 +1,20 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	export let data: string;
+	export let editor = true;
+
+	if (!data) {
+		data = '#ed333b';
+	}
+	$: console.log(data);
+</script>
+
+<div class="w-full h-full flex justify-center p-2" style="background-color: {data}">
+	{#if editor}
+		<input type="color" bind:value={data} class="m-auto hover:cursor-pointer" />
+	{/if}
+</div>