WIP for Rich text. Not anywhere near complete, but has some nice interaction.
Context: I'm getting hung up on the data model but it doesn't matter unless this is being used. For now, a textarea with only paragraphs is probably enough. We can probably run a modification on the data to include the tags if it needs to include paragraph tags etc.
<script lang="ts">
import type { Passage } from '../src/types';
import { nanoid } from 'nanoid/non-secure';
export let latestChapter = 1;
let chapter = latestChapter;
let html = 'some content';
// let showToolbar = false;
let showToolbar = true;
function submitPassage() {
const passage: Passage = { html, chapter, id: nanoid() };
console.log(passage);
latestChapter = chapter;
this.reset();
}
function resetPlaceholder() {
if (this.innerText.trim() === '') this.innerHTML = '';
}
import UIButton from './UIButton.svelte';
import UIButtonSecondary from './UIButtonSecondary.svelte';
import Chapter from './Chapter.svelte';
</script>
<form class="mt-6" on:submit|preventDefault={submitPassage}>
{#if chapter !== latestChapter}
<Chapter>{chapter}</Chapter>
{/if}
{#if showToolbar && html}
<div class="flex space-x-2 xjustify-center px-6">
<UIButtonSecondary class="py-2 px-2"
><svg
aria-hidden="true"
focusable="false"
class="w-3 h-3"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"
><path
fill="currentColor"
d="M321.1 242.4C340.1 220.1 352 191.6 352 160c0-70.59-57.42-128-128-128L32 32.01c-17.67 0-32 14.31-32 32s14.33 32 32 32h16v320H32c-17.67 0-32 14.31-32 32s14.33 32 32 32h224c70.58 0 128-57.41 128-128C384 305.3 358.6 264.8 321.1 242.4zM112 96.01H224c35.3 0 64 28.72 64 64s-28.7 64-64 64H112V96.01zM256 416H112v-128H256c35.3 0 64 28.71 64 63.1S291.3 416 256 416z"
/></svg
></UIButtonSecondary
>
<UIButtonSecondary class="py-2 px-2"
><svg
aria-hidden="true"
focusable="false"
class="w-3 h-3"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"
><path
fill="currentColor"
d="M384 64.01c0 17.69-14.31 32-32 32h-58.67l-133.3 320H224c17.69 0 32 14.31 32 32s-14.31 32-32 32H32c-17.69 0-32-14.31-32-32s14.31-32 32-32h58.67l133.3-320H160c-17.69 0-32-14.31-32-32s14.31-32 32-32h192C369.7 32.01 384 46.33 384 64.01z"
/></svg
></UIButtonSecondary
>
{#if chapter === latestChapter}
<UIButtonSecondary class="ml-autox" on:click={() => (chapter = latestChapter + 1)}>
Start new chapter
</UIButtonSecondary>
{/if}
</div>
{/if}
<div
class="w-full mb-16
font-serif dark:text-gray-50 indent-6
focus:outline-none
text-xl leading-relaxed"
on:click={() => (showToolbar = true)}
on:blur={resetPlaceholder}
bind:innerHTML={html}
contenteditable="true"
placeholder="Add your passage to the story…"
/>
{#if showToolbar && html}
<div class="flex">
<UIButton>Add passage</UIButton>
</div>
{/if}
</form>
<style>
[contenteditable]:empty:not(:focus):before {
content: attr(placeholder);
color: theme('colors.gray.400');
}
</style>