feat: Initial clean release of CHM

packages/app-desktop/gui/MainLayoutPane.tsx

@@ -0,0 +1,173 @@
+import * as React from 'react';
+import { useContext, useRef } from 'react';
+import NoteListWrapper from './NoteListWrapper/NoteListWrapper';
+import { RenderItemEvent } from './ResizableLayout/ResizableLayout';
+import Sidebar from './Sidebar/Sidebar';
+import { WindowIdContext } from './NewWindowOrIFrame';
+import { NoteListColumns } from '@joplin/lib/services/plugins/api/noteListType';
+import NoteEditor from './NoteEditor/NoteEditor';
+import ChatPanel from './ChatPanel/ChatPanel';
+import { PluginHtmlContents, PluginStates, utils as pluginUtils } from '@joplin/lib/services/plugins/reducer';
+import { _ } from '@joplin/lib/locale';
+import UserWebview from '../services/plugins/UserWebview';
+import removeItem from './ResizableLayout/utils/removeItem';
+import { LayoutItem } from './ResizableLayout/utils/types';
+import { AppState } from '../app.reducer';
+import { connect } from 'react-redux';
+import { stateUtils } from '@joplin/lib/reducer';
+import validateColumns from './NoteListHeader/utils/validateColumns';
+
+interface Props {
+	themeId: number;
+	listRendererId: string;
+	startupPluginsLoaded: boolean;
+	notesSortOrderField: string;
+	notesColumns: NoteListColumns;
+	selectedFolderId: string;
+	notesSortOrderReverse: boolean;
+	plugins: PluginStates;
+	pluginHtmlContents: PluginHtmlContents;
+
+	contentKey: string;
+	event: RenderItemEvent;
+	layout: LayoutItem;
+	onNoteTitleChange?: (title: string)=> void;
+	onUpdateLayout: (layout: LayoutItem)=> void;
+}
+
+const MainLayoutPane: React.FC<Props> = (props) => {
+	const { contentKey, event } = props;
+
+
+	const windowId = useContext(WindowIdContext);
+	const cancelLayoutRemoveRef = useRef(0);
+
+	// Key should never be undefined but somehow it can happen, also not
+	// clear how. For now in this case render nothing so that the app
+	// doesn't crash.
+	// https://discourse.joplinapp.org/t/rearranging-the-pannels-crushed-the-app-and-generated-fatal-error/14373?u=laurent
+	if (!contentKey) {
+		console.error('resizableLayout_renderItem: Trying to render an item using an empty key. Full layout is:', props.layout);
+		return null;
+	}
+
+	const eventEmitter = event.eventEmitter;
+
+	// const viewsToRemove:string[] = [];
+
+	const components: Record<string, ()=> React.ReactNode> = {
+		sideBar: () => {
+			return <Sidebar />;
+		},
+
+		noteList: () => {
+			return <NoteListWrapper
+				resizableLayoutEventEmitter={eventEmitter}
+				visible={event.visible}
+				size={event.size}
+				themeId={props.themeId}
+				listRendererId={props.listRendererId}
+				startupPluginsLoaded={props.startupPluginsLoaded}
+				notesSortOrderField={props.notesSortOrderField}
+				notesSortOrderReverse={props.notesSortOrderReverse}
+				columns={props.notesColumns}
+				selectedFolderId={props.selectedFolderId}
+			/>;
+		},
+
+		editor: () => {
+			return <div className='note-editor-wrapper' role='main' aria-label={_('Note')}>
+				<NoteEditor
+					windowId={windowId}
+					onTitleChange={props.onNoteTitleChange}
+					startupPluginsLoaded={props.startupPluginsLoaded}
+				/>
+			</div>;
+		},
+
+		chatPanel: () => {
+			return <ChatPanel windowId={windowId} />;
+		},
+	};
+
+	if (components[contentKey]) return components[contentKey]();
+
+	const viewsToRemove: string[] = [];
+
+	if (contentKey.indexOf('plugin-view') === 0) {
+		const viewInfo = pluginUtils.viewInfoByViewId(props.plugins, event.item.key);
+
+		if (!viewInfo) {
+			// Once all startup plugins have loaded, we know that all the
+			// views are ready so we can remove the orphans ones.
+			//
+			// Before they are loaded, there might be views that don't match
+			// any plugins, but that's only because it hasn't loaded yet.
+			if (props.startupPluginsLoaded) {
+				console.warn(`Could not find plugin associated with view: ${event.item.key}`);
+				viewsToRemove.push(event.item.key);
+			}
+		} else {
+			const { view, plugin } = viewInfo;
+			const html = props.pluginHtmlContents[plugin.id]?.[view.id] ?? '';
+
+			return <UserWebview
+				key={view.id}
+				viewId={view.id}
+				themeId={props.themeId}
+				html={html}
+				scripts={view.scripts}
+				pluginId={plugin.id}
+				borderBottom={true}
+				fitToContent={false}
+			/>;
+		}
+	} else {
+		// The layout may reference a component that no longer exists -
+		// for example a panel from a previous version of the app, or a
+		// feature that has been removed. Rather than crash, log the issue
+		// and queue the item for removal from the layout.
+		console.warn(`Invalid layout component: ${contentKey} - it will be removed from the layout`);
+		viewsToRemove.push(contentKey);
+	}
+
+	if (viewsToRemove.length) {
+		const cancelCounter = cancelLayoutRemoveRef.current + 1;
+		cancelLayoutRemoveRef.current = cancelCounter;
+		window.requestAnimationFrame(() => {
+			if (cancelCounter !== cancelLayoutRemoveRef.current) return;
+
+			let newLayout = props.layout;
+			for (const itemKey of viewsToRemove) {
+				newLayout = removeItem(newLayout, itemKey);
+			}
+
+			if (newLayout !== props.layout) {
+				console.warn('Removed invalid views:', viewsToRemove);
+				props.onUpdateLayout(newLayout);
+			}
+		});
+	}
+
+	return null;
+};
+
+interface OwnProps {
+	windowId: string;
+}
+
+export default connect((state: AppState, ownProps: OwnProps) => {
+	const windowState = stateUtils.windowStateById(state, ownProps.windowId);
+
+	return {
+		themeId: state.settings.theme,
+		plugins: state.pluginService.plugins,
+		pluginHtmlContents: state.pluginService.pluginHtmlContents,
+		startupPluginsLoaded: state.startupPluginsLoaded,
+		listRendererId: state.settings['notes.listRendererId'],
+		selectedFolderId: windowState.selectedFolderId,
+		notesSortOrderField: state.settings['notes.sortOrder.field'],
+		notesSortOrderReverse: state.settings['notes.sortOrder.reverse'],
+		notesColumns: validateColumns(state.settings['notes.columns']),
+	};
+})(MainLayoutPane);