update

frontend/src/components/FreeleapsEditor.vue

@@ -11,6 +11,7 @@
       @mouseup.stop="selectionEnd"
     />
     <div v-if="!disabled" class="editor-control" :style="editorCtrlStyle">
+      <transition-group appear name="fade-transform" mode="out-in">
         <template v-if="!inputing">
           <div v-for="(item, index) in iconList" :key="index" class="editor-item">
             <button
@@ -92,7 +93,7 @@
         </template>
         <template v-if="inputing">
           <div class="editor-item">
-          <button class="item-icon item-icon-back" @click="backAction">
+            <button class="item-icon item-icon-back" @click="backAction" data-info="back">
               <svg-icon icon="fe-back" class-name="icon" />
             </button>
           </div>
@@ -101,6 +102,8 @@
             <svg-icon icon="msg-enter" class-name="item-enter-icon" />
           </div>
         </template>
+      </transition-group>
+      
     </div>
   </div>
 </template>
@@ -225,6 +228,8 @@ export default {
       } else {
         this.selectedRange = null
         this.editorCtrlStyle = { display: 'none' }
+        this.inputing = false
+        this.linkUrl = ''
         // this.commandStates = []
       }
     },
@@ -267,6 +272,7 @@ export default {
     },
     backAction() {
       this.inputing = false
+      this.linkUrl = ''
       this.$refs.editor.focus()
       this.restoreSelection()
     },
@@ -281,6 +287,7 @@ export default {
       this.selectedRange.surroundContents(a_node)
       this.backAction()
       this.$refs.editor.blur()
+      this.linkUrl = ''
       this.editorCtrlStyle = { display: 'none' }
     },
     getSelect() {
@@ -593,4 +600,23 @@ export default {
 .editor-body ol {
   padding-left: 40px;
 }
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 300;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-50px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(50px);
+}
+.fade-transform-active {
+  position: absolute;
+}
 </style>

frontend/src/pages/guest/FrontDoor.vue

@@ -25,7 +25,6 @@
       <p class="error-msg">{{ message }}</p>
     </div>
   </div>
-  <freeleaps-editor v-model:content="message" style="margin-top: 20px" />
 </template>
 
 <script>
@@ -35,10 +34,8 @@ import {
   // userProfileValidator,
 } from '@/utils/index'
 import { signinActionEnum } from '@/types/index'
-import FreeleapsEditor from '../../components/FreeleapsEditor.vue'
 
 export default {
-  components: { FreeleapsEditor },
   name: 'FrontDoor',
   props: {},
   data() {