feat: paste contents and dev mode

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "serve": "vite preview",
+    "serve": "rm -rf ./dist && yarn build && vite preview",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src && yarn format",
     "format": "prettier src/**/*.{vue,css,ts} --write"
   },

src/components/editor/main/EditorBase.vue

@@ -49,6 +49,7 @@
         v-if="store.state.project.name !== '__NOT_CREATED__'"
         v-model="entry"
         @enter="enterListener"
+        @reset="resetListener"
       />
     </div>
   </div>
@@ -76,6 +77,10 @@
 
     useScroll().force('#edit')
 
+    resetListener()
+  }
+
+  const resetListener = () => {
     entry.value = ''
   }
 

src/components/editor/text/TextInput.vue

@@ -18,8 +18,9 @@
       ]"
       type="text"
       :placeholder="t('editor.text.placeholder.base')"
-      @input.prevent="handler"
+      @input="handler"
       @keypress.enter="enterHandler"
+      @paste="pasteHandler"
     />
   </section>
 </template>
@@ -28,6 +29,7 @@
   import { ContextStatePageContent } from '@/types/context'
   import { useEntity } from '@/use/entity'
   import { useFormat } from '@/use/format'
+  import { useInput } from '@/use/input'
   import { ref, computed, watch } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { useStore } from 'vuex'
@@ -39,11 +41,12 @@
     modelValue: String,
   })
 
-  const emit = defineEmits(['update:modelValue', 'submit', 'enter'])
+  const emit = defineEmits(['update:modelValue', 'submit', 'enter', 'reset'])
 
-  const hover = ref(false)
-  const type = ref('paragraph')
+  const hover = ref<boolean>(false)
+  const type = ref<string>('paragraph')
   const input = ref(null as any)
+  const paste = ref<boolean>(false)
 
   const cmp = computed({
     get() {
@@ -55,6 +58,12 @@
   })
 
   watch(cmp, (_cmp: string) => {
+    if (paste.value) {
+      cmp.value = ''
+
+      paste.value = false
+    }
+
     if (useEntity().entry(_cmp, 'p')) {
       type.value = 'paragraph'
       cmp.value = ''
@@ -79,7 +88,6 @@
 
   const enterHandler = () => {
     const content = {
-      // TODO: Hash id
       id: store.state.context.totalEntityCreated,
       type: type.value,
       raw: props.modelValue,
@@ -92,7 +100,27 @@
 
     emit('enter', content)
   }
+
   const handler = () => {
     emit('submit')
   }
+
+  const pasteHandler = (event: any) => {
+    paste.value = true
+    emit('reset')
+
+    const data = useInput().pasteText(event)
+
+    data.forEach((raw: string) => {
+      const content = {
+        id: store.state.context.totalEntityCreated,
+        type: 'paragraph',
+        raw,
+        createdAt: useFormat().actually(),
+        updatedAt: useFormat().actually(),
+      } as ContextStatePageContent
+
+      emit('enter', content)
+    })
+  }
 </script>

src/types/utils.ts

@@ -0,0 +1 @@
+export type Callback<T> = (...foo: Array<T>) => T

src/use/input.ts

@@ -0,0 +1,9 @@
+export const useInput = () => {
+  const pasteText = (event: any): Array<string> => {
+    const arr = event.clipboardData.getData('text').split('\n')
+
+    return arr.filter((data: string) => data !== '')
+  }
+
+  return { pasteText }
+}

src/use/start.ts

@@ -1,5 +1,15 @@
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
+import { Callback } from '@/types/utils'
+
+const mode: Callback<void> = () => {
+  if (import.meta.env.MODE !== 'production') {
+    console.log = () => {}
+    console.warn = () => {}
+    console.info = () => {}
+    console.debug = () => {}
+  }
+}
 
 const darkSet = (store: any) => {
   const dark = localStorage.getItem('theme')
@@ -26,6 +36,7 @@ export const useStart = () => {
   const store = useStore()
 
   const init = () => {
+    mode()
     darkSet(store)
     langSet(store)
   }