70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<template>
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row gap-2 items-center">
|
|
<label :for="title">{{ title }}</label>
|
|
<lottie-player src="/typing_animation.json" class="w-fit h-5" loop autoplay />
|
|
</div>
|
|
<QuillEditor
|
|
:id="title"
|
|
theme="snow"
|
|
style="height: 250px; max-height: 250px; min-height: 250px"
|
|
contentType="html"
|
|
:options="{ modules: moduleOptions }"
|
|
@ready="initEditor"
|
|
/>
|
|
<!--
|
|
:enable="can('create', 'operation', 'mission')"
|
|
:style="!can('create', 'operation', 'mission') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
|
|
-->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineComponent, type PropType } from "vue";
|
|
import { Quill, QuillEditor } from "@vueup/vue-quill";
|
|
import type QuillCursors from "quill-cursors";
|
|
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
|
import { QuillBinding } from "y-quill";
|
|
import { moduleOptions } from "@/helpers/quillConfig";
|
|
import * as Y from "yjs";
|
|
import "@lottiefiles/lottie-player";
|
|
import { Awareness } from "@/helpers/awareness";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default defineComponent({
|
|
props: {
|
|
text: {
|
|
type: Object as PropType<Y.Text>,
|
|
required: true,
|
|
},
|
|
awareness: {
|
|
type: Object as PropType<Partial<Awareness>>,
|
|
required: true,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
binding: undefined as undefined | QuillBinding,
|
|
cursors: undefined as undefined | QuillCursors,
|
|
};
|
|
},
|
|
beforeUnmount() {
|
|
if (this.binding) {
|
|
this.binding.destroy();
|
|
this.binding = undefined;
|
|
}
|
|
},
|
|
methods: {
|
|
initEditor(quill: Quill) {
|
|
quill.history.clear();
|
|
this.binding = new QuillBinding(this.text, quill); // TODO: awareness
|
|
this.cursors = quill.getModule("cursors") as QuillCursors;
|
|
},
|
|
},
|
|
});
|
|
</script>
|