[js] 快速改样式

目前的版本在更改颜色之后如果对于块没有文字编辑操作的话不会保存！！！

请一定注意！！！

随便文字操作就行，哪怕敲一个空格再删掉也行

初步分析感觉是因为我的代码只是操作了 HTML，必须有文字操作触发 siyuan 扫描这些 HTML 了才会同步到原文件

目前没有想出好的解决办法，得等我放寒假拿到电脑再仔细研究了 😭 真的不好意思各位

功能

显示一个浮动的可拖拽的按钮组，点击对应按钮就会给选中文本以指定的格式。同时支持快捷键

代码主体部分由豆包完成，我只稍作修改就可以用到 siyuan 里了

起因

前几天发布了一个求助求一个样式快捷键的插件 - 链滴，感谢 Wetoria 大佬的增强插件

但是我只是穷学生还没有能力支持作者，并且需要好几种颜色，只好先用这个解决办法了 😢 以后一定会订阅的！思源笔记增强这个插件其他功能也很强大，推荐大家试试！

实现

添加如下的 JS 片段：

(()=>{
            const buttonGroup = document.createElement('div');
            buttonGroup.classList.add('button-group');

            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)'
                }
            ];

            colors.forEach(function (color, index) {
                const button = document.createElement('button');
                button.textContent = color.name;
                button.addEventListener('click', function () {
                    const selection = window.getSelection();
                    if (selection.rangeCount > 0) {
                        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);
                    }
                });
                if (index === 0) {
                    document.addEventListener('keydown', function (e) {
                        if (e.ctrlKey && e.key === 'e') {
                            button.click();
                        }
                    });
                } else if (index === 1) {
                    document.addEventListener('keydown', function (e) {
                        if (e.ctrlKey && e.key === 'r') {
                            button.click();
                        }
                    });
                } else if (index === 2) {
                    document.addEventListener('keydown', function (e) {
                        if (e.ctrlKey && e.key === 't') {
                            button.click();
                        }
                    });
                } else if (index === 3) {
                    document.addEventListener('keydown', function (e) {
                        if (e.ctrlKey && e.key === 'y') {
                            button.click();
                        }
                    });
                }
                buttonGroup.appendChild(button);
            });

            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();
                    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;
            });
 
        })();
​

以及如下的 CSS 片段：

.button-group {
            position: fixed;
            top: 10px;
            left: 10px;
            display: flex;
            cursor: move;
            user-select: none;
        }

      .button-group button {
            border: none;
            padding: 5px 10px;
            margin-right: 5px;
        }
​

注意事项：

• 如果和其他的插件撞名字了自己给变量该改名就好了
• 添加好了之后要点击启用哦
• 想更改插件和快捷键的话直接照着来就好了。各种颜色的对应样式请打开开发者工具定位到你的带颜色的一段话中，照着那个 style 属性写