rich-text-editor
Version:
Rich text editor
49 lines (43 loc) • 1.87 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ExtraButtons;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const expand_1 = __importDefault(require("../../icons/expand"));
const help_1 = __importDefault(require("../../icons/help"));
const state_1 = __importDefault(require("../../../state"));
const utility_1 = require("../../../utility");
function ExtraButtons() {
const editor = (0, state_1.default)();
const onClick = editor.isToolbarExpanded ? editor.collapseToolbar : editor.expandToolbar;
return ((0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsx)(Button, { onClick: onClick, "data-testid": "toggle-all-special-characters", children: (0, jsx_runtime_1.jsx)(expand_1.default, { style: {
transformOrigin: 'center center',
transition: 'transform 200ms',
transform: editor.isToolbarExpanded ? 'rotate(0deg)' : 'rotate(180deg)',
} }) }), (0, jsx_runtime_1.jsx)(Button, { onMouseDown: (0, utility_1.eventHandlerWithoutFocusLoss)(editor.showHelpDialog), children: (0, jsx_runtime_1.jsx)(help_1.default, {}) })] }));
}
const Container = styled_components_1.default.div `
display: flex;
justify-content: flex-start;
@media (min-width: 800px) {
grid-column: 3;
grid-row: 1;
}
@media (max-width: 799px) {
position: absolute;
right: 0;
}
`;
const Button = styled_components_1.default.button `
width: 35px;
height: 35px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
background: none;
border: none;
`;