[js] 改进型 - 隐藏图片或者任意块

代码功能：

1. 默认隐藏图片，鼠标移到图片上时图片显示。
2. 点击块标选中块然后 ctrl+alt+b，可以让任意块隐藏。再按一次快捷键，可令其显现

美中不足之处：

1. 可能有 bug。不好说，我没测过
2. 隐藏状态不能保存，也就是下一次打开所有块又是显现状态。
3. 我其实希望的是导出的时候也能保持隐藏状态，但是看起来目前并没能实现。如果有大佬可以做到这一点的话……

代码

// 实现图片块默认模糊，鼠标悬停清晰，其他块按下 Ctrl/Meta + Alt + B 可模糊
(() => {
    // 模糊样式
    const filter = 'blur(6px)';
    // 模糊期间块是否可编辑，默认禁止编辑
    const editableOnBlur = false;

    // 初始为图片添加默认模糊效果
    const applyDefaultBlurToImages = () => {
        const imageElements = document.querySelectorAll('.protyle-wysiwyg img, .img--select img');
        imageElements.forEach((img) => {
            img.style.filter = filter;
            // 添加悬停事件，悬停清晰，移开模糊
            img.addEventListener('mouseenter', () => {
                img.style.filter = '';
            });
            img.addEventListener('mouseleave', () => {
                img.style.filter = filter;
            });
        });
    };

    // 调用一次以确保初始状态
    applyDefaultBlurToImages();

    // 监听 DOM 变化，动态为新增图片块添加模糊效果
    const observer = new MutationObserver(() => {
        applyDefaultBlurToImages();
    });
    observer.observe(document.body, { childList: true, subtree: true });

    // 监听按键事件，处理其他块的模糊效果
    document.addEventListener('keydown', (event) => {
        // 检查是否按下了 Ctrl/Meta + Alt + B
        if ((event.ctrlKey || event.metaKey) && event.altKey && event.code === 'KeyB' && !event.shiftKey) {
            // 遍历目标块元素
            const targetElements = document.querySelectorAll('.protyle-wysiwyg--select');
            const isBlurred = !!document.querySelector(`.protyle-wysiwyg--select[style*="${filter}"]`);
            targetElements.forEach((element) => {
                if (isBlurred) {
                    // 如果已经应用了 blur 样式，则移除
                    element.style.filter = '';
                    // 恢复编辑状态
                    if (!editableOnBlur) {
                        const contenteditableEl = element.querySelector('[contenteditable][data-blurred="true"]') || element.closest('[contenteditable][data-blurred="true"]');
                        if (contenteditableEl) {
                            contenteditableEl.setAttribute('contenteditable', true);
                            delete contenteditableEl.dataset.blurred;
                        }
                    }
                } else {
                    // 如果没有应用 blur 样式，则添加
                    element.style.filter = filter;
                    // 禁止编辑
                    if (!editableOnBlur) {
                        const contenteditableEl = element.querySelector('[contenteditable="true"]') || element.closest('[contenteditable="true"]');
                        if (contenteditableEl) {
                            contenteditableEl.setAttribute('contenteditable', false);
                            contenteditableEl.dataset.blurred = true;
                        }
                    }
                }
            });
        }
    });
})();