rich-text-editor
Version:
Rich text editor
82 lines (81 loc) • 3.58 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.HelpDialog = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const state_1 = __importDefault(require("../../state"));
const utility_1 = require("../../utility");
const close_1 = __importDefault(require("../icons/close"));
const mapLocalizationNodeToElement = ([type, content]) => type === 'key' ? (0, jsx_runtime_1.jsx)(Key, { children: content }) : content;
const HelpDialog = () => {
const { t } = (0, state_1.default)();
const { hideHelpDialog } = (0, state_1.default)();
return ((0, jsx_runtime_1.jsx)(Overlay, { onMouseDown: (0, utility_1.eventHandlerWithoutFocusLoss)(hideHelpDialog), children: (0, jsx_runtime_1.jsxs)(Modal, { "aria-modal": "true", tabIndex: 0, onMouseDown: (0, utility_1.eventHandlerWithoutFocusLoss)(), children: [(0, jsx_runtime_1.jsxs)(Columns, { children: [(0, jsx_runtime_1.jsxs)(LeftColumn, { children: [(0, jsx_runtime_1.jsx)("h3", { children: t.editor.help_overlay.screenshotTitle }), (0, jsx_runtime_1.jsx)("p", { children: t.editor.help_overlay.screenshotInstruction.map(mapLocalizationNodeToElement) })] }), (0, jsx_runtime_1.jsxs)(RightColumn, { children: [(0, jsx_runtime_1.jsx)("h3", { children: t.editor.help_overlay.equationTitle }), (0, jsx_runtime_1.jsx)("p", { children: t.editor.help_overlay.equationInstruction.map(mapLocalizationNodeToElement) }), (0, jsx_runtime_1.jsx)(Table, { children: (0, jsx_runtime_1.jsx)("tbody", { children: t.editor.help_overlay.equationTable.map(([name, key]) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)(TableDescriptor, { children: name }), (0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)(Key, { children: key }) })] }))) }) })] })] }), (0, jsx_runtime_1.jsx)(CloseButton, { onMouseDown: (0, utility_1.eventHandlerWithoutFocusLoss)(hideHelpDialog), children: (0, jsx_runtime_1.jsx)(close_1.default, {}) })] }) }));
};
exports.HelpDialog = HelpDialog;
const Overlay = styled_components_1.default.div `
z-index: 101;
background: #00000080;
display: flex;
position: fixed;
inset: 0;
`;
const Modal = styled_components_1.default.div `
background: #fff;
outline: none;
max-width: 860px;
min-height: 40%;
margin: auto;
padding: 2rem;
line-height: 1.5rem;
position: relative;
`;
const Columns = styled_components_1.default.div `
display: flex;
`;
const CloseButton = styled_components_1.default.button `
cursor: pointer;
border: 0;
width: 25px;
height: 25px;
position: absolute;
top: 20px;
right: 20px;
background: none;
padding: 0;
`;
const Column = styled_components_1.default.div `
margin: 0 1rem;
`;
const LeftColumn = (0, styled_components_1.default)(Column) `
flex: 2;
`;
const RightColumn = (0, styled_components_1.default)(Column) `
flex: 1;
`;
const Table = styled_components_1.default.table `
border-spacing: 0 4px;
width: 100%;
`;
const TableDescriptor = styled_components_1.default.td `
text-align: left;
font-weight: normal;
`;
const Key = styled_components_1.default.span `
color: #000;
text-align: center;
text-transform: uppercase;
vertical-align: text-top;
background: #fff;
border-radius: 4px;
min-width: 15px;
margin: 0 4px;
padding: 0 4px;
font-family: monospace;
line-height: 1.3;
display: inline-block;
box-shadow: 0 0 0 1px #0000004d;
`;