feat: editor definitions

Novout · Sep 20, 2021 · 503d720 · 503d720
1 parent 99e6080
commit 503d720
Show file tree

Hide file tree

Showing 11 changed files with 211 additions and 22 deletions.
diff --git 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
@@ -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
@@ -16,25 +16,38 @@
         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>
 </template>
 
 <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
+}