@grafana/ui/dist/esm/components/CodeMirror/CodeEditor.mjs

Grafana Components Library

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { autocompletion, acceptCompletion, startCompletion } from '@codemirror/autocomplete';
import { EditorState, Prec } from '@codemirror/state';
import { keymap } from '@codemirror/view';
import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode';
import CodeMirror, { EditorView } from '@uiw/react-codemirror';
import { memo, useMemo } from 'react';
import { t } from '@grafana/i18n';
import { useTheme2 } from '../../themes/ThemeContext.mjs';
import { Alert } from '../Alert/Alert.mjs';
import { useLanguageExtension } from './useLanguageExtension.mjs';

"use strict";
const getCompletionExtensions = (sources, mode) => {
  if (!sources || sources.length === 0) {
    return [];
  }
  if (mode === "override") {
    return [autocompletion({ override: [...sources] }), autocompleteSpaceKeymap];
  }
  return [
    autocompletion(),
    autocompleteSpaceKeymap,
    ...sources.map((source) => EditorState.languageData.of(() => [{ autocomplete: source }]))
  ];
};
const getAccessibilityExtensions = (ariaLabel, ariaLabelledby) => {
  if (!ariaLabel && !ariaLabelledby) {
    return [];
  }
  return [
    EditorView.contentAttributes.of({
      ...ariaLabel ? { "aria-label": ariaLabel } : {},
      ...ariaLabelledby ? { "aria-labelledby": ariaLabelledby } : {}
    })
  ];
};
const autocompleteTabKeymap = Prec.highest(
  keymap.of([
    {
      key: "Tab",
      run: acceptCompletion
    }
  ])
);
const autocompleteSpaceKeymap = Prec.highest(
  keymap.of([
    {
      key: "Space",
      run: (view) => {
        if (view.state.readOnly) {
          return false;
        }
        view.dispatch(view.state.replaceSelection(" "));
        startCompletion(view);
        return true;
      }
    }
  ])
);
const CodeEditor = memo(function CodeEditor2({
  value,
  language,
  height = "200px",
  onChange,
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledby,
  completionSources,
  completionMode = "merge",
  extensions: additionalExtensions
}) {
  const theme = useTheme2();
  const { extension: languageExtension, error: languageExtensionError } = useLanguageExtension(language);
  const extensions = useMemo(
    () => [
      autocompleteTabKeymap,
      ...getAccessibilityExtensions(ariaLabel, ariaLabelledby),
      ...languageExtension ? [languageExtension] : [],
      ...getCompletionExtensions(completionSources, completionMode),
      ...additionalExtensions != null ? additionalExtensions : []
    ],
    [ariaLabel, ariaLabelledby, languageExtension, completionSources, completionMode, additionalExtensions]
  );
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    languageExtensionError && /* @__PURE__ */ jsx(Alert, { title: t("grafana-ui.code-mirror.language-load-failed", "Syntax highlighting failed to load"), children: t(
      "grafana-ui.code-mirror.language-load-failed-description",
      "The editor will continue without language-specific features."
    ) }),
    /* @__PURE__ */ jsx(
      CodeMirror,
      {
        theme: theme.isDark ? vscodeDark : vscodeLight,
        value,
        height,
        extensions,
        onChange
      }
    )
  ] });
});

export { CodeEditor };
//# sourceMappingURL=CodeEditor.mjs.map