From 6c637e42c88bf40e924461a4064c580280bb2faf Mon Sep 17 00:00:00 2001 From: Christian Lawson-Perfect Date: Wed, 12 Feb 2025 10:55:23 +0000 Subject: [PATCH] first commit --- .gitignore | 5 +++ Makefile | 13 ++++++++ code-editor.mjs | 81 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 38 +++++++++++++++++++++++ package.json | 22 ++++++++++++++ script.js | 1 + style.css | 5 +++ 7 files changed, 165 insertions(+) create mode 100644 .gitignore create mode 100644 Makefile create mode 100644 code-editor.mjs create mode 100644 index.html create mode 100644 package.json create mode 100644 script.js create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..28a77cc --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +.make.* +node_modules/ +.watchmakerc +code-editor.bundle.mjs +package-lock.json \ No newline at end of file diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..dd120d3 --- /dev/null +++ b/Makefile @@ -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 $@ + diff --git a/code-editor.mjs b/code-editor.mjs new file mode 100644 index 0000000..85e5fc4 --- /dev/null +++ b/code-editor.mjs @@ -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); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..f3d310a --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + A thing made by CLP + + + + +
+

A thing made by CLP

+
+
+

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) + + +

JavaScript

+ +const x = 1; +function a() { + return x%2; +} + +
+ + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..df80558 --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/script.js b/script.js new file mode 100644 index 0000000..7a811b3 --- /dev/null +++ b/script.js @@ -0,0 +1 @@ +import './code-editor.bundle.mjs'; \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0fc09ac --- /dev/null +++ b/style.css @@ -0,0 +1,5 @@ +:root { + --spacing: 1em; + + color-scheme: light dark; +} \ No newline at end of file