[js] 快速改样式 ----// 利用 protyle.toolbar.setInlineMark 进行块更新后保存

//protyle.toolbar.setInlineMark
(() => {
    // 创建按钮组
    const buttonGroup = document.createElement('div');
    buttonGroup.style.position = 'fixed';
    buttonGroup.style.top = '600px';
    buttonGroup.style.left = '1200px';
    buttonGroup.style.display = 'flex';
    buttonGroup.style.flexDirection = 'column';
    buttonGroup.style.cursor = 'move';
    buttonGroup.style.userSelect = 'none';

    // 创建颜色按钮
    function createButton(color) {
        const button = document.createElement('button');
        button.textContent = color.name;
        button.style.backgroundColor = color.background;
        button.style.color = color.color;
        button.style.padding = '1px 2px';
        button.style.border = 'none';
        button.style.cursor = 'pointer';
        button.style.marginBottom = '5px';
        button.addEventListener('click', async () => {
            const protyle = getProtyle();
            if (!protyle) {
                console.error("未找到 Protyle 实例");
                return;
            }

            const selection = window.getSelection();
            if (selection.rangeCount > 0) {
                const range = selection.getRangeAt(0);
                if (range.startContainer.nodeType === Node.TEXT_NODE && range.startContainer.parentNode) {
                    protyle.toolbar.setInlineMark(protyle, "bold", range);
                    if (color.background) {
                        protyle.toolbar.setInlineMark(protyle, "backgroundColor", range, {
                            type: "backgroundColor",
                            color: color.background
                        });
                    }
                    if (color.color) {
                        protyle.toolbar.setInlineMark(protyle, "color", range, {
                            type: "color",
                            color: color.color
                        });
                    }
                } else {
                    console.error("选中的文本范围不包含有效的节点");
                }
            }
        });
        button.addEventListener('mouseover', () => {
            button.style.background = 'linear-gradient(to right, #ff7e5f, #feb47b)';
            button.style.color = 'white';
        });
        button.addEventListener('mouseout', () => {
            button.style.background = color.background;
            button.style.color = color.color;
        });
        return button;
    }

    // 创建清除样式按钮
    function createClearButton() {
        const button = document.createElement('button');
        button.textContent = '清除';
        button.style.backgroundColor = '#CCCCCC';
        button.style.color = '#000000';
        button.style.padding = '1px 2px';
        button.style.border = 'none';
        button.style.cursor = 'pointer';
        button.addEventListener('click', async () => {
            const protyle = getProtyle();
            if (!protyle) {
                console.error("未找到 Protyle 实例");
                return;
            }

            const selection = window.getSelection();
            if (selection.rangeCount > 0) {
                const range = selection.getRangeAt(0);
                if (range.startContainer.nodeType === Node.TEXT_NODE && range.startContainer.parentNode) {
                    protyle.toolbar.setInlineMark(protyle, "clear", range);
                } else {
                    console.error("选中的文本范围不包含有效的节点");
                }
            }
        });
        return button;
    }

    // 获取Protyle实例
    function getProtyle() {
        try {
            if (document.getElementById("sidebar")) return siyuan.mobile.editor.protyle;
            const currDoc = siyuan?.layout?.centerLayout?.children.map(item => item.children.find(item => item.headElement?.classList.contains('item--focus') && (item.panelElement.closest('.layout__wnd--active') || item.panelElement.closest('[data-type="wnd"]')))).find(item => item);
            return currDoc?.model.editor.protyle;
        } catch (e) {
            console.error(e);
            return null;
        }
    }

    const colors = [
        {
            name: '黄色',
            background: '#FFFF00',
            color: '#000000'
        },
        {
            name: '蓝色',
            background: '#0000FF',
            color: '#FFFFFF'
        },
        {
            name: '绿色',
            background: '#00FF00',
            color: '#000000'
        },
        {
            name: '红色',
            background: '#FF0000',
            color: '#FFFFFF'
        }
    ];

    const buttons = colors.map(createButton);
    const clearButton = createClearButton();

    document.addEventListener('keydown', function (e) {
        if (e.ctrlKey) {
            const key = e.key.toLowerCase();
            const index = ['e', 'r', 't', 'y'].indexOf(key);
            if (index !== -1) {
                buttons[index].click();
            }
            if (key === 'c') {
                clearButton.click();
            }
        }
    });

    buttons.forEach(button => buttonGroup.appendChild(button));
    buttonGroup.appendChild(clearButton);
    document.body.appendChild(buttonGroup);

    let startX;
    let startY;
    let isDragging = false;

    buttonGroup.addEventListener('mousedown', function (e) {
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
    });

    document.addEventListener('mousemove', function (e) {
        if (isDragging) {
            const dx = e.clientX - startX;
            const dy = e.clientY - startY;
            const rect = buttonGroup.getBoundingClientRect();
            let newLeft = rect.left + dx;
            let newTop = rect.top + dy;

            const viewportWidth = window.innerWidth;
            const viewportHeight = window.innerHeight;

            const buttonGroupWidth = buttonGroup.offsetWidth;
            const buttonGroupHeight = buttonGroup.offsetHeight;

            newLeft = Math.max(0, Math.min(newLeft, viewportWidth - buttonGroupWidth));
            newTop = Math.max(0, Math.min(newTop, viewportHeight - buttonGroupHeight));

            buttonGroup.style.left = `${newLeft}px`;
            buttonGroup.style.top = `${newTop}px`;
            startX = e.clientX;
            startY = e.clientY;
        }
    });

    document.addEventListener('mouseup', function () {
        isDragging = false;
    });
})();

​