@马萨伊尔 不是,只是不支持这样的语法,只支持commonmark的语法。
可以看看这个问题列表:https://github.com/tiddly-gittly/md-to-tid/issues/11
@马萨伊尔 不是,只是不支持这样的语法,只支持commonmark的语法。
可以看看这个问题列表:https://github.com/tiddly-gittly/md-to-tid/issues/11
测试批量转换,非常完美
尝试修复AST -> 已经放弃挣扎:https://github.com/tiddly-gittly/md-to-tid/issues/5
面对这种复杂且难以复现的问题,确实令人头疼。不过我们可以通过以下步骤系统性地排查和解决。根据你的描述,问题可能与 CodeMirror 6 的响应式设计、CSS 冲突或特定配置 相关,以下是详细分析和解决方案:
排除其他插件干扰
检查 CSS 样式冲突
height
、max-height
、overflow
属性。* { overflow: hidden; }
)意外覆盖了 CodeMirror 的样式。CodeMirror 6 的配置差异
// 示例配置项
new EditorView({
extensions: [
// 确保启用垂直滚动
EditorView.scrollMargins.of({ bottom: 100 }), // 滚动边距
EditorView.contentAttributes.of({ style: "overflow-y: auto" }), // 显式设置滚动
],
// 确保父容器高度有效
parent: document.getElementById("editor-container")
});
viewportMargin
参数(控制视口外预渲染内容的高度),如果设置过小可能导致滚动异常。动态尺寸监听问题
ResizeObserver
监听容器尺寸变化。如果容器尺寸是通过 JavaScript 动态计算的(而非 CSS 响应式),可能需要手动触发更新:// 强制刷新编辑器布局
const view = new EditorView({ /* ... */ });
view.requestMeasure();
浏览器控制台报错
如果 CodeMirror 6 的滚动容器(通常是 .cm-scroller
类)未正确应用样式,可手动覆盖:
/* 确保滚动容器允许垂直滚动 */
.cm-scroller {
overflow-y: auto !important;
height: 100% !important;
}
/* 父容器必须有明确的高度 */
#editor-container {
height: 600px; /* 或根据业务动态设置 */
max-height: 100vh;
}
如果编辑器高度依赖父容器动态计算(如通过 JavaScript),需确保父容器尺寸变化时同步更新 CodeMirror:
// 示例:监听窗口大小变化
window.addEventListener("resize", () => {
const container = document.getElementById("editor-container");
container.style.height = `${window.innerHeight - 100}px`;
// 通知 CodeMirror 更新布局
if (view) view.requestMeasure();
});
CodeMirror 6 的 API 设计更模块化,检查是否缺少必要的扩展(如 scrollPastEnd
):
import { EditorView } from "@codemirror/view";
import { EditorState } from "@codemirror/state";
// 确保添加滚动相关扩展
const extensions = [
EditorView.scrollMargins.of({ bottom: 200 }), // 允许滚动到内容末尾后继续滚动一段距离
EditorState.readOnly.of(false) // 确保编辑器非只读
];
const view = new EditorView({
state: EditorState.create({ extensions }),
parent: document.getElementById("editor-container")
});
创建一个仅包含 CodeMirror 6 的最简 HTML 文件,逐步添加业务代码,直到问题复现。例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 CodeMirror 6 基础样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.0.1/codemirror.min.css">
<style>
#editor-container { height: 400px; border: 1px solid #ccc; }
</style>
</head>
<body>
<div id="editor-container"></div>
<script type="module">
import { EditorView } from "https://cdn.skypack.dev/@codemirror/view";
import { EditorState } from "https://cdn.skypack.dev/@codemirror/state";
const view = new EditorView({
state: EditorState.create({ doc: "Test content\n".repeat(100) }),
parent: document.getElementById("editor-container")
});
</script>
</body>
</html>
如果此代码正常,则问题出在项目特定配置中。
对比 CodeMirror 官网配置
访问 CodeMirror 6 官方示例,检查其 HTML/CSS/JS 与你的项目差异,尤其是:
<!DOCTYPE html>
声明(影响布局模式)。height: 100%
或 flex
布局支持。检查打包工具影响
如果使用 Webpack/Vite 等工具,可能是 Tree Shaking 移除了关键模块。尝试:
import { EditorView, keymap, lineNumbers } from "@codemirror/view";
联系 CodeMirror 社区
如果问题仍无法解决,可在 CodeMirror GitHub Issues 中提交详细复现步骤,包括:
问题可能根源:
scrollPastEnd
)。通过逐步隔离环境、对比官方示例、最小化复现,可以最终定位到具体原因。如果时间紧迫,可暂时回退到 CodeMirror 5,同时持续跟踪 CodeMirror 6 的更新。
当你在一个内容超出编辑器大小的区域中复制内容时,浏览器会自动处理滚动和复制操作。以下是这一过程中可能调用的 API 和机制:
Selection API
Selection API
来管理选中范围。window.getSelection()
:获取当前选中范围。Range
对象:表示选中的文本范围。range.selectNodeContents()
:选择某个节点的内容。Scroll APIs
scrollIntoView()
或 scrollTo()
方法,将选中内容滚动到可见区域。const range = document.createRange();
range.selectNodeContents(document.getElementById('editor'));
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
// 浏览器会自动滚动到选中范围
range.startContainer.parentElement.scrollIntoView({ behavior: 'auto', block: 'nearest' });
Clipboard API
Ctrl+C
(或右键复制)时,浏览器会调用 Clipboard API
将选中内容复制到剪贴板。navigator.clipboard.writeText()
:异步写入文本到剪贴板。document.execCommand('copy')
:传统方法,同步复制内容。用户选择内容:
Shift+方向键
)选择内容。Selection API
管理选中范围。自动滚动:
scrollIntoView()
或 scrollTo()
将选中内容滚动到可见区域。复制内容:
Ctrl+C
或右键复制时,浏览器调用 Clipboard API
将选中内容复制到剪贴板。document.execCommand('copy')
,浏览器会同步执行复制操作。以下是一个模拟编辑器复制滚动行为的代码示例:
// 获取编辑器元素
const editor = document.getElementById('editor');
// 创建一个 Range 对象
const range = document.createRange();
range.selectNodeContents(editor); // 选择编辑器的全部内容
// 获取 Selection 对象
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range); // 将 Range 添加到 Selection
// 浏览器会自动滚动到选中范围
range.startContainer.parentElement.scrollIntoView({ behavior: 'auto', block: 'nearest' });
// 复制内容到剪贴板
document.addEventListener('copy', (e) => {
e.clipboardData.setData('text/plain', selection.toString());
e.preventDefault();
});
document.execCommand('copy'); // 触发复制操作
浏览器兼容性:
Clipboard API
是现代浏览器的特性,旧版浏览器可能仅支持 document.execCommand('copy')
。scrollIntoView()
的 behavior
参数(如 smooth
)在某些浏览器中可能不支持。用户手势要求:
execCommand('copy')
)必须由用户手势(如点击或按键)触发,否则会被浏览器阻止。性能问题:
在编辑器中复制超出视口的内容时,浏览器主要调用以下 API:
这些操作是浏览器内置行为,开发者可以通过 JavaScript 模拟或扩展这些功能。
应 @机杼 的想法,做了一个md 文档转换到tid的小工具。
使用工具组为:tauri + React + linonetwo 的 md-to-tid项目。
Github地址:https://github.com/Zacharia2/md2tid ,发布了一个测试版本,大家没事可以玩玩看,安装包2MB,还是很小的哈哈。
目前已经完成核心功能输入仓库路径,展示一个列表,点击转换就可以输出tid文件。遇到的问题,AST语法转换器有部分解析错误、自己关于页面的更新逻辑还没想明白、状态处理比较生疏、还有一个解决不同路径同名文件的文件名冲突问题的自定义文件名没写。
下面是目前完成的成果图片:
V0.0.3
V0.0.2之前
好消息
我发现 无论是标题,还是文件名,还是文件夹名,都是给内容起名字。这听起来就像是dict。标题给内容块起名字,文件给文件内容起名字,文件夹是为文件们起个名字。呢么,起名字是为了什么呢?
树其实就是一个拓扑意义上的分型结构。
类似的还有线性表,list和dict
若一个组织拓扑结构是分形的,呢么这个组织方式就是好的组织结构。因为可以容纳无限。
一个好主意是可以使用多层树构建网,一般来说两层树就可以。第一层树根据相关性构建。第二层引用第一层树更具逻辑构建。
这里层次是指垂直层次。上层依赖下层实现。第二层树,即上层可以有很多树。这些树可以不断对第一层树进行组织,输出。
这样就是多输入多输出的系统。
没有,从别的wiki学习,然后在TiddlyWiki中使用
Markdown风格硬换行符插件:https://wikilabs.github.io/editions/space-space-newline/
笔记嘛,只要写了能找到,叙事完整。感觉就差不多了。别搞得想松鼠埋橡子一样,到需要时候自己都不知道放哪里啦 。
这东西是个服务器端软件。所以有浏览器的地方都可以访问。只不过可以视为一个本地笔记软件用。
https://sspai.com/post/66094#!
线树图在这篇21年的文章中就提到了
嗯嗯,是哇,了解一些方法论,然后在回去用插件就更容易找到目标,就像《认知学徒制:理论与实践》中说的概念地图:
学习裁剪技术的学徒在学会自己裁剪之前,先要学会把已裁剪好的布料拼接成衣服。这个特殊排序原则的主要效果是让学生在注意到某个领域的细节之前建立一张概念地图,对整个活动有一个清晰的概念模型,这能帮助学习者理解他们正在执行的部分,从而提高他们监控自己进步的能力,发展他们的自我纠错技能
我想先了解插件,然后在知道概念地图,带着概念地图去用插件就不会茫然了
哦哦原来如此,我对他的页面,页面组织,和快速检索比较好奇。先用用看。不管怎么说,我还是缺少很多笔记常识和笔记的经验或者知识。
MediaWIki项目很像Nodejs项目
插件的安装都是两种方式,执行命令或者手动复制粘贴。