style: Apply Prettier formatting
Applied consistent code formatting across the project using Prettier, addressing minor style inconsistencies introduced in recent changes.
This commit is contained in:
Scott Idem
@@ -38,7 +38,7 @@
|
||||
cm_modules = await ensureCodeMirrorModules();
|
||||
if (!cm_modules) return;
|
||||
|
||||
// Reactive declaration for extensions
|
||||
// Reactive declaration for extensions
|
||||
let editor_extensions = [
|
||||
// Core extensions
|
||||
cm_modules.highlightSpecialChars(),
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -1,170 +1,170 @@
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
// 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 [
|
||||
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,
|
||||
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,
|
||||
EditorSelection: stateMod.EditorSelection,
|
||||
EditorState_allowMultipleSelections: stateMod.EditorState.allowMultipleSelections,
|
||||
EditorState_readOnly: stateMod.EditorState.readOnly,
|
||||
EditorState: stateMod.EditorState,
|
||||
EditorSelection: stateMod.EditorSelection,
|
||||
EditorState_allowMultipleSelections: stateMod.EditorState.allowMultipleSelections,
|
||||
EditorState_readOnly: stateMod.EditorState.readOnly,
|
||||
|
||||
basicSetup: basicSetupMod?.basicSetup,
|
||||
basicSetup: basicSetupMod?.basicSetup,
|
||||
|
||||
markdown: markdownMod?.markdown,
|
||||
markdownLanguage: markdownMod?.markdownLanguage,
|
||||
languages: languageMod?.languages, // From @codemirror/language-data, often re-exported by @codemirror/language
|
||||
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,
|
||||
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,
|
||||
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,
|
||||
autocompletion: autocompleteMod?.autocompletion,
|
||||
completionKeymap: autocompleteMod?.completionKeymap,
|
||||
closeBrackets: autocompleteMod?.closeBrackets,
|
||||
closeBracketsKeymap: autocompleteMod?.closeBracketsKeymap,
|
||||
|
||||
searchKeymap: searchMod?.searchKeymap,
|
||||
highlightSelectionMatches: searchMod?.highlightSelectionMatches,
|
||||
searchKeymap: searchMod?.searchKeymap,
|
||||
highlightSelectionMatches: searchMod?.highlightSelectionMatches,
|
||||
|
||||
lintKeymap: lintMod?.lintKeymap,
|
||||
lintKeymap: lintMod?.lintKeymap,
|
||||
|
||||
oneDark: themeOneDarkMod?.oneDark
|
||||
};
|
||||
oneDark: themeOneDarkMod?.oneDark
|
||||
};
|
||||
|
||||
globalAny[GLOBAL_KEY] = cache;
|
||||
return cache;
|
||||
}
|
||||
globalAny[GLOBAL_KEY] = cache;
|
||||
return cache;
|
||||
}
|
||||
|
||||
@@ -1,131 +1,151 @@
|
||||
<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() {
|
||||
if (!browser) return;
|
||||
cm = await ensureCodeMirrorModules(); // Assign to the top-level cm
|
||||
if (!cm) return;
|
||||
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 */ }
|
||||
editor_view = null;
|
||||
}
|
||||
|
||||
// Build extensions defensively
|
||||
const extensions = [
|
||||
cm.lineNumbers(),
|
||||
cm.highlightSpecialChars(),
|
||||
cm.history(),
|
||||
cm.foldGutter(),
|
||||
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(),
|
||||
cm.EditorView_lineWrapping,
|
||||
cm.keymap.of([
|
||||
...cm.defaultKeymap,
|
||||
...cm.searchKeymap,
|
||||
...cm.historyKeymap,
|
||||
...cm.foldKeymap,
|
||||
...cm.completionKeymap,
|
||||
...cm.lintKeymap
|
||||
]),
|
||||
cm.markdown ? cm.markdown({ base: cm.markdownLanguage }) : null,
|
||||
cm.EditorView && cm.EditorView.updateListener ? cm.EditorView.updateListener.of((update: any) => {
|
||||
if (update.docChanged) content = update.state.doc.toString();
|
||||
}) : null
|
||||
].filter(Boolean);
|
||||
|
||||
// Create editor
|
||||
editor_view = new cm.EditorView({
|
||||
state: cm.EditorState.create({
|
||||
doc: content ?? '',
|
||||
extensions
|
||||
}),
|
||||
parent: editor_container
|
||||
});
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
// ensure it's created only in browser and after modules resolved
|
||||
await createEditor();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (editor_view && typeof editor_view.destroy === 'function') {
|
||||
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) => {
|
||||
if (!editor_view) return;
|
||||
const state = editor_view.state;
|
||||
const changes = state.changeByRange((range: any) => {
|
||||
const isAlreadyWrapped =
|
||||
state.sliceDoc(range.from - before.length, range.from) === before &&
|
||||
state.sliceDoc(range.to, range.to + after.length) === after;
|
||||
|
||||
if (isAlreadyWrapped) {
|
||||
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)
|
||||
};
|
||||
// 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 */
|
||||
}
|
||||
editor_view = null;
|
||||
}
|
||||
|
||||
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();
|
||||
};
|
||||
// Build extensions defensively
|
||||
const extensions = [
|
||||
cm.lineNumbers(),
|
||||
cm.highlightSpecialChars(),
|
||||
cm.history(),
|
||||
cm.foldGutter(),
|
||||
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(),
|
||||
cm.EditorView_lineWrapping,
|
||||
cm.keymap.of([
|
||||
...cm.defaultKeymap,
|
||||
...cm.searchKeymap,
|
||||
...cm.historyKeymap,
|
||||
...cm.foldKeymap,
|
||||
...cm.completionKeymap,
|
||||
...cm.lintKeymap
|
||||
]),
|
||||
cm.markdown ? cm.markdown({ base: cm.markdownLanguage }) : null,
|
||||
cm.EditorView && cm.EditorView.updateListener
|
||||
? cm.EditorView.updateListener.of((update: any) => {
|
||||
if (update.docChanged) content = update.state.doc.toString();
|
||||
})
|
||||
: null
|
||||
].filter(Boolean);
|
||||
|
||||
const insertList = () => {
|
||||
if (!editor_view) return;
|
||||
const state = editor_view.state;
|
||||
const changes = state.changeByRange((range: any) => {
|
||||
const line = state.doc.lineAt(range.from);
|
||||
return {
|
||||
changes: [{ from: line.from, insert: '- ' }],
|
||||
range: cm.EditorSelection.range(range.from + 2, range.to + 2)
|
||||
};
|
||||
// Create editor
|
||||
editor_view = new cm.EditorView({
|
||||
state: cm.EditorState.create({
|
||||
doc: content ?? '',
|
||||
extensions
|
||||
}),
|
||||
parent: editor_container
|
||||
});
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
// ensure it's created only in browser and after modules resolved
|
||||
await createEditor();
|
||||
});
|
||||
editor_view.dispatch(changes);
|
||||
editor_view.focus();
|
||||
};
|
||||
|
||||
onDestroy(() => {
|
||||
if (editor_view && typeof editor_view.destroy === 'function') {
|
||||
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) => {
|
||||
if (!editor_view) return;
|
||||
const state = editor_view.state;
|
||||
const changes = state.changeByRange((range: any) => {
|
||||
const isAlreadyWrapped =
|
||||
state.sliceDoc(range.from - before.length, range.from) === before &&
|
||||
state.sliceDoc(range.to, range.to + after.length) === after;
|
||||
|
||||
if (isAlreadyWrapped) {
|
||||
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 insertList = () => {
|
||||
if (!editor_view) return;
|
||||
const state = editor_view.state;
|
||||
const changes = state.changeByRange((range: any) => {
|
||||
const line = state.doc.lineAt(range.from);
|
||||
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="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>
|
||||
</div>
|
||||
<div bind:this={editor_container} class="h-full min-h-[150px] overflow-auto"></div>
|
||||
</div>
|
||||
<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
|
||||
>
|
||||
</div>
|
||||
<div bind:this={editor_container} class="h-full min-h-[150px] overflow-auto"></div>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
<script lang="ts">
|
||||
import ElementCodemirrorEditor from './element_codemirror_editor.svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import ElementCodemirrorEditor from './element_codemirror_editor.svelte';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
export let html_text: string = '';
|
||||
export let placeholder: string = 'Type your text here...';
|
||||
export let classes: string = '';
|
||||
export let html_text: string = '';
|
||||
export let placeholder: string = 'Type your text here...';
|
||||
export let classes: string = '';
|
||||
</script>
|
||||
|
||||
<div class="block w-full h-full {classes}">
|
||||
{#if browser}
|
||||
<ElementCodemirrorEditor
|
||||
class="p-1 transition-all duration-1000"
|
||||
bind:content={html_text}
|
||||
{placeholder}
|
||||
/>
|
||||
{:else}
|
||||
<!-- server / prerender placeholder to avoid SSR loading CM -->
|
||||
<div class="p-2 text-sm text-surface-600-400">Editor (client only)</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if browser}
|
||||
<ElementCodemirrorEditor
|
||||
class="p-1 transition-all duration-1000"
|
||||
bind:content={html_text}
|
||||
{placeholder}
|
||||
/>
|
||||
{:else}
|
||||
<!-- server / prerender placeholder to avoid SSR loading CM -->
|
||||
<div class="p-2 text-sm text-surface-600-400">Editor (client only)</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user