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.
62 lines
2.0 KiB
62 lines
2.0 KiB
<script setup> |
|
import { reactive, ref } from 'vue'; |
|
const props = defineProps({ |
|
editor: { |
|
type: Object, |
|
required: true, |
|
} |
|
}); |
|
const editor = reactive(props.editor); |
|
</script> |
|
|
|
<template> |
|
<!-- Lists Tab --> |
|
<div class="flex items-center space-x-2 flex-wrap"> |
|
<button |
|
@click="editor.chain().focus().toggleBulletList().run()" |
|
class="p-1 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('bulletList') }" |
|
title="Bullet List" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<line x1="8" y1="6" x2="21" y2="6"></line> |
|
<line x1="8" y1="12" x2="21" y2="12"></line> |
|
<line x1="8" y1="18" x2="21" y2="18"></line> |
|
<line x1="3" y1="6" x2="3.01" y2="6"></line> |
|
<line x1="3" y1="12" x2="3.01" y2="12"></line> |
|
<line x1="3" y1="18" x2="3.01" y2="18"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleOrderedList().run()" |
|
class="p-1 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('orderedList') }" |
|
title="Numbered List" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<line x1="10" y1="6" x2="21" y2="6"></line> |
|
<line x1="10" y1="12" x2="21" y2="12"></line> |
|
<line x1="10" y1="18" x2="21" y2="18"></line> |
|
<path d="M4 6h1v4"></path> |
|
<path d="M4 10h2"></path> |
|
<path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"></path> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleTaskList().run()" |
|
class="p-1 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('taskList') }" |
|
title="Task List" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<rect x="3" y="5" width="6" height="6" rx="1"></rect> |
|
<path d="M3 17h6"></path> |
|
<path d="M13 5h8"></path> |
|
<path d="M13 11h8"></path> |
|
<path d="M13 17h8"></path> |
|
</svg> |
|
</button> |
|
</div> |
|
</template> |