refactor: Rename CodeMirror wrapper and fix editor buttons

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.

src/lib/elements/codemirror_modules.ts

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

src/lib/elements/element_codemirror_editor.svelte

@@ -8,10 +8,11 @@
 
 let editor_container: HTMLDivElement;
 let editor_view: any;
+let cm: any; // Declare cm at the top level
 
 async function createEditor() {
 	if (!browser) return;
-        const cm = await ensureCodeMirrorModules();
+	cm = await ensureCodeMirrorModules(); // Assign to the top-level cm
 	if (!cm) return;
 
 	// 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.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.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);
@@ -112,7 +113,7 @@
 		const line = state.doc.lineAt(range.from);
 		return {
 			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);
@@ -122,9 +123,9 @@
 
 <div class="codemirror-wrapper border rounded">
     <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 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={() => 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"><i>I</i></button>
+        <button type="button" on:click={insertList} class="px-2 py-1 rounded hover:bg-gray-200">List</button>
     </div>
     <div bind:this={editor_container} class="h-full min-h-[150px] overflow-auto"></div>
 </div>

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

@@ -18,7 +18,7 @@
 	import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores';
 	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 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">
 					<span class="legend text-sm font-semibold"> Description </span>
-					<Tiptap_editor
+					                    <CodeMirror_wrapper
 											bind:html_text={description_new_html}
 											classes="preset-tonal-surface hover:preset-filled-surface-100-900"
 											placeholder="Your content description here..."
-					/>
-				</label>
+										/>				</label>
 			</div>
 
 			<!-- <label for="content_html">Content (HTML)
@@ -909,7 +908,7 @@
 						<span class="legend text-sm font-semibold text-surface-600-400"
 							>Internal Staff Notes</span
 						>
-						<Tiptap_editor
+						<CodeMirror_wrapper
 							bind:html_text={notes_new_html}
 							classes="preset-tonal-surface preset-filled-surface-100-900"
 							placeholder="Internal notes for staff only. Not shown to the public."

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

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

src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_comment_obj_id_edit.svelte

@@ -34,7 +34,7 @@
 } from '$lib/stores/ae_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 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();
 
@@ -486,7 +486,7 @@
 					Content (comment body):
 				</span>
 
-				<Tiptap_editor
+				<CodeMirror_wrapper
 					bind:html_text={content_new_html}
 					classes="bg-gray-100 dark:bg-gray-800"
 					placeholder="Your post content here..."

src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte

@@ -31,7 +31,7 @@
 } from '$lib/stores/ae_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 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';
 
 // 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> -->
 
 				{#if $ae_loc.administrator_access}
-					<Tiptap_editor
+					<CodeMirror_wrapper
 						bind:html_text={content_new_html}
 						classes="preset-tonal-surface hover:preset-filled-surface-100-900"
 						placeholder="Your post content here..."
 					/>
 				{:else}
-					<Tiptap_editor
+					<CodeMirror_wrapper
 						default_minimal={true}
 						bind:html_text={content_new_html}
 						show_button_kv={{
@@ -1038,7 +1038,7 @@
 						<span class="legend text-sm font-semibold text-surface-600-400"
 							>Internal Staff Notes</span
 						>
-						<Tiptap_editor
+						<CodeMirror_wrapper
 							bind:html_text={notes_new_html}
 							classes="preset-tonal-surface hover:preset-filled-surface-100-900"
 							placeholder="Internal notes for staff only. Not shown to the public."

src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte

@@ -32,7 +32,7 @@
 	} from '$lib/stores/ae_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 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 = [];
 
@@ -932,7 +932,7 @@
 				<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> -->
 
-				<Tiptap_editor
+				<CodeMirror_wrapper
 					bind:html_text={description_new_html}
 					classes="preset-tonal-surface hover:preset-filled-surface-100-900 font-mono font-normal"
 					placeholder="A short description or overview of this recovery meeting"
@@ -1310,7 +1310,7 @@
 					Additional information about the meeting location
 				</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> -->
-				<Tiptap_editor
+				<CodeMirror_wrapper
 					bind:html_text={location_text_new_html}
 					classes="preset-tonal-surface hover:preset-filled-surface-100-900"
 					placeholder="Additional information about the meeting location"
@@ -1779,7 +1779,7 @@
 					Additional information on how to attend
 				</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> -->
-				<Tiptap_editor
+				<CodeMirror_wrapper
 					bind:html_text={attend_text_new_html}
 					classes="preset-tonal-surface hover:preset-filled-surface-100-900"
 					placeholder="Additional information on how to attend or join the meeting"