[js] 快速改样式 - 修改了一下能保存

//https://ld246.com/article/1736423881249   原版出处
//参考https://ld246.com/article/1734443320794
//参考https://ld246.com/article/1736616348929
//参考上面的，机器人写了一下，不完美，能用。
//修改后：改变颜色后能自动保存（块更新功能的实例）
(() => {
    const buttonGroup = document.createElement('div');
    buttonGroup.classList.add('button-group');
    buttonGroup.style.position = 'absolute';
    buttonGroup.style.left = '10px';
    buttonGroup.style.top = '10px';

    const colors = [
        {
            name: '人物E',
            background: 'var(--b3-card-warning-background)',
            color: 'var(--b3-card-warning-color)'
        },
        {
            name: '点题R',
            background: 'var(--b3-card-info-background)',
            color: 'var(--b3-card-info-color)'
        },
        {
            name: '话T',
            background: 'var(--b3-card-success-background)',
            color: 'var(--b3-card-success-color)'
        },
        {
            name: '词Y',
            background: 'var(--b3-card-error-background)',
            color: 'var(--b3-card-error-color)'
        }
    ];

    async function fetchSyncPost(url, data) {
        try {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.error('Fetch error:', error);
            throw error;
        }
    }

    async function sendUpdateRequest(nodeId, originalHtmlContent, newHtmlContent) {
        const appId = siyuan?.ws?.app?.appId || 'default-app-id'; // 提供默认值

        let nowTime = new Date().getTime(); // 更新后的时间
        const res = await fetchSyncPost("/api/transactions", {
            session: appId,
            app: appId,
            reqId: nowTime,
            transactions: [{
                "doOperations": [{
                    action: "update",
                    id: nodeId,
                    data: newHtmlContent, // 更新后的 HTML 内容 (如果需要更新)
                }],
                "undoOperations": [{
                    action: "update",
                    id: nodeId,
                    data: originalHtmlContent, // 使用原始 HTML 内容
                }]
            }]
        });
        console.log(res);
    }

    colors.forEach(function (color, index) {
        const button = document.createElement('button');
        button.textContent = color.name;
        button.addEventListener('click', async function () {
            const selection = window.getSelection();
            if (selection.rangeCount > 0) {
                let currentNode = selection.anchorNode;
                let nodeId = null;
                while (currentNode) {
                    if (currentNode.nodeType === Node.ELEMENT_NODE && currentNode.hasAttribute('data-node-id')) {
                        nodeId = currentNode.getAttribute('data-node-id');
                        break;
                    }
                    currentNode = currentNode.parentNode;
                }
                console.log('找到的data-node-id是:', nodeId);

                const targetElement = document.querySelector(`div[data-node-id="${nodeId}"]`);
                console.log(targetElement);

                let originalHtmlContent = ""; // 用于保存原始 HTML 内容
                let newHtmlContent; // 用于保存新的 HTML 内容

                if (targetElement) {
                    originalHtmlContent = targetElement.outerHTML;
                    console.log("原来的html", originalHtmlContent);
                } else {
                    console.error("未找到指定 data-node-id 的元素！");
                    return;
                }

                const range = selection.getRangeAt(0);
                const span = document.createElement('span');
                span.style.backgroundColor = color.background;
                span.style.color = color.color;
                span.setAttribute('data-type', 'text');
                span.textContent = range.toString();
                range.surroundContents(span);

                newHtmlContent = targetElement.outerHTML;
                console.log("新的html", newHtmlContent);

                await sendUpdateRequest(nodeId, originalHtmlContent, newHtmlContent);
            }
        });
        buttonGroup.appendChild(button);
    });

    document.body.appendChild(buttonGroup);

    document.addEventListener('keydown', function (e) {
        if (e.ctrlKey) {
            const keyMap = { 'e': 0, 'r': 1, 't': 2, 'y': 3 };
            const index = keyMap[e.key.toLowerCase()];
            if (index !== undefined) {
                buttonGroup.children[index].click();
            }
        }
    });

    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();
            buttonGroup.style.left = `${rect.left + dx}px`;
            buttonGroup.style.top = `${rect.top + dy}px`;
            startX = e.clientX;
            startY = e.clientY;
        }
    });

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