Trying out CodeMirror. I think I like it? Use it in readonly mode for view. Wrapping up for the day.

This commit is contained in:
Scott Idem
2025-05-12 19:56:56 -04:00
parent 3b38c31ba0
commit b5642583c7
4 changed files with 1658 additions and 787 deletions

View File

@@ -1894,40 +1894,67 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
</div>
{:else}
<!-- <div
class="
flex-grow
h-full max-h-full
w-full min-w-full max-w-6xl"
> -->
<!-- disabled={tmp_entry_obj?.private && !$journals_loc?.entry?.decrypt_kv[$lq__journal_entry_obj?.journal_entry_id]} -->
<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;
// }
}}
<!-- <div
class="
flex-grow
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>
flex-grow
h-full max-h-full
w-full min-w-full max-w-6xl"
> -->
<!-- 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}
<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;
// }
}}
class="
flex-grow
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}
<E_app_codemirror_v5
content={tmp_entry_obj?.content ?? ''}
bind:new_content={tmp_entry_obj.content}
language={markdown()}
placeholder="Write your JavaScript code here..."
classes="
flex-grow
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
"
/>
{/if}
<!-- Only enable editing if the user has trusted access -->
<button
@@ -2054,16 +2081,16 @@ zzzz
classes="editor"
/> -->
<!-- bind:content={tmp_entry_obj.content} -->
<E_app_codemirror_v5
bind:content={tmp_entry_obj.content}
bind:new_content={tmp_entry_obj.new_content}
<!-- <E_app_codemirror_v5
content={tmp_entry_obj?.content ?? ''}
bind:new_content={tmp_entry_obj.content}
language={markdown()}
placeholder="Write your JavaScript code here..."
/>
/> -->
<pre>
<!-- <pre>
{tmp_entry_obj.new_content}
</pre>
</pre> -->
</div>
{/if}