1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
joplin/ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx

169 lines
3.0 KiB
TypeScript

import * as React from 'react';
const ToolbarBase = require('../../../Toolbar.min.js');
const { _ } = require('lib/locale');
const { buildStyle, themeStyle } = require('../../../../theme.js');
interface ToolbarProps {
theme: number,
dispatch: Function,
}
function styles_(props:ToolbarProps) {
return buildStyle('AceEditorToolbar', props.theme, (/* theme:any*/) => {
const theme = themeStyle(props.theme);
return {
root: {
flex: 1,
marginBottom: 0,
borderTop: `1px solid ${theme.dividerColor}`,
},
};
});
}
export default function Toolbar(props:ToolbarProps) {
const styles = styles_(props);
function createToolbarItems() {
const toolbarItems = [];
toolbarItems.push({
tooltip: _('Bold'),
iconName: 'fa-bold',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textBold',
});
},
});
toolbarItems.push({
tooltip: _('Italic'),
iconName: 'fa-italic',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textItalic',
});
},
});
toolbarItems.push({
type: 'separator',
});
toolbarItems.push({
tooltip: _('Hyperlink'),
iconName: 'fa-link',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textLink',
});
},
});
toolbarItems.push({
tooltip: _('Code'),
iconName: 'fa-code',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textCode',
});
},
});
toolbarItems.push({
tooltip: _('Attach file'),
iconName: 'fa-paperclip',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'attachFile',
});
},
});
toolbarItems.push({
type: 'separator',
});
toolbarItems.push({
tooltip: _('Numbered List'),
iconName: 'fa-list-ol',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textNumberedList',
});
},
});
toolbarItems.push({
tooltip: _('Bulleted List'),
iconName: 'fa-list-ul',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textBulletedList',
});
},
});
toolbarItems.push({
tooltip: _('Checkbox'),
iconName: 'fa-check-square',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textCheckbox',
});
},
});
toolbarItems.push({
tooltip: _('Heading'),
iconName: 'fa-heading',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textHeading',
});
},
});
toolbarItems.push({
tooltip: _('Horizontal Rule'),
iconName: 'fa-ellipsis-h',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textHorizontalRule',
});
},
});
toolbarItems.push({
tooltip: _('Insert Date Time'),
iconName: 'fa-calendar-plus',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'insertDateTime',
});
},
});
toolbarItems.push({
type: 'separator',
});
return toolbarItems;
}
return <ToolbarBase style={styles.root} items={createToolbarItems()} />;
}