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,

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

@@ -1,17 +1,18 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { ensureCodeMirrorModules } from './codemirror_modules'; import { ensureCodeMirrorModules } from './codemirror_modules';
export let content: string = ''; export let content: string = '';
export let placeholder: string = 'Start typing...'; export let placeholder: string = 'Start typing...';
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
@@ -60,22 +61,22 @@
}), }),
parent: editor_container parent: editor_container
}); });
} }
onMount(async () => { onMount(async () => {
// ensure it's created only in browser and after modules resolved // ensure it's created only in browser and after modules resolved
await createEditor(); await createEditor();
}); });
onDestroy(() => { onDestroy(() => {
if (editor_view && typeof editor_view.destroy === 'function') { if (editor_view && typeof editor_view.destroy === 'function') {
try { editor_view.destroy(); } catch (e) { /* ignore */ } try { editor_view.destroy(); } catch (e) { /* ignore */ }
editor_view = null; editor_view = null;
} }
}); });
// Helper functions using the live editor_view (unchanged) // Helper functions using the live editor_view (unchanged)
const wrapSelection = (before: string, after: string = before) => { const wrapSelection = (before: string, after: string = before) => {
if (!editor_view) return; if (!editor_view) return;
const state = editor_view.state; const state = editor_view.state;
const changes = state.changeByRange((range: any) => { const changes = state.changeByRange((range: any) => {
@@ -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,33 +99,33 @@
{ 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);
editor_view.focus(); editor_view.focus();
}; };
const insertList = () => { const insertList = () => {
if (!editor_view) return; if (!editor_view) return;
const state = editor_view.state; const state = editor_view.state;
const changes = state.changeByRange((range: any) => { const changes = state.changeByRange((range: any) => {
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);
editor_view.focus(); editor_view.focus();
}; };
</script> </script>
<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."

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

@@ -1,29 +1,29 @@
<script lang="ts"> <script lang="ts">
interface Props { interface Props {
log_lvl?: number; log_lvl?: number;
lq__post_obj: any; lq__post_obj: any;
// lq__post_comment_obj: any; // lq__post_comment_obj: any;
// lq__post_comment_obj_li?: any; // lq__post_comment_obj_li?: any;
} }
let { let {
log_lvl = $bindable(1), log_lvl = $bindable(1),
lq__post_obj lq__post_obj
// lq__post_comment_obj, // lq__post_comment_obj,
// lq__post_comment_obj_li // lq__post_comment_obj_li
}: Props = $props(); }: Props = $props();
// *** Import Svelte specific // *** Import Svelte specific
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
// *** Import other supporting libraries // *** Import other supporting libraries
// *** Import Aether specific variables and functions // *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores'; import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils'; import { ae_util } from '$lib/ae_utils/ae_utils';
// import { core_func } from '$lib/ae_core/ae_core_functions'; // import { core_func } from '$lib/ae_core/ae_core_functions';
import { api } from '$lib/api/api'; import { api } from '$lib/api/api';
import { import {
ae_snip, ae_snip,
ae_loc, ae_loc,
ae_sess, ae_sess,
@@ -31,27 +31,27 @@
ae_trig, ae_trig,
slct, slct,
slct_trigger slct_trigger
} 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();
let content_new_html = $state($idaa_slct.post_comment_obj?.content ?? ''); let content_new_html = $state($idaa_slct.post_comment_obj?.content ?? '');
let content_changed = $state(false); let content_changed = $state(false);
// let notes_new_html = $state(''); // let notes_new_html = $state('');
// let notes_changed = $state(false); // let notes_changed = $state(false);
let disable_submit_btn = $state(false); let disable_submit_btn = $state(false);
function preventDefault<T extends Event>(fn: (event: T) => void) { function preventDefault<T extends Event>(fn: (event: T) => void) {
return function (event: T) { return function (event: T) {
event.preventDefault(); event.preventDefault();
fn(event); fn(event);
}; };
} }
async function handle_submit_form(event: any) { async function handle_submit_form(event: any) {
if (log_lvl > 1) { if (log_lvl > 1) {
console.log('*** handle_submit_form() ***', event.target); console.log('*** handle_submit_form() ***', event.target);
} }
@@ -257,16 +257,16 @@
return prom_api__post_comment_obj; return prom_api__post_comment_obj;
} }
} }
// Updated 2024-11-15 // Updated 2024-11-15
async function handle_delete_post_comment_obj({ async function handle_delete_post_comment_obj({
post_comment_id, post_comment_id,
method = 'disable' method = 'disable'
}: { }: {
post_comment_id: string; post_comment_id: string;
method?: string; method?: string;
}) { }) {
if (log_lvl) { if (log_lvl) {
console.log('*** handle_delete_post_comment_obj() ***'); console.log('*** handle_delete_post_comment_obj() ***');
} }
@@ -291,9 +291,9 @@
}); });
return prom_api__post_comment_obj; return prom_api__post_comment_obj;
} }
function send_staff_notification_email() { function send_staff_notification_email() {
log_lvl = 1; log_lvl = 1;
if (log_lvl) { if (log_lvl) {
console.log( console.log(
@@ -314,29 +314,29 @@
let subject = `IDAA BB Post Comment on: ${$idaa_slct.post_obj.title ?? '-- not set --'} (ID: ${$idaa_slct.post_id})`; let subject = `IDAA BB Post Comment on: ${$idaa_slct.post_obj.title ?? '-- not set --'} (ID: ${$idaa_slct.post_id})`;
let body_html = ` let body_html = `
<div>${$idaa_slct.post_obj.full_name}, <div>${$idaa_slct.post_obj.full_name},
<p>A BB post comment has been created or updated on the post named "${$idaa_slct.post_obj.title ?? '-- not set --'}".</p> <p>A BB post comment has been created or updated on the post named "${$idaa_slct.post_obj.title ?? '-- not set --'}".</p>
</div> </div>
<div> <div>
Commenter's Novi ID: ${$idaa_slct.post_comment_obj.external_person_id ?? '-- not set --'}<br> Commenter's Novi ID: ${$idaa_slct.post_comment_obj.external_person_id ?? '-- not set --'}<br>
Commenter's Name: ${$idaa_slct.post_comment_obj.full_name ?? '-- not set --'}<br> Commenter's Name: ${$idaa_slct.post_comment_obj.full_name ?? '-- not set --'}<br>
Commenter's Email: ${$idaa_slct.post_comment_obj.email ?? '-- not set --'} Commenter's Email: ${$idaa_slct.post_comment_obj.email ?? '-- not set --'}
</div> </div>
<div> <div>
Original Poster's Novi ID: ${$idaa_slct.post_obj.external_person_id ?? '-- not set --'}<br> Original Poster's Novi ID: ${$idaa_slct.post_obj.external_person_id ?? '-- not set --'}<br>
Original Poster's Name: ${$idaa_slct.post_obj.full_name ?? '-- not set --'}<br> Original Poster's Name: ${$idaa_slct.post_obj.full_name ?? '-- not set --'}<br>
Original Poster's Email: ${$idaa_slct.post_obj.email ?? '-- not set --'} Original Poster's Email: ${$idaa_slct.post_obj.email ?? '-- not set --'}
</div> </div>
<br> <br>
<div> <div>
IDAA BB Post ID: ${$idaa_slct.post_id}<br> IDAA BB Post ID: ${$idaa_slct.post_id}<br>
<p>Use this link to view the post.<br> <p>Use this link to view the post.<br>
Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${link_base_url}?post_id=${$idaa_slct.post_id}</a></p> Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${link_base_url}?post_id=${$idaa_slct.post_id}</a></p>
</div>`; </div>`;
api.send_email({ api.send_email({
api_cfg: $ae_api, api_cfg: $ae_api,
@@ -348,9 +348,9 @@
subject: subject, subject: subject,
body_html: body_html body_html: body_html
}); });
} }
function send_poster_notification_email() { function send_poster_notification_email() {
log_lvl = 1; log_lvl = 1;
if (log_lvl) { if (log_lvl) {
console.log(`*** send_poster_notification_email() *** Post ID: ${$idaa_slct.post_id}`); console.log(`*** send_poster_notification_email() *** Post ID: ${$idaa_slct.post_id}`);
@@ -361,17 +361,17 @@
let subject = `IDAA BB Post Comment on: ${$idaa_slct.post_obj.title ?? '-- not set --'} (ID: ${$idaa_slct.post_id})`; let subject = `IDAA BB Post Comment on: ${$idaa_slct.post_obj.title ?? '-- not set --'} (ID: ${$idaa_slct.post_id})`;
let body_html = ` let body_html = `
<div>${$idaa_slct.post_obj.full_name ?? '-- not set --'}, <div>${$idaa_slct.post_obj.full_name ?? '-- not set --'},
<p>Your BB post named "${$idaa_slct.post_obj.title ?? '-- not set --'}" has been commented on.</p> <p>Your BB post named "${$idaa_slct.post_obj.title ?? '-- not set --'}" has been commented on.</p>
</div> </div>
<br> <br>
<div> <div>
IDAA BB Post ID: ${$idaa_slct.post_id}<br> IDAA BB Post ID: ${$idaa_slct.post_id}<br>
<p>Use this link to view the post.<br> <p>Use this link to view the post.<br>
Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${link_base_url}?post_id=${$idaa_slct.post_id}</a></p> Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${link_base_url}?post_id=${$idaa_slct.post_id}</a></p>
</div>`; </div>`;
api.send_email({ api.send_email({
api_cfg: $ae_api, api_cfg: $ae_api,
@@ -384,13 +384,13 @@
subject: subject, subject: subject,
body_html: body_html body_html: body_html
}); });
} }
function send_poster_commenters_notification_email({ function send_poster_commenters_notification_email({
post_comment_obj = $idaa_slct.post_comment_obj post_comment_obj = $idaa_slct.post_comment_obj
}: { }: {
post_comment_obj?: any; post_comment_obj?: any;
} = {}) { } = {}) {
log_lvl = 1; log_lvl = 1;
if (log_lvl) { if (log_lvl) {
console.log( console.log(
@@ -403,17 +403,17 @@
let subject = `IDAA BB Post Comment on: ${$idaa_slct.post_obj.title ?? '-- not set --'} (ID: ${$idaa_slct.post_id})`; let subject = `IDAA BB Post Comment on: ${$idaa_slct.post_obj.title ?? '-- not set --'} (ID: ${$idaa_slct.post_id})`;
let body_html = ` let body_html = `
<div>${post_comment_obj.full_name ?? '-- not set --'}, <div>${post_comment_obj.full_name ?? '-- not set --'},
<p>The BB post named "${$idaa_slct.post_obj.title ?? '-- not set --'}" has been commented on.</p> <p>The BB post named "${$idaa_slct.post_obj.title ?? '-- not set --'}" has been commented on.</p>
</div> </div>
<br> <br>
<div> <div>
IDAA BB Post ID: ${$idaa_slct.post_id}<br> IDAA BB Post ID: ${$idaa_slct.post_id}<br>
<p>Use this link to view the post.<br> <p>Use this link to view the post.<br>
Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${link_base_url}?post_id=${$idaa_slct.post_id}</a></p> Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${link_base_url}?post_id=${$idaa_slct.post_id}</a></p>
</div>`; </div>`;
api.send_email({ api.send_email({
api_cfg: $ae_api, api_cfg: $ae_api,
@@ -426,7 +426,7 @@
subject: subject, subject: subject,
body_html: body_html body_html: body_html
}); });
} }
</script> </script>
<section <section
@@ -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..."

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

@@ -1,26 +1,26 @@
<script lang="ts"> <script lang="ts">
interface Props { interface Props {
log_lvl?: number; log_lvl?: number;
lq__post_obj: any; lq__post_obj: any;
obj_changed: boolean; obj_changed: boolean;
} }
let { log_lvl = $bindable(0), lq__post_obj, obj_changed = $bindable(false) }: Props = $props(); let { log_lvl = $bindable(0), lq__post_obj, obj_changed = $bindable(false) }: Props = $props();
// *** Import Svelte specific // *** Import Svelte specific
// import { onDestroy, onMount } from 'svelte'; // import { onDestroy, onMount } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
// *** Import other supporting libraries // *** Import other supporting libraries
// *** Import Aether specific variables and functions // *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores'; import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils'; import { ae_util } from '$lib/ae_utils/ae_utils';
import { core_func } from '$lib/ae_core/ae_core_functions'; import { core_func } from '$lib/ae_core/ae_core_functions';
import { api } from '$lib/api/api'; import { api } from '$lib/api/api';
import { import {
ae_snip, ae_snip,
ae_loc, ae_loc,
ae_sess, ae_sess,
@@ -28,54 +28,54 @@
ae_trig, ae_trig,
slct, slct,
slct_trigger slct_trigger
} 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);
// let orig_post_obj: any = $state(null); // let orig_post_obj: any = $state(null);
// let orig_post_obj: any = $state({ ...$idaa_slct.post_obj }); // Create a copy of the post object // let orig_post_obj: any = $state({ ...$idaa_slct.post_obj }); // Create a copy of the post object
if (!$idaa_slct.post_obj) { if (!$idaa_slct.post_obj) {
$idaa_slct.post_obj = {}; $idaa_slct.post_obj = {};
} }
// Create a copy of the post object // Create a copy of the post object
let orig_post_obj: any = { ...$idaa_slct.post_obj }; let orig_post_obj: any = { ...$idaa_slct.post_obj };
if (browser) { if (browser) {
// console.log(`$lq__post_obj = `, $lq__post_obj); // console.log(`$lq__post_obj = `, $lq__post_obj);
console.log(`$idaa_slct.post_obj = `, $idaa_slct.post_obj); console.log(`$idaa_slct.post_obj = `, $idaa_slct.post_obj);
// orig_post_obj = { ...$idaa_slct.post_obj }; // Create a copy of the post object // orig_post_obj = { ...$idaa_slct.post_obj }; // Create a copy of the post object
console.log(`orig_post_obj = `, orig_post_obj); console.log(`orig_post_obj = `, orig_post_obj);
// JSON.stringify($idaa_slct.post_obj) !== JSON.stringify(orig_post_obj) // JSON.stringify($idaa_slct.post_obj) !== JSON.stringify(orig_post_obj)
} }
if ($idaa_loc.bb.edit__post_obj) { if ($idaa_loc.bb.edit__post_obj) {
obj_changed = true; // This is an odd workaround to make new posts saveable. obj_changed = true; // This is an odd workaround to make new posts saveable.
$idaa_sess.bb.edit__post_obj = $idaa_loc.bb.edit__post_obj; $idaa_sess.bb.edit__post_obj = $idaa_loc.bb.edit__post_obj;
$idaa_loc.bb.edit__post_obj = false; $idaa_loc.bb.edit__post_obj = false;
} }
let ae_promises: key_val = $state({}); let ae_promises: key_val = $state({});
let prom_api__post_obj: any = $state(); let prom_api__post_obj: any = $state();
// let prom_api__post_obj__hosted_file: any; // let prom_api__post_obj__hosted_file: any;
let content_new_html = $state($idaa_slct.post_obj?.content ?? ''); let content_new_html = $state($idaa_slct.post_obj?.content ?? '');
let notes_new_html = $state($idaa_slct.post_obj?.notes ?? ''); let notes_new_html = $state($idaa_slct.post_obj?.notes ?? '');
let hosted_file_id_li = $state<string[]>([]); // Array of hosted file IDs let hosted_file_id_li = $state<string[]>([]); // Array of hosted file IDs
let hosted_file_obj_li = $state<any[]>([]); // Array of hosted file objects let hosted_file_obj_li = $state<any[]>([]); // Array of hosted file objects
let upload_complete = $state(false); let upload_complete = $state(false);
let disable_submit_btn = $state(false); let disable_submit_btn = $state(false);
function preventDefault<T extends Event>(fn: (event: T) => void) { function preventDefault<T extends Event>(fn: (event: T) => void) {
return function (event: T) { return function (event: T) {
event.preventDefault(); event.preventDefault();
fn(event); fn(event);
}; };
} }
async function handle_submit_form(event: any) { async function handle_submit_form(event: any) {
if (log_lvl > 1) { if (log_lvl > 1) {
console.log('*** handle_submit_form() ***', event.target); console.log('*** handle_submit_form() ***', event.target);
} }
@@ -241,16 +241,16 @@
return prom_api__post_obj; return prom_api__post_obj;
} }
} }
// Updated 2024-11-15 // Updated 2024-11-15
async function handle_delete_post_obj({ async function handle_delete_post_obj({
post_id, post_id,
method = 'disable' method = 'disable'
}: { }: {
post_id: string; post_id: string;
method?: string; method?: string;
}) { }) {
if (log_lvl) { if (log_lvl) {
console.log('*** handle_delete_post_obj() ***'); console.log('*** handle_delete_post_obj() ***');
} }
@@ -280,12 +280,12 @@
}); });
return prom_api__post_obj; return prom_api__post_obj;
} }
async function handle_hosted_files_uploaded( async function handle_hosted_files_uploaded(
hosted_file_id_li: string[], hosted_file_id_li: string[],
hosted_file_obj_li: any[] hosted_file_obj_li: any[]
) { ) {
console.log(`*** handle_hosted_files_uploaded() *** ${hosted_file_id_li}`); console.log(`*** handle_hosted_files_uploaded() *** ${hosted_file_id_li}`);
// NOTE: No longer directly updating the $idaa_slct.post_obj.hosted_file_obj_li. This will be updated when the PATCH API for Post update finishes. // NOTE: No longer directly updating the $idaa_slct.post_obj.hosted_file_obj_li. This will be updated when the PATCH API for Post update finishes.
@@ -320,9 +320,9 @@
console.log(error); console.log(error);
return false; return false;
}); });
} }
function send_staff_notification_email() { function send_staff_notification_email() {
if (log_lvl) { if (log_lvl) {
console.log(`*** send_staff_notification_email() *** Post ID: ${$idaa_slct.post_id}`); console.log(`*** send_staff_notification_email() *** Post ID: ${$idaa_slct.post_id}`);
} }
@@ -332,23 +332,23 @@
let subject = `IDAA BB Post: ${$idaa_slct.post_obj.title} (ID: ${$idaa_slct.post_id})`; let subject = `IDAA BB Post: ${$idaa_slct.post_obj.title} (ID: ${$idaa_slct.post_id})`;
let body_html = ` let body_html = `
<div>${$idaa_slct.post_obj.full_name ?? '-- not set --'}, <div>${$idaa_slct.post_obj.full_name ?? '-- not set --'},
<p>A BB post has been created or updated named "${$idaa_slct.post_obj.title}".</p> <p>A BB post has been created or updated named "${$idaa_slct.post_obj.title}".</p>
</div> </div>
<div> <div>
Poster's Novi ID: ${$idaa_slct.post_obj.external_person_id ?? '-- not set --'}<br> Poster's Novi ID: ${$idaa_slct.post_obj.external_person_id ?? '-- not set --'}<br>
Poster's Name: ${$idaa_slct.post_obj.full_name ?? '-- not set --'}<br> Poster's Name: ${$idaa_slct.post_obj.full_name ?? '-- not set --'}<br>
Poster's Email: ${$idaa_slct.post_obj.email ?? '-- not set --'} Poster's Email: ${$idaa_slct.post_obj.email ?? '-- not set --'}
</div> </div>
<br> <br>
<div> <div>
IDAA BB Post ID: ${$idaa_slct.post_id}<br> IDAA BB Post ID: ${$idaa_slct.post_id}<br>
<p>Use this link to view the post.<br> <p>Use this link to view the post.<br>
Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${link_base_url}?post_id=${$idaa_slct.post_id}</a></p> Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${link_base_url}?post_id=${$idaa_slct.post_id}</a></p>
</div>`; </div>`;
api.send_email({ api.send_email({
api_cfg: $ae_api, api_cfg: $ae_api,
@@ -361,9 +361,9 @@
subject: subject, subject: subject,
body_html: body_html body_html: body_html
}); });
} }
$effect(() => { $effect(() => {
if (orig_post_obj === null || orig_post_obj === undefined || orig_post_obj === 'undefined') { if (orig_post_obj === null || orig_post_obj === undefined || orig_post_obj === 'undefined') {
obj_changed = false; obj_changed = false;
} else if ( } else if (
@@ -386,14 +386,14 @@
) { ) {
obj_changed = false; obj_changed = false;
} }
}); });
$effect(() => { $effect(() => {
if (upload_complete && hosted_file_id_li?.length && hosted_file_obj_li?.length) { if (upload_complete && hosted_file_id_li?.length && hosted_file_obj_li?.length) {
handle_hosted_files_uploaded(hosted_file_id_li, hosted_file_obj_li); handle_hosted_files_uploaded(hosted_file_id_li, hosted_file_obj_li);
upload_complete = false; // Reset the upload complete flag upload_complete = false; // Reset the upload complete flag
} }
}); });
</script> </script>
<section <section
@@ -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"