first commit
This commit is contained in:
34
media/plg_editors_codemirror/css/codemirror.css
Normal file
34
media/plg_editors_codemirror/css/codemirror.css
Normal file
@ -0,0 +1,34 @@
|
||||
/**
|
||||
* @copyright (C) 2009 Open Source Matters, Inc. <https://www.joomla.org>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*/
|
||||
|
||||
joomla-editor-codemirror {
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
}
|
||||
.cm-editor {
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.cm-editor .cm-scroller {
|
||||
min-height: 100px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Full screen mode */
|
||||
joomla-editor-codemirror.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1038;
|
||||
}
|
||||
joomla-editor-codemirror.fullscreen .cm-editor {
|
||||
width: auto !important;
|
||||
height: 90vh !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
1
media/plg_editors_codemirror/css/codemirror.min.css
vendored
Normal file
1
media/plg_editors_codemirror/css/codemirror.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
joomla-editor-codemirror{background-color:#fff;display:block}.cm-editor{border:1px solid #ccc;margin-bottom:16px}.cm-editor .cm-scroller{min-height:100px;overflow:auto}joomla-editor-codemirror.fullscreen{bottom:0;left:0;position:fixed;right:0;top:0;z-index:1038}joomla-editor-codemirror.fullscreen .cm-editor{height:90vh!important;width:auto!important}
|
||||
BIN
media/plg_editors_codemirror/css/codemirror.min.css.gz
Normal file
BIN
media/plg_editors_codemirror/css/codemirror.min.css.gz
Normal file
Binary file not shown.
423
media/plg_editors_codemirror/joomla.asset.json
Normal file
423
media/plg_editors_codemirror/joomla.asset.json
Normal file
@ -0,0 +1,423 @@
|
||||
{
|
||||
"$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
|
||||
"name": "plg_editors_codemirror",
|
||||
"version": "5.0.0",
|
||||
"description": "Joomla CMS",
|
||||
"license": "GPL-2.0-or-later",
|
||||
"assets": [
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/autocomplete",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-autocomplete.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.9.0"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/commands",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-commands.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.2.5"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-css",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-css.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.2.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-html",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-html.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.4.6"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-javascript",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-javascript.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.2.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-json",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-json.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.0.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-markdown",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-markdown.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.2.0"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-php",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-php.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.0.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-xml",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-xml.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.0.2"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/language",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-language.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.9.0"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lint",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lint.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.4.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/search",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-search.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.5.2"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/state",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-state.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.2.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/view",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-view.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.17.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/autocomplete",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-autocomplete.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.9.0"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/commands",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-commands.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.2.5"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-css",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-css.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.2.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-html",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-html.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.4.6"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-javascript",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-javascript.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.2.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-json",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-json.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.0.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-markdown",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-markdown.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.2.0"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-php",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-php.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.0.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lang-xml",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lang-xml.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.0.2"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/language",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-language.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.9.0"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/lint",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-lint.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.4.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/search",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-search.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.5.2"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/state",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-state.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.2.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@codemirror/view",
|
||||
"uri": "media/vendor/codemirror/js/codemirror-view.min.js",
|
||||
"importmap": true,
|
||||
"version": "6.17.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/common",
|
||||
"uri": "media/vendor/codemirror/js/lezer-common.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.0.4"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/css",
|
||||
"uri": "media/vendor/codemirror/js/lezer-css.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.1.3"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/highlight",
|
||||
"uri": "media/vendor/codemirror/js/lezer-highlight.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.1.6"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/html",
|
||||
"uri": "media/vendor/codemirror/js/lezer-html.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.3.6"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/javascript",
|
||||
"uri": "media/vendor/codemirror/js/lezer-javascript.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.4.7"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/json",
|
||||
"uri": "media/vendor/codemirror/js/lezer-json.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.0.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/lr",
|
||||
"uri": "media/vendor/codemirror/js/lezer-lr.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.3.10"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/markdown",
|
||||
"uri": "media/vendor/codemirror/js/lezer-markdown.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.1.0"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/php",
|
||||
"uri": "media/vendor/codemirror/js/lezer-php.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.0.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/xml",
|
||||
"uri": "media/vendor/codemirror/js/lezer-xml.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.0.2"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/common",
|
||||
"uri": "media/vendor/codemirror/js/lezer-common.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.0.4"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/css",
|
||||
"uri": "media/vendor/codemirror/js/lezer-css.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.1.3"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/highlight",
|
||||
"uri": "media/vendor/codemirror/js/lezer-highlight.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.1.6"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/html",
|
||||
"uri": "media/vendor/codemirror/js/lezer-html.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.3.6"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/javascript",
|
||||
"uri": "media/vendor/codemirror/js/lezer-javascript.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.4.7"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/json",
|
||||
"uri": "media/vendor/codemirror/js/lezer-json.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.0.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/lr",
|
||||
"uri": "media/vendor/codemirror/js/lezer-lr.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.3.10"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/markdown",
|
||||
"uri": "media/vendor/codemirror/js/lezer-markdown.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.1.0"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/php",
|
||||
"uri": "media/vendor/codemirror/js/lezer-php.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.0.1"
|
||||
},
|
||||
{
|
||||
"type": "script",
|
||||
"name": "@lezer/xml",
|
||||
"uri": "media/vendor/codemirror/js/lezer-xml.min.js",
|
||||
"importmap": true,
|
||||
"version": "1.0.2"
|
||||
},
|
||||
{
|
||||
"name": "codemirror",
|
||||
"type": "script",
|
||||
"uri": "plg_editors_codemirror/codemirror.min.js",
|
||||
"importmap": true,
|
||||
"dependencies": [
|
||||
"@codemirror/autocomplete",
|
||||
"@codemirror/commands",
|
||||
"@codemirror/lang-css",
|
||||
"@codemirror/lang-html",
|
||||
"@codemirror/lang-javascript",
|
||||
"@codemirror/lang-json",
|
||||
"@codemirror/lang-markdown",
|
||||
"@codemirror/lang-php",
|
||||
"@codemirror/lang-xml",
|
||||
"@codemirror/language",
|
||||
"@codemirror/lint",
|
||||
"@codemirror/search",
|
||||
"@codemirror/state",
|
||||
"@codemirror/view",
|
||||
"@codemirror/autocomplete",
|
||||
"@codemirror/commands",
|
||||
"@codemirror/lang-css",
|
||||
"@codemirror/lang-html",
|
||||
"@codemirror/lang-javascript",
|
||||
"@codemirror/lang-json",
|
||||
"@codemirror/lang-markdown",
|
||||
"@codemirror/lang-php",
|
||||
"@codemirror/lang-xml",
|
||||
"@codemirror/language",
|
||||
"@codemirror/lint",
|
||||
"@codemirror/search",
|
||||
"@codemirror/state",
|
||||
"@codemirror/view",
|
||||
"@lezer/common",
|
||||
"@lezer/css",
|
||||
"@lezer/highlight",
|
||||
"@lezer/html",
|
||||
"@lezer/javascript",
|
||||
"@lezer/json",
|
||||
"@lezer/lr",
|
||||
"@lezer/markdown",
|
||||
"@lezer/php",
|
||||
"@lezer/xml",
|
||||
"@lezer/common",
|
||||
"@lezer/css",
|
||||
"@lezer/highlight",
|
||||
"@lezer/html",
|
||||
"@lezer/javascript",
|
||||
"@lezer/json",
|
||||
"@lezer/lr",
|
||||
"@lezer/markdown",
|
||||
"@lezer/php",
|
||||
"@lezer/xml"
|
||||
],
|
||||
"version": "761a1c"
|
||||
},
|
||||
{
|
||||
"name": "plg_editors_codemirror",
|
||||
"type": "style",
|
||||
"uri": "plg_editors_codemirror/codemirror.css",
|
||||
"version": "5b3e28"
|
||||
},
|
||||
{
|
||||
"name": "webcomponent.editor-codemirror",
|
||||
"type": "script",
|
||||
"uri": "plg_editors_codemirror/joomla-editor-codemirror.min.js",
|
||||
"dependencies": [
|
||||
"core",
|
||||
"codemirror",
|
||||
"editors",
|
||||
"wcpolyfill"
|
||||
],
|
||||
"attributes": {
|
||||
"type": "module"
|
||||
},
|
||||
"version": "b24d93"
|
||||
}
|
||||
]
|
||||
}
|
||||
148
media/plg_editors_codemirror/js/codemirror.js
Normal file
148
media/plg_editors_codemirror/js/codemirror.js
Normal file
@ -0,0 +1,148 @@
|
||||
import { highlightSpecialChars, drawSelection, lineNumbers, EditorView, highlightActiveLineGutter, highlightActiveLine, keymap } from '@codemirror/view';
|
||||
export { EditorView, keymap } from '@codemirror/view';
|
||||
import { Compartment, EditorState } from '@codemirror/state';
|
||||
export { EditorState } from '@codemirror/state';
|
||||
import { syntaxHighlighting, defaultHighlightStyle, foldGutter } from '@codemirror/language';
|
||||
import { history, defaultKeymap, historyKeymap, emacsStyleKeymap } from '@codemirror/commands';
|
||||
import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
|
||||
import { closeBrackets } from '@codemirror/autocomplete';
|
||||
|
||||
/**
|
||||
* @copyright (C) 2023 Open Source Matters, Inc. <https://www.joomla.org>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*/
|
||||
const minimalSetup = () => [highlightSpecialChars(), history(), drawSelection(), syntaxHighlighting(defaultHighlightStyle, {
|
||||
fallback: true
|
||||
})];
|
||||
|
||||
/**
|
||||
* Configure and return list of extensions for given options
|
||||
*
|
||||
* @param {Object} options
|
||||
* @returns {Promise<[]>}
|
||||
*/
|
||||
const optionsToExtensions = async options => {
|
||||
const extensions = [];
|
||||
const q = [];
|
||||
|
||||
// Load the language for syntax mode
|
||||
if (options.mode) {
|
||||
const {
|
||||
mode
|
||||
} = options;
|
||||
const modeOptions = options[mode] || {};
|
||||
|
||||
// eslint-disable-next-line consistent-return
|
||||
q.push(import(`@codemirror/lang-${options.mode}`).then(modeMod => {
|
||||
// For html and php we need to configure selfClosingTags, to make code folding work correctly with <jdoc:include />
|
||||
if (mode === 'php') {
|
||||
return import('@codemirror/lang-html').then(({
|
||||
html
|
||||
}) => {
|
||||
const htmlOptions = options.html || {
|
||||
selfClosingTags: true
|
||||
};
|
||||
extensions.push(modeMod.php({
|
||||
baseLanguage: html(htmlOptions).language
|
||||
}));
|
||||
});
|
||||
}
|
||||
if (mode === 'html') {
|
||||
modeOptions.selfClosingTags = true;
|
||||
}
|
||||
extensions.push(modeMod[options.mode](modeOptions));
|
||||
}).catch(error => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`Cannot creat an extension for "${options.mode}" syntax mode.`, error);
|
||||
}));
|
||||
}
|
||||
if (options.lineNumbers) {
|
||||
extensions.push(lineNumbers());
|
||||
}
|
||||
if (options.lineWrapping) {
|
||||
extensions.push(EditorView.lineWrapping);
|
||||
}
|
||||
if (options.activeLine) {
|
||||
extensions.push(highlightActiveLineGutter(), highlightActiveLine());
|
||||
}
|
||||
if (options.highlightSelection) {
|
||||
extensions.push(highlightSelectionMatches());
|
||||
}
|
||||
if (options.autoCloseBrackets) {
|
||||
extensions.push(closeBrackets());
|
||||
}
|
||||
if (options.foldGutter) {
|
||||
extensions.push(foldGutter());
|
||||
}
|
||||
|
||||
// Keymaps
|
||||
switch (options.keyMap) {
|
||||
case 'emacs':
|
||||
extensions.push(keymap.of([...emacsStyleKeymap, ...historyKeymap]));
|
||||
break;
|
||||
default:
|
||||
extensions.push(keymap.of([...defaultKeymap, ...searchKeymap, ...historyKeymap]));
|
||||
break;
|
||||
}
|
||||
|
||||
// Configurable read only
|
||||
const readOnly = new Compartment();
|
||||
// Set a custom name so later on we can retrieve this Compartment from view.state.config.compartments
|
||||
readOnly.$j_name = 'readOnly';
|
||||
extensions.push(readOnly.of(EditorState.readOnly.of(!!options.readOnly)));
|
||||
|
||||
// Check for custom extensions,
|
||||
// in format [['module1 name or URL', ['init method2']], ['module2 name or URL', ['init method2']], () => <return extension>]
|
||||
if (options.customExtensions && options.customExtensions.length) {
|
||||
options.customExtensions.forEach(extInfo => {
|
||||
// Check whether we have a callable
|
||||
if (extInfo instanceof Function) {
|
||||
extensions.push(extInfo());
|
||||
return;
|
||||
}
|
||||
// Import the module
|
||||
const [module, methods] = extInfo;
|
||||
q.push(import(module).then(modObject => {
|
||||
// Call each method
|
||||
methods.forEach(method => {
|
||||
extensions.push(modObject[method]());
|
||||
});
|
||||
}));
|
||||
});
|
||||
}
|
||||
return Promise.all(q).then(() => extensions);
|
||||
};
|
||||
|
||||
/**
|
||||
* Create an editor instance for given textarea
|
||||
*
|
||||
* @param {HTMLTextAreaElement} textarea
|
||||
* @param {Object} options
|
||||
* @returns {Promise<EditorView>}
|
||||
*/
|
||||
async function createFromTextarea(textarea, options) {
|
||||
const extensions = [minimalSetup(), await optionsToExtensions(options)];
|
||||
const view = new EditorView({
|
||||
doc: textarea.value,
|
||||
root: options.root || null,
|
||||
extensions
|
||||
});
|
||||
textarea.parentNode.insertBefore(view.dom, textarea);
|
||||
textarea.style.display = 'none';
|
||||
if (textarea.form) {
|
||||
textarea.form.addEventListener('submit', () => {
|
||||
textarea.value = view.state.doc.toString();
|
||||
});
|
||||
}
|
||||
|
||||
// Set up sizing
|
||||
if (options.width) {
|
||||
view.dom.style.width = options.width;
|
||||
}
|
||||
if (options.height) {
|
||||
view.dom.style.height = options.height;
|
||||
}
|
||||
return view;
|
||||
}
|
||||
|
||||
export { createFromTextarea, minimalSetup, optionsToExtensions };
|
||||
1
media/plg_editors_codemirror/js/codemirror.min.js
vendored
Normal file
1
media/plg_editors_codemirror/js/codemirror.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
import{highlightSpecialChars,drawSelection,lineNumbers,EditorView,highlightActiveLineGutter,highlightActiveLine,keymap}from"@codemirror/view";export{EditorView,keymap}from"@codemirror/view";import{Compartment,EditorState}from"@codemirror/state";export{EditorState}from"@codemirror/state";import{syntaxHighlighting,defaultHighlightStyle,foldGutter}from"@codemirror/language";import{history,defaultKeymap,historyKeymap,emacsStyleKeymap}from"@codemirror/commands";import{highlightSelectionMatches,searchKeymap}from"@codemirror/search";import{closeBrackets}from"@codemirror/autocomplete";const minimalSetup=()=>[highlightSpecialChars(),history(),drawSelection(),syntaxHighlighting(defaultHighlightStyle,{fallback:!0})],optionsToExtensions=async e=>{const t=[],o=[];if(e.mode){const{mode:i}=e,r=e[i]||{};o.push(import(`@codemirror/lang-${e.mode}`).then((o=>{if("php"===i)return import("@codemirror/lang-html").then((({html:i})=>{const r=e.html||{selfClosingTags:!0};t.push(o.php({baseLanguage:i(r).language}))}));"html"===i&&(r.selfClosingTags=!0),t.push(o[e.mode](r))})).catch((t=>{console.error(`Cannot creat an extension for "${e.mode}" syntax mode.`,t)})))}if(e.lineNumbers&&t.push(lineNumbers()),e.lineWrapping&&t.push(EditorView.lineWrapping),e.activeLine&&t.push(highlightActiveLineGutter(),highlightActiveLine()),e.highlightSelection&&t.push(highlightSelectionMatches()),e.autoCloseBrackets&&t.push(closeBrackets()),e.foldGutter&&t.push(foldGutter()),"emacs"===e.keyMap)t.push(keymap.of([...emacsStyleKeymap,...historyKeymap]));else t.push(keymap.of([...defaultKeymap,...searchKeymap,...historyKeymap]));const i=new Compartment;return i.$j_name="readOnly",t.push(i.of(EditorState.readOnly.of(!!e.readOnly))),e.customExtensions&&e.customExtensions.length&&e.customExtensions.forEach((e=>{if(e instanceof Function)return void t.push(e());const[i,r]=e;o.push(import(i).then((e=>{r.forEach((o=>{t.push(e[o]())}))})))})),Promise.all(o).then((()=>t))};async function createFromTextarea(e,t){const o=[minimalSetup(),await optionsToExtensions(t)],i=new EditorView({doc:e.value,root:t.root||null,extensions:o});return e.parentNode.insertBefore(i.dom,e),e.style.display="none",e.form&&e.form.addEventListener("submit",(()=>{e.value=i.state.doc.toString()})),t.width&&(i.dom.style.width=t.width),t.height&&(i.dom.style.height=t.height),i}export{createFromTextarea,minimalSetup,optionsToExtensions};
|
||||
BIN
media/plg_editors_codemirror/js/codemirror.min.js.gz
Normal file
BIN
media/plg_editors_codemirror/js/codemirror.min.js.gz
Normal file
Binary file not shown.
138
media/plg_editors_codemirror/js/joomla-editor-codemirror.js
Normal file
138
media/plg_editors_codemirror/js/joomla-editor-codemirror.js
Normal file
@ -0,0 +1,138 @@
|
||||
import { JoomlaEditor, JoomlaEditorDecorator } from 'editor-api';
|
||||
import { keymap, createFromTextarea, EditorState } from 'codemirror';
|
||||
|
||||
/**
|
||||
* @copyright (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
*/
|
||||
|
||||
/**
|
||||
* Codemirror Decorator for JoomlaEditor
|
||||
*/
|
||||
// eslint-disable-next-line max-classes-per-file
|
||||
class CodemirrorDecorator extends JoomlaEditorDecorator {
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
getValue() {
|
||||
return this.instance.state.doc.toString();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} value
|
||||
* @returns {CodemirrorDecorator}
|
||||
*/
|
||||
setValue(value) {
|
||||
const editor = this.instance;
|
||||
editor.dispatch({
|
||||
changes: {
|
||||
from: 0,
|
||||
to: editor.state.doc.length,
|
||||
insert: value
|
||||
}
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {string}
|
||||
*/
|
||||
getSelection() {
|
||||
const {
|
||||
state
|
||||
} = this.instance;
|
||||
return state.sliceDoc(state.selection.main.from, state.selection.main.to);
|
||||
}
|
||||
replaceSelection(value) {
|
||||
const v = this.instance.state.replaceSelection(value);
|
||||
this.instance.dispatch(v);
|
||||
return this;
|
||||
}
|
||||
disable(enable) {
|
||||
const editor = this.instance;
|
||||
editor.state.config.compartments.forEach((facet, compartment) => {
|
||||
if (compartment.$j_name === 'readOnly') {
|
||||
editor.dispatch({
|
||||
effects: compartment.reconfigure(EditorState.readOnly.of(!enable))
|
||||
});
|
||||
}
|
||||
});
|
||||
return this;
|
||||
}
|
||||
}
|
||||
class CodemirrorEditor extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.toggleFullScreen = () => {
|
||||
if (!this.classList.contains('fullscreen')) {
|
||||
this.classList.add('fullscreen');
|
||||
document.documentElement.scrollTop = 0;
|
||||
document.documentElement.style.overflow = 'hidden';
|
||||
} else {
|
||||
this.closeFullScreen();
|
||||
}
|
||||
};
|
||||
this.closeFullScreen = () => {
|
||||
this.classList.remove('fullscreen');
|
||||
document.documentElement.style.overflow = '';
|
||||
};
|
||||
this.interactionCallback = () => {
|
||||
JoomlaEditor.setActive(this.element.id);
|
||||
};
|
||||
}
|
||||
get options() {
|
||||
return JSON.parse(this.getAttribute('options'));
|
||||
}
|
||||
get fsCombo() {
|
||||
return this.getAttribute('fs-combo');
|
||||
}
|
||||
async connectedCallback() {
|
||||
const {
|
||||
options
|
||||
} = this;
|
||||
|
||||
// Configure full screen feature
|
||||
if (this.fsCombo) {
|
||||
options.customExtensions = options.customExtensions || [];
|
||||
options.customExtensions.push(() => keymap.of([{
|
||||
key: this.fsCombo,
|
||||
run: this.toggleFullScreen
|
||||
}, {
|
||||
key: 'Escape',
|
||||
run: this.closeFullScreen
|
||||
}]));
|
||||
|
||||
// Relocate BS modals, to resolve z-index issue in full screen
|
||||
this.bsModals = this.querySelectorAll('.joomla-modal.modal');
|
||||
this.bsModals.forEach(modal => {
|
||||
document.body.appendChild(modal);
|
||||
});
|
||||
}
|
||||
|
||||
// Create and register the Editor
|
||||
this.element = this.querySelector('textarea');
|
||||
this.instance = await createFromTextarea(this.element, options);
|
||||
this.jEditor = new CodemirrorDecorator(this.instance, 'codemirror', this.element.id);
|
||||
JoomlaEditor.register(this.jEditor);
|
||||
|
||||
// Find out when editor is interacted
|
||||
this.addEventListener('click', this.interactionCallback);
|
||||
}
|
||||
disconnectedCallback() {
|
||||
if (this.instance) {
|
||||
this.element.style.display = '';
|
||||
this.instance.destroy();
|
||||
}
|
||||
// Remove from the Joomla API
|
||||
JoomlaEditor.unregister(this.element.id);
|
||||
this.removeEventListener('click', this.interactionCallback);
|
||||
|
||||
// Restore modals
|
||||
if (this.bsModals && this.bsModals.length) {
|
||||
this.bsModals.forEach(modal => {
|
||||
this.appendChild(modal);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
customElements.define('joomla-editor-codemirror', CodemirrorEditor);
|
||||
1
media/plg_editors_codemirror/js/joomla-editor-codemirror.min.js
vendored
Normal file
1
media/plg_editors_codemirror/js/joomla-editor-codemirror.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
import{JoomlaEditor,JoomlaEditorDecorator}from"editor-api";import{keymap,createFromTextarea,EditorState}from"codemirror";class CodemirrorDecorator extends JoomlaEditorDecorator{getValue(){return this.instance.state.doc.toString()}setValue(t){const e=this.instance;return e.dispatch({changes:{from:0,to:e.state.doc.length,insert:t}}),this}getSelection(){const{state:t}=this.instance;return t.sliceDoc(t.selection.main.from,t.selection.main.to)}replaceSelection(t){const e=this.instance.state.replaceSelection(t);return this.instance.dispatch(e),this}disable(t){const e=this.instance;return e.state.config.compartments.forEach(((s,o)=>{"readOnly"===o.$j_name&&e.dispatch({effects:o.reconfigure(EditorState.readOnly.of(!t))})})),this}}class CodemirrorEditor extends HTMLElement{constructor(){super(),this.toggleFullScreen=()=>{this.classList.contains("fullscreen")?this.closeFullScreen():(this.classList.add("fullscreen"),document.documentElement.scrollTop=0,document.documentElement.style.overflow="hidden")},this.closeFullScreen=()=>{this.classList.remove("fullscreen"),document.documentElement.style.overflow=""},this.interactionCallback=()=>{JoomlaEditor.setActive(this.element.id)}}get options(){return JSON.parse(this.getAttribute("options"))}get fsCombo(){return this.getAttribute("fs-combo")}async connectedCallback(){const{options:t}=this;this.fsCombo&&(t.customExtensions=t.customExtensions||[],t.customExtensions.push((()=>keymap.of([{key:this.fsCombo,run:this.toggleFullScreen},{key:"Escape",run:this.closeFullScreen}]))),this.bsModals=this.querySelectorAll(".joomla-modal.modal"),this.bsModals.forEach((t=>{document.body.appendChild(t)}))),this.element=this.querySelector("textarea"),this.instance=await createFromTextarea(this.element,t),this.jEditor=new CodemirrorDecorator(this.instance,"codemirror",this.element.id),JoomlaEditor.register(this.jEditor),this.addEventListener("click",this.interactionCallback)}disconnectedCallback(){this.instance&&(this.element.style.display="",this.instance.destroy()),JoomlaEditor.unregister(this.element.id),this.removeEventListener("click",this.interactionCallback),this.bsModals&&this.bsModals.length&&this.bsModals.forEach((t=>{this.appendChild(t)}))}}customElements.define("joomla-editor-codemirror",CodemirrorEditor);
|
||||
Binary file not shown.
Reference in New Issue
Block a user