Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Getting the new new new rich text editor working. I think it is working... Yay Shad Editor that uses TipTap and Shadcn.

Browse Source
This commit is contained in:
Scott Idem
2024-12-02 18:56:45 -05:00
parent 940a7e9a21
commit 44907bc01f
42 changed files with 2095 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/lib/components/shad-editor/editor-toolbar.svelte
View File

@@ -11,7 +11,7 @@
import Code from './icons/code.svelte';
import BlockQuote from './icons/block-quote.svelte';
import Subscript from './icons/subscript.svelte';
import ButtleList from './icons/buttle-list.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';
@@ -24,35 +24,114 @@
import Text from './icons/text.svelte';
import SearchReplace from './icons/search-replace.svelte';
interface Props {
editor: Editor;
}
interface Props {
editor: Editor;
show_button_kv: any;
}
let { editor }: Props = $props();
let { editor, show_button_kv }: Props = $props();
let show_button_kv_defaults: any = {
undo: true,
redo: false,
text: true,
bold: true,
italic: true,
underline: true,
strikethrough: true,
align: true,
link: true,
code: false,
blockquote: false,
subscript: false,
superscript: false,
bullet_list: true,
ordered_list: true,
task_list: false,
image: false,
table: false,
text_color: true,
highlighter: true,
quick_color: true,
search_replace: true,
};
if (show_button_kv) {
show_button_kv = {...show_button_kv_defaults, ...show_button_kv};
} else {
show_button_kv = show_button_kv_defaults;
}
</script>
<div class="flex w-full items-center overflow-auto border-b p-1 *:mx-1">
<Undo {editor} />
<Redo {editor} />
<!-- <Separator orientation="vertical" class="h-fit" /> -->
<Text {editor} />
<Bold {editor} />
<Italic {editor} />
<Underline {editor} />
<Strikethrough {editor} />
<Align {editor} />
<Link {editor} />
<Code {editor} />
<BlockQuote {editor} />
<Subscript {editor} />
<Superscript {editor} />
<ButtleList {editor} />
<OrderedList {editor} />
<TaskList {editor} />
<Image {editor} />
<Table {editor} />
<Textcolor {editor} />
<Highlighter {editor} />
<Quickcolor {editor} />
<SearchReplace {editor} />
{#if show_button_kv.undo}
<Undo {editor} />
{/if}
{#if show_button_kv.redo}
<Redo {editor} />
{/if}
<!-- <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}
</div>