diff --git a/package-lock.json b/package-lock.json index a50c5b0..820e823 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "uuid": "^9.0.0", "vue": "^3.4.29", "vue-router": "^4.3.3", + "vue-tippy": "^6.6.0", "y-quill": "0.1.3", "yjs": "^13.6.23" }, @@ -2680,6 +2681,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/plugin-node-resolve": { "version": "15.2.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz", @@ -9333,6 +9344,15 @@ "node": ">=0.8" } }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "license": "MIT", + "dependencies": { + "@popperjs/core": "^2.9.0" + } + }, "node_modules/to-data-view": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/to-data-view/-/to-data-view-1.1.0.tgz", @@ -9953,6 +9973,18 @@ "vue": "^3.2.0" } }, + "node_modules/vue-tippy": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-6.6.0.tgz", + "integrity": "sha512-ISRIUQDlcEP05K1nCbvlVcd8yuWS6S3dI91qD0A2slgtwwWjih8Fn9Aymq4SNaHQsdiP5+MLRPZVDxFjKMPgKA==", + "license": "MIT", + "dependencies": { + "tippy.js": "^6.3.7" + }, + "peerDependencies": { + "vue": "^3.2.0" + } + }, "node_modules/vue-tsc": { "version": "2.0.29", "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.29.tgz", diff --git a/package.json b/package.json index fa97a6f..9920ef1 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "uuid": "^9.0.0", "vue": "^3.4.29", "vue-router": "^4.3.3", + "vue-tippy": "^6.6.0", "y-quill": "0.1.3", "yjs": "^13.6.23" }, diff --git a/src/components/admin/operation/mission/DetailFormEditor.vue b/src/components/admin/operation/mission/DetailFormEditor.vue index 92f161b..3d63b3b 100644 --- a/src/components/admin/operation/mission/DetailFormEditor.vue +++ b/src/components/admin/operation/mission/DetailFormEditor.vue @@ -28,6 +28,7 @@ import { QuillBinding } from "y-quill"; import { moduleOptions } from "@/helpers/quillConfig"; import * as Y from "yjs"; import "@lottiefiles/lottie-player"; +import { Awareness } from "@/helpers/awareness"; diff --git a/src/helpers/awareness.ts b/src/helpers/awareness.ts index 92d3944..bde5539 100644 --- a/src/helpers/awareness.ts +++ b/src/helpers/awareness.ts @@ -17,11 +17,12 @@ export type AwarenessActions = "update" | "remove"; export type AwarenessEvents = { update: { data: EditorState }; + change: { socketId: string; action: AwarenessActions } & EditorState; }; export class Awareness { - private editors = new Map(); - private editorStates = new Map(); + public readonly editors = new Map(); + public readonly editorStates = new Map(); public readonly emitter = mitt(); public getEditors() { @@ -38,6 +39,12 @@ export class Awareness { .map(([key, val]) => key); } + public getEditorObjsByField(field: string) { + return Array.from(this.editors.entries()) + .filter(([key, val]) => this.getEditorsByField(field).includes(key)) + .map(([key, val]) => val); + } + public getEditorStates() { return this.editorStates; } @@ -56,6 +63,7 @@ export class Awareness { } else if (action == "remove") { this.editorStates.delete(socketId); } + this.emitter.emit("change", { socketId, action, ...data }); } public publishMyState(data: EditorState) { diff --git a/src/main.ts b/src/main.ts index 385838b..9c95d87 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,6 +7,8 @@ import NProgress from "nprogress"; import "../node_modules/nprogress/nprogress.css"; import { Quill } from "@vueup/vue-quill"; import QuillCursors from "quill-cursors"; +import VueTippy from "vue-tippy"; +import "tippy.js/dist/tippy.css"; import { http } from "./serverCom"; import "./main.css"; @@ -19,6 +21,7 @@ const app = createApp(App); app.use(createPinia()); app.use(router); +app.use(VueTippy, { theme: "light", defaultProps: { placement: "right" } }); app.config.globalProperties.$http = http; app.config.globalProperties.$progress = NProgress; diff --git a/src/views/admin/operation/mission/MissionDetail.vue b/src/views/admin/operation/mission/MissionDetail.vue index a2e5f74..ea07e1d 100644 --- a/src/views/admin/operation/mission/MissionDetail.vue +++ b/src/views/admin/operation/mission/MissionDetail.vue @@ -1,13 +1,20 @@