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.
68 lines
1.9 KiB
68 lines
1.9 KiB
<script setup> |
|
import { reactive, ref } from 'vue'; |
|
const props = defineProps({ |
|
editor: { |
|
type: Object, |
|
required: true, |
|
} |
|
}); |
|
const editor = reactive(props.editor); |
|
|
|
const undo = () => { |
|
editor.chain().focus().undo().run() |
|
} |
|
|
|
const redo = () => { |
|
editor.chain().focus().redo().run() |
|
} |
|
|
|
// Public method to clear content |
|
const clearContent = () => { |
|
editor.commands.clearContent() |
|
} |
|
</script> |
|
|
|
<template> |
|
<!-- History Tab --> |
|
<div class="flex items-center space-x-2 flex-wrap"> |
|
<button |
|
@click="undo" |
|
class="p-1 rounded hover:bg-gray-100 flex items-center" |
|
title="Undo" |
|
:disabled="!editor.can().undo()" |
|
:class="{ 'opacity-50 cursor-not-allowed': !editor.can().undo() }" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<path d="M3 10h10a8 8 0 0 1 8 8v2M3 10l6 6M3 10l6-6"></path> |
|
</svg> |
|
<span class="ml-1 text-sm">Undo</span> |
|
</button> |
|
|
|
<button |
|
@click="redo" |
|
class="p-1 rounded hover:bg-gray-100 flex items-center" |
|
title="Redo" |
|
:disabled="!editor.can().redo()" |
|
:class="{ 'opacity-50 cursor-not-allowed': !editor.can().redo() }" |
|
> |
|
<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 10H11a8 8 0 0 0-8 8v2M21 10l-6 6M21 10l-6-6"></path> |
|
</svg> |
|
<span class="ml-1 text-sm">Redo</span> |
|
</button> |
|
|
|
<div class="border-r border-gray-300 h-6 mx-1"></div> |
|
|
|
<button |
|
@click="clearContent" |
|
class="p-1 rounded hover:bg-gray-100 flex items-center text-red-500" |
|
title="Clear Content" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<path d="M18 6L6 18"></path> |
|
<path d="M6 6l12 12"></path> |
|
</svg> |
|
<span class="ml-1 text-sm">Clear All</span> |
|
</button> |
|
</div> |
|
</template> |