blocknoteの共同編集を試す

inajob.icon

多分無料プランになってそうなので、15分で落ちないほうに戻した

作り方

サーバ側

以下をそのままデプロイするだけ

認証などがないので、放置すると危険そう

ほかの人もyjsのサーバとして別のサービスから書き込んだりできてしまう

Originの制限くらいはした方がよさそう

クライアント側

ViteでセットアップしてApp.tsxを以下に書き換えるだけ

code: typescript

import "@blocknote/core/fonts/inter.css";

import { useCreateBlockNote } from "@blocknote/react";

import { BlockNoteView } from "@blocknote/mantine";

import "@blocknote/mantine/style.css";

import * as Y from "yjs";

const doc = new Y.Doc();

import { WebsocketProvider } from "y-websocket";

const provider = new WebsocketProvider("wss://yjs-server-36qw.onrender.com", "blocknote-test-room", doc);

function Editor() {

const editor = useCreateBlockNote({

collaboration: {

provider,

fragment: doc.getXmlFragment("document-store"),

user: {

name: "My Username",

color: "#ff0000",

},

},

});

return <BlockNoteView editor={editor} />;

}

function App() {

return <Editor />;

}

export default App

blocknoteにこだわらないなら以下も簡単に動かせる

何もわからず組み込んでるけど、これで複数ページのWikiみたいなのを作るのはどうするのが良いのか？

ページごとに別のroomにするだけでok?

inajob.icon

リベンジ

外にバックエンドサーバを立てた

認証なしで何でも書き込めるので後で消します

同時編集、自分でもつくれたら幅広がるだろうなと思いつつ、まだ手を出せてない

今回は楽にできそうだったので試食です

急に請求着ても怖いし早めに消します・・

CLIからいくつか操作をすると、ちゃんとFreeプランのAppになっていたので、心配しなくてよさそう

無料のサイズのAppはいくらでも作れるのか？料金体系はいまだ不透明

Ladeって誰も使ってなさそう、新しいのか？無名なのか？

nodejsが動けば何でもよいので後で別のバックエンドに切り替えます

15分アクセスがないとアプリが落ちるのでデータが飛ぶと思われる

スラッシュコマンドで署名できるようにしたい(inajob)

スラッシュの必要はないな、Ctrl+iで署名できるといいな

blocknote+yjsはさっと作るには便利なのだがいろいろ心配あり

データの永続化

LevelDBの永続化機能を利用することは出来る（このバックエンドでは使っておらずオンメモリのみ）

将来的な互換性

Yjs自体の構造

Yjsの上のJSONの構造

スケール性能

お、一度消えたかと思ったけど、以前アクセスしたブラウザのタブでリロードしたら復活した？

CRDTの仕組みで、ブラウザに残ってたデータが同期された？

inajob.icon

これってみんな見えるのかな？

そういうものではなさそう、同じパソコンで2つブラウザを開いたら通信できてる

基本機能はオープンソース

まだベータ版的な感じなので破壊的な変更はありそう

https://gyazo.com/e58ec6df3b21e1587ced28aa7e6e81c2