docs(Code): improve documentation

packages/code/src/components/DiffEditor/stories/DiffEditor.cases.stories.tsx

@@ -8,7 +8,6 @@ import {
   MultipleEds,
   Programatic,
   Actions,
-  MultipleLangs,
   Shortcuts,
   CustomThemed,
 } from './cases';
@@ -54,10 +53,3 @@ export const MultipleDiffEditors: DiffEditorStory = {
     <MultipleEds {...props} />
   ),
 };
-
-export const MultipleLanguages: DiffEditorStory = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ originalValue, modifiedValue, ...props }) => (
-    <MultipleLangs {...props} />
-  ),
-};

packages/code/src/components/DiffEditor/stories/cases/CustomLang.tsx

@@ -4,10 +4,7 @@ import type * as monaco from 'monaco-editor-core';
 import { DiffEditor, type DiffEditorProps } from '../../';
 import { rawLanguage } from '../../../Editor/__stories__/languages/rawConfig';
 import { dedalLanguage } from '../../../Editor/__stories__/languages/dedal';
-import {
-  registerCompletionProvider,
-  registerStyleTokenizer,
-} from '../../../Editor';
+import { registerLanguage } from '../../../Editor';
 
 type Monaco = typeof monaco;
 
@@ -36,18 +33,11 @@ export const CustomLang = ({
   const monacoRef = React.useRef<Monaco>();
 
   const registerLanguageProviders = (monaco) => {
-    // Register highlighting
-    registerStyleTokenizer(
-      monaco,
-      languages[langId].id,
-      languages[langId].lang,
-    );
-    // Register autocompletion
-    registerCompletionProvider(
-      monaco,
-      languages[langId].id,
-      languages[langId].completionProvider,
-    );
+    registerLanguage(monaco, languages[langId].id)
+      // register highlighting
+      .registerStyleTokenizer(languages[langId].lang)
+      // register autocompletion
+      .registerCompletionProvider(languages[langId].completionProvider);
   };
 
   const handleEditorDidMount = (

packages/code/src/components/DiffEditor/stories/cases/index.ts

@@ -1,7 +1,6 @@
 export * from './Actions';
 export * from './CustomLang';
 export * from './MultipleEds';
-export * from './MultipleLangs';
 export * from './Programatic';
 export * from './Shortcuts';
 export * from './CustomThemed';

packages/code/src/components/Editor/api/registerStyleTokenizer.ts

@@ -9,12 +9,6 @@ export const registerStyleTokenizer = (
     | monaco.languages.IMonarchLanguage
     | monaco.Thenable<monaco.languages.IMonarchLanguage>,
 ): void => {
-  if (languageID == '') return;
-
-  if (monaco.languages.getEncodedLanguageId(languageID) == 0) {
-    monaco.languages.register({ id: languageID });
-  }
-
   monaco.languages.onLanguage(languageID, () => {
     monaco.languages.setMonarchTokensProvider(languageID, tokenizer);
   });

packages/code/src/components/Editor/stories/Editor.cases.stories.tsx

@@ -9,7 +9,6 @@ import {
   MultipleEds,
   Programatic,
   Actions,
-  MultipleLangs,
   Shortcuts,
   CustomThemed,
 } from './cases';
@@ -27,8 +26,8 @@ const meta: Meta<typeof Editor> = {
 export default meta;
 type EditorStory = StoryObj<typeof Editor>;
 
-export const MultipleCustomLanguages: EditorStory = {
-  render: MultipleLangs,
+export const CustomLanguageWithValidation: EditorStory = {
+  render: CustomLang,
 };
 
 export const WithActions: EditorStory = {
@@ -51,7 +50,3 @@ export const MultipleEditors: EditorStory = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ value, ...props }) => <MultipleEds {...props} />,
 };
-
-export const CustomLanguageWithValidation: EditorStory = {
-  render: CustomLang,
-};

packages/code/src/components/Editor/stories/Editor.mdx

@@ -69,6 +69,11 @@ export const CustomThemed = () => {
 `}
 />
 
+## Setting a custom language
+
+The Editor supports custom languages. To use a custom language, the language and its configuration must be registered with the editor.
+
+
 ## Hooks
 
 ### useEditor

packages/code/src/components/Editor/stories/cases/CustomLang.tsx

@@ -1,12 +1,7 @@
 import * as React from 'react';
 import type * as monaco from 'monaco-editor-core';
 
-import {
-  Editor,
-  EditorProps,
-  registerStyleTokenizer,
-  registerCompletionProvider,
-} from '../../';
+import { Editor, EditorProps, registerLanguage } from '../../';
 import { rawLanguage } from '../../__stories__/languages/rawConfig';
 import { dedalLanguage } from '../../__stories__/languages/dedal';
 
@@ -37,18 +32,11 @@ export const CustomLang = ({
   const monacoRef = React.useRef<Monaco>();
 
   const registerLanguageProviders = (monaco) => {
-    // Register highlighting
-    registerStyleTokenizer(
-      monaco,
-      languages[langId].id,
-      languages[langId].lang,
-    );
-    // Register autocompletion
-    registerCompletionProvider(
-      monaco,
-      languages[langId].id,
-      languages[langId].completionProvider,
-    );
+    registerLanguage(monaco, languages[langId].id)
+      // register highlighting
+      .registerStyleTokenizer(languages[langId].lang)
+      // register autocompletion
+      .registerCompletionProvider(languages[langId].completionProvider);
   };
 
   const handleEditorDidMount = (

packages/code/src/components/Editor/stories/cases/index.ts

@@ -1,7 +1,6 @@
 export * from './Actions';
 export * from './CustomLang';
 export * from './MultipleEds';
-export * from './MultipleLangs';
 export * from './Programatic';
 export * from './Shortcuts';
 export * from './Diff';