You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and dots ('.'), can be up to 35 characters long. Letters must be lowercase.
93 lines
3.3 KiB
93 lines
3.3 KiB
<script setup> |
|
import { reactive, ref } from 'vue'; |
|
const props = defineProps({ |
|
editor: { |
|
type: Object, |
|
required: true, |
|
} |
|
}); |
|
const editor = reactive(props.editor); |
|
</script> |
|
|
|
<template> |
|
<!-- Block Elements Tab --> |
|
<div class="flex items-center space-x-2 flex-wrap"> |
|
<button |
|
@click="editor.chain().focus().setParagraph().run()" |
|
class="px-2 py-1 text-sm rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('paragraph') }" |
|
title="Paragraph" |
|
> |
|
<span class="font-medium">¶</span> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()" |
|
class="px-2 py-1 text-sm rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 1 }) }" |
|
title="Heading 1" |
|
> |
|
<span class="font-medium">H1</span> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()" |
|
class="px-2 py-1 text-sm rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 2 }) }" |
|
title="Heading 2" |
|
> |
|
<span class="font-medium">H2</span> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()" |
|
class="px-2 py-1 text-sm rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 3 }) }" |
|
title="Heading 3" |
|
> |
|
<span class="font-medium">H3</span> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()" |
|
class="px-2 py-1 text-sm rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('heading', { level: 4 }) }" |
|
title="Heading 3" |
|
> |
|
<span class="font-medium">H4</span> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleBlockquote().run()" |
|
class="p-1 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('blockquote') }" |
|
title="Blockquote" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().setHorizontalRule().run()" |
|
class="p-1 rounded hover:bg-gray-100" |
|
title="Horizontal Rule" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<line x1="5" y1="12" x2="19" y2="12"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleCodeBlock().run()" |
|
class="p-1 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('codeBlock') }" |
|
title="Code Block" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<polyline points="16 18 22 12 16 6"></polyline> |
|
<polyline points="8 6 2 12 8 18"></polyline> |
|
</svg> |
|
</button> |
|
</div> |
|
</template> |