first commit
This commit is contained in:
Christian Lawson-Perfect
commit
6c637e42c8
7 changed files with 165 additions and 0 deletions
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
.make.*
|
||||||
|
node_modules/
|
||||||
|
.watchmakerc
|
||||||
|
code-editor.bundle.mjs
|
||||||
|
package-lock.json
|
||||||
13
Makefile
Normal file
13
Makefile
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
NODE_BIN=node_modules/.bin
|
||||||
|
|
||||||
|
DEST=../better-think-editor/dist
|
||||||
|
|
||||||
|
$(DEST)/code-editor.mjs: code-editor.bundle.mjs
|
||||||
|
cp $< $@
|
||||||
|
|
||||||
|
code-editor.terser.mjs: code-editor.bundle.mjs
|
||||||
|
$(NODE_BIN)/terser --compress --mangle -- $< > $@
|
||||||
|
|
||||||
|
code-editor.bundle.mjs: code-editor.mjs
|
||||||
|
$(NODE_BIN)/rollup $< -f es -p @rollup/plugin-node-resolve -o $@
|
||||||
|
|
||||||
81
code-editor.mjs
Normal file
81
code-editor.mjs
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
import {basicSetup} from "codemirror";
|
||||||
|
import {EditorView, keymap} from "@codemirror/view";
|
||||||
|
import {EditorState} from "@codemirror/state";
|
||||||
|
import {python} from "@codemirror/lang-python";
|
||||||
|
import {r} from "codemirror-lang-r";
|
||||||
|
import {javascript} from "@codemirror/lang-javascript";
|
||||||
|
import {elm} from "@codemirror/legacy-modes/mode/elm";
|
||||||
|
import {StreamLanguage} from "@codemirror/language"
|
||||||
|
import {vim} from "@replit/codemirror-vim";
|
||||||
|
import {indentWithTab} from "@codemirror/commands";
|
||||||
|
|
||||||
|
window.EditorView = EditorView;
|
||||||
|
|
||||||
|
const languages = {
|
||||||
|
'python': python,
|
||||||
|
'r': r,
|
||||||
|
'javascript': javascript,
|
||||||
|
'elm': () => StreamLanguage.define(elm),
|
||||||
|
}
|
||||||
|
|
||||||
|
export function codemirror_editor(language, options) {
|
||||||
|
const language_plugin = languages[language];
|
||||||
|
|
||||||
|
options = Object.assign({
|
||||||
|
extensions: [
|
||||||
|
vim(),
|
||||||
|
basicSetup,
|
||||||
|
keymap.of([indentWithTab]),
|
||||||
|
EditorView.updateListener.of(update => {
|
||||||
|
if(!options?.onChange || update.changes.desc.empty) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
options.onChange(update);
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}, options);
|
||||||
|
if(language_plugin) {
|
||||||
|
options.extensions.push(language_plugin());
|
||||||
|
}
|
||||||
|
|
||||||
|
let editor = new EditorView(options);
|
||||||
|
|
||||||
|
return editor;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export class CodeEditorElement extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
const shadowRoot = this.attachShadow({mode: 'open'});
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
this.init_editor();
|
||||||
|
}
|
||||||
|
|
||||||
|
init_editor() {
|
||||||
|
const code = this.textContent;
|
||||||
|
const code_tag = this.shadowRoot;
|
||||||
|
const language = this.getAttribute('language') || '';
|
||||||
|
|
||||||
|
this.codeMirror = codemirror_editor(
|
||||||
|
language,
|
||||||
|
{
|
||||||
|
doc: code,
|
||||||
|
parent: code_tag,
|
||||||
|
root: this.shadowRoot,
|
||||||
|
onChange: update => this.onChange(update)
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange() {
|
||||||
|
const code = this.codeMirror.state.doc.toString();
|
||||||
|
this.value = code;
|
||||||
|
this.dispatchEvent(new CustomEvent('change'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("code-editor", CodeEditorElement);
|
||||||
38
index.html
Normal file
38
index.html
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<title>A thing made by CLP</title>
|
||||||
|
<script type="module" src="script.js"></script>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>A thing made by CLP</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<h2>Elm</h2>
|
||||||
|
<code-editor language="elm">
|
||||||
|
module Poo
|
||||||
|
|
||||||
|
type alias Poo
|
||||||
|
= Arg Int
|
||||||
|
| Poo Float
|
||||||
|
|
||||||
|
a : Poo -> Poo
|
||||||
|
a plop = case plop of
|
||||||
|
Arg i -> Poo (toFloat i)
|
||||||
|
Poo f -> Arg (floor f)
|
||||||
|
|
||||||
|
</code-editor>
|
||||||
|
<h2>JavaScript</h2>
|
||||||
|
<code-editor language="javascript">
|
||||||
|
const x = 1;
|
||||||
|
function a() {
|
||||||
|
return x%2;
|
||||||
|
}
|
||||||
|
</code-editor>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
22
package.json
Normal file
22
package.json
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"name": "codemirror-element",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"@codemirror/lang-javascript": "^6.2.2",
|
||||||
|
"@codemirror/lang-python": "^6.1.2",
|
||||||
|
"@codemirror/legacy-modes": "^6.4.3",
|
||||||
|
"@replit/codemirror-vim": "^6.2.0",
|
||||||
|
"@rollup/plugin-node-resolve": "^15.0.2",
|
||||||
|
"codemirror": "^6.0.1",
|
||||||
|
"codemirror-lang-r": "^0.1.0-2",
|
||||||
|
"rollup": "^3.20.6",
|
||||||
|
"terser": "^5.17.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
script.js
Normal file
1
script.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
import './code-editor.bundle.mjs';
|
||||||
5
style.css
Normal file
5
style.css
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
:root {
|
||||||
|
--spacing: 1em;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue