Skip to content

Commit

Permalink
codemirror 6
Browse files Browse the repository at this point in the history
  • Loading branch information
@recca0120
recca0120 committed Mar 13, 2024
1 parent d551fea commit 82322d8
Show file tree
Hide file tree
Showing 8 changed files with 798 additions and 134 deletions.
702 changes: 660 additions & 42 deletions package-lock.json
View file

Large diffs are not rendered by default.

17 changes: 14 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,21 @@
"prettier-project": "npm run prettier-write -- resources/**/*.{js,scss,ts}"
},
"dependencies": {
"@types/codemirror": "5.60.7",
"@codemirror/lang-css": "^6.2.1",
"@codemirror/lang-html": "^6.4.8",
"@codemirror/lang-javascript": "^6.2.2",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-markdown": "^6.2.4",
"@codemirror/lang-php": "^6.0.1",
"@codemirror/lang-vue": "^0.1.3",
"@codemirror/lang-xml": "^6.1.0",
"@codemirror/language": "^6.10.1",
"@codemirror/theme-one-dark": "^6.1.2",
"@replit/codemirror-vim": "^6.2.0",
"axios": "^1.6.7",
"cli-spinners": "^2.9.2",
"codemirror": "^5.65.1",
"cm6-theme-material-dark": "^0.2.0",
"codemirror": "^6.0.1",
"jquery-mousewheel": "^3.1.13",
"jquery.terminal": "^2.39.0"
},
Expand Down Expand Up @@ -62,4 +73,4 @@
"node"
]
}
}
}
2 changes: 1 addition & 1 deletion public/css/terminal.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/js/terminal.js
View file

Large diffs are not rendered by default.

25 changes: 20 additions & 5 deletions resources/sass/app.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@import 'node_modules/jquery.terminal/css/jquery.terminal';
@import 'node_modules/codemirror/lib/codemirror';
@import 'node_modules/codemirror/addon/dialog/dialog';
@import 'node_modules/codemirror/addon/display/fullscreen';
@import 'node_modules/codemirror/theme/monokai';
// @import 'node_modules/codemirror/lib/codemirror';
// @import 'node_modules/codemirror/addon/dialog/dialog';
// @import 'node_modules/codemirror/addon/display/fullscreen';
// @import 'node_modules/codemirror/theme/monokai';

#terminal-shell {
padding: 10px 10px !important;
Expand All @@ -18,8 +18,10 @@
font-weight: normal !important;
font-size: 12px;
overflow: hidden;

a {
color: #0f60ff !important;

&:hover {
color: red !important;
text-decoration: underline !important;
Expand Down Expand Up @@ -60,5 +62,18 @@
// }

.CodeMirror-fullscreen {
position: fixed !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 50000 !important;
}

.cm-editor {
height: 100%;
}

.cm-panels-bottom {
overflow: hidden;
}
}
144 changes: 80 additions & 64 deletions resources/ts/commands/vim.ts
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,105 @@
import {Command} from '../command';
import 'codemirror/keymap/vim';
import 'codemirror/addon/dialog/dialog';
import 'codemirror/addon/search/searchcursor';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/addon/display/fullscreen';
import 'codemirror/mode/clike/clike';
import 'codemirror/mode/meta';
import 'codemirror/mode/php/php';
import 'codemirror/mode/css/css';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/xml/xml';
import * as CodeMirror from 'codemirror';
import {HttpClient} from '../httpclient';
import {OutputFormatter} from '../output-formatter';
import { Command } from '../command';
import { HttpClient } from '../httpclient';
import { OutputFormatter } from '../output-formatter';
import { basicSetup, EditorView } from 'codemirror';
import { vim, Vim as _Vim } from '@replit/codemirror-vim'
import { javascript } from '@codemirror/lang-javascript';
import { css } from '@codemirror/lang-css';
import { php } from '@codemirror/lang-php';
import { json } from '@codemirror/lang-json';
import { vue } from '@codemirror/lang-vue';
import { html } from '@codemirror/lang-html';
import { markdown } from '@codemirror/lang-markdown';
import { xml } from '@codemirror/lang-xml';
import { materialDark } from 'cm6-theme-material-dark'
import { EditorState, Compartment } from '@codemirror/state';

const languageConf = new Compartment

export class Editor {
private textarea: HTMLTextAreaElement;
private editor: CodeMirror.EditorFromTextArea;
private wapperElement: HTMLElement;
private doc: CodeMirror.Doc;
private section: HTMLElement;
private cm: EditorView;

constructor() {
this.textarea = document.createElement('textarea');
document.body.appendChild(this.textarea);

this.editor = CodeMirror.fromTextArea(this.textarea, {
lineNumbers: true,
keyMap: 'vim',
showCursorWhenSelecting: true,
theme: 'monokai',
});
this.section = document.createElement('div');
this.section.classList.add('CodeMirror-fullscreen');
this.section.style.display = 'none';

this.wapperElement = this.editor.getWrapperElement();
this.wapperElement.className += ' CodeMirror-fullscreen';
document.body.appendChild(this.section);

this.doc = this.editor.getDoc();
this.cm = new EditorView({
state: this.createState(),
parent: this.section,
});

(<any>CodeMirror)['Vim']['defineEx']('q', 'q', () => {
this.textarea.dispatchEvent(new Event('q'));
_Vim.defineEx('q', 'q', () => {
this.cm.dom.dispatchEvent(new Event('q'));
this.quit();
});

(<any>CodeMirror)['Vim']['defineEx']('w', 'w', () => {
this.textarea.dispatchEvent(new Event('w'));
_Vim.defineEx('w', 'w', () => {
this.cm.dom.dispatchEvent(new Event('w'));
});

(<any>CodeMirror)['Vim']['defineEx']('wq', 'wq', () => {
this.textarea.dispatchEvent(new Event('wq'));
_Vim.defineEx('wq', 'wq', () => {
this.cm.dom.dispatchEvent(new Event('wq'));
this.quit();
});

// this.editor = CodeMirror.fromTextArea(this.textarea, {
// lineNumbers: true,
// keyMap: 'vim',
// showCursorWhenSelecting: true,
// theme: 'monokai',
// });
}

on(type: string, cb: any): Editor {
this.textarea.addEventListener(type, cb);
this.cm.dom.addEventListener(type, cb);

return this;
}

show(): Editor {
this.editor.getWrapperElement().style.display = 'block';
setTimeout(() => {
this.editor.focus();
}, 200);
this.section.style.display = 'block';

// setTimeout(() => {
// this.cm.focus();
// }, 200);

return this;
}

hide(): Editor {
this.wapperElement.style.display = 'none';
this.section.style.display = 'none';

return this;
}

setText(text: string): Editor {
this.doc.setValue(text);
// this.cm.dispatch({
// changes: { from: 0, to: this.cm.state.doc.length, insert: text },
// sequential: true
// });
this.cm.setState(this.createState({ doc: text }));

return this;
}

getText(): string {
return this.doc.getValue();
return this.cm.state.doc.toString();
}

setCursor(pos: any): Editor {
this.doc.setCursor(pos);
this.cm.dispatch({ selection: { anchor: pos } })

return this;
}

setModeByFile(file: string): Editor {
this.editor.setOption('mode', this.getModeByFile(file).mode);
this.cm.dispatch({
effects: languageConf.reconfigure(this.getLanguageByFile(file)),
})

return this;
}
Expand All @@ -102,21 +111,28 @@ export class Editor {
return this;
}

private getModeByFile(file: string): any {
const matches = file.match(/.+\.([^.]+)$/);

if (matches && matches.length > 0) {
return (<any>CodeMirror)['findModeByExtension'](matches[1]);
}
private getLanguageByFile(file: string): any {
const lookup: any = {
'html': html(),
'htm': html(),
'js': javascript(),
'css': css(),
'json': json(),
'vue': vue(),
'md': markdown(),
'xml': xml(),
'php': php(),
};
const matches: any = file.match(/.+\.([^.]+)$/);

if (/\//.test(file)) {
return (<any>CodeMirror)['findModeByMIME'](file);
}
return lookup[(matches[1] ?? 'php').toLowerCase()];
}

return {
mode: 'php',
mime: 'application/x-httpd-php',
};
private createState(params = {}) {
return EditorState.create({
extensions: [vim(), languageConf.of(php()), basicSetup, materialDark],
...params
});
}
}

Expand Down Expand Up @@ -174,10 +190,10 @@ export class Vim extends Command {
const text: string = await this.client.jsonrpc(cmd.method, [this.file]);

this.editor
.setModeByFile(this.file)
.show()
.setCursor(0)
.setText(text)
.setCursor(0);
.setModeByFile(this.file)
.show();
} catch (e) {
reject(e);
}
Expand Down
2 changes: 1 addition & 1 deletion resources/ts/output-formatter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export class OutputFormatterStyle {
private foreground: string = '';
private background: string = '';

constructor(foreground: string = 'white', background: string = 'black') {
constructor(foreground: string = 'white', background: string = 'transparent') {
this.foreground = this.getColor(foreground);
this.background = this.getColor(background);
}
Expand Down
38 changes: 21 additions & 17 deletions webpack.mix.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const fse = require('fs-extra');
const mix = require('laravel-mix');
const path = require('path');
const publicPath = path.resolve(__dirname, '../../../../vendor/terminal');
const publicPath = path.resolve(__dirname, '../laravel/public/vendor/terminal');

/*
|--------------------------------------------------------------------------
Expand All @@ -24,20 +24,24 @@ mix.options({
files: [`${publicPath}/js/app.js`, `${publicPath}/css/app.css`],
});

mix.ts('resources/ts/app.ts', 'public/js/terminal.js').sass('resources/sass/app.scss', 'public/css/terminal.css');
mix.ts('resources/ts/app.ts', 'public/js/terminal.js')
.sass('resources/sass/app.scss', 'public/css/terminal.css');

// mix.then(() => {
// try {
// fse.copyFileSync(
// path.resolve(__dirname, 'public/css/terminal.css'),
// path.resolve(publicPath, 'css/terminal.css')
// );
// fse.copyFileSync(path.resolve(__dirname, 'public/js/terminal.js'), path.resolve(publicPath, 'js/terminal.js'));
// fse.copyFileSync(
// path.resolve(__dirname, 'resources/views/index.blade.php'),
// path.resolve(publicPath, '../../laravel/resources/views/vendor/terminal/index.blade.php')
// );
// } catch (e) {
// console.error(e);
// }
// });
mix.then(() => {
try {
fse.copyFileSync(
path.resolve(__dirname, 'public/css/terminal.css'),
path.resolve(publicPath, 'css/terminal.css')
);
fse.copyFileSync(
path.resolve(__dirname, 'public/js/terminal.js'),
path.resolve(publicPath, 'js/terminal.js')
);
fse.copyFileSync(
path.resolve(__dirname, 'resources/views/index.blade.php'),
path.resolve(publicPath, '../../laravel/resources/views/vendor/terminal/index.blade.php')
);
} catch (e) {
console.error(e);
}
});

0 comments on commit 82322d8

Please sign in to comment.