flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/bluesky-website-generator.
bluesky-website-generator.vercel.app
1.8 kB
75 lines
1<script lang="ts">
2 import { onDestroy, onMount } from 'svelte';
3 import { Editor } from '@tiptap/core';
4 import StarterKit from '@tiptap/starter-kit';
5 import Image from '@tiptap/extension-image';
6 import Placeholder from '@tiptap/extension-placeholder';
7 import Link from '@tiptap/extension-link'
8 import { Prose } from '@fuxui/base';
9 import { editingState } from '../routes/state.svelte';
10
11 let element: HTMLElement | undefined = $state();
12 let editor: Editor | null = $state(null);
13
14 onMount(() => {
15 if (!element || editor) return;
16
17 if(!editingState.aboutContent) {
18 editingState.aboutContent = JSON.parse(localStorage.getItem('aboutContent') ?? '{}');
19 }
20
21 editor = new Editor({
22 element: element,
23 extensions: [
24 StarterKit.configure({
25 history: false
26 }),
27 Image.configure(),
28 Link.configure({
29 openOnClick: false
30 }),
31 Placeholder.configure({
32 placeholder: 'Write something about yourself...'
33 })
34 ],
35 onTransaction: () => {
36 editor = editor;
37 editingState.aboutContent = editor?.getJSON() ?? { type: "doc", content: [] };
38
39 // save to local storage
40 localStorage.setItem('aboutContent', JSON.stringify(editingState.aboutContent));
41 },
42
43 content: editingState.aboutContent,
44
45 editorProps: {
46 attributes: {
47 class: 'outline-none'
48 }
49 }
50 });
51 });
52
53 onDestroy(() => {
54 if (editor) {
55 editor.destroy();
56 }
57 });
58</script>
59
60<Prose>
61 <div bind:this={element}></div>
62</Prose>
63
64<style>
65 :global(.tiptap p.is-editor-empty:first-child::before) {
66 color: var(--color-base-100);
67 content: attr(data-placeholder);
68 float: left;
69 height: 0;
70 pointer-events: none;
71 }
72 :global(.dark .tiptap p.is-editor-empty:first-child::before) {
73 color: var(--color-base-200);
74 }
75</style>