mirror of
https://github.com/pterodactyl/panel.git
synced 2024-11-25 02:22:36 +01:00
ui: remove unused codemirror 5 editor
This commit is contained in:
Matthew Penner
parent
3bf5a71802
commit
c475d601f3
@ -52,7 +52,6 @@
|
||||
"boring-avatars": "1.7.0",
|
||||
"chart.js": "3.9.1",
|
||||
"classnames": "2.3.2",
|
||||
"codemirror": "5.57.0",
|
||||
"copy-to-clipboard": "3.3.2",
|
||||
"date-fns": "2.29.3",
|
||||
"debounce": "1.2.1",
|
||||
@ -89,7 +88,6 @@
|
||||
"@testing-library/dom": "8.19.0",
|
||||
"@testing-library/react": "13.4.0",
|
||||
"@testing-library/user-event": "14.4.3",
|
||||
"@types/codemirror": "0.0.109",
|
||||
"@types/debounce": "1.2.1",
|
||||
"@types/events": "3.0.0",
|
||||
"@types/node": "18.11.9",
|
||||
|
||||
@ -1,219 +0,0 @@
|
||||
import CodeMirror from 'codemirror';
|
||||
import type { CSSProperties } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
import modes from '@/modes';
|
||||
|
||||
require('codemirror/lib/codemirror.css');
|
||||
require('codemirror/theme/ayu-mirage.css');
|
||||
require('codemirror/addon/edit/closebrackets');
|
||||
require('codemirror/addon/edit/closetag');
|
||||
require('codemirror/addon/edit/matchbrackets');
|
||||
require('codemirror/addon/edit/matchtags');
|
||||
require('codemirror/addon/edit/trailingspace');
|
||||
require('codemirror/addon/fold/foldcode');
|
||||
require('codemirror/addon/fold/foldgutter.css');
|
||||
require('codemirror/addon/fold/foldgutter');
|
||||
require('codemirror/addon/fold/brace-fold');
|
||||
require('codemirror/addon/fold/comment-fold');
|
||||
require('codemirror/addon/fold/indent-fold');
|
||||
require('codemirror/addon/fold/markdown-fold');
|
||||
require('codemirror/addon/fold/xml-fold');
|
||||
require('codemirror/addon/hint/css-hint');
|
||||
require('codemirror/addon/hint/html-hint');
|
||||
require('codemirror/addon/hint/javascript-hint');
|
||||
require('codemirror/addon/hint/show-hint.css');
|
||||
require('codemirror/addon/hint/show-hint');
|
||||
require('codemirror/addon/hint/sql-hint');
|
||||
require('codemirror/addon/hint/xml-hint');
|
||||
require('codemirror/addon/mode/simple');
|
||||
require('codemirror/addon/dialog/dialog.css');
|
||||
require('codemirror/addon/dialog/dialog');
|
||||
require('codemirror/addon/scroll/annotatescrollbar');
|
||||
require('codemirror/addon/scroll/scrollpastend');
|
||||
require('codemirror/addon/scroll/simplescrollbars.css');
|
||||
require('codemirror/addon/scroll/simplescrollbars');
|
||||
require('codemirror/addon/search/jump-to-line');
|
||||
require('codemirror/addon/search/match-highlighter');
|
||||
require('codemirror/addon/search/matchesonscrollbar.css');
|
||||
require('codemirror/addon/search/matchesonscrollbar');
|
||||
require('codemirror/addon/search/search');
|
||||
require('codemirror/addon/search/searchcursor');
|
||||
|
||||
require('codemirror/mode/brainfuck/brainfuck');
|
||||
require('codemirror/mode/clike/clike');
|
||||
require('codemirror/mode/css/css');
|
||||
require('codemirror/mode/dart/dart');
|
||||
require('codemirror/mode/diff/diff');
|
||||
require('codemirror/mode/dockerfile/dockerfile');
|
||||
require('codemirror/mode/erlang/erlang');
|
||||
require('codemirror/mode/gfm/gfm');
|
||||
require('codemirror/mode/go/go');
|
||||
require('codemirror/mode/handlebars/handlebars');
|
||||
require('codemirror/mode/htmlembedded/htmlembedded');
|
||||
require('codemirror/mode/htmlmixed/htmlmixed');
|
||||
require('codemirror/mode/http/http');
|
||||
require('codemirror/mode/javascript/javascript');
|
||||
require('codemirror/mode/jsx/jsx');
|
||||
require('codemirror/mode/julia/julia');
|
||||
require('codemirror/mode/lua/lua');
|
||||
require('codemirror/mode/markdown/markdown');
|
||||
require('codemirror/mode/nginx/nginx');
|
||||
require('codemirror/mode/perl/perl');
|
||||
require('codemirror/mode/php/php');
|
||||
require('codemirror/mode/properties/properties');
|
||||
require('codemirror/mode/protobuf/protobuf');
|
||||
require('codemirror/mode/pug/pug');
|
||||
require('codemirror/mode/python/python');
|
||||
require('codemirror/mode/rpm/rpm');
|
||||
require('codemirror/mode/ruby/ruby');
|
||||
require('codemirror/mode/rust/rust');
|
||||
require('codemirror/mode/sass/sass');
|
||||
require('codemirror/mode/shell/shell');
|
||||
require('codemirror/mode/smarty/smarty');
|
||||
require('codemirror/mode/sql/sql');
|
||||
require('codemirror/mode/swift/swift');
|
||||
require('codemirror/mode/toml/toml');
|
||||
require('codemirror/mode/twig/twig');
|
||||
require('codemirror/mode/vue/vue');
|
||||
require('codemirror/mode/xml/xml');
|
||||
require('codemirror/mode/yaml/yaml');
|
||||
|
||||
const EditorContainer = styled.div`
|
||||
min-height: 16rem;
|
||||
height: calc(100vh - 20rem);
|
||||
${tw`relative`};
|
||||
|
||||
> div {
|
||||
${tw`rounded h-full`};
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
font-size: 12px;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
padding: 1px 12px 0 12px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-foldmarker {
|
||||
color: #cbccc6;
|
||||
text-shadow: none;
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export interface Props {
|
||||
style?: CSSProperties;
|
||||
initialContent?: string;
|
||||
mode: string;
|
||||
filename?: string;
|
||||
onModeChanged: (mode: string) => void;
|
||||
fetchContent: (callback: () => Promise<string>) => void;
|
||||
onContentSaved: () => void;
|
||||
}
|
||||
|
||||
const findModeByFilename = (filename: string) => {
|
||||
for (let i = 0; i < modes.length; i++) {
|
||||
const info = modes[i];
|
||||
|
||||
if (info?.file !== undefined && info.file.test(filename)) {
|
||||
return info;
|
||||
}
|
||||
}
|
||||
|
||||
const dot = filename.lastIndexOf('.');
|
||||
const ext = dot > -1 && filename.substring(dot + 1, filename.length);
|
||||
|
||||
if (ext) {
|
||||
for (let i = 0; i < modes.length; i++) {
|
||||
const info = modes[i];
|
||||
if (info?.ext !== undefined) {
|
||||
for (let j = 0; j < info.ext.length; j++) {
|
||||
if (info.ext[j] === ext) {
|
||||
return info;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export default ({ style, initialContent, filename, mode, fetchContent, onContentSaved, onModeChanged }: Props) => {
|
||||
const [editor, setEditor] = useState<CodeMirror.Editor>();
|
||||
|
||||
const ref = useCallback<(_?: unknown) => void>(node => {
|
||||
if (node === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
const e = CodeMirror.fromTextArea(node as HTMLTextAreaElement, {
|
||||
mode: 'text/plain',
|
||||
theme: 'ayu-mirage',
|
||||
indentUnit: 4,
|
||||
smartIndent: true,
|
||||
tabSize: 4,
|
||||
indentWithTabs: false,
|
||||
lineWrapping: true,
|
||||
lineNumbers: true,
|
||||
fixedGutter: true,
|
||||
scrollbarStyle: 'overlay',
|
||||
coverGutterNextToScrollbar: false,
|
||||
readOnly: false,
|
||||
showCursorWhenSelecting: false,
|
||||
autofocus: false,
|
||||
spellcheck: true,
|
||||
autocorrect: false,
|
||||
autocapitalize: false,
|
||||
lint: false,
|
||||
// @ts-expect-error this property is actually used, the d.ts file for CodeMirror is incorrect.
|
||||
autoCloseBrackets: true,
|
||||
matchBrackets: true,
|
||||
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
|
||||
});
|
||||
|
||||
setEditor(e);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (filename === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
onModeChanged(findModeByFilename(filename)?.mime || 'text/plain');
|
||||
}, [filename]);
|
||||
|
||||
useEffect(() => {
|
||||
editor && editor.setOption('mode', mode);
|
||||
}, [editor, mode]);
|
||||
|
||||
useEffect(() => {
|
||||
editor && editor.setValue(initialContent || '');
|
||||
}, [editor, initialContent]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!editor) {
|
||||
fetchContent(() => Promise.reject(new Error('no editor session has been configured')));
|
||||
return;
|
||||
}
|
||||
|
||||
editor.addKeyMap({
|
||||
'Ctrl-S': () => onContentSaved(),
|
||||
'Cmd-S': () => onContentSaved(),
|
||||
});
|
||||
|
||||
fetchContent(() => Promise.resolve(editor.getValue()));
|
||||
}, [editor, fetchContent, onContentSaved]);
|
||||
|
||||
return (
|
||||
<EditorContainer style={style}>
|
||||
<textarea ref={ref} />
|
||||
</EditorContainer>
|
||||
);
|
||||
};
|
||||
24
yarn.lock
24
yarn.lock
@ -1159,13 +1159,6 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.3.tgz#3c90752792660c4b562ad73b3fbd68bf3bc7ae07"
|
||||
integrity sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==
|
||||
|
||||
"@types/codemirror@0.0.109":
|
||||
version "0.0.109"
|
||||
resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-0.0.109.tgz#89d575ff1c7b462c4c3b8654f8bb38e5622e9036"
|
||||
integrity sha512-cSdiHeeLjvGn649lRTNeYrVCDOgDrtP+bDDSFDd1TF+i0jKGPDRozno2NOJ9lTniso+taiv4kiVS8dgM8Jm5lg==
|
||||
dependencies:
|
||||
"@types/tern" "*"
|
||||
|
||||
"@types/concat-stream@^1.6.0":
|
||||
version "1.6.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/concat-stream/-/concat-stream-1.6.1.tgz#24bcfc101ecf68e886aaedce60dfd74b632a1b74"
|
||||
@ -1178,11 +1171,6 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.1.tgz#79b65710bc8b6d44094d286aecf38e44f9627852"
|
||||
integrity sha512-epMsEE85fi4lfmJUH/89/iV/LI+F5CvNIvmgs5g5jYFPfhO2S/ae8WSsLOKWdwtoaZw9Q2IhJ4tQ5tFCcS/4HA==
|
||||
|
||||
"@types/estree@*":
|
||||
version "0.0.45"
|
||||
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884"
|
||||
integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==
|
||||
|
||||
"@types/events@3.0.0":
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
|
||||
@ -1290,13 +1278,6 @@
|
||||
"@types/react" "*"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@types/tern@*":
|
||||
version "0.23.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.3.tgz#4b54538f04a88c9ff79de1f6f94f575a7f339460"
|
||||
integrity sha512-imDtS4TAoTcXk0g7u4kkWqedB3E4qpjXzCpD2LU5M5NAXHzCDsypyvXSaG7mM8DKYkCRa7tFp4tS/lp/Wo7Q3w==
|
||||
dependencies:
|
||||
"@types/estree" "*"
|
||||
|
||||
"@typescript-eslint/eslint-plugin@5.41.0":
|
||||
version "5.41.0"
|
||||
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.41.0.tgz#f8eeb1c6bb2549f795f3ba71aec3b38d1ab6b1e1"
|
||||
@ -1767,11 +1748,6 @@ clean-set@^1.1.1:
|
||||
resolved "https://registry.yarnpkg.com/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
|
||||
integrity sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==
|
||||
|
||||
codemirror@5.57.0:
|
||||
version "5.57.0"
|
||||
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.57.0.tgz#d26365b72f909f5d2dbb6b1209349ca1daeb2d50"
|
||||
integrity sha512-WGc6UL7Hqt+8a6ZAsj/f1ApQl3NPvHY/UQSzG6fB6l4BjExgVdhFaxd7mRTw1UCiYe/6q86zHP+kfvBQcZGvUg==
|
||||
|
||||
color-convert@^1.9.0:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user