storybook-addon-playground/dist/components/Editor/EditorToolbar.js

A playground to enable consumers learn how to use the component library or to reproduce bugs

import React__default, { useCallback } from 'react';
import usePlaygroundArgs from '../../hooks/usePlaygroundArgs.js';
import { useAddonState, useParameter } from '@storybook/manager-api';
import '@storybook/addon-links';
import { PANEL_ID, ADDON_ID_FOR_PARAMETERS } from '../../consts/addon-consts.js';
import { DEFAULT_ADDON_PARAMETERS } from '../../consts/parameter-consts.js';
import { DEFAULT_ADDON_STATE } from '../../consts/state-consts.js';
import { EDITOR_STATE_FIELDS } from '../../consts/editor-consts.js';
import 'prettier';
import 'prettier/parser-html';
import 'prettier/parser-typescript';
import 'prettier/parser-postcss';
import 'lz-string';
import useToolbarActions from '../../hooks/useToolbarActions.js';
import useCopyToClipboard from '../../hooks/useCopyToClipboard.js';
import useShare from '../../hooks/useShare.js';
import '@storybook/preview-api';
import '@uiw/codemirror-theme-github';
import EditorToolbarButton from './EditorToolbarButton.js';
import styles from './EditorToolbar.module.css.js';
import EditorTabs from './EditorTabs.js';
import SvgCopy from '../../icons/Copy.js';
import SvgEdit from '../../icons/Edit.js';
import SvgReset from '../../icons/Reset.js';
import SvgShare from '../../icons/Share.js';

const EditorToolbar = ({ editorRef }) => {
    const { updateCode, resetCode } = usePlaygroundArgs();
    const [state, setState] = useAddonState(PANEL_ID, DEFAULT_ADDON_STATE);
    const { share: enableShare } = useParameter(ADDON_ID_FOR_PARAMETERS, DEFAULT_ADDON_PARAMETERS);
    const { code, selectedTab } = state;
    const { onCopy, isCopied, shouldAllowCopy } = useCopyToClipboard(code);
    const { onShare, isShareCopied, shouldAllowShare } = useShare(code);
    const { onFormatCode, onReset } = useToolbarActions(code, updateCode, resetCode, selectedTab);
    const onTabChange = useCallback((newTab) => {
        setState((prev) => {
            const updates = {
                ...prev,
                selectedTab: newTab,
            };
            const editorStateJson = editorRef.current?.view?.state?.toJSON?.(EDITOR_STATE_FIELDS);
            if (editorStateJson) {
                updates.editorState = {
                    ...prev.editorState,
                    [prev.selectedTab]: editorStateJson,
                };
            }
            return updates;
        });
    }, [editorRef, setState]);
    return (React__default.createElement("div", { className: styles.toolbar },
        React__default.createElement(EditorTabs, { selectedTab: selectedTab, onTabChange: onTabChange }),
        React__default.createElement("section", null,
            React__default.createElement(EditorToolbarButton, { tooltip: shouldAllowCopy ? "" : "Editor is empty", text: isCopied ? "Copied!" : "Copy", renderIcon: SvgCopy, disabled: isCopied || !shouldAllowCopy, onClick: onCopy }),
            enableShare && (React__default.createElement(EditorToolbarButton, { tooltip: shouldAllowShare ? "" : "Editor is empty", text: isShareCopied ? "Copied!" : "Share", renderIcon: SvgShare, disabled: isShareCopied || !shouldAllowShare, onClick: onShare })),
            React__default.createElement(EditorToolbarButton, { text: "Format", renderIcon: SvgEdit, onClick: onFormatCode }),
            React__default.createElement(EditorToolbarButton, { text: "Reset", renderIcon: SvgReset, onClick: onReset }))));
};

export { EditorToolbar as default };
//# sourceMappingURL=EditorToolbar.js.map