@grafana/ui/dist/cjs/components/CodeMirror/CodeEditor.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var autocomplete = require('@codemirror/autocomplete');
var state = require('@codemirror/state');
var view = require('@codemirror/view');
var codemirrorThemeVscode = require('@uiw/codemirror-theme-vscode');
var CodeMirror = require('@uiw/react-codemirror');
var React = require('react');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Alert = require('../Alert/Alert.cjs');
var useLanguageExtension = require('./useLanguageExtension.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var CodeMirror__default = /*#__PURE__*/_interopDefaultCompat(CodeMirror);

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

exports.CodeEditor = CodeEditor;
//# sourceMappingURL=CodeEditor.cjs.map