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

More work on the new rich text editor. It may have a few bugs still.

Browse Source
This commit is contained in:
Scott Idem
2024-12-02 19:24:00 -05:00
parent 44907bc01f
commit c6631e221c
3 changed files with 26 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,7 +20,7 @@
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 Image from './icons/image.svelte';
import Text from './icons/text.svelte';
import SearchReplace from './icons/search-replace.svelte';
@@ -35,15 +35,15 @@ let { editor, show_button_kv }: Props = $props();
let show_button_kv_defaults: any = {
undo: true,
redo: false,
redo: true,
text: true,
bold: true,
italic: true,
underline: true,
strikethrough: true,
align: true,
strikethrough: false,
align: false,
link: true,
code: false,
blockquote: false,
@@ -57,7 +57,7 @@ let show_button_kv_defaults: any = {
text_color: true,
highlighter: true,
quick_color: true,
search_replace: true,
search_replace: false,
};
if (show_button_kv) {
show_button_kv = {...show_button_kv_defaults, ...show_button_kv};
@@ -116,9 +116,9 @@ if (show_button_kv) {
{#if show_button_kv.task_list}
<TaskList {editor} />
{/if}
{#if show_button_kv.image}
<!-- {#if show_button_kv.image}
<Image {editor} />
{/if}
{/if} -->
{#if show_button_kv.table}
<Table {editor} />
{/if}

20
src/lib/components/shad-editor/shad-editor.svelte
View File

@@ -44,6 +44,7 @@
showToolbar?: boolean;
// html_text?: string;
new_html?: string;
placeholder?: string;
}
let { class:
@@ -52,6 +53,7 @@
showToolbar = true,
// html_text = '',
new_html = $bindable(''),
placeholder = $bindable('Start typing...')
}: Props = $props();
let editor = $state<Editor>();
@@ -141,11 +143,12 @@
editor = transaction.editor;
console.log(editor.isActive('bold'));
content = editor.getHTML();
console.log(content);
if (content == '<p></p>') {
// console.log(content);
let html = editor.getHTML();
if (html == '<p></p>') {
new_html = '';
} else {
new_html = content ?? '';
new_html = html ?? '';
}
}
});
@@ -160,5 +163,14 @@
{#if editor && showToolbar}
<EditorToolbar {editor} />
{/if}
<div bind:this={element} spellcheck="false" class="h-full w-full flex-1 overflow-auto"></div>
<div
bind:this={element}
spellcheck="false"
class="tiptap h-full w-full overflow-auto relative">
<span
class="placeholder text-sm text-gray-400 italic absolute p-3"
contenteditable="false"
hidden={editor?.getHTML() !== '<p></p>'}
>{placeholder}</span>
</div>
</div>

302
src/lib/element_tiptap_editor.svelte
View File

@@ -286,7 +286,7 @@ let mouse_leave_wait: number = 2000;
// show_menu = true;
// }
}}
class="editor textarea p-1 transition-all duration-1000"
class="xxxeditor textarea p-1 transition-all duration-1000"
class:hidden={true}
>
@@ -308,304 +308,7 @@ let mouse_leave_wait: number = 2000;
items-center justify-between
"
>
<!-- <div class="button-group flex flex-row flex-wrap gap-4 items-center justify-between"> -->
<span>
<button
type="button"
on:click={() => editor.chain().toggleBold().run()}
disabled={!editor.can().chain().focus().toggleBold().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md font-bold"
class:variant-ghost-success={editor.isActive("bold") ?? false}
class:hidden={!show_button_kv.bold}
title="Bold"
>
<span class="fas fa-bold mx-1"></span>
<!-- Bold -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleItalic().run()}
disabled={!editor.can().chain().focus().toggleItalic().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md italic"
class:variant-ghost-success={editor.isActive("italic") ?? false}
class:hidden={!show_button_kv.italic}
title="Italic"
>
<span class="fas fa-italic mx-1"></span>
<!-- Italic -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleStrike().run()}
disabled={!editor.can().chain().focus().toggleStrike().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md line-through"
class:variant-ghost-success={editor.isActive("strike") ?? false}
class:hidden={!show_button_kv.strike}
title="Strike"
>
<span class="fas fa-strikethrough mx-1"></span>
<!-- Strike -->
</button>
</span>
<span>
<button
type="button"
on:click={() => editor.chain().focus().toggleCode().run()}
disabled={!editor.can().chain().focus().toggleCode().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-success={editor.isActive("code") ?? false}
class:hidden={!show_button_kv.code}
title="Code <code>"
>
<span class="fas fa-code mx-1"></span>
<!-- Code -->
</button>
</span>
<span>
<button
type="button"
on:click={() => editor.chain().focus().setParagraph().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-success={editor.isActive("paragraph") ? "is-active" : ""}
class:hidden={!show_button_kv.paragraph}
title="Paragraph"
>
<span class="fas fa-paragraph mx-1"></span>
<!-- Paragraph -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md text-xs"
class:variant-ghost-success={editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h1}
title="Heading 1 <h1>"
>
<span class="fas fa-heading mx-1"></span>1
<!-- H1 -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md text-xs"
class:variant-ghost-success={editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h2}
title="Heading 2 <h2>"
>
<span class="fas fa-heading mx-1"></span>2
<!-- <span class="text-xs">2</span> -->
<!-- 2 -->
<!-- H2 -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md text-xs"
class:variant-ghost-success={editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h3}
title="Heading 3 <h3>"
>
<span class="fas fa-heading mx-1"></span>3
<!-- H3 -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-success={editor.isActive("heading", { level: 4 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h4}
title="Heading 4 <h4>"
>
H4
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-success={editor.isActive("heading", { level: 5 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h5}
title="Heading 5 <h5>"
>
H5
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-success={editor.isActive("heading", { level: 6 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h6}
title="Heading 6 <h6>"
>
H6
</button>
</span>
<span>
<button
type="button"
on:click={() => editor.chain().focus().toggleBulletList().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-success={editor.isActive("bulletList") ? "is-active" : ""}
class:hidden={!show_button_kv.bulletList}
title="Bullet list"
>
<span class="fas fa-list-ul mx-1"></span>
<!-- Bullet -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleOrderedList().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-success={editor.isActive("orderedList") ? "is-active" : ""}
class:hidden={!show_button_kv.orderedList}
title="Ordered list"
>
<span class="fas fa-list-ol mx-1"></span>
<!-- Ordered -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleCodeBlock().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-success={editor.isActive("codeBlock") ? "is-active" : ""}
class:hidden={!show_button_kv.codeBlock}
title="Code block"
>
Code block
</button>
<button
type="button"
on:click={() => editor.chain().focus().toggleBlockquote().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-success={editor.isActive("blockquote") ? "is-active" : ""}
class:hidden={!show_button_kv.blockquote}
title="Blockquote"
>
Blockquote
</button>
<button
type="button"
on:click={() => editor.chain().focus().setHorizontalRule().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:hidden={!show_button_kv.horizontalRule}
title="Horizontal rule"
>
Horizontal rule
</button>
<button
type="button"
on:click={() => editor.chain().focus().setHardBreak().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:hidden={!show_button_kv.hardBreak}
title="Hard break"
>
<span class="fas fa-level-down-alt mx-1"></span>
<!-- Hard break -->
</button>
</span>
<span>
<!-- Links: -->
<button
type="button"
on:click={() => editor.chain().focus().toggleLink({ href: 'https://example.com' }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-success={editor.isActive('link') ? 'is-active' : ''}
class:hidden={!show_button_kv.link}
title="Link"
>
<span class="fas fa-link mx-1"></span>
<!-- Link -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().unsetLink().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-warning rounded-md"
class:hidden={!show_button_kv.unsetLink}
title="Unset link"
>
<span class="fas fa-unlink mx-1"></span>
<!-- Unset link -->
</button>
</span>
<span
class="justify-self-end"
>
<button
type="button"
on:click={() => editor.chain().focus().unsetAllMarks().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-warning rounded-md"
class:hidden={!show_button_kv.unsetAllMarks}
title="Clear marks"
>
<!-- <span class="fas fa-broom mx-1"></span> -->
<span class="fas fa-remove-format mx-1"></span>
<!-- Clear marks -->
</button>
<button
type="button"
on:click={() => editor.chain().focus().clearNodes().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-warning rounded-md"
class:hidden={!show_button_kv.clearNodes}
title="Clear nodes"
>
<!-- <span class="fas fa-broom mx-1"></span> -->
<span class="fas fa-remove-format mx-1"></span>
Clear nodes
</button>
<!-- Undo (only once???) -->
<!-- Seems to forget the history after the first undo? -->
<button
type="button"
on:click={() => editor.chain().focus().undo().run()}
disabled={!editor.can().chain().focus().undo().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-warning rounded-md"
class:hidden={!show_button_kv.undo}
title="Undo"
>
<span class="fas fa-undo mx-1"></span>
<span class="hidden">Undo</span>
</button>
<!-- Redo (not working???) -->
<!-- <button
type="button"
on:click={() => editor.chain().focus().redo().run()}
disabled={!editor.can().chain().focus().redo().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-warning rounded-md"
class:hidden={!show_button_kv.redo}
title="Redo"
>
<span class="fas fa-redo mx-1"></span>
</button> -->
</span>
<!-- <span>
<button
type="button"
on:click={() => editor.chain().focus().setColor('#958DF1').run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-success={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
class:hidden={!show_button_kv.color__purple}
>
Purple
</button>
</span> -->
<!-- </div> -->
<!-- Nothing Here Anymore -->
</div>
{/if} <!-- show_menu -->
@@ -630,6 +333,7 @@ let mouse_leave_wait: number = 2000;
class="editor textarea p-1 transition-all duration-1000"
bind:content={html_text}
bind:new_html={new_html}
placeholder={placeholder}
/>
</main>