upgrade editor to last version and add lang tokens

hexlet-codebattle · Oct 7, 2024 · 0fc3ae1 · 0fc3ae1
1 parent 3856424
commit 0fc3ae1
Show file tree

Hide file tree

Showing 12 changed files with 597 additions and 12 deletions.
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/Editor.jsx b/services/app/apps/codebattle/assets/js/widgets/components/Editor.jsx
@@ -7,10 +7,12 @@ import React, {
   useMemo,
 } from 'react';
 
-import MonacoEditor from '@monaco-editor/react';
+import MonacoEditor, { loader } from '@monaco-editor/react';
 import cn from 'classnames';
-// import * as monacoLib from 'monaco-editor';
 
+import haskellProvider from '../config/editor/haskell';
+import sassProvider from '../config/editor/sass';
+import stylusProvider from '../config/editor/stylus';
 import GameRoomModes from '../config/gameModes';
 import languages from '../config/languages';
 import sound from '../lib/sound';
@@ -19,10 +21,27 @@ import useRemoteCursor from '../utils/useRemoteCursor';
 
 import Loading from './Loading';
 
-// loader.config({ monaco: monacoLib });
+const editorPlaceholder = 'Please! Help me!!!';
+const monacoVersion = '0.52.0';
+
+loader.config({
+  paths: {
+    vs: `https://cdn.jsdelivr.net/npm/monaco-editor@${monacoVersion}/min/vs`,
+  },
+});
+
+loader.init().then(monaco => {
+  monaco.languages.register({ id: 'haskell', aliases: ['haskell'] });
+  monaco.languages.setMonarchTokensProvider('haskell', haskellProvider);
+
+  monaco.languages.register({ id: 'stylus', aliases: ['stylus'] });
+  monaco.languages.setMonarchTokensProvider('stylus', stylusProvider);
+
+  monaco.languages.register({ id: 'scss', aliases: ['scss'] });
+  monaco.languages.setMonarchTokensProvider('scss', sassProvider);
+});
 
 let editorClipboard = '';
-// const notIncludedSyntaxHightlight = new Set(['haskell']);
 
 const useOption = ({
   wordWrap = 'off',
@@ -33,6 +52,7 @@ const useOption = ({
   loading = false,
 }) => {
   const options = useMemo(() => ({
+    placeholder: editorPlaceholder,
     wordWrap,
     lineNumbers,
     tabSize: getLanguageTabSize(syntax),
@@ -89,7 +109,6 @@ const useEditor = props => {
 
   // if (editor) {
   //   const model = editor.getModel();
-  //   console.log(model);
   //
   //   // fix flickering in editor
   //   model.forceTokenization(model.getLineCount());
@@ -112,6 +131,8 @@ const useEditor = props => {
     };
   }, [handleResize]);
 
+  const handleEditorWillMount = () => {};
+
   const handleEditorDidMount = (newEditor, newMonaco) => {
     setEditor(newEditor);
     setMonaco(newMonaco);
@@ -202,7 +223,7 @@ const useEditor = props => {
 
   return {
     options,
-    handleEditorWillMount: () => {},
+    handleEditorWillMount,
     handleEditorDidMount,
   };
 };

diff --git a/services/app/apps/codebattle/assets/js/widgets/components/LanguageIcon.jsx b/services/app/apps/codebattle/assets/js/widgets/components/LanguageIcon.jsx
@@ -3,11 +3,15 @@ import React from 'react';
 import ClojureOriginalIcon from 'react-devicons/clojure/original';
 import CppOriginalIcon from 'react-devicons/cplusplus/original';
 import CsharpOriginalIcon from 'react-devicons/csharp/original';
+import CssOriginalIcon from 'react-devicons/css3/original';
 import DartOriginalIcon from 'react-devicons/dart/original';
 import GolangOriginalIcon from 'react-devicons/go/original';
 import HaskellOriginalIcon from 'react-devicons/haskell/original';
 import JavaOriginalIcon from 'react-devicons/java/original';
+import LessOriginalIcon from 'react-devicons/less/plain-wordmark';
 import NodejsPlainIcon from 'react-devicons/nodejs/plain';
+import SassOriginalIcon from 'react-devicons/sass/original';
+import StylusOriginalIcon from 'react-devicons/stylus/original';
 import TypescriptOriginalIcon from 'react-devicons/typescript/original';
 
 import ElixirOriginalIcon from './icons/ElixirOriginalIcon';
@@ -33,6 +37,10 @@ const iconRenderers = {
   ruby: className => <RubyOriginalIcon className={className} />,
   rust: className => <RustOriginalIcon className={className} size="1.125em" />,
   ts: className => <TypescriptOriginalIcon className={className} size="1.125em" />,
+  css: className => <CssOriginalIcon className={className} size="1.125em" />,
+  stylus: className => <StylusOriginalIcon className={className} size="1.185em" />,
+  less: className => <LessOriginalIcon className={className} size="1.135em" />,
+  sass: className => <SassOriginalIcon className={className} size="1.135em" />,
   typescript: className => <TypescriptOriginalIcon className={className} size="1.125em" />,
   java: className => (
     <JavaOriginalIcon

diff --git a/services/app/apps/codebattle/assets/js/widgets/components/LanguagePickerView.jsx b/services/app/apps/codebattle/assets/js/widgets/components/LanguagePickerView.jsx
@@ -64,7 +64,7 @@ function LanguagePickerView({ changeLang, currentLangSlug, isDisabled }) {
     [currentLang],
   );
 
-  if (isDisabled) {
+  if (isDisabled || options.length < 2) {
     return (
       <button className="btn btn-sm p-2" type="button" disabled>
         <LangTitle {...currentLang} />

diff --git a/services/app/apps/codebattle/assets/js/widgets/components/UserInfo.jsx b/services/app/apps/codebattle/assets/js/widgets/components/UserInfo.jsx
@@ -15,9 +15,10 @@ import UserStats from './UserStats';
 
 function UserPopoverContent({ user }) {
   // TODO: store stats in global redux state
-  const [stats, setStats] = useState(null);
   const dispatch = useDispatch();
 
+  const [stats, setStats] = useState(null);
+
   useEffect(() => {
     const userId = user.id;
     const controller = new AbortController();
@@ -46,6 +47,7 @@ function UserPopoverContent({ user }) {
 function UserInfo({
   className,
   user,
+  lang,
   hideLink = false,
   hideInfo = false,
   truncate = false,
@@ -74,6 +76,7 @@ function UserInfo({
       <UserName
         className={userClassName}
         user={user}
+        lang={lang}
         truncate={truncate}
         isOnline={isOnline}
         hideOnlineIndicator={hideOnlineIndicator}
@@ -92,6 +95,7 @@ function UserInfo({
         <UserName
           className={userClassName}
           user={user}
+          lang={lang}
           truncate={truncate}
           isOnline={isOnline}
           hideOnlineIndicator={hideOnlineIndicator}

diff --git a/services/app/apps/codebattle/assets/js/widgets/components/UserName.jsx b/services/app/apps/codebattle/assets/js/widgets/components/UserName.jsx
@@ -7,7 +7,7 @@ import cn from 'classnames';
 import LanguageIcon from './LanguageIcon';
 
 const UserName = ({
-  className = '', user, truncate, isOnline, hideOnlineIndicator, hideLink,
+  className = '', user, lang = user.lang, truncate, isOnline, hideOnlineIndicator, hideLink,
 }) => {
   const commonClassName = 'd-flex align-items-center';
   const onlineIndicatorClassName = cn('mr-1', {
@@ -24,7 +24,7 @@ const UserName = ({
   return (
     <div className={cn(commonClassName, className)}>
       {(!hideOnlineIndicator && !user.isBot) && <FontAwesomeIcon icon={faCircle} className={onlineIndicatorClassName} />}
-      <LanguageIcon className="mr-1" lang={user.lang} />
+      <LanguageIcon className="mr-1" lang={lang} />
       {user.isBot && <FontAwesomeIcon className="mr-1" icon={faRobot} transform="up-1" />}
       {hideLink ? (
         <span className={userClassName}>{userName}</span>

diff --git a/services/app/apps/codebattle/assets/js/widgets/config/editor/haskell.js b/services/app/apps/codebattle/assets/js/widgets/config/editor/haskell.js
@@ -0,0 +1,86 @@
+import tagKeywords from './tagKeywords';
+
+export const language = {
+  tagKeywords,
+  keywords: [
+    'module',
+    'import',
+    'main',
+    'where',
+    'otherwise',
+    'newtype',
+    'definition',
+    'implementation',
+    'from',
+    'class',
+    'instance',
+    'abort',
+  ],
+
+  builtintypes: ['Int', 'Real', 'String'],
+
+  operators: [
+    '=',
+    '==',
+    '>=',
+    '<=',
+    '+',
+    '-',
+    '*',
+    '/',
+    '::',
+    '->',
+    '=:',
+    '=>',
+    '|',
+    '$',
+  ],
+
+  numbers: /-?[0-9.]/,
+
+  tokenizer: {
+    root: [
+      { include: '@whitespace' },
+
+      [/->/, 'operators'],
+
+      [/\|/, 'operators'],
+
+      [/(\w*)(\s?)(::)/, ['keyword', 'white', 'operators']],
+
+      [/[+\-*/=<>$]/, 'operators'],
+
+      [
+        /[a-zA-Z_][a-zA-Z0-9_]*/,
+        {
+          cases: {
+            '@builtintypes': 'type',
+            '@keywords': 'keyword',
+            '@default': '',
+          },
+        },
+      ],
+
+      [/[()[\],:]/, 'delimiter'],
+
+      [/@numbers/, 'number'],
+
+      [/(")(.*)(")/, ['string', 'string', 'string']],
+    ],
+
+    comment: [
+      [/[^/*]+/, 'comment'],
+      [/\*\//, 'comment', '@pop'],
+      [/[/*]/, 'comment'],
+    ],
+
+    whitespace: [
+      [/[ \t\r\n]+/, 'white'],
+      [/\/\*/, 'comment', '@comment'],
+      [/\/\/.*$/, 'comment'],
+      [/--.*$/, 'comment'],
+    ],
+  },
+};
+
+export default language;