CodeEditor

A wrapper to the React Monaco editor with our styles. Please make sure you follow the instructions (found in the repository) to include the component. Additional information regarding Tab trapping in Monaco, can be found here.

Source Code

uikit-react-code-editor

Usage

To use the Code Editor component you’ll have to install the @hitachivantara/uikit-react-code-editor package:

npm install @hitachivantara/uikit-react-code-editor

You can specify a language through the language prop to get proper syntax highlighting and define a default value:

<HvCodeEditor
  height={270}
  language="yaml"
  defaultValue={`affinity: {}
configuration:
  helm: defaultTimeoutSeconds=120
env:
  debug: "true"
  hostname: foo.bar.com
fullnameOverride: mySolution
image:
repository: foo.bar.com:5000/app
`}
/>

<HvCodeEditor
  height={270}
  language="yaml"
  defaultValue={`affinity: {}
configuration:
  helm: defaultTimeoutSeconds=120
env:
  debug: "true"
  hostname: foo.bar.com
fullnameOverride: mySolution
image:
repository: foo.bar.com:5000/app
`}
/>

The component includes only the actual code editor but you might want to have a header with some actions. The following example showcases a code editor with a header that includes the filename and two actions to copy the code or view it in fullscreen mode.

some file.json

import { useState } from "react";


export default function Demo() {
  const [open, setOpen] = useState(false);
  const [editorContent, setEditorContent] = useState(defaultValueJson);


  const renderCodeEditor = (height: number) => (
    <HvCodeEditor
      height={height}
      language="json"
      onChange={(input) => {
        setEditorContent(input || "");
      }}
      value={editorContent}
    />
  );


  return (
    <div>
      <Header title="some file.json" onOpen={() => setOpen(true)} />
      {renderCodeEditor(420)}
      <HvDialog
        fullWidth
        maxWidth="xl"
        open={open}
        onClose={() => setOpen(false)}
      >
        <HvDialogTitle>FullScreen</HvDialogTitle>
        <HvDialogContent>{renderCodeEditor(500)}</HvDialogContent>
      </HvDialog>
    </div>
  );
}


const Header = ({ title, onOpen }: { title: string; onOpen: () => void }) => (
  <HvPanel className="flex items-center border border-b-none">
    <HvTypography component="div" variant="label">
      {title}
    </HvTypography>
    <HvIconButton title="Open in new window" component="a">
      <PopUp />
    </HvIconButton>
    <div style={{ flex: 1 }} />
    <HvIconButton title="Fullscreen" onClick={onOpen}>
      <Fullscreen />
    </HvIconButton>
    <HvIconButton title="Duplicate">
      <Duplicate />
    </HvIconButton>
  </HvPanel>
);


const defaultValueJson = `{
  "glossary": {
    "title": "example glossary",
    "GlossDiv": {
      "title": "S",
      "GlossList": {
        "GlossEntry": {
          "ID": "SGML",
          "SortAs": "SGML",
          "GlossTerm": "Standard Generalized Markup Language",
          "Acronym": "SGML",
          "Abbrev": "ISO 8879:1986",
          "GlossDef": {
            "para": "A meta-markup language, used to create markup languages such as DocBook.",
            "GlossSeeAlso": ["GML", "XML"]
          },
          "GlossSee": "markup"
        }
      }
    }
  }
}`;

import { useState } from "react";

export default function Demo() {
  const [open, setOpen] = useState(false);
  const [editorContent, setEditorContent] = useState(defaultValueJson);

  const renderCodeEditor = (height: number) => (
    <HvCodeEditor
      height={height}
      language="json"
      onChange={(input) => {
        setEditorContent(input || "");
      }}
      value={editorContent}
    />
  );

  return (
    <div>
      <Header title="some file.json" onOpen={() => setOpen(true)} />
      {renderCodeEditor(420)}
      <HvDialog
        fullWidth
        maxWidth="xl"
        open={open}
        onClose={() => setOpen(false)}
      >
        <HvDialogTitle>FullScreen</HvDialogTitle>
        <HvDialogContent>{renderCodeEditor(500)}</HvDialogContent>
      </HvDialog>
    </div>
  );
}

const Header = ({ title, onOpen }: { title: string; onOpen: () => void }) => (
  <HvPanel className="flex items-center border border-b-none">
    <HvTypography component="div" variant="label">
      {title}
    </HvTypography>
    <HvIconButton title="Open in new window" component="a">
      <PopUp />
    </HvIconButton>
    <div style={{ flex: 1 }} />
    <HvIconButton title="Fullscreen" onClick={onOpen}>
      <Fullscreen />
    </HvIconButton>
    <HvIconButton title="Duplicate">
      <Duplicate />
    </HvIconButton>
  </HvPanel>
);

const defaultValueJson = `{
  "glossary": {
    "title": "example glossary",
    "GlossDiv": {
      "title": "S",
      "GlossList": {
        "GlossEntry": {
          "ID": "SGML",
          "SortAs": "SGML",
          "GlossTerm": "Standard Generalized Markup Language",
          "Acronym": "SGML",
          "Abbrev": "ISO 8879:1986",
          "GlossDef": {
            "para": "A meta-markup language, used to create markup languages such as DocBook.",
            "GlossSeeAlso": ["GML", "XML"]
          },
          "GlossSee": "markup"
        }
      }
    }
  }
}`;

Language plugins

UI Kit’s Code Editor provides plugins for XML and SQL out of the box. You can pass a schema to the schema prop to enable suggestions and validation.

XML: By providing a XML schema, the XML written will be validated against the schema showing errors. Providing a schema will also enable the code editor to show suggestions when opening a tag (<), writing an attribute, and when clicking on the CTRL and SPACE keys at the same time. By default, the XML code editor is formatted automatically. The property disableAutoFormat can be set to true to disable this behavior. You can also format manually the code using the hvXmlFormatter util.
SQL: Providing a SQL schema will enable the code editor to show suggestions when writing the query, and when clicking on the CTRL and SPACE keys at the same time.

Custom language plugins

You can also create your own language plugins. The following example shows how to create a custom language plugin that extends the Code Editor’s own XML language plugin to show different suggestions and format the code differently.

import { useRef, useState } from "react";


const Header = ({ onFormat }: { onFormat: HvButtonProps["onClick"] }) => (
  <HvPanel className="flex justify-between items-center border border-b-none">
    <HvTypography variant="label">Custom Language Plugin</HvTypography>
    <Code />
    <div style={{ flex: 1 }} />


    <HvButton variant="primaryGhost" onClick={onFormat}>
      Format
    </HvButton>
  </HvPanel>
);


const completionProvider = (monaco: Monaco) => {
  return {
    provideCompletionItems: () => {
      const suggestions = ["Suggestion1", "Suggestion2", "Suggestion3"].map(
        (label) => ({
          label,
          kind: monaco.languages.CompletionItemKind.Keyword,
          insertText: label,
          documentation: `Custom suggestion: ${label}`,
          sortText: "1",
        }),
      );
      return {
        suggestions,
      };
    },
  };
};


const customPlugin = {
  ...hvLanguagePlugins.xml,
  completionProvider,
};


export default function Demo() {
  const [editorValue, setEditorValue] = useState("");


  const editorRef = useRef<any>(null);
  const monacoRef = useRef<any>(null);


  const handleMount: HvCodeEditorProps["onMount"] = (editor, monaco) => {
    editorRef.current = editor;
    monacoRef.current = monaco;
  };


  const handleFormat = async () => {
    try {
      const content = editorRef.current.getValue();
      if (!content) return;
      const formattedCode = await customPlugin.formatter?.(
        content,
        editorRef.current,
        monacoRef.current,
        {
          collapseContent: false,
        },
      );
      if (formattedCode) editorRef.current.setValue(formattedCode);
    } catch (error) {
      console.error("Error formatting code", error);
    }
  };


  return (
    <div>
      <Header onFormat={handleFormat} />
      <HvCodeEditor
        height={270}
        language="xml"
        value={editorValue}
        onChange={(content) => setEditorValue(content ?? "")}
        onMount={handleMount}
        languagePlugin={customPlugin}
      />
    </div>
  );
}

import { useRef, useState } from "react";

const Header = ({ onFormat }: { onFormat: HvButtonProps["onClick"] }) => (
  <HvPanel className="flex justify-between items-center border border-b-none">
    <HvTypography variant="label">Custom Language Plugin</HvTypography>
    <Code />
    <div style={{ flex: 1 }} />

    <HvButton variant="primaryGhost" onClick={onFormat}>
      Format
    </HvButton>
  </HvPanel>
);

const completionProvider = (monaco: Monaco) => {
  return {
    provideCompletionItems: () => {
      const suggestions = ["Suggestion1", "Suggestion2", "Suggestion3"].map(
        (label) => ({
          label,
          kind: monaco.languages.CompletionItemKind.Keyword,
          insertText: label,
          documentation: `Custom suggestion: ${label}`,
          sortText: "1",
        }),
      );
      return {
        suggestions,
      };
    },
  };
};

const customPlugin = {
  ...hvLanguagePlugins.xml,
  completionProvider,
};

export default function Demo() {
  const [editorValue, setEditorValue] = useState("");

  const editorRef = useRef<any>(null);
  const monacoRef = useRef<any>(null);

  const handleMount: HvCodeEditorProps["onMount"] = (editor, monaco) => {
    editorRef.current = editor;
    monacoRef.current = monaco;
  };

  const handleFormat = async () => {
    try {
      const content = editorRef.current.getValue();
      if (!content) return;
      const formattedCode = await customPlugin.formatter?.(
        content,
        editorRef.current,
        monacoRef.current,
        {
          collapseContent: false,
        },
      );
      if (formattedCode) editorRef.current.setValue(formattedCode);
    } catch (error) {
      console.error("Error formatting code", error);
    }
  };

  return (
    <div>
      <Header onFormat={handleFormat} />
      <HvCodeEditor
        height={270}
        language="xml"
        value={editorValue}
        onChange={(content) => setEditorValue(content ?? "")}
        onMount={handleMount}
        languagePlugin={customPlugin}
      />
    </div>
  );
}

Checkbox Color Picker