Added handling of codemirror 6 code languages
This commit is contained in:
Dan Brown
parent
d4f2fcdf79
commit
97146a6359
7 changed files with 437 additions and 174 deletions
261
package-lock.json
generated
261
package-lock.json
generated
|
|
@ -6,6 +6,11 @@
|
|||
"": {
|
||||
"dependencies": {
|
||||
"@codemirror/commands": "^6.0.1",
|
||||
"@codemirror/lang-html": "^6.1.0",
|
||||
"@codemirror/lang-javascript": "^6.0.2",
|
||||
"@codemirror/lang-json": "^6.0.0",
|
||||
"@codemirror/lang-markdown": "^6.0.1",
|
||||
"@codemirror/lang-php": "^6.0.0",
|
||||
"@codemirror/language": "^6.2.1",
|
||||
"@codemirror/legacy-modes": "^6.1.0",
|
||||
"@codemirror/state": "^6.1.0",
|
||||
|
|
@ -55,6 +60,79 @@
|
|||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-css": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.0.0.tgz",
|
||||
"integrity": "sha512-jBqc+BTuwhNOTlrimFghLlSrN6iFuE44HULKWoR4qKYObhOIl9Lci1iYj6zMIte1XTQmZguNvjXMyr43LUKwSw==",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@lezer/css": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-html": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.1.0.tgz",
|
||||
"integrity": "sha512-gA7NmJxqvnhwza05CvR7W/39Ap9r/4Vs9uiC0IeFYo1hSlJzc/8N6Evviz6vTW1x8SpHcRYyqKOf6rpl6LfWtg==",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/lang-css": "^6.0.0",
|
||||
"@codemirror/lang-javascript": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/html": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-javascript": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.0.2.tgz",
|
||||
"integrity": "sha512-BZRJ9u/zl16hLkSpDAWm73mrfIR7HJrr0lvnhoSOCQVea5BglguWI/slxexhvUb0CB5cXgKWuo2bM+N9EhIaZw==",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/lint": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.0.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/javascript": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-json": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.0.tgz",
|
||||
"integrity": "sha512-DvTcYTKLmg2viADXlTdufrT334M9jowe1qO02W28nvm+nejcvhM5vot5mE8/kPrxYw/HJHhwu1z2PyBpnMLCNQ==",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@lezer/json": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-markdown": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.0.1.tgz",
|
||||
"integrity": "sha512-pHPQuRwf9cUrmkmsTHRjtS9ZnGu3fA9YzAdh2++d+L9wbfnC2XbKh0Xvm/0YiUjdCnoCx9wDFEoCuAnkqKWLIw==",
|
||||
"dependencies": {
|
||||
"@codemirror/lang-html": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.0.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/markdown": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-php": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-php/-/lang-php-6.0.0.tgz",
|
||||
"integrity": "sha512-96CEjq0xEgbzc6bdFPwILPfZ6m8917JRbh2oPszZJABlYxG4Y+eYjtYkUTDb4yuyjQKyigHoeGC6zoIOYA1NWA==",
|
||||
"dependencies": {
|
||||
"@codemirror/lang-html": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/php": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/language": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz",
|
||||
|
|
@ -116,6 +194,15 @@
|
|||
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.0.tgz",
|
||||
"integrity": "sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA=="
|
||||
},
|
||||
"node_modules/@lezer/css": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.0.0.tgz",
|
||||
"integrity": "sha512-616VqgDKumHmYIuxs3tnX1irEQmoDHgF/TlP4O5ICWwyHwLMErq+8iKVuzTkOdBqvYAVmObqThcDEAaaMJjAdg==",
|
||||
"dependencies": {
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/highlight": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.0.0.tgz",
|
||||
|
|
@ -124,6 +211,34 @@
|
|||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/html": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.0.1.tgz",
|
||||
"integrity": "sha512-sC00zEt3GBh3vVO6QaGX4YZCl41S9dHWN/WGBsDixy9G+sqOC7gsa4cxA/fmRVAiBvhqYkJk+5Ul4oul92CPVw==",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/javascript": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.2.tgz",
|
||||
"integrity": "sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==",
|
||||
"dependencies": {
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/json": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.0.tgz",
|
||||
"integrity": "sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==",
|
||||
"dependencies": {
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/lr": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.0.tgz",
|
||||
|
|
@ -132,6 +247,24 @@
|
|||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/markdown": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.0.1.tgz",
|
||||
"integrity": "sha512-LlpNWLqes3XQvd8TwpJTHf9ENl4fI6H32xQkMgltUITFMMdQpOASXQtDawWR03yS6hskh4bkhATQbgjdGMoUvA==",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/highlight": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/php": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.0.tgz",
|
||||
"integrity": "sha512-kFQu/mk/vmjpA+fjQU87d9eimqKJ9PFCa8CZCPFWGEwNnm7Ahpw32N+HYEU/YAQ0XcfmOAnW/YJCEa8WpUOMMw==",
|
||||
"dependencies": {
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-regex": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
|
||||
|
|
@ -2053,6 +2186,79 @@
|
|||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/lang-css": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.0.0.tgz",
|
||||
"integrity": "sha512-jBqc+BTuwhNOTlrimFghLlSrN6iFuE44HULKWoR4qKYObhOIl9Lci1iYj6zMIte1XTQmZguNvjXMyr43LUKwSw==",
|
||||
"requires": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@lezer/css": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/lang-html": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.1.0.tgz",
|
||||
"integrity": "sha512-gA7NmJxqvnhwza05CvR7W/39Ap9r/4Vs9uiC0IeFYo1hSlJzc/8N6Evviz6vTW1x8SpHcRYyqKOf6rpl6LfWtg==",
|
||||
"requires": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/lang-css": "^6.0.0",
|
||||
"@codemirror/lang-javascript": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/html": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/lang-javascript": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.0.2.tgz",
|
||||
"integrity": "sha512-BZRJ9u/zl16hLkSpDAWm73mrfIR7HJrr0lvnhoSOCQVea5BglguWI/slxexhvUb0CB5cXgKWuo2bM+N9EhIaZw==",
|
||||
"requires": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/lint": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.0.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/javascript": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/lang-json": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.0.tgz",
|
||||
"integrity": "sha512-DvTcYTKLmg2viADXlTdufrT334M9jowe1qO02W28nvm+nejcvhM5vot5mE8/kPrxYw/HJHhwu1z2PyBpnMLCNQ==",
|
||||
"requires": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@lezer/json": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/lang-markdown": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.0.1.tgz",
|
||||
"integrity": "sha512-pHPQuRwf9cUrmkmsTHRjtS9ZnGu3fA9YzAdh2++d+L9wbfnC2XbKh0Xvm/0YiUjdCnoCx9wDFEoCuAnkqKWLIw==",
|
||||
"requires": {
|
||||
"@codemirror/lang-html": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.0.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/markdown": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/lang-php": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-php/-/lang-php-6.0.0.tgz",
|
||||
"integrity": "sha512-96CEjq0xEgbzc6bdFPwILPfZ6m8917JRbh2oPszZJABlYxG4Y+eYjtYkUTDb4yuyjQKyigHoeGC6zoIOYA1NWA==",
|
||||
"requires": {
|
||||
"@codemirror/lang-html": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/php": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@codemirror/language": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.2.1.tgz",
|
||||
|
|
@ -2114,6 +2320,15 @@
|
|||
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.0.tgz",
|
||||
"integrity": "sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA=="
|
||||
},
|
||||
"@lezer/css": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.0.0.tgz",
|
||||
"integrity": "sha512-616VqgDKumHmYIuxs3tnX1irEQmoDHgF/TlP4O5ICWwyHwLMErq+8iKVuzTkOdBqvYAVmObqThcDEAaaMJjAdg==",
|
||||
"requires": {
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@lezer/highlight": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.0.0.tgz",
|
||||
|
|
@ -2122,6 +2337,34 @@
|
|||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@lezer/html": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.0.1.tgz",
|
||||
"integrity": "sha512-sC00zEt3GBh3vVO6QaGX4YZCl41S9dHWN/WGBsDixy9G+sqOC7gsa4cxA/fmRVAiBvhqYkJk+5Ul4oul92CPVw==",
|
||||
"requires": {
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@lezer/javascript": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.0.2.tgz",
|
||||
"integrity": "sha512-IjOVeIRhM8IuafWNnk+UzRz7p4/JSOKBNINLYLsdSGuJS9Ju7vFdc82AlTt0jgtV5D8eBZf4g0vK4d3ttBNz7A==",
|
||||
"requires": {
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@lezer/json": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.0.tgz",
|
||||
"integrity": "sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==",
|
||||
"requires": {
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@lezer/lr": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.2.0.tgz",
|
||||
|
|
@ -2130,6 +2373,24 @@
|
|||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@lezer/markdown": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.0.1.tgz",
|
||||
"integrity": "sha512-LlpNWLqes3XQvd8TwpJTHf9ENl4fI6H32xQkMgltUITFMMdQpOASXQtDawWR03yS6hskh4bkhATQbgjdGMoUvA==",
|
||||
"requires": {
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/highlight": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"@lezer/php": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.0.tgz",
|
||||
"integrity": "sha512-kFQu/mk/vmjpA+fjQU87d9eimqKJ9PFCa8CZCPFWGEwNnm7Ahpw32N+HYEU/YAQ0XcfmOAnW/YJCEa8WpUOMMw==",
|
||||
"requires": {
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,11 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@codemirror/commands": "^6.0.1",
|
||||
"@codemirror/lang-html": "^6.1.0",
|
||||
"@codemirror/lang-javascript": "^6.0.2",
|
||||
"@codemirror/lang-json": "^6.0.0",
|
||||
"@codemirror/lang-markdown": "^6.0.1",
|
||||
"@codemirror/lang-php": "^6.0.0",
|
||||
"@codemirror/language": "^6.2.1",
|
||||
"@codemirror/legacy-modes": "^6.1.0",
|
||||
"@codemirror/state": "^6.1.0",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import {EditorView} from "@codemirror/view"
|
||||
// import {EditorState} from "@codemirror/state"
|
||||
import Clipboard from "clipboard/dist/clipboard.min";
|
||||
|
||||
// Modes
|
||||
import {modes, modeMap, modesAsStreamLanguages} from "./modes";
|
||||
import {viewer} from "./setups.js";
|
||||
import {createView, updateViewLanguage} from "./views.js";
|
||||
|
||||
/**
|
||||
* Highlight pre elements on a page
|
||||
|
|
@ -36,26 +35,24 @@ function highlightElem(elem) {
|
|||
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
|
||||
const content = elem.textContent.trimEnd();
|
||||
|
||||
let mode = '';
|
||||
let langName = '';
|
||||
if (innerCodeElem !== null) {
|
||||
const langName = innerCodeElem.className.replace('language-', '');
|
||||
mode = getMode(langName, content);
|
||||
langName = innerCodeElem.className.replace('language-', '');
|
||||
}
|
||||
|
||||
const wrapper = document.createElement('div');
|
||||
elem.parentNode.insertBefore(wrapper, elem);
|
||||
|
||||
const cm = new EditorView({
|
||||
const ev = createView({
|
||||
parent: wrapper,
|
||||
doc: content,
|
||||
extensions: viewer(),
|
||||
});
|
||||
setMode(ev, langName, content);
|
||||
|
||||
elem.remove();
|
||||
|
||||
// TODO - theme: getTheme(),
|
||||
// TODO - mode,
|
||||
addCopyIcon(cm);
|
||||
addCopyIcon(ev);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -84,28 +81,6 @@ function addCopyIcon(cmInstance) {
|
|||
// });
|
||||
}
|
||||
|
||||
/**
|
||||
* Search for a codemirror code based off a user suggestion
|
||||
* @param {String} suggestion
|
||||
* @param {String} content
|
||||
* @returns {string}
|
||||
*/
|
||||
function getMode(suggestion, content) {
|
||||
suggestion = suggestion.trim().replace(/^\./g, '').toLowerCase();
|
||||
|
||||
const modeMapType = typeof modeMap[suggestion];
|
||||
|
||||
if (modeMapType === 'undefined') {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (modeMapType === 'function') {
|
||||
return modeMap[suggestion](content);
|
||||
}
|
||||
|
||||
return modeMap[suggestion];
|
||||
}
|
||||
|
||||
/**
|
||||
* Ge the theme to use for CodeMirror instances.
|
||||
* @returns {*|string}
|
||||
|
|
@ -172,12 +147,14 @@ export function inlineEditor(textArea, mode) {
|
|||
}
|
||||
|
||||
/**
|
||||
* Set the mode of a codemirror instance.
|
||||
* @param cmInstance
|
||||
* @param modeSuggestion
|
||||
* Set the language mode of a codemirror EditorView.
|
||||
*
|
||||
* @param {EditorView} ev
|
||||
* @param {string} modeSuggestion
|
||||
* @param {string} content
|
||||
*/
|
||||
export function setMode(cmInstance, modeSuggestion, content) {
|
||||
cmInstance.setOption('mode', getMode(modeSuggestion, content));
|
||||
export function setMode(ev, modeSuggestion, content) {
|
||||
updateViewLanguage(ev, modeSuggestion, content);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
120
resources/js/code/languages.js
Normal file
120
resources/js/code/languages.js
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import {StreamLanguage} from "@codemirror/language"
|
||||
|
||||
import {css} from '@codemirror/legacy-modes/mode/css';
|
||||
import {c, java, cpp, csharp, kotlin, scala} from '@codemirror/legacy-modes/mode/clike';
|
||||
import {diff} from '@codemirror/legacy-modes/mode/diff';
|
||||
import {fortran} from '@codemirror/legacy-modes/mode/fortran';
|
||||
import {go} from '@codemirror/legacy-modes/mode/go';
|
||||
import {haskell} from '@codemirror/legacy-modes/mode/haskell';
|
||||
import {html} from '@codemirror/lang-html';
|
||||
import {javascript} from '@codemirror/lang-javascript';
|
||||
import {json} from '@codemirror/lang-json';
|
||||
import {julia} from '@codemirror/legacy-modes/mode/julia';
|
||||
import {lua} from '@codemirror/legacy-modes/mode/lua';
|
||||
import {markdown} from '@codemirror/lang-markdown';
|
||||
import {oCaml, fSharp, sml} from '@codemirror/legacy-modes/mode/mllike';
|
||||
import {nginx} from '@codemirror/legacy-modes/mode/nginx';
|
||||
import {perl} from '@codemirror/legacy-modes/mode/perl';
|
||||
import {pascal} from '@codemirror/legacy-modes/mode/pascal';
|
||||
import {php} from '@codemirror/lang-php';
|
||||
import {powerShell} from '@codemirror/legacy-modes/mode/powershell';
|
||||
import {properties} from '@codemirror/legacy-modes/mode/properties';
|
||||
import {python} from '@codemirror/legacy-modes/mode/python';
|
||||
import {ruby} from '@codemirror/legacy-modes/mode/ruby';
|
||||
import {rust} from '@codemirror/legacy-modes/mode/rust';
|
||||
import {shell} from '@codemirror/legacy-modes/mode/shell';
|
||||
import {sql} from '@codemirror/legacy-modes/mode/sql';
|
||||
import {stex} from '@codemirror/legacy-modes/mode/stex';
|
||||
import {toml} from '@codemirror/legacy-modes/mode/toml';
|
||||
import {vb} from '@codemirror/legacy-modes/mode/vb';
|
||||
import {vbScript} from '@codemirror/legacy-modes/mode/vbscript';
|
||||
import {xml} from '@codemirror/legacy-modes/mode/xml';
|
||||
import {yaml} from '@codemirror/legacy-modes/mode/yaml';
|
||||
|
||||
|
||||
// Mapping of possible languages or formats from user input to their codemirror modes.
|
||||
// Value can be a mode string or a function that will receive the code content & return the mode string.
|
||||
// The function option is used in the event the exact mode could be dynamic depending on the code.
|
||||
const modeMap = {
|
||||
bash: () => StreamLanguage.define(shell),
|
||||
css: () => StreamLanguage.define(css),
|
||||
c: () => StreamLanguage.define(c),
|
||||
java: () => StreamLanguage.define(java),
|
||||
scala: () => StreamLanguage.define(scala),
|
||||
kotlin: () => StreamLanguage.define(kotlin),
|
||||
'c++': () => StreamLanguage.define(cpp),
|
||||
'c#': () => StreamLanguage.define(csharp),
|
||||
csharp: () => StreamLanguage.define(csharp),
|
||||
diff: () => StreamLanguage.define(diff),
|
||||
for: () => StreamLanguage.define(fortran),
|
||||
fortran: () => StreamLanguage.define(fortran),
|
||||
'f#': () => StreamLanguage.define(fSharp),
|
||||
fsharp: () => StreamLanguage.define(fSharp),
|
||||
go: () => StreamLanguage.define(go),
|
||||
haskell: () => StreamLanguage.define(haskell),
|
||||
hs: () => StreamLanguage.define(haskell),
|
||||
html: () => html(),
|
||||
ini: () => StreamLanguage.define(properties),
|
||||
javascript: () => javascript(),
|
||||
json: () => json(),
|
||||
js: () => javascript(),
|
||||
jl: () => StreamLanguage.define(julia),
|
||||
julia: () => StreamLanguage.define(julia),
|
||||
latex: () => StreamLanguage.define(stex),
|
||||
lua: () => StreamLanguage.define(lua),
|
||||
md: () => StreamLanguage.define(markdown),
|
||||
mdown: () => StreamLanguage.define(markdown),
|
||||
markdown: () => StreamLanguage.define(markdown),
|
||||
ml: () => StreamLanguage.define(sml),
|
||||
nginx: () => StreamLanguage.define(nginx),
|
||||
perl: () => StreamLanguage.define(perl),
|
||||
pl: () => StreamLanguage.define(perl),
|
||||
powershell: () => StreamLanguage.define(powerShell),
|
||||
properties: () => StreamLanguage.define(properties),
|
||||
ocaml: () => StreamLanguage.define(oCaml),
|
||||
pascal: () => StreamLanguage.define(pascal),
|
||||
pas: () => StreamLanguage.define(pascal),
|
||||
php: (code) => {
|
||||
const hasTags = code.includes('<?php');
|
||||
return php({plain: !hasTags});
|
||||
},
|
||||
py: () => StreamLanguage.define(python),
|
||||
python: () => StreamLanguage.define(python),
|
||||
ruby: () => StreamLanguage.define(ruby),
|
||||
rust: () => StreamLanguage.define(rust),
|
||||
rb: () => StreamLanguage.define(ruby),
|
||||
rs: () => StreamLanguage.define(rust),
|
||||
shell: () => StreamLanguage.define(shell),
|
||||
sh: () => StreamLanguage.define(shell),
|
||||
stext: () => StreamLanguage.define(stex),
|
||||
toml: () => StreamLanguage.define(toml),
|
||||
ts: () => javascript({typescript: true}),
|
||||
typescript: () => javascript({typescript: true}),
|
||||
sql: () => StreamLanguage.define(sql),
|
||||
vbs: () => StreamLanguage.define(vbScript),
|
||||
vbscript: () => StreamLanguage.define(vbScript),
|
||||
'vb.net': () => StreamLanguage.define(vb),
|
||||
vbnet: () => StreamLanguage.define(vb),
|
||||
xml: () => StreamLanguage.define(xml),
|
||||
yaml: () => StreamLanguage.define(yaml),
|
||||
yml: () => StreamLanguage.define(yaml),
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the relevant codemirror language extension based upon the given language
|
||||
* suggestion and content.
|
||||
* @param {String} langSuggestion
|
||||
* @param {String} content
|
||||
* @returns {StreamLanguage}
|
||||
*/
|
||||
export function getLanguageExtension(langSuggestion, content) {
|
||||
const suggestion = langSuggestion.trim().replace(/^\./g, '').toLowerCase();
|
||||
|
||||
const language = modeMap[suggestion];
|
||||
|
||||
if (typeof language === 'undefined') {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return language(content);
|
||||
}
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
import {StreamLanguage} from "@codemirror/language"
|
||||
|
||||
import {css as langCss} from '@codemirror/legacy-modes/mode/css';
|
||||
import {clike as langClike} from '@codemirror/legacy-modes/mode/clike';
|
||||
import {diff as langDiff} from '@codemirror/legacy-modes/mode/diff';
|
||||
import {fortran as langFortran} from '@codemirror/legacy-modes/mode/fortran';
|
||||
import {go as langGo} from '@codemirror/legacy-modes/mode/go';
|
||||
import {haskell as langHaskell} from '@codemirror/legacy-modes/mode/haskell';
|
||||
// import {htmlmixed as langHtmlmixed} from '@codemirror/legacy-modes/mode/htmlmixed';
|
||||
import {javascript as langJavascript} from '@codemirror/legacy-modes/mode/javascript';
|
||||
import {julia as langJulia} from '@codemirror/legacy-modes/mode/julia';
|
||||
import {lua as langLua} from '@codemirror/legacy-modes/mode/lua';
|
||||
// import {markdown as langMarkdown} from '@codemirror/legacy-modes/mode/markdown';
|
||||
import {oCaml as langMllike} from '@codemirror/legacy-modes/mode/mllike';
|
||||
import {nginx as langNginx} from '@codemirror/legacy-modes/mode/nginx';
|
||||
import {perl as langPerl} from '@codemirror/legacy-modes/mode/perl';
|
||||
import {pascal as langPascal} from '@codemirror/legacy-modes/mode/pascal';
|
||||
// import {php as langPhp} from '@codemirror/legacy-modes/mode/php';
|
||||
import {powerShell as langPowershell} from '@codemirror/legacy-modes/mode/powershell';
|
||||
import {properties as langProperties} from '@codemirror/legacy-modes/mode/properties';
|
||||
import {python as langPython} from '@codemirror/legacy-modes/mode/python';
|
||||
import {ruby as langRuby} from '@codemirror/legacy-modes/mode/ruby';
|
||||
import {rust as langRust} from '@codemirror/legacy-modes/mode/rust';
|
||||
import {shell as langShell} from '@codemirror/legacy-modes/mode/shell';
|
||||
import {sql as langSql} from '@codemirror/legacy-modes/mode/sql';
|
||||
import {stex as langStex} from '@codemirror/legacy-modes/mode/stex';
|
||||
import {toml as langToml} from '@codemirror/legacy-modes/mode/toml';
|
||||
import {vb as langVb} from '@codemirror/legacy-modes/mode/vb';
|
||||
import {vbScript as langVbscript} from '@codemirror/legacy-modes/mode/vbscript';
|
||||
import {xml as langXml} from '@codemirror/legacy-modes/mode/xml';
|
||||
import {yaml as langYaml} from '@codemirror/legacy-modes/mode/yaml';
|
||||
|
||||
export const modes = [
|
||||
langCss,
|
||||
langClike,
|
||||
langDiff,
|
||||
langFortran,
|
||||
langGo,
|
||||
langHaskell,
|
||||
// langHtmlmixed,
|
||||
langJavascript,
|
||||
langJulia,
|
||||
langLua,
|
||||
// langMarkdown,
|
||||
langMllike,
|
||||
langNginx,
|
||||
langPerl,
|
||||
langPascal,
|
||||
// langPhp,
|
||||
langPowershell,
|
||||
langProperties,
|
||||
langPython,
|
||||
langRuby,
|
||||
langRust,
|
||||
langShell,
|
||||
langSql,
|
||||
langStex,
|
||||
langToml,
|
||||
langVb,
|
||||
langVbscript,
|
||||
langXml,
|
||||
langYaml,
|
||||
];
|
||||
|
||||
// Mapping of possible languages or formats from user input to their codemirror modes.
|
||||
// Value can be a mode string or a function that will receive the code content & return the mode string.
|
||||
// The function option is used in the event the exact mode could be dynamic depending on the code.
|
||||
export const modeMap = {
|
||||
bash: 'shell',
|
||||
css: 'css',
|
||||
c: 'text/x-csrc',
|
||||
java: 'text/x-java',
|
||||
scala: 'text/x-scala',
|
||||
kotlin: 'text/x-kotlin',
|
||||
'c++': 'text/x-c++src',
|
||||
'c#': 'text/x-csharp',
|
||||
csharp: 'text/x-csharp',
|
||||
diff: 'diff',
|
||||
for: 'fortran',
|
||||
fortran: 'fortran',
|
||||
'f#': 'text/x-fsharp',
|
||||
fsharp: 'text/x-fsharp',
|
||||
go: 'go',
|
||||
haskell: 'haskell',
|
||||
hs: 'haskell',
|
||||
html: 'htmlmixed',
|
||||
ini: 'properties',
|
||||
javascript: 'text/javascript',
|
||||
json: 'application/json',
|
||||
js: 'text/javascript',
|
||||
jl: 'text/x-julia',
|
||||
julia: 'text/x-julia',
|
||||
latex: 'text/x-stex',
|
||||
lua: 'lua',
|
||||
md: 'markdown',
|
||||
mdown: 'markdown',
|
||||
markdown: 'markdown',
|
||||
ml: 'mllike',
|
||||
nginx: 'nginx',
|
||||
perl: 'perl',
|
||||
pl: 'perl',
|
||||
powershell: 'powershell',
|
||||
properties: 'properties',
|
||||
ocaml: 'text/x-ocaml',
|
||||
pascal: 'text/x-pascal',
|
||||
pas: 'text/x-pascal',
|
||||
php: (content) => {
|
||||
return content.includes('<?php') ? 'php' : 'text/x-php';
|
||||
},
|
||||
py: 'python',
|
||||
python: 'python',
|
||||
ruby: 'ruby',
|
||||
rust: 'rust',
|
||||
rb: 'ruby',
|
||||
rs: 'rust',
|
||||
shell: 'shell',
|
||||
sh: 'shell',
|
||||
stext: 'text/x-stex',
|
||||
toml: 'toml',
|
||||
ts: 'text/typescript',
|
||||
typescript: 'text/typescript',
|
||||
sql: 'text/x-sql',
|
||||
vbs: 'vbscript',
|
||||
vbscript: 'vbscript',
|
||||
'vb.net': 'text/x-vb',
|
||||
vbnet: 'text/x-vb',
|
||||
xml: 'xml',
|
||||
yaml: 'yaml',
|
||||
yml: 'yaml',
|
||||
};
|
||||
|
||||
export function modesAsStreamLanguages() {
|
||||
return modes.map(mode => StreamLanguage.define(mode));
|
||||
}
|
||||
|
|
@ -6,9 +6,6 @@ import {defaultHighlightStyle, syntaxHighlighting, bracketMatching,
|
|||
import {defaultKeymap, history, historyKeymap} from "@codemirror/commands"
|
||||
import {EditorState} from "@codemirror/state"
|
||||
|
||||
import {modesAsStreamLanguages} from "./modes";
|
||||
|
||||
|
||||
export function viewer() {
|
||||
return [
|
||||
lineNumbers(),
|
||||
|
|
@ -27,6 +24,5 @@ export function viewer() {
|
|||
...foldKeymap,
|
||||
]),
|
||||
EditorState.readOnly.of(true),
|
||||
...modesAsStreamLanguages(),
|
||||
];
|
||||
}
|
||||
38
resources/js/code/views.js
Normal file
38
resources/js/code/views.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import {getLanguageExtension} from "./languages";
|
||||
import {Compartment} from "@codemirror/state"
|
||||
import {EditorView} from "@codemirror/view"
|
||||
|
||||
const viewLangCompartments = new WeakMap();
|
||||
|
||||
/**
|
||||
* Create a new editor view.
|
||||
*
|
||||
* @param {Object} config
|
||||
* @returns {EditorView}
|
||||
*/
|
||||
export function createView(config) {
|
||||
const langCompartment = new Compartment();
|
||||
config.extensions.push(langCompartment.of([]));
|
||||
|
||||
const ev = new EditorView(config);
|
||||
|
||||
viewLangCompartments.set(ev, langCompartment);
|
||||
|
||||
return ev;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the language mode of an EditorView.
|
||||
*
|
||||
* @param {EditorView} ev
|
||||
* @param {string} modeSuggestion
|
||||
* @param {string} content
|
||||
*/
|
||||
export function updateViewLanguage(ev, modeSuggestion, content) {
|
||||
const compartment = viewLangCompartments.get(ev);
|
||||
const language = getLanguageExtension(modeSuggestion, content);
|
||||
|
||||
ev.dispatch({
|
||||
effects: compartment.reconfigure(language ? language : [])
|
||||
})
|
||||
}
|
||||
Loading…
Reference in a new issue