// 画像以外には非対応です

$p.events.on_editor_load = function () {

    // ①ヘッダーにサムネイル表示要素を追加

    function AddPreviewthumbnail(){

        $('#Header').after(`

            <div id="thumbnail-preview" style="display:none; position:absolute; z-index:1000;">

                <img id="thumbnail-image" src="" alt="Thumbnail" style="max-width:200px; max-height:200px;">

            </div>

        `);

    }



    // AddPreviewthumbnailを実行

    AddPreviewthumbnail();



    // サムネイル表示機能

    function Thumbnailshow(){

        // ②各リンクに対してサムネイルのデータ属性を追加

        $(".file-name").each(function() {

            var fileUrl = $(this).attr("href"); // リンクのURLを取得

            var fileId = fileUrl.split('/')[2]; // ファイルIDを抽出 (例では3番目のスラッシュ後)

            

            // サムネイルURLを生成（ファイルのアドレス）

            var thumbnailUrl = "/binaries/" + fileId + "/show";

            

            // data-thumbnail属性を追加

            $(this).attr("data-thumbnail", thumbnailUrl);

        });

        

        // マウスオーバーで追加したサムネイルのデータ属性を表示させる

        $(".file-name").hover(function(event) {

            var thumbnailUrl = $(this).data("thumbnail");

            $("#thumbnail-image").attr("src", thumbnailUrl);

            

            // ③サムネイルをリンクの位置に表示

            $("#thumbnail-preview").css({

                top: event.pageY + 10, // マウスのすぐ下に表示

                left: event.pageX + 15 // マウスのすぐ右に表示

            }).show();

            

        }, function() {

            // マウスがリンクから外れたときにサムネイルを非表示にする

            $("#thumbnail-preview").hide();

        });

        

        // マウスが動いたときにサムネイルの位置を更新

        $(".file-name").mousemove(function(event) {

            $("#thumbnail-preview").css({

                top: event.pageY + 10,  // マウスカーソルの10px下に表示

                left: event.pageX + 15  // マウスカーソルの15px右に表示

            });

        });

    }



    // Thumbnailshowを実行

    Thumbnailshow();

}