fix(editor): copy without html

Novout · Nov 25, 2021 · d660b2c · d660b2c
1 parent f7574b7
commit d660b2c
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 68 deletions.
diff --git a/...nents/editor/entity/EditorEntityInput.vue → ...tity/default/EditorEntityDefaultInput.vue b/...nents/editor/entity/EditorEntityInput.vue → ...tity/default/EditorEntityDefaultInput.vue
@@ -15,22 +15,27 @@
         w-full
         rounded-none
         border-none
-        bg-theme-editor-input-background 
-        hover:bg-theme-editor-input-background-hover 
-        active:bg-theme-editor-input-background-active 
-        text-theme-editor-input-text 
+        bg-theme-editor-input-background
+        hover:bg-theme-editor-input-background-hover
+        active:bg-theme-editor-input-background-active
+        text-theme-editor-input-text
         placeholder-theme-editor-input-placeholder
-        hover:theme-editor-input-text-hover 
+        hover:theme-editor-input-text-hover
         active:theme-editor-input-text-active
-        px-4 md:px-14
+        px-4
+        md:px-14
       "
       :style="{ minHeight: '50px' }"
       :class="[
         EDITOR.styles.input.fontSize,
         EDITOR.styles.input.fontFamily,
         EDITOR.styles.input.fontColor,
       ]"
-      :placeholder="t('editor.text.placeholder.base', { prefix: EDITOR.configuration.commands.prefix })"
+      :placeholder="
+        t('editor.text.placeholder.base', {
+          prefix: EDITOR.configuration.commands.prefix,
+        })
+      "
       @input="onInput"
       @keypress.enter.prevent="enterHandler"
       @keydown="onKeyboard"
@@ -48,15 +53,15 @@
   import { useInput } from '@/use/input'
   import { useScroll } from '@/use/scroll'
   import useEmitter from '@/use/emitter'
-  import { ref, computed, watch, onMounted, nextTick } from 'vue';
+  import { ref, computed, watch, onMounted, nextTick } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { useToast } from 'vue-toastification'
   import { useEnv } from '@/use/env'
   import { useFactory } from '@/use/factory'
   import { useEditorStore } from '@/store/editor'
   import { useContextStore } from '@/store/context'
   import usePlugin from '@/use/plugin/core'
-import { useUtils } from '@/use/utils'
+  import { useUtils } from '@/use/utils'
 
   const toast = useToast()
   const { t } = useI18n()
@@ -112,43 +117,58 @@ import { useUtils } from '@/use/utils'
   watch(cmp, (_cmp: string) => {
     plugin.emit('plugin-input-watch-initial', {
       data: _cmp,
-      index: CONTEXT.entities.length
-    }) 
+      index: CONTEXT.entities.length,
+    })
 
     if (paste.value) {
       cmp.value = ''
 
       paste.value = false
     }
 
-    if (_cmp.startsWith(EDITOR.configuration.commands.prefix) && _cmp.length <= 2) {
+    if (
+      _cmp.startsWith(EDITOR.configuration.commands.prefix) &&
+      _cmp.length <= 2
+    ) {
       commands.value = true
     } else {
       commands.value = false
     }
 
-    if (entity.utils().entry(_cmp, EDITOR.configuration.commands.paragraph.prefix)) {
+    if (
+      entity.utils().entry(_cmp, EDITOR.configuration.commands.paragraph.prefix)
+    ) {
       type.value = 'paragraph'
       cmp.value = ''
       input.value.placeholder = t('editor.text.placeholder.paragraph')
       return
     }
 
-    if (entity.utils().entry(_cmp, EDITOR.configuration.commands.headingTwo.prefix)) {
+    if (
+      entity
+        .utils()
+        .entry(_cmp, EDITOR.configuration.commands.headingTwo.prefix)
+    ) {
       type.value = 'heading-two'
       cmp.value = ''
       input.value.placeholder = t('editor.text.placeholder.headingtwo')
       return
     }
 
-    if (entity.utils().entry(_cmp, EDITOR.configuration.commands.headingThree.prefix)) {
+    if (
+      entity
+        .utils()
+        .entry(_cmp, EDITOR.configuration.commands.headingThree.prefix)
+    ) {
       type.value = 'heading-three'
       cmp.value = ''
       input.value.placeholder = t('editor.text.placeholder.headingthree')
       return
     }
 
-    if (entity.utils().entry(_cmp, EDITOR.configuration.commands.pageBreak.prefix)) {
+    if (
+      entity.utils().entry(_cmp, EDITOR.configuration.commands.pageBreak.prefix)
+    ) {
       cmp.value = ''
 
       const content = {
@@ -166,7 +186,9 @@ import { useUtils } from '@/use/utils'
       return
     }
 
-    if (entity.utils().entry(_cmp, EDITOR.configuration.commands.lineBreak.prefix)) {
+    if (
+      entity.utils().entry(_cmp, EDITOR.configuration.commands.lineBreak.prefix)
+    ) {
       cmp.value = ''
 
       const content = {
@@ -184,26 +206,36 @@ import { useUtils } from '@/use/utils'
       return
     }
 
-    if (entity.utils().entry(_cmp, EDITOR.configuration.commands.image.prefix)) {
+    if (
+      entity.utils().entry(_cmp, EDITOR.configuration.commands.image.prefix)
+    ) {
       cmp.value = ''
 
-      factory.simulate().file((content: Entity) => {
-        type.value = 'paragraph'
-        input.value.placeholder = t('editor.text.placeholder.paragraph')
+      factory.simulate().file(
+        (content: Entity) => {
+          type.value = 'paragraph'
+          input.value.placeholder = t('editor.text.placeholder.paragraph')
 
-        emit('enter', content)
+          emit('enter', content)
 
-        return
-      }, () => {
-        toast.error(t('toast.generics.error'))
-      })
+          return
+        },
+        () => {
+          toast.error(t('toast.generics.error'))
+        }
+      )
     }
 
-    const dialogue = EDITOR.configuration.commands.prefix + EDITOR.configuration.commands.dialogue.prefix
+    const dialogue =
+      EDITOR.configuration.commands.prefix +
+      EDITOR.configuration.commands.dialogue.prefix
 
     if (_cmp.includes(dialogue)) {
       const offset = _cmp.indexOf(dialogue) + dialogue.length
-      const sub = _cmp.replace(dialogue, EDITOR.configuration.commands.dialogue.value)
+      const sub = _cmp.replace(
+        dialogue,
+        EDITOR.configuration.commands.dialogue.value
+      )
 
       input.value.setSelectionRange(offset, offset)
 
@@ -215,7 +247,7 @@ import { useUtils } from '@/use/utils'
   })
 
   const enterHandler = () => {
-    if(!cmp.value) return
+    if (!cmp.value) return
 
     const content = {
       type: type.value,
@@ -246,7 +278,7 @@ import { useUtils } from '@/use/utils'
     data.forEach(async (raw: string) => {
       const normalize = raw.replace(/\s+/g, ' ').trim()
 
-      if(!normalize) return
+      if (!normalize) return
 
       const content = {
         type: type.value,
@@ -262,12 +294,12 @@ import { useUtils } from '@/use/utils'
 
     plugin.emit('plugin-entity-paste-in-page', {
       index: CONTEXT.entities.length,
-      quantity: _plugin_quantity
+      quantity: _plugin_quantity,
     })
   }
 
   const onKeyboard = async (e: KeyboardEvent) => {
-    if(e.ctrlKey) {
+    if (e.ctrlKey) {
       // italic entity
       if (e.key === 'i') {
         const content = entity
@@ -317,23 +349,21 @@ import { useUtils } from '@/use/utils'
       return
     }
 
-    if(e.key === 'ArrowUp') {
+    if (e.key === 'ArrowUp') {
       emitter.emit('entity-open-last')
       return
     }
 
-    if((e.key === 'Delete' || e.key === 'Backspace') && cmp.value === '') {
+    if ((e.key === 'Delete' || e.key === 'Backspace') && cmp.value === '') {
       e.preventDefault()
       e.stopPropagation()
-      
+
       emitter.emit('entity-open-last')
       return
     }
   }
 
-  const onInput = () => {
-    
-  }
+  const onInput = () => {}
 
   const onClick = () => {
     emitter.emit('entity-focus')

diff --git a/...onents/editor/entity/EditorEntityShow.vue → ...ntity/default/EditorEntityDefaultShow.vue b/...onents/editor/entity/EditorEntityShow.vue → ...ntity/default/EditorEntityDefaultShow.vue
@@ -8,7 +8,7 @@
     @mouseleave="hover = false"
     @click="onClickInEntity"
   >
-    <EditorEntityShowPopover
+    <EditorEntityDefaultShowPopover
       v-if="hover && props.entity.type !== 'heading-one'"
       :entity="props.entity"
     />
@@ -27,6 +27,7 @@
       @keydown="onKeyboard"
       @click="onClick"
       @paste="entity.base().onPaste(props.entity, data, $event)"
+      @copy="raw.v2().copy()"
       v-html="raw.v2().purge().editor(props.entity)"
     />
   </section>

diff --git a/...editor/entity/EditorEntityShowPopover.vue → ...efault/EditorEntityDefaultShowPopover.vue b/...editor/entity/EditorEntityShowPopover.vue → ...efault/EditorEntityDefaultShowPopover.vue
@@ -31,23 +31,31 @@
       "
       @mouseleave="onReset"
     >
-      <EditorEntityShowSelect @click.prevent.stop="onNewEntity('paragraph')">
+      <EditorEntityDefaultShowSelect
+        @click.prevent.stop="onNewEntity('paragraph')"
+      >
         P
-      </EditorEntityShowSelect>
-      <EditorEntityShowSelect @click.prevent.stop="onNewEntity('heading-two')">
+      </EditorEntityDefaultShowSelect>
+      <EditorEntityDefaultShowSelect
+        @click.prevent.stop="onNewEntity('heading-two')"
+      >
         H2
-      </EditorEntityShowSelect>
-      <EditorEntityShowSelect
+      </EditorEntityDefaultShowSelect>
+      <EditorEntityDefaultShowSelect
         @click.prevent.stop="onNewEntity('heading-three')"
       >
         H3
-      </EditorEntityShowSelect>
-      <EditorEntityShowSelect @click.prevent.stop="onNewEntity('page-break')">
+      </EditorEntityDefaultShowSelect>
+      <EditorEntityDefaultShowSelect
+        @click.prevent.stop="onNewEntity('page-break')"
+      >
         BP
-      </EditorEntityShowSelect>
-      <EditorEntityShowSelect @click.prevent.stop="onNewEntity('line-break')">
+      </EditorEntityDefaultShowSelect>
+      <EditorEntityDefaultShowSelect
+        @click.prevent.stop="onNewEntity('line-break')"
+      >
         LB
-      </EditorEntityShowSelect>
+      </EditorEntityDefaultShowSelect>
     </section>
     <HeroIcon @mouseenter.prevent.stop="onNewEntityWrapper">
       <svg
@@ -76,29 +84,31 @@
         z-max
       "
     >
-      <EditorEntityShowSelect @click.prevent.stop="onSwitchEntity('paragraph')">
+      <EditorEntityDefaultShowSelect
+        @click.prevent.stop="onSwitchEntity('paragraph')"
+      >
         P
-      </EditorEntityShowSelect>
-      <EditorEntityShowSelect
+      </EditorEntityDefaultShowSelect>
+      <EditorEntityDefaultShowSelect
         @click.prevent.stop="onSwitchEntity('heading-two')"
       >
         H2
-      </EditorEntityShowSelect>
-      <EditorEntityShowSelect
+      </EditorEntityDefaultShowSelect>
+      <EditorEntityDefaultShowSelect
         @click.prevent.stop="onSwitchEntity('heading-three')"
       >
         H3
-      </EditorEntityShowSelect>
-      <EditorEntityShowSelect
+      </EditorEntityDefaultShowSelect>
+      <EditorEntityDefaultShowSelect
         @click.prevent.stop="onSwitchEntity('page-break')"
       >
         BP
-      </EditorEntityShowSelect>
-      <EditorEntityShowSelect
+      </EditorEntityDefaultShowSelect>
+      <EditorEntityDefaultShowSelect
         @click.prevent.stop="onSwitchEntity('line-break')"
       >
         LB
-      </EditorEntityShowSelect>
+      </EditorEntityDefaultShowSelect>
     </section>
     <HeroIcon
       class="wb-icon"
@@ -129,7 +139,7 @@
         border-theme-border-1
       "
     >
-      <EditorEntityShowSelect @click.prevent.stop="onUpEntity">
+      <EditorEntityDefaultShowSelect @click.prevent.stop="onUpEntity">
         <template #icon>
           <HeroIcon>
             <svg
@@ -147,8 +157,8 @@
           </HeroIcon>
         </template>
         <p>{{ t('editor.aside.entity.up') }}</p>
-      </EditorEntityShowSelect>
-      <EditorEntityShowSelect @click.prevent.stop="onDownEntity">
+      </EditorEntityDefaultShowSelect>
+      <EditorEntityDefaultShowSelect @click.prevent.stop="onDownEntity">
         <template #icon>
           <HeroIcon>
             <svg
@@ -166,8 +176,8 @@
           </HeroIcon>
         </template>
         <p>{{ t('editor.aside.entity.down') }}</p>
-      </EditorEntityShowSelect>
-      <EditorEntityShowSelect @click.prevent.stop="onDeleteEntity">
+      </EditorEntityDefaultShowSelect>
+      <EditorEntityDefaultShowSelect @click.prevent.stop="onDeleteEntity">
         <template #icon>
           <HeroIcon>
             <svg
@@ -185,7 +195,7 @@
           </HeroIcon>
         </template>
         <p>{{ t('editor.aside.entity.delete') }}</p>
-      </EditorEntityShowSelect>
+      </EditorEntityDefaultShowSelect>
     </section>
     <HeroIcon
       v-if="

diff --git a/.../editor/entity/EditorEntityShowSelect.vue → ...default/EditorEntityDefaultShowSelect.vue b/.../editor/entity/EditorEntityShowSelect.vue → ...default/EditorEntityDefaultShowSelect.vue
diff --git a/src/components/editor/main/EditorBase.vue b/src/components/editor/main/EditorBase.vue
@@ -28,13 +28,13 @@
         overflow-y-auto overflow-x-hidden
       "
     >
-      <EditorEntityShow
+      <EditorEntityDefaultShow
         v-for="(entity, index) in entities"
         :id="`entity-${String(index)}`"
         :key="index"
         :entity="entity"
       />
-      <EditorEntityInput
+      <EditorEntityDefaultInput
         v-if="PROJECT.name !== env.projectEmpty()"
         v-model="entry"
         @enter="enterListener"