DaisyUI components

button.vue

<script setup lang="ts">
import {ref, useSlots} from "vue";

let button = ref<HTMLElement|null>(null);
let icon = ref<HTMLElement|null>(null)
let slots = useSlots();

let props = defineProps({
    loading: { type: Boolean, default: false }
})

let click = () => {
    if (!props.loading) {
        return;
    }

    button?.value?.classList.add("loading");
    if (slots.icon !== undefined) {
        icon?.value?.classList.add("hidden");
    }
}
</script>
<template>
    <button class="btn gap-2"
            @click="click"
            ref="button">
        <div ref="icon" v-if="$slots.icon">
            <slot name="icon"/>
        </div>
        <slot/>
    </button>
</template>

editor-button.vue

<script setup lang="ts">
const props = defineProps({
    active: {type: Boolean, default: false},
    disabled: {type: Boolean, default: false}
})
</script>
<template>
    <button :disabled="disabled" class="btn btn-sm" :class="{ 'btn-active': active, 'btn-disabled': disabled }">
        <slot/>
    </button>
</template>

editor.vue

<script setup lang="ts">
import {Editor, EditorContent, useEditor} from "@tiptap/vue-3";
import EditorButton from "./editor-button.vue"
import {StarterKit} from "@tiptap/starter-kit";
import {watch, computed, ComputedRef} from "vue";

const props = defineProps({
    modelValue: {
        type: String,
        default: null
    }
})
const emit = defineEmits(["update:modelValue"])
const editor = useEditor({
    content: props.modelValue,
    extensions: [StarterKit],
    onUpdate: () => {
        emit('update:modelValue', editor.value?.getHTML())
    }
})

watch(() => props.modelValue, (value) => {
    const isSame = editor.value?.getHTML() === value;
    if (isSame) {
        return
    }

    editor.value?.commands.setContent(value, false);
})
</script>
<template>
    <div class="space-y-2">
        <div class="space-x-1 flex items-center overflow-x-auto">
            <EditorButton @click="editor?.chain().focus().toggleBold().run()"
                          :disabled="!editor?.can().chain().toggleBold().run()"
                          :active="editor?.isActive('bold')">
                <svg class="icon w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                    <g>
                        <path fill="none" d="M0 0h24v24H0z"></path>
                        <path
                            d="M8 11h4.5a2.5 2.5 0 1 0 0-5H8v5zm10 4.5a4.5 4.5 0 0 1-4.5 4.5H6V4h6.5a4.5 4.5 0 0 1 3.256 7.606A4.498 4.498 0 0 1 18 15.5zM8 13v5h5.5a2.5 2.5 0 1 0 0-5H8z"></path>
                    </g>
                </svg>
            </EditorButton>
            <EditorButton @click="editor?.chain().focus().toggleItalic().run()"
                          :disabled="!editor?.can().chain().toggleItalic().run()"
                          :active="editor?.isActive('italic')">
                <svg class="icon w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                    <g>
                        <path fill="none" d="M0 0h24v24H0z"></path>
                        <path d="M15 20H7v-2h2.927l2.116-12H9V4h8v2h-2.927l-2.116 12H15z"></path>
                    </g>
                </svg>
            </EditorButton>
            <EditorButton @click="editor?.chain().focus().toggleStrike().run()"
                          :disabled="!editor?.can().chain().toggleStrike().run()"
                          :active="editor?.isActive('strike')">
                <svg class="icon w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                    <g>
                        <path fill="none" d="M0 0h24v24H0z"></path>
                        <path
                            d="M17.154 14c.23.516.346 1.09.346 1.72 0 1.342-.524 2.392-1.571 3.147C14.88 19.622 13.433 20 11.586 20c-1.64 0-3.263-.381-4.87-1.144V16.6c1.52.877 3.075 1.316 4.666 1.316 2.551 0 3.83-.732 3.839-2.197a2.21 2.21 0 0 0-.648-1.603l-.12-.117H3v-2h18v2h-3.846zm-4.078-3H7.629a4.086 4.086 0 0 1-.481-.522C6.716 9.92 6.5 9.246 6.5 8.452c0-1.236.466-2.287 1.397-3.153C8.83 4.433 10.271 4 12.222 4c1.471 0 2.879.328 4.222.984v2.152c-1.2-.687-2.515-1.03-3.946-1.03-2.48 0-3.719.782-3.719 2.346 0 .42.218.786.654 1.099.436.313.974.562 1.613.75.62.18 1.297.414 2.03.699z"></path>
                    </g>
                </svg>
            </EditorButton>
            <EditorButton @click="editor?.chain().focus().setParagraph().run()"
                          :disabled="!editor?.can().chain().setParagraph().run()"
                          :active="editor?.isActive('paragraph')">
                <svg class="icon w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                    <g>
                        <path fill="none" d="M0 0h24v24H0z"></path>
                        <path d="M12 6v15h-2v-5a6 6 0 1 1 0-12h10v2h-3v15h-2V6h-3zm-2 0a4 4 0 1 0 0 8V6z"></path>
                    </g>
                </svg>
            </EditorButton>
            <EditorButton @click="editor?.chain().focus().toggleHeading({ level: 1 }).run()">H1</EditorButton>
            <EditorButton @click="editor?.chain().focus().toggleHeading({ level: 2 }).run()">H2</EditorButton>
            <EditorButton @click="editor?.chain().focus().toggleHeading({ level: 3 }).run()">H3</EditorButton>
            <EditorButton @click="editor?.chain().focus().toggleHeading({ level: 4 }).run()">H4</EditorButton>
            <EditorButton @click="editor?.chain().focus().toggleHeading({ level: 5 }).run()">H5</EditorButton>
            <EditorButton @click="editor?.chain().focus().toggleHeading({ level: 6 }).run()">H6</EditorButton>
            <EditorButton @click="editor?.chain().focus().toggleBulletList().run()"
                          :disabled="!editor?.can().chain().toggleBulletList().run()"
                          :active="editor?.isActive('bulletList')">
                <svg class="icon w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                    <g>
                        <path fill="none" d="M0 0h24v24H0z"></path>
                        <path
                            d="M8 4h13v2H8V4zM4.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 6.9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM8 11h13v2H8v-2zm0 7h13v2H8v-2z"></path>
                    </g>
                </svg>
            </EditorButton>
            <EditorButton @click="editor?.chain().focus().toggleOrderedList().run()"
                          :disabled="!editor?.can().chain().toggleOrderedList().run()"
                          :active="editor?.isActive('orderedList')">
                <svg class="icon w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                    <g>
                        <path fill="none" d="M0 0h24v24H0z"></path>
                        <path
                            d="M8 4h13v2H8V4zM5 3v3h1v1H3V6h1V4H3V3h2zM3 14v-2.5h2V11H3v-1h3v2.5H4v.5h2v1H3zm2 5.5H3v-1h2V18H3v-1h3v4H3v-1h2v-.5zM8 11h13v2H8v-2zm0 7h13v2H8v-2z"></path>
                    </g>
                </svg>
            </EditorButton>
            <EditorButton @click="editor?.chain().focus().toggleCodeBlock().run()"
                          :disabled="!editor?.can().chain().toggleCodeBlock().run()"
                          :active="editor?.isActive('codeBlock')">
                <svg class="icon w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                    <g>
                        <path fill="none" d="M0 0h24v24H0z"></path>
                        <path
                            d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm1 2v14h16V5H4zm8 10h6v2h-6v-2zm-3.333-3L5.838 9.172l1.415-1.415L11.495 12l-4.242 4.243-1.415-1.415L8.667 12z"></path>
                    </g>
                </svg>
            </EditorButton>
            <EditorButton @click="editor?.chain().focus().toggleBlockquote().run()"
                          :disabled="!editor?.can().chain().toggleBlockquote().run()"
                          :active="editor?.isActive('blockQuote')">
                <svg class="icon w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                    <g>
                        <path fill="none" d="M0 0h24v24H0z"></path>
                        <path
                            d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"></path>
                    </g>
                </svg>
            </EditorButton>
            <EditorButton @click="editor?.chain().focus().undo().run()"
                          :disabled="!editor?.can().chain().undo().run()">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="w-4 h-4">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M9.25 4.75L4.75 9L9.25 13.25"></path>
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M5.5 9H15.25C17.4591 9 19.25 10.7909 19.25 13V19.25"></path>
                </svg>
            </EditorButton>
            <EditorButton @click="editor?.chain().focus().redo().run()"
                          :disabled="!editor?.can().chain().redo().run()">
                <svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="w-4 h-4">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M14.75 4.75L19.25 9L14.75 13.25"></path>
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M19.25 9H8.75C6.54086 9 4.75 10.7909 4.75 13V19.25"></path>
                </svg>
            </EditorButton>
        </div>
        <div class="prose prose-sm max-w-none">
            <div class="textarea textarea-bordered">
                <editor-content :editor="editor"/>
            </div>
        </div>
    </div>
</template>
<style type="text/css">
.ProseMirror:focus {
    outline: 0 solid transparent;
}
</style>

modal.vue

<script setup lang="ts">
import { ref } from "vue";

defineProps({
    id: { type: String, required: true },
    noTransition: { type: Boolean, default: false },
    noBackdrop: { type: Boolean, default: false },
})

defineEmits(['closed'])

let modalToggle = ref<HTMLElement|null>(null)
let close = () => {
    modalToggle.value?.click();
}
</script>
<template>
    <div>
        <input type="checkbox" :id="id" class="modal-toggle" ref="modalToggle" />
        <div class="modal" :class="{ 'no-backdrop': noBackdrop, 'no-transition': noTransition }">
            <div class="modal-box">
                <slot />
                <div class="modal-action">
                    <slot name="footer" :close="close">
                        <label :for="id" class="btn" @click="$emit('closed')">Close</label>
                    </slot>
                </div>
            </div>
        </div>
    </div>
</template>

package.json

{
  "@tiptap/starter-kit": "^2.0.0-beta.200",
  "@tiptap/vue-3": "^2.0.0-beta.200"
}