Timothy Jaeryang Baek 2 ماه پیش
والد
کامیت
5b50f3cd69
3فایلهای تغییر یافته به همراه128 افزوده شده و 2 حذف شده
  1. 96 1
      package-lock.json
  2. 3 1
      package.json
  3. 29 0
      src/app.css

+ 96 - 1
package-lock.json

@@ -91,7 +91,9 @@
 				"undici": "^7.3.0",
 				"uuid": "^9.0.1",
 				"vite-plugin-static-copy": "^2.2.0",
-				"yaml": "^2.7.1"
+				"y-prosemirror": "^1.3.7",
+				"yaml": "^2.7.1",
+				"yjs": "^13.6.27"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "3.2.2",
@@ -8157,6 +8159,16 @@
 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
 			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
 		},
+		"node_modules/isomorphic.js": {
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
+			"integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
+			"license": "MIT",
+			"funding": {
+				"type": "GitHub Sponsors ❤",
+				"url": "https://github.com/sponsors/dmonad"
+			}
+		},
 		"node_modules/isstream": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -8401,6 +8413,27 @@
 				"@lezer/lr": "^1.3.0"
 			}
 		},
+		"node_modules/lib0": {
+			"version": "0.2.109",
+			"resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.109.tgz",
+			"integrity": "sha512-jP0gbnyW0kwlx1Atc4dcHkBbrVAkdHjuyHxtClUPYla7qCmwIif1qZ6vQeJdR5FrOVdn26HvQT0ko01rgW7/Xw==",
+			"license": "MIT",
+			"dependencies": {
+				"isomorphic.js": "^0.2.4"
+			},
+			"bin": {
+				"0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
+				"0gentesthtml": "bin/gentesthtml.js",
+				"0serve": "bin/0serve.js"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"type": "GitHub Sponsors ❤",
+				"url": "https://github.com/sponsors/dmonad"
+			}
+		},
 		"node_modules/lightningcss": {
 			"version": "1.29.1",
 			"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.1.tgz",
@@ -13463,6 +13496,51 @@
 				"node": ">=0.4"
 			}
 		},
+		"node_modules/y-prosemirror": {
+			"version": "1.3.7",
+			"resolved": "https://registry.npmjs.org/y-prosemirror/-/y-prosemirror-1.3.7.tgz",
+			"integrity": "sha512-NpM99WSdD4Fx4if5xOMDpPtU3oAmTSjlzh5U4353ABbRHl1HtAFUx6HlebLZfyFxXN9jzKMDkVbcRjqOZVkYQg==",
+			"license": "MIT",
+			"dependencies": {
+				"lib0": "^0.2.109"
+			},
+			"engines": {
+				"node": ">=16.0.0",
+				"npm": ">=8.0.0"
+			},
+			"funding": {
+				"type": "GitHub Sponsors ❤",
+				"url": "https://github.com/sponsors/dmonad"
+			},
+			"peerDependencies": {
+				"prosemirror-model": "^1.7.1",
+				"prosemirror-state": "^1.2.3",
+				"prosemirror-view": "^1.9.10",
+				"y-protocols": "^1.0.1",
+				"yjs": "^13.5.38"
+			}
+		},
+		"node_modules/y-protocols": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/y-protocols/-/y-protocols-1.0.6.tgz",
+			"integrity": "sha512-vHRF2L6iT3rwj1jub/K5tYcTT/mEYDUppgNPXwp8fmLpui9f7Yeq3OEtTLVF012j39QnV+KEQpNqoN7CWU7Y9Q==",
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"lib0": "^0.2.85"
+			},
+			"engines": {
+				"node": ">=16.0.0",
+				"npm": ">=8.0.0"
+			},
+			"funding": {
+				"type": "GitHub Sponsors ❤",
+				"url": "https://github.com/sponsors/dmonad"
+			},
+			"peerDependencies": {
+				"yjs": "^13.0.0"
+			}
+		},
 		"node_modules/yallist": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
@@ -13494,6 +13572,23 @@
 				"fd-slicer": "~1.1.0"
 			}
 		},
+		"node_modules/yjs": {
+			"version": "13.6.27",
+			"resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.27.tgz",
+			"integrity": "sha512-OIDwaflOaq4wC6YlPBy2L6ceKeKuF7DeTxx+jPzv1FHn9tCZ0ZwSRnUBxD05E3yed46fv/FWJbvR+Ud7x0L7zw==",
+			"license": "MIT",
+			"dependencies": {
+				"lib0": "^0.2.99"
+			},
+			"engines": {
+				"node": ">=16.0.0",
+				"npm": ">=8.0.0"
+			},
+			"funding": {
+				"type": "GitHub Sponsors ❤",
+				"url": "https://github.com/sponsors/dmonad"
+			}
+		},
 		"node_modules/yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

+ 3 - 1
package.json

@@ -135,7 +135,9 @@
 		"undici": "^7.3.0",
 		"uuid": "^9.0.1",
 		"vite-plugin-static-copy": "^2.2.0",
-		"yaml": "^2.7.1"
+		"y-prosemirror": "^1.3.7",
+		"yaml": "^2.7.1",
+		"yjs": "^13.6.27"
 	},
 	"engines": {
 		"node": ">=18.13.0 <=22.x.x",

+ 29 - 0
src/app.css

@@ -582,3 +582,32 @@ input[type='number'] {
 .tippy-box[data-theme~='transparent'] {
 	@apply bg-transparent p-0 m-0;
 }
+
+/* this is a rough fix for the first cursor position when the first paragraph is empty */
+.ProseMirror > .ProseMirror-yjs-cursor:first-child {
+	margin-top: 16px;
+}
+/* This gives the remote user caret. The colors are automatically overwritten*/
+.ProseMirror-yjs-cursor {
+	position: relative;
+	margin-left: -1px;
+	margin-right: -1px;
+	border-left: 1px solid black;
+	border-right: 1px solid black;
+	border-color: orange;
+	word-break: normal;
+	pointer-events: none;
+}
+/* This renders the username above the caret */
+.ProseMirror-yjs-cursor > div {
+	position: absolute;
+	top: -1.05em;
+	left: -1px;
+	font-size: 13px;
+	background-color: rgb(250, 129, 0);
+	user-select: none;
+	color: white;
+	padding-left: 2px;
+	padding-right: 2px;
+	white-space: nowrap;
+}