#508 apply tiptap editor to problem quetion (#509)

* 에디터 placeholder 추가, 높이지정 style 추가

* 문제 질문하기 tiptap에디터 적용,질문 미리보기에 html적용

* 모달 주석 간단하게 수정

Author: banchan01

frontend/src/pages/oj/components/TiptapEditor.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="editor-wrapper" :class="{ 'is-focused': editor && editor.focused, 'is-readonly': !editable }">
+        <!-- 에티터 메뉴바 -->
         <div class="editor-menubar" v-if="editor && editable">
             <!-- 진하게 -->
             <div class="menubar__button" :class="{ 'is-active': editor.isActive.bold() }"
@@ -78,8 +79,9 @@
                 <Icon type="forward" size="20"></Icon>
             </div>
         </div>
-
-        <div class="editor-content-box" :class="{ 'readonly-content': !editable }">
+        <!-- 에디터 글 쓰는 곳 (최소 높이 지정 가능) -->
+        <div class="editor-content-box" :class="{ 'readonly-content': !editable }" :style="{ minHeight: minHeight }"
+            @click="focusEditor">
             <editor-content class="editor__content" :editor="editor" />
         </div>
     </div>
@@ -102,6 +104,7 @@ import {
     Strike,
     Underline,
     History,
+    Placeholder,
 } from 'tiptap-extensions';
 
 // 언어별 하이라이팅 라이브러리
@@ -158,6 +161,14 @@ export default {
             type: Boolean,
             default: true,
         },
+        minHeight: {
+            type: String,
+            default: '400px',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
     },
     data() {
         return {
@@ -209,13 +220,24 @@ export default {
                             javascript, python, cpp, java, bash, go
                         },
                     }),
+                    new Placeholder({
+                        emptyNodeClass: 'is-empty',
+                        emptyNodeText: this.placeholder,
+                        showOnlyWhenEditable: true,
+                    }),
                 ],
                 content: this.value,
                 onUpdate: ({ getHTML }) => {
                     this.$emit('input', getHTML());
                 },
             });
         },
+        // 에디터 어느 곳이나 마우스 클릭하면 글 쓰기 모드로 전환
+        focusEditor() {
+            if (this.editor && !this.editor.focused && this.editable) {
+                this.editor.focus()
+            }
+        },
     },
 }
 </script>
@@ -316,13 +338,12 @@ export default {
 
 .editor-content-box {
     background: white;
-    min-height: 400px;
     cursor: text;
     padding: 20px;
 
     &.readonly-content {
         padding: 0;
-        min-height: auto;
+        min-height: auto !important;
     }
 }
 
@@ -331,10 +352,19 @@ export default {
     outline: none;
 }
 
-/* ProseMirror Content Styles */
+// placeholder 스타일
+/deep/ .ProseMirror p.is-empty:first-child::before {
+    content: attr(data-empty-text);
+    float: left;
+    color: #aaa;
+    pointer-events: none;
+    height: 0;
+}
+
 /deep/ .ProseMirror {
     outline: none;
-    min-height: 360px;
+    height: 100%;
+    min-height: inherit;
     font-size: 16px;
     line-height: 1.7;
     color: #2c3e50;

frontend/src/pages/oj/views/problem/problemSolving/problemSolvingComponent/ProblemCommunity.vue

@@ -65,7 +65,7 @@
           </div>
           <h4 class="post-title">{{ post.title }}</h4>
         </div>
-        <p v-if="post.content_preview" class="post-preview">{{ post.content_preview }}</p>
+        <div v-if="post.content_preview" class="post-preview" v-html="post.content_preview"></div>
         <div class="post-footer">
           <div class="author-info">
             <img class="avatar" :src="post.author_avatar || defaultAvatar" alt="avatar" />
@@ -85,7 +85,7 @@
       </div>
     </div>
 
-    <Modal v-model="showCreateModal" :footer-hide="true" :closable="true" :mask-closable="false" width="650"
+    <Modal v-model="showCreateModal" :footer-hide="true" :closable="true" :mask-closable="false" width="800"
       class-name="create-question-modal">
       <div class="modal-header">
         <h2 class="modal-title">
@@ -113,7 +113,7 @@
           <div class="input-label">
             {{ $t("m.Problem_Community_Modal_Content_Label") }}
           </div>
-          <Input v-model="newPost.content" type="textarea" :autosize="{ minRows: 8, maxRows: 15 }"
+          <TiptapEditor v-model="newPost.content" minHeight="300px" :editable="true"
             :placeholder="$t('m.Problem_Community_Modal_Content_Placeholder')" />
         </FormItem>
       </Form>
@@ -137,9 +137,13 @@
 import api from "@oj/api"
 import { DEFAULT_AVATAR, QUESTION_STATUS } from "@/utils/constants"
 import { mapGetters } from "vuex"
+import TiptapEditor from "../../../../components/TiptapEditor.vue"
 
 export default {
   name: "ProblemCommunity",
+  components: {
+    TiptapEditor
+  },
   props: {
     problemID: {
       type: String,
@@ -772,8 +776,18 @@ export default {
   }
 }
 
-// Modal styles
+// top, bottom 모두 padding 주어 화면 중앙에 모달이 위치하도록 설정
 /deep/ .create-question-modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 50px;
+  padding-bottom: 50px;
+
+  .ivu-modal {
+    top: 0;
+  }
+
   .ivu-modal-content {
     border-radius: 16px;
     overflow: hidden;