右键编辑菜单优化

2025年1月15日18:04:45更新,兼容“查找”命令与“将当前选中内容移动到其他文件中”命令的宽度。

/* 更改编辑区右键菜单中基础编辑功能按钮的布局 */
/* 首先,隐藏功能按钮的文本 */
div[data-section="edit"] .menu-item-title{
	display: none;			
}
/* 其次,定位右键菜单,更改布局 */
/* 情况一:无“编辑链接”命令,基于“剪切”与“以纯文本形式粘贴”命令定位右键菜单 */
div.menu:has(div.menu-item[data-section="edit"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-clipboard-type"]){
	display: flex;
	flex-wrap: wrap;		/* 允许元素换行*/
	width: max(calc(var(--size-4-2) * 2 * 5 + 16px * 5 + var(--size-2-3) * 2 + 1px * 2), 158px);
	/* 图标两侧内边距var(--size-4-2)*2,图标大小16,共5个图标,右键菜单内边距var(--size-2-3)*2,右键菜单边框1px*2 */
	/* 编辑区右键菜单的原始宽度为158px */
}
/* 情况二:存在“编辑链接”命令,基于“编辑链接”、“剪切”与“以纯文本形式粘贴”命令定位右键菜单 */
div.menu:has(div.menu-item[data-section="edit"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-clipboard-type"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-text-cursor-input"]){
	display: flex;
	flex-wrap: wrap;
	width: max(calc(var(--size-4-2) * 2 * 6 + 16px * 6 + var(--size-2-3) * 2 + 1px * 2), 158px);
	/* 图标两侧内边距var(--size-4-2)*2,图标大小16,共6个图标,右键菜单内边距var(--size-2-3)*2,右键菜单边框1px*2 */
}
/* 情况三:存在“将当前选中内容移动到其他文件中”命令,基于“将当前选中内容移动到其他文件中”、“剪切”与“以纯文本形式粘贴”命令定位右键菜单 */
div.menu:has(div.menu-item[data-section="edit"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-clipboard-type"]):has(div.menu-item[data-section="action"] svg[class*="lucide-git-branch-plus"]){
	display: flex;
	flex-wrap: wrap;
	width: max(calc(var(--size-4-2) * 2 * 6 + 16px * 6 + var(--size-2-3) * 2 + 1px * 2), 248.77px);
	/* 编辑区右键菜单中的“将当前选中内容移动到其他文件中”命令宽度为248.77px */
}
/* 再次,恢复原本的分隔符 */
div.menu:has(div.menu-item[data-section="edit"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-clipboard-type"]) .menu-separator{
	flex-basis: 100%;		/* 占据整行 */
	height: 0px;			/* 清空分隔符的高度 */
	padding: 0px;			/* 移除可能的内边距 */
	overflow: hidden;		/* 隐藏分隔符可能的内容 */
}
/* 最后,强制基础编辑功能按钮以外的命令适配右键菜单的宽度 */
div.menu:has(div.menu-item[data-section="edit"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-clipboard-type"]) .menu-item:not([data-section="edit"]){
	width: 100%
}
/* 其它相关修正 */
/* 裁切“查找”命令的溢出文本 */
div.menu:has(div.menu-item[data-section="edit"] svg[class*="lucide-scissors"]):has(div.menu-item[data-section="edit"] svg[class*="lucide-clipboard-type"]) .menu-item[data-section="view"]:has(div.menu-item-icon svg.lucide-search) div.menu-item-title{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* 右键菜单命令隐藏 */
/* 命令隐藏系列 */
div.menu div.menu-item[data-section="action"]:has(svg[class*="lucide-image"]),		/* “将其设置为附件文件夹”(文件列表中文件夹的右键菜单) */
div.menu div.menu-item[data-section="pane"]:has(svg[class*="links-coming-in"]),		/* “在页面中显示反向链接”(编辑区的“更多选项”菜单) */
div.menu div.menu-item[data-section="action"]:has(svg[class*="lucide-file-search"])	/* “查找”与“替换”(编辑区的“更多选项”菜单) */
{
	display: none;
}
/* 分隔符隐藏系列 */
div.menu div.menu-item.has-submenu:has(svg[class*="lucide-link"]) + div.menu-separator,		/* “复制 Obsidian 链接”上方(编辑区的“更多选项”菜单) */
div.menu div.menu-item.is-warning:has(svg[class*="lucide-trash-2"]) + div.menu-separator	/* “删除文件”下方(编辑区的“更多选项”菜单) */
{
	display: none;
}

1 个赞

想问下是怎么对右键进行调试样式的呀?我右键后,点击 网页代码想查看样式,结果右键菜单内容就没了。不知道我表示的内容能不能理解。

没遇到这种情况,把插件都关掉再试

后来测试出来了,是 Obsidian 配置中 “原生菜单” 这个选项打开导致的 :face_with_open_eyes_and_hand_over_mouth:

另外,我做了一个针对不同菜单进行隐藏命令的插件,开发了一个隐藏 command 的插件 ,可以试用看看。(就是想做这个插件的时候,发现无法对右键菜单调试的 = =)