├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── example
├── index.html
├── package.json
├── pnpm-lock.yaml
├── src
│ └── main.ts
├── tsconfig.json
└── vite.config.ts
├── package.json
├── pnpm-lock.yaml
├── src
├── awareness.ts
├── ephemeral.ts
├── index.ts
├── sync.ts
├── undo.ts
└── utils.ts
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | # vscode
3 | .vscode
4 |
5 | # Intellij
6 | *.iml
7 | .idea
8 |
9 | # npm
10 | node_modules
11 |
12 | # Don't include the compiled main.js file in the repo.
13 | # They should be uploaded to GitHub releases instead.
14 | main.js
15 | styles.css
16 |
17 | # Exclude sourcemaps
18 | *.map
19 |
20 | # obsidian
21 | data.json
22 |
23 | # Exclude macOS Finder (System Explorer) View States
24 | .DS_Store
25 |
26 | .env*
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "tabWidth": 4
3 | }
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 Loro
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Codemirror Binding for Loro
2 |
3 | - Sync document state with Loro
4 | - Sync cursors with Loro's Awareness and
5 | [Cursor](https://loro.dev/docs/tutorial/cursor)
6 | - Undo/Redo in collaborative editing
7 |
8 | ## Usage
9 |
10 | ```ts
11 | import { EditorState } from "@codemirror/state";
12 | import { EditorView } from "@codemirror/view";
13 | import { LoroExtensions } from "loro-codemirror";
14 | import { EphemeralStore, LoroDoc, UndoManager } from "loro-crdt";
15 |
16 | const doc = new LoroDoc();
17 | const ephemeral = new EphemeralStore();
18 | const undoManager = new UndoManager(doc, {});
19 |
20 | new EditorView({
21 | state: EditorState.create({
22 | extensions: [
23 | // ... other extensions
24 | LoroExtensions(
25 | doc,
26 | // optional LoroEphemeralPlugin
27 | {
28 | ephemeral,
29 | user: { name: "Bob", colorClassName: "user1" },
30 | },
31 | // optional LoroUndoPlugin
32 | undoManager,
33 | ),
34 | ],
35 | }),
36 | parent: document.querySelector("#editor")!,
37 | });
38 | ```
39 |
40 | You can find the example
41 | [here](https://github.com/loro-dev/loro-codemirror/tree/main/example).
42 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Loro CodeMirror Example
7 |
112 |
113 |
114 |
117 |
118 |
119 |
120 | Editor 1
121 | User 1
124 |
125 |
126 |
127 |
128 |
129 | Editor 2
130 | User 2
133 |
134 |
135 |
136 |