Merge pull request #25358 from abpframework/issue-codemirror

Codemirror version changed to 6.0.2

npm/packs/codemirror/abp.resourcemapping.js

@@ -1,8 +1,6 @@
 module.exports = {
     mappings: {
-        "@node_modules/codemirror/lib/*.*": "@libs/codemirror/",
-        "@node_modules/codemirror/mode/**/*.*": "@libs/codemirror/mode/",
-        "@node_modules/codemirror/theme/**/*.*": "@libs/codemirror/theme/",
-        "@node_modules/codemirror/addon/**/*.*": "@libs/codemirror/addon/"
+        "@node_modules/@abp/codemirror/src/*.*": "@libs/codemirror/",
+        "@node_modules/@abp/codemirror/src/mode/**/*.*": "@libs/codemirror/mode/"
     }
 }

npm/packs/codemirror/package.json

@@ -4,9 +4,19 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "node ./scripts/build.js"
+  },
   "dependencies": {
     "@abp/core": "~10.4.1",
-    "codemirror": "^5.65.1"
+    "@codemirror/lang-css": "^6.0.0",
+    "@codemirror/lang-javascript": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
+    "codemirror": "^6.0.2"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.0"
   },
   "gitHead": "bb4ea17d5996f01889134c138d00b6c8f858a431",
   "homepage": "https://abp.io",

npm/packs/codemirror/scripts/build.js

@@ -0,0 +1,21 @@
+const { build } = require('esbuild');
+const path = require('path');
+
+async function run() {
+    await build({
+        entryPoints: [path.join(__dirname, 'entry.js')],
+        outfile: path.join(__dirname, '..', 'src', 'codemirror.js'),
+        bundle: true,
+        format: 'iife',
+        platform: 'browser',
+        target: ['es2019'],
+        sourcemap: false,
+        minify: false,
+        legalComments: 'eof'
+    });
+}
+
+run().catch(error => {
+    console.error(error);
+    process.exit(1);
+});

npm/packs/codemirror/scripts/entry.js

@@ -0,0 +1,146 @@
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { basicSetup, minimalSetup } from 'codemirror';
+import { css } from '@codemirror/lang-css';
+import { javascript } from '@codemirror/lang-javascript';
+
+const modeFactories = {
+    css: css,
+    javascript: javascript,
+    js: javascript
+};
+
+function getModeExtension(mode) {
+    if (!mode) {
+        return null;
+    }
+
+    const modeName = typeof mode === 'string'
+        ? mode
+        : (mode.name || mode.mode || mode.helperType || '');
+    const factory = modeFactories[modeName.toLowerCase()];
+
+    return factory ? factory() : null;
+}
+
+function normalizeWrapperClasses(textarea) {
+    return (textarea.className || '')
+        .split(/\s+/)
+        .filter(Boolean)
+        .filter(name => name !== 'form-control' && name !== 'valid' && name !== 'input-validation-error')
+        .join(' ');
+}
+
+function syncTextarea(textarea, view) {
+    textarea.value = view.state.doc.toString();
+}
+
+function createWrapper(textarea) {
+    const wrapper = document.createElement('div');
+    const extraClasses = normalizeWrapperClasses(textarea);
+    const style = window.getComputedStyle(textarea);
+
+    wrapper.className = extraClasses
+        ? 'abp-codemirror ' + extraClasses
+        : 'abp-codemirror';
+    if (textarea.id) {
+        wrapper.id = textarea.id + '__codemirror';
+    }
+
+    wrapper.style.width = '100%';
+
+    if (style.height && style.height !== 'auto' && style.height !== '0px') {
+        wrapper.style.height = style.height;
+    } else {
+        wrapper.style.minHeight = '12rem';
+    }
+
+    return wrapper;
+}
+
+function getEditorSetup(options) {
+    // CodeMirror 5 default: line numbers off unless lineNumbers === true
+    return options.lineNumbers === true ? basicSetup : minimalSetup;
+}
+
+function createState(textarea, options) {
+    const extensions = [
+        getEditorSetup(options),
+        EditorView.updateListener.of(update => {
+            if (update.docChanged) {
+                syncTextarea(textarea, update.view);
+            }
+        })
+    ];
+
+    const modeExtension = getModeExtension(options.mode);
+
+    if (modeExtension) {
+        extensions.push(modeExtension);
+    }
+
+    if (options.readOnly) {
+        extensions.push(EditorState.readOnly.of(true));
+    }
+
+    return EditorState.create({
+        doc: textarea.value || '',
+        extensions
+    });
+}
+
+function createCompatibilityEditor(textarea, options) {
+    const wrapper = createWrapper(textarea);
+
+    textarea.parentNode.insertBefore(wrapper, textarea.nextSibling);
+    textarea.style.display = 'none';
+    textarea.setAttribute('aria-hidden', 'true');
+
+    const view = new EditorView({
+        state: createState(textarea, options || {}),
+        parent: wrapper
+    });
+
+    const save = function () {
+        syncTextarea(textarea, view);
+    };
+
+    if (textarea.form) {
+        textarea.form.addEventListener('submit', save);
+    }
+
+    return {
+        getValue: function () {
+            return view.state.doc.toString();
+        },
+        setValue: function (value) {
+            view.dispatch({
+                changes: {
+                    from: 0,
+                    to: view.state.doc.length,
+                    insert: value || ''
+                }
+            });
+
+            save();
+        },
+        refresh: function () {
+            if (typeof view.requestMeasure === 'function') {
+                view.requestMeasure();
+            }
+        },
+        focus: function () {
+            view.focus();
+        },
+        save: save,
+        getWrapperElement: function () {
+            return wrapper;
+        }
+    };
+}
+
+window.CodeMirror = window.CodeMirror || {};
+window.CodeMirror.loadedModes = window.CodeMirror.loadedModes || {};
+window.CodeMirror.fromTextArea = function (textarea, options) {
+    return createCompatibilityEditor(textarea, options || {});
+};

npm/packs/codemirror/src/codemirror.css

@@ -0,0 +1,31 @@
+.abp-codemirror {
+    border: 1px solid var(--bs-border-color, #dee2e6);
+    border-radius: var(--bs-border-radius, 0.375rem);
+    background: var(--bs-body-bg, #ffffff);
+    overflow: hidden;
+}
+
+.abp-codemirror .cm-editor {
+    height: 100%;
+}
+
+.abp-codemirror .cm-scroller {
+    min-height: 100%;
+    height: 100%;
+    overflow: auto;
+    font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace);
+}
+
+.abp-codemirror .cm-content,
+.abp-codemirror .cm-gutter {
+    min-height: 100%;
+}
+
+.abp-codemirror .cm-focused {
+    outline: none;
+}
+
+.abp-codemirror:focus-within {
+    border-color: var(--bs-focus-ring-color, #86b7fe);
+    box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width, 0.25rem) var(--bs-focus-ring-color, rgba(13, 110, 253, 0.25));
+}

npm/packs/codemirror/src/mode/css/css.js

@@ -0,0 +1,5 @@
+(function () {
+    window.CodeMirror = window.CodeMirror || {};
+    window.CodeMirror.loadedModes = window.CodeMirror.loadedModes || {};
+    window.CodeMirror.loadedModes.css = true;
+})();

npm/packs/codemirror/src/mode/javascript/javascript.js

@@ -0,0 +1,6 @@
+(function () {
+    window.CodeMirror = window.CodeMirror || {};
+    window.CodeMirror.loadedModes = window.CodeMirror.loadedModes || {};
+    window.CodeMirror.loadedModes.javascript = true;
+    window.CodeMirror.loadedModes.js = true;
+})();