OSIT-AE-App-Svelte/src/lib/components/shad-editor/editor-toolbar.svelte

<script lang="ts">
import { fade } from 'svelte/transition'
import { cubicOut } from 'svelte/easing';

import { type Editor } from '@tiptap/core';
import Undo from './icons/undo.svelte';
import Redo from './icons/redo.svelte';
// import { Separator } from '$lib/components/ui/separator/index.js';
import Bold from './icons/bold.svelte';
import Italic from './icons/italic.svelte';
import Underline from './icons/underline.svelte';
import Strikethrough from './icons/strikethrough.svelte';
import Link from './icons/link.svelte';
import Code from './icons/code.svelte';
import BlockQuote from './icons/block-quote.svelte';
import Subscript from './icons/subscript.svelte';
import BulletList from './icons/buttle-list.svelte'; // Typo in the icon name
import OrderedList from './icons/ordered-list.svelte';
import TaskList from './icons/task-list.svelte';
import Highlighter from './icons/highlighter.svelte';
import Superscript from './icons/superscript.svelte';
import Textcolor from './icons/textcolor.svelte';
import Align from './icons/textalign.svelte';
import Quickcolor from './icons/quickcolor.svelte';
import Table from './icons/table.svelte';
// import Image from './icons/image.svelte';
import Text from './icons/text.svelte';
import SearchReplace from './icons/search-replace.svelte';

interface Props {
    editor: Editor;
    show_button_kv?: any;
}

let { editor, show_button_kv }: Props = $props();

let show_button_kv_defaults: any = {
    undo: true,
    redo: true,

    text: false,

    bold: true,
    italic: true,
    underline: true,
    strikethrough: false,
    align: false,
    link: false,
    code: false,
    blockquote: false,
    subscript: false,
    superscript: false,
	bullet_list: true,
	ordered_list: true,
    task_list: false,
    image: false,
    table: false,
    text_color: false,
    highlighter: false,
    quick_color: false,
    search_replace: false,
};
console.log('show_button_kv', show_button_kv);
if (show_button_kv) {
	show_button_kv = {...show_button_kv_defaults, ...show_button_kv};
} else {
	show_button_kv = show_button_kv_defaults;
}
</script>

<div
    transition:fade={{delay: 250, duration: 750, easing: cubicOut}}
    class="
        flex flex-row flex-wrap gap-0.5
        w-full items-center justify-between
        overflow-auto border-b p-1
        transition-all duration-1000
        "
        >
    <span
        class:hidden={!show_button_kv.undo && !show_button_kv.redo}
        >
        {#if show_button_kv.undo}
            <Undo {editor} />
        {/if}
        {#if show_button_kv.redo}
            <Redo {editor} />
        {/if}
    </span>
    <!-- <Separator orientation="vertical" class="h-fit" /> -->
     <span
        class:hidden={!show_button_kv.text}
        >
        {#if show_button_kv.text}
            <Text {editor} />
        {/if}
    </span>
    <span
        class:hidden={!show_button_kv.bold && !show_button_kv.italic && !show_button_kv.underline && !show_button_kv.strikethrough}
        >
        {#if show_button_kv.bold}
            <Bold {editor} />
        {/if}
        {#if show_button_kv.italic}
            <Italic {editor} />
        {/if}
        {#if show_button_kv.underline}
            <Underline {editor} />
        {/if}
        {#if show_button_kv.strikethrough}
            <Strikethrough {editor} />
        {/if}
    </span>
    <span
        class:hidden={!show_button_kv.align && !show_button_kv.link && !show_button_kv.code && !show_button_kv.blockquote && !show_button_kv.subscript && !show_button_kv.superscript && !show_button_kv.bullet_list && !show_button_kv.ordered_list && !show_button_kv.task_list && !show_button_kv.image && !show_button_kv.table}
        >
        {#if show_button_kv.align}
            <Align {editor} />
        {/if}
        {#if show_button_kv.link}
            <Link {editor} />
        {/if}
        {#if show_button_kv.code}
            <Code {editor} />
        {/if}
        {#if show_button_kv.blockquote}
            <BlockQuote {editor} />
        {/if}
        {#if show_button_kv.subscript}
            <Subscript {editor} />
        {/if}
        {#if show_button_kv.superscript}
            <Superscript {editor} />
        {/if}
        {#if show_button_kv.bullet_list}
            <BulletList {editor} />
        {/if}
        {#if show_button_kv.ordered_list}
            <OrderedList {editor} />
        {/if}
        {#if show_button_kv.task_list}
            <TaskList {editor} />
        {/if}
        <!-- {#if show_button_kv.image}
            <Image {editor} />
        {/if} -->
        {#if show_button_kv.table}
            <Table {editor} />
        {/if}
    </span>
    <span
        class:hidden={!show_button_kv.text_color && !show_button_kv.highlighter && !show_button_kv.quick_color}
        >
        cxx
        {#if show_button_kv.text_color}
            <Textcolor {editor} />
        {/if}
        {#if show_button_kv.highlighter}
            <Highlighter {editor} />
        {/if}
        {#if show_button_kv.quick_color}
            <Quickcolor {editor} />
        {/if}
    </span>
    <span
        class:hidden={!show_button_kv.search_replace}
        >
        {#if show_button_kv.search_replace}
            <SearchReplace {editor} />
        {/if}
    </span>
</div>