相关帖子
-
wilsons • • 2 • 2 赞同付费者 捐赠者
最完美的方式,当如是也
// 把优化排版菜单移动到文档导航条 { const main = (protyle)=>{ // 发布服务下不显示 if(window.siyuan.config.readonly) return; if(protyle?.querySelector('.protyle-breadcrumb [data-type="optimizeTypography"]')) return; const exitFocusBtn = protyle.querySelector('.protyle-breadcrumb [data-type="exit-focus"]'); if(!exitFocusBtn) return; const optimizeHtml = `<button class="block__icon fn__flex-center ariaLabel" aria-label="优化排版" data-type="optimizeTypography"><svg><use xlink:href="#iconFormat"></use></svg></button>`; exitFocusBtn.insertAdjacentHTML('afterend', optimizeHtml); const optimizeBtn = protyle.querySelector('.protyle-breadcrumb [data-type="optimizeTypography"]'); if(!optimizeBtn) return; optimizeBtn.addEventListener('click', () => { // 锁定状态下不可修改 const icon = protyle?.querySelector('button[data-type="readonly"] use')?.getAttributeNS('http://www.w3.org/1999/xlink', 'href'); if(icon === '#iconLock') { showMessage('锁定状态不可用'); return } // 优化排版 // see https://github.com/siyuan-note/siyuan/blob/a01523dc98799590396ffcabdc90b2dc6efe8474/app/src/protyle/breadcrumb/index.ts#L415 requestApi("/api/format/autoSpace", { id: protyle?.querySelector('.protyle-title')?.dataset?.nodeId }); }); }; // 监听protyle加载 whenElementExist('.protyle:not(.fn__none)').then(main); observeProtyleLoad(main); function showMessage(message, isError = false, delay = 7000) { return fetch('/api/notification/' + (isError ? 'pushErrMsg' : 'pushMsg'), { "method": "POST", "body": JSON.stringify({"msg": message, "timeout": delay}) }); } async function requestApi(url, data, method = 'POST') { return await (await fetch(url, {method: method, body: JSON.stringify(data||{})})).json(); } function whenElementExist(selector, node) { return new Promise(resolve => { const check = () => { const el = typeof selector==='function'?selector():(node||document).querySelector(selector); if (el) resolve(el); else requestAnimationFrame(check); }; check(); }); } function observeProtyleLoad(callback, parentElement) { // 如果 parentElement 是字符串,则将其转换为 DOM 元素 if (typeof parentElement === 'string') { parentElement = document.querySelector(parentElement); } // 创建一个 MutationObserver 实例 const observer = new MutationObserver((mutationsList) => { mutationsList.forEach((mutation) => { // 检查是否是属性变化并且变化的属性是 class if (mutation.type === 'attributes' && mutation.attributeName === 'class') { const targetElement = mutation.target; // 发生变化的目标元素 // 判断目标元素是否匹配指定选择器 .protyle:not(.fn__none) if (targetElement.matches('.protyle:not(.fn__none)')) { // 触发回调 callback(targetElement); } } }); }); // 配置观察选项 const config = { attributes: true, // 监听属性变化 attributeFilter: ['class'], // 仅监听 class 属性 subtree: true, // 监听父容器及其所有后代元素 }; // 启动观察,默认监听 document.body 或指定的父容器 observer.observe(parentElement || document.body, config); } }
类似文章推荐 https://pipe.b3log.org/blogs/wilsons/articles/2025/04/15/1744703423359
-
-
-
最完美的方式,当如是也
// 把优化排版菜单移动到文档导航条 { const main = (protyle)=>{ // 发布服务下不显示 if(window.siyuan.config.readonly) return; if(protyle?.querySelector('.protyle-breadcrumb [data-type="optimizeTypography"]')) return; const exitFocusBtn = protyle.querySelector('.protyle-breadcrumb [data-type="exit-focus"]'); if(!exitFocusBtn) return; const optimizeHtml = `<button class="block__icon fn__flex-center ariaLabel" aria-label="优化排版" data-type="optimizeTypography"><svg><use xlink:href="#iconFormat"></use></svg></button>`; exitFocusBtn.insertAdjacentHTML('afterend', optimizeHtml); const optimizeBtn = protyle.querySelector('.protyle-breadcrumb [data-type="optimizeTypography"]'); if(!optimizeBtn) return; optimizeBtn.addEventListener('click', () => { // 锁定状态下不可修改 const icon = protyle?.querySelector('button[data-type="readonly"] use')?.getAttributeNS('http://www.w3.org/1999/xlink', 'href'); if(icon === '#iconLock') { showMessage('锁定状态不可用'); return } // 优化排版 // see https://github.com/siyuan-note/siyuan/blob/a01523dc98799590396ffcabdc90b2dc6efe8474/app/src/protyle/breadcrumb/index.ts#L415 requestApi("/api/format/autoSpace", { id: protyle?.querySelector('.protyle-title')?.dataset?.nodeId }); }); }; // 监听protyle加载 whenElementExist('.protyle:not(.fn__none)').then(main); observeProtyleLoad(main); function showMessage(message, isError = false, delay = 7000) { return fetch('/api/notification/' + (isError ? 'pushErrMsg' : 'pushMsg'), { "method": "POST", "body": JSON.stringify({"msg": message, "timeout": delay}) }); } async function requestApi(url, data, method = 'POST') { return await (await fetch(url, {method: method, body: JSON.stringify(data||{})})).json(); } function whenElementExist(selector, node) { return new Promise(resolve => { const check = () => { const el = typeof selector==='function'?selector():(node||document).querySelector(selector); if (el) resolve(el); else requestAnimationFrame(check); }; check(); }); } function observeProtyleLoad(callback, parentElement) { // 如果 parentElement 是字符串,则将其转换为 DOM 元素 if (typeof parentElement === 'string') { parentElement = document.querySelector(parentElement); } // 创建一个 MutationObserver 实例 const observer = new MutationObserver((mutationsList) => { mutationsList.forEach((mutation) => { // 检查是否是属性变化并且变化的属性是 class if (mutation.type === 'attributes' && mutation.attributeName === 'class') { const targetElement = mutation.target; // 发生变化的目标元素 // 判断目标元素是否匹配指定选择器 .protyle:not(.fn__none) if (targetElement.matches('.protyle:not(.fn__none)')) { // 触发回调 callback(targetElement); } } }); }); // 配置观察选项 const config = { attributes: true, // 监听属性变化 attributeFilter: ['class'], // 仅监听 class 属性 subtree: true, // 监听父容器及其所有后代元素 }; // 启动观察,默认监听 document.body 或指定的父容器 observer.observe(parentElement || document.body, config); } }
类似文章推荐 https://pipe.b3log.org/blogs/wilsons/articles/2025/04/15/1744703423359
1 回复 -
lichlaughing • via macOS
厉害厉害,还有个问题就是,文档锁定的状态下该按钮也能发挥作用。能否让该排版按钮在锁定状态下隐藏(解锁文章显示)或者锁定状下失效(不可以点击)解锁状态下可以点击 😄
1 回复