Lots of work making CodeMirror work. It is in a mostly useable state now.
This commit is contained in:
Scott Idem
62
package-lock.json
generated
62
package-lock.json
generated
@@ -9,9 +9,11 @@
|
||||
"version": "0.2.507",
|
||||
"dependencies": {
|
||||
"@codemirror/commands": "^6.8.1",
|
||||
"@codemirror/gutter": "^0.19.9",
|
||||
"@codemirror/lang-css": "^6.3.1",
|
||||
"@codemirror/lang-html": "^6.4.9",
|
||||
"@codemirror/lang-javascript": "^6.2.3",
|
||||
"@codemirror/lang-json": "^6.0.1",
|
||||
"@codemirror/lang-markdown": "^6.3.2",
|
||||
"@codemirror/language": "^6.11.0",
|
||||
"@codemirror/language-data": "^6.5.1",
|
||||
@@ -170,6 +172,40 @@
|
||||
"@lezer/common": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/gutter": {
|
||||
"version": "0.19.9",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/gutter/-/gutter-0.19.9.tgz",
|
||||
"integrity": "sha512-PFrtmilahin1g6uL27aG5tM/rqR9DZzZYZsIrCXA5Uc2OFTFqx4owuhoU9hqfYxHp5ovfvBwQ+txFzqS4vog6Q==",
|
||||
"deprecated": "As of 0.20.0, this package has been merged into @codemirror/view",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/rangeset": "^0.19.0",
|
||||
"@codemirror/state": "^0.19.0",
|
||||
"@codemirror/view": "^0.19.23"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/gutter/node_modules/@codemirror/state": {
|
||||
"version": "0.19.9",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz",
|
||||
"integrity": "sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/text": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/gutter/node_modules/@codemirror/view": {
|
||||
"version": "0.19.48",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-0.19.48.tgz",
|
||||
"integrity": "sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/rangeset": "^0.19.5",
|
||||
"@codemirror/state": "^0.19.3",
|
||||
"@codemirror/text": "^0.19.0",
|
||||
"style-mod": "^4.0.0",
|
||||
"w3c-keyname": "^2.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-angular": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-angular/-/lang-angular-0.1.4.tgz",
|
||||
@@ -498,6 +534,25 @@
|
||||
"crelt": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/rangeset": {
|
||||
"version": "0.19.9",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/rangeset/-/rangeset-0.19.9.tgz",
|
||||
"integrity": "sha512-V8YUuOvK+ew87Xem+71nKcqu1SXd5QROMRLMS/ljT5/3MCxtgrRie1Cvild0G/Z2f1fpWxzX78V0U4jjXBorBQ==",
|
||||
"deprecated": "As of 0.20.0, this package has been merged into @codemirror/state",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/rangeset/node_modules/@codemirror/state": {
|
||||
"version": "0.19.9",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz",
|
||||
"integrity": "sha512-psOzDolKTZkx4CgUqhBQ8T8gBc0xN5z4gzed109aF6x7D7umpDRoimacI/O6d9UGuyl4eYuDCZmDFr2Rq7aGOw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/text": "^0.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/search": {
|
||||
"version": "6.5.10",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.10.tgz",
|
||||
@@ -518,6 +573,13 @@
|
||||
"@marijn/find-cluster-break": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/text": {
|
||||
"version": "0.19.6",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/text/-/text-0.19.6.tgz",
|
||||
"integrity": "sha512-T9jnREMIygx+TPC1bOuepz18maGq/92q2a+n4qTqObKwvNMg+8cMTslb8yxeEDEq7S3kpgGWxgO1UWbQRij0dA==",
|
||||
"deprecated": "As of 0.20.0, this package has been merged into @codemirror/state",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@codemirror/theme-one-dark": {
|
||||
"version": "6.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
|
||||
|
||||
@@ -87,9 +87,11 @@
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@codemirror/commands": "^6.8.1",
|
||||
"@codemirror/gutter": "^0.19.9",
|
||||
"@codemirror/lang-css": "^6.3.1",
|
||||
"@codemirror/lang-html": "^6.4.9",
|
||||
"@codemirror/lang-javascript": "^6.2.3",
|
||||
"@codemirror/lang-json": "^6.0.1",
|
||||
"@codemirror/lang-markdown": "^6.3.2",
|
||||
"@codemirror/language": "^6.11.0",
|
||||
"@codemirror/language-data": "^6.5.1",
|
||||
|
||||
@@ -1,72 +1,185 @@
|
||||
<script lang="ts">
|
||||
// This will be the wrapper for the CodeMirror editor. It should hide most of the configuration requirements.
|
||||
// WARNING: This has not been fully updated to Svelte version 5. It is a work in progress.
|
||||
// *** Import Svelte version 5 specific
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
|
||||
import { EditorView, keymap, placeholder as placeholderExt } from '@codemirror/view';
|
||||
import { EditorState, StateEffect, type Extension } from '@codemirror/state';
|
||||
import { indentWithTab } from '@codemirror/commands';
|
||||
import {
|
||||
EditorView, keymap, highlightSpecialChars, drawSelection,
|
||||
highlightActiveLine, dropCursor, rectangularSelection,
|
||||
crosshairCursor,
|
||||
gutter, GutterMarker, highlightActiveLineGutter, lineNumbers,
|
||||
placeholder as placeholderExt,
|
||||
} from "@codemirror/view"
|
||||
import { EditorState, RangeSet, StateEffect, type Extension, Text } from '@codemirror/state';
|
||||
import {
|
||||
defaultKeymap, history, historyKeymap, indentWithTab,
|
||||
} from "@codemirror/commands"
|
||||
import { indentUnit } from '@codemirror/language';
|
||||
import { languages } from '@codemirror/language-data';
|
||||
// import {
|
||||
// defaultHighlightStyle, syntaxHighlighting, indentOnInput,
|
||||
// bracketMatching, foldGutter, foldKeymap
|
||||
// } from "@codemirror/language"
|
||||
// import {
|
||||
// defaultHighlightStyle, syntaxHighlighting, indentOnInput,
|
||||
// bracketMatching, foldGutter, foldKeymap
|
||||
// } from "@codemirror/language"
|
||||
// import {
|
||||
// searchKeymap, highlightSelectionMatches
|
||||
// } from "@codemirror/search"
|
||||
// import {
|
||||
// autocompletion, completionKeymap, closeBrackets,
|
||||
// closeBracketsKeymap
|
||||
// } from "@codemirror/autocomplete"
|
||||
// import {lintKeymap} from "@codemirror/lint"
|
||||
|
||||
// import { } from '@codemirror/gutter'; // Merged into @codemirror/view
|
||||
import { basicSetup } from 'codemirror';
|
||||
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
|
||||
import { javascript } from '@codemirror/lang-javascript';
|
||||
import { json } from '@codemirror/lang-json';
|
||||
import { oneDark } from "@codemirror/theme-one-dark";
|
||||
|
||||
// Props
|
||||
export let content: string = 'test test test test';
|
||||
export let new_content: string = '';
|
||||
export let language: Extension = javascript();
|
||||
export let theme: Extension = oneDark;
|
||||
|
||||
// export let language: Extension = markdown(); // javascript()
|
||||
export let theme_mode: string = 'light'; // 'dark' | 'light'
|
||||
export let theme: Extension = EditorView.baseTheme(); // EditorView.baseTheme(); // oneDark
|
||||
|
||||
export let extensions: Extension[] = [];
|
||||
|
||||
export let editable: boolean = true;
|
||||
export let readonly: boolean = false;
|
||||
|
||||
export let placeholder: string = 'Start typing...';
|
||||
|
||||
export let show_line_numbers: boolean = false;
|
||||
export let wrap_lines: boolean = true;
|
||||
export let use_tab: boolean = true;
|
||||
export let tab_size: number = 4;
|
||||
let classes = "";
|
||||
export { classes as class };
|
||||
|
||||
let baseTheme = EditorView.baseTheme({
|
||||
".cm-o-replacement": {
|
||||
display: "inline-block",
|
||||
width: ".5em",
|
||||
height: ".5em",
|
||||
borderRadius: ".25em"
|
||||
},
|
||||
"&light .cm-o-replacement": {
|
||||
backgroundColor: "#04c"
|
||||
},
|
||||
"&dark .cm-o-replacement": {
|
||||
backgroundColor: "#5bf"
|
||||
}
|
||||
})
|
||||
// theme == baseTheme;
|
||||
|
||||
const dispatch = createEventDispatcher<{ change: string }>();
|
||||
|
||||
let editor_element: HTMLDivElement;
|
||||
let editorView: EditorView;
|
||||
|
||||
// theme = [
|
||||
// // baseTheme,
|
||||
// theme,
|
||||
// ];
|
||||
// console.log(`Theme:`, theme);
|
||||
|
||||
if (theme_mode == 'dark') {
|
||||
theme = oneDark;
|
||||
} else {
|
||||
// theme = EditorView.baseTheme({
|
||||
// "&": {
|
||||
// color: "black",
|
||||
// backgroundColor: "white"
|
||||
// },
|
||||
// ".cm-cursor, .cm-dropCursor": { borderLeftColor: "#000" },
|
||||
// "&.cm-focused .cm-selectionBackground, ::selection": {
|
||||
// backgroundColor: "#B7D5FF"
|
||||
// },
|
||||
// "&.cm-focused .cm-selectionForeground": { color: "black" }
|
||||
// });
|
||||
}
|
||||
|
||||
if (editable) {
|
||||
extensions.push(EditorView.editable.of(true));
|
||||
} else {
|
||||
// extensions.push(EditorState.editable.of(false));
|
||||
}
|
||||
if (readonly) {
|
||||
extensions.push(EditorState.readOnly.of(true));
|
||||
} else {
|
||||
// extensions.push(EditorState.readOnly.of(false));
|
||||
}
|
||||
|
||||
if (placeholder) { extensions.push(placeholderExt(placeholder)); }
|
||||
|
||||
if (show_line_numbers) {
|
||||
// extensions.push(lineNumbers({ class: "line-numbers" }));
|
||||
} else {
|
||||
// extensions.push(lineNumbers(false));
|
||||
// extensions.push(gutter(false));
|
||||
// extensions.pop();
|
||||
// extensions.slice(extensions.indexOf(lineNumbers), 1);
|
||||
|
||||
}
|
||||
|
||||
if (wrap_lines) { extensions.push(EditorView.lineWrapping); }
|
||||
|
||||
if (use_tab) { extensions.push(keymap.of([indentWithTab])); }
|
||||
if (tab_size) { extensions.push(indentUnit.of(" ".repeat(tab_size))); }
|
||||
|
||||
|
||||
|
||||
// let languages = [
|
||||
// { name: 'CSS', mode: 'css' },
|
||||
// { name: 'HTML', mode: 'html' },
|
||||
// { name: 'JavaScript', mode: 'javascript' },
|
||||
// { name: 'Markdown', mode: 'markdown' },
|
||||
// { name: 'Python', mode: 'python' },
|
||||
// ];
|
||||
|
||||
// Reactive declaration for extensions
|
||||
$: editor_extensions = [
|
||||
basicSetup,
|
||||
EditorView.editable.of(editable),
|
||||
keymap.of([indentWithTab]),
|
||||
placeholderExt(placeholder),
|
||||
language,
|
||||
// gutter({class: "hidden-gutter"}),
|
||||
// A line number gutter
|
||||
// lineNumbers(false),
|
||||
// A gutter with code folding markers
|
||||
// foldGutter(false),
|
||||
// lineWrapping(false),
|
||||
// EditorView.lineWrapping, // Enable line wrapping
|
||||
|
||||
// EditorView.indentUnit.of(" ".repeat(tab_size)),
|
||||
// EditorView.tabSize.of(tab_size),
|
||||
// indentUnit.of(" ".repeat(tab_size)),
|
||||
|
||||
// EditorView.editable.of(editable),
|
||||
// EditorState.readOnly.of(readonly),
|
||||
|
||||
// EditorState.tabSize.of(tab_size),
|
||||
// keymap.of([indentWithTab]),
|
||||
// placeholderExt(placeholder),
|
||||
// language,
|
||||
markdown({base: markdownLanguage, codeLanguages: languages}),
|
||||
javascript({typescript: true}),
|
||||
json({ jsx: true }),
|
||||
theme,
|
||||
// baseTheme = {
|
||||
// ".cm-o-replacement": {
|
||||
// display: "inline-block",
|
||||
// width: ".5em",
|
||||
// height: ".5em",
|
||||
// borderRadius: ".25em"
|
||||
// },
|
||||
// "&light .cm-o-replacement": {
|
||||
// backgroundColor: "#04c"
|
||||
// },
|
||||
// "&dark .cm-o-replacement": {
|
||||
// backgroundColor: "#5bf"
|
||||
// }
|
||||
// },
|
||||
|
||||
...extensions
|
||||
];
|
||||
|
||||
// baseTheme = {
|
||||
// ".cm-o-replacement": {
|
||||
// display: "inline-block",
|
||||
// width: ".5em",
|
||||
// height: ".5em",
|
||||
// borderRadius: ".25em"
|
||||
// },
|
||||
// "&light .cm-o-replacement": {
|
||||
// backgroundColor: "#04c"
|
||||
// },
|
||||
// "&dark .cm-o-replacement": {
|
||||
// backgroundColor: "#5bf"
|
||||
// }
|
||||
// },
|
||||
// let dimensions = {
|
||||
// width: '100%',
|
||||
// height: 'calc(100vh - 48px)' // Adjust for header and other elements
|
||||
// };
|
||||
// editorView.setSize(dimensions.width, dimensions.height);
|
||||
|
||||
|
||||
// Initialize CodeMirror on mount
|
||||
onMount(() => {
|
||||
editorView = new EditorView({
|
||||
@@ -74,7 +187,7 @@ onMount(() => {
|
||||
doc: content,
|
||||
extensions: editor_extensions,
|
||||
}),
|
||||
parent: editor_element,
|
||||
parent: editor_element, // document.body
|
||||
dispatch: (transaction) => {
|
||||
editorView.update([transaction]);
|
||||
if (transaction.docChanged) {
|
||||
@@ -103,19 +216,71 @@ $: if (editorView && editorView.state.doc.toString() !== content) {
|
||||
</script>
|
||||
|
||||
{#if browser}
|
||||
<div bind:this={editor_element} class="codemirror-wrapper {classes}"></div>
|
||||
<!-- flex flex-col flex-wrap items-center justify-center -->
|
||||
<div bind:this={editor_element} class="codemirror-wrapper h-100 max-h-full w-100 max-w-6xl {classes}"></div>
|
||||
{:else}
|
||||
<div class="scm-waiting {classes}">
|
||||
<div class="scm-waiting__loading scm-loading">
|
||||
<p class="scm-loading__text">Loading editor...</p>
|
||||
</div>
|
||||
|
||||
<pre class="scm-pre cm-editor">{value}</pre>
|
||||
<pre class="scm-pre cm-editor">{content}</pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.codemirror-wrapper :global(.cm-focused) {
|
||||
outline: none;
|
||||
}
|
||||
/* .codemirror-wrapper :global(.cm-focused) {
|
||||
outline: none;
|
||||
} */
|
||||
|
||||
.codemirror-wrapper {
|
||||
flex-grow: 1;
|
||||
/* flex-shrink: 1; */
|
||||
/* flex-basis: 100%; */
|
||||
|
||||
/* font-size: 1rem; */
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
/* overflow: auto; */
|
||||
/* background-color: var(--cm-background); */
|
||||
|
||||
/* text-wrap: normal; */
|
||||
/* text-wrap: balance; */
|
||||
/* text-wrap: wrap; */
|
||||
/* text-wrap: break-word; */
|
||||
}
|
||||
.codemirror-wrapper :global(.cm-editor) {
|
||||
/* font-size: .8rem; */
|
||||
/* text-wrap: normal; */
|
||||
/* text-wrap: balance; */
|
||||
/* text-wrap: wrap; */
|
||||
/* text-wrap: break-word; */
|
||||
|
||||
/* max-width: 100%; */
|
||||
/* max-height: 100%; */
|
||||
|
||||
/* overflow: auto; */
|
||||
|
||||
/* width: 100%; */
|
||||
/* height: 100%; */
|
||||
|
||||
/* background-color: var(--cm-background); */
|
||||
/* color: var(--cm-text); */
|
||||
}
|
||||
|
||||
/* .codemirror-wrapper :global(.cm-gutters) {
|
||||
background-color: var(--cm-gutter-background);
|
||||
color: var(--cm-gutter-text);
|
||||
}
|
||||
.codemirror-wrapper :global(.cm-gutter) {
|
||||
background-color: var(--cm-gutter-background);
|
||||
color: var(--cm-gutter-text);
|
||||
}
|
||||
.codemirror-wrapper :global(.cm-gutterElement) {
|
||||
background-color: var(--cm-gutter-background);
|
||||
color: var(--cm-gutter-text);
|
||||
} */
|
||||
|
||||
</style>
|
||||
@@ -28,8 +28,8 @@ import {
|
||||
// import E_app_codemirror from '$lib/e_app_codemirror.svelte';
|
||||
// import E_app_codemirror_v4 from '$lib/e_app_codemirror_v4.svelte';
|
||||
import E_app_codemirror_v5 from '$lib/e_app_codemirror_v5.svelte';
|
||||
import {javascript} from "@codemirror/lang-javascript";
|
||||
import {markdown} from "@codemirror/lang-markdown";
|
||||
// import {javascript} from "@codemirror/lang-javascript";
|
||||
// import {markdown} from "@codemirror/lang-markdown";
|
||||
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
@@ -1792,7 +1792,7 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
|
||||
"
|
||||
>
|
||||
{#if (!$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id])}
|
||||
|
||||
{#if !$ae_loc.edit_mode || !$ae_loc.trusted_access}
|
||||
<article
|
||||
class="
|
||||
flex-grow
|
||||
@@ -1851,6 +1851,25 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
|
||||
<!-- {@html encrypt_content($lq__journal_entry_obj?.content, journal_key)} -->
|
||||
<!-- --{@html encrypted_base64_string}-- -->
|
||||
<!-- {@html marked.parse($lq__journal_entry_obj?.content)} -->
|
||||
{:else}
|
||||
|
||||
<E_app_codemirror_v5
|
||||
editable={false}
|
||||
readonly={true}
|
||||
content={tmp_entry_obj?.content ?? ''}
|
||||
bind:new_content={tmp_entry_obj.content}
|
||||
bind:theme_mode={$ae_loc.theme_mode}
|
||||
placeholder="Write using Markdown here..."
|
||||
class="
|
||||
p-2
|
||||
bg-slate-100 text-gray-900
|
||||
dark:bg-slate-900 dark:text-gray-100
|
||||
shadow-lg rounded-lg
|
||||
border border-gray-200 dark:border-gray-700
|
||||
hover:border-green-500 dark:hover:border-green-500
|
||||
"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{:else if ($journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] == 'current')}
|
||||
<!-- && !($lq__journal_entry_obj?.content_encrypted && decrypted_content)) -->
|
||||
@@ -1935,17 +1954,10 @@ tabindex={$ae_loc.edit_mode ? 0 : -1} -->
|
||||
<E_app_codemirror_v5
|
||||
content={tmp_entry_obj?.content ?? ''}
|
||||
bind:new_content={tmp_entry_obj.content}
|
||||
language={markdown()}
|
||||
placeholder="Write your JavaScript code here..."
|
||||
classes="
|
||||
flex-grow
|
||||
flex-shrink-0
|
||||
basis-full
|
||||
h-max min-h-max max-h-full
|
||||
w-full min-w-full max-w-6xl
|
||||
bind:theme_mode={$ae_loc.theme_mode}
|
||||
placeholder="Write using Markdown here..."
|
||||
class="
|
||||
p-2
|
||||
space-y-1
|
||||
font-mono
|
||||
bg-slate-100 text-gray-900
|
||||
dark:bg-slate-900 dark:text-gray-100
|
||||
shadow-lg rounded-lg
|
||||
|
||||
Reference in New Issue
Block a user