Resolve issue toggling checkboxes in WYSIWYG view

diff --git a/client/components/toastui/toastui-editor-overrides.scss b/client/components/toastui/toastui-editor-overrides.scss
index 81665e7a5aacb4f41e0629fb4969c2bafbec9d3f..685379bec58983216d854e123a329b06d64dab3d 100644 (file)
--- a/client/components/toastui/toastui-editor-overrides.scss
+++ b/client/components/toastui/toastui-editor-overrides.scss
@@ -1,11 +1,3 @@
-// Disable checkboxes in view mode. See https://github.com/nhn/tui.editor/issues/1087.
-.toastui-editor-contents li.task-list-item {
-  pointer-events: none;
-  a {
-    pointer-events: auto;
-  }
-}
-
 .ProseMirror,
 .toastui-editor-defaultUI .ProseMirror,
 .toastui-editor-md-container .toastui-editor-md-preview {

diff --git a/client/views/Note.vue b/client/views/Note.vue
index adb37e36b2dbe34005456ffbe9295bdf2c0d9590..69ca6301c931a713a17b09dd8a55e8362b4f8e5e 100644 (file)
--- a/client/views/Note.vue
+++ b/client/views/Note.vue
@@ -86,7 +86,11 @@
 
     <!-- Content -->
     <div class="flex-1">
-      <ToastViewer v-if="!editMode" :initialValue="note.content" />
+      <ToastViewer
+        v-if="!editMode"
+        :initialValue="note.content"
+        class="toast-viewer"
+      />
       <ToastEditor
         v-if="editMode"
         ref="toastEditor"
@@ -99,6 +103,17 @@
   </LoadingIndicator>
 </template>
 
+<style>
+/* Disable checkboxes in view mode. See https://github.com/nhn/tui.editor/issues/1087. */
+.toast-viewer li.task-list-item {
+  pointer-events: none;
+}
+.toast-viewer li.task-list-item a {
+  pointer-events: auto;
+}
+</style>
+
+
 <script setup>
 import { mdiNoteOffOutline } from "@mdi/js";
 import {