Cannot enter input in URL dialog

[HikaruShiho]

Also posted in Stack Overflow https://stackoverflow.com/questions/76223386/tinymce-5-cannot-enter-input-in-url-dialog

Current Status

• Using the link plug-in, click on the link icon in the menu bar to display the URL dialog.
• However, I am unable to enter the URL or title I want to link to in the input element in the dialog.
• But when I enter text into the editor -> select the entered text -> paste the URL, the link is set, and when I open the dialog, the text and the URL to be linked are set in the input element.

Current Code

<script setup lang="ts">
import Editor from "@tinymce/tinymce-vue";

const init = {
  selector: "textarea",
  height: 500,
  skin: "oxide-dark",
  placeholder: "コンテンツを入力",
  plugins: "link lists",
  toolbar:
    "link custom-image h1 h2 h3 | bold italic underline forecolor backcolor | numlist bullist indent | alignleft aligncenter alignright | blockquote",
  menubar: "insert | format",
  link_default_target: '_blank', // リンクを別タブで開く
  language: "ja", // 言語を日本語に設定
  branding: false, // 右下のロゴを非表示
  content_style: "img { max-width: 100%; height: auto; }", // imgタグのサイズを調整
  setup: function (editor: any) {
    editor.ui.registry.addButton("custom-image", {
      icon: "image",
      tooltip: "custom-image",
      onAction: function () {
        // <input type="file">のダイアログを開く
        // 画像アップロードでカーソル位置にimgタグを挿入
        const input = document.createElement("input");
        input.setAttribute("type", "file");
        input.setAttribute("accept", "image/*");
        input.click();
        input.onchange = function () {
          if (input.files && input.files[0]) {
            const file = input.files[0];
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
              const img = document.createElement("img");
              img.src = reader.result as string;
              editor.insertContent(img.outerHTML);
            };
          }
        };
      },
    });
  },
};
</script>

<template>
  <Editor api-key="xxxxxx" :init="init" />
</template>

Expected behavior

• I want to set the title and URL from the input element of the URL tie log.

development environment

• @tinymce/tinymce-vue ^5.0.1
• @ionic/vue ^6.0.0
• vue ^3.2.21
• typescript ^4.3.5
• Node v18.10.0
• MacBook Air (M1, 2020)

---

Is this a bug? Or am I describing it wrong? I need your help.

---

[tiny-stale-bot]

This issue is stale because it has been open 30 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 7 days.

[tiny-stale-bot]

This issue was closed because it has been stalled for 7 days with no activity.