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

Improving the rich text editor. It still has some issues. Undo and redo do not work consistently. Wrapping up for the day?

Browse Source
This commit is contained in:
Scott Idem
2024-11-04 17:30:58 -05:00
parent 63f5168015
commit 23b82291a0
1 changed files with 63 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/lib/element_tiptap_editor.svelte
View File

@@ -60,6 +60,8 @@ if (default_minimal) {
let element: HTMLDivElement; let element: HTMLDivElement;
let editor: any; let editor: any;
// More default options should be defined later.
// minimal, basic, full
let show_button_kv_defaults: any = { let show_button_kv_defaults: any = {
bold: true, bold: true,
italic: true, italic: true,
@@ -134,6 +136,7 @@ function getContent() {
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- class:py-1={show_menu} -->
<div <div
on:click={() => { on:click={() => {
if (default_minimal) { if (default_minimal) {
@@ -151,9 +154,7 @@ function getContent() {
show_menu = true; show_menu = true;
} }
}} }}
class="editor border border-gray-300 rounded p-1 bg-gray-200 transition-all duration-1000" class="editor textarea p-1 transition-all duration-1000"
class:font-mono={show_menu}
class:py-2={show_menu}
> >
<!-- && show_menu --> <!-- && show_menu -->
@@ -183,8 +184,9 @@ function getContent() {
on:click={() => editor.chain().toggleBold().run()} on:click={() => editor.chain().toggleBold().run()}
disabled={!editor.can().chain().focus().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="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md font-bold"
class:variant-ghost-secondary={editor.isActive("bold") ?? false} class:variant-ghost-success={editor.isActive("bold") ?? false}
class:hidden={!show_button_kv.bold} class:hidden={!show_button_kv.bold}
title="Bold"
> >
<span class="fas fa-bold mx-1"></span> <span class="fas fa-bold mx-1"></span>
<!-- Bold --> <!-- Bold -->
@@ -194,8 +196,9 @@ function getContent() {
on:click={() => editor.chain().focus().toggleItalic().run()} on:click={() => editor.chain().focus().toggleItalic().run()}
disabled={!editor.can().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="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md italic"
class:variant-ghost-secondary={editor.isActive("italic") ?? false} class:variant-ghost-success={editor.isActive("italic") ?? false}
class:hidden={!show_button_kv.italic} class:hidden={!show_button_kv.italic}
title="Italic"
> >
<span class="fas fa-italic mx-1"></span> <span class="fas fa-italic mx-1"></span>
<!-- Italic --> <!-- Italic -->
@@ -205,8 +208,9 @@ function getContent() {
on:click={() => editor.chain().focus().toggleStrike().run()} on:click={() => editor.chain().focus().toggleStrike().run()}
disabled={!editor.can().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="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md line-through"
class:variant-ghost-secondary={editor.isActive("strike") ?? false} class:variant-ghost-success={editor.isActive("strike") ?? false}
class:hidden={!show_button_kv.strike} class:hidden={!show_button_kv.strike}
title="Strike"
> >
<span class="fas fa-strikethrough mx-1"></span> <span class="fas fa-strikethrough mx-1"></span>
<!-- Strike --> <!-- Strike -->
@@ -220,32 +224,13 @@ function getContent() {
on:click={() => editor.chain().focus().toggleCode().run()} on:click={() => editor.chain().focus().toggleCode().run()}
disabled={!editor.can().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="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("code") ?? false} class:variant-ghost-success={editor.isActive("code") ?? false}
class:hidden={!show_button_kv.code} class:hidden={!show_button_kv.code}
title="Code <code>"
> >
<span class="fas fa-code mx-1"></span> <span class="fas fa-code mx-1"></span>
<!-- Code --> <!-- Code -->
</button> </button>
<button
type="button"
on:click={() => editor.chain().focus().unsetAllMarks().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:hidden={!show_button_kv.unsetAllMarks}
>
<!-- <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-secondary rounded-md"
class:hidden={!show_button_kv.clearNodes}
>
<!-- <span class="fas fa-broom mx-1"></span> -->
<span class="fas fa-remove-format mx-1"></span>
Clear nodes
</button>
</span> </span>
<span> <span>
@@ -253,7 +238,7 @@ function getContent() {
type="button" type="button"
on:click={() => editor.chain().focus().setParagraph().run()} on:click={() => editor.chain().focus().setParagraph().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md" class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("paragraph") ? "is-active" : ""} class:variant-ghost-success={editor.isActive("paragraph") ? "is-active" : ""}
class:hidden={!show_button_kv.paragraph} class:hidden={!show_button_kv.paragraph}
title="Paragraph" title="Paragraph"
> >
@@ -265,7 +250,7 @@ function getContent() {
type="button" type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} 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="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md text-xs"
class:variant-ghost-secondary={editor.isActive("heading", { level: 1 }) ? "is-active" : ""} class:variant-ghost-success={editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h1} class:hidden={!show_button_kv.heading__h1}
title="Heading 1 <h1>" title="Heading 1 <h1>"
> >
@@ -276,7 +261,7 @@ function getContent() {
type="button" type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} 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="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md text-xs"
class:variant-ghost-secondary={editor.isActive("heading", { level: 2 }) ? "is-active" : ""} class:variant-ghost-success={editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h2} class:hidden={!show_button_kv.heading__h2}
title="Heading 2 <h2>" title="Heading 2 <h2>"
> >
@@ -289,7 +274,7 @@ function getContent() {
type="button" type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} 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="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md text-xs"
class:variant-ghost-secondary={editor.isActive("heading", { level: 3 }) ? "is-active" : ""} class:variant-ghost-success={editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h3} class:hidden={!show_button_kv.heading__h3}
title="Heading 3 <h3>" title="Heading 3 <h3>"
> >
@@ -300,7 +285,7 @@ function getContent() {
type="button" type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 4 }).run()} on:click={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md" class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("heading", { level: 4 }) ? "is-active" : ""} class:variant-ghost-success={editor.isActive("heading", { level: 4 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h4} class:hidden={!show_button_kv.heading__h4}
title="Heading 4 <h4>" title="Heading 4 <h4>"
> >
@@ -310,7 +295,7 @@ function getContent() {
type="button" type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 5 }).run()} on:click={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md" class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("heading", { level: 5 }) ? "is-active" : ""} class:variant-ghost-success={editor.isActive("heading", { level: 5 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h5} class:hidden={!show_button_kv.heading__h5}
title="Heading 5 <h5>" title="Heading 5 <h5>"
> >
@@ -320,7 +305,7 @@ function getContent() {
type="button" type="button"
on:click={() => editor.chain().focus().toggleHeading({ level: 6 }).run()} on:click={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md" class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("heading", { level: 6 }) ? "is-active" : ""} class:variant-ghost-success={editor.isActive("heading", { level: 6 }) ? "is-active" : ""}
class:hidden={!show_button_kv.heading__h6} class:hidden={!show_button_kv.heading__h6}
title="Heading 6 <h6>" title="Heading 6 <h6>"
> >
@@ -334,7 +319,7 @@ function getContent() {
type="button" type="button"
on:click={() => editor.chain().focus().toggleBulletList().run()} on:click={() => editor.chain().focus().toggleBulletList().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md" class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("bulletList") ? "is-active" : ""} class:variant-ghost-success={editor.isActive("bulletList") ? "is-active" : ""}
class:hidden={!show_button_kv.bulletList} class:hidden={!show_button_kv.bulletList}
title="Bullet list" title="Bullet list"
> >
@@ -345,7 +330,7 @@ function getContent() {
type="button" type="button"
on:click={() => editor.chain().focus().toggleOrderedList().run()} on:click={() => editor.chain().focus().toggleOrderedList().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md" class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("orderedList") ? "is-active" : ""} class:variant-ghost-success={editor.isActive("orderedList") ? "is-active" : ""}
class:hidden={!show_button_kv.orderedList} class:hidden={!show_button_kv.orderedList}
title="Ordered list" title="Ordered list"
> >
@@ -356,7 +341,7 @@ function getContent() {
type="button" type="button"
on:click={() => editor.chain().focus().toggleCodeBlock().run()} on:click={() => editor.chain().focus().toggleCodeBlock().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md" class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("codeBlock") ? "is-active" : ""} class:variant-ghost-success={editor.isActive("codeBlock") ? "is-active" : ""}
class:hidden={!show_button_kv.codeBlock} class:hidden={!show_button_kv.codeBlock}
title="Code block" title="Code block"
> >
@@ -366,7 +351,7 @@ function getContent() {
type="button" type="button"
on:click={() => editor.chain().focus().toggleBlockquote().run()} on:click={() => editor.chain().focus().toggleBlockquote().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md" class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive("blockquote") ? "is-active" : ""} class:variant-ghost-success={editor.isActive("blockquote") ? "is-active" : ""}
class:hidden={!show_button_kv.blockquote} class:hidden={!show_button_kv.blockquote}
title="Blockquote" title="Blockquote"
> >
@@ -397,28 +382,53 @@ function getContent() {
<span <span
class="justify-self-end" 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 <button
type="button" type="button"
on:click={() => editor.chain().focus().undo().run()} on:click={() => editor.chain().focus().undo().run()}
disabled={!editor.can().chain().focus().undo().run()} disabled={!editor.can().chain().focus().undo().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md" class="btn btn-sm variant-glass-secondary hover:variant-filled-warning rounded-md"
class:hidden={!show_button_kv.undo} class:hidden={!show_button_kv.undo}
title="Undo" title="Undo"
> >
<span class="fas fa-undo mx-1"></span> <span class="fas fa-undo mx-1"></span>
<!-- Undo -->
</button> </button>
<button
<!-- Redo (not working???) -->
<!-- <button
type="button" type="button"
on:click={() => editor.chain().focus().redo().run()} on:click={() => editor.chain().focus().redo().run()}
disabled={!editor.can().chain().focus().redo().run()} disabled={!editor.can().chain().focus().redo().run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md" class="btn btn-sm variant-glass-secondary hover:variant-filled-warning rounded-md"
class:hidden={!show_button_kv.redo} class:hidden={!show_button_kv.redo}
title="Redo" title="Redo"
> >
<span class="fas fa-redo mx-1"></span> <span class="fas fa-redo mx-1"></span>
<!-- Redo --> </button> -->
</button>
</span> </span>
@@ -427,7 +437,7 @@ function getContent() {
type="button" type="button"
on:click={() => editor.chain().focus().setColor('#958DF1').run()} on:click={() => editor.chain().focus().setColor('#958DF1').run()}
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md" class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md"
class:variant-ghost-secondary={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''} class:variant-ghost-success={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
class:hidden={!show_button_kv.color__purple} class:hidden={!show_button_kv.color__purple}
> >
Purple Purple
@@ -439,9 +449,11 @@ function getContent() {
</div> </div>
{/if} <!-- show_menu --> {/if} <!-- show_menu -->
<!-- bg-slate-100 px-2 py-2 -->
<div <div
bind:this={element} bind:this={element}
class="tiptap bg-slate-100 px-2 py-2 relative" class="tiptap px-2 py-2 relative"
class:font-mono={show_menu}
> >
<span <span
class="placeholder text-sm text-gray-400 italic absolute" class="placeholder text-sm text-gray-400 italic absolute"
@@ -462,4 +474,9 @@ function getContent() {
// box-shadow: 0 0 0 2px hsla(208, 99%, 55%, .1); // box-shadow: 0 0 0 2px hsla(208, 99%, 55%, .1);
outline: none; outline: none;
} }
.textarea {
// border: none;
// box-shadow: 0 0 0 2px hsla(208, 99%, 55%, .1);
}
</style> </style>