weolopez.github.io/pocus.html at main · weolopez/weolopez.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hocuspocus + Yjs Client</title>
</head>
<body>
  <task-list></task-list>

  <script type="module">
    import * as Y from "https://esm.sh/yjs";
    import { HocuspocusProvider } from "https://esm.sh/@hocuspocus/provider";

    class TaskList extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: "open" });

        this.shadowRoot.innerHTML = `
          <ul id="list"></ul>
          <input type="text" id="taskInput" placeholder="Add task" />
          <button id="addBtn">Add</button>
        `;

        const list = this.shadowRoot.getElementById("list");
        const input = this.shadowRoot.getElementById("taskInput");
        const button = this.shadowRoot.getElementById("addBtn");

        const provider = new HocuspocusProvider({
          url: "ws://stream.weolopez.com",
          name: "example-document",
        });

        const doc = provider.document;
        const tasks = doc.getArray("tasks");

        // Sync local list with Yjs array
        const render = () => {
          list.innerHTML = "";
          tasks.toArray().forEach((task, index) => {
            const li = document.createElement("li");
            li.textContent = task;
            list.appendChild(li);
          });
        };

        tasks.observe(render);

        button.addEventListener("click", () => {
          const value = input.value.trim();
          if (value) {
            tasks.push([value]);
            input.value = "";
          }
        });
      }
    }

    customElements.define("task-list", TaskList);
  </script>
</body>
</html>