@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
127 lines • 6.17 kB
JavaScript
import * as React from 'react';
import { Container, Wrapper, Header, IconWrapper, Dialog, ContentWrapper, Line, Content, ColumnRight, ColumnLeft, Row, CodeSm, CodeMd, CodeLg, Title } from './styles';
import * as keymaps from '../../keymaps';
import { browser } from '../../prosemirror';
import ToolbarButton from '../ToolbarButton';
import CloseIcon from '@atlaskit/icon/glyph/editor/close';
export var formatting = [{
name: 'Bold',
keymap: keymaps.toggleBold,
autoFormatting: function () { return React.createElement("span", null,
React.createElement(CodeLg, null, "**Bold**")); }
}, {
name: 'Italic',
keymap: keymaps.toggleItalic,
autoFormatting: function () { return React.createElement("span", null,
React.createElement(CodeLg, null, "*Italic*")); },
}, {
name: 'Underline',
keymap: keymaps.toggleUnderline,
}, {
name: 'Strikethrough',
keymap: keymaps.toggleStrikethrough,
autoFormatting: function () { return React.createElement("span", null,
React.createElement(CodeLg, null, "~~strikethrough~~")); },
}, {
name: 'Heading 1',
autoFormatting: function () { return React.createElement("span", null,
React.createElement(CodeSm, null, "#"),
" + ",
React.createElement(CodeLg, null, "space")); },
}, {
name: 'Heading 5',
autoFormatting: function () { return React.createElement("span", null,
React.createElement(CodeLg, null, "#####"),
" + ",
React.createElement(CodeLg, null, "space")); },
}, {
name: 'Numbered list',
keymap: keymaps.toggleOrderedList,
autoFormatting: function () { return React.createElement("span", null,
React.createElement(CodeSm, null, "1."),
" + ",
React.createElement(CodeLg, null, "space")); },
}, {
name: 'Bulleted list',
keymap: keymaps.toggleBulletList,
autoFormatting: function () { return React.createElement("span", null,
React.createElement(CodeSm, null, "*"),
" + ",
React.createElement(CodeLg, null, "space")); },
}, {
name: 'Quote',
keymap: keymaps.toggleBlockQuote,
autoFormatting: function () { return React.createElement("span", null,
React.createElement(CodeLg, null, ">"),
" + ",
React.createElement(CodeLg, null, "space")); },
}, {
name: 'Code block',
autoFormatting: function () { return React.createElement("span", null,
React.createElement(CodeLg, null, "```"),
" + ",
React.createElement(CodeLg, null, "space")); },
}, {
name: 'Divider',
keymap: keymaps.insertRule,
autoFormatting: function () { return React.createElement("span", null,
React.createElement(CodeLg, null, "---")); },
}, {
name: 'Link',
keymap: keymaps.addLink,
autoFormatting: function () { return React.createElement("span", null,
React.createElement(CodeLg, null, "[Link](http://a.com)")); },
}, {
name: 'Code',
keymap: keymaps.toggleCode,
autoFormatting: function () { return React.createElement("span", null,
React.createElement(CodeLg, null, "`code`")); },
},
];
export var getComponentFromKeymap = function (keymap) {
var currentMap = keymap[browser.mac ? 'mac' : 'windows'];
var keyParts = currentMap.replace(/\-(?=.)/g, ' + ').split(' ');
return (React.createElement("span", null, keyParts.map(function (part, index) {
if (part === '+') {
return React.createElement("span", { key: currentMap + "-" + index }, ' + ');
}
else if (part === 'Cmd') {
return React.createElement(CodeSm, { key: currentMap + "-" + index }, "\u2318");
}
else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
return React.createElement(CodeMd, { key: currentMap + "-" + index }, part.toLowerCase());
}
return React.createElement(CodeSm, { key: currentMap + "-" + index }, part);
})));
};
var stopPropagation = function (e) { return e.stopPropagation(); };
export default function (_a) {
var onClick = _a.onClick;
return (React.createElement(Container, { onClick: onClick },
React.createElement(Wrapper, null),
React.createElement(Dialog, { onClick: stopPropagation },
React.createElement(Header, null,
"Keyboard shortcuts",
React.createElement(IconWrapper, null,
React.createElement(ToolbarButton, { onClick: onClick, title: "Close help dialog", iconBefore: React.createElement(CloseIcon, { label: "Close help dialog", size: "large" }) }))),
React.createElement(ContentWrapper, null,
React.createElement(Line, null),
React.createElement(Content, null,
React.createElement(ColumnLeft, null,
React.createElement(Title, null, "Text Formatting"),
React.createElement("div", null, formatting.map(function (form) {
return form.keymap &&
React.createElement(Row, { key: "textFormatting-" + form.name },
React.createElement("span", null, form.name),
getComponentFromKeymap(form.keymap));
}))),
React.createElement(ColumnRight, null,
React.createElement(Title, null, "Markdown"),
React.createElement("div", null, formatting.map(function (form) {
return form.autoFormatting &&
React.createElement(Row, { key: "autoFormatting-" + form.name },
React.createElement("span", null, form.name),
form.autoFormatting());
}))))))));
};
//# sourceMappingURL=index.js.map