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

Making things looks nicer. Various fixes.

Browse Source
This commit is contained in:
Scott Idem
2024-11-04 16:59:30 -05:00
parent ee7f981e2e
commit 63f5168015
5 changed files with 59 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/lib/element_tiptap_editor.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { fade } from 'svelte/transition'
import { Color } from '@tiptap/extension-color'
import ListItem from '@tiptap/extension-list-item'
import TextStyle from '@tiptap/extension-text-style'
@@ -11,6 +12,7 @@ import { Editor } from "@tiptap/core";
// import Typography from '@tiptap/extension-typography' ????
import "./element_tiptap_editor.scss";
import { cubicOut } from 'svelte/easing';
// https://tiptap.dev/docs/examples/basics/default-text-editor
// https://tiptap.dev/docs/examples/basics/formatting
@@ -144,17 +146,41 @@ function getContent() {
show_menu = false;
}
}}
class="editor border border-gray-300 rounded p-1 pb-2 bg-gray-200"
on:mouseenter={() => {
if (default_minimal) {
show_menu = true;
}
}}
class="editor border border-gray-300 rounded p-1 bg-gray-200 transition-all duration-1000"
class:font-mono={show_menu}
class:py-2={show_menu}
>
{#if editor && show_menu}
<div class="control-group bg-gray-200 border-b border-gray-400 p-1">
<div class="button-group flex flex-row flex-wrap gap-4 items-center justify-between">
<!-- && 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: 150, 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
"
>
<!-- <div class="button-group flex flex-row flex-wrap gap-4 items-center justify-between"> -->
<span>
<button
type="button"
on:click={() => console.log(editor?.getHTML()) && editor.chain().toggleBold().run()}
on:click={() => editor.chain().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:variant-ghost-secondary={editor.isActive("bold") ?? false}
@@ -408,17 +434,17 @@ function getContent() {
</button>
</span> -->
<!-- </div> -->
</div>
</div>
{/if}
</div>
{/if} <!-- show_menu -->
<div
<div
bind:this={element}
class="tiptap bg-slate-100 px-1 py-2"
class="tiptap bg-slate-100 px-2 py-2 relative"
>
<span
class="placeholder text-sm text-gray-400 italic"
class="placeholder text-sm text-gray-400 italic absolute"
contenteditable="false"
hidden={editor?.getHTML() !== '<p></p>'}
>{placeholder}</span>
@@ -428,4 +454,12 @@ function getContent() {
</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>