Skip to content

Commit

Permalink
Upgrade to CodeMirror 6
Browse files Browse the repository at this point in the history
  • Loading branch information
@verhovsky
verhovsky committed Oct 8, 2023
1 parent 5abc05e commit f6d445d
Show file tree
Hide file tree
Showing 5 changed files with 785 additions and 612 deletions.
11 changes: 6 additions & 5 deletions css/compact.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,10 @@
margin-top: 10px;
}

.CodeMirror {
.cm-editor {
line-height: 1.2em;
}
#editor .CodeMirror-scroll {
#editor .cm-scroller {
height: auto;
overflow-x: auto;
}
Expand All @@ -74,12 +74,13 @@
min-height: 300px;
font-family: monospace;
}
#data .CodeMirror-scroll {
#data .cm-scroller {
height: 100%;
overflow-x: auto;
}
.CodeMirror-gutter-text,
.CodeMirror-lines {
/* TODO: these are probably wrong */
.cm-gutter-text,
.cm-lines {
padding: 0;
}
.tabs {
Expand Down
257 changes: 135 additions & 122 deletions js/ide.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,14 @@ import jQuery from "jquery";
import html2canvas from "html2canvas";
import {Canvg} from "canvg";
import "leaflet";
import "codemirror/lib/codemirror.js";
import {EditorView, basicSetup} from "codemirror";
import {EditorState} from "@codemirror/state";
import {StreamLanguage} from "@codemirror/language";
import {javascript} from "@codemirror/lang-javascript";
import {xml} from "@codemirror/lang-xml";
import {css} from "@codemirror/lang-css";
import {clike} from "@codemirror/legacy-modes/mode/clike";

import tokml from "tokml";
import togpx from "togpx";
import configs from "./configs";
Expand All @@ -24,8 +31,6 @@ import {Base64, htmlentities, lzw_encode, lzw_decode} from "./misc";
import sync from "./sync-with-osm";
import shortcuts from "./shortcuts";

declare const CodeMirror;

// Handler to allow copying in various MIME formats
// @see https://developer.mozilla.org/en-US/docs/Web/Events/copy
// @see https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData
Expand Down Expand Up @@ -141,6 +146,24 @@ function showDialog(title, content, buttons) {
element.appendTo("body");
}

export const overpassQL = clike({
name: "overpassQL",
keywords: (function (str) {
const r = {};
const a = str.split(" ");
for (const ai of a) r[ai] = true;
return r;
})(
"out json xml custom popup timeout maxsize bbox" + // initial declarations
" date diff adiff" + //attic declarations
" foreach" + // block statements
" relation rel way node is_in area around user uid newer changed poly pivot nwr nw nr wr derived" + // queries
" out meta body skel tags ids count qt asc" + // actions
" center bb geom" // geometry types
//+"r w n br bw" // recursors
)
});

class IDE {
// == private members ==
private attribControl = null;
Expand Down Expand Up @@ -327,122 +350,113 @@ class IDE {
$("#editor textarea")[0].value = settings.code["overpass"];
if (settings.use_rich_editor) {
let pending = 0;
CodeMirror.defineMIME("text/x-overpassQL", {
name: "clike",
keywords: (function (str) {
const r = {};
const a = str.split(" ");
for (const ai of a) r[ai] = true;
return r;
})(
"out json xml custom popup timeout maxsize bbox" + // initial declarations
" date diff adiff" + //attic declarations
" foreach" + // block statements
" relation rel way node is_in area around user uid newer changed poly pivot nwr nw nr wr derived" + // queries
" out meta body skel tags ids count qt asc" + // actions
" center bb geom" // geometry types
//+"r w n br bw" // recursors
)
});
CodeMirror.defineMIME("text/x-overpassXML", "xml");
CodeMirror.defineMode("xml+mustache", (config) =>
CodeMirror.multiplexingMode(
CodeMirror.multiplexingMode(CodeMirror.getMode(config, "xml"), {
open: "{{",
close: "}}",
mode: CodeMirror.getMode(config, "text/plain"),
delimStyle: "mustache"
}),
{
open: "{{style:",
close: "}}",
mode: CodeMirror.getMode(config, "text/css"),
delimStyle: "mustache"
}
)
);
CodeMirror.defineMode("ql+mustache", (config) =>
CodeMirror.multiplexingMode(
CodeMirror.multiplexingMode(
CodeMirror.getMode(config, "text/x-overpassQL"),
{
open: "{{",
close: "}}",
mode: CodeMirror.getMode(config, "text/plain"),
delimStyle: "mustache"
}
),
{
open: "{{style:",
close: "}}",
mode: CodeMirror.getMode(config, "text/css"),
delimStyle: "mustache"
}
)
);
ide.codeEditor = CodeMirror.fromTextArea($("#editor textarea")[0], {
//value: settings.code["overpass"],
lineNumbers: true,
lineWrapping: true,
mode: "text/plain",
onChange(e) {
clearTimeout(pending);
pending = setTimeout(() => {
// update syntax highlighting mode
if (ide.getQueryLang() == "xml") {
if (e.getOption("mode") != "xml+mustache") {
e.closeTagEnabled = true;
e.setOption("matchBrackets", false);
e.setOption("mode", "xml+mustache");
}
} else {
if (e.getOption("mode") != "ql+mustache") {
e.closeTagEnabled = false;
e.setOption("matchBrackets", true);
e.setOption("mode", "ql+mustache");
}
}
// check for inactive ui elements
const bbox_filter = $(".leaflet-control-buttons-bboxfilter");
if (ide.getRawQuery().match(/\{\{bbox\}\}/)) {
if (bbox_filter.hasClass("disabled")) {
bbox_filter.removeClass("disabled");
bbox_filter.attr("data-t", "[title]map_controlls.select_bbox");
i18n.translate_ui(bbox_filter[0]);
}
} else {
if (!bbox_filter.hasClass("disabled")) {
bbox_filter.addClass("disabled");
bbox_filter.attr(
"data-t",
"[title]map_controlls.select_bbox_disabled"
);
i18n.translate_ui(bbox_filter[0]);
}
}
}, 500);
settings.code["overpass"] = e.getValue();
settings.save();
},
closeTagEnabled: true,
closeTagIndent: [
"osm-script",
"query",
"union",
"foreach",
"difference"
],
extraKeys: {
"'>'"(cm) {
cm.closeTag(cm, ">");
},
"'/'"(cm) {
cm.closeTag(cm, "/");
}
}
// CodeMirror.defineMIME("text/x-overpassXML", "xml");
// CodeMirror.defineMode("xml+mustache", (config) =>
// CodeMirror.multiplexingMode(
// CodeMirror.multiplexingMode(CodeMirror.getMode(config, "xml"), {
// open: "{{",
// close: "}}",
// mode: CodeMirror.getMode(config, "text/plain"),
// delimStyle: "mustache"
// }),
// {
// open: "{{style:",
// close: "}}",
// mode: CodeMirror.getMode(config, "text/css"),
// delimStyle: "mustache"
// }
// )
// );
// CodeMirror.defineMode("ql+mustache", (config) =>
// CodeMirror.multiplexingMode(
// CodeMirror.multiplexingMode(
// CodeMirror.getMode(config, "text/x-overpassQL"),
// {
// open: "{{",
// close: "}}",
// mode: CodeMirror.getMode(config, "text/plain"),
// delimStyle: "mustache"
// }
// ),
// {
// open: "{{style:",
// close: "}}",
// mode: CodeMirror.getMode(config, "text/css"),
// delimStyle: "mustache"
// }
// )
// );
const textarea = $("#editor textarea")[0] as HTMLInputElement;
const view = new EditorView({
doc: settings.code["overpass"],
extensions: [basicSetup, StreamLanguage.define(overpassQL)]
// onChange(e) {
// clearTimeout(pending);
// pending = setTimeout(() => {
// // update syntax highlighting mode
// if (ide.getQueryLang() == "xml") {
// if (e.getOption("mode") != "xml+mustache") {
// e.closeTagEnabled = true;
// e.setOption("matchBrackets", false);
// e.setOption("mode", "xml+mustache");
// }
// } else {
// if (e.getOption("mode") != "ql+mustache") {
// e.closeTagEnabled = false;
// e.setOption("matchBrackets", true);
// e.setOption("mode", "ql+mustache");
// }
// }
// // check for inactive ui elements
// const bbox_filter = $(".leaflet-control-buttons-bboxfilter");
// if (ide.getRawQuery().match(/\{\{bbox\}\}/)) {
// if (bbox_filter.hasClass("disabled")) {
// bbox_filter.removeClass("disabled");
// bbox_filter.attr("data-t", "[title]map_controlls.select_bbox");
// i18n.translate_ui(bbox_filter[0]);
// }
// } else {
// if (!bbox_filter.hasClass("disabled")) {
// bbox_filter.addClass("disabled");
// bbox_filter.attr(
// "data-t",
// "[title]map_controlls.select_bbox_disabled"
// );
// i18n.translate_ui(bbox_filter[0]);
// }
// }
// }, 500);
// settings.code["overpass"] = e.getValue();
// settings.save();
// },
// closeTagEnabled: true,
// closeTagIndent: [
// "osm-script",
// "query",
// "union",
// "foreach",
// "difference"
// ],
// extraKeys: {
// "'>'"(cm) {
// cm.closeTag(cm, ">");
// },
// "'/'"(cm) {
// cm.closeTag(cm, "/");
// }
// }
});

textarea.parentNode.insertBefore(view.dom, textarea);
textarea.style.display = "none";
// TODO: is there a form?
if (textarea.form)
textarea.form.addEventListener("submit", () => {
textarea.value = view.state.doc.toString();
});
ide.codeEditor = view;
// fire onChange after initialization
ide.codeEditor.getOption("onChange")(ide.codeEditor);
// ide.codeEditor.getOption("onChange")(ide.codeEditor);
} else {
// use non-rich editor
ide.codeEditor = $("#editor textarea")[0];
Expand All @@ -467,11 +481,10 @@ class IDE {
ide.codeEditor.setValue(args.query);
}
// init dataviewer
ide.dataViewer = CodeMirror($("#data")[0], {
value: "no data loaded yet",
lineNumbers: true,
readOnly: true,
mode: "javascript"
ide.dataViewer = new EditorView({
parent: $("#data")[0],
doc: "no data loaded yet",
extensions: [basicSetup, javascript(), EditorState.readOnly.of(true)]
});

// init leaflet
Expand Down
9 changes: 0 additions & 9 deletions js/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,9 @@ import "leaflet";
import "./leaflet.polylineoffset";
import "leaflet.locationfilter";

import "codemirror/lib/codemirror";
import "codemirror/mode/javascript/javascript";
import "codemirror/mode/xml/xml";
import "codemirror/mode/clike/clike";
import "codemirror/mode/css/css";
import "codemirror/lib/util/multiplex";
import "codemirror/lib/util/closetag";

import "html2canvas";

// include the CSS files
import "codemirror/lib/codemirror.css";
import "leaflet/dist/leaflet.css";
import "leaflet.locationfilter/src/locationfilter.css";
import "jquery-ui/themes/base/all.css";
Expand Down
12 changes: 8 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,19 @@
"request": "^2.67.0",
"typescript": "^5.0.4",
"vite": "^4.4.4",
"vitest": "^0.29.8",
"vite-plugin-favicons-inject": "^2.2.0"
"vite-plugin-favicons-inject": "^2.2.0",
"vitest": "^0.29.8"
},
"dependencies": {
"@codemirror/lang-css": "^6.2.1",
"@codemirror/lang-javascript": "^6.2.1",
"@codemirror/lang-xml": "^6.0.2",
"@codemirror/legacy-modes": "^6.3.3",
"@fortawesome/fontawesome-free": "^5.13.0",
"@openstreetmap/id-tagging-schema": "^3.5.1",
"bulma": "^0.9.4",
"canvg": "4.0.1",
"codemirror": "https://github.com/codemirror/CodeMirror/archive/v2.38.tar.gz",
"codemirror": "^6.0.1",
"html2canvas": "^1.4.1",
"jquery": "3.7.1",
"jquery-ui": "1.13.2",
Expand All @@ -51,7 +55,7 @@
"rgbcolor": "^1.0.1",
"stackblur": "^1.0.0",
"tag2link": "^2022.11.28",
"togpx": "tyrasd/togpx#4396a386fd179be6876f7443438909d524651eed",
"togpx": "Khartir/togpx#74f2733cecd2383c6eb0fb7083f1f7b7289a1e01",
"tokml": "^0.4.0"
},
"prettier": {
Expand Down
Loading

0 comments on commit f6d445d

Please sign in to comment.