mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-15 09:04:04 +02:00
7a9ec627ee
* Fire resize event whenever the layout changes This solves an issue where the markdown editor was changing size physically, but the refresh function wasn't being called so the editor would lose track of it's size and place the cursor wrongly. The editor was able to correctly resize when the window resize event was fired, but this didn't happen when the sidebars were toggled. The solution implemented here is to hook in to the function where layout props are changed, and emit a resize event there. This means that anytime the layout changes (whether or not it affects sizing), the resize event will be fired.
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { CommandContext, CommandDeclaration, CommandRuntime } from '@joplin/lib/services/CommandService';
|
|
import { _ } from '@joplin/lib/locale';
|
|
import setLayoutItemProps from '../../ResizableLayout/utils/setLayoutItemProps';
|
|
import layoutItemProp from '../../ResizableLayout/utils/layoutItemProp';
|
|
import { AppState } from '../../../app.reducer';
|
|
|
|
export const declaration: CommandDeclaration = {
|
|
name: 'toggleSideBar',
|
|
label: () => _('Toggle sidebar'),
|
|
iconName: 'fas fa-bars',
|
|
};
|
|
|
|
export const runtime = (): CommandRuntime => {
|
|
return {
|
|
execute: async (context: CommandContext) => {
|
|
const layout = (context.state as AppState).mainLayout;
|
|
|
|
const newLayout = setLayoutItemProps(layout, 'sideBar', {
|
|
visible: !layoutItemProp(layout, 'sideBar', 'visible'),
|
|
});
|
|
|
|
// Toggling the sidebar will affect the size of most other on-screen components.
|
|
// Dispatching a window resize event is a bit of a hack, but it ensures that any
|
|
// component that watches for resizes will be accurately notified
|
|
window.dispatchEvent(new Event('resize'));
|
|
|
|
context.dispatch({
|
|
type: 'MAIN_LAYOUT_SET',
|
|
value: newLayout,
|
|
});
|
|
},
|
|
};
|
|
};
|