まずは、[[📜Obsidianプラグイン開発でReactを導入]]する設定を行った。これで[[Chakra UI]]が使える。
## 投稿欄をつくる
```tsx
import * as React from "react";
import { useState } from "react";
import { Box, Button, Textarea } from "@chakra-ui/react";
interface Props {
onSubmit: (input: string) => void;
}
export const ReactView = ({ onSubmit }: Props) => {
const [input, setInput] = useState("");
const handleClickSubmit = () => {
onSubmit(input);
setInput("");
};
return (
<Box
display="flex"
justifyContent="center"
flexDirection="column"
gap="8px"
maxWidth="800px"
>
<Textarea
placeholder="Input anything"
rows={8}
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<Button variant="outline" onClick={handleClickSubmit}>
Submit
</Button>
</Box>
);
};
```
## デイリーノートファイルの取得と書き換え
[[Obsidian Daily Notes interface]]が使えそう。
```console
npm install --save obsidian-daily-notes-interface
```
[[日付の文字列からデイリーノート(Daily Note)のファイルを取得 (Obsidian)|日付の文字列からデイリーノート(Daily Note)のファイルを取得]]する。
```tsx
export class FreeWritingView extends ItemView {
// 中略
async handleSubmit(message: string) {
const todayNote = getDailyNote(moment(), getAllDailyNotes());
await this.appHelper.insertTextToEnd(
todayNote,
`
----
${message}`
);
}
// 中略
async onOpen() {
this.root = createRoot(this.containerEl.children[1]);
this.root.render(
<React.StrictMode>
<ReactView onSubmit={this.handleSubmit.bind(this)} />
</React.StrictMode>
);
}
```
`bind(this)`がないと、`this`が`FreeWritingView`クラスに割当たらないので注意。
## 投稿内容の表示
app.metadataCache.getFileCache(app.workspace.getActiveFile()).sections でArrayを取得
typeが`code`のものだけ
position: {start: end: {line, col, offset}} を取得
そこからファイルの中身を取得
あとは処理する
表示が1投稿遅れてしまう問題
## 投稿されないことがある問題
file cacheが更新されてないうちに情報を取得しようとするから
file cacheの更新を検知してハンドリングする方が健全?