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...

Browse Source
This commit is contained in:
Scott Idem
2024-12-03 12:39:30 -05:00
parent 971ffbad02
commit 6d94583885
4 changed files with 309 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,7 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'
import { cubicOut } from 'svelte/easing';
import { type Editor } from '@tiptap/core'; import { type Editor } from '@tiptap/core';
import Undo from './icons/undo.svelte'; import Undo from './icons/undo.svelte';
import Redo from './icons/redo.svelte'; import Redo from './icons/redo.svelte';
@@ -35,14 +38,14 @@ let show_button_kv_defaults: any = {
undo: true, undo: true,
redo: true, redo: true,
text: true, text: false,
bold: true, bold: true,
italic: true, italic: true,
underline: true, underline: true,
strikethrough: false, strikethrough: false,
align: false, align: false,
link: true, link: false,
code: false, code: false,
blockquote: false, blockquote: false,
subscript: false, subscript: false,
@@ -52,9 +55,9 @@ let show_button_kv_defaults: any = {
task_list: false, task_list: false,
image: false, image: false,
table: false, table: false,
text_color: true, text_color: false,
highlighter: true, highlighter: false,
quick_color: true, quick_color: false,
search_replace: false, search_replace: false,
}; };
console.log('show_button_kv', show_button_kv); console.log('show_button_kv', show_button_kv);
@@ -65,17 +68,36 @@ if (show_button_kv) {
} }
</script> </script>
<div class="flex w-full items-center overflow-auto border-b p-1 *:mx-1"> <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} {#if show_button_kv.undo}
<Undo {editor} /> <Undo {editor} />
{/if} {/if}
{#if show_button_kv.redo} {#if show_button_kv.redo}
<Redo {editor} /> <Redo {editor} />
{/if} {/if}
</span>
<!-- <Separator orientation="vertical" class="h-fit" /> --> <!-- <Separator orientation="vertical" class="h-fit" /> -->
<span
class:hidden={!show_button_kv.text}
>
{#if show_button_kv.text} {#if show_button_kv.text}
<Text {editor} /> <Text {editor} />
{/if} {/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} {#if show_button_kv.bold}
<Bold {editor} /> <Bold {editor} />
{/if} {/if}
@@ -88,6 +110,10 @@ if (show_button_kv) {
{#if show_button_kv.strikethrough} {#if show_button_kv.strikethrough}
<Strikethrough {editor} /> <Strikethrough {editor} />
{/if} {/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} {#if show_button_kv.align}
<Align {editor} /> <Align {editor} />
{/if} {/if}
@@ -121,6 +147,11 @@ if (show_button_kv) {
{#if show_button_kv.table} {#if show_button_kv.table}
<Table {editor} /> <Table {editor} />
{/if} {/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} {#if show_button_kv.text_color}
<Textcolor {editor} /> <Textcolor {editor} />
{/if} {/if}
@@ -130,7 +161,12 @@ if (show_button_kv) {
{#if show_button_kv.quick_color} {#if show_button_kv.quick_color}
<Quickcolor {editor} /> <Quickcolor {editor} />
{/if} {/if}
</span>
<span
class:hidden={!show_button_kv.search_replace}
>
{#if show_button_kv.search_replace} {#if show_button_kv.search_replace}
<SearchReplace {editor} /> <SearchReplace {editor} />
{/if} {/if}
</span>
</div> </div>

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

@@ -41,19 +41,21 @@
interface Props { interface Props {
class?: string; class?: string;
content?: Content; content?: Content;
showToolbar?: boolean; show_toolbar?: boolean;
// html_text?: string; // html_text?: string;
new_html?: string; new_html?: string;
placeholder?: string; placeholder?: string;
show_button_kv?: any;
} }
let { class: let { class:
className = '', className = '',
content = $bindable(''), content = $bindable(''),
showToolbar = true, show_toolbar = true,
// html_text = '', // html_text = '',
new_html = $bindable(''), new_html = $bindable(''),
placeholder = $bindable('Start typing...') placeholder = $bindable('Start typing...'),
show_button_kv = $bindable({})
}: Props = $props(); }: Props = $props();
let editor = $state<Editor>(); let editor = $state<Editor>();
@@ -159,14 +161,16 @@
}); });
</script> </script>
<div class={cn('flex flex-col rounded border', className)}> <div
{#if editor && showToolbar} class={cn('flex flex-col rounded border textarea editor', className)}
<EditorToolbar {editor} /> >
{#if editor && show_toolbar}
<EditorToolbar {editor} {show_button_kv} />
{/if} {/if}
<div <div
bind:this={element} bind:this={element}
spellcheck="false" spellcheck="false"
class="tiptap h-full w-full overflow-auto relative"> class="tiptap overflow-auto relative">
<span <span
class="placeholder text-sm text-gray-400 italic absolute p-3" class="placeholder text-sm text-gray-400 italic absolute p-3"
contenteditable="false" contenteditable="false"

104
src/lib/element_tiptap_editor.svelte
View File

@@ -37,11 +37,11 @@ import './element_tiptap_editor.scss';
export let html_text: string = ''; export let html_text: string = '';
export let default_minimal: boolean = false; export let default_minimal: boolean = false;
export let show_menu: boolean = true; export let show_toolbar: boolean = true;
export let placeholder: string = 'Type your text here...'; export let placeholder: string = 'Type your text here...';
if (default_minimal) { if (default_minimal) {
show_menu = false; show_toolbar = false;
} }
// export let html_text: string = ` // export let html_text: string = `
@@ -79,43 +79,9 @@ let element: HTMLDivElement;
let editor: any; let editor: any;
// More default options should be defined later. // More default options should be defined later.
// minimal, basic, full // minimal, basic, full
let show_button_kv_defaults: any = {
bold: true,
italic: true,
strike: true,
code: true,
paragraph: false,
heading__h1: false,
heading__h2: false,
heading__h3: false,
heading__h4: false,
heading__h5: false,
heading__h6: false,
bulletList: false,
orderedList: false,
codeBlock: false,
blockquote: false,
horizontalRule: false,
hardBreak: true,
link: false,
unsetLink: true,
unsetAllMarks: true,
undo: true,
redo: false,
};
export let show_button_kv: any; export let show_button_kv: any;
if (show_button_kv) {
show_button_kv = { ...show_button_kv_defaults, ...show_button_kv };
} else {
show_button_kv = show_button_kv_defaults;
}
// export let new_json = editor?.getJSON(); // export let new_json = editor?.getJSON();
export let new_html: string = ''; export let new_html: string = '';
@@ -133,13 +99,10 @@ let mouse_leave_wait: number = 2000;
<!-- 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} -->
{#if 1==3}
<div <div
on:click={() => { on:click={() => {
if (default_minimal) { if (default_minimal) {
editor.chain().focus().setParagraph().run(); show_toolbar = true;
show_menu = true;
} }
}} }}
on:mouseleave={() => { on:mouseleave={() => {
@@ -147,77 +110,30 @@ let mouse_leave_wait: number = 2000;
mouse_entered_timer = setTimeout(() => { mouse_entered_timer = setTimeout(() => {
if (default_minimal) { if (default_minimal) {
show_menu = false; show_toolbar = false;
} }
}, mouse_leave_wait); }, mouse_leave_wait);
// if (default_minimal) {
// show_menu = false;
// }
}} }}
on:mouseenter={() => { on:mouseenter={() => {
clearTimeout(mouse_entered_timer); clearTimeout(mouse_entered_timer);
mouse_entered_timer = setTimeout(() => { mouse_entered_timer = setTimeout(() => {
if (default_minimal) { if (default_minimal) {
show_menu = true; show_toolbar = true;
} }
}, mouse_enter_wait); }, mouse_enter_wait);
// if (default_minimal) {
// show_menu = true;
// }
}} }}
class="xxxeditor textarea p-1 transition-all duration-1000" class=""
class:hidden={true}
> >
<!-- && show_menu -->
<!-- class:h-0={!show_menu} -->
<!-- class:h-auto={show_menu} -->
<!-- class:opacity-0={!show_menu} -->
<!-- class:opacity-100={show_menu} -->
{#if editor && show_menu}
<div
transition:fade={{delay: 250, duration: 750, easing: cubicOut}}
class="
control-group button-group
bg-gray-200
border-b border-gray-400
p-1
transition-all duration-1000
flex flex-row flex-wrap gap-4
items-center justify-between
"
>
<!-- Nothing Here Anymore -->
</div>
{/if} <!-- show_menu -->
<!-- bg-slate-100 px-2 py-2 -->
<div
bind:this={element}
class="tiptap px-2 py-2 relative"
class:font-mono={show_menu}
>
<span
class="placeholder text-sm text-gray-400 italic absolute"
contenteditable="false"
hidden={editor?.getHTML() !== '<p></p>'}
>{placeholder}</span>
</div>
</div>
{/if}
<main class="my-10 flex w-full flex-col items-center justify-center">
<ShadEditor <ShadEditor
class="editor textarea p-1 transition-all duration-1000" class="p-1 transition-all duration-1000"
bind:content={html_text} bind:content={html_text}
bind:new_html={new_html} bind:new_html={new_html}
placeholder={placeholder} placeholder={placeholder}
show_toolbar={show_toolbar}
show_button_kv={show_button_kv}
/> />
</main> </div>
<style lang="scss"> <style lang="scss">
// :global(.ProseMirror) { // :global(.ProseMirror) {

26
src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
View File

@@ -360,15 +360,11 @@ function send_staff_notification_email() {
default_minimal={true} default_minimal={true}
bind:html_text={$idaa_slct.post_obj.content} bind:html_text={$idaa_slct.post_obj.content}
show_button_kv={{ show_button_kv={{
'heading__h1': true, text: true,
'heading__h2': false, bullet_list: true,
'heading__h3': false, ordered_list: true,
paragraph: false,
bulletList: true,
orderedList: true,
hardBreak: true,
link: true, link: true,
unsetLink: true unset_link: true
}} }}
bind:new_html={$idaa_slct.post_obj.content_new_html} bind:new_html={$idaa_slct.post_obj.content_new_html}
placeholder="Your post content here..." placeholder="Your post content here..."
@@ -378,15 +374,11 @@ function send_staff_notification_email() {
default_minimal={true} default_minimal={true}
bind:html_text={$idaa_slct.post_obj.content} bind:html_text={$idaa_slct.post_obj.content}
show_button_kv={{ show_button_kv={{
'heading__h1': false, // text: true,
'heading__h2': false, // bullet_list: true,
'heading__h3': false, // ordered_list: true,
paragraph: false, // link: true,
bulletList: false, // unset_link: true
orderedList: false,
hardBreak: false,
link: false,
unsetLink: false
}} }}
bind:new_html={$idaa_slct.post_obj.content_new_html} bind:new_html={$idaa_slct.post_obj.content_new_html}
placeholder="Your post content here..." placeholder="Your post content here..."