tiprab editor > 포커스 스타일 조정 + Icon 컴포넌트 사용법 +

components/editor/CourseEditor.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="editor course-editor">
+    <course-menu :editor="editor"/>
+    <editor-content
+      class="editor__content"
+      :editor="editor"
+    />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from 'tiptap'
+import CourseMenu from '~/components/editor/CourseMenu'
+import {
+  Bold,
+  Italic,
+  History,
+  OrderedList,
+  BulletList,
+  ListItem,
+} from 'tiptap-extensions'
+export default {
+  components: {
+    EditorContent, CourseMenu
+  },
+  props: {
+    initialContent: {
+      required: true,
+      type: String
+    }
+  },
+  data() {
+    return {
+      editor: null
+    }
+  },
+  // This is called only on client (in browser)
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        new Bold(),
+        new Italic(),
+        new History(),
+        new OrderedList(),
+        new BulletList(),
+        new ListItem()
+      ]
+    })
+    this.initialContent && this.editor.setContent(this.initialContent)
+  },
+  beforeDestroy() {
+    this.editor && this.editor.destroy()
+  }
+}
+</script>
+
+<style lang="scss">
+  .course-editor {
+    * {
+      &:focus {
+        outline: none;
+      }
+    }
+    border: 1px solid gray;
+    .editor__content {
+      padding: 0 20px 20px 20px;
+    }
+  }
+</style>

components/editor/CourseMenu.vue

@@ -0,0 +1,47 @@
+<template>
+  <editor-menu-bar
+    :editor="editor"
+    v-slot="{ commands, isActive }">
+    <div class="menubar">
+      <button
+        class="menubar__button"
+        :class="{ 'is-active': isActive.bold() }"
+        @click="commands.bold()">
+        <icon name="bold" size="small" />
+      </button>
+      <button
+        class="menubar__button"
+        :class="{ 'is-active': isActive.italic() }"
+        @click="commands.italic()">
+        <icon name="italic" size="small" />
+      </button>
+      <button
+        class="menubar__button"
+        :class="{ 'is-active': isActive.bullet_list() }"
+        @click="commands.bullet_list">
+        <icon name="list-ul" size="large" />
+      </button>
+      <button
+        class="menubar__button"
+        :class="{ 'is-active': isActive.ordered_list() }"
+        @click="commands.ordered_list">
+        <icon name="list-ol" size="large" />
+      </button>
+    </div>
+  </editor-menu-bar>
+</template>
+<script>
+import { EditorMenuBar } from 'tiptap'
+import Icon from '~/components/shared/Icon'
+export default {
+  components: {EditorMenuBar, Icon},
+  props: {
+    editor: Object
+  }
+}
+</script>
+<style scoped>
+  .menubar {
+    border-radius: 0px;
+  }
+</style>

components/instructor/LandingPage.vue

@@ -30,13 +30,14 @@
         <div class="field">
           <label class="label">Course description</label>
           <div class="control">
-            <textarea
+            <!-- <textarea
               :value="course.description"
               @input="($event) => emitCourseValue($event, 'description')"
               class="textarea is-medium"
               type="text"
               placeholder="Write something catchy about the course">
-            </textarea>
+            </textarea> -->
+            <CourseEditor :initialContent="course.description"/>
           </div>
         </div>
         <div class="field">
@@ -103,7 +104,12 @@
 </template>
 
 <script>
+import CourseEditor from '~/components/editor/CourseEditor'
+
 export default {
+  components: {
+    CourseEditor
+  },
   props: {
     course : {
       type : Object,