json-joy
Version:
Collection of libraries for building collaborative editing apps.
43 lines (42 loc) • 2.47 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormattingsNewPane = void 0;
const tslib_1 = require("tslib");
// biome-ignore lint: lint/style/useImportType
const React = tslib_1.__importStar(require("react"));
const use_t_1 = require("use-t");
const context_1 = require("../context");
const FormattingNew_1 = require("./views/new/FormattingNew");
const ContextPaneHeader_1 = require("../../../components/ContextPaneHeader");
const FormattingTitle_1 = require("./FormattingTitle");
const ContextPaneHeaderSep_1 = require("../../../components/ContextPaneHeaderSep");
const ContextMenu_1 = require("nice-ui/lib/4-card/ContextMenu");
const Button_1 = require("nice-ui/lib/2-inline-block/Button");
const nano_theme_1 = require("nano-theme");
const hooks_1 = require("../../../web/react/hooks");
const FormattingPane_1 = require("./FormattingPane");
const blockClass = (0, nano_theme_1.rule)({
maxW: '600px',
});
const FormattingsNewPane = ({ formatting, onSave }) => {
const [t] = (0, use_t_1.useT)();
const { toolbar } = (0, context_1.useToolbarPlugin)();
(0, hooks_1.useSyncStoreOpt)(formatting.conf()?.api);
const validation = formatting.validate();
const valid = validation === 'good' || validation === 'fine';
const handleSave = (e) => {
e?.preventDefault();
onSave();
};
return (React.createElement(FormattingPane_1.FormattingPane, { onEsc: () => toolbar.newSlice.next(void 0) },
React.createElement("form", { className: blockClass, onSubmit: handleSave },
React.createElement(ContextPaneHeader_1.ContextPaneHeader, { short: true, onCloseClick: () => toolbar.newSlice.next(void 0) },
React.createElement(FormattingTitle_1.FormattingTitle, { formatting: formatting })),
React.createElement(ContextPaneHeaderSep_1.ContextPaneHeaderSep, null),
React.createElement("div", { style: { padding: '16px' } },
React.createElement(FormattingNew_1.FormattingNew, { formatting: formatting, onSave: handleSave })),
React.createElement(ContextMenu_1.ContextSep, { line: true }),
React.createElement("div", { style: { padding: '16px' } },
React.createElement(Button_1.Button, { small: true, lite: !valid, positive: validation === 'good', block: true, disabled: !valid, submit: true, onClick: handleSave }, t('Save'))))));
};
exports.FormattingsNewPane = FormattingsNewPane;