Fix context menu implementation and add clipboard utils

packages/app/config/context-menu/default/index.js

@@ -1,3 +1,6 @@
+import copyToClipboard from "@utils/copyToClipboard"
+import pasteFromClipboard from "@utils/pasteFromClipboard"
+
 export default {
 	"default-context": (items) => {
 		const text = window.getSelection().toString()
@@ -10,7 +13,7 @@ export default {
 					copyToClipboard(text)
 
 					ctx.close()
-                }
+				},
 			})
 		}
 
@@ -18,10 +21,9 @@ export default {
 			label: "Paste",
 			icon: "FiClipboard",
 			action: (clickedItem, ctx) => {
-                app.message.error("This action is not supported by your browser")
+				pasteFromClipboard(clickedItem)
-
 				ctx.close()
-            }
+			},
 		})
 
 		items.push({
@@ -33,9 +35,9 @@ export default {
 				})
 
 				ctx.close()
-            }
+			},
 		})
 
 		return items
-    }
+	},
 }

packages/app/config/context-menu/post/index.js

@@ -3,13 +3,17 @@ import download from "@utils/download"
 
 export default {
 	"post-card": (items, parent, element, control) => {
+		if (!parent.id) {
+			parent = parent.parentNode
+		}
+
 		items.push({
 			label: "Copy ID",
 			icon: "FiCopy",
 			action: () => {
 				copyToClipboard(parent.id)
 				control.close()
-            }
+			},
 		})
 
 		items.push({
@@ -18,7 +22,7 @@ export default {
 			action: () => {
 				copyToClipboard(`${window.location.origin}/post/${parent.id}`)
 				control.close()
-            }
+			},
 		})
 
 		let media = null
@@ -43,7 +47,7 @@ export default {
 				action: () => {
 					copyToClipboard(media.src)
 					control.close()
-                }
+				},
 			})
 
 			items.push({
@@ -52,7 +56,7 @@ export default {
 				action: () => {
 					window.open(media.src, "_blank")
 					control.close()
-                }
+				},
 			})
 
 			items.push({
@@ -61,10 +65,10 @@ export default {
 				action: () => {
 					download(media.src)
 					control.close()
-                }
+				},
 			})
 		}
 
 		return items
-    }
+	},
 }

packages/app/src/cores/contextMenu/components/contextMenu/index.jsx

@@ -9,13 +9,12 @@ const ContextMenu = (props) => {
 	const [visible, setVisible] = React.useState(true)
 	const { items = [], cords, clickedComponent, ctx } = props
 
-	async function onClose() {
-		setVisible(false)
-		props.unregisterOnClose(onClose)
-	}
-
 	React.useEffect(() => {
-		props.registerOnClose(onClose)
+		if (props.fireWhenClosing) {
+			props.fireWhenClosing(() => {
+				setVisible(false)
+			})
+		}
 	}, [])
 
 	const handleItemClick = async (item) => {

packages/app/src/cores/contextMenu/context_menu.core.js

@@ -1,21 +1,20 @@
 import React from "react"
-
 import { Core, EventBus } from "@ragestudio/vessel"
-
 import ContextMenu from "./components/contextMenu"
-
+import DefaultContext from "@config/context-menu/default"
-import DefaultContenxt from "@config/context-menu/default"
 import PostCardContext from "@config/context-menu/post"
 
 export default class ContextMenuCore extends Core {
 	static namespace = "contextMenu"
 
 	contexts = {
-        ...DefaultContenxt,
+		...DefaultContext,
 		...PostCardContext,
 	}
 
 	eventBus = new EventBus()
+	isMenuOpen = false
+	fireWhenClosing = null
 
 	async onInitialize() {
 		if (app.isMobile) {
@@ -23,136 +22,190 @@ export default class ContextMenuCore extends Core {
 			return false
 		}
 
-        document.addEventListener("contextmenu", this.handleEvent.bind(this))
+		document.addEventListener("contextmenu", this.handleEvent)
 	}
 
-    async handleEvent(event) {
+	handleEvent = async (event) => {
 		event.preventDefault()
 
-        // get the cords of the mouse
+		// obtain cord of mouse
 		const x = event.clientX
 		const y = event.clientY
 
-        // get the component that was clicked
+		// get clicked component
 		const component = document.elementFromPoint(x, y)
 
-        // check if is clicking inside a context menu or a children inside a context menu
+		// check if right-clicked inside a context menu
-        if (component.classList.contains("contextMenu") || component.closest(".contextMenu")) {
+		if (
+			component.classList.contains("contextMenu") ||
+			component.closest(".contextMenu")
+		) {
 			return
 		}
 
+		// gen items
 		const items = await this.generateItems(component)
 
-        if (!items) {
+		// if no items, abort
-            this.console.warn("No context menu items found, aborting")
+		if (!items || items.length === 0) {
+			this.console.error("No context menu items found, aborting")
 			return false
 		}
 
+		// render menu
 		this.show({
-            registerOnClose: (cb) => { this.eventBus.on("close", cb) },
+			cords: { x, y },
-            unregisterOnClose: (cb) => { this.eventBus.off("close", cb) },
-            cords: {
-                x,
-                y,
-            },
 			clickedComponent: component,
 			items: items,
+			fireWhenClosing: (fn) => {
+				this.fireWhenClosing = fn
+			},
 			ctx: {
-                close: this.onClose,
+				close: this.close,
-            }
+			},
 		})
 	}
 
-    registerContext = async (element, context) => {
+	registerContext = (element, context) => {
 		this.contexts[element] = context
 	}
 
 	generateItems = async (element) => {
-        let items = []
+		let contextNames = []
+		let finalItems = []
 
-        // find the closest context with attribute (context-menu)
+		// search parent element with context-menu attribute
-        // if not found, use default context
 		const parentElement = element.closest("[context-menu]")
 
-        let contexts = []
+		// if parent element exists, get context names from attribute
-
 		if (parentElement) {
-            contexts = parentElement.getAttribute("context-menu") ?? []
+			const contextAttr = parentElement.getAttribute("context-menu") || ""
+			contextNames = contextAttr
+				.split(",")
+				.map((context) => context.trim())
 
-            if (typeof contexts === "string") {
+			// if context includes "ignore", no show context menu
-                contexts = contexts.split(",").map((context) => context.trim())
+			if (contextNames.includes("ignore")) {
-            }
-        }
-
-        // if context includes ignore, return null
-        if (contexts.includes("ignore")) {
 				return null
 			}
+		}
 
-        // check if context includes no-default, if not, push default context and remove no-default
+		// if context includes "no-default", no add default context
-        if (contexts.includes("no-default")) {
+		if (!contextNames.includes("no-default")) {
-            contexts = contexts.filter((context) => context !== "no-default")
+			contextNames.push("default-context")
 		} else {
-            contexts.push("default-context")
+			// remove "no-default" from context names
-        }
+			contextNames = contextNames.filter(
-
+				(context) => context !== "no-default",
-        for await (const [index, context] of contexts.entries()) {
-            let contextObject = this.contexts[context]
-
-            if (!contextObject) {
-                this.console.warn(`Context ${context} not found`)
-                continue
-            }
-
-            if (typeof contextObject === "function") {
-                contextObject = await contextObject(items, parentElement, element, {
-                    close: this.onClose,
-                })
-            }
-
-            // push divider
-            if (contexts.length > 0 && index !== contexts.length - 1) {
-                items.push({
-                    type: "separator"
-                })
-            }
-        }
-
-        // fullfill each item with a correspondent index if missing declared
-        items = items.map((item, index) => {
-            if (!item.index) {
-                item.index = index
-            }
-
-            return item
-        })
-
-        // short items (if has declared index)
-        items = items.sort((a, b) => a.index - b.index)
-
-        // remove undefined items
-        items = items.filter((item) => item !== undefined)
-
-        return items
-    }
-
-    show = async (payload) => {
-        app.cores.window_mng.render(
-            "context-menu-portal",
-            React.createElement(ContextMenu, payload),
-            {
-                onClose: this.onClose,
-                createOrUpdate: true,
-                closeOnClickOutside: true,
-            },
 			)
 		}
 
-    onClose = async (delay = 200) => {
+		// process each context sequentially
-        this.eventBus.emit("close", delay)
+		for (let i = 0; i < contextNames.length; i++) {
+			const contextName = contextNames[i]
 
-        await new Promise((resolve) => {
+			// obtain contexted items
-            setTimeout(resolve, delay)
+			const contextItems = await this.getContextItems(
+				contextName,
+				parentElement,
+				element,
+			)
+
+			// if any contexted items exist, add them to the final items
+			if (contextItems && contextItems.length > 0) {
+				finalItems = finalItems.concat(contextItems)
+
+				// if is not the last context, add a separator
+				if (i < contextNames.length - 1) {
+					finalItems.push({
+						type: "separator",
 					})
 				}
+			}
+		}
+
+		// assign indices
+		finalItems = finalItems.map((item, index) => {
+			if (!item.index) {
+				item.index = index
+			}
+			return item
+		})
+
+		// sort items by index
+		finalItems.sort((a, b) => a.index - b.index)
+
+		// remove undefined items
+		finalItems = finalItems.filter((item) => item !== undefined)
+
+		return finalItems
+	}
+
+	getContextItems = async (contextName, parentElement, element) => {
+		const contextObject = this.contexts[contextName]
+
+		if (!contextObject) {
+			this.console.warn(`Context ${contextName} not found`)
+			return []
+		}
+
+		// if is a function, execute it to get the elements
+		if (typeof contextObject === "function") {
+			try {
+				const newItems = []
+
+				// call the function
+				const result = await contextObject(
+					newItems,
+					parentElement,
+					element,
+					{ close: this.close },
+				)
+
+				return result || newItems
+			} catch (error) {
+				this.console.error(
+					`Error processing context [${contextName}] >`,
+					error,
+				)
+				return []
+			}
+		}
+
+		// if it is an object (array), return it directly
+		return Array.isArray(contextObject) ? contextObject : []
+	}
+
+	show = async (props) => {
+		app.cores.window_mng.render(
+			"context-menu-portal",
+			React.createElement(ContextMenu, props),
+			{
+				useFrame: false,
+				createOrUpdate: true,
+				closeOnClickOutside: true, // sets default click outside behavior
+				onClose: this.onClose, // triggered when the menu is closing
+			},
+		)
+
+		this.isMenuOpen = true
+	}
+
+	// triggered when the menu is closing
+	onClose = async (delay = 200) => {
+		if (typeof this.fireWhenClosing === "function") {
+			await this.fireWhenClosing()
+		}
+
+		if (delay > 0) {
+			await new Promise((resolve) => setTimeout(resolve, delay))
+		}
+
+		this.isMenuOpen = false
+	}
+
+	// close the menu
+	close = async () => {
+		app.cores.window_mng.close("context-menu-portal")
+	}
 }