feat: CodeMirror integration and bug fixes

This commit addresses several issues related to the migration from TipTap to CodeMirror:

- **CodeMirror Initialization Fixes:**
  - Resolved 'Unrecognized extension value' errors by refactoring  to explicitly import individual CodeMirror extensions instead of relying on . This ensures proper singleton usage and prevents module duplication issues.
  - Updated  and  to utilize these individual extensions.

- **Text Wrapping Enabled:**
  - Added  to the extensions in  and  to enable text wrapping in the CodeMirror editors.

- **Content Saving Fixes:**
  - Corrected content binding for CodeMirror editor instances in various IDAA components:
    -  (description, location_text, attend_text)
    -  (content, notes)
    -  (content)
    -  (description, notes)
    -  (description, notes)
  - Ensured that the  prop of  is correctly bound to the respective state variables in the parent components, and these state variables are initialized with existing content.

- **Save Button Enablement:**
  - Fixed an issue in  where the Save button was not enabling on content changes. The  logic now directly compares the  and  with the original object's content, ensuring reactivity.
This commit is contained in:
Scott Idem
2025-11-18 13:27:42 -05:00
parent e521bea448
commit 95412dd0ad
13 changed files with 540 additions and 337 deletions

View File

@@ -36,9 +36,9 @@
let prom_api__archive_content_obj: any = $state();
let prom_api__archive_content_obj__hosted_file: any = $state();
let description_new_html = $state('');
let description_new_html = $state($idaa_slct.archive_content_obj?.description ?? '');
let description_changed = $state(false);
let notes_new_html = $state('');
let notes_new_html = $state($idaa_slct.archive_content_obj?.notes ?? '');
let notes_changed = $state(false);
let disable_submit_btn = $state(false);
@@ -422,7 +422,7 @@
<label for="description" class="ae_label w-full">
<span class="legend text-sm font-semibold"> Description </span>
<Tiptap_editor
html_text={$idaa_slct.archive_content_obj.description}
bind:html_text={description_new_html}
classes="preset-tonal-surface hover:preset-filled-surface-100-900"
placeholder="Your content description here..."
/>
@@ -910,7 +910,7 @@
>Internal Staff Notes</span
>
<Tiptap_editor
html_text={$idaa_slct.archive_content_obj.notes}
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."
/>

View File

@@ -35,9 +35,9 @@
let prom_api__archive_obj: any;
let prom_api__archive_obj__hosted_file: any;
let description_new_html = $state('');
let description_new_html = $state($idaa_slct.archive_obj?.description ?? '');
let description_changed = $state(false);
let notes_new_html = $state('');
let notes_new_html = $state($idaa_slct.archive_obj?.notes ?? '');
let notes_changed = $state(false);
let disable_submit_btn = true;
@@ -339,7 +339,7 @@
<label for="description" class="ae_label w-full">
<span class="legend text-sm font-semibold"> Description </span>
<Tiptap_editor
html_text={$idaa_slct.archive_obj.description}
bind:html_text={description_new_html}
classes="preset-tonal-surface hover:preset-filled-surface-100-900"
placeholder="Your archive description here..."
/>
@@ -678,7 +678,7 @@
>Internal Staff Notes</span
>
<Tiptap_editor
html_text={$idaa_slct.archive_obj.notes}
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."
/>

View File

@@ -38,7 +38,7 @@
let prom_api__post_comment_obj: any = $state();
let content_new_html = $state('');
let content_new_html = $state($idaa_slct.post_comment_obj?.content ?? '');
let content_changed = $state(false);
// let notes_new_html = $state('');
// let notes_changed = $state(false);
@@ -487,7 +487,7 @@
</span>
<Tiptap_editor
html_text={$idaa_slct.post_comment_obj?.content}
bind:html_text={content_new_html}
classes="bg-gray-100 dark:bg-gray-800"
placeholder="Your post content here..."
/>

View File

@@ -61,10 +61,8 @@
let prom_api__post_obj: any = $state();
// let prom_api__post_obj__hosted_file: any;
let content_new_html = $state('');
let content_changed = $state(false);
let notes_new_html = $state('');
let notes_changed = $state(false);
let content_new_html = $state($idaa_slct.post_obj?.content ?? '');
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_obj_li = $state<any[]>([]); // Array of hosted file objects
let upload_complete = $state(false);
@@ -372,8 +370,8 @@
!obj_changed &&
orig_post_obj?.id &&
(JSON.stringify($idaa_slct.post_obj) !== JSON.stringify(orig_post_obj) ||
content_changed ||
notes_changed)
content_new_html !== (orig_post_obj.content ?? '') ||
notes_new_html !== (orig_post_obj.notes ?? ''))
) {
// console.log('Post object has changed from original.', $inspect(orig_post_obj));
console.log('Post object has changed from original.', orig_post_obj);
@@ -383,8 +381,8 @@
obj_changed &&
orig_post_obj?.id &&
JSON.stringify($idaa_slct.post_obj) === JSON.stringify(orig_post_obj) &&
!content_changed &&
!notes_changed
content_new_html === (orig_post_obj.content ?? '') &&
notes_new_html === (orig_post_obj.notes ?? '')
) {
obj_changed = false;
}
@@ -483,14 +481,14 @@
{#if $ae_loc.administrator_access}
<Tiptap_editor
html_text={$idaa_slct.post_obj?.content}
bind:html_text={content_new_html}
classes="preset-tonal-surface hover:preset-filled-surface-100-900"
placeholder="Your post content here..."
/>
{:else}
<Tiptap_editor
default_minimal={true}
html_text={$idaa_slct.post_obj?.content}
bind:html_text={content_new_html}
show_button_kv={{
// text: true,
// bullet_list: true,
@@ -498,8 +496,6 @@
// link: true,
// unset_link: true
}}
bind:new_html={content_new_html}
bind:changed={content_changed}
classes="preset-tonal-surface hover:preset-filled-surface-100-900"
placeholder="Your post content here..."
/>
@@ -1043,7 +1039,7 @@
>Internal Staff Notes</span
>
<Tiptap_editor
html_text={$idaa_slct.post_obj.notes}
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."
/>

View File

@@ -57,15 +57,15 @@
let prom_api__event_obj: any = $state();
let description_new_html = $state('');
let description_new_html = $state($idaa_slct.event_obj?.description ?? '');
let description_changed = $state(false);
let location_text_new_html = $state('');
let location_text_new_html = $state($idaa_slct.event_obj?.location_text ?? '');
let location_text_changed = $state(false);
let attend_text_new_html = $state('');
let attend_text_new_html = $state($idaa_slct.event_obj?.attend_text ?? '');
let attend_text_changed = $state(false);
let recurring_text_new_html = $state('');
let recurring_text_new_html = $state($idaa_slct.event_obj?.recurring_text ?? '');
let recurring_text_changed = $state(false);
let notes_new_html = $state('');
let notes_new_html = $state($idaa_slct.event_obj?.notes ?? '');
let notes_changed = $state(false);
let disable_submit_btn = $state(true);
@@ -933,7 +933,7 @@
<!-- <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
html_text={$idaa_slct.event_obj?.description}
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"
/>
@@ -1311,7 +1311,7 @@
</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
html_text={$idaa_slct.event_obj?.location_text}
bind:html_text={location_text_new_html}
classes="preset-tonal-surface hover:preset-filled-surface-100-900"
placeholder="Additional information about the meeting location"
/>
@@ -1780,7 +1780,7 @@
</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
html_text={$idaa_slct.event_obj?.attend_text}
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"
/>