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

refactor: Rename CodeMirror wrapper and fix editor buttons

Browse Source 
Renamed Tiptap_editor to CodeMirror_wrapper and updated all usages. Renamed the wrapper file to element_codemirror_editor_wrapper.svelte. Fixed a TypeError in the CodeMirror editor buttons by using EditorSelection.range() to correctly create selection ranges.
This commit is contained in:
Scott Idem
2025-11-18 14:14:24 -05:00
parent 95412dd0ad
commit 691b20fd54
8 changed files with 862 additions and 861 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/elements/codemirror_modules.ts
View File

@@ -131,6 +131,7 @@ export async function ensureCodeMirrorModules(): Promise<CMCache> {
placeholderExt: viewMod.placeholder, placeholderExt: viewMod.placeholder,
EditorState: stateMod.EditorState, EditorState: stateMod.EditorState,
EditorSelection: stateMod.EditorSelection,
EditorState_allowMultipleSelections: stateMod.EditorState.allowMultipleSelections, EditorState_allowMultipleSelections: stateMod.EditorState.allowMultipleSelections,
EditorState_readOnly: stateMod.EditorState.readOnly, EditorState_readOnly: stateMod.EditorState.readOnly,

15
src/lib/elements/element_codemirror_editor.svelte
View File

@@ -8,10 +8,11 @@
let editor_container: HTMLDivElement; let editor_container: HTMLDivElement;
let editor_view: any; let editor_view: any;
let cm: any; // Declare cm at the top level
async function createEditor() { async function createEditor() {
if (!browser) return; if (!browser) return;
const cm = await ensureCodeMirrorModules(); cm = await ensureCodeMirrorModules(); // Assign to the top-level cm
if (!cm) return; if (!cm) return;
// If an existing instance exists (HMR / remount), destroy it first // If an existing instance exists (HMR / remount), destroy it first
@@ -89,7 +90,7 @@
{ from: range.from - before.length, to: range.from, insert: '' }, { from: range.from - before.length, to: range.from, insert: '' },
{ from: range.to, to: range.to + after.length, insert: '' } { from: range.to, to: range.to + after.length, insert: '' }
], ],
range: (state as any).constructor.range(range.from - before.length, range.to - before.length) range: cm.EditorSelection.range(range.from - before.length, range.to - before.length)
}; };
} }
@@ -98,7 +99,7 @@
{ from: range.from, insert: before }, { from: range.from, insert: before },
{ from: range.to, insert: after } { from: range.to, insert: after }
], ],
range: (state as any).constructor.range(range.from + before.length, range.to + before.length) range: cm.EditorSelection.range(range.from + before.length, range.to + before.length)
}; };
}); });
editor_view.dispatch(changes); editor_view.dispatch(changes);
@@ -112,7 +113,7 @@
const line = state.doc.lineAt(range.from); const line = state.doc.lineAt(range.from);
return { return {
changes: [{ from: line.from, insert: '- ' }], changes: [{ from: line.from, insert: '- ' }],
range: (state as any).constructor.range(range.from + 2, range.to + 2) range: cm.EditorSelection.range(range.from + 2, range.to + 2)
}; };
}); });
editor_view.dispatch(changes); editor_view.dispatch(changes);
@@ -122,9 +123,9 @@
<div class="codemirror-wrapper border rounded"> <div class="codemirror-wrapper border rounded">
<div class="toolbar p-1 bg-gray-100 border-b"> <div class="toolbar p-1 bg-gray-100 border-b">
<button on:click={() => wrapSelection('**')} class="px-2 py-1 rounded hover:bg-gray-200"><b>B</b></button> <button type="button" on:click={() => wrapSelection('**')} class="px-2 py-1 rounded hover:bg-gray-200"><b>B</b></button>
<button on:click={() => wrapSelection('*')} class="px-2 py-1 rounded hover:bg-gray-200"><i>I</i></button> <button type="button" on:click={() => wrapSelection('*')} class="px-2 py-1 rounded hover:bg-gray-200"><i>I</i></button>
<button on:click={insertList} class="px-2 py-1 rounded hover:bg-gray-200">List</button> <button type="button" on:click={insertList} class="px-2 py-1 rounded hover:bg-gray-200">List</button>
</div> </div>
<div bind:this={editor_container} class="h-full min-h-[150px] overflow-auto"></div> <div bind:this={editor_container} class="h-full min-h-[150px] overflow-auto"></div>
</div> </div>

0
src/lib/elements/element_codemirror_wrapper.svelte → src/lib/elements/element_codemirror_editor_wrapper.svelte
View File

9
src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte
View File

@@ -18,7 +18,7 @@
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores'; import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores';
import { archives_func } from '$lib/ae_archives/ae_archives_functions'; import { archives_func } from '$lib/ae_archives/ae_archives_functions';
import Tiptap_editor from '$lib/elements/element_codemirror_wrapper.svelte'; import CodeMirror_wrapper from '$lib/elements/element_codemirror_editor_wrapper.svelte';
import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte'; import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte'; import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
@@ -421,12 +421,11 @@
<label for="description" class="ae_label w-full"> <label for="description" class="ae_label w-full">
<span class="legend text-sm font-semibold"> Description </span> <span class="legend text-sm font-semibold"> Description </span>
<Tiptap_editor <CodeMirror_wrapper
bind:html_text={description_new_html} bind:html_text={description_new_html}
classes="preset-tonal-surface hover:preset-filled-surface-100-900" classes="preset-tonal-surface hover:preset-filled-surface-100-900"
placeholder="Your content description here..." placeholder="Your content description here..."
/> /> </label>
</label>
</div> </div>
<!-- <label for="content_html">Content (HTML) <!-- <label for="content_html">Content (HTML)
@@ -909,7 +908,7 @@
<span class="legend text-sm font-semibold text-surface-600-400" <span class="legend text-sm font-semibold text-surface-600-400"
>Internal Staff Notes</span >Internal Staff Notes</span
> >
<Tiptap_editor <CodeMirror_wrapper
bind:html_text={notes_new_html} bind:html_text={notes_new_html}
classes="preset-tonal-surface preset-filled-surface-100-900" classes="preset-tonal-surface preset-filled-surface-100-900"
placeholder="Internal notes for staff only. Not shown to the public." placeholder="Internal notes for staff only. Not shown to the public."

6
src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_edit.svelte
View File

@@ -19,7 +19,7 @@
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores'; import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores';
import { archives_func } from '$lib/ae_archives/ae_archives_functions'; import { archives_func } from '$lib/ae_archives/ae_archives_functions';
import Tiptap_editor from '$lib/elements/element_codemirror_wrapper.svelte'; import CodeMirror_wrapper from '$lib/elements/element_codemirror_editor_wrapper.svelte';
interface Props { interface Props {
log_lvl?: number; log_lvl?: number;
@@ -338,7 +338,7 @@
<label for="description" class="ae_label w-full"> <label for="description" class="ae_label w-full">
<span class="legend text-sm font-semibold"> Description </span> <span class="legend text-sm font-semibold"> Description </span>
<Tiptap_editor <CodeMirror_wrapper
bind:html_text={description_new_html} bind:html_text={description_new_html}
classes="preset-tonal-surface hover:preset-filled-surface-100-900" classes="preset-tonal-surface hover:preset-filled-surface-100-900"
placeholder="Your archive description here..." placeholder="Your archive description here..."
@@ -677,7 +677,7 @@
<span class="legend text-sm font-semibold text-surface-600-400" <span class="legend text-sm font-semibold text-surface-600-400"
>Internal Staff Notes</span >Internal Staff Notes</span
> >
<Tiptap_editor <CodeMirror_wrapper
bind:html_text={notes_new_html} bind:html_text={notes_new_html}
classes="preset-tonal-surface preset-filled-surface-100-900" classes="preset-tonal-surface preset-filled-surface-100-900"
placeholder="Internal notes for staff only. Not shown to the public." placeholder="Internal notes for staff only. Not shown to the public."

4
src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_comment_obj_id_edit.svelte
View File

@@ -34,7 +34,7 @@
} from '$lib/stores/ae_stores'; } from '$lib/stores/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores'; import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores';
import { posts_func } from '$lib/ae_posts/ae_posts_functions'; import { posts_func } from '$lib/ae_posts/ae_posts_functions';
import Tiptap_editor from '$lib/elements/element_codemirror_wrapper.svelte'; import CodeMirror_wrapper from '$lib/elements/element_codemirror_editor_wrapper.svelte';
let prom_api__post_comment_obj: any = $state(); let prom_api__post_comment_obj: any = $state();
@@ -486,7 +486,7 @@
Content (comment body): Content (comment body):
</span> </span>
<Tiptap_editor <CodeMirror_wrapper
bind:html_text={content_new_html} bind:html_text={content_new_html}
classes="bg-gray-100 dark:bg-gray-800" classes="bg-gray-100 dark:bg-gray-800"
placeholder="Your post content here..." placeholder="Your post content here..."

8
src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
View File

@@ -31,7 +31,7 @@
} from '$lib/stores/ae_stores'; } from '$lib/stores/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores'; import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores';
import { posts_func } from '$lib/ae_posts/ae_posts_functions'; import { posts_func } from '$lib/ae_posts/ae_posts_functions';
import Tiptap_editor from '$lib/elements/element_codemirror_wrapper.svelte'; import CodeMirror_wrapper from '$lib/elements/element_codemirror_editor_wrapper.svelte';
import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte'; import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
// let obj_changed = $state(false); // let obj_changed = $state(false);
@@ -480,13 +480,13 @@
<!-- <textarea name="content" id="content" class="ae_value post__content tinymce_editor editor_basic textarea" rows="5" cols="70" bind:value={$idaa_slct.post_obj.content} ></textarea> --> <!-- <textarea name="content" id="content" class="ae_value post__content tinymce_editor editor_basic textarea" rows="5" cols="70" bind:value={$idaa_slct.post_obj.content} ></textarea> -->
{#if $ae_loc.administrator_access} {#if $ae_loc.administrator_access}
<Tiptap_editor <CodeMirror_wrapper
bind:html_text={content_new_html} bind:html_text={content_new_html}
classes="preset-tonal-surface hover:preset-filled-surface-100-900" classes="preset-tonal-surface hover:preset-filled-surface-100-900"
placeholder="Your post content here..." placeholder="Your post content here..."
/> />
{:else} {:else}
<Tiptap_editor <CodeMirror_wrapper
default_minimal={true} default_minimal={true}
bind:html_text={content_new_html} bind:html_text={content_new_html}
show_button_kv={{ show_button_kv={{
@@ -1038,7 +1038,7 @@
<span class="legend text-sm font-semibold text-surface-600-400" <span class="legend text-sm font-semibold text-surface-600-400"
>Internal Staff Notes</span >Internal Staff Notes</span
> >
<Tiptap_editor <CodeMirror_wrapper
bind:html_text={notes_new_html} bind:html_text={notes_new_html}
classes="preset-tonal-surface hover:preset-filled-surface-100-900" classes="preset-tonal-surface hover:preset-filled-surface-100-900"
placeholder="Internal notes for staff only. Not shown to the public." placeholder="Internal notes for staff only. Not shown to the public."

8
src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
View File

@@ -32,7 +32,7 @@
} from '$lib/stores/ae_stores'; } from '$lib/stores/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct, idaa_trig } from '$lib/stores/ae_idaa_stores'; import { idaa_loc, idaa_sess, idaa_slct, idaa_trig } from '$lib/stores/ae_idaa_stores';
import { events_func } from '$lib/ae_events_functions'; import { events_func } from '$lib/ae_events_functions';
import Tiptap_editor from '$lib/elements/element_codemirror_wrapper.svelte'; import CodeMirror_wrapper from '$lib/elements/element_codemirror_editor_wrapper.svelte';
// export let container_class_li = []; // export let container_class_li = [];
@@ -932,7 +932,7 @@
<span class="text-lg text-neutral-500 font-semibold"> Short description </span> <span class="text-lg text-neutral-500 font-semibold"> Short description </span>
<!-- <textarea name="description" id="description" class="ae_value event__description tinymce_editor editor_basic textarea" rows="5" cols="70" bind:value={$idaa_slct.event_obj.description} ></textarea> --> <!-- <textarea name="description" id="description" class="ae_value event__description tinymce_editor editor_basic textarea" rows="5" cols="70" bind:value={$idaa_slct.event_obj.description} ></textarea> -->
<Tiptap_editor <CodeMirror_wrapper
bind:html_text={description_new_html} bind:html_text={description_new_html}
classes="preset-tonal-surface hover:preset-filled-surface-100-900 font-mono font-normal" classes="preset-tonal-surface hover:preset-filled-surface-100-900 font-mono font-normal"
placeholder="A short description or overview of this recovery meeting" placeholder="A short description or overview of this recovery meeting"
@@ -1310,7 +1310,7 @@
Additional information about the meeting location Additional information about the meeting location
</span> </span>
<!-- <textarea class="ae_value event__location_text tinymce_editor editor_less_100 textarea" id="location_text" name="location_text" placeholder="Additional information about the meeting location" rows="2" cols="70" bind:value={$idaa_slct.event_obj.location_text}></textarea> --> <!-- <textarea class="ae_value event__location_text tinymce_editor editor_less_100 textarea" id="location_text" name="location_text" placeholder="Additional information about the meeting location" rows="2" cols="70" bind:value={$idaa_slct.event_obj.location_text}></textarea> -->
<Tiptap_editor <CodeMirror_wrapper
bind:html_text={location_text_new_html} bind:html_text={location_text_new_html}
classes="preset-tonal-surface hover:preset-filled-surface-100-900" classes="preset-tonal-surface hover:preset-filled-surface-100-900"
placeholder="Additional information about the meeting location" placeholder="Additional information about the meeting location"
@@ -1779,7 +1779,7 @@
Additional information on how to attend Additional information on how to attend
</span> </span>
<!-- <textarea class="ae_value event__attend_text tinymce_editor editor_less_100 textarea" id="attend_text" name="attend_text" placeholder="Additional information on how to attend or join the meeting" rows="2" cols="70" value={$lq__event_obj?.attend_text ?? ''}></textarea> --> <!-- <textarea class="ae_value event__attend_text tinymce_editor editor_less_100 textarea" id="attend_text" name="attend_text" placeholder="Additional information on how to attend or join the meeting" rows="2" cols="70" value={$lq__event_obj?.attend_text ?? ''}></textarea> -->
<Tiptap_editor <CodeMirror_wrapper
bind:html_text={attend_text_new_html} bind:html_text={attend_text_new_html}
classes="preset-tonal-surface hover:preset-filled-surface-100-900" classes="preset-tonal-surface hover:preset-filled-surface-100-900"
placeholder="Additional information on how to attend or join the meeting" placeholder="Additional information on how to attend or join the meeting"