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

Stabilize journal entry width

Browse Source
This commit is contained in:
Scott Idem
2026-05-04 17:25:08 -04:00
parent 38a752fbae
commit 9ed2d21757
3 changed files with 73 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/routes/journals/ae_comp__journal_entry_editor.svelte
View File

@@ -6,18 +6,20 @@
*/
import { LockKeyhole, RefreshCcw, Save } from '@lucide/svelte';
import { ae_loc } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_sess
} from '$lib/ae_journals/ae_journals_stores';
import { journals_loc } from '$lib/ae_journals/ae_journals_stores';
import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
type JournalEntryDraft = Partial<ae_JournalEntry> & {
content?: string | false;
[key: string]: unknown;
};
interface Props {
entry: ae_JournalEntry;
journal: ae_Journal;
tmp_entry_obj: any; // Bindable
editor_view?: any; // Bindable
tmp_entry_obj: JournalEntryDraft; // Bindable
editor_view?: unknown; // Bindable
has_changed: boolean;
updated_idb: boolean;
on_save: () => void;
@@ -38,21 +40,41 @@ let {
const is_editing = $derived(
$journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'
);
const preferred_viewer = $derived((journal?.cfg_json?.pref_viewer ?? 'rendered').toLowerCase());
</script>
<div
class="journal-entry-editor-wrapper flex w-full grow flex-col items-center">
class="journal-entry-editor-wrapper flex w-full min-w-0 grow flex-col items-stretch">
{#if !is_editing}
<!-- VIEW MODE -->
<div class="prose dark:prose-invert w-full max-w-6xl p-4">
{@html tmp_entry_obj?.content_md_html || ''}
<div class="w-full min-w-0">
{#if preferred_viewer === 'codemirror'}
<AE_Comp_Editor_CodeMirror
bind:content={tmp_entry_obj.content}
bind:editor_view
theme_mode={$ae_loc.theme_mode}
language="markdown"
readonly={true}
show_toolbar={false}
class_li="w-full rounded-lg bg-surface-50 shadow-lg dark:bg-surface-800" />
{:else if preferred_viewer === 'plain'}
<div
class="bg-surface-50 dark:bg-surface-800 text-surface-800 dark:text-surface-100 w-full rounded-lg border border-gray-200 p-4 font-mono text-sm whitespace-pre-wrap wrap-break-word shadow-lg dark:border-gray-700">
{tmp_entry_obj?.content || ''}
</div>
{:else}
<div
class="prose dark:prose-invert w-full max-w-none overflow-x-auto rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-900">
{@html tmp_entry_obj?.content_md_html || ''}
</div>
{/if}
</div>
{:else}
<!-- EDIT MODE -->
{#if !tmp_entry_obj?.content && tmp_entry_obj?.content_encrypted}
<!-- Decryption Required Message -->
<div
class="bg-error-100 dark:bg-error-900/30 text-error-900 dark:text-error-100 border-error-500 flex w-full max-w-6xl flex-col gap-4 rounded-lg border p-4">
class="bg-error-100 dark:bg-error-900/30 text-error-900 dark:text-error-100 border-error-500 flex w-full flex-col gap-4 rounded-lg border p-4">
<div class="space-y-2">
<div class="flex items-center gap-2 font-bold">
<LockKeyhole size="1.25em" />
@@ -61,12 +83,6 @@ const is_editing = $derived(
<p class="text-sm">
This entry must be decrypted before it can be edited.
</p>
{#if tmp_entry_obj?.content === false}
<p
class="text-error-500 text-xs font-bold tracking-widest uppercase">
Decryption failed. Incorrect passcode.
</p>
{/if}
</div>
{#if $ae_loc.edit_mode && on_force_reset}
@@ -94,11 +110,11 @@ const is_editing = $derived(
bind:editor_view
theme_mode={$ae_loc.theme_mode}
placeholder="Write using Markdown..."
class_li="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg w-full max-w-6xl bg-surface-50 dark:bg-surface-800" />
class_li="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg w-full bg-surface-50 dark:bg-surface-800" />
{:else}
<textarea
bind:value={tmp_entry_obj.content}
class="textarea h-[500px] w-full max-w-6xl grow rounded-lg border-orange-500/30 p-4 font-mono break-words whitespace-pre-wrap shadow-lg"
class="textarea h-125 w-full grow rounded-lg border-orange-500/30 p-4 font-mono whitespace-pre-wrap wrap-break-word shadow-lg"
placeholder="Edit content..."></textarea>
{/if}