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

style: Apply Prettier formatting

Browse Source 
Applied consistent code formatting across the project using Prettier, addressing minor style inconsistencies introduced in recent changes.
This commit is contained in:
Scott Idem
2025-11-18 14:25:21 -05:00
parent 691b20fd54
commit d678f97324
9 changed files with 981 additions and 946 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
GEMINI.md
View File

@@ -73,3 +73,14 @@ The rich text editor component, previously based on Tiptap (`shad-editor`), has
- **Wrapper Component Update:** The existing editor wrapper (`src/lib/elements/element_tiptap_editor.svelte`) was renamed to `src/lib/elements/element_codemirror_wrapper.svelte` and refactored to utilize the new CodeMirror component. Tiptap-specific logic and props were removed.
- **Component Usage Updates:** All Svelte components that previously imported and used the Tiptap wrapper were updated to import `element_codemirror_wrapper.svelte`. Unsupported props such as `default_minimal`, `show_button_kv`, `bind:new_html`, and `bind:changed` were removed from their usage.
- **Dependency Cleanup:** `npm install` was run to remove unneeded packages, and `npm run format` was executed to ensure consistent code style.
### CodeMirror Bug Fixes (2025-11-18)
Following the initial migration to CodeMirror, several issues were identified and resolved:
- **Initialization Errors:** An "Unrecognized extension value" error was fixed by refactoring `codemirror_modules.ts` to explicitly import individual CodeMirror extensions instead of relying on the `basicSetup` bundle. This ensures proper singleton usage and prevents module duplication.
- **Text Wrapping:** The `EditorView.lineWrapping` extension was added to `element_codemirror_editor.svelte` and `e_app_codemirror_v5.svelte` to enable text wrapping.
- **Content Saving:** Content binding issues were resolved in various IDAA components by correctly binding the `html_text` prop of the CodeMirror wrapper to the corresponding state variables.
- **Save Button Enablement:** The logic for enabling the "Save" button was fixed in `ae_idaa_comp__post_obj_id_edit.svelte` to correctly detect changes in the CodeMirror editor.
- **Editor Buttons:** A `TypeError` in the editor's formatting buttons was fixed by using `EditorSelection.range()` to correctly create selection ranges.
- **Component Renaming:** The `Tiptap_editor` component alias was renamed to `CodeMirror_wrapper` across the project for clarity, and the wrapper file was renamed to `element_codemirror_editor_wrapper.svelte`.

6
TODO.md
View File

@@ -49,7 +49,7 @@ This is a list of tasks to be completed before the next event/show/conference.
### 2. Component Standardization
- [ ] **CodeMirror Migration:** Plan and execute the replacement of the `shad-editor` and potentially other text editors (like Tiptap) with `CodeMirror` to standardize rich text editing.
- [x] **CodeMirror Migration:** Replaced all instances of the old Tiptap editor with a new CodeMirror wrapper. This includes fixing initialization errors, enabling text wrapping, and ensuring content is correctly saved.
- [ ] **Component Review:** Audit third-party components to understand their conventions and isolate them from internal standards.
---
@@ -83,7 +83,7 @@ These functions are frequently used and critical to the application's data flow.
---
- [ ] Improve the `e_app_codemirror_v5.svelte` component and plan the migration from Tiptap to CodeMirror for rich text editing.
- [x] Improve the `e_app_codemirror_v5.svelte` component and plan the migration from Tiptap to CodeMirror for rich text editing. The migration is complete, and the component has been improved to handle individual extensions and fix various bugs.
---
@@ -190,7 +190,7 @@ These functions are frequently used and critical to the application's data flow.
- [ ] **UI/UX:**
- [ ] Improve the UI for creating and editing posts and comments.
- [ ] Add a rich text editor for a better writing experience.
- [x] Add a rich text editor for a better writing experience.
- [ ] **Features:**
- [ ] Implement user-specific features, such as editing their own posts and comments.

5
src/lib/app_components/e_app_codemirror_v5.svelte
View File

@@ -63,7 +63,10 @@
...cm_modules.completionKeymap,
...cm_modules.lintKeymap
]),
cm_modules.markdown({ base: cm_modules.markdownLanguage, codeLanguages: cm_modules.languages }),
cm_modules.markdown({
base: cm_modules.markdownLanguage,
codeLanguages: cm_modules.languages
}),
theme_mode == 'dark' ? cm_modules.oneDark : cm_modules.EditorView.baseTheme(),
cm_modules.EditorView.contentAttributes.of({ spellcheck: 'true' }), // Enable spell check

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

@@ -1,23 +1,27 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment';
import { ensureCodeMirrorModules } from './codemirror_modules';
import { onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment';
import { ensureCodeMirrorModules } from './codemirror_modules';
export let content: string = '';
export let placeholder: string = 'Start typing...';
export let content: string = '';
export let placeholder: string = 'Start typing...';
let editor_container: HTMLDivElement;
let editor_view: any;
let cm: any; // Declare cm at the top level
let editor_container: HTMLDivElement;
let editor_view: any;
let cm: any; // Declare cm at the top level
async function createEditor() {
async function createEditor() {
if (!browser) return;
cm = await ensureCodeMirrorModules(); // Assign to the top-level cm
if (!cm) return;
// If an existing instance exists (HMR / remount), destroy it first
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;
}
@@ -48,9 +52,11 @@ async function createEditor() {
...cm.lintKeymap
]),
cm.markdown ? cm.markdown({ base: cm.markdownLanguage }) : null,
cm.EditorView && cm.EditorView.updateListener ? cm.EditorView.updateListener.of((update: any) => {
cm.EditorView && cm.EditorView.updateListener
? cm.EditorView.updateListener.of((update: any) => {
if (update.docChanged) content = update.state.doc.toString();
}) : null
})
: null
].filter(Boolean);
// Create editor
@@ -61,22 +67,26 @@ async function createEditor() {
}),
parent: editor_container
});
}
}
onMount(async () => {
onMount(async () => {
// ensure it's created only in browser and after modules resolved
await createEditor();
});
});
onDestroy(() => {
onDestroy(() => {
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;
}
});
});
// Helper functions using the live editor_view (unchanged)
const wrapSelection = (before: string, after: string = before) => {
// Helper functions using the live editor_view (unchanged)
const wrapSelection = (before: string, after: string = before) => {
if (!editor_view) return;
const state = editor_view.state;
const changes = state.changeByRange((range: any) => {
@@ -104,9 +114,9 @@ const wrapSelection = (before: string, after: string = before) => {
});
editor_view.dispatch(changes);
editor_view.focus();
};
};
const insertList = () => {
const insertList = () => {
if (!editor_view) return;
const state = editor_view.state;
const changes = state.changeByRange((range: any) => {
@@ -118,14 +128,24 @@ const insertList = () => {
});
editor_view.dispatch(changes);
editor_view.focus();
};
};
</script>
<div class="codemirror-wrapper border rounded">
<div class="toolbar p-1 bg-gray-100 border-b">
<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>
<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>

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

@@ -425,7 +425,8 @@
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)

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

@@ -1,29 +1,29 @@
<script lang="ts">
interface Props {
interface Props {
log_lvl?: number;
lq__post_obj: any;
// lq__post_comment_obj: any;
// lq__post_comment_obj_li?: any;
}
}
let {
let {
log_lvl = $bindable(1),
lq__post_obj
// lq__post_comment_obj,
// lq__post_comment_obj_li
}: Props = $props();
}: Props = $props();
// *** Import Svelte specific
import { fade } from 'svelte/transition';
// *** Import Svelte specific
import { fade } from 'svelte/transition';
// *** Import other supporting libraries
// *** Import other supporting libraries
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
// import { core_func } from '$lib/ae_core/ae_core_functions';
import { api } from '$lib/api/api';
import {
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
// import { core_func } from '$lib/ae_core/ae_core_functions';
import { api } from '$lib/api/api';
import {
ae_snip,
ae_loc,
ae_sess,
@@ -31,27 +31,27 @@ import {
ae_trig,
slct,
slct_trigger
} 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 CodeMirror_wrapper from '$lib/elements/element_codemirror_editor_wrapper.svelte';
} 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 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_changed = $state(false);
// let notes_new_html = $state('');
// let notes_changed = $state(false);
let disable_submit_btn = $state(false);
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);
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) {
event.preventDefault();
fn(event);
};
}
}
async function handle_submit_form(event: any) {
async function handle_submit_form(event: any) {
if (log_lvl > 1) {
console.log('*** handle_submit_form() ***', event.target);
}
@@ -257,16 +257,16 @@ async function handle_submit_form(event: any) {
return prom_api__post_comment_obj;
}
}
}
// Updated 2024-11-15
async function handle_delete_post_comment_obj({
// Updated 2024-11-15
async function handle_delete_post_comment_obj({
post_comment_id,
method = 'disable'
}: {
}: {
post_comment_id: string;
method?: string;
}) {
}) {
if (log_lvl) {
console.log('*** handle_delete_post_comment_obj() ***');
}
@@ -291,9 +291,9 @@ async function handle_delete_post_comment_obj({
});
return prom_api__post_comment_obj;
}
}
function send_staff_notification_email() {
function send_staff_notification_email() {
log_lvl = 1;
if (log_lvl) {
console.log(
@@ -348,9 +348,9 @@ Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${
subject: subject,
body_html: body_html
});
}
}
function send_poster_notification_email() {
function send_poster_notification_email() {
log_lvl = 1;
if (log_lvl) {
console.log(`*** send_poster_notification_email() *** Post ID: ${$idaa_slct.post_id}`);
@@ -384,13 +384,13 @@ Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${
subject: subject,
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?: any;
} = {}) {
} = {}) {
log_lvl = 1;
if (log_lvl) {
console.log(
@@ -426,7 +426,7 @@ Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${
subject: subject,
body_html: body_html
});
}
}
</script>
<section

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

@@ -1,26 +1,26 @@
<script lang="ts">
interface Props {
interface Props {
log_lvl?: number;
lq__post_obj: any;
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 { onDestroy, onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
// *** Import Svelte specific
// import { onDestroy, onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
// *** Import other supporting libraries
// *** Import other supporting libraries
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { core_func } from '$lib/ae_core/ae_core_functions';
import { api } from '$lib/api/api';
import {
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { core_func } from '$lib/ae_core/ae_core_functions';
import { api } from '$lib/api/api';
import {
ae_snip,
ae_loc,
ae_sess,
@@ -28,54 +28,54 @@ import {
ae_trig,
slct,
slct_trigger
} 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 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';
} 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 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);
// let orig_post_obj: any = $state(null);
// let orig_post_obj: any = $state({ ...$idaa_slct.post_obj }); // Create a copy of the post object
if (!$idaa_slct.post_obj) {
// let obj_changed = $state(false);
// let orig_post_obj: any = $state(null);
// let orig_post_obj: any = $state({ ...$idaa_slct.post_obj }); // Create a copy of the post object
if (!$idaa_slct.post_obj) {
$idaa_slct.post_obj = {};
}
// Create a copy of the post object
let orig_post_obj: any = { ...$idaa_slct.post_obj };
if (browser) {
}
// Create a copy of the post object
let orig_post_obj: any = { ...$idaa_slct.post_obj };
if (browser) {
// console.log(`$lq__post_obj = `, $lq__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
console.log(`orig_post_obj = `, 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.
$idaa_sess.bb.edit__post_obj = $idaa_loc.bb.edit__post_obj;
$idaa_loc.bb.edit__post_obj = false;
}
}
let ae_promises: key_val = $state({});
let prom_api__post_obj: any = $state();
// let prom_api__post_obj__hosted_file: any;
let ae_promises: key_val = $state({});
let prom_api__post_obj: any = $state();
// let prom_api__post_obj__hosted_file: any;
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);
let disable_submit_btn = $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);
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) {
event.preventDefault();
fn(event);
};
}
}
async function handle_submit_form(event: any) {
async function handle_submit_form(event: any) {
if (log_lvl > 1) {
console.log('*** handle_submit_form() ***', event.target);
}
@@ -241,16 +241,16 @@ async function handle_submit_form(event: any) {
return prom_api__post_obj;
}
}
}
// Updated 2024-11-15
async function handle_delete_post_obj({
// Updated 2024-11-15
async function handle_delete_post_obj({
post_id,
method = 'disable'
}: {
}: {
post_id: string;
method?: string;
}) {
}) {
if (log_lvl) {
console.log('*** handle_delete_post_obj() ***');
}
@@ -280,12 +280,12 @@ async function handle_delete_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_obj_li: any[]
) {
) {
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.
@@ -320,9 +320,9 @@ async function handle_hosted_files_uploaded(
console.log(error);
return false;
});
}
}
function send_staff_notification_email() {
function send_staff_notification_email() {
if (log_lvl) {
console.log(`*** send_staff_notification_email() *** Post ID: ${$idaa_slct.post_id}`);
}
@@ -361,9 +361,9 @@ Copy and paste link: <a href="${link_base_url}?post_id=${$idaa_slct.post_id}">${
subject: subject,
body_html: body_html
});
}
}
$effect(() => {
$effect(() => {
if (orig_post_obj === null || orig_post_obj === undefined || orig_post_obj === 'undefined') {
obj_changed = false;
} else if (
@@ -386,14 +386,14 @@ $effect(() => {
) {
obj_changed = false;
}
});
});
$effect(() => {
$effect(() => {
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);
upload_complete = false; // Reset the upload complete flag
}
});
});
</script>
<section