wix-storybook-utils/dist/src/LiveCodeExample/Editor.js

Utilities for automated component documentation within Storybook

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
var react_codemirror2_1 = require("react-codemirror2");
require("codemirror/mode/jsx/jsx");
require("codemirror/addon/edit/closetag");
require("codemirror/addon/edit/closebrackets");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/xml-hint");
var doctor_code_1 = require("./doctor-code");
var autocomplete_utils_1 = require("./autocomplete-utils");
require("./styles.global.scss");
var autoCompleteHotkeysMap = {
    "'<'": autocomplete_utils_1.completeAfter,
    'Cmd-I': autocomplete_utils_1.completeIfInTag,
    'Ctrl-I': autocomplete_utils_1.completeIfInTag,
    "'='": autocomplete_utils_1.completeIfInTag,
    Space: autocomplete_utils_1.completeIfInTagNewAttribute,
    Enter: autocomplete_utils_1.completeIfInTagNewAttribute,
    Tab: autocomplete_utils_1.handleIndentation,
};
var Editor = function (_a) {
    var initialFormattedCode = _a.initialFormattedCode, hints = _a.hints, editorCodeUpdater = _a.editorCodeUpdater, onChange = _a.onChange;
    var editorDidMount = function (editor) {
        editor.setValue(initialFormattedCode);
        editorCodeUpdater(function (code) { return editor.setValue(code); });
    };
    var onCodeChange = function (_editor, _data, newCode) {
        onChange(newCode);
    };
    var debouncedOnCodeChange = (0, debounce_1.default)(onCodeChange, 100, {
        trailing: true,
    });
    var prettifyCode = function (editor) {
        try {
            var formattedValue = (0, doctor_code_1.formatCode)(editor.getValue());
            editor.setValue(formattedValue);
            onChange(formattedValue);
        }
        catch (e) {
            console.error('Unable to prettify code', e);
        }
    };
    var liveEditorOnKeyDown = function (editor, e) {
        var shouldPrettify = [
            /* windows & unix: ctrl + s */
            e.ctrlKey && e.key === 's',
            /* osx: command + s */
            e.metaKey && e.key === 's',
        ].some(Boolean);
        if (shouldPrettify) {
            e.stopPropagation();
            e.preventDefault();
            var _a = editor.getCursor(), ch = _a.ch, line = _a.line;
            prettifyCode(editor);
            editor.setCursor({ ch: ch, line: line });
        }
    };
    return (react_1.default.createElement(react_codemirror2_1.UnControlled, { onChange: debouncedOnCodeChange, editorDidMount: editorDidMount, onKeyDown: liveEditorOnKeyDown, options: {
            mode: 'jsx',
            autoCloseTags: true,
            autoCloseBrackets: true,
            theme: 'wsr',
            viewportMargin: 50,
            lineNumbers: true,
            /**
             * Need to cast the type here, because xml-hint
             * plugin enhances hintOptions parameter with additional properties
             */
            hintOptions: {
                schemaInfo: hints,
            },
            extraKeys: autoCompleteHotkeysMap,
        } }));
};
exports.default = Editor;
//# sourceMappingURL=Editor.js.map