Resolve issue toggling checkboxes in WYSIWYG view

Author: dullage

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 {

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 {