From 7b32fbbd468a79f57dfe941ffc2d34edf51253ab Mon Sep 17 00:00:00 2001
From: ian <licitdev@gmail.com>
Date: Wed, 13 Jul 2022 00:32:35 +0800
Subject: [PATCH] Fix/wysiwyg context menu (#14404)

---
 .../input-rich-text-html.vue                   | 18 ++++++++++++++++++
 .../input-rich-text-html/tinymce-overrides.css |  4 ++++
 .../input-rich-text-html/useImage.ts           |  2 +-
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue b/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
index 7d0edddf5a..f80c297985 100644
--- a/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
+++ b/app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
@@ -464,6 +464,24 @@ export default defineComponent({
 				});
 				setCount();
 			});
+
+			editor.on('OpenWindow', function (e: any) {
+				if (e.dialog?.getData) {
+					const data = e.dialog?.getData();
+
+					if (data) {
+						if (data.url) {
+							e.dialog.close();
+							editor.ui.registry.getAll().buttons.customlink.onAction();
+						}
+
+						if (data.src) {
+							e.dialog.close();
+							editor.ui.registry.getAll().buttons.customimage.onAction(true);
+						}
+					}
+				}
+			});
 		}
 
 		function setFocus(val: boolean) {
diff --git a/app/src/interfaces/input-rich-text-html/tinymce-overrides.css b/app/src/interfaces/input-rich-text-html/tinymce-overrides.css
index 88f914ad7f..5884787e4e 100644
--- a/app/src/interfaces/input-rich-text-html/tinymce-overrides.css
+++ b/app/src/interfaces/input-rich-text-html/tinymce-overrides.css
@@ -273,6 +273,10 @@ body.dark .tox .tox-toolbar__overflow {
 	line-height: unset;
 }
 
+.tox .tox-collection__item-accessory {
+	color: var(--foreground-normal);
+}
+
 .tox .tox-textfield:focus,
 .tox .tox-selectfield select:focus,
 .tox .tox-textarea:focus {
diff --git a/app/src/interfaces/input-rich-text-html/useImage.ts b/app/src/interfaces/input-rich-text-html/useImage.ts
index 414a66fd51..d02dd847dd 100644
--- a/app/src/interfaces/input-rich-text-html/useImage.ts
+++ b/app/src/interfaces/input-rich-text-html/useImage.ts
@@ -62,7 +62,7 @@ export default function useImage(
 		onAction: (buttonApi: any) => {
 			imageDrawerOpen.value = true;
 
-			if (buttonApi.isActive()) {
+			if (buttonApi === true || buttonApi.isActive()) {
 				const node = editor.value.selection.getNode() as HTMLImageElement;
 				const imageUrl = node.getAttribute('src');
 				const imageUrlParams = imageUrl ? new URL(imageUrl).searchParams : undefined;