149 lines
4.5 KiB
Svelte
149 lines
4.5 KiB
Svelte
<script lang="ts">
|
||
import { onMount, onDestroy } from 'svelte';
|
||
import { fade } from 'svelte/transition'
|
||
import { cubicOut } from 'svelte/easing';
|
||
|
||
import ShadEditor from '$lib/components/shad-editor/shad-editor.svelte';
|
||
|
||
|
||
// Import Tiptap related modules
|
||
// import { Editor } from "@tiptap/core";
|
||
// import StarterKit from "@tiptap/starter-kit";
|
||
// import Bold from '@tiptap/extension-bold';
|
||
// import BulletList from '@tiptap/extension-bullet-list';
|
||
// import CodeBlock from '@tiptap/extension-code-block';
|
||
// import Code from '@tiptap/extension-code';
|
||
// import Color from '@tiptap/extension-color';
|
||
// import Document from '@tiptap/extension-document';
|
||
// import Heading from '@tiptap/extension-heading';
|
||
// import Highlight from '@tiptap/extension-highlight';
|
||
// import History from '@tiptap/extension-history';
|
||
// import Italic from '@tiptap/extension-italic';
|
||
// import Link from '@tiptap/extension-link';
|
||
// import ListItem from '@tiptap/extension-list-item';
|
||
// import OrderedList from '@tiptap/extension-ordered-list';
|
||
// import Paragraph from '@tiptap/extension-paragraph';
|
||
// import Strike from '@tiptap/extension-strike';
|
||
// import Text from '@tiptap/extension-text';
|
||
// import TextStyle from '@tiptap/extension-text-style';
|
||
// import Typography from '@tiptap/extension-typography';
|
||
// import Underline from '@tiptap/extension-underline';
|
||
|
||
import './element_tiptap_editor.scss';
|
||
|
||
// https://tiptap.dev/docs/examples/basics/default-text-editor
|
||
// https://tiptap.dev/docs/examples/basics/formatting
|
||
// <code class="language-css">
|
||
|
||
export let html_text: string = '';
|
||
export let default_minimal: boolean = false;
|
||
export let show_toolbar: boolean = true;
|
||
export let placeholder: string = 'Type your text here...';
|
||
|
||
if (default_minimal) {
|
||
show_toolbar = false;
|
||
}
|
||
|
||
// export let html_text: string = `
|
||
// <h2>
|
||
// Hi there,
|
||
// </h2>
|
||
// <p>
|
||
// this is a <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
|
||
// </p>
|
||
// <ul>
|
||
// <li>
|
||
// That’s a bullet list with one …
|
||
// </li>
|
||
// <li>
|
||
// … or two list items.
|
||
// </li>
|
||
// </ul>
|
||
// <p>
|
||
// Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
|
||
// </p>
|
||
// <pre><code class="language-css">body {
|
||
// display: none;
|
||
// }</code></pre>
|
||
// <p>
|
||
// I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
|
||
// </p>
|
||
// <blockquote>
|
||
// Wow, that’s amazing. Good work, boy! 👏
|
||
// <br />
|
||
// — Mom
|
||
// </blockquote>
|
||
// `;
|
||
|
||
let element: HTMLDivElement;
|
||
let editor: any;
|
||
// More default options should be defined later.
|
||
// minimal, basic, full
|
||
|
||
export let show_button_kv: any;
|
||
|
||
// export let new_json = editor?.getJSON();
|
||
export let new_html: string = '';
|
||
|
||
onMount(() => {
|
||
});
|
||
|
||
onDestroy(() => {
|
||
});
|
||
|
||
let mouse_entered_timer: any;
|
||
let mouse_enter_wait: number = 500;
|
||
let mouse_leave_wait: number = 2000;
|
||
</script>
|
||
|
||
|
||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||
<div
|
||
on:click={() => {
|
||
if (default_minimal) {
|
||
show_toolbar = true;
|
||
}
|
||
}}
|
||
on:mouseleave={() => {
|
||
clearTimeout(mouse_entered_timer);
|
||
|
||
mouse_entered_timer = setTimeout(() => {
|
||
if (default_minimal) {
|
||
show_toolbar = false;
|
||
}
|
||
}, mouse_leave_wait);
|
||
}}
|
||
on:mouseenter={() => {
|
||
clearTimeout(mouse_entered_timer);
|
||
|
||
mouse_entered_timer = setTimeout(() => {
|
||
if (default_minimal) {
|
||
show_toolbar = true;
|
||
}
|
||
}, mouse_enter_wait);
|
||
}}
|
||
class=""
|
||
>
|
||
<ShadEditor
|
||
class="p-1 transition-all duration-1000"
|
||
bind:content={html_text}
|
||
bind:new_html={new_html}
|
||
placeholder={placeholder}
|
||
show_toolbar={show_toolbar}
|
||
show_button_kv={show_button_kv}
|
||
/>
|
||
</div>
|
||
|
||
<style lang="scss">
|
||
// :global(.ProseMirror) {
|
||
// padding: .25em;
|
||
// }
|
||
:global(.ProseMirror-focused) {
|
||
// padding: .25em;
|
||
// box-shadow: 0 0 0 2px hsla(208, 99%, 55%, .1);
|
||
outline: none;
|
||
}
|
||
|
||
</style>
|