@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
41 lines • 3.54 kB
JavaScript
import React from "react";
import { Button } from "../../../components/Button/Button.js";
import { ContextMenu } from "../../../components/ContextOverlay/index.js";
import { Icon, IconButton } from "../../../components/Icon/index.js";
import { MenuItem } from "../../../components/Menu/index.js";
import { Spacing } from "../../../components/Separation/Spacing.js";
import { Toolbar, ToolbarSection } from "../../../components/Toolbar/index.js";
import MarkdownCommand from "./commands/markdown.command.js";
export var MarkdownToolbar = function (_a) {
var view = _a.view, togglePreviewStatus = _a.togglePreviewStatus, showPreview = _a.showPreview, disabled = _a.disabled, readonly = _a.readonly, translate = _a.translate;
var commandRef = React.useRef(null);
React.useEffect(function () {
if (view) {
commandRef.current = new MarkdownCommand(view);
}
}, [view]);
var getTranslation = function (fallback) {
var key = fallback.toLowerCase().replace(" ", "-");
return translate(key) || fallback;
};
var _b = MarkdownCommand.commands, basic = _b.basic, lists = _b.lists, attachments = _b.attachments;
return (React.createElement(Toolbar, { noWrap: true },
React.createElement(ToolbarSection, { canShrink: true, hideOverflow: true },
React.createElement(ContextMenu, { togglerElement: React.createElement(Button, { rightIcon: React.createElement(Icon, { name: "toggler-showmore" }), text: getTranslation("Paragraphs"), minimal: true, fill: true, ellipsizeText: true, disabled: showPreview || disabled || readonly }) }, MarkdownCommand.commands.paragraphs.map(function (p, i) { return (React.createElement(MenuItem, { key: p, text: React.createElement(React.Fragment, null,
React.createElement("span", { style: p.startsWith("Head") ? { fontSize: 22 - (i * (22 - 12)) / 5 } : {} }, getTranslation(p))), onClick: function () { var _a; return (_a = commandRef.current) === null || _a === void 0 ? void 0 : _a.executeCommand(p); } })); }))),
React.createElement(ToolbarSection, { canShrink: true },
React.createElement(Spacing, { vertical: true, hasDivider: true, size: "tiny" })),
[basic, lists, attachments].map(function (section, i) {
return (React.createElement(React.Fragment, { key: i },
React.createElement(ToolbarSection, null, section.map(function (command) {
return (React.createElement(IconButton, { key: command.title, name: command.icon, onClick: function () { var _a; return (_a = commandRef.current) === null || _a === void 0 ? void 0 : _a.executeCommand(command.title); }, text: getTranslation(command.title), disabled: showPreview || disabled || readonly }));
})),
i < 2 && (React.createElement(ToolbarSection, { canShrink: true },
React.createElement(Spacing, { vertical: true, hasDivider: true, size: "tiny" })))));
}),
React.createElement(ToolbarSection, { canGrow: true, canShrink: true },
React.createElement(Spacing, { vertical: true, size: "small" })),
React.createElement(ToolbarSection, { canShrink: true, hideOverflow: true },
React.createElement(Button, { minimal: true, ellipsizeText: true, onClick: togglePreviewStatus, text: showPreview ? getTranslation("Continue editing") : getTranslation("Preview"), icon: showPreview ? "item-edit" : "item-viewdetails", disabled: disabled }))));
};
//# sourceMappingURL=markdown.toolbar.js.map