mirror of https://github.com/halo-dev/halo
75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<script lang="ts" setup>
|
|
import { ToolbarItem } from "@/components";
|
|
import type { Component } from "vue";
|
|
import type { Editor } from "@/tiptap/vue-3";
|
|
import ColorPickerDropdown from "@/components/common/ColorPickerDropdown.vue";
|
|
import MdiFormatColorMarkerCancel from "~icons/mdi/format-color-marker-cancel";
|
|
import { i18n } from "@/locales";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
editor?: Editor;
|
|
isActive?: boolean;
|
|
disabled?: boolean;
|
|
title?: string;
|
|
action?: () => void;
|
|
icon?: Component;
|
|
}>(),
|
|
{
|
|
editor: undefined,
|
|
isActive: false,
|
|
disabled: false,
|
|
title: undefined,
|
|
action: undefined,
|
|
icon: undefined,
|
|
}
|
|
);
|
|
|
|
function handleSetColor(color?: string) {
|
|
props.editor
|
|
?.chain()
|
|
.focus()
|
|
.setHighlight(color ? { color } : undefined)
|
|
.run();
|
|
}
|
|
|
|
function handleUnsetColor() {
|
|
props.editor?.chain().focus().unsetHighlight().run();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ColorPickerDropdown @update:model-value="handleSetColor">
|
|
<ToolbarItem v-bind="props" @click="handleSetColor()" />
|
|
<template #prefix>
|
|
<div class="p-1">
|
|
<div
|
|
class="flex items-center gap-2 rounded cursor-pointer hover:bg-gray-100 p-1"
|
|
@click="handleUnsetColor"
|
|
>
|
|
<div class="inline-flex items-center gap-2">
|
|
<MdiFormatColorMarkerCancel />
|
|
<span class="text-xs text-gray-600">
|
|
{{ i18n.global.t("editor.extensions.highlight.unset") }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-1">
|
|
<div
|
|
class="flex items-center gap-2 rounded cursor-pointer hover:bg-gray-100 p-1"
|
|
@click="handleSetColor()"
|
|
>
|
|
<div
|
|
class="h-5 w-5 rounded-sm cursor-pointer hover:ring-1 ring-offset-1 ring-gray-300"
|
|
:style="{ 'background-color': '#fff8c5' }"
|
|
></div>
|
|
<span class="text-xs text-gray-600">
|
|
{{ i18n.global.t("editor.common.button.restore_default") }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</ColorPickerDropdown>
|
|
</template>
|