899 lines
35 KiB
JavaScript
899 lines
35 KiB
JavaScript
// ========================================
|
||
// 模块：侧边栏备注功能
|
||
// ========================================
|
||
|
||
import { $, debounce, throttle } from './utils.js';
|
||
import { config } from './config.js';
|
||
|
||
let isEnabled = false, observers = {}, editorNode = null, dragTimeout = null, dragMutationObserver = null, connectionCleanup = null;
|
||
|
||
// 配置常量
|
||
const CONFIG = {
|
||
SIDEBAR_WIDTH: 230,
|
||
MARGIN: 10,
|
||
EDITING_MARGIN: 5,
|
||
MIN_INPUT_HEIGHT: 60,
|
||
CONNECTION_OPACITY: 0.5,
|
||
Z_INDEX_EDITING: 999
|
||
};
|
||
|
||
const autoResizeDiv = div => {
|
||
div.style.height = 'auto';
|
||
div.style.height = (div.scrollHeight + 1) + 'px';
|
||
};
|
||
|
||
// 确保光标正确定位到最后一个字符后
|
||
const setCursorPositionToEnd = el => {
|
||
const range = document.createRange();
|
||
const selection = window.getSelection();
|
||
|
||
// 清除现有选择
|
||
selection.removeAllRanges();
|
||
|
||
// 将光标定位到内容末尾
|
||
if (el.lastChild) {
|
||
range.setStartAfter(el.lastChild);
|
||
} else {
|
||
range.selectNodeContents(el);
|
||
range.collapse(false);
|
||
}
|
||
|
||
selection.addRange(range);
|
||
el.focus();
|
||
};
|
||
|
||
// 获取块节点
|
||
const getBlockNode = el => {
|
||
while (el && !el.dataset.nodeId) el = el.parentElement;
|
||
return el && el.closest('[data-type="NodeBlockQueryEmbed"]')?.dataset.nodeId ?
|
||
el.closest('[data-type="NodeBlockQueryEmbed"]') : el;
|
||
};
|
||
|
||
// 检查块类型是否有效（用于行内备注）
|
||
const isValidBlockTypeForInlineMemo = block => {
|
||
return block && ['NodeParagraph', 'NodeHeading'].includes(block.getAttribute('data-type'));
|
||
};
|
||
|
||
// 检查是否在嵌入块内
|
||
const isInsideEmbedBlock = blockEl => {
|
||
return blockEl?.closest('[data-type="NodeBlockQueryEmbed"]');
|
||
};
|
||
|
||
// 获取备注内容的HTML格式
|
||
const getMemoContentHtml = memoItem => {
|
||
return memoItem.querySelector('.memo-content-view')?.innerHTML.replace(/<br>/g, '\n') || '';
|
||
};
|
||
|
||
// 更新块元素的备注内容
|
||
const updateBlockMemoContent = (blockEl, oldContent, newContent) => {
|
||
const memoSpans = Array.from(blockEl.querySelectorAll('span[data-type*="inline-memo"]'));
|
||
|
||
memoSpans.forEach(span => {
|
||
if (span.getAttribute('data-inline-memo-content') === oldContent) {
|
||
span.setAttribute('data-inline-memo-content', newContent);
|
||
}
|
||
});
|
||
|
||
// 更新块内容
|
||
return updateBlock(blockEl);
|
||
};
|
||
|
||
// 删除块元素中的备注
|
||
const removeBlockMemoContent = (blockEl, memoContent) => {
|
||
const memoSpans = Array.from(blockEl.querySelectorAll('span[data-type*="inline-memo"]'));
|
||
|
||
memoSpans.forEach(span => {
|
||
const content = span.getAttribute('data-inline-memo-content');
|
||
// 只删除内容匹配的备注元素
|
||
if (content === memoContent) {
|
||
let types = (span.getAttribute("data-type") || "").split(" ").filter(t => t !== "inline-memo");
|
||
if (types.length) {
|
||
span.setAttribute("data-type", types.join(" "));
|
||
span.removeAttribute("data-inline-memo-content");
|
||
} else {
|
||
span.outerHTML = span.innerHTML;
|
||
}
|
||
}
|
||
});
|
||
|
||
// 更新块内容
|
||
return updateBlock(blockEl);
|
||
};
|
||
|
||
// 统一的块更新函数
|
||
const updateBlock = (blockEl) => {
|
||
return fetch('/api/block/updateBlock', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Token ${window.siyuan?.config?.api?.token ?? ''}`
|
||
},
|
||
body: JSON.stringify({
|
||
dataType: 'html',
|
||
data: blockEl.outerHTML,
|
||
id: blockEl.dataset.nodeId
|
||
})
|
||
});
|
||
};
|
||
|
||
// 高亮备注元素
|
||
const highlightMemoElements = (blockEl, memoContent) => {
|
||
const memoSpans = Array.from(blockEl.querySelectorAll('span[data-type*="inline-memo"]'));
|
||
|
||
// 高亮所有相同内容的备注元素
|
||
const targetSpans = memoSpans.filter(span =>
|
||
span.getAttribute('data-inline-memo-content') === memoContent
|
||
);
|
||
|
||
targetSpans.forEach(span => span.classList.add('memo-span-highlight'));
|
||
|
||
// 返回最后一个匹配的备注元素
|
||
return targetSpans[targetSpans.length - 1];
|
||
};
|
||
|
||
// 创建备忘录连接线
|
||
const createMemoConnection = (memoDiv, memoSpan) => {
|
||
removeMemoConnection();
|
||
if (!memoDiv || !memoSpan) return;
|
||
|
||
const container = document.createElement('div');
|
||
container.id = 'memo-connection-container';
|
||
container.style = 'position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:998;will-change:transform;';
|
||
container.innerHTML = `
|
||
<svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:${CONFIG.CONNECTION_OPACITY};">
|
||
<path stroke="var(--Sv-dock-item--activefocus-background)" stroke-width="2" fill="none" stroke-dasharray="6,4" stroke-linecap="round">
|
||
<animate attributeName="stroke-dashoffset" from="20" to="-20" dur="1.5s" repeatCount="indefinite"/>
|
||
</path>
|
||
</svg>`;
|
||
document.body.appendChild(container);
|
||
|
||
const path = container.querySelector('path');
|
||
const updatePath = () => {
|
||
const a = memoDiv.getBoundingClientRect(), b = memoSpan.getBoundingClientRect();
|
||
if (!a.width || !b.width) return;
|
||
const sx = b.right, sy = b.top + b.height / 2, ex = a.left - 6, ey = a.top + a.height / 2;
|
||
const o = Math.min(Math.abs(ex - sx) * 0.5, 200);
|
||
path.setAttribute('d', `M${sx} ${sy}C${sx + o} ${sy},${ex - o} ${ey},${ex} ${ey}`);
|
||
};
|
||
|
||
updatePath();
|
||
const onScroll = () => requestAnimationFrame(updatePath);
|
||
window.addEventListener('scroll', onScroll, true);
|
||
window.addEventListener('resize', onScroll);
|
||
|
||
connectionCleanup = () => {
|
||
window.removeEventListener('scroll', onScroll, true);
|
||
window.removeEventListener('resize', onScroll);
|
||
container.remove();
|
||
connectionCleanup = null;
|
||
};
|
||
};
|
||
|
||
const removeMemoConnection = () => connectionCleanup?.();
|
||
|
||
// 判断某块及其所有父块是否有折叠
|
||
const isAnyAncestorFolded = block => {
|
||
for (let current = block; current; current = current.parentElement) {
|
||
if (current.getAttribute?.('fold') === '1') return true;
|
||
}
|
||
return false;
|
||
};
|
||
|
||
// 拖拽监听
|
||
const observeDragTitle = () => {
|
||
if (dragMutationObserver) return;
|
||
|
||
const setupObserver = () => {
|
||
const dragEl = document.getElementById('drag');
|
||
if (!dragEl) {
|
||
dragTimeout = setTimeout(setupObserver, 1000);
|
||
return;
|
||
}
|
||
|
||
dragMutationObserver = new MutationObserver(refreshEditor);
|
||
dragMutationObserver.observe(dragEl, { attributes: true, attributeFilter: ['title'] });
|
||
};
|
||
|
||
setupObserver();
|
||
};
|
||
|
||
const unobserveDragTitle = () => {
|
||
dragMutationObserver?.disconnect();
|
||
dragMutationObserver = null;
|
||
dragTimeout && clearTimeout(dragTimeout);
|
||
dragTimeout = null;
|
||
};
|
||
|
||
// 刷新侧边栏备注位置
|
||
const refreshMemoOffset = (main, sidebar) => {
|
||
requestAnimationFrame(() => {
|
||
let lastBottom = 0;
|
||
|
||
Array.from(sidebar.querySelectorAll('.memo-item'))
|
||
.filter(item => item.style.display !== 'none')
|
||
.forEach(memoItem => {
|
||
const nodeId = memoItem.getAttribute('data-node-id');
|
||
const memoType = memoItem.getAttribute('data-memo-type');
|
||
|
||
const block = main.querySelector(`div[data-node-id="${nodeId}"]`);
|
||
if (!block) return;
|
||
|
||
// 行内备注只处理 NodeParagraph 和 NodeHeading 类型的节点
|
||
const isValidBlockType = memoType === 'block' || isValidBlockTypeForInlineMemo(block);
|
||
if (!isValidBlockType) return;
|
||
|
||
let targetTop = 0;
|
||
|
||
if (memoType === 'block') {
|
||
// 块备注：与块的顶部对齐
|
||
const blockRect = block.getBoundingClientRect();
|
||
const mainRect = main.getBoundingClientRect();
|
||
targetTop = blockRect.top - mainRect.top - (memoItem.offsetHeight / 2);
|
||
} else {
|
||
// 行内备注：定位到第一个相关元素的位置
|
||
const blockRect = block.getBoundingClientRect();
|
||
const mainRect = main.getBoundingClientRect();
|
||
|
||
// 获取所有行内备注元素
|
||
const memoSpans = Array.from(block.querySelectorAll('span[data-type*="inline-memo"]'));
|
||
// 使用innerHTML而不是textContent来正确处理换行符
|
||
const memoContent = getMemoContentHtml(memoItem);
|
||
|
||
// 找到第一个包含相同备注内容的元素
|
||
const targetSpan = memoSpans.find(span =>
|
||
span.getAttribute('data-inline-memo-content') === memoContent
|
||
);
|
||
|
||
targetTop = targetSpan ?
|
||
targetSpan.getBoundingClientRect().top - mainRect.top +
|
||
(targetSpan.getBoundingClientRect().height / 2) - (memoItem.offsetHeight / 2) :
|
||
blockRect.top - mainRect.top + blockRect.height / 2 - memoItem.offsetHeight / 2;
|
||
}
|
||
|
||
// 重叠检查 - 更智能的间距处理
|
||
const isEditing = memoItem.classList.contains('editing');
|
||
// 对于编辑中的项，使用更精确的位置计算
|
||
if (isEditing) {
|
||
// 确保编辑项不会与前一项重叠，但也不要过度拉开距离
|
||
targetTop = Math.max(targetTop, lastBottom + CONFIG.EDITING_MARGIN); // 编辑时使用较小的间距
|
||
} else {
|
||
// 对于非编辑项，保持正常的间距
|
||
targetTop = Math.max(targetTop, lastBottom + CONFIG.MARGIN);
|
||
}
|
||
|
||
memoItem.style.position = 'absolute';
|
||
memoItem.style.top = `${targetTop}px`;
|
||
memoItem.style.transition = 'top 0.3s cubic-bezier(0.4,0,0.2,1),transform 0.3s cubic-bezier(0.4,0,0.2,1)';
|
||
|
||
lastBottom = targetTop + memoItem.offsetHeight;
|
||
});
|
||
});
|
||
};
|
||
|
||
// 添加侧边栏
|
||
const addSideBar = main => {
|
||
const sidebar = main.parentElement.querySelector('#protyle-sidebar');
|
||
const title = main.parentElement.querySelector('div.protyle-title');
|
||
|
||
if (!sidebar && title) {
|
||
const newSidebar = document.createElement('div');
|
||
newSidebar.id = 'protyle-sidebar';
|
||
title.insertAdjacentElement('beforeend', newSidebar);
|
||
newSidebar.style.cssText = `position:absolute;right:-${CONFIG.SIDEBAR_WIDTH}px;width:${CONFIG.SIDEBAR_WIDTH}px;`;
|
||
main.style.minWidth = '90%';
|
||
return newSidebar;
|
||
}
|
||
|
||
return sidebar;
|
||
};
|
||
|
||
// 处理备注编辑和保存
|
||
const handleMemoEdit = (memoDiv, el, main, sidebar) => {
|
||
const memoType = memoDiv.getAttribute('data-memo-type');
|
||
const isBlockMemo = memoType === 'block';
|
||
|
||
// 获取旧值
|
||
const old = isBlockMemo ?
|
||
(el.getAttribute('memo') || '') :
|
||
(memoDiv.querySelector('.memo-content-view')?.innerHTML.replace(/<br>/g, '\n') || '');
|
||
|
||
const input = document.createElement('div');
|
||
input.className = 'memo-edit-input';
|
||
input.contentEditable = 'true';
|
||
input.innerHTML = old.replace(/\n/g, '<br>');
|
||
input.setAttribute('placeholder', '输入备注内容...');
|
||
input.style.cssText = `width:100%;min-height:${CONFIG.MIN_INPUT_HEIGHT}px;padding:6px;border:1px solid var(--b3-theme-primary);border-radius:8px;font-size:0.8em;resize:vertical;box-sizing:border-box;overflow:auto;outline:none;white-space:pre-wrap;word-break:break-all;overflow-y:hidden;`;
|
||
input.addEventListener('input', () => autoResizeDiv(input));
|
||
|
||
const save = () => {
|
||
// 保留原始HTML格式用于显示，同时提取纯文本用于比较
|
||
const val = input.innerHTML.replace(/<div>/gi, '\n').replace(/<\/div>/gi, '').replace(/<br\s*\/?>/gi, '\n').replace(/<p>/gi, '\n').replace(/<\/p>/gi, '').replace(/ /g, ' ').replace(/\n\s*\n\s*\n+/g, '\n\n').trim();
|
||
const htmlVal = input.innerHTML;
|
||
|
||
if (val !== old) {
|
||
if (isBlockMemo) {
|
||
// 块备注更新逻辑
|
||
el.setAttribute('memo', val);
|
||
updateBlock(el);
|
||
} else {
|
||
// 行内备注更新逻辑
|
||
const nodeId = memoDiv.getAttribute('data-node-id');
|
||
const blockEl = main.querySelector(`div[data-node-id="${nodeId}"]`);
|
||
|
||
if (blockEl) {
|
||
// 更新块备注内容
|
||
updateBlockMemoContent(blockEl, old, val);
|
||
}
|
||
}
|
||
}
|
||
|
||
const newDiv = document.createElement('div');
|
||
newDiv.className = 'memo-content-view';
|
||
newDiv.style.cssText = 'font-size:0.8em;margin-bottom:4px;cursor:pointer;';
|
||
|
||
// 显示值设置 - 正确处理换行符
|
||
const displayVal = htmlVal || '<span style="color:#bbb;">点击编辑备注...</span>';
|
||
newDiv.innerHTML = displayVal;
|
||
|
||
newDiv.onclick = (e) => {
|
||
// 检查是否已经在编辑状态
|
||
if (memoDiv.classList.contains('editing')) return;
|
||
|
||
const { input: newInput, save: newSave } = handleMemoEdit(memoDiv, el, main, sidebar);
|
||
newDiv.replaceWith(newInput);
|
||
memoDiv.classList.add('editing');
|
||
memoDiv.style.zIndex = `${CONFIG.Z_INDEX_EDITING}`;
|
||
newInput.focus();
|
||
setCursorPositionToEnd(newInput);
|
||
requestAnimationFrame(() => {
|
||
autoResizeDiv(newInput);
|
||
refreshMemoOffset(main, sidebar);
|
||
});
|
||
};
|
||
|
||
input.replaceWith(newDiv);
|
||
memoDiv.classList.remove('editing');
|
||
memoDiv.style.zIndex = '';
|
||
refreshMemoOffset(main, sidebar);
|
||
};
|
||
|
||
// 设置输入框事件
|
||
input.onblur = () => setTimeout(() => {
|
||
if (document.activeElement !== input) save();
|
||
}, 100);
|
||
|
||
input.onkeydown = e => {
|
||
if ((e.key === 'Enter' && e.ctrlKey) || e.key === 'Escape') {
|
||
e.preventDefault();
|
||
save();
|
||
} else if (e.key === 'a' && e.ctrlKey) {
|
||
e.preventDefault();
|
||
const range = document.createRange();
|
||
range.selectNodeContents(input);
|
||
const selection = window.getSelection();
|
||
selection.removeAllRanges();
|
||
selection.addRange(range);
|
||
}
|
||
};
|
||
|
||
input.addEventListener('paste', e => {
|
||
e.preventDefault();
|
||
const text = e.clipboardData?.getData('text');
|
||
text && document.execCommand('insertText', false, text);
|
||
}, true);
|
||
|
||
autoResizeDiv(input);
|
||
return { input, save };
|
||
};
|
||
|
||
// 刷新侧边栏备注
|
||
const refreshSideBarMemos = (main, sidebar) => {
|
||
// 清除之前的内容
|
||
sidebar.innerHTML = '';
|
||
const frag = document.createDocumentFragment();
|
||
|
||
const isReadonly = main.getAttribute?.('data-readonly') === 'true';
|
||
let visibleMemoCount = 0;
|
||
|
||
// 使用Set来避免重复的块ID
|
||
const processedBlocks = new Set();
|
||
|
||
// 提前检查当前启用的模式
|
||
const isBlockMemoMode = document.documentElement.hasAttribute('savor-sidebar-block-memo');
|
||
|
||
// 获取所有块
|
||
const allBlocks = Array.from(main.querySelectorAll('[data-node-id]'));
|
||
|
||
// 创建块顺序映射
|
||
const blockOrderMap = new Map();
|
||
allBlocks.forEach((block, index) => {
|
||
blockOrderMap.set(block.dataset.nodeId, index);
|
||
});
|
||
|
||
const allMemos = [];
|
||
|
||
allBlocks.forEach(block => {
|
||
const blockId = block.dataset.nodeId;
|
||
// 避免重复处理
|
||
if (processedBlocks.has(blockId)) return;
|
||
processedBlocks.add(blockId);
|
||
|
||
// 添加块备注
|
||
if (block.hasAttribute('memo')) {
|
||
allMemos.push({
|
||
element: block,
|
||
type: 'block',
|
||
content: block.getAttribute('memo') || '',
|
||
text: '<svg width="14" height="14"><use xlink:href="#iconM"></use></svg> ',
|
||
blockId: blockId,
|
||
elements: [],
|
||
index: -1,
|
||
blockOrder: blockOrderMap.get(blockId)
|
||
});
|
||
}
|
||
|
||
// 收集行内备注
|
||
if (!isBlockMemoMode) {
|
||
// 行内备注只处理 NodeParagraph 和 NodeHeading 类型的节点
|
||
const isValidBlockType = isValidBlockTypeForInlineMemo(block);
|
||
if (isValidBlockType) {
|
||
// 收集块内的行内备注
|
||
const inlineMemos = block.querySelectorAll('span[data-type*="inline-memo"]');
|
||
const memoGroups = [];
|
||
|
||
for (let i = 0; i < inlineMemos.length; i++) {
|
||
const el = inlineMemos[i];
|
||
const memoContent = el.getAttribute('data-inline-memo-content') || '';
|
||
const memoText = el.textContent || '';
|
||
|
||
// 检查是否与前一个元素相邻且内容相同
|
||
let isAdjacentAndSame = false;
|
||
if (memoGroups.length > 0) {
|
||
const lastGroup = memoGroups[memoGroups.length - 1];
|
||
const lastElement = lastGroup.elements[lastGroup.elements.length - 1].element;
|
||
|
||
// 检查是否相邻
|
||
let nextSibling = lastElement.nextSibling;
|
||
while (nextSibling && nextSibling.nodeType === Node.TEXT_NODE && nextSibling.textContent.trim() === '') {
|
||
nextSibling = nextSibling.nextSibling;
|
||
}
|
||
|
||
if (nextSibling === el && lastGroup.content === memoContent) {
|
||
isAdjacentAndSame = true;
|
||
}
|
||
}
|
||
|
||
if (isAdjacentAndSame) {
|
||
// 添加到当前组
|
||
const currentGroup = memoGroups[memoGroups.length - 1];
|
||
currentGroup.elements.push({
|
||
element: el,
|
||
index: i
|
||
});
|
||
|
||
// 避免重复文本
|
||
if (!currentGroup.texts.includes(memoText)) {
|
||
currentGroup.texts.push(memoText);
|
||
}
|
||
} else {
|
||
// 创建新组
|
||
memoGroups.push({
|
||
elements: [{
|
||
element: el,
|
||
index: i
|
||
}],
|
||
texts: [memoText],
|
||
content: memoContent
|
||
});
|
||
}
|
||
}
|
||
|
||
// 处理每个分组
|
||
memoGroups.forEach(group => {
|
||
const memoBlock = getBlockNode(group.elements[0].element);
|
||
const memoBlockId = memoBlock?.dataset.nodeId || blockId;
|
||
const combinedText = group.texts.join('');
|
||
|
||
allMemos.push({
|
||
elements: group.elements,
|
||
element: group.elements[0].element,
|
||
type: 'inline',
|
||
content: group.content,
|
||
text: combinedText,
|
||
blockId: blockId,
|
||
blockOrder: blockOrderMap.get(memoBlockId)
|
||
});
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
// 按块顺序排序
|
||
allMemos.sort((a, b) => a.blockOrder - b.blockOrder);
|
||
|
||
// 如果没有备注，直接返回
|
||
if (allMemos.length === 0) {
|
||
sidebar.removeAttribute('data-memo-count');
|
||
|
||
// 修复：即使没有备注也要确保清除 Sv-memo 类
|
||
const protyleContent = main.closest('.protyle')?.querySelector('.protyle-content');
|
||
if (protyleContent) {
|
||
protyleContent.classList.remove('Sv-memo');
|
||
}
|
||
|
||
return;
|
||
}
|
||
|
||
// 计算块折叠状态
|
||
const blockFoldStates = new Map();
|
||
allMemos.forEach(memoData => {
|
||
if (!blockFoldStates.has(memoData.blockId)) {
|
||
const block = main.querySelector(`div[data-node-id="${memoData.blockId}"]`);
|
||
blockFoldStates.set(memoData.blockId, block && isAnyAncestorFolded(block));
|
||
}
|
||
});
|
||
|
||
// 显示备注
|
||
allMemos.forEach(memoData => {
|
||
const block = main.querySelector(`div[data-node-id="${memoData.blockId}"]`);
|
||
// 如果块不存在，跳过
|
||
if (!block) return;
|
||
|
||
const isBlockFolded = blockFoldStates.get(memoData.blockId) || false;
|
||
const { content: memo, text } = memoData;
|
||
|
||
const memoDiv = document.createElement('div');
|
||
memoDiv.className = 'memo-item';
|
||
memoDiv.setAttribute('data-node-id', memoData.blockId);
|
||
memoDiv.setAttribute('data-memo-index', memoData.type === 'inline' ? (memoData.elements?.[0]?.index || -1) : -1);
|
||
memoDiv.setAttribute('data-memo-type', memoData.type);
|
||
|
||
// 存储元素数量
|
||
memoData.type === 'inline' && memoDiv.setAttribute('data-memo-element-count', memoData.elements?.length || 1);
|
||
|
||
memoDiv.style.cssText = 'margin:0px 0px 8px 16px;padding:8px;border-radius:8px;position:relative;width:220px;box-shadow:rgba(0, 0, 0, 0.03) 0px 12px 20px, var(--b3-border-color) 0px 0px 0px 1px inset;';
|
||
|
||
// 显示/隐藏逻辑
|
||
memoDiv.style.display = isBlockFolded ? 'none' : '';
|
||
!isBlockFolded && visibleMemoCount++;
|
||
|
||
const formattedDisplayText = text;
|
||
|
||
const memoContentStyle = isReadonly ? 'cursor:auto;' : 'cursor:pointer;';
|
||
memoDiv.innerHTML = `<div class="memo-title-with-dot" style="font-weight:bold;margin-bottom:4px;font-size:0.9em;display:flex;"><span class="memo-title-dot"></span>${formattedDisplayText}</div><div class="memo-content-view" style="${memoContentStyle}font-size:0.8em;margin-bottom:4px;">${memo ? memo.replace(/\n/g, '<br>') : '<span style="color:#bbb;">点击编辑备注...</span>'}</div>`;
|
||
|
||
const titleDiv = memoDiv.querySelector('.memo-title-with-dot');
|
||
// 创建删除按钮
|
||
if (titleDiv && !isReadonly) {
|
||
// 检查是否在嵌入块内
|
||
const blockEl = main.querySelector(`div[data-node-id="${memoData.blockId}"]`);
|
||
const isInsideEmbedBlockResult = isInsideEmbedBlock(blockEl);
|
||
|
||
// 如果不在嵌入块内，才显示删除按钮
|
||
if (!isInsideEmbedBlockResult) {
|
||
const deleteBtn = document.createElement('button');
|
||
deleteBtn.innerHTML = `<svg class="b3-menu__icon" style="vertical-align:middle;"><use xlink:href="#iconTrashcan"></use></svg>`;
|
||
deleteBtn.style.cssText = 'position:absolute;top:6px;right:6px;padding:0;border:none;border-radius:6px;cursor:pointer;z-index:2;';
|
||
deleteBtn.setAttribute('data-action', 'delete');
|
||
titleDiv.appendChild(deleteBtn);
|
||
}
|
||
}
|
||
|
||
const memoContentDiv = memoDiv.querySelector('.memo-content-view');
|
||
if (!isReadonly) {
|
||
memoContentDiv.onclick = (e) => {
|
||
e.stopPropagation();
|
||
if (memoDiv.classList.contains('editing')) return;
|
||
|
||
const nodeId = memoData.blockId;
|
||
const blockEl = main.querySelector(`div[data-node-id="${nodeId}"]`);
|
||
|
||
// 检查是否在嵌入块内
|
||
const isInsideEmbedBlockResult = isInsideEmbedBlock(blockEl);
|
||
|
||
// 如果在嵌入块内，禁止编辑
|
||
if (isInsideEmbedBlockResult) return;
|
||
|
||
if (blockEl) {
|
||
// 行内备注只处理 NodeParagraph 和 NodeHeading 类型的节点
|
||
const isValidBlockType = memoData.type === 'block' || isValidBlockTypeForInlineMemo(blockEl);
|
||
if (isValidBlockType) {
|
||
// 获取目标元素
|
||
let targetElement = memoData.element;
|
||
if (memoData.type === 'inline' && memoData.elements?.length > 0) {
|
||
targetElement = memoData.elements[0].element;
|
||
}
|
||
|
||
const { input, save } = handleMemoEdit(memoDiv, targetElement, main, sidebar);
|
||
memoContentDiv.replaceWith(input);
|
||
memoDiv.classList.add('editing');
|
||
memoDiv.style.zIndex = `${CONFIG.Z_INDEX_EDITING}`;
|
||
input.focus();
|
||
setCursorPositionToEnd(input);
|
||
requestAnimationFrame(() => {
|
||
autoResizeDiv(input);
|
||
refreshMemoOffset(main, sidebar);
|
||
});
|
||
}
|
||
}
|
||
};
|
||
}
|
||
|
||
frag.appendChild(memoDiv);
|
||
});
|
||
|
||
sidebar.setAttribute('data-memo-count', `共 ${visibleMemoCount} 个备注`);
|
||
sidebar.appendChild(frag);
|
||
|
||
// 事件委托
|
||
if (!sidebar._delegated) {
|
||
const handleMouseInteraction = (e, isEnter) => {
|
||
const item = e.target.closest('.memo-item');
|
||
if (!item || !sidebar.contains(item)) return;
|
||
const rt = e.relatedTarget;
|
||
if (rt && item.contains(rt)) return;
|
||
|
||
if (isEnter) {
|
||
const nodeId = item.getAttribute('data-node-id');
|
||
const memoType = item.getAttribute('data-memo-type');
|
||
const blockEl = main.querySelector(`div[data-node-id="${nodeId}"]`);
|
||
|
||
// 检查是否在嵌入块内
|
||
const isInsideEmbedBlock = blockEl?.closest('[data-type="NodeBlockQueryEmbed"]');
|
||
|
||
if (blockEl) {
|
||
// 行内备注只处理 NodeParagraph 和 NodeHeading 类型的节点
|
||
const isValidBlockType = memoType === 'block' || isValidBlockTypeForInlineMemo(blockEl);
|
||
if (!isValidBlockType) return;
|
||
|
||
if (memoType === 'block') {
|
||
blockEl.classList.add('memo-span-highlight');
|
||
createMemoConnection(item, blockEl);
|
||
} else {
|
||
// 高亮备注元素
|
||
const memoContent = getMemoContentHtml(item);
|
||
const targetSpan = highlightMemoElements(blockEl, memoContent);
|
||
|
||
targetSpan && createMemoConnection(item, targetSpan);
|
||
}
|
||
}
|
||
} else {
|
||
removeMemoConnection();
|
||
main.querySelectorAll('.memo-span-highlight').forEach(el => el.classList.remove('memo-span-highlight'));
|
||
}
|
||
};
|
||
|
||
// 鼠标事件处理
|
||
['mouseover', 'mouseout'].forEach(eventType => {
|
||
sidebar.addEventListener(eventType, e => handleMouseInteraction(e, eventType === 'mouseover'));
|
||
});
|
||
|
||
// 点击事件处理
|
||
sidebar.addEventListener('click', e => {
|
||
const btn = e.target.closest('button[data-action="delete"]');
|
||
if (!btn) return;
|
||
const item = btn.closest('.memo-item');
|
||
if (!item) return;
|
||
e.stopPropagation();
|
||
|
||
const nodeId = item.getAttribute('data-node-id');
|
||
const memoType = item.getAttribute('data-memo-type');
|
||
const blockEl = main.querySelector(`div[data-node-id="${nodeId}"]`);
|
||
|
||
// 检查是否在嵌入块内
|
||
const isInsideEmbedBlockResult = isInsideEmbedBlock(blockEl);
|
||
|
||
// 如果在嵌入块内，禁止删除
|
||
if (isInsideEmbedBlockResult) return;
|
||
|
||
item.remove();
|
||
removeMemoConnection();
|
||
// 确保connectionCleanup被重置
|
||
connectionCleanup = null;
|
||
|
||
if (blockEl) {
|
||
// 行内备注只处理 NodeParagraph 和 NodeHeading 类型的节点
|
||
const isValidBlockType = memoType === 'block' || isValidBlockTypeForInlineMemo(blockEl);
|
||
|
||
if (isValidBlockType) {
|
||
if (memoType === 'block') {
|
||
blockEl.removeAttribute('memo');
|
||
} else {
|
||
// 删除当前合并项中包含的行内备注
|
||
const memoContent = getMemoContentHtml(item);
|
||
removeBlockMemoContent(blockEl, memoContent);
|
||
}
|
||
|
||
updateBlock(blockEl);
|
||
}
|
||
}
|
||
});
|
||
|
||
sidebar._delegated = true;
|
||
}
|
||
|
||
refreshMemoOffset(main, sidebar);
|
||
const protyleContent = main.closest('.protyle')?.querySelector('.protyle-content');
|
||
// 修复：无论是否有可见备注，都应该正确设置 Sv-memo 类
|
||
if (protyleContent) {
|
||
if (visibleMemoCount > 0) {
|
||
protyleContent.classList.add('Sv-memo');
|
||
} else {
|
||
protyleContent.classList.remove('Sv-memo');
|
||
}
|
||
}
|
||
};
|
||
|
||
// 更新内联备注到思源
|
||
const updateInlineMemo = async (el, content) => {
|
||
try {
|
||
const blockEl = getBlockNode(el);
|
||
if (!blockEl?.dataset.nodeId) return;
|
||
el.setAttribute('data-inline-memo-content', content);
|
||
await fetch('/api/block/updateBlock', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Token ${window.siyuan?.config?.api?.token ?? ''}`
|
||
},
|
||
body: JSON.stringify({
|
||
dataType: 'html',
|
||
data: blockEl.outerHTML,
|
||
id: blockEl.dataset.nodeId
|
||
})
|
||
});
|
||
} catch (e) {
|
||
// 更新备注出错: e
|
||
}
|
||
};
|
||
|
||
// 刷新编辑器
|
||
const refreshEditor = () => {
|
||
if (!editorNode) return;
|
||
Object.values(observers).flat().forEach(o => o.disconnect());
|
||
observers = {};
|
||
|
||
editorNode.querySelectorAll('div.protyle-wysiwyg').forEach(main => {
|
||
let sidebar = main.parentElement.querySelector('#protyle-sidebar');
|
||
if (!sidebar && isEnabled) sidebar = addSideBar(main);
|
||
if (!sidebar) return;
|
||
|
||
const mainId = main.parentElement.parentElement.getAttribute('data-id');
|
||
let refreshTimer = null;
|
||
|
||
const observer = new MutationObserver(() => {
|
||
clearTimeout(refreshTimer);
|
||
refreshTimer = setTimeout(() => {
|
||
if (isEnabled) refreshSideBarMemos(main, sidebar);
|
||
refreshMemoOffset(main, sidebar);
|
||
}, 100);
|
||
});
|
||
|
||
observer.observe(main, {
|
||
childList: true,
|
||
subtree: true,
|
||
attributes: true,
|
||
attributeFilter: ['data-inline-memo-content', 'data-readonly', 'fold', 'memo']
|
||
});
|
||
|
||
observers[mainId] = [observer];
|
||
refreshSideBarMemos(main, sidebar);
|
||
|
||
const protyleContent = main.closest('.protyle')?.querySelector('.protyle-content');
|
||
if (protyleContent?._sidebarMemoScrollBinded === undefined) {
|
||
let scheduled = false;
|
||
const onScroll = () => {
|
||
if (scheduled) return;
|
||
scheduled = true;
|
||
requestAnimationFrame(() => {
|
||
refreshMemoOffset(main, sidebar);
|
||
scheduled = false;
|
||
});
|
||
};
|
||
|
||
protyleContent.addEventListener('scroll', onScroll, { passive: true });
|
||
protyleContent._sidebarMemoScrollBinded = true;
|
||
}
|
||
});
|
||
|
||
// 修复：在全局范围内检查并清除没有备注的文档的 Sv-memo 类
|
||
document.querySelectorAll('.protyle-content').forEach(pc => {
|
||
const main = pc.closest('.protyle')?.querySelector('.protyle-wysiwyg');
|
||
// 增强检查逻辑：不仅检查是否有备注元素，还要检查侧边栏是否为空
|
||
if (main) {
|
||
const sidebar = main.parentElement.querySelector('#protyle-sidebar');
|
||
// 如果侧边栏存在但为空，或者完全没有备注元素，则移除 Sv-memo 类
|
||
if ((sidebar && (!sidebar.querySelector('.memo-item') || sidebar.children.length === 0)) ||
|
||
(!main.querySelector('span[data-type*="inline-memo"]') && !main.querySelector('[memo]'))) {
|
||
pc.classList.remove('Sv-memo');
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
// 开关侧边栏
|
||
const openSideBar = (open, save = false) => {
|
||
if (isEnabled === open) return;
|
||
|
||
if (!editorNode && open) {
|
||
const wait = () => {
|
||
editorNode = document.querySelector('div.layout__center');
|
||
editorNode ? openSideBar(open, save) : setTimeout(wait, 100);
|
||
};
|
||
wait();
|
||
return;
|
||
}
|
||
|
||
isEnabled = open;
|
||
|
||
if (open) {
|
||
window.siyuan?.eventBus?.on('loaded-protyle', refreshEditor);
|
||
refreshEditor();
|
||
observeDragTitle();
|
||
} else {
|
||
window.siyuan?.eventBus?.off('loaded-protyle', refreshEditor);
|
||
Object.values(observers).flat().forEach(o => o.disconnect());
|
||
observers = {};
|
||
|
||
editorNode?.querySelectorAll('div.protyle-wysiwyg').forEach(main => {
|
||
main.parentElement.querySelector('#protyle-sidebar')?.remove();
|
||
const protyleContent = main.closest('.protyle')?.querySelector('.protyle-content');
|
||
protyleContent?.classList.remove('Sv-memo');
|
||
});
|
||
|
||
unobserveDragTitle();
|
||
}
|
||
|
||
save && config.set('sidebarMemoEnabled', open ? '1' : '0');
|
||
};
|
||
|
||
const init = () => {
|
||
editorNode = document.querySelector('div.layout__center');
|
||
const shouldEnable = document.documentElement.hasAttribute('savor-sidebar-memo') ||
|
||
document.documentElement.hasAttribute('savor-sidebar-block-memo');
|
||
openSideBar(shouldEnable, true);
|
||
};
|
||
|
||
// 清理函数
|
||
const cleanupSidebarMemo = () => {
|
||
try {
|
||
openSideBar(false);
|
||
} catch (e) {
|
||
// 关闭侧边栏失败: e
|
||
}
|
||
|
||
dragMutationObserver?.disconnect();
|
||
dragMutationObserver = null;
|
||
|
||
dragTimeout && clearTimeout(dragTimeout);
|
||
dragTimeout = null;
|
||
|
||
removeMemoConnection();
|
||
|
||
isEnabled = false;
|
||
observers = {};
|
||
editorNode = null;
|
||
connectionCleanup = null;
|
||
|
||
document.getElementById('sb-resizer-styles')?.remove();
|
||
|
||
document.querySelectorAll('.protyle-content.Sv-memo').forEach(el => {
|
||
el.classList.remove('Sv-memo');
|
||
});
|
||
};
|
||
|
||
// 初始化侧边栏备注模块
|
||
export const initSidebarMemoModule = () => {
|
||
window.sidebarMemo = {
|
||
init,
|
||
openSideBar,
|
||
isEnabled: () => isEnabled,
|
||
setEnabled: enabled => openSideBar(enabled, true),
|
||
unobserveDragTitle
|
||
};
|
||
window.cleanupSidebarMemo = cleanupSidebarMemo;
|
||
init();
|
||
};
|
||
|
||
export { cleanupSidebarMemo };
|