Skip to content

Commit

Permalink
feat: editor definitions
Browse files Browse the repository at this point in the history
  • Loading branch information
Novout committed Sep 20, 2021
1 parent 99e6080 commit 503d720
Show file tree
Hide file tree
Showing 11 changed files with 211 additions and 22 deletions.
2 changes: 2 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
};
1 change: 1 addition & 0 deletions components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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"];
Expand Down
19 changes: 16 additions & 3 deletions src/components/editor/EditorBase.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
10 changes: 10 additions & 0 deletions src/components/editor/EditorHeader.vue
Original file line number Diff line number Diff line change
@@ -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>
44 changes: 39 additions & 5 deletions src/components/editor/TextInput.vue
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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'
Expand All @@ -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
Expand All @@ -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')
}
Expand Down
81 changes: 78 additions & 3 deletions src/components/editor/TextShow.vue
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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"
Expand All @@ -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>
16 changes: 14 additions & 2 deletions src/store/module/context.ts
Original file line number Diff line number Diff line change
@@ -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: {},
}
36 changes: 33 additions & 3 deletions src/store/module/editor.ts
Original file line number Diff line number Diff line change
@@ -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: {},
Expand Down
4 changes: 4 additions & 0 deletions src/tailwind.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
9 changes: 9 additions & 0 deletions src/types/context.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export interface ContextState {
page: Array<ContextStatePageContent>
}

export interface ContextStatePageContent {
id: number
type: string
raw: string
}
11 changes: 5 additions & 6 deletions src/types/editor.ts
Original file line number Diff line number Diff line change
@@ -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
}

0 comments on commit 503d720

Please sign in to comment.