From 9fe18f18730fbdb08c0b02b961836e45b54ce3ac Mon Sep 17 00:00:00 2001
From: Julia Casamitjana <62883011+JuliaCasamitjana@users.noreply.github.com>
Date: Thu, 11 Apr 2024 11:48:41 +0200
Subject: [PATCH] Add and customize ToastUI image insertion option

The default ToastUI image insertion feature includes both URL and file
upload options. However, file upload functionality isn't supported in
the application. This commit addresses the issue by implementing custom
code to hide the file upload button while preserving the URL insertion
option.
---
 app/assets/javascripts/markdown_editor.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/app/assets/javascripts/markdown_editor.js b/app/assets/javascripts/markdown_editor.js
index a9354843..0ccfff50 100644
--- a/app/assets/javascripts/markdown_editor.js
+++ b/app/assets/javascripts/markdown_editor.js
@@ -32,6 +32,7 @@ const initializeMarkdownEditors = () => {
       toolbarItems: [
         ["heading", "bold", "italic"],
         ["link", "quote", "code", "codeblock"],
+        ["image"],
         ["ul", "ol"],
       ],
       initialEditType: "markdown",
@@ -54,6 +55,20 @@ const initializeMarkdownEditors = () => {
   });
 };
 
+const disableImageUpload = () => {
+  const target = document.querySelector(".toastui-editor-popup");
+  if (!target) {
+    return;
+  }
+  // Reference:https://github.com/nhn/tui.editor/issues/1204#issuecomment-1068364431
+  const observer = new MutationObserver(() => {
+    target.querySelector('[aria-label="URL"]').click();
+    target.querySelector(".toastui-editor-tabs").style.display = "none";
+  });
+
+  observer.observe(target, { attributes: true, attributeFilter: ["style"] });
+};
+
 const setMarkdownEditorTheme = (theme) => {
   const editors = document.querySelectorAll(".toastui-editor-defaultUI");
   editors.forEach((editor) => {
@@ -69,6 +84,7 @@ const setMarkdownEditorTheme = (theme) => {
 
 $(document).on("turbolinks:load", function () {
   initializeMarkdownEditors();
+  disableImageUpload();
 });
 
 $(document).on("theme:change", function (event) {