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

@@ -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) {