json-joy
Version:
Collection of libraries for building collaborative editing apps.
37 lines • 2.05 kB
JavaScript
import * as React from 'react';
import { useT } from 'use-t';
import { useToolbarPlugin } from '../context';
import { FormattingNew } from './views/new/FormattingNew';
import { ContextPaneHeader } from '../../../components/ContextPaneHeader';
import { FormattingTitle } from './FormattingTitle';
import { ContextPaneHeaderSep } from '../../../components/ContextPaneHeaderSep';
import { ContextSep } from 'nice-ui/lib/4-card/ContextMenu';
import { Button } from 'nice-ui/lib/2-inline-block/Button';
import { rule } from 'nano-theme';
import { useSyncStoreOpt } from '../../../web/react/hooks';
import { FormattingPane } from './FormattingPane';
const blockClass = rule({
maxW: '600px',
});
export const FormattingsNewPane = ({ formatting, onSave }) => {
const [t] = useT();
const { toolbar } = useToolbarPlugin();
useSyncStoreOpt(formatting.conf()?.api);
const validation = formatting.validate();
const valid = validation === 'good' || validation === 'fine';
const handleSave = (e) => {
e?.preventDefault();
onSave();
};
return (React.createElement(FormattingPane, { onEsc: () => toolbar.newSlice.next(void 0) },
React.createElement("form", { className: blockClass, onSubmit: handleSave },
React.createElement(ContextPaneHeader, { short: true, onCloseClick: () => toolbar.newSlice.next(void 0) },
React.createElement(FormattingTitle, { formatting: formatting })),
React.createElement(ContextPaneHeaderSep, null),
React.createElement("div", { style: { padding: '16px' } },
React.createElement(FormattingNew, { formatting: formatting, onSave: handleSave })),
React.createElement(ContextSep, { line: true }),
React.createElement("div", { style: { padding: '16px' } },
React.createElement(Button, { small: true, lite: !valid, primary: validation === 'good', block: true, disabled: !valid, submit: true, onClick: handleSave }, t('Save'))))));
};
//# sourceMappingURL=FormattingsNewPane.js.map