Adding more config options. Making things look better.

src/lib/e_app_sys_menu.svelte

@@ -75,43 +75,47 @@ max-w-max -->
     "
     class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
     > -->
-     <!-- && !$ae_loc?.app_cfg?.show_element__menu -->
+<!-- && !$ae_loc?.app_cfg?.show_element__menu -->
-      <!-- !$ae_loc
+    <!-- !$ae_loc
-       ?.app_cfg?.show_element__menu_btn -->
+    ?.app_cfg?.show_element__menu_btn -->
-       <!-- bg-blue-100/60 dark:bg-blue-800/50 -->
+<!-- bg-blue-100/60 dark:bg-blue-800/50 -->
+<!-- class:hover:border-transparent={!$ae_loc?.app_cfg?.show_element__menu} -->
+<!-- mx-1 my-2 -->
 <!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
 <section
     class="
         absolute bottom-6 right-0
-        flex flex-col-reverse gap-1
-        items-end justify-center
-        text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg
-        bg-transparent
-        dark:text-slate-400 dark:hover:text-slate-200
 
-        hover:bg-blue-200 hover:dark:bg-blue-900
-
-        mx-1 my-2
         w-min
         max-w-md
+
+        opacity-60
+        hover:opacity-100
+        z-50
+
+        flex flex-col-reverse gap-1
+        items-end justify-center
+
+        text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg
+
+        bg-transparent
+        dark:text-slate-400 dark:hover:text-slate-200
+        hover:bg-blue-200/50 hover:dark:bg-blue-900
+
+        border-2 rounded
+        border-blue-300/20 dark:border-blue-700
+        hover:border-blue-500 hover:dark:border-blue-500
+
         transition-all
         transition-delay-1000
         transition-duration-1000
         ease-in
-        z-50
-
-        opacity-60
-        hover:opacity-100
-
-        border-2
-        border-blue-300 dark:border-blue-700
-        hover:border-blue-500 hover:dark:border-blue-500
     "
     class:top-0={$ae_loc?.app_cfg?.show_element__menu & 1 == 3}
     class:w-full={$ae_loc?.app_cfg?.show_element__menu}
     class:hidden={false}
     class:border-transparent={!$ae_loc?.app_cfg?.show_element__menu}
-    class:hover:border-transparent={!$ae_loc?.app_cfg?.show_element__menu}
+
     class:hover:bg-transparent={!$ae_loc?.app_cfg?.show_element__menu}
     >
 
@@ -140,8 +144,6 @@ max-w-max -->
 
         opacity-50
         hover:opacity-100
-
-         min-w-full
         "
     >
 

src/routes/journals/[journal_id]/+layout.svelte

@@ -8,7 +8,7 @@ import { goto } from '$app/navigation';
 import {
         ArrowDown01, ArrowDown10, ArrowDownUp,
         BookHeart, BookImage, Bookmark, BookOpenText, BriefcaseBusiness,
-        Check,
+        Check, Copy,
         Eye, EyeOff,
         Flag, FlagOff, FilePlus, Fingerprint,
         Globe,
@@ -386,7 +386,7 @@ async function handle_update_journal() {
     <div class="modal">
         <div class="modal-box mx-2 mb-14 space-y-4">
             <!-- <h3 class="font-bold text-lg">Edit Journal</h3> -->
-            <div class="py-2 mb-2">
+            <div class="space-y-2 py-2 mb-2">
                 <label class="text-sm text-gray-500 hidden sm:inline">
                     Journal Name:
                 <input type="text" placeholder="Journal Name" bind:value={$journals_slct.tmp_journal_obj.name} class="input input-bordered w-full mb-2" />
@@ -459,7 +459,7 @@ async function handle_update_journal() {
                     </select>
                 </div>
 
-                <div class="flex flex-row gap-1 items-center judify-start">
+                <div class="flex flex-row gap-1 items-center justify-start">
                     <!-- inputs for customizable journal category list -->
                     <!-- each category has a code and name; need to be able to add and remove categories -->
                     <div class="text-sm text-gray-500 hidden sm:inline">
@@ -498,7 +498,7 @@ async function handle_update_journal() {
                 </div>
 
                 <!-- Select max height options (Tailwind CSS) -->
-                <div class="flex flex-row gap-1 items-center judify-start">
+                <div class="flex flex-row gap-1 items-center justify-start">
                     <span class="text-sm text-gray-500 hidden sm:inline">
                         Journal Entry List Max Height:
                     </span>
@@ -523,7 +523,7 @@ async function handle_update_journal() {
                 </div>
 
                 <!-- Select hover max height options (Tailwind CSS) -->
-                <div class="flex flex-row gap-1 items-center judify-start">
+                <div class="flex flex-row gap-1 items-center justify-start">
                     <span class="text-sm text-gray-500 hidden sm:inline">
                         Journal Entry List Hover Max Height:
                     </span>
@@ -550,7 +550,7 @@ async function handle_update_journal() {
                 <!-- Select color scheme for the journal entries -->
                 <!-- Should select from the common Tailwind CSS options. Examples: slate, blue, gray, green, orange, red, yellow, etc. -->
                 <!-- Saves to cfg_json.color_scheme -->
-                <div class="flex flex-row gap-1 items-center judify-start">
+                <div class="flex flex-row gap-1 items-center justify-start">
                     <span class="text-sm text-gray-500 hidden sm:inline">
                         Color Scheme:
                     </span>
@@ -574,14 +574,206 @@ async function handle_update_journal() {
                     </select>
                 </div>
 
+                <div class="flex flex-row gap-1 items-center justify-start">
+                    <span class="text-sm text-gray-500 hidden sm:inline">
+                        Preferred Viewer:
+                    </span>
+                    <select
+                        bind:value={$journals_slct.tmp_journal_obj.cfg_json.pref_viewer}
+                        onchange={(event) => {
+                            $journals_slct.tmp_journal_obj.cfg_json.pref_viewer = event.target.value;
+                            console.log('Selected viewer:', $journals_slct.tmp_journal_obj.cfg_json.pref_viewer);
+                        }}
+                        class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition text-xs w-full mb-2 max-w-48"
+                        title="Select preferred viewer for journal entries"
+                        >
+                        <option value="">Default (Rendered)</option>
+                        <option value="plain">Plain Text</option>
+                        <option value="rendered">Rendered (HTML)</option>
+                        <!-- <option value="textarea">Text Area</option> -->
+                        <option value="codemirror">CodeMirror (readonly)</option>
+                    </select>
+                </div>
+
+                <div class="flex flex-row gap-1 items-center justify-start">
+                    <span class="text-sm text-gray-500 hidden sm:inline">
+                        Preferred Editor:
+                    </span>
+                    <select
+                        bind:value={$journals_slct.tmp_journal_obj.cfg_json.pref_editor}
+                        onchange={(event) => {
+                            $journals_slct.tmp_journal_obj.cfg_json.pref_editor = event.target.value;
+                            console.log('Selected editor:', $journals_slct.tmp_journal_obj.cfg_json.pref_editor);
+                        }}
+                        class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition text-xs w-full mb-2 max-w-48"
+                        title="Select preferred editor for journal entries"
+                        >
+                        <option value="">Default (Text Area)</option>
+                        <option value="textarea">Text Area</option>
+                        <option value="codemirror">CodeMirror</option>
+                    </select>
+                </div>
+
+                <!-- Toggles for the copy content buttons: plain text (in Markdown), HTML marked up, rendered rich HTML, encrypted content, clone Entry -->
+                <div class="flex flex-row flex-wrap gap-1 items-center justify-start">
+
+                    <span class="text-sm text-gray-500 hidden sm:inline">
+                        Journal Entry Copy Options:
+                    </span>
+
+                    <span class="flex flex-row flex-wrap gap-1 items-center justify-center">
+                    <button
+                        type="button"
+                        onclick={() => {
+                            $journals_slct.tmp_journal_obj.cfg_json.hide_copy_plain_md = !$journals_slct.tmp_journal_obj.cfg_json.hide_copy_plain_md;
+                        }}
+                        class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
+                        title="Toggle visibility of Markdown copy button(s) on Journal Entry view page"
+                        >
+                        {#if $journals_slct.tmp_journal_obj.cfg_json.hide_copy_plain_md}
+                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
+                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
+                            <EyeOff strokeWidth="1" color="gray" />
+                            <span class="hidden">
+                                Hiding
+                            </span>
+                        {:else}
+                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
+                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
+                            <Eye strokeWidth="2.5" color="green" />
+                            <span class="hidden">
+                                Showing
+                            </span>
+                        {/if}
+                        <span class="hidden">
+                            Plaintext Markdown Copy Button
+                        </span>
+                    </button>
+
+                    <button
+                        type="button"
+                        onclick={() => {
+                            $journals_slct.tmp_journal_obj.cfg_json.hide_copy_html = !$journals_slct.tmp_journal_obj.cfg_json.hide_copy_html;
+                        }}
+                        class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
+                        title="Toggle visibility of HTML copy button(s) on Journal Entry view page"
+                        >
+                        {#if $journals_slct.tmp_journal_obj.cfg_json.hide_copy_html}
+                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
+                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
+                            <EyeOff strokeWidth="1" color="gray" />
+                            <span class="hidden">
+                                Hiding
+                            </span>
+                        {:else}
+                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
+                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
+                            <Eye strokeWidth="2.5" color="green" />
+                            <span class="hidden">
+                                Showing
+                            </span>
+                        {/if}
+                        <span class="hidden">
+                            HTML Copy Button
+                        </span>
+                    </button>
+
+                    <button
+                        type="button"
+                        onclick={() => {
+                            $journals_slct.tmp_journal_obj.cfg_json.hide_copy_rich = !$journals_slct.tmp_journal_obj.cfg_json.hide_copy_rich;
+                        }}
+                        class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
+                        title="Toggle visibility of rendered copy button(s) on Journal Entry view page"
+                        >
+                        {#if $journals_slct.tmp_journal_obj.cfg_json.hide_copy_rich}
+                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
+                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
+                            <EyeOff strokeWidth="1" color="gray" />
+                            <span class="hidden">
+                                Hiding
+                            </span>
+                        {:else}
+                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
+                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
+                            <Eye strokeWidth="2.5" color="green" />
+                            <span class="hidden">
+                                Showing
+                            </span>
+                        {/if}
+                        <span class="hidden">
+                            Rendered Rich Copy Button
+                        </span>
+                    </button>
+
+                    <button
+                        type="button"
+                        onclick={() => {
+                            $journals_slct.tmp_journal_obj.cfg_json.hide_copy_encrypted = !$journals_slct.tmp_journal_obj.cfg_json.hide_copy_encrypted;
+                        }}
+                        class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
+                        title="Toggle visibility of encrypted copy button(s) on Journal Entry view page"
+                        >
+                        {#if $journals_slct.tmp_journal_obj.cfg_json.hide_copy_encrypted}
+                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
+                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
+                            <EyeOff strokeWidth="1" color="gray" />
+                            <span class="hidden">
+                                Hiding
+                            </span>
+                        {:else}
+                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
+                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
+                            <Eye strokeWidth="2.5" color="green" />
+                            <span class="hidden">
+                                Showing
+                            </span>
+                        {/if}
+                        <span class="hidden">
+                            Encrypted Copy Button
+                        </span>
+                    </button>
+
+                    <button
+                        type="button"
+                        onclick={() => {
+                            $journals_slct.tmp_journal_obj.cfg_json.hide_clone = !$journals_slct.tmp_journal_obj.cfg_json.hide_clone;
+                        }}
+                        class="btn btn-sm variant-ghost-secondary hover:variant-filled-secondary transition *:hover:inline"
+                        title="Toggle visibility of clone button(s) on Journal Entry view page"
+                        >
+                        {#if $journals_slct.tmp_journal_obj.cfg_json.hide_clone}
+                            <!-- <EyeOff strokeWidth="1" color="red" /> -->
+                            <ToggleLeft strokeWidth="1" color="red" class="mx-1" />
+                            <Copy strokeWidth="1" color="gray" />
+                            <span class="hidden">
+                                Hiding
+                            </span>
+                        {:else}
+                            <!-- <Eye strokeWidth="2.5" color="green" /> -->
+                            <ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
+                            <Copy strokeWidth="2.5" color="green" />
+                            <span class="hidden">
+                                Showing
+                            </span>
+                        {/if}
+                        <span class="hidden">
+                            Clone Button
+                        </span>
+                    </button>
+
+                    </span>
+
+                </div>
+
                 <!-- Toggles for automatically hiding Entries marked as either: private, personal, or professional  -->
-                <div class="flex flex-row gap-1 items-center judify-start">
+                <div class="flex flex-row flex-wrap gap-1 items-center justify-start">
 
                     <span class="text-sm text-gray-500 hidden sm:inline">
                         Journal Entry Visibility:
                     </span>
 
-                    <span class="flex flex-row gap-1 items-center justify-center">
+                    <span class="flex flex-row flex-wrap gap-1 items-center justify-center">
                     <button
                         type="button"
                         onclick={() => {
@@ -670,13 +862,13 @@ async function handle_update_journal() {
 
 
                 <!-- Toggle buttons for showing/hiding various Journal Entry page view buttons: alert, alert message, private, public, personal, professional, template -->
-                <div class="flex flox-row gap-1 items-center judify-start">
+                <div class="flex flox-row flex-wrap gap-1 items-center justify-start">
 
                     <span class="text-sm text-gray-500 hidden sm:inline">
                         Journal Entry View Buttons:
                     </span>
 
-                    <span class="flex flex-row gap-1 items-center justify-center">
+                    <span class="flex flex-row flex-wrap gap-1 items-center justify-center">
                     <button
                         type="button"
                         onclick={() => {

src/routes/journals/[journal_id]/+page.svelte

@@ -187,6 +187,7 @@ if (browser) {
 
 {#if $lq__journal_entry_obj_li && $lq__journal_entry_obj_li?.length }
     <Journal_entry_obj_li
+        lq__journal_obj={lq__journal_obj}
         lq__journal_entry_obj_li={lq__journal_entry_obj_li}
         />
 {:else}

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -1925,53 +1925,95 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
         "
     >
 {#if (!$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id])}
-    {#if !$ae_loc.edit_mode || !$ae_loc.trusted_access}
-    <article
-        class="
-            flex-grow
-            basis-full
-            h-full min-h-max max-h-full
-            w-full min-w-full max-w-6xl
-            p-2
-            space-y-1
-            font-mono
-            !bg-slate-100 !text-gray-900
-            dark:!bg-slate-900 dark:!text-gray-100
-            dark:prose-invert
-            shadow-md rounded-lg
-            border border-gray-200 dark:border-gray-700
-            hover:border-green-500 dark:hover:border-green-500
-            prose
-            prose-h1:underline prose-h1:decoration-double
-            prose-h2:underline
-            prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg
-            prose-h1:m-0 prose-h2:m-0 prose-h3:m-0 prose-h4:m-0 prose-h5:m-0 prose-h6:m-0
-            prose-li:m-0 prose-li:p-0 prose-li:line-height-none
-            "
-        id="rendered_journal_entry_content_{$lq__journal_entry_obj?.journal_entry_id}"
-        >
-        {#if tmp_entry_obj.content_md_html}
-            {@html tmp_entry_obj.content_md_html}
-        {:else if tmp_entry_obj?.content_encrypted && tmp_entry_obj?.private}
-            <div class="text-sm text-gray-500">
 
-                <div class=""><LockKeyhole strokeWidth="1.5" color="green" class="inline-block" /> Encrypted:</div>
+    {#if $lq__journal_obj?.cfg_json?.pref_viewer == 'codemirror'}
+        <E_app_codemirror_v5
+            editable={false}
+            readonly={true}
+            content={tmp_entry_obj?.content ?? ''}
+            bind:new_content={tmp_entry_obj.content}
+            bind:theme_mode={$ae_loc.theme_mode}
+            placeholder="Write using Markdown here..."
+            class="
+                p-2
+                bg-slate-100 text-gray-900
+                dark:bg-slate-900 dark:text-gray-100
+                shadow-lg rounded-lg
+                border border-gray-200 dark:border-gray-700
+                hover:border-green-500 dark:hover:border-green-500
+                "
+            />
+    {:else if $lq__journal_obj?.cfg_json?.pref_viewer == 'plain'}
+        <pre
+            class="
+                flex-grow
+                basis-full
+                h-full min-h-max max-h-full
+                w-full min-w-full max-w-6xl
+                p-2
+                space-y-1
+                font-mono
+                text-wrap
+                !bg-slate-100 !text-gray-900
+                dark:!bg-slate-900 dark:!text-gray-100
+                dark:prose-invert
+                shadow-md rounded-lg
+                border border-gray-200 dark:border-gray-700
+                hover:border-green-500 dark:hover:border-green-500
+                "
+                >
+                {#if tmp_entry_obj.content}
+                {tmp_entry_obj.content}
+                {/if}
+        </pre>
+    {:else} <!-- rendered has HTML -->
+        <article
+            class="
+                flex-grow
+                basis-full
+                h-full min-h-max max-h-full
+                w-full min-w-full max-w-6xl
+                p-2
+                space-y-1
+                font-mono
+                !bg-slate-100 !text-gray-900
+                dark:!bg-slate-900 dark:!text-gray-100
+                dark:prose-invert
+                shadow-md rounded-lg
+                border border-gray-200 dark:border-gray-700
+                hover:border-green-500 dark:hover:border-green-500
+                prose
+                prose-h1:underline prose-h1:decoration-double
+                prose-h2:underline
+                prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg
+                prose-h1:m-0 prose-h2:m-0 prose-h3:m-0 prose-h4:m-0 prose-h5:m-0 prose-h6:m-0
+                prose-li:m-0 prose-li:p-0 prose-li:line-height-none
+                "
+            id="rendered_journal_entry_content_{$lq__journal_entry_obj?.journal_entry_id}"
+            >
+            {#if tmp_entry_obj.content_md_html}
+                {@html tmp_entry_obj.content_md_html}
+            {:else if tmp_entry_obj?.content_encrypted && tmp_entry_obj?.private}
+                <div class="text-sm text-gray-500">
 
-                <div class="max-w-screen-md overflow-auto wrap break-all">
+                    <div class=""><LockKeyhole strokeWidth="1.5" color="green" class="inline-block" /> Encrypted:</div>
-                {tmp_entry_obj?.content_encrypted}
+
+                    <div class="max-w-screen-md overflow-auto wrap break-all">
+                    {tmp_entry_obj?.content_encrypted}
+                    </div>
                 </div>
-            </div>
+            {/if}
-        {/if}
+            <!-- {#if decrypted_content?.length}
-        <!-- {#if decrypted_content?.length}
+                {@html decrypted_content}
-            {@html decrypted_content}
+            {:else if $lq__journal_entry_obj?.content_encrypted}
-        {:else if $lq__journal_entry_obj?.content_encrypted}
+                <span class="text-sm text-gray-500 break-all">
-            <span class="text-sm text-gray-500 break-all">
+                {@html $lq__journal_entry_obj?.content_encrypted}
-            {@html $lq__journal_entry_obj?.content_encrypted}
+                </span>
-            </span>
+            {:else}
-        {:else}
+                {@html $lq__journal_entry_obj?.content_md_html}
-            {@html $lq__journal_entry_obj?.content_md_html}
+            {/if} -->
-        {/if} -->
+        </article>
-    </article>
+    {/if}
     <!-- {@html async () => {
         const { base64, iv } = await encrypt_content(content, journal_key);
         // console.log('Encrypted content:', base64);
@@ -1984,25 +2026,7 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
     <!-- {@html encrypt_content($lq__journal_entry_obj?.content, journal_key)} -->
     <!-- --{@html encrypted_base64_string}-- -->
     <!-- {@html marked.parse($lq__journal_entry_obj?.content)} -->
-    {:else}
 
-    <E_app_codemirror_v5
-        editable={false}
-        readonly={true}
-        content={tmp_entry_obj?.content ?? ''}
-        bind:new_content={tmp_entry_obj.content}
-        bind:theme_mode={$ae_loc.theme_mode}
-        placeholder="Write using Markdown here..."
-        class="
-            p-2
-            bg-slate-100 text-gray-900
-            dark:bg-slate-900 dark:text-gray-100
-            shadow-lg rounded-lg
-            border border-gray-200 dark:border-gray-700
-            hover:border-green-500 dark:hover:border-green-500
-            "
-        />
-    {/if}
 
 {:else if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current')}
 <!-- && !($lq__journal_entry_obj?.content_encrypted && decrypted_content)) -->
@@ -2054,53 +2078,52 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
         > -->
         <!-- disabled={tmp_entry_obj?.private && !$journals_loc?.entry?.decrypt_kv[$lq__journal_entry_obj?.journal_entry_id]} -->
 
-        {#if !$ae_loc.edit_mode || !$ae_loc.trusted_access}
+        {#if $lq__journal_obj?.cfg_json?.pref_editor == 'codemirror'}
-        <textarea
+            <E_app_codemirror_v5
-            bind:value={tmp_entry_obj.content}
+                content={tmp_entry_obj?.content ?? ''}
-            ondblclick={() => {
+                bind:new_content={tmp_entry_obj.content}
-                // if ($ae_loc.trusted_access && $ae_loc.edit_mode) {
+                bind:theme_mode={$ae_loc.theme_mode}
-                //     // Toggle edit mode
+                placeholder="Write using Markdown here..."
-                //     $journals_loc.entry.edit = !$journals_loc.entry.edit;
+                class="
-                //     $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = $journals_loc.entry.edit;
+                    p-2
-                // }
+                    bg-slate-100 text-gray-900
-            }}
+                    dark:bg-slate-900 dark:text-gray-100
-
+                    shadow-lg rounded-lg
-            class="
+                    border border-orange-200 dark:border-orange-700
-                flex-grow
+                    hover:border-orange-500 dark:hover:border-orange-500
-                flex-shrink-0
+                    "
-                basis-full
+                />
-                h-max min-h-max max-h-full
-                w-full min-w-full max-w-6xl
-                p-2
-                space-y-1
-                font-mono
-                bg-slate-100 text-gray-900
-                dark:bg-slate-900 dark:text-gray-100
-                shadow-lg rounded-lg
-                border border-orange-200 dark:border-orange-700
-                hover:border-orange-500 dark:hover:border-orange-500
-                "
-            placeholder="Edit journal entry content here..."
-            ></textarea>
         {:else}
+            <textarea
+                bind:value={tmp_entry_obj.content}
+                ondblclick={() => {
+                    // if ($ae_loc.trusted_access && $ae_loc.edit_mode) {
+                    //     // Toggle edit mode
+                    //     $journals_loc.entry.edit = !$journals_loc.entry.edit;
+                    //     $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] = $journals_loc.entry.edit;
+                    // }
+                }}
 
-        <E_app_codemirror_v5
+                class="
-            content={tmp_entry_obj?.content ?? ''}
+                    flex-grow
-            bind:new_content={tmp_entry_obj.content}
+                    flex-shrink-0
-            bind:theme_mode={$ae_loc.theme_mode}
+                    basis-full
-            placeholder="Write using Markdown here..."
+                    h-max min-h-max max-h-full
-            class="
+                    w-full min-w-full max-w-6xl
-                p-2
+                    p-2
-                bg-slate-100 text-gray-900
+                    space-y-1
-                dark:bg-slate-900 dark:text-gray-100
+                    font-mono
-                shadow-lg rounded-lg
+                    bg-slate-100 text-gray-900
-                border border-orange-200 dark:border-orange-700
+                    dark:bg-slate-900 dark:text-gray-100
-                hover:border-orange-500 dark:hover:border-orange-500
+                    shadow-lg rounded-lg
-                "
+                    border border-orange-200 dark:border-orange-700
-            />
+                    hover:border-orange-500 dark:hover:border-orange-500
-
+                    "
+                placeholder="Edit journal entry content here..."
+                ></textarea>
         {/if}
 
+
         <!-- Only enable editing if the user has trusted access -->
         <button
             type="button"

src/routes/journals/ae_comp__journal_entry_obj_li.svelte

@@ -27,10 +27,11 @@ import { journals_loc, journals_sess, journals_slct, journals_trig } from '$lib/
 import { journals_func } from '$lib/ae_journals/ae_journals_functions';
 
 interface Props {
+    lq__journal_obj: any;
     lq__journal_entry_obj_li: any;
 }
 
-let { lq__journal_entry_obj_li }: Props = $props();
+let { lq__journal_obj, lq__journal_entry_obj_li }: Props = $props();
 
 let ae_promises: key_val = $state({});
 // let ae_tmp: key_val = {};
@@ -170,8 +171,8 @@ $effect(() => {
 
                 </h3>
 
+                <span class="flex flex-row flex-wrap gap-1 items-center justify-center">
                 {#if !journals_journal_entry_obj.private}
-                <span class="flex flex-row flex-wrap gap-1">
                 <!-- Button to copy the Markdown version -->
                 <button
                     type="button"
@@ -185,7 +186,7 @@ $effect(() => {
                             alert('Failed to copy content.');
                         });
                     }}
-                    class:hidden={journals_journal_entry_obj.template}
+                    class:hidden={$lq__journal_obj?.cfg_json?.hide_copy_plain_md}
                     class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline text-xs lg:text-sm"
                     title="Copy the markdown content"
                     >
@@ -212,7 +213,7 @@ $effect(() => {
                             alert('Failed to copy HTML content.');
                         });
                     }}
-                    class:hidden={journals_journal_entry_obj.template}
+                    class:hidden={journals_journal_entry_obj.template || $lq__journal_obj?.cfg_json?.hide_copy_html}
                     class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline lg:text-xs"
                     title="Copy the rendered HTML content"
                     >
@@ -220,10 +221,48 @@ $effect(() => {
                     <Copy size="1em" />
                     <CodeXml size="1.25em" />
                     <span class="hidden">
-                    Copy Rendered HTML
+                    Copy HTML Markup
                     </span>
                 </button>
 
+                <!-- Button to copy the rich text (rendered HTML) version -->
+                <button
+                    type="button"
+                    onclick={async () => {
+                        const element = document.getElementById(`rendered_journal_entry_content_${journals_journal_entry_obj.journal_entry_id}`);
+                        if (!element) {
+                            console.error('Element not found: rendered_journal_entry_content');
+                            alert('Failed to copy rich content.');
+                            return;
+                        }
+
+                        try {
+                            // Get the rendered HTML content
+                            const htmlContent = element.innerHTML;
+
+                            // Use the Clipboard API to write the HTML content as rich text
+                            await navigator.clipboard.write([
+                                new ClipboardItem({
+                                    'text/html': new Blob([htmlContent], { type: 'text/html' }),
+                                }),
+                            ]);
+
+                            alert('Rendered rich content copied to clipboard!');
+                        } catch (error) {
+                            console.error('Failed to copy rich content:', error);
+                            alert('Failed to copy rich content.');
+                        }
+                    }}
+                    class:hidden={journals_journal_entry_obj.template || $lq__journal_obj?.cfg_json?.hide_copy_rich}
+                    class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
+                    title="Copy the rich text (rendered HTML) content"
+                >
+                    <Copy size="1em" />
+                    <TypeOutline size="1.25em" />
+                    <span class="hidden">Copy Rich Text</span>
+                </button>
+
+
                 <!-- Clone entry -->
                 <button
                     type="button"
@@ -263,47 +302,11 @@ $effect(() => {
                     <span class="hidden md:inline">Clone</span>
                 </button>
 
-
+                <!-- </span> -->
-                <!-- Button to copy the rich text (rendered HTML) version -->
-                <button
-                    type="button"
-                    onclick={async () => {
-                        const element = document.getElementById(`rendered_journal_entry_content_${journals_journal_entry_obj.journal_entry_id}`);
-                        if (!element) {
-                            console.error('Element not found: rendered_journal_entry_content');
-                            alert('Failed to copy rich content.');
-                            return;
-                        }
-
-                        try {
-                            // Get the rendered HTML content
-                            const htmlContent = element.innerHTML;
-
-                            // Use the Clipboard API to write the HTML content as rich text
-                            await navigator.clipboard.write([
-                                new ClipboardItem({
-                                    'text/html': new Blob([htmlContent], { type: 'text/html' }),
-                                }),
-                            ]);
-
-                            alert('Rendered rich content copied to clipboard!');
-                        } catch (error) {
-                            console.error('Failed to copy rich content:', error);
-                            alert('Failed to copy rich content.');
-                        }
-                    }}
-                    class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
-                    title="Copy the rich text (rendered HTML) content"
-                >
-                    <Copy size="1em" />
-                    <TypeOutline size="1.25em" />
-                    <span class="hidden">Copy Rich Text</span>
-                </button>
-                </span>
 
                 {:else}
 
-                <span class="flex flex-row flex-wrap gap-1 items-center justify-center">
+                <!-- <span class="flex flex-row flex-wrap gap-1 items-center justify-center"> -->
                     <Lock size="1.25em" class="mx-1 inline-block text-red-400 dark:text-red-600" />
                     <!-- <EyeOff size="1.25em" class="mx-1 inline-block text-red-400 dark:text-red-600" /> -->
                     <span class="text-xs text-gray-500 hidden">Private</span>
@@ -321,7 +324,7 @@ $effect(() => {
                                 alert('Failed to copy content.');
                             });
                         }}
-                        class:hidden={journals_journal_entry_obj.template}
+                        class:hidden={$lq__journal_obj?.cfg_json?.hide_copy_encrypted}
                         class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline text-xs lg:text-sm"
                         title="Copy the encrypted content"
                         >
@@ -333,9 +336,10 @@ $effect(() => {
                         </span>
                     </button>
 
-                </span>
+                <!-- </span> -->
 
                 {/if}
+                </span>
             </span>
 
 

src/routes/journals/ae_comp__journal_obj_id_view.svelte

@@ -256,9 +256,8 @@ function verify_journal_passcode() {
         class="
             prose
             space-y-1
-            m-4
             p-2
-            w-full max-w-screen-md
+            w-full max-w-screen-sm md:max-w-screen-md
             font-mono
             text-gray-900
             dark:bg-blue-900/40 dark:text-gray-100

src/routes/journals/ae_comp__journal_obj_li.svelte

@@ -57,13 +57,12 @@ let { lq__journal_obj_li }: Props = $props();
                 space-y-1
                 journal__description
                 p-2
-                w-full
+                w-full max-w-screen-sm md:max-w-screen-md
                 font-mono
                 text-gray-900
                 dark:bg-blue-900 dark:text-gray-100
                 shadow-md rounded-lg
                 text-sm font-normal text-wrap word-break
-                max-w-screen-md
 
                 prose-h1:underline prose-h1:decoration-double
                 prose-h2:underline