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
169
src/lib/elements/codemirror_modules.ts
Normal file
169
src/lib/elements/codemirror_modules.ts
Normal file
@@ -0,0 +1,169 @@
|
||||
let _cmCache: {
|
||||
EditorView?: any;
|
||||
EditorState?: any;
|
||||
basicSetup?: any;
|
||||
markdown?: any;
|
||||
markdownLanguage?: any;
|
||||
keymap?: any;
|
||||
defaultKeymap?: any;
|
||||
history?: any;
|
||||
historyKeymap?: any;
|
||||
lineNumbers?: any;
|
||||
highlightSpecialChars?: any;
|
||||
drawSelection?: any;
|
||||
dropCursor?: any;
|
||||
rectangularSelection?: any;
|
||||
crosshairCursor?: any;
|
||||
highlightActiveLine?: any;
|
||||
highlightActiveLineGutter?: any;
|
||||
indentWithTab?: any;
|
||||
indentUnit?: any;
|
||||
autocompletion?: any;
|
||||
completionKeymap?: any;
|
||||
closeBrackets?: any;
|
||||
closeBracketsKeymap?: any;
|
||||
searchKeymap?: any;
|
||||
highlightSelectionMatches?: any;
|
||||
lintKeymap?: any;
|
||||
EditorState_allowMultipleSelections?: any;
|
||||
EditorView_lineWrapping?: any;
|
||||
EditorView_editable?: any;
|
||||
EditorView_contentAttributes?: any;
|
||||
bracketMatching?: any;
|
||||
foldGutter?: any;
|
||||
foldKeymap?: any;
|
||||
indentOnInput?: any;
|
||||
languages?: any;
|
||||
oneDark?: any;
|
||||
placeholderExt?: any;
|
||||
} | null = null;
|
||||
|
||||
// ...existing code...
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
type CMCache = {
|
||||
EditorView: any;
|
||||
EditorState: any;
|
||||
basicSetup?: any;
|
||||
markdown?: any;
|
||||
markdownLanguage?: any;
|
||||
keymap?: any;
|
||||
defaultKeymap?: any;
|
||||
history?: any;
|
||||
historyKeymap?: any;
|
||||
lineNumbers?: any;
|
||||
highlightSpecialChars?: any;
|
||||
drawSelection?: any;
|
||||
dropCursor?: any;
|
||||
rectangularSelection?: any;
|
||||
crosshairCursor?: any;
|
||||
highlightActiveLine?: any;
|
||||
highlightActiveLineGutter?: any;
|
||||
indentWithTab?: any;
|
||||
indentUnit?: any;
|
||||
autocompletion?: any;
|
||||
completionKeymap?: any;
|
||||
closeBrackets?: any;
|
||||
closeBracketsKeymap?: any;
|
||||
searchKeymap?: any;
|
||||
highlightSelectionMatches?: any;
|
||||
lintKeymap?: any;
|
||||
EditorState_allowMultipleSelections?: any;
|
||||
EditorView_lineWrapping?: any;
|
||||
EditorView_editable?: any;
|
||||
EditorView_contentAttributes?: any;
|
||||
bracketMatching?: any;
|
||||
foldGutter?: any;
|
||||
foldKeymap?: any;
|
||||
indentOnInput?: any;
|
||||
languages?: any;
|
||||
oneDark?: any;
|
||||
placeholderExt?: any;
|
||||
} | null;
|
||||
|
||||
const GLOBAL_KEY = '__cm_singleton_modules_v1';
|
||||
|
||||
export async function ensureCodeMirrorModules(): Promise<CMCache> {
|
||||
if (!browser) return null;
|
||||
|
||||
// Use a single global object so HMR/multiple module copies reuse same instance
|
||||
const globalAny = globalThis as any;
|
||||
if (globalAny[GLOBAL_KEY]) return globalAny[GLOBAL_KEY] as CMCache;
|
||||
|
||||
const [
|
||||
viewMod,
|
||||
stateMod,
|
||||
basicSetupMod,
|
||||
markdownMod,
|
||||
commandsMod,
|
||||
languageMod,
|
||||
autocompleteMod,
|
||||
searchMod,
|
||||
lintMod,
|
||||
themeOneDarkMod
|
||||
] = await Promise.all([
|
||||
import('@codemirror/view'),
|
||||
import('@codemirror/state'),
|
||||
import('@codemirror/basic-setup'),
|
||||
import('@codemirror/lang-markdown'),
|
||||
import('@codemirror/commands'),
|
||||
import('@codemirror/language'),
|
||||
import('@codemirror/autocomplete'),
|
||||
import('@codemirror/search'),
|
||||
import('@codemirror/lint'),
|
||||
import('@codemirror/theme-one-dark')
|
||||
]);
|
||||
|
||||
const cache: CMCache = {
|
||||
EditorView: viewMod.EditorView,
|
||||
keymap: viewMod.keymap,
|
||||
lineNumbers: viewMod.lineNumbers,
|
||||
highlightSpecialChars: viewMod.highlightSpecialChars,
|
||||
drawSelection: viewMod.drawSelection,
|
||||
dropCursor: viewMod.dropCursor,
|
||||
rectangularSelection: viewMod.rectangularSelection,
|
||||
crosshairCursor: viewMod.crosshairCursor,
|
||||
highlightActiveLine: viewMod.highlightActiveLine,
|
||||
highlightActiveLineGutter: viewMod.highlightActiveLineGutter,
|
||||
EditorView_lineWrapping: viewMod.EditorView.lineWrapping,
|
||||
EditorView_editable: viewMod.EditorView.editable,
|
||||
EditorView_contentAttributes: viewMod.EditorView.contentAttributes,
|
||||
placeholderExt: viewMod.placeholder,
|
||||
|
||||
EditorState: stateMod.EditorState,
|
||||
EditorState_allowMultipleSelections: stateMod.EditorState.allowMultipleSelections,
|
||||
EditorState_readOnly: stateMod.EditorState.readOnly,
|
||||
|
||||
basicSetup: basicSetupMod?.basicSetup,
|
||||
|
||||
markdown: markdownMod?.markdown,
|
||||
markdownLanguage: markdownMod?.markdownLanguage,
|
||||
languages: languageMod?.languages, // From @codemirror/language-data, often re-exported by @codemirror/language
|
||||
|
||||
defaultKeymap: (commandsMod && commandsMod.defaultKeymap) || [],
|
||||
history: commandsMod?.history,
|
||||
historyKeymap: commandsMod?.historyKeymap || [],
|
||||
indentWithTab: commandsMod?.indentWithTab,
|
||||
|
||||
indentUnit: languageMod?.indentUnit,
|
||||
indentOnInput: languageMod?.indentOnInput,
|
||||
bracketMatching: languageMod?.bracketMatching,
|
||||
foldGutter: languageMod?.foldGutter,
|
||||
foldKeymap: languageMod?.foldKeymap,
|
||||
|
||||
autocompletion: autocompleteMod?.autocompletion,
|
||||
completionKeymap: autocompleteMod?.completionKeymap,
|
||||
closeBrackets: autocompleteMod?.closeBrackets,
|
||||
closeBracketsKeymap: autocompleteMod?.closeBracketsKeymap,
|
||||
|
||||
searchKeymap: searchMod?.searchKeymap,
|
||||
highlightSelectionMatches: searchMod?.highlightSelectionMatches,
|
||||
|
||||
lintKeymap: lintMod?.lintKeymap,
|
||||
|
||||
oneDark: themeOneDarkMod?.oneDark
|
||||
};
|
||||
|
||||
globalAny[GLOBAL_KEY] = cache;
|
||||
return cache;
|
||||
}
|
||||
Reference in New Issue
Block a user