More work on the new rich text editor...
This commit is contained in:
Scott Idem
@@ -1,28 +1,31 @@
|
||||
<script lang="ts">
|
||||
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';
|
||||
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;
|
||||
@@ -35,14 +38,14 @@ let show_button_kv_defaults: any = {
|
||||
undo: true,
|
||||
redo: true,
|
||||
|
||||
text: true,
|
||||
text: false,
|
||||
|
||||
bold: true,
|
||||
italic: true,
|
||||
underline: true,
|
||||
strikethrough: false,
|
||||
align: false,
|
||||
link: true,
|
||||
link: false,
|
||||
code: false,
|
||||
blockquote: false,
|
||||
subscript: false,
|
||||
@@ -52,9 +55,9 @@ let show_button_kv_defaults: any = {
|
||||
task_list: false,
|
||||
image: false,
|
||||
table: false,
|
||||
text_color: true,
|
||||
highlighter: true,
|
||||
quick_color: true,
|
||||
text_color: false,
|
||||
highlighter: false,
|
||||
quick_color: false,
|
||||
search_replace: false,
|
||||
};
|
||||
console.log('show_button_kv', show_button_kv);
|
||||
@@ -65,72 +68,105 @@ if (show_button_kv) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex w-full items-center overflow-auto border-b p-1 *:mx-1">
|
||||
{#if show_button_kv.undo}
|
||||
<Undo {editor} />
|
||||
{/if}
|
||||
{#if show_button_kv.redo}
|
||||
<Redo {editor} />
|
||||
{/if}
|
||||
<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" /> -->
|
||||
{#if show_button_kv.text}
|
||||
<Text {editor} />
|
||||
{/if}
|
||||
{#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}
|
||||
{#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}
|
||||
{#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}
|
||||
{#if show_button_kv.search_replace}
|
||||
<SearchReplace {editor} />
|
||||
{/if}
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user