Obsidian未完成ノート記録プラグイン作成ログ-5

Obsidian未完成ノート記録プラグイン作成ログ-4 | Obsidian未完成ノート記録プラグイン作成ログ-6

obsidian-checklist-plugin/src/utils/helpers.ts at master · delashum/obsidian-checklist-plugin

Contribute to delashum/obsidian-checklist-plugin development by creating an account on GitHub.

github.com

このプラグインのリポジトリからマークダウンをレンダリングするコードを取得

export const navToFile = async (
	app: App,
	path: string,
	ev: MouseEvent,
) => {
	path = ensureMdExtension(path)
	const file = getFileFromPath(app.vault, path)
	if (!file) return
	const mod = Keymap.isModEvent(ev)
	const leaf = app.workspace.getLeaf(mod)
	await leaf.openFile(file)
}

ここでいうensureMdExtensionの中身を見ていく。

export const ensureMdExtension = (path: string) => {
	if (!/\.md$/.test(path)) return `${path}.md`
	return path
}

ensureは確保するという意味
このコードでは正規表現を使用して、ファイルのパス末尾に.mdをつけている。

mouseイベントを取得するコードを作成する。

そのほうほうよりすべてのaタグにdatatype-linkを付与する方が早そう。

let editedSpan = span.querySelectorAll("a");
editedSpan.forEach((tag) => {
	tag.setAttribute('data-type', 'link');
});

このRMSのタグのクラスにこんなのがついてた

もうObsidianURIを使うことにした

useStateでdescを反映できるようにした
inputタグ内の値を欲しいときはこうかく

<input
	onChange={((e) => setDesc(e.target.value))}
></input>

HTMLのbuttonの使用方法
HTMLのtextFieldの使用方法

上二つを使ってこんな感じになった

20240531062836-TalkWithAI-phind-Log-htmlの要素を右寄せにしたいでボタンを作成して右寄せにした。