json-joy
Version:
Collection of libraries for building collaborative editing apps.
56 lines • 3.91 kB
JavaScript
import * as React from 'react';
import { useT } from 'use-t';
import { BasicTooltip } from 'nice-ui/lib/4-card/BasicTooltip';
import BasicButton from 'nice-ui/lib/2-inline-block/BasicButton';
import { Iconista } from 'nice-ui/lib/icons/Iconista';
import { Flex } from 'nice-ui/lib/3-list-item/Flex';
import { Space } from 'nice-ui/lib/3-list-item/Space';
import { ContextPaneHeader } from '../../../../components/ContextPaneHeader';
import { ContextPaneHeaderSep } from '../../../../components/ContextPaneHeaderSep';
import { FormattingTitle } from '../FormattingTitle';
import { FormattingView } from '../views/view/FormattingView';
import { useToolbarPlugin } from '../../context';
import { Code } from 'nice-ui/lib/1-inline/Code';
import { FormattingPane } from '../FormattingPane';
import { ContextSep } from 'nice-ui/lib/4-card/ContextMenu';
import { ButtonSeparator } from '../../../../components/ButtonSeparator';
import { FormattingEditForm } from './FormattingEditForm';
import { SoftLockedDeleteButton } from '../../components/SoftLockedDeleteButton';
import { useBehaviorSubject } from 'nice-ui/lib/hooks/useBehaviorSubject';
import { useFormattingPane } from './context';
export const FormattingDisplay = ({ formatting, onClose }) => {
const state = useFormattingPane();
const editFormatting = useBehaviorSubject(state.editing$);
const view = useBehaviorSubject(state.view$);
const { surface } = useToolbarPlugin();
const [t] = useT();
const doEdit = view === 'edit' && !!editFormatting;
return (React.createElement(FormattingPane, null,
React.createElement(ContextPaneHeader, { short: true, onBackClick: onClose, right: doEdit ? (React.createElement(Flex, { style: { justifyContent: 'flex-end', alignItems: 'center' } },
React.createElement("div", { style: { fontSize: '13px', lineHeight: '1.3em' } },
React.createElement(Code, { spacious: true, alt: true, gray: true, nowrap: true }, t('editing'))),
React.createElement(Space, { horizontal: true }),
React.createElement(BasicTooltip, { renderTooltip: () => t('Stop editing') },
React.createElement(BasicButton, { size: 32, rounder: true, onClick: state.switchToViewPanel },
React.createElement(Iconista, { set: 'lucide', icon: 'pencil-off', width: 16, height: 16 }))))) : (React.createElement(Flex, { style: { justifyContent: 'flex-end', alignItems: 'center' } },
React.createElement(SoftLockedDeleteButton, { onDelete: () => {
surface.events.et.format({
slice: formatting.range,
action: 'del',
});
onClose?.();
} }),
React.createElement(Space, { horizontal: true, size: -2 }),
React.createElement(ButtonSeparator, null),
React.createElement(Space, { horizontal: true, size: -2 }),
React.createElement(BasicTooltip, { renderTooltip: () => t('Edit') },
React.createElement(BasicButton, { size: 32, rounder: true, onClick: state.switchToEditPanel },
React.createElement(Iconista, { set: 'lucide', icon: 'pencil', width: 16, height: 16 }))))) },
React.createElement(FormattingTitle, { formatting: formatting })),
React.createElement(ContextPaneHeaderSep, null),
doEdit ? (React.createElement(FormattingEditForm, { formatting: editFormatting, onSave: state.returnFromEditPanelAndSave })) : (React.createElement(React.Fragment, null,
React.createElement(ContextSep, null),
React.createElement("div", { style: { padding: '4px 16px 16px' } },
React.createElement(FormattingView, { formatting: formatting }))))));
};
//# sourceMappingURL=FormattingDisplay.js.map