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

refactor: consolidate CodeMirror editors into unified AE_Comp_Editor_CodeMirror component

Browse Source
This commit is contained in:
Scott Idem
2026-01-29 14:16:35 -05:00
parent 3d7b68e7ce
commit 363d94a36b
10 changed files with 323 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/ae_elements/AE_AITools.svelte
View File

@@ -12,7 +12,7 @@
RefreshCcw, Globe, Copy
} from '@lucide/svelte';
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
interface Props {
// Core Props
@@ -190,13 +190,12 @@
</button>
</div>
<E_app_codemirror_v5
editable={true}
<AE_Comp_Editor_CodeMirror
content={tmp_summary}
bind:new_content={tmp_summary}
bind:theme_mode={$ae_loc.theme_mode}
theme_mode={$ae_loc.theme_mode}
placeholder="AI Result will appear here..."
class="p-2 border rounded-lg h-96 shadow-inner bg-surface-500/5"
class_li="p-2 border rounded-lg h-96 shadow-inner bg-surface-500/5"
/>
</div>
{:else}

66
src/lib/ae_elements/AE_ObjectFlags.svelte → src/lib/ae_elements/AE_Object_Flags.svelte
View File

@@ -4,8 +4,8 @@
* GENERIC Aether Object Flags & Visibility Toggles
* Manages: alert, private, public, personal, professional, template
*/
import {
Siren, MessageSquareWarning, Fingerprint,
import {
Siren, MessageSquareWarning, Fingerprint,
Globe, BookHeart, BriefcaseBusiness, NotepadTextDashed,
Settings
} from '@lucide/svelte';
@@ -13,35 +13,35 @@
interface Props {
// The object containing the flags (bindable)
obj: any;
obj: any;
// Visibility configuration (optional overrides)
showLabels?: boolean;
hideAlert?: boolean;
hidePrivate?: boolean;
hidePublic?: boolean;
hidePersonal?: boolean;
hideProfessional?: boolean;
hideTemplate?: boolean;
show_labels?: boolean;
hide_alert?: boolean;
hide_private?: boolean;
hide_public?: boolean;
hide_personal?: boolean;
hide_professional?: boolean;
hide_template?: boolean;
// Callbacks
onToggle?: (prop: string, newValue: boolean) => void;
on_toggle?: (prop: string, newValue: boolean) => void;
// Styling
containerClass?: string;
container_class?: string;
}
let {
let {
obj = $bindable(),
showLabels = true,
hideAlert = false,
hidePrivate = false,
hidePublic = false,
hidePersonal = false,
hideProfessional = false,
hideTemplate = false,
onToggle,
containerClass = "flex flex-row flex-wrap gap-1 items-center justify-evenly py-2 border-y border-surface-500/10"
show_labels = true,
hide_alert: hide_alert = false,
hide_private: hide_private = false,
hide_public: hide_public = false,
hide_personal: hide_personal = false,
hide_professional: hide_professional = false,
hide_template: hide_template = false,
on_toggle: onToggle,
container_class = "flex flex-row flex-wrap gap-1 items-center justify-evenly py-2 border-y border-surface-500/10"
}: Props = $props();
function handle_toggle(prop: string) {
@@ -50,15 +50,15 @@
}
</script>
<div class={containerClass}>
{#if showLabels}
<div class={container_class}>
{#if show_labels}
<span class="text-xs text-surface-500 flex items-center gap-1 uppercase font-bold tracking-wider mr-2">
<Settings size="1.1em" /> Flags:
</span>
{/if}
<!-- Alert Status -->
{#if !hideAlert}
{#if !hide_alert}
<button
type="button"
onclick={() => handle_toggle('alert')}
@@ -70,7 +70,7 @@
{/if}
<!-- Private / E2EE -->
{#if !hidePrivate}
{#if !hide_private}
<button
type="button"
onclick={() => handle_toggle('private')}
@@ -82,7 +82,7 @@
{/if}
<!-- Public Visibility -->
{#if !hidePublic}
{#if !hide_public}
<button
type="button"
onclick={() => handle_toggle('public')}
@@ -94,7 +94,7 @@
{/if}
<!-- Personal Scope -->
{#if !hidePersonal}
{#if !hide_personal}
<button
type="button"
onclick={() => handle_toggle('personal')}
@@ -106,7 +106,7 @@
{/if}
<!-- Professional Scope -->
{#if !hideProfessional}
{#if !hide_professional}
<button
type="button"
onclick={() => handle_toggle('professional')}
@@ -118,7 +118,7 @@
{/if}
<!-- Template Status -->
{#if !hideTemplate && $ae_loc.edit_mode}
{#if !hide_template && $ae_loc.edit_mode}
<button
type="button"
onclick={() => handle_toggle('template')}

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

@@ -1,4 +1,6 @@
<script lang="ts">
// WARNING: This is deprecated. Do not use!
import { run } from 'svelte/legacy';
// This will be the wrapper for the CodeMirror editor. It should hide most of the configuration requirements.

241
src/lib/elements/AE_Comp_Editor_CodeMirror.svelte Normal file
View File

@@ -0,0 +1,241 @@
<script lang="ts">
/**
* AE_Comp_Editor_CodeMirror.svelte
* Consolidated CodeMirror 6 Editor for Aether Platform.
* Combines technical power with a user-friendly Markdown toolbar.
* Uses strictly snake_case and Svelte 5 Runes.
*/
import { onMount, onDestroy, untrack } from 'svelte';
import { browser } from '$app/environment';
import { ensureCodeMirrorModules } from './codemirror_modules';
import type { key_val } from '$lib/stores/ae_stores';
// Icons (Standardized to Lucide where possible, or FontAwesome placeholders)
import { Bold, Italic, List, Code, Maximize2 } from 'lucide-svelte';
interface Props {
content?: string;
new_content?: string;
placeholder?: string;
theme_mode?: 'light' | 'dark';
language?: 'markdown' | 'json' | 'html' | 'javascript';
readonly?: boolean;
show_line_numbers?: boolean;
wrap_lines?: boolean;
show_toolbar?: boolean;
editor_view?: any; // $bindable for external control
class_li?: string;
}
let {
content = $bindable(''),
new_content = $bindable(''),
placeholder = 'Start typing...',
theme_mode = 'light',
language = 'markdown',
readonly = false,
show_line_numbers = false,
wrap_lines = true,
show_toolbar = true,
editor_view = $bindable(),
class_li = ''
}: Props = $props();
let editor_container: HTMLDivElement | undefined = $state();
let cm: any = $state(); // CodeMirror modules cache
async function create_editor() {
if (!browser) return;
cm = await ensureCodeMirrorModules();
if (!cm) return;
// Cleanup existing instance if HMR or remount occurs
if (editor_view) {
editor_view.destroy();
editor_view = null;
}
const extensions = [
cm.highlightSpecialChars(),
cm.history(),
cm.drawSelection(),
cm.dropCursor(),
cm.EditorState_allowMultipleSelections.of(true),
cm.indentOnInput(),
cm.bracketMatching(),
cm.closeBrackets(),
cm.autocompletion(),
cm.rectangularSelection(),
cm.crosshairCursor(),
cm.highlightActiveLine(),
cm.highlightActiveLineGutter(),
// Keymaps
cm.keymap.of([
...cm.defaultKeymap,
...cm.searchKeymap,
...cm.historyKeymap,
...cm.foldKeymap,
...cm.completionKeymap,
...cm.lintKeymap
]),
// Language Support
language === 'markdown' ? cm.markdown({ base: cm.markdownLanguage }) : null,
language === 'json' ? cm.languages.find((l: any) => l.name === 'json')?.load() : null,
// Theme & Behavior
theme_mode === 'dark' ? cm.oneDark : cm.EditorView.baseTheme(),
cm.EditorView.contentAttributes.of({ spellcheck: 'true' }),
readonly ? cm.EditorState.readOnly.of(true) : cm.EditorView.editable.of(true),
show_line_numbers ? cm.lineNumbers() : null,
wrap_lines ? cm.EditorView_lineWrapping : null,
placeholder ? cm.placeholderExt(placeholder) : null,
// Sync back to Svelte
cm.EditorView.updateListener.of((update: any) => {
if (update.docChanged) {
const doc_str = update.state.doc.toString();
content = doc_str;
new_content = doc_str;
}
})
].filter(Boolean);
if (!editor_container) return;
editor_view = new cm.EditorView({
state: cm.EditorState.create({
doc: content ?? '',
extensions
}),
parent: editor_container as HTMLElement
});
}
// Initialize on mount
onMount(async () => {
await create_editor();
});
// Cleanup on destroy
onDestroy(() => {
if (editor_view) editor_view.destroy();
});
// Reactive update if content is changed from outside (e.g. API load)
$effect(() => {
if (editor_view && content !== editor_view.state.doc.toString()) {
untrack(() => {
editor_view.dispatch({
changes: { from: 0, to: editor_view.state.doc.length, insert: content || '' }
});
});
}
});
// *** Toolbar Helpers
const wrap_selection = (before: string, after: string = before) => {
if (!editor_view) return;
const state = editor_view.state;
const changes = state.changeByRange((range: any) => {
const is_wrapped =
state.sliceDoc(range.from - before.length, range.from) === before &&
state.sliceDoc(range.to, range.to + after.length) === after;
if (is_wrapped) {
return {
changes: [
{ from: range.from - before.length, to: range.from, insert: '' },
{ from: range.to, to: range.to + after.length, insert: '' }
],
range: cm.EditorSelection.range(
range.from - before.length,
range.to - before.length
)
};
}
return {
changes: [
{ from: range.from, insert: before },
{ from: range.to, insert: after }
],
range: cm.EditorSelection.range(
range.from + before.length,
range.to + before.length
)
};
});
editor_view.dispatch(changes);
editor_view.focus();
};
const toggle_list = () => {
if (!editor_view) return;
const state = editor_view.state;
const changes = state.changeByRange((range: any) => {
const line = state.doc.lineAt(range.from);
const has_list = line.text.startsWith('- ');
if (has_list) {
return {
changes: [{ from: line.from, to: line.from + 2, insert: '' }],
range: cm.EditorSelection.range(range.from - 2, range.to - 2)
};
}
return {
changes: [{ from: line.from, insert: '- ' }],
range: cm.EditorSelection.range(range.from + 2, range.to + 2)
};
});
editor_view.dispatch(changes);
editor_view.focus();
};
</script>
<div class="ae__comp__codemirror_editor flex flex-col border border-surface-500/20 rounded-container overflow-hidden h-full {class_li}">
{#if show_toolbar && !readonly}
<div class="toolbar flex flex-wrap gap-1 p-1 bg-surface-50 dark:bg-surface-900 border-b border-surface-500/20">
<button type="button" class="btn btn-sm variant-soft hover:variant-filled-primary" onclick={() => wrap_selection('**')} title="Bold">
<Bold size="14" />
</button>
<button type="button" class="btn btn-sm variant-soft hover:variant-filled-primary" onclick={() => wrap_selection('*')} title="Italic">
<Italic size="14" />
</button>
<button type="button" class="btn btn-sm variant-soft hover:variant-filled-primary" onclick={toggle_list} title="Bullet List">
<List size="14" />
</button>
<button type="button" class="btn btn-sm variant-soft hover:variant-filled-primary" onclick={() => wrap_selection('`')} title="Inline Code">
<Code size="14" />
</button>
<div class="ml-auto flex gap-1">
<span class="text-[10px] opacity-50 self-center uppercase font-bold mr-2">{language}</span>
</div>
</div>
{/if}
<div
bind:this={editor_container}
class="grow overflow-auto bg-white dark:bg-black/20"
style="min-height: 100px;"
></div>
</div>
<style lang="postcss">
.ae__comp__codemirror_editor :global(.cm-editor) {
height: 100%;
outline: none !important;
}
.ae__comp__codemirror_editor :global(.cm-scroller) {
font-family: theme('fontFamily.mono');
font-size: 0.875rem;
}
/* Hide the focus outline from CM6 default theme */
.ae__comp__codemirror_editor :global(.cm-focused) {
outline: none !important;
}
</style>

6
src/lib/elements/element_codemirror_editor_wrapper.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import ElementCodemirrorEditor from './element_codemirror_editor.svelte';
import AE_Comp_Editor_CodeMirror from './AE_Comp_Editor_CodeMirror.svelte';
import { browser } from '$app/environment';
interface Props {
@@ -17,10 +17,10 @@
<div class="block w-full h-full {classes}">
{#if browser}
<ElementCodemirrorEditor
class="p-1 transition-all duration-1000"
<AE_Comp_Editor_CodeMirror
bind:content={html_text}
{placeholder}
class_li="p-1 transition-all duration-1000"
/>
{:else}
<!-- server / prerender placeholder to avoid SSR loading CM -->

32
src/routes/events/[event_id]/settings/+page.svelte
View File

@@ -5,7 +5,7 @@
import { onMount } from 'svelte';
import { events_func } from '$lib/ae_events_functions';
import { ae_api } from '$lib/stores/ae_stores';
import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
import Ae_comp_event_settings_form from './ae_comp__event_settings_form.svelte';
import Ae_comp_event_settings_pres_mgmt_form from './ae_comp__event_settings_pres_mgmt_form.svelte';
import Ae_comp_event_settings_basic_form from './ae_comp__event_settings_basic_form.svelte';
@@ -84,14 +84,13 @@
onsave={(data: any) => handle_save('cfg_json', data)}
/>
{:else}
<E_app_codemirror_v5
editable={true}
<AE_Comp_Editor_CodeMirror
readonly={false}
content={JSON.stringify(event_obj.cfg_json, null, 4)}
bind:new_content={event_obj.cfg_json}
show_line_numbers={true}
placeholder="JSON config"
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
class_li="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
/>
<button
class="btn preset-tonal-primary"
@@ -120,14 +119,13 @@
onsave={(data: any) => handle_save('mod_pres_mgmt_json', data)}
/>
{:else}
<E_app_codemirror_v5
editable={true}
<AE_Comp_Editor_CodeMirror
readonly={false}
content={JSON.stringify(event_obj.mod_pres_mgmt_json, null, 4)}
bind:new_content={event_obj.mod_pres_mgmt_json}
show_line_numbers={true}
placeholder="JSON config"
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
class_li="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
/>
<button
class="btn preset-tonal-primary"
@@ -157,14 +155,13 @@
onsave={(data: any) => handle_save('mod_badges_json', data)}
/>
{:else}
<E_app_codemirror_v5
editable={true}
<AE_Comp_Editor_CodeMirror
readonly={false}
content={JSON.stringify(event_obj.mod_badges_json, null, 4)}
bind:new_content={event_obj.mod_badges_json}
show_line_numbers={true}
placeholder="JSON config"
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
class_li="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
/>
<button
class="btn preset-tonal-primary"
@@ -193,14 +190,13 @@
onsave={(data: any) => handle_save('mod_abstracts_json', data)}
/>
{:else}
<E_app_codemirror_v5
editable={true}
<AE_Comp_Editor_CodeMirror
readonly={false}
content={JSON.stringify(event_obj.mod_abstracts_json, null, 4)}
bind:new_content={event_obj.mod_abstracts_json}
show_line_numbers={true}
placeholder="JSON config"
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
class_li="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
/>
<button
class="btn preset-tonal-primary"
@@ -216,14 +212,13 @@
<details class="details">
<summary class="summary">Exhibits (mod_exhibits_json)</summary>
<div class="p-4">
<E_app_codemirror_v5
editable={true}
<AE_Comp_Editor_CodeMirror
readonly={false}
content={JSON.stringify(event_obj.mod_exhibits_json, null, 4)}
bind:new_content={event_obj.mod_exhibits_json}
show_line_numbers={true}
placeholder="JSON config"
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
class_li="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
/>
<button
class="btn preset-tonal-primary"
@@ -237,14 +232,13 @@
<details class="details">
<summary class="summary">Meetings (mod_meetings_json)</summary>
<div class="p-4">
<E_app_codemirror_v5
editable={true}
<AE_Comp_Editor_CodeMirror
readonly={false}
content={JSON.stringify(event_obj.mod_meetings_json, null, 4)}
bind:new_content={event_obj.mod_meetings_json}
show_line_numbers={true}
placeholder="JSON config"
class="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
class_li="p-1 preset-outlined-success-400-600 shadow-lg rounded-lg"
/>
<button
class="btn preset-tonal-primary"

11
src/routes/journals/ae_comp__journal_entry_editor.svelte
View File

@@ -7,7 +7,7 @@
import { LockKeyhole, Save, RefreshCcw } from 'lucide-svelte';
import { ae_loc } from '$lib/stores/ae_stores';
import { journals_loc, journals_sess } from '$lib/ae_journals/ae_journals_stores';
import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
interface Props {
@@ -73,13 +73,12 @@
{:else}
<!-- Actual Editor -->
{#if journal?.cfg_json?.pref_editor == 'codemirror'}
<E_app_codemirror_v5
content={tmp_entry_obj?.content ?? ''}
bind:new_content={tmp_entry_obj.content}
bind:editorView={editor_view}
<AE_Comp_Editor_CodeMirror
bind:content={tmp_entry_obj.content}
bind:editor_view={editor_view}
theme_mode={$ae_loc.theme_mode}
placeholder="Write using Markdown..."
class="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg w-full max-w-6xl bg-surface-50 dark:bg-surface-800"
class_li="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg w-full max-w-6xl bg-surface-50 dark:bg-surface-800"
/>
{:else}
<textarea

7
src/routes/journals/ae_comp__journal_obj_id_edit.svelte
View File

@@ -54,7 +54,7 @@
journals_slct
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
interface Props {
log_lvl?: number;
@@ -493,12 +493,11 @@
{:else if tab === 'json'}
<div class="h-full min-h-[400px]">
<E_app_codemirror_v5
editable={false}
<AE_Comp_Editor_CodeMirror
readonly={true}
content={JSON.stringify(tmp__journal_obj, null, 2)}
theme_mode={$ae_loc.theme_mode}
class="rounded-lg border border-surface-500/30"
class_li="rounded-lg border border-surface-500/30"
/>
</div>
{/if}

12
src/routes/journals/ae_comp__modal_journal_config.svelte
View File

@@ -30,7 +30,7 @@
journals_loc,
journals_sess
} from '$lib/ae_journals/ae_journals_stores';
import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
interface Props {
log_lvl?: number;
@@ -256,22 +256,20 @@
</div>
{:else if tab === 'local_json'}
<div class="h-full min-h-[400px]">
<E_app_codemirror_v5
editable={false}
<AE_Comp_Editor_CodeMirror
readonly={true}
content={JSON.stringify(tmp_config, null, 2)}
theme_mode={$ae_loc.theme_mode}
class="rounded-lg border border-surface-500/30"
class_li="rounded-lg border border-surface-500/30"
/>
</div>
{:else if tab === 'session_json'}
<div class="h-full min-h-[400px]">
<E_app_codemirror_v5
editable={false}
<AE_Comp_Editor_CodeMirror
readonly={true}
content={JSON.stringify($journals_sess, null, 2)}
theme_mode={$ae_loc.theme_mode}
class="rounded-lg border border-surface-500/30"
class_li="rounded-lg border border-surface-500/30"
/>
</div>
{/if}

29
src/routes/journals/ae_comp__modal_journal_entry_config.svelte
View File

@@ -28,8 +28,8 @@
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import { journals_loc, journals_sess } from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
import AE_ObjectFlags from '$lib/ae_elements/AE_ObjectFlags.svelte';
import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
import AE_Object_Flags from '$lib/ae_elements/AE_Object_Flags.svelte';
interface Props {
log_lvl?: number;
@@ -156,7 +156,7 @@
<h4 class="text-xs font-bold uppercase opacity-50">Quick Category</h4>
<div class="flex flex-wrap gap-2">
{#each journal?.cfg_json?.category_li ?? [] as cat}
<button
<button
class="btn btn-sm {tmp_entry_obj.category_code === cat.code ? 'variant-filled-primary' : 'variant-soft-primary'}"
onclick={() => { tmp_entry_obj.category_code = cat.code; handle_update_entry(); on_save(); }}
>
@@ -248,15 +248,15 @@
<section class="space-y-4">
<h4 class="text-xs font-bold uppercase opacity-50">Privacy Flags</h4>
<AE_ObjectFlags
bind:obj={tmp_entry_obj}
onToggle={() => { handle_update_entry(); on_save(); }}
hideAlert={journal?.cfg_json?.hide_btn_alert}
hidePrivate={journal?.cfg_json?.hide_btn_private}
hidePublic={journal?.cfg_json?.hide_btn_public}
hidePersonal={journal?.cfg_json?.hide_btn_personal}
hideProfessional={journal?.cfg_json?.hide_btn_professional}
hideTemplate={journal?.cfg_json?.hide_btn_template}
<AE_Object_Flags
bind:obj={tmp_entry_obj}
on_toggle={() => { handle_update_entry(); on_save(); }}
hide_alert={journal?.cfg_json?.hide_btn_alert}
hide_private={journal?.cfg_json?.hide_btn_private}
hide_public={journal?.cfg_json?.hide_btn_public}
hide_personal={journal?.cfg_json?.hide_btn_personal}
hide_professional={journal?.cfg_json?.hide_btn_professional}
hide_template={journal?.cfg_json?.hide_btn_template}
/>
</section>
@@ -283,12 +283,11 @@
{:else if tab === 'json'}
<div class="h-full min-h-[400px]">
<E_app_codemirror_v5
editable={false}
<AE_Comp_Editor_CodeMirror
readonly={true}
content={JSON.stringify(tmp_entry_obj, null, 2)}
theme_mode={$ae_loc.theme_mode}
class="rounded-lg border border-surface-500/30"
class_li="rounded-lg border border-surface-500/30"
/>
</div>
{/if}