diff --git a/.github/workflows/node-ci.yml b/.github/workflows/node-ci.yml
index 226e1292..26ba44b4 100644
--- a/.github/workflows/node-ci.yml
+++ b/.github/workflows/node-ci.yml
@@ -12,7 +12,7 @@ jobs:
           node-version: '18'
 
       - name: Install deps
-        run: npm install
+        run: npm ci
 
       - name: Check
         run: npm run check
diff --git a/package-lock.json b/package-lock.json
index 7ce2e777..6ea354ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -142,6 +142,7 @@
         "ts-node": "^10.9.1",
         "typescript": "^4.9.4",
         "undici": "^5.20.0",
+        "uniqolor": "^1.1.0",
         "unique-names-generator": "^4.7.1",
         "uuid": "^9.0.0",
         "vite": "^4.1.4",
@@ -154,7 +155,8 @@
         "y-prosemirror": "^1.0.20",
         "y-protocols": "^1.0.5",
         "y-webrtc": "^10.2.4",
-        "yjs": "^13.5.48"
+        "y-websocket": "^1.5.0",
+        "yjs": "^13.5.51"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -6696,6 +6698,23 @@
         "@types/node": "^18.0.6"
       }
     },
+    "node_modules/abstract-leveldown": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/abstract-leveldown/-/abstract-leveldown-6.2.3.tgz",
+      "integrity": "sha512-BsLm5vFMRUrrLeCcRc+G0t2qOaTzpoJQLOubq2XM72eNpjF5UdU5o/5NvlNhx95XHcAvcl8OMXr4mlg/fRgUXQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "immediate": "^3.2.3",
+        "level-concat-iterator": "~2.0.0",
+        "level-supports": "~1.0.0",
+        "xtend": "~4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -6974,6 +6993,13 @@
       "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
       "dev": true
     },
+    "node_modules/async-limiter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -8320,6 +8346,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/deferred-leveldown": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/deferred-leveldown/-/deferred-leveldown-5.3.0.tgz",
+      "integrity": "sha512-a59VOT+oDy7vtAbLRCZwWgxu2BaCfd5Hk7wxJd48ei7I+nsg8Orlb9CLG0PMZienk9BSUKgeAqkO2+Lw+1+Ukw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "abstract-leveldown": "~6.2.1",
+        "inherits": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -8616,6 +8656,22 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/encoding-down": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/encoding-down/-/encoding-down-6.3.0.tgz",
+      "integrity": "sha512-QKrV0iKR6MZVJV08QY0wp1e7vF6QbhnbQhb07bwpEyuz4uZiZgPlEGdkCROuFkUwdxlFaiPIhjyarH1ee/3vhw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "abstract-leveldown": "^6.2.1",
+        "inherits": "^2.0.3",
+        "level-codec": "^9.0.0",
+        "level-errors": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.12.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
@@ -8659,6 +8715,19 @@
       "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA==",
       "dev": true
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -11659,6 +11728,13 @@
         "node": ">=10"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.3.0.tgz",
+      "integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/immutable": {
       "version": "3.7.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
@@ -14780,6 +14856,161 @@
         "language-subtag-registry": "~0.3.2"
       }
     },
+    "node_modules/level": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/level/-/level-6.0.1.tgz",
+      "integrity": "sha512-psRSqJZCsC/irNhfHzrVZbmPYXDcEYhA5TVNwr+V92jF44rbf86hqGp8fiT702FyiArScYIlPSBTDUASCVNSpw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "level-js": "^5.0.0",
+        "level-packager": "^5.1.0",
+        "leveldown": "^5.4.0"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/level"
+      }
+    },
+    "node_modules/level-codec": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/level-codec/-/level-codec-9.0.2.tgz",
+      "integrity": "sha512-UyIwNb1lJBChJnGfjmO0OR+ezh2iVu1Kas3nvBS/BzGnx79dv6g7unpKIDNPMhfdTEGoc7mC8uAu51XEtX+FHQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "buffer": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/level-concat-iterator": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/level-concat-iterator/-/level-concat-iterator-2.0.1.tgz",
+      "integrity": "sha512-OTKKOqeav2QWcERMJR7IS9CUo1sHnke2C0gkSmcR7QuEtFNLLzHQAvnMw8ykvEcv0Qtkg0p7FOwP1v9e5Smdcw==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/level-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/level-errors/-/level-errors-2.0.1.tgz",
+      "integrity": "sha512-UVprBJXite4gPS+3VznfgDSU8PTRuVX0NXwoWW50KLxd2yw4Y1t2JUR5In1itQnudZqRMT9DlAM3Q//9NCjCFw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "errno": "~0.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/level-iterator-stream": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/level-iterator-stream/-/level-iterator-stream-4.0.2.tgz",
+      "integrity": "sha512-ZSthfEqzGSOMWoUGhTXdX9jv26d32XJuHz/5YnuHZzH6wldfWMOVwI9TBtKcya4BKTyTt3XVA0A3cF3q5CY30Q==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0",
+        "xtend": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/level-js": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/level-js/-/level-js-5.0.2.tgz",
+      "integrity": "sha512-SnBIDo2pdO5VXh02ZmtAyPP6/+6YTJg2ibLtl9C34pWvmtMEmRTWpra+qO/hifkUtBTOtfx6S9vLDjBsBK4gRg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "abstract-leveldown": "~6.2.3",
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.3",
+        "ltgt": "^2.1.2"
+      }
+    },
+    "node_modules/level-packager": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/level-packager/-/level-packager-5.1.1.tgz",
+      "integrity": "sha512-HMwMaQPlTC1IlcwT3+swhqf/NUO+ZhXVz6TY1zZIIZlIR0YSn8GtAAWmIvKjNY16ZkEg/JcpAuQskxsXqC0yOQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "encoding-down": "^6.3.0",
+        "levelup": "^4.3.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/level-supports": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/level-supports/-/level-supports-1.0.1.tgz",
+      "integrity": "sha512-rXM7GYnW8gsl1vedTJIbzOrRv85c/2uCMpiiCzO2fndd06U/kUXEEU9evYn4zFggBOg36IsBW8LzqIpETwwQzg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "xtend": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/leveldown": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/leveldown/-/leveldown-5.6.0.tgz",
+      "integrity": "sha512-iB8O/7Db9lPaITU1aA2txU/cBEXAt4vWwKQRrrWuS6XDgbP4QZGj9BL2aNbwb002atoQ/lIotJkfyzz+ygQnUQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "abstract-leveldown": "~6.2.1",
+        "napi-macros": "~2.0.0",
+        "node-gyp-build": "~4.1.0"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/leveldown/node_modules/node-gyp-build": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.1.1.tgz",
+      "integrity": "sha512-dSq1xmcPDKPZ2EED2S6zw/b9NKsqzXRE6dVr8TVQnI3FJOTteUMuqF3Qqs6LZg+mLGYJWqQzMbIjMtJqTv87nQ==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
+    "node_modules/levelup": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/levelup/-/levelup-4.4.0.tgz",
+      "integrity": "sha512-94++VFO3qN95cM/d6eBXvd894oJE0w3cInq9USsyQzzoJxmiYzPAocNcuGCPGGjoXqDVJcr3C1jzt1TSjyaiLQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "deferred-leveldown": "~5.3.0",
+        "level-errors": "~2.0.0",
+        "level-iterator-stream": "~4.0.0",
+        "level-supports": "~1.0.0",
+        "xtend": "~4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -14803,13 +15034,17 @@
       }
     },
     "node_modules/lib0": {
-      "version": "0.2.62",
-      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.62.tgz",
-      "integrity": "sha512-DY0G8AaQloUvpiss7EpAo/t4R82b9m/AydbQRNAa9Khssn9oGDJnSN8Q1qQ8u82Wog4iaT1O8yM+DfhzGCrrpQ==",
+      "version": "0.2.73",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.73.tgz",
+      "integrity": "sha512-aJJIElCLWnHMcYZPtsM07QoSfHwpxCy4VUzBYGXFYEmh/h2QS5uZNbCCfL0CqnkOE30b7Tp9DVfjXag+3qzZjQ==",
       "dev": true,
       "dependencies": {
         "isomorphic.js": "^0.2.4"
       },
+      "bin": {
+        "0gentesthtml": "bin/gentesthtml.js",
+        "0serve": "bin/0serve.js"
+      },
       "engines": {
         "node": ">=14"
       },
@@ -15222,6 +15457,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -15575,6 +15816,13 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/ltgt": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ltgt/-/ltgt-2.2.1.tgz",
+      "integrity": "sha512-AI2r85+4MquTw9ZYqabu4nMwy9Oftlfa/e/52t9IjtfG+mGBbTNdAoZ3RQKLHR6r0wQnwZnPIEh/Ya6XTWAKNA==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/mailgun.js": {
       "version": "8.2.1",
       "resolved": "https://registry.npmjs.org/mailgun.js/-/mailgun.js-8.2.1.tgz",
@@ -15998,6 +16246,13 @@
         "node": "^14.0.0 || ^16.0.0 || >=18.0.0"
       }
     },
+    "node_modules/napi-macros": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-macros/-/napi-macros-2.0.0.tgz",
+      "integrity": "sha512-A0xLykHtARfueITVDernsAWdtIMbOJgKgcluwENp3AlsKN/PloyO10HtmoqnFAQAcxPkgZN7wdfPfEd0zNGxbg==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -20094,6 +20349,13 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -22345,6 +22607,12 @@
         "node": ">=12.18"
       }
     },
+    "node_modules/uniqolor": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/uniqolor/-/uniqolor-1.1.0.tgz",
+      "integrity": "sha512-j2XyokF24fsj+L5u6fbu4rM3RQc6VWJuAngYM2k0ZdG3yiVxt0smLkps2GmQIYqK8VkELGdM9vFU/HfOkK/zoQ==",
+      "dev": true
+    },
     "node_modules/unique-names-generator": {
       "version": "4.7.1",
       "resolved": "https://registry.npmjs.org/unique-names-generator/-/unique-names-generator-4.7.1.tgz",
@@ -23022,6 +23290,16 @@
         }
       }
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/y-indexeddb": {
       "version": "9.0.9",
       "resolved": "https://registry.npmjs.org/y-indexeddb/-/y-indexeddb-9.0.9.tgz",
@@ -23038,6 +23316,24 @@
         "yjs": "^13.0.0"
       }
     },
+    "node_modules/y-leveldb": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/y-leveldb/-/y-leveldb-0.1.2.tgz",
+      "integrity": "sha512-6ulEn5AXfXJYi89rXPEg2mMHAyyw8+ZfeMMdOtBbV8FJpQ1NOrcgi6DTAcXof0dap84NjHPT2+9d0rb6cFsjEg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "level": "^6.0.1",
+        "lib0": "^0.2.31"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      },
+      "peerDependencies": {
+        "yjs": "^13.0.0"
+      }
+    },
     "node_modules/y-prosemirror": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/y-prosemirror/-/y-prosemirror-1.0.20.tgz",
@@ -23117,6 +23413,42 @@
         }
       }
     },
+    "node_modules/y-websocket": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/y-websocket/-/y-websocket-1.5.0.tgz",
+      "integrity": "sha512-A8AO6XtnQlYwWFytWdkDCeXg4l8ghRTIw5h2YUgUYDmEC9ugWGIwYNW80yadhSFAF7CvuWTEkQNEpevnH6EiZw==",
+      "dev": true,
+      "dependencies": {
+        "lib0": "^0.2.52",
+        "lodash.debounce": "^4.0.8",
+        "y-protocols": "^1.0.5"
+      },
+      "bin": {
+        "y-websocket": "bin/server.js",
+        "y-websocket-server": "bin/server.js"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      },
+      "optionalDependencies": {
+        "ws": "^6.2.1",
+        "y-leveldb": "^0.1.0"
+      },
+      "peerDependencies": {
+        "yjs": "^13.5.6"
+      }
+    },
+    "node_modules/y-websocket/node_modules/ws": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "async-limiter": "~1.0.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -23225,12 +23557,16 @@
       }
     },
     "node_modules/yjs": {
-      "version": "13.5.48",
-      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.5.48.tgz",
-      "integrity": "sha512-RFUqe1UQa1iKfQ9wZkZQP33iEBBSTz6sW3S5CWzHEe0JVksOi8AzspSTvQk5VskoJj4HzMUYgaNcPrE0MqJ8xQ==",
+      "version": "13.5.51",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.5.51.tgz",
+      "integrity": "sha512-F1Nb3z3TdandD80IAeQqgqy/2n9AhDLcXoBhZvCUX1dNVe0ef7fIwi6MjSYaGAYF2Ev8VcLcsGnmuGGOl7AWbw==",
       "dev": true,
       "dependencies": {
-        "lib0": "^0.2.49"
+        "lib0": "^0.2.72"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
       },
       "funding": {
         "type": "GitHub Sponsors ❤",
@@ -28173,6 +28509,20 @@
         "tslib": "^2.3.1"
       }
     },
+    "abstract-leveldown": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/abstract-leveldown/-/abstract-leveldown-6.2.3.tgz",
+      "integrity": "sha512-BsLm5vFMRUrrLeCcRc+G0t2qOaTzpoJQLOubq2XM72eNpjF5UdU5o/5NvlNhx95XHcAvcl8OMXr4mlg/fRgUXQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "buffer": "^5.5.0",
+        "immediate": "^3.2.3",
+        "level-concat-iterator": "~2.0.0",
+        "level-supports": "~1.0.0",
+        "xtend": "~4.0.0"
+      }
+    },
     "acorn": {
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -28375,6 +28725,13 @@
       "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
       "dev": true
     },
+    "async-limiter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
+      "dev": true,
+      "optional": true
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -29382,6 +29739,17 @@
         "clone": "^1.0.2"
       }
     },
+    "deferred-leveldown": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/deferred-leveldown/-/deferred-leveldown-5.3.0.tgz",
+      "integrity": "sha512-a59VOT+oDy7vtAbLRCZwWgxu2BaCfd5Hk7wxJd48ei7I+nsg8Orlb9CLG0PMZienk9BSUKgeAqkO2+Lw+1+Ukw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "abstract-leveldown": "~6.2.1",
+        "inherits": "^2.0.3"
+      }
+    },
     "define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -29595,6 +29963,19 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "encoding-down": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/encoding-down/-/encoding-down-6.3.0.tgz",
+      "integrity": "sha512-QKrV0iKR6MZVJV08QY0wp1e7vF6QbhnbQhb07bwpEyuz4uZiZgPlEGdkCROuFkUwdxlFaiPIhjyarH1ee/3vhw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "abstract-leveldown": "^6.2.1",
+        "inherits": "^2.0.3",
+        "level-codec": "^9.0.0",
+        "level-errors": "^2.0.0"
+      }
+    },
     "enhanced-resolve": {
       "version": "5.12.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
@@ -29626,6 +30007,16 @@
       "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA==",
       "dev": true
     },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -31780,6 +32171,13 @@
         "minimatch": "^3.0.4"
       }
     },
+    "immediate": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.3.0.tgz",
+      "integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==",
+      "dev": true,
+      "optional": true
+    },
     "immutable": {
       "version": "3.7.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
@@ -34068,6 +34466,126 @@
         "language-subtag-registry": "~0.3.2"
       }
     },
+    "level": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/level/-/level-6.0.1.tgz",
+      "integrity": "sha512-psRSqJZCsC/irNhfHzrVZbmPYXDcEYhA5TVNwr+V92jF44rbf86hqGp8fiT702FyiArScYIlPSBTDUASCVNSpw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "level-js": "^5.0.0",
+        "level-packager": "^5.1.0",
+        "leveldown": "^5.4.0"
+      }
+    },
+    "level-codec": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/level-codec/-/level-codec-9.0.2.tgz",
+      "integrity": "sha512-UyIwNb1lJBChJnGfjmO0OR+ezh2iVu1Kas3nvBS/BzGnx79dv6g7unpKIDNPMhfdTEGoc7mC8uAu51XEtX+FHQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "buffer": "^5.6.0"
+      }
+    },
+    "level-concat-iterator": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/level-concat-iterator/-/level-concat-iterator-2.0.1.tgz",
+      "integrity": "sha512-OTKKOqeav2QWcERMJR7IS9CUo1sHnke2C0gkSmcR7QuEtFNLLzHQAvnMw8ykvEcv0Qtkg0p7FOwP1v9e5Smdcw==",
+      "dev": true,
+      "optional": true
+    },
+    "level-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/level-errors/-/level-errors-2.0.1.tgz",
+      "integrity": "sha512-UVprBJXite4gPS+3VznfgDSU8PTRuVX0NXwoWW50KLxd2yw4Y1t2JUR5In1itQnudZqRMT9DlAM3Q//9NCjCFw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "errno": "~0.1.1"
+      }
+    },
+    "level-iterator-stream": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/level-iterator-stream/-/level-iterator-stream-4.0.2.tgz",
+      "integrity": "sha512-ZSthfEqzGSOMWoUGhTXdX9jv26d32XJuHz/5YnuHZzH6wldfWMOVwI9TBtKcya4BKTyTt3XVA0A3cF3q5CY30Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "level-js": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/level-js/-/level-js-5.0.2.tgz",
+      "integrity": "sha512-SnBIDo2pdO5VXh02ZmtAyPP6/+6YTJg2ibLtl9C34pWvmtMEmRTWpra+qO/hifkUtBTOtfx6S9vLDjBsBK4gRg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "abstract-leveldown": "~6.2.3",
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.3",
+        "ltgt": "^2.1.2"
+      }
+    },
+    "level-packager": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/level-packager/-/level-packager-5.1.1.tgz",
+      "integrity": "sha512-HMwMaQPlTC1IlcwT3+swhqf/NUO+ZhXVz6TY1zZIIZlIR0YSn8GtAAWmIvKjNY16ZkEg/JcpAuQskxsXqC0yOQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "encoding-down": "^6.3.0",
+        "levelup": "^4.3.2"
+      }
+    },
+    "level-supports": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/level-supports/-/level-supports-1.0.1.tgz",
+      "integrity": "sha512-rXM7GYnW8gsl1vedTJIbzOrRv85c/2uCMpiiCzO2fndd06U/kUXEEU9evYn4zFggBOg36IsBW8LzqIpETwwQzg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "xtend": "^4.0.2"
+      }
+    },
+    "leveldown": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/leveldown/-/leveldown-5.6.0.tgz",
+      "integrity": "sha512-iB8O/7Db9lPaITU1aA2txU/cBEXAt4vWwKQRrrWuS6XDgbP4QZGj9BL2aNbwb002atoQ/lIotJkfyzz+ygQnUQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "abstract-leveldown": "~6.2.1",
+        "napi-macros": "~2.0.0",
+        "node-gyp-build": "~4.1.0"
+      },
+      "dependencies": {
+        "node-gyp-build": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.1.1.tgz",
+          "integrity": "sha512-dSq1xmcPDKPZ2EED2S6zw/b9NKsqzXRE6dVr8TVQnI3FJOTteUMuqF3Qqs6LZg+mLGYJWqQzMbIjMtJqTv87nQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "levelup": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/levelup/-/levelup-4.4.0.tgz",
+      "integrity": "sha512-94++VFO3qN95cM/d6eBXvd894oJE0w3cInq9USsyQzzoJxmiYzPAocNcuGCPGGjoXqDVJcr3C1jzt1TSjyaiLQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "deferred-leveldown": "~5.3.0",
+        "level-errors": "~2.0.0",
+        "level-iterator-stream": "~4.0.0",
+        "level-supports": "~1.0.0",
+        "xtend": "~4.0.0"
+      }
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -34085,9 +34603,9 @@
       }
     },
     "lib0": {
-      "version": "0.2.62",
-      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.62.tgz",
-      "integrity": "sha512-DY0G8AaQloUvpiss7EpAo/t4R82b9m/AydbQRNAa9Khssn9oGDJnSN8Q1qQ8u82Wog4iaT1O8yM+DfhzGCrrpQ==",
+      "version": "0.2.73",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.73.tgz",
+      "integrity": "sha512-aJJIElCLWnHMcYZPtsM07QoSfHwpxCy4VUzBYGXFYEmh/h2QS5uZNbCCfL0CqnkOE30b7Tp9DVfjXag+3qzZjQ==",
       "dev": true,
       "requires": {
         "isomorphic.js": "^0.2.4"
@@ -34388,6 +34906,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -34659,6 +35183,13 @@
         "yallist": "^3.0.2"
       }
     },
+    "ltgt": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ltgt/-/ltgt-2.2.1.tgz",
+      "integrity": "sha512-AI2r85+4MquTw9ZYqabu4nMwy9Oftlfa/e/52t9IjtfG+mGBbTNdAoZ3RQKLHR6r0wQnwZnPIEh/Ya6XTWAKNA==",
+      "dev": true,
+      "optional": true
+    },
     "mailgun.js": {
       "version": "8.2.1",
       "resolved": "https://registry.npmjs.org/mailgun.js/-/mailgun.js-8.2.1.tgz",
@@ -34970,6 +35501,13 @@
       "integrity": "sha512-MBeUVt7NBcXqh7AGT+KSr3O0X/995CZsvcP2QEMP+PXFwb07qv3Vjyq+EX0yS8f12Vv3Tn2g/BvK/OZoMhJlOQ==",
       "dev": true
     },
+    "napi-macros": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-macros/-/napi-macros-2.0.0.tgz",
+      "integrity": "sha512-A0xLykHtARfueITVDernsAWdtIMbOJgKgcluwENp3AlsKN/PloyO10HtmoqnFAQAcxPkgZN7wdfPfEd0zNGxbg==",
+      "dev": true,
+      "optional": true
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -37863,6 +38401,13 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
     "punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -39521,6 +40066,12 @@
         "busboy": "^1.6.0"
       }
     },
+    "uniqolor": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/uniqolor/-/uniqolor-1.1.0.tgz",
+      "integrity": "sha512-j2XyokF24fsj+L5u6fbu4rM3RQc6VWJuAngYM2k0ZdG3yiVxt0smLkps2GmQIYqK8VkELGdM9vFU/HfOkK/zoQ==",
+      "dev": true
+    },
     "unique-names-generator": {
       "version": "4.7.1",
       "resolved": "https://registry.npmjs.org/unique-names-generator/-/unique-names-generator-4.7.1.tgz",
@@ -40003,6 +40554,13 @@
       "dev": true,
       "requires": {}
     },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true,
+      "optional": true
+    },
     "y-indexeddb": {
       "version": "9.0.9",
       "resolved": "https://registry.npmjs.org/y-indexeddb/-/y-indexeddb-9.0.9.tgz",
@@ -40012,6 +40570,17 @@
         "lib0": "^0.2.35"
       }
     },
+    "y-leveldb": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/y-leveldb/-/y-leveldb-0.1.2.tgz",
+      "integrity": "sha512-6ulEn5AXfXJYi89rXPEg2mMHAyyw8+ZfeMMdOtBbV8FJpQ1NOrcgi6DTAcXof0dap84NjHPT2+9d0rb6cFsjEg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "level": "^6.0.1",
+        "lib0": "^0.2.31"
+      }
+    },
     "y-prosemirror": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/y-prosemirror/-/y-prosemirror-1.0.20.tgz",
@@ -40052,6 +40621,31 @@
         }
       }
     },
+    "y-websocket": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/y-websocket/-/y-websocket-1.5.0.tgz",
+      "integrity": "sha512-A8AO6XtnQlYwWFytWdkDCeXg4l8ghRTIw5h2YUgUYDmEC9ugWGIwYNW80yadhSFAF7CvuWTEkQNEpevnH6EiZw==",
+      "dev": true,
+      "requires": {
+        "lib0": "^0.2.52",
+        "lodash.debounce": "^4.0.8",
+        "ws": "^6.2.1",
+        "y-leveldb": "^0.1.0",
+        "y-protocols": "^1.0.5"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "6.2.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+          "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
+        }
+      }
+    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -40138,12 +40732,12 @@
       "dev": true
     },
     "yjs": {
-      "version": "13.5.48",
-      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.5.48.tgz",
-      "integrity": "sha512-RFUqe1UQa1iKfQ9wZkZQP33iEBBSTz6sW3S5CWzHEe0JVksOi8AzspSTvQk5VskoJj4HzMUYgaNcPrE0MqJ8xQ==",
+      "version": "13.5.51",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.5.51.tgz",
+      "integrity": "sha512-F1Nb3z3TdandD80IAeQqgqy/2n9AhDLcXoBhZvCUX1dNVe0ef7fIwi6MjSYaGAYF2Ev8VcLcsGnmuGGOl7AWbw==",
       "dev": true,
       "requires": {
-        "lib0": "^0.2.49"
+        "lib0": "^0.2.72"
       }
     },
     "yn": {
diff --git a/package.json b/package.json
index 9b532377..4ae9066f 100644
--- a/package.json
+++ b/package.json
@@ -162,6 +162,7 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4",
     "undici": "^5.20.0",
+    "uniqolor": "^1.1.0",
     "unique-names-generator": "^4.7.1",
     "uuid": "^9.0.0",
     "vite": "^4.1.4",
@@ -174,6 +175,7 @@
     "y-prosemirror": "^1.0.20",
     "y-protocols": "^1.0.5",
     "y-webrtc": "^10.2.4",
-    "yjs": "^13.5.48"
+    "y-websocket": "^1.5.0",
+    "yjs": "^13.5.51"
   }
 }
diff --git a/src/components/Article/CommentRatingControl.tsx b/src/components/Article/CommentRatingControl.tsx
index 4810cfc5..a7a5895b 100644
--- a/src/components/Article/CommentRatingControl.tsx
+++ b/src/components/Article/CommentRatingControl.tsx
@@ -17,7 +17,7 @@ type Props = {
 
 export const CommentRatingControl = (props: Props) => {
   const { t } = useLocalize()
-  const { userSlug } = useSession()
+  const { user } = useSession()
   const {
     actions: { showSnackbar }
   } = useSnackbar()
@@ -30,13 +30,13 @@ export const CommentRatingControl = (props: Props) => {
     Object.values(reactionEntities).some(
       (r) =>
         r.kind === reactionKind &&
-        r.createdBy.slug === userSlug() &&
+        r.createdBy.slug === user()?.slug &&
         r.shout.id === props.comment.shout.id &&
         r.replyTo === props.comment.id
     )
   const isUpvoted = createMemo(() => checkReaction(ReactionKind.Like))
   const isDownvoted = createMemo(() => checkReaction(ReactionKind.Dislike))
-  const canVote = createMemo(() => userSlug() !== props.comment.createdBy.slug)
+  const canVote = createMemo(() => user()?.slug !== props.comment.createdBy.slug)
 
   const commentRatingReactions = createMemo(() =>
     Object.values(reactionEntities).filter(
@@ -51,7 +51,7 @@ export const CommentRatingControl = (props: Props) => {
     const reactionToDelete = Object.values(reactionEntities).find(
       (r) =>
         r.kind === reactionKind &&
-        r.createdBy.slug === userSlug() &&
+        r.createdBy.slug === user()?.slug &&
         r.shout.id === props.comment.shout.id &&
         r.replyTo === props.comment.id
     )
@@ -85,7 +85,7 @@ export const CommentRatingControl = (props: Props) => {
     <div class={styles.commentRating}>
       <button
         role="button"
-        disabled={!canVote() || !userSlug()}
+        disabled={!canVote() || !user()}
         onClick={() => handleRatingChange(true)}
         class={clsx(styles.commentRatingControl, styles.commentRatingControlUp, {
           [styles.voted]: isUpvoted()
@@ -111,7 +111,7 @@ export const CommentRatingControl = (props: Props) => {
       </Popup>
       <button
         role="button"
-        disabled={!canVote() || !userSlug()}
+        disabled={!canVote() || !user()}
         onClick={() => handleRatingChange(false)}
         class={clsx(styles.commentRatingControl, styles.commentRatingControlDown, {
           [styles.voted]: isDownvoted()
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index f7ad9db4..8d66d814 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -55,7 +55,7 @@ const MediaView = (props: { media: MediaItem; kind: Shout['layout'] }) => {
 
 export const FullArticle = (props: ArticleProps) => {
   const { t } = useLocalize()
-  const { userSlug, isAuthenticated } = useSession()
+  const { user, isAuthenticated } = useSession()
   const [isReactionsLoaded, setIsReactionsLoaded] = createSignal(false)
   const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt)))
 
@@ -86,7 +86,7 @@ export const FullArticle = (props: ArticleProps) => {
     setIsReactionsLoaded(true)
   })
 
-  const canEdit = () => props.article.authors?.some((a) => a.slug === userSlug())
+  const canEdit = () => props.article.authors?.some((a) => a.slug === user()?.slug)
 
   const bookmark = (ev) => {
     // TODO: implement bookmark clicked
diff --git a/src/components/Article/ShoutRatingControl.tsx b/src/components/Article/ShoutRatingControl.tsx
index f20f7cd8..833640bc 100644
--- a/src/components/Article/ShoutRatingControl.tsx
+++ b/src/components/Article/ShoutRatingControl.tsx
@@ -16,7 +16,7 @@ interface ShoutRatingControlProps {
 
 export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
   const { t } = useLocalize()
-  const { userSlug } = useSession()
+  const { user } = useSession()
 
   const {
     reactionEntities,
@@ -27,7 +27,7 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
     Object.values(reactionEntities).some(
       (r) =>
         r.kind === reactionKind &&
-        r.createdBy.slug === userSlug() &&
+        r.createdBy.slug === user()?.slug &&
         r.shout.id === props.shout.id &&
         !r.replyTo
     )
@@ -49,7 +49,7 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
     const reactionToDelete = Object.values(reactionEntities).find(
       (r) =>
         r.kind === reactionKind &&
-        r.createdBy.slug === userSlug() &&
+        r.createdBy.slug === user()?.slug &&
         r.shout.id === props.shout.id &&
         !r.replyTo
     )
diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index 162feb24..d1a3b910 100644
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -29,19 +29,43 @@ import Focus from '@tiptap/extension-focus'
 import { TrailingNode } from './extensions/TrailingNode'
 import { EditorBubbleMenu } from './EditorBubbleMenu/EditorBubbleMenu'
 import { EditorFloatingMenu } from './EditorFloatingMenu'
+import * as Y from 'yjs'
+import { WebrtcProvider } from 'y-webrtc'
+import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor'
+import { Collaboration } from '@tiptap/extension-collaboration'
 import './Prosemirror.scss'
+import { IndexeddbPersistence } from 'y-indexeddb'
+import { useSession } from '../../context/session'
+import * as uniqolor from 'uniqolor'
 
 type EditorProps = {
+  shoutId: number
   initialContent?: string
   onChange: (text: string) => void
 }
 
-// const ydoc = new Y.Doc()
-// // TODO
-// const provider = new WebrtcProvider('slug!!!!!!', ydoc)
+const yDoc = new Y.Doc()
+// const persisters: Record<string, IndexeddbPersistence> = {}
+// const providers: Record<string, WebrtcProvider> = {}
+
+const provider = new WebrtcProvider('tiptap-collaboration-extension', yDoc, {
+  signaling: ['wss://0.0.0.0:4444']
+})
 
 export const Editor = (props: EditorProps) => {
   const { t } = useLocalize()
+  const { user } = useSession()
+
+  const docName = `shout-${props.shoutId}`
+  // if (!persisters[docName]) {
+  //   persisters[docName] = new IndexeddbPersistence(docName, yDoc)
+  // }
+
+  // if (!providers[docName]) {
+  //   providers[docName] = new WebrtcProvider(docName, yDoc, {
+  //     signaling: ['wss://y-webrtc-signaling-eu.herokuapp.com', 'wss://y-webrtc-signaling-us.herokuapp.com']
+  //   })
+  // }
 
   const editorElRef: {
     current: HTMLDivElement
@@ -93,18 +117,16 @@ export const Editor = (props: EditorProps) => {
       OrderedList,
       ListItem,
       CharacterCount,
-      // Collaboration.configure({
-      //   document: ydoc
-      // }),
+      Collaboration.configure({
+        document: yDoc
+      }),
       // CollaborationCursor.configure({
-      //   provider,
+      //   provider: providers[docName],
       //   user: {
-      //     name: 'Cyndi Lauper',
-      //     color: '#f783ac'
+      //     name: user().name,
+      //     color: uniqolor(user().slug)
       //   }
       // }),
-      // TODO conditional indexedDB
-      // History,
       Placeholder.configure({
         placeholder: t('Short opening')
       }),
@@ -133,5 +155,3 @@ export const Editor = (props: EditorProps) => {
     </>
   )
 }
-
-export default Editor
diff --git a/src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.tsx b/src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.tsx
index 0d86e74c..b2e5ec5f 100644
--- a/src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.tsx
+++ b/src/components/Editor/EditorBubbleMenu/EditorBubbleMenu.tsx
@@ -43,11 +43,17 @@ export const EditorBubbleMenu = (props: BubbleMenuProps) => {
   }
 
   const toggleTextSizePopup = () => {
-    if (listBubbleOpen()) setListBubbleOpen(false)
+    if (listBubbleOpen()) {
+      setListBubbleOpen(false)
+    }
+
     setTextSizeBubbleOpen((prev) => !prev)
   }
   const toggleListPopup = () => {
-    if (textSizeBubbleOpen()) setTextSizeBubbleOpen(false)
+    if (textSizeBubbleOpen()) {
+      setTextSizeBubbleOpen(false)
+    }
+
     setListBubbleOpen((prev) => !prev)
   }
 
diff --git a/src/components/Editor/EditorBubbleMenu/LinkForm/LinkForm.tsx b/src/components/Editor/EditorBubbleMenu/LinkForm/LinkForm.tsx
index 12b5c95c..ce91c801 100644
--- a/src/components/Editor/EditorBubbleMenu/LinkForm/LinkForm.tsx
+++ b/src/components/Editor/EditorBubbleMenu/LinkForm/LinkForm.tsx
@@ -47,6 +47,7 @@ export const LinkForm = (props: Props) => {
   }
 
   const handleKeyPress = (event) => {
+    event.preventDefault()
     setLinkError('')
     const key = event.key
 
diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx
index 9dd0e135..ea154d8b 100644
--- a/src/components/Nav/ProfilePopup.tsx
+++ b/src/components/Nav/ProfilePopup.tsx
@@ -10,7 +10,7 @@ type ProfilePopupProps = Omit<PopupProps, 'children'>
 
 export const ProfilePopup = (props: ProfilePopupProps) => {
   const {
-    userSlug,
+    user,
     actions: { signOut }
   } = useSession()
 
@@ -20,7 +20,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
     <Popup {...props} horizontalAnchor="right" variant="bordered">
       <ul class="nodash">
         <li>
-          <a href={getPagePath(router, 'author', { slug: userSlug() })}>{t('Profile')}</a>
+          <a href={getPagePath(router, 'author', { slug: user().slug })}>{t('Profile')}</a>
         </li>
         <li>
           <a href="#">{t('Drafts')}</a>
diff --git a/src/components/Nav/Snackbar.module.scss b/src/components/Nav/Snackbar.module.scss
index 019b372f..ae76b39a 100644
--- a/src/components/Nav/Snackbar.module.scss
+++ b/src/components/Nav/Snackbar.module.scss
@@ -15,4 +15,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &.enter,
+  &.exitTo {
+    height: 0;
+    color: transparent;
+  }
 }
diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx
index 69d2c7c7..f9befddb 100644
--- a/src/components/Views/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors.tsx
@@ -94,7 +94,7 @@ export const AllAuthorsView = (props: AllAuthorsViewProps) => {
   const showMore = () => setLimit((oldLimit) => oldLimit + PAGE_SIZE)
   const AllAuthorsHead = () => (
     <div class="row">
-      <div class={clsx(styles.pageHeader, 'col-lg-20 col-xl-18')}>
+      <div class="col-lg-20 col-xl-18">
         <h1>{t('Authors')}</h1>
         <p>{t('Subscribe who you like to tune your personal feed')}</p>
 
diff --git a/src/components/Views/AllTopics.tsx b/src/components/Views/AllTopics.tsx
index dbb1730d..71e5347e 100644
--- a/src/components/Views/AllTopics.tsx
+++ b/src/components/Views/AllTopics.tsx
@@ -96,7 +96,7 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
 
   const AllTopicsHead = () => (
     <div class="row">
-      <div class={clsx(styles.pageHeader, 'col-lg-20 col-xl-18')}>
+      <div class="col-lg-20 col-xl-18">
         <h1>{t('Topics')}</h1>
         <p>{t('Subscribe what you like to tune your personal feed')}</p>
 
diff --git a/src/components/Views/Create.tsx b/src/components/Views/Create.tsx
index 045cdfd8..6f895276 100644
--- a/src/components/Views/Create.tsx
+++ b/src/components/Views/Create.tsx
@@ -11,8 +11,7 @@ import { TopicSelect } from '../Editor/TopicSelect/TopicSelect'
 import { router, useRouter } from '../../stores/router'
 import { getPagePath } from '@nanostores/router'
 import { translit } from '../../utils/ru2en'
-
-const Editor = lazy(() => import('../Editor/Editor'))
+import { Editor } from '../Editor/Editor'
 
 type ShoutForm = {
   slug: string
@@ -86,140 +85,139 @@ export const CreateView = () => {
   return (
     <div class={styles.container}>
       <Title>{t('Write an article')}</Title>
-      <Suspense fallback={<Loading />}>
-        <form onSubmit={handleFormSubmit}>
-          <div class="wide-container">
-            <div class="shift-content">
-              <div class="row">
-                <div class="col-md-20 col-lg-18 col-xl-16">
-                  <div
-                    class={clsx(styles.create, {
-                      [styles.visible]: page().route === 'create'
-                    })}
-                  >
-                    <input
-                      class={styles.titleInput}
-                      type="text"
-                      name="title"
-                      id="title"
-                      placeholder="Заголовок"
-                      value={form.title}
-                      onChange={handleTitleInputChange}
-                    />
 
-                    <input
-                      class={styles.subtitleInput}
-                      type="text"
-                      name="subtitle"
-                      id="subtitle"
-                      placeholder="Подзаголовок"
-                      value={form.subtitle}
-                      onChange={(e) => setForm('subtitle', e.currentTarget.value)}
-                    />
+      <form onSubmit={handleFormSubmit}>
+        <div class="wide-container">
+          <div class="shift-content">
+            <div class="row">
+              <div class="col-md-20 col-lg-18 col-xl-16">
+                <div
+                  class={clsx(styles.create, {
+                    [styles.visible]: page().route === 'create'
+                  })}
+                >
+                  <input
+                    class={styles.titleInput}
+                    type="text"
+                    name="title"
+                    id="title"
+                    placeholder="Заголовок"
+                    value={form.title}
+                    onChange={handleTitleInputChange}
+                  />
 
-                    <Editor onChange={(body) => setForm('body', body)} />
+                  <input
+                    class={styles.subtitleInput}
+                    type="text"
+                    name="subtitle"
+                    id="subtitle"
+                    placeholder="Подзаголовок"
+                    value={form.subtitle}
+                    onChange={(e) => setForm('subtitle', e.currentTarget.value)}
+                  />
 
-                    <div class={styles.saveBlock}>
-                      {/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
-                      <a href={getPagePath(router, 'createSettings')}>Настройки</a>
-                    </div>
+                  <Editor shoutId={42} onChange={(body) => setForm('body', body)} />
+
+                  <div class={styles.saveBlock}>
+                    {/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
+                    <a href={getPagePath(router, 'createSettings')}>Настройки</a>
                   </div>
-                  <div
-                    class={clsx(styles.createSettings, {
-                      [styles.visible]: page().route === 'createSettings'
-                    })}
-                  >
-                    <h1>Настройки публикации</h1>
+                </div>
+                <div
+                  class={clsx(styles.createSettings, {
+                    [styles.visible]: page().route === 'createSettings'
+                  })}
+                >
+                  <h1>Настройки публикации</h1>
 
-                    <h4>Slug</h4>
-                    <div class="pretty-form__item">
-                      <input
-                        type="text"
-                        name="slug"
-                        id="slug"
-                        value={form.slug}
-                        onChange={handleSlugInputChange}
+                  <h4>Slug</h4>
+                  <div class="pretty-form__item">
+                    <input
+                      type="text"
+                      name="slug"
+                      id="slug"
+                      value={form.slug}
+                      onChange={handleSlugInputChange}
+                    />
+                    <label for="slug">Slug</label>
+                  </div>
+
+                  {/*<h4>Лид</h4>*/}
+                  {/*<div class="pretty-form__item">*/}
+                  {/*  <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
+                  {/*  <label for="lead">Лид</label>*/}
+                  {/*</div>*/}
+
+                  {/*<h4>Выбор сообщества</h4>*/}
+                  {/*<p class="description">Сообщества можно перечислить через запятую</p>*/}
+                  {/*<div class="pretty-form__item">*/}
+                  {/*  <input*/}
+                  {/*    type="text"*/}
+                  {/*    name="community"*/}
+                  {/*    id="community"*/}
+                  {/*    placeholder="Сообщества"*/}
+                  {/*    class="nolabel"*/}
+                  {/*  />*/}
+                  {/*</div>*/}
+
+                  <h4>Темы</h4>
+                  {/*<p class="description">*/}
+                  {/*  Добавьте несколько тем, чтобы читатель знал, о&nbsp;чем ваш материал, и&nbsp;мог найти*/}
+                  {/*  его на&nbsp;страницах интересных ему тем. Темы можно менять местами, первая тема*/}
+                  {/*  становится заглавной*/}
+                  {/*</p>*/}
+                  <div class="pretty-form__item">
+                    <Show when={topics()}>
+                      <TopicSelect
+                        topics={topics()}
+                        onChange={(newSelectedTopics) => setForm('selectedTopics', newSelectedTopics)}
+                        selectedTopics={form.selectedTopics}
                       />
-                      <label for="slug">Slug</label>
-                    </div>
+                    </Show>
+                    {/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}
+                  </div>
 
-                    {/*<h4>Лид</h4>*/}
-                    {/*<div class="pretty-form__item">*/}
-                    {/*  <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
-                    {/*  <label for="lead">Лид</label>*/}
-                    {/*</div>*/}
+                  {/*<h4>Соавторы</h4>*/}
+                  {/*<p class="description">У каждого соавтора можно добавить роль</p>*/}
+                  {/*<div class="pretty-form__item--with-button">*/}
+                  {/*  <div class="pretty-form__item">*/}
+                  {/*    <input type="text" name="authors" id="authors" placeholder="Введите имя или e-mail" />*/}
+                  {/*    <label for="authors">Введите имя или e-mail</label>*/}
+                  {/*  </div>*/}
+                  {/*  <button class="button button--submit">Добавить</button>*/}
+                  {/*</div>*/}
 
-                    {/*<h4>Выбор сообщества</h4>*/}
-                    {/*<p class="description">Сообщества можно перечислить через запятую</p>*/}
-                    {/*<div class="pretty-form__item">*/}
-                    {/*  <input*/}
-                    {/*    type="text"*/}
-                    {/*    name="community"*/}
-                    {/*    id="community"*/}
-                    {/*    placeholder="Сообщества"*/}
-                    {/*    class="nolabel"*/}
-                    {/*  />*/}
-                    {/*</div>*/}
+                  {/*<div class="row">*/}
+                  {/*  <div class="col-md-6">Михаил Драбкин</div>*/}
+                  {/*  <div class="col-md-6">*/}
+                  {/*    <input type="text" name="coauthor" id="coauthor1" class="nolabel" />*/}
+                  {/*  </div>*/}
+                  {/*</div>*/}
 
-                    <h4>Темы</h4>
-                    {/*<p class="description">*/}
-                    {/*  Добавьте несколько тем, чтобы читатель знал, о&nbsp;чем ваш материал, и&nbsp;мог найти*/}
-                    {/*  его на&nbsp;страницах интересных ему тем. Темы можно менять местами, первая тема*/}
-                    {/*  становится заглавной*/}
-                    {/*</p>*/}
-                    <div class="pretty-form__item">
-                      <Show when={topics()}>
-                        <TopicSelect
-                          topics={topics()}
-                          onChange={(newSelectedTopics) => setForm('selectedTopics', newSelectedTopics)}
-                          selectedTopics={form.selectedTopics}
-                        />
-                      </Show>
-                      {/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}
-                    </div>
+                  <h4>Карточка материала на&nbsp;главной</h4>
+                  <p class="description">
+                    Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
+                    выглядеть на&nbsp;главной странице
+                  </p>
+                  <div class={styles.articlePreview} />
 
-                    {/*<h4>Соавторы</h4>*/}
-                    {/*<p class="description">У каждого соавтора можно добавить роль</p>*/}
-                    {/*<div class="pretty-form__item--with-button">*/}
-                    {/*  <div class="pretty-form__item">*/}
-                    {/*    <input type="text" name="authors" id="authors" placeholder="Введите имя или e-mail" />*/}
-                    {/*    <label for="authors">Введите имя или e-mail</label>*/}
-                    {/*  </div>*/}
-                    {/*  <button class="button button--submit">Добавить</button>*/}
-                    {/*</div>*/}
-
-                    {/*<div class="row">*/}
-                    {/*  <div class="col-md-6">Михаил Драбкин</div>*/}
-                    {/*  <div class="col-md-6">*/}
-                    {/*    <input type="text" name="coauthor" id="coauthor1" class="nolabel" />*/}
-                    {/*  </div>*/}
-                    {/*</div>*/}
-
-                    <h4>Карточка материала на&nbsp;главной</h4>
-                    <p class="description">
-                      Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
-                      выглядеть на&nbsp;главной странице
+                  <div class={styles.saveBlock}>
+                    <p>
+                      Проверьте ещё раз введённые данные, если всё верно, вы&nbsp;можете сохранить или
+                      опубликовать ваш текст
                     </p>
-                    <div class={styles.articlePreview} />
-
-                    <div class={styles.saveBlock}>
-                      <p>
-                        Проверьте ещё раз введённые данные, если всё верно, вы&nbsp;можете сохранить или
-                        опубликовать ваш текст
-                      </p>
-                      {/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
-                      <a href={getPagePath(router, 'create')}>Назад</a>
-                      <button type="submit" class={clsx('button button--submit', styles.button)}>
-                        Опубликовать
-                      </button>
-                    </div>
+                    {/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
+                    <a href={getPagePath(router, 'create')}>Назад</a>
+                    <button type="submit" class={clsx('button button--submit', styles.button)}>
+                      Опубликовать
+                    </button>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </form>
-      </Suspense>
+        </div>
+      </form>
     </div>
   )
 }
diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx
index 159d3843..6ae62080 100644
--- a/src/components/Views/Feed.tsx
+++ b/src/components/Views/Feed.tsx
@@ -29,7 +29,7 @@ export const FeedView = () => {
   const { sortedAuthors } = useAuthorsStore()
   const { topTopics } = useTopicsStore()
   const { topAuthors } = useTopAuthorsStore()
-  const { session, userSlug } = useSession()
+  const { session, user } = useSession()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const [topComments, setTopComments] = createSignal<Reaction[]>([])
 
@@ -49,9 +49,9 @@ export const FeedView = () => {
   // })
 
   createEffect(async () => {
-    if (userSlug()) {
+    if (user()) {
       // load recent editing shouts ( visibility = authors )
-      await loadShouts({ filters: { author: userSlug(), visibility: 'authors' }, limit: 15 })
+      await loadShouts({ filters: { author: user().slug, visibility: 'authors' }, limit: 15 })
     }
   })
 
diff --git a/src/context/session.tsx b/src/context/session.tsx
index 1269e16d..be1a8dcd 100644
--- a/src/context/session.tsx
+++ b/src/context/session.tsx
@@ -1,6 +1,6 @@
 import type { Accessor, JSX, Resource } from 'solid-js'
 import { createContext, createMemo, createResource, createSignal, onMount, useContext } from 'solid-js'
-import type { AuthResult } from '../graphql/types.gen'
+import type { AuthResult, User } from '../graphql/types.gen'
 import { apiClient } from '../utils/apiClient'
 import { resetToken, setToken } from '../graphql/privateGraphQLClient'
 import { useSnackbar } from './snackbar'
@@ -9,7 +9,7 @@ import { useLocalize } from './localize'
 type SessionContextType = {
   session: Resource<AuthResult>
   isSessionLoaded: Accessor<boolean>
-  userSlug: Accessor<string>
+  user: Accessor<User>
   isAuthenticated: Accessor<boolean>
   actions: {
     loadSession: () => AuthResult | Promise<AuthResult>
@@ -55,6 +55,7 @@ export const SessionProvider = (props: { children: JSX.Element }) => {
   })
 
   const userSlug = createMemo(() => session()?.user?.slug)
+  const user = createMemo(() => session()?.user)
 
   const isAuthenticated = createMemo(() => Boolean(session()?.user?.slug))
 
@@ -85,7 +86,7 @@ export const SessionProvider = (props: { children: JSX.Element }) => {
     confirmEmail
   }
 
-  const value: SessionContextType = { session, isSessionLoaded, userSlug, isAuthenticated, actions }
+  const value: SessionContextType = { session, isSessionLoaded, user, isAuthenticated, actions }
 
   onMount(() => {
     loadSession()
diff --git a/src/pages/create.page.tsx b/src/pages/create.page.tsx
index c311f093..e8deb8ea 100644
--- a/src/pages/create.page.tsx
+++ b/src/pages/create.page.tsx
@@ -1,15 +1,22 @@
-import { lazy, Suspense } from 'solid-js'
+import { lazy, Show, Suspense } from 'solid-js'
 import { PageLayout } from '../components/_shared/PageLayout'
 import { Loading } from '../components/_shared/Loading'
+import { useSession } from '../context/session'
 
 const CreateView = lazy(() => import('../components/Views/Create'))
 
 export const CreatePage = () => {
+  const { isAuthenticated, isSessionLoaded } = useSession()
+
   return (
     <PageLayout>
-      <Suspense fallback={<Loading />}>
-        <CreateView />
-      </Suspense>
+      <Show when={isSessionLoaded()}>
+        <Show when={isAuthenticated()} fallback="Давайте авторизуемся">
+          <Suspense fallback={<Loading />}>
+            <CreateView />
+          </Suspense>
+        </Show>
+      </Show>
     </PageLayout>
   )
 }