@grafana/ui/dist/cjs/ReactMonacoEditor-D8jVLjfJ.js

Grafana Components Library

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var Editor = require('@monaco-editor/react');
var monaco = require('monaco-editor');
var React = require('react');
require('@grafana/data');
var index = require('./index.cjs');
require('micro-memoize');
require('@emotion/react');
var tinycolor = require('tinycolor2');
require('@emotion/css');
require('classnames');
require('react-inlinesvg');
require('hoist-non-react-statics');
require('@floating-ui/react');
require('@grafana/e2e-selectors');
require('react-dom');
require('lodash');
require('slate');
require('react-select');
require('react-select/async');
require('react-select/creatable');
require('i18next');
require('react-i18next');
require('react-transition-group');
require('react-custom-scrollbars-2');
require('rc-cascader');
require('react-use/lib/useMeasure');
require('react-select/async-creatable');
require('react-window');
require('react-dom/server');
require('@react-aria/focus');
require('react-colorful');
require('react-use');
require('date-fns');
require('@react-aria/dialog');
require('@react-aria/overlays');
require('@tanstack/react-virtual');
require('downshift');
require('@leeoniya/ufuzzy');
require('react-calendar');
require('uuid');
require('rc-picker');
require('rc-picker/lib/generate/moment');
require('rc-picker/lib/locale/en_US');
require('rc-picker/assets/index.css');
require('react-table');
require('react-loading-skeleton');
require('react-hook-form');
require('slate-plain-serializer');
require('slate-react');
require('is-hotkey');
require('prismjs');
require('immutable');
require('calculate-size');
require('react-highlight-words');
require('react-router-dom-v5-compat');
require('rxjs');
require('rxjs/operators');
require('@grafana/schema');
require('rc-drawer');
require('rc-drawer/assets/index.css');
require('ol/format/WKT');
require('ol/geom');
require('uplot');
require('uplot/dist/uPlot.min.css');
require('jquery');
require('react-use/lib/usePrevious');
require('react-use/lib/useClickAway');
require('@hello-pangea/dnd');
require('@grafana/faro-web-sdk');
require('rc-slider');
require('rc-slider/assets/index.css');
require('rc-tooltip');
require('react-dropzone');

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

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var Editor__default = /*#__PURE__*/_interopDefaultCompat(Editor);
var monaco__namespace = /*#__PURE__*/_interopNamespaceCompat(monaco);
var tinycolor__default = /*#__PURE__*/_interopDefaultCompat(tinycolor);

function getColors(theme) {
  if (theme === void 0) {
    return {};
  } else {
    const colors = {
      "editor.background": theme.components.input.background,
      "minimap.background": theme.colors.background.secondary
    };
    Object.keys(colors).forEach((resultKey) => {
      colors[resultKey] = normalizeColorForMonaco(colors[resultKey]);
    });
    return colors;
  }
}
function normalizeColorForMonaco(color) {
  return tinycolor__default.default(color).toHexString();
}
function defineThemes(monaco, theme) {
  const colors = getColors(theme);
  monaco.editor.defineTheme("grafana-dark", {
    base: "vs-dark",
    inherit: true,
    colors,
    // fallback syntax highlighting for languages that microsoft doesn't handle (ex cloudwatch's metric math)
    rules: [
      { token: "predefined", foreground: normalizeColorForMonaco(theme == null ? void 0 : theme.visualization.getColorByName("purple")) },
      { token: "operator", foreground: normalizeColorForMonaco(theme == null ? void 0 : theme.visualization.getColorByName("orange")) },
      { token: "tag", foreground: normalizeColorForMonaco(theme == null ? void 0 : theme.visualization.getColorByName("green")) }
    ]
  });
  monaco.editor.defineTheme("grafana-light", {
    base: "vs",
    inherit: true,
    colors,
    // fallback syntax highlighting for languages that microsoft doesn't handle (ex cloudwatch's metric math)
    rules: [
      { token: "predefined", foreground: normalizeColorForMonaco(theme == null ? void 0 : theme.visualization.getColorByName("purple")) },
      { token: "operator", foreground: normalizeColorForMonaco(theme == null ? void 0 : theme.visualization.getColorByName("orange")) },
      { token: "tag", foreground: normalizeColorForMonaco(theme == null ? void 0 : theme.visualization.getColorByName("green")) }
    ]
  });
}

Editor.loader.config({ monaco: monaco__namespace });
const ReactMonacoEditor = (props) => {
  const { beforeMount, onMount, options, ...restProps } = props;
  const theme = index.useTheme2();
  const onMonacoBeforeMount = React.useCallback(
    (monaco2) => {
      beforeMount == null ? void 0 : beforeMount(monaco2);
    },
    [beforeMount]
  );
  React.useEffect(() => {
    defineThemes(monaco__namespace, theme);
  }, [theme]);
  return /* @__PURE__ */ jsxRuntime.jsx(
    Editor__default.default,
    {
      ...restProps,
      options: {
        ...options,
        fontFamily: theme.typography.code.fontFamily
      },
      theme: theme.isDark ? "grafana-dark" : "grafana-light",
      beforeMount: onMonacoBeforeMount,
      onMount: (editor, monaco2) => {
        document.fonts.ready.then(() => {
          monaco2.editor.remeasureFonts();
        });
        onMount == null ? void 0 : onMount(editor, monaco2);
      }
    }
  );
};

exports.ReactMonacoEditor = ReactMonacoEditor;
//# sourceMappingURL=ReactMonacoEditor-D8jVLjfJ.js.map