From 503d7203f141d7fa68418ef08c6c024324de84ae Mon Sep 17 00:00:00 2001
From: Novout <novout@hotmail.com>
Date: Mon, 20 Sep 2021 18:18:32 -0300
Subject: [PATCH] feat: editor definitions

---
 .eslintrc.js                           |  2 +
 components.d.ts                        |  1 +
 src/components/editor/EditorBase.vue   | 19 +++++-
 src/components/editor/EditorHeader.vue | 10 ++++
 src/components/editor/TextInput.vue    | 44 ++++++++++++--
 src/components/editor/TextShow.vue     | 81 +++++++++++++++++++++++++-
 src/store/module/context.ts            | 16 ++++-
 src/store/module/editor.ts             | 36 +++++++++++-
 src/tailwind.css                       |  4 ++
 src/types/context.ts                   |  9 +++
 src/types/editor.ts                    | 11 ++--
 11 files changed, 211 insertions(+), 22 deletions(-)
 create mode 100644 src/components/editor/EditorHeader.vue
 create mode 100644 src/types/context.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index d7d8d4bd4..56a90856f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,6 +12,8 @@ module.exports = {
     "vue/no-unused-vars": 0,
     "vue/no-mutating-props": 0,
     "vue/valid-v-on": 0,
+    "vue/valid-v-for": 0,
+    "@typescript-eslint/no-empty-function": 0,
     "no-undef": 0
   },
 };
diff --git a/components.d.ts b/components.d.ts
index ac91d0ad3..cd2606f24 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,6 +8,7 @@ declare module 'vue' {
     DisclosureButton: typeof import('@headlessui/vue')['DisclosureButton']
     DisclosurePanel: typeof import('@headlessui/vue')['DisclosurePanel']
     EditorBase: typeof import('E:/dev/projects/write-better/src/components/editor/EditorBase.vue')['default']
+    EditorHeader: typeof import('E:/dev/projects/write-better/src/components/editor/EditorHeader.vue')['default']
     HeroIcon: typeof import('E:/dev/projects/write-better/src/components/utils/HeroIcon.vue')['default']
     LangSwitcher: typeof import('E:/dev/projects/write-better/src/components/utils/LangSwitcher.vue')['default']
     Popover: typeof import("@headlessui/vue")["Popover"];
diff --git a/src/components/editor/EditorBase.vue b/src/components/editor/EditorBase.vue
index eade921dd..4c94df5a9 100644
--- a/src/components/editor/EditorBase.vue
+++ b/src/components/editor/EditorBase.vue
@@ -16,14 +16,21 @@
         w-11/12
         md:h-editor
         h-screen
-        md:p-5
-        p-0
         bg-gray-700
         overflow-y-auto
         rounded-sm
         shadow-lg
       "
     >
+      <EditorHeader />
+      <TextShow
+        v-for="page in store.state.context.page"
+        :id="page.type + '-' + page.id"
+        :key="page.id"
+        :type="page.type"
+      >
+        {{ page.raw }}
+      </TextShow>
       <TextInput v-model="entry" @enter="enterListener" />
     </div>
   </div>
@@ -31,10 +38,16 @@
 
 <script lang="ts" setup>
   import { ref } from 'vue'
+  import { useStore } from 'vuex'
+  import { ContextStatePageContent } from '@/types/context'
+
+  const store = useStore()
 
   const entry = ref('')
 
-  const enterListener = () => {
+  const enterListener = (content: ContextStatePageContent) => {
+    store.commit('context/addInPage', content)
+
     entry.value = ''
   }
 </script>
diff --git a/src/components/editor/EditorHeader.vue b/src/components/editor/EditorHeader.vue
new file mode 100644
index 000000000..2e21ba1d9
--- /dev/null
+++ b/src/components/editor/EditorHeader.vue
@@ -0,0 +1,10 @@
+<template>
+  <header class="h-6 flex items-center bg-gray-300 dark:bg-gray-900">
+    <div class="flex-1 flex items-center justify-start">
+      <p class="wb-text">test1</p>
+    </div>
+    <div class="flex-1 flex items-center justify-end">
+      <p class="wb-text">test2</p>
+    </div>
+  </header>
+</template>
diff --git a/src/components/editor/TextInput.vue b/src/components/editor/TextInput.vue
index 3a9d16803..e7c7a76af 100644
--- a/src/components/editor/TextInput.vue
+++ b/src/components/editor/TextInput.vue
@@ -1,8 +1,8 @@
 <template>
   <section
+    class="flex justify-center items-center w-full transition-all"
     @mouseenter="hover = true"
     @mouseout="hover = false"
-    class="flex justify-center items-center w-full transition-all"
   >
     <input
       v-model="cmp"
@@ -14,15 +14,16 @@
         store.state.editor.styles.input.fontColor,
       ]"
       type="text"
+      :placeholder="t('editor.text.inputCode')"
       @input.prevent="handler"
       @keypress.enter="enterHandler"
-      :placeholder="t('editor.text.inputCode')"
     />
   </section>
 </template>
 
 <script setup lang="ts">
-  import { ref, computed } from 'vue'
+  import { ContextStatePageContent } from '@/types/context'
+  import { ref, computed, watch } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { useStore } from 'vuex'
 
@@ -36,6 +37,8 @@
   const emit = defineEmits(['update:modelValue', 'submit', 'enter'])
 
   const hover = ref(false)
+  const type = ref('paragraph')
+
   const cmp = computed({
     get() {
       return props.modelValue
@@ -45,10 +48,41 @@
     },
   })
 
+  watch(cmp, (_cmp: string) => {
+    if (_cmp.startsWith('/p')) {
+      type.value = 'paragraph'
+      cmp.value = ''
+      return
+    }
+
+    if (_cmp.startsWith('/h1')) {
+      type.value = 'heading-one'
+      cmp.value = ''
+      return
+    }
+
+    if (_cmp.startsWith('/h2')) {
+      type.value = 'heading-two'
+      cmp.value = ''
+      return
+    }
+
+    if (_cmp.startsWith('/h3')) {
+      type.value = 'heading-three'
+      cmp.value = ''
+      return
+    }
+  })
+
   const enterHandler = () => {
-    emit('enter')
-  }
+    const content = {
+      id: store.state.context.entity,
+      type: type.value,
+      raw: props.modelValue,
+    } as ContextStatePageContent
 
+    emit('enter', content)
+  }
   const handler = () => {
     emit('submit')
   }
diff --git a/src/components/editor/TextShow.vue b/src/components/editor/TextShow.vue
index 93ae382e2..43eb64d2e 100644
--- a/src/components/editor/TextShow.vue
+++ b/src/components/editor/TextShow.vue
@@ -1,6 +1,10 @@
 <template>
-  <section>
-    <HeroIcon class="text-gray-200 h-4 w-4 opacity-40">
+  <section
+    class="flex w-full"
+    @mouseenter="hover = true"
+    @mouseout="hover = false"
+  >
+    <HeroIcon v-if="hover" class="text-gray-200 h-4 w-4 opacity-20">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="h-4 w-4"
@@ -12,7 +16,7 @@
         />
       </svg>
     </HeroIcon>
-    <HeroIcon class="text-gray-200 h-4 w-4 opacity-40">
+    <HeroIcon v-if="hover" class="text-gray-200 h-4 w-4 opacity-20">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="h-4 w-4"
@@ -28,5 +32,76 @@
         />
       </svg>
     </HeroIcon>
+    <p
+      class="w-full"
+      :class="[
+        props.type === 'paragraph'
+          ? store.state.editor.styles.show.paragraph.fontSize
+          : '',
+        props.type === 'paragraph'
+          ? store.state.editor.styles.show.paragraph.fontFamily
+          : '',
+        props.type === 'paragraph'
+          ? store.state.editor.styles.show.paragraph.fontColor
+          : '',
+        props.type === 'paragraph'
+          ? store.state.editor.styles.show.paragraph.fontWeight
+          : '',
+
+        props.type === 'heading-one'
+          ? store.state.editor.styles.show.heading.one.fontSize
+          : '',
+        props.type === 'heading-one'
+          ? store.state.editor.styles.show.heading.one.fontFamily
+          : '',
+        props.type === 'heading-one'
+          ? store.state.editor.styles.show.heading.one.fontColor
+          : '',
+        props.type === 'heading-one'
+          ? store.state.editor.styles.show.heading.one.fontWeight
+          : '',
+
+        props.type === 'heading-two'
+          ? store.state.editor.styles.show.heading.two.fontSize
+          : '',
+        props.type === 'heading-two'
+          ? store.state.editor.styles.show.heading.two.fontFamily
+          : '',
+        props.type === 'heading-two'
+          ? store.state.editor.styles.show.heading.two.fontColor
+          : '',
+        props.type === 'heading-two'
+          ? store.state.editor.styles.show.heading.two.fontWeight
+          : '',
+
+        props.type === 'heading-three'
+          ? store.state.editor.styles.show.heading.three.fontSize
+          : '',
+        props.type === 'heading-three'
+          ? store.state.editor.styles.show.heading.three.fontFamily
+          : '',
+        props.type === 'heading-three'
+          ? store.state.editor.styles.show.heading.three.fontColor
+          : '',
+        props.type === 'heading-three'
+          ? store.state.editor.styles.show.heading.three.fontWeight
+          : '',
+      ]"
+    >
+      <slot />
+    </p>
   </section>
 </template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useStore } from 'vuex'
+
+  const props = defineProps({
+    type: String,
+  })
+
+  const store = useStore()
+
+  const hover = ref(false)
+</script>
diff --git a/src/store/module/context.ts b/src/store/module/context.ts
index 1ddaf14da..7a123df3e 100644
--- a/src/store/module/context.ts
+++ b/src/store/module/context.ts
@@ -1,6 +1,18 @@
+import { ContextState, ContextStatePageContent } from '@/types/context'
+
 export default {
-  state: () => ({}),
-  mutations: {},
+  namespaced: true,
+  state: () =>
+    ({
+      entity: 0,
+      page: [],
+    } as ContextState),
+  mutations: {
+    addInPage(state: any, content: ContextStatePageContent) {
+      state.entity++
+      state.page.push(content)
+    },
+  },
   actions: {},
   getters: {},
 }
diff --git a/src/store/module/editor.ts b/src/store/module/editor.ts
index 53a033cec..54fbd0c41 100644
--- a/src/store/module/editor.ts
+++ b/src/store/module/editor.ts
@@ -1,17 +1,47 @@
 import { EditorState } from '@/types/editor'
 
 export default {
+  namespaced: true,
   state: () =>
     ({
       styles: {
         input: {
           fontFamily: 'font-raleway',
           fontSize: 'text-xs',
-          fontColor: 'text-gray-100',
+          fontColor: 'text-black dark:text-gray-100',
+        },
+        show: {
+          fontFamily: 'font-raleway',
+          fontColor: 'text-black dark:text-gray-100',
+          paragraph: {
+            fontFamily: 'font-raleway',
+            fontColor: 'text-black dark:text-gray-100',
+            fontSize: 'text-xs',
+            fontWeight: 'font-normal',
+          },
+          heading: {
+            one: {
+              fontFamily: 'font-raleway',
+              fontColor: 'text-black dark:text-gray-100',
+              fontSize: 'text-3xl',
+              fontWeight: 'font-bold',
+            },
+            two: {
+              fontFamily: 'font-raleway',
+              fontColor: 'text-black dark:text-gray-100',
+              fontSize: 'text-2xl',
+              fontWeight: 'font-bold',
+            },
+            three: {
+              fontFamily: 'font-raleway',
+              fontColor: 'text-black dark:text-gray-100',
+              fontSize: 'text-xl',
+              fontWeight: 'font-semibold',
+            },
+          },
         },
       },
-      contentRaw: {},
-      contentShow: {},
+      content: {},
     } as EditorState),
   mutations: {},
   actions: {},
diff --git a/src/tailwind.css b/src/tailwind.css
index 9d3f9966e..3385cafef 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -16,6 +16,10 @@
   .wb-title {
     @apply text-4xl opacity-70 hover:text-gray-700 dark:hover:text-white cursor-default;
   }
+
+  .wb-text {
+    @apply text-black dark:text-gray-200;
+  }
 }
 
 @layer utilities {
diff --git a/src/types/context.ts b/src/types/context.ts
new file mode 100644
index 000000000..9cb454ea9
--- /dev/null
+++ b/src/types/context.ts
@@ -0,0 +1,9 @@
+export interface ContextState {
+  page: Array<ContextStatePageContent>
+}
+
+export interface ContextStatePageContent {
+  id: number
+  type: string
+  raw: string
+}
diff --git a/src/types/editor.ts b/src/types/editor.ts
index 41b195dac..a7fac099f 100644
--- a/src/types/editor.ts
+++ b/src/types/editor.ts
@@ -1,19 +1,18 @@
 export interface EditorState {
   styles: EditorStateStyles
-  contentRaw: EditorStateContentRaw
-  contentShow: EditorStateContentShow
 }
 
 export interface EditorStateStyles {
   input: EditorStateInput
+  show: EditorStateShow
 }
-
 export interface EditorStateInput {
   fontFamily: string
   fontSize: string
   fontColor: string
 }
 
-export interface EditorStateContentRaw {}
-
-export interface EditorStateContentShow {}
+export interface EditorStateShow {
+  fontFamily: string
+  fontColor: string
+}