TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-27 11:41:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add extension-text-align

Browse Source
This commit is contained in:
radhika587
2022-02-02 16:30:19 +05:30
parent 577c015d14
commit 75a0ed1ffc
4 changed files with 100 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
resources/scripts/components/base/base-editor/BaseEditor.vue
View File

@ -504,6 +504,72 @@
>
<redo-icon class="h-3 cursor-pointer fill-current" />
</span>
<span
class="
flex
items-center
justify-center
w-6
h-6
rounded-sm
cursor-pointer
hover:bg-gray-100
"
:class="{ 'bg-gray-200': editor.isActive({ textAlign: 'left' }) }"
@click="editor.chain().focus().setTextAlign('left').run()"
>
<menu-alt2-icon class="h-5 cursor-pointer fill-current" />
</span>
<span
class="
flex
items-center
justify-center
w-6
h-6
rounded-sm
cursor-pointer
hover:bg-gray-100
"
:class="{ 'bg-gray-200': editor.isActive({ textAlign: 'right' }) }"
@click="editor.chain().focus().setTextAlign('right').run()"
>
<menu-alt3-icon class="h-5 cursor-pointer fill-current" />
</span>
<span
class="
flex
items-center
justify-center
w-6
h-6
rounded-sm
cursor-pointer
hover:bg-gray-100
"
:class="{
'bg-gray-200': editor.isActive({ textAlign: 'justify' }),
}"
@click="editor.chain().focus().setTextAlign('justify').run()"
>
<menu-icon class="h-5 cursor-pointer fill-current" />
</span>
<span
class="
flex
items-center
justify-center
w-6
h-6
rounded-sm
cursor-pointer
hover:bg-gray-100
"
:class="{ 'bg-gray-200': editor.isActive({ textAlign: 'center' }) }"
@click="editor.chain().focus().setTextAlign('center').run()"
>
<menu-center-icon class="h-5 cursor-pointer fill-current" />
</span>
</div>
</div>
<editor-content
@ -526,7 +592,13 @@
import { onUnmounted, watch } from 'vue'
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import { DotsVerticalIcon } from '@heroicons/vue/outline'
import {
DotsVerticalIcon,
MenuAlt2Icon,
MenuAlt3Icon,
MenuIcon,
} from '@heroicons/vue/outline'
import TextAlign from '@tiptap/extension-text-align'
import {
BoldIcon,
@ -540,6 +612,7 @@ import {
UndoIcon,
RedoIcon,
CodeBlockIcon,
MenuCenterIcon,
} from './icons/index.js'
export default {
@ -557,6 +630,10 @@ export default {
RedoIcon,
CodeBlockIcon,
DotsVerticalIcon,
MenuCenterIcon,
MenuAlt2Icon,
MenuAlt3Icon,
MenuIcon,
},
props: {
@ -573,7 +650,13 @@ export default {
setup(props, { emit }) {
const editor = useEditor({
content: props.modelValue,
extensions: [StarterKit],
extensions: [
StarterKit,
TextAlign.configure({
types: ['heading', 'paragraph'],
alignments: ['left', 'right', 'center', 'justify'],
}),
],
onUpdate: () => {
emit('update:modelValue', editor.value.getHTML())

11
resources/scripts/components/base/base-editor/icons/MenuCenterIcon.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<svg viewBox="0 0 24 24">
<path
fill="currentColor"
fill-rule="evenodd"
d="M3.75 5.25h16.5a.75.75 0 1 1 0 1.5H3.75a.75.75 0 0 1 0-1.5zm4 4h8.5a.75.75 0 1 1 0 1.5h-8.5a.75.75 0 1 1 0-1.5zm-4 4h16.5a.75.75 0 1 1 0 1.5H3.75a.75.75 0 1 1 0-1.5zm4 4h8.5a.75.75 0 1 1 0 1.5h-8.5a.75.75 0 1 1 0-1.5z"
></path>
</svg>
</template>

4
resources/scripts/components/base/base-editor/icons/index.js
View File

@ -10,6 +10,7 @@ import StrikethroughIcon from './StrikethroughIcon.vue'
import UndoIcon from './UndoIcon.vue'
import RedoIcon from './RedoIcon.vue'
import CodeBlockIcon from './CodeBlockIcon.vue'
import MenuCenterIcon from './MenuCenterIcon.vue'
export {
UnderlineIcon,
@ -23,5 +24,6 @@ export {
StrikethroughIcon,
UndoIcon,
RedoIcon,
CodeBlockIcon
CodeBlockIcon,
MenuCenterIcon
}