begin working on context menu

Author: Silabear

package-lock.json

@@ -97,3 +97,7 @@ button {
 	@apply bg-zinc-700;
 	font-family: "Lexend", sans-serif;
 }
+
+.ctxItem {
+	@apply flex space-x-2 items-center px-3 py-1.5 hover:bg-white/10;
+}

src/app.css

@@ -0,0 +1,65 @@
+<script lang="ts">
+    // Icons
+	import IconCut from "~icons/tabler/cut";
+	import IconCopy from "~icons/tabler/copy";
+	import IconPaste from "~icons/tabler/clipboard";
+	import IconClearFormatting from "~icons/tabler/clear-formatting";
+	import IconLowercase from "~icons/tabler/letter-case-lower";
+	import IconUppercase from "~icons/tabler/letter-case-upper";
+	import IconItalic from "~icons/tabler/italic";
+
+    let pos = { x: 0, y: 0 };
+    let browser = { h:0, w:0 };
+    let menu = { h: 0, w: 0 };
+    let showMenu = false;
+
+    function onOpen(e: MouseEvent){
+        e.preventDefault()
+        showMenu = true
+        browser = {
+            w: window.innerWidth,
+            h: window.innerHeight
+        };
+        pos = {
+            x: e.clientX,
+            y: e.clientY
+        };
+        // If bottom part of context menu will be displayed
+        // after right-click, then change the position of the
+        // context menu. This position is controlled by `top` and `left`
+        // at inline style. 
+        // Instead of context menu is displayed from top left of cursor position
+        // when right-click occur, it will be displayed from bottom left.
+        if (browser.h -  pos.y < menu.h)
+            pos.y = pos.y - menu.h
+        if (browser.w -  pos.x < menu.w)
+            pos.x = pos.x - menu.w
+    }
+
+    function getContextMenuDimension(node: HTMLDivElement){
+        // This function will get context menu dimension
+        // when navigation is shown => showMenu = true
+        let height = node.offsetHeight
+        let width = node.offsetWidth
+        menu = {
+            h: height,
+            w: width
+        }
+    }
+</script>
+
+{#if showMenu}
+<div use:getContextMenuDimension class="z-10 bg-zinc-900 rounded-lg absolute top-32 left-32 text-sm">
+    <div class="flex flex-col">
+        <button class="ctxItem"><IconCut /><span>Cut</span></button>
+        <button class="ctxItem"><IconCopy /><span>Copy</span></button>
+        <button class="ctxItem"><IconPaste /><span>Paste</span></button>
+        <hr class="text-zinc-800" />
+        <button class="ctxItem"><IconCopy /><span>Copy Formatting</span></button>
+        <button class="ctxItem"><IconClearFormatting /><span>Clear Formatting</span></button>
+        <hr class="text-zinc-800" />
+        <button class="ctxItem"><IconLowercase /><span>Convert to lowercase</span></button>
+        <button class="ctxItem"><IconUppercase /><span>Convert to uppercase</span></button>
+    </div>
+</div>
+{/if}

src/lib/components/text/ContextMenu.svelte

@@ -18,18 +18,24 @@
 		AtlasObjectNode,
 		PlayerObjectNode,
 	} from "$lib/tiptap/extensions/index";
+
 	// Components
 	import Modal from "$lib/components/Modal.svelte";
 	import MiniEditor from "$lib/components/text/MiniEditor.svelte";
 	import MiniRenderer from "$lib/components/text/MiniRenderer.svelte";
 	import ColorPicker from "svelte-awesome-color-picker";
+	import TextStyleButtons from "$lib/components/text/TextStyleButtons.svelte";
+	import ToolbarButton from "$lib/components/text/ToolbarButton.svelte";
+	import ContextMenu from "$lib/components/text/ContextMenu.svelte";
 
+	// Important functions things
 	import { convertToTextOrEmpty, snbtToDocument } from "$lib/text/nbt";
 	import { Editor, type JSONContent } from "@tiptap/core";
 	import Color from "@tiptap/extension-color";
 	import Placeholder from "@tiptap/extension-placeholder";
 	import StarterKit from "@tiptap/starter-kit";
 	import { onDestroy, onMount } from "svelte";
+
 	// Icons
 	import IconUndo from "~icons/tabler/arrow-back-up";
 	import IconRedo from "~icons/tabler/arrow-forward-up";
@@ -48,12 +54,9 @@
 	import IconSquare from "~icons/tabler/square-filled";
 	import IconHollow from "~icons/tabler/square-x";
 
+	// Random variables
 	import { page } from "$app/state";
-
-	import TextStyleButtons from "$lib/components/text/TextStyleButtons.svelte";
 	import { colorMap } from "$lib/text/general";
-
-	import ToolbarButton from "$lib/components/text/ToolbarButton.svelte";
 	import { openDataStore } from "$lib/db";
 	import { fontLUT } from "$lib/tiptap/extensions/fonts";
 	import { tooltip } from "$lib/tooltip";
@@ -73,6 +76,8 @@
 	let doesContentExist: boolean = $state(false);
 	let shouldOptimise = $state(true);
 
+	let editorCtxMenu: ContextMenu | undefined = $state()!;
+
 	// Import
 	let importDialog: Modal = $state()!;
 	let importText: string = $state("");
@@ -541,8 +546,10 @@
 	</div>
 
 	<div
+		role="none"
 		class="font-minecraft w-full grow overflow-auto bg-zinc-800 first:focus:outline-none"
 		spellcheck="false"
+		oncontextmenu={editorCtxMenu!.onOpen}
 		bind:this={element}>
 	</div>
 
@@ -567,7 +574,7 @@
 						recentlyCopied = true;
 						setTimeout(() => (recentlyCopied = false), 2000);
 					}}
-					aria-label="Copy">
+					aria-label="Copy output">
 					{#if recentlyCopied}
 						<IconTick />
 					{:else}
@@ -825,3 +832,5 @@
 		<modal.default editor={editor!} bind:unicodeSelectorDialog />
 	{/await}
 </div>
+
+<ContextMenu bind:this={editorCtxMenu} />