@react-theming/storybook-addon/dist/manager/editors/ReactYamlEditor.js

Develop themes and themable components with Emotion, Styled Components, Material-UI and your custom solution

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactYaml = _interopRequireDefault(require("@focus-reactive/react-yaml"));

var _themeOneDark = require("@codemirror/theme-one-dark");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ReactYamlEditor = function ReactYamlEditor(_ref) {
  var isDark = _ref.isDark,
      theme = _ref.theme,
      onChange = _ref.onChange,
      selectWord = _ref.selectWord;

  var merge = _react.default.useCallback(function (_ref2) {
    var json = _ref2.json;
    return {
      json: json
    };
  }, []);

  var ownTheme = isDark ? _themeOneDark.oneDark : undefined;

  var handleSelectWord = function handleSelectWord(_ref3) {
    var word = _ref3.word;
    selectWord(word);
  };

  return /*#__PURE__*/_react.default.createElement(_reactYaml.default, {
    json: theme,
    onChange: onChange,
    onSetCursor: handleSelectWord,
    theme: ownTheme,
    merge: merge
  });
};

var _default = ReactYamlEditor;
exports.default = _default;