TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-27 19:51: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())