self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-02-04 19:16:07 +02:00
Code Issues Releases Activity

Chore: Desktop: Markdown editor panes: Migrate from style properties to SCSS (#11423)

Browse Source
This commit is contained in:
Henry Heino 2024-11-20 03:36:56 -08:00 committed by GitHub
parent e5c31e555f
commit 5dcbf4ce4a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 67 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useStyles.ts
View File

@ -23,29 +23,6 @@ const useStyles = (props: NoteBodyEditorProps) => {
display: 'flex',
flexDirection: 'row',
},
rowEditorViewer: {
position: 'relative',
display: 'flex',
flexDirection: 'row',
flex: 1,
paddingTop: 10,
// Allow the editor container to shrink (allowing the editor to scroll)
minHeight: 0,
},
cellEditor: {
position: 'relative',
display: 'flex',
flex: 1,
},
cellViewer: {
position: 'relative',
display: 'flex',
flex: 1,
borderLeftWidth: 1,
borderLeftColor: theme.dividerColor,
borderLeftStyle: 'solid',
},
viewer: {
display: 'flex',
overflow: 'hidden',

42
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v5/CodeMirror.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react';
import { useState, useEffect, useRef, forwardRef, useCallback, useImperativeHandle, useMemo, ForwardedRef, useContext } from 'react';
import { useState, useEffect, useRef, forwardRef, useCallback, useImperativeHandle, ForwardedRef, useContext } from 'react';
// eslint-disable-next-line no-unused-vars
import { EditorCommand, MarkupToHtmlOptions, NoteBodyEditorProps, NoteBodyEditorRef } from '../../../utils/types';
@ -694,25 +694,6 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
showEditorMarkers: true,
});
const cellEditorStyle = useMemo(() => {
const output = { ...styles.cellEditor };
if (!props.visiblePanes.includes('editor')) {
output.display = 'none'; // Seems to work fine since the refactoring
}
return output;
}, [styles.cellEditor, props.visiblePanes]);
const cellViewerStyle = useMemo(() => {
const output = { ...styles.cellViewer };
if (!props.visiblePanes.includes('viewer')) {
output.display = 'none';
} else if (!props.visiblePanes.includes('editor')) {
output.borderLeftStyle = 'none';
}
return output;
}, [styles.cellViewer, props.visiblePanes]);
useEffect(() => {
if (!editorRef.current) return;
@ -741,7 +722,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
const matchBracesOptions = Setting.value('editor.autoMatchingBraces') ? { override: true, pairs: '``()[]{}\'\'""‘’“”（）《》「」『』【】〔〕〖〗〘〙〚〛' } : false;
return (
<div style={cellEditorStyle}>
<div className='editor'>
<Editor
value={props.content}
searchMarkers={props.searchMarkers}
@ -766,7 +747,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
function renderViewer() {
return (
<div style={cellViewerStyle}>
<div className='viewer'>
<NoteTextViewer
ref={webviewRef}
themeId={props.themeId}
@ -779,8 +760,18 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
);
}
const windowId = useContext(WindowIdContext);
const editorViewerRow = (
<div className={[
'note-editor-viewer-row',
props.visiblePanes.includes('editor') ? '-show-editor' : '',
props.visiblePanes.includes('viewer') ? '-show-viewer' : '',
].join(' ')}>
{renderEditor()}
{renderViewer()}
</div>
);
const windowId = useContext(WindowIdContext);
return (
<ErrorBoundary message="The text editor encountered a fatal error and could not continue. The error might be due to a plugin, so please try to disable some of them and try again.">
<div style={styles.root} ref={rootRef}>
@ -788,10 +779,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
<Toolbar themeId={props.themeId} windowId={windowId}/>
{props.noteToolbar}
</div>
<div style={styles.rowEditorViewer}>
{renderEditor()}
{renderViewer()}
</div>
{editorViewerRow}
</div>
</ErrorBoundary>
);

40
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx
View File

@ -301,25 +301,6 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
}
}, [renderedBody, webviewReady, getLineScrollPercent, setEditorPercentScroll]);
const cellEditorStyle = useMemo(() => {
const output = { ...styles.cellEditor };
if (!props.visiblePanes.includes('editor')) {
output.display = 'none'; // Seems to work fine since the refactoring
}
return output;
}, [styles.cellEditor, props.visiblePanes]);
const cellViewerStyle = useMemo(() => {
const output = { ...styles.cellViewer };
if (!props.visiblePanes.includes('viewer')) {
output.display = 'none';
} else if (!props.visiblePanes.includes('editor')) {
output.borderLeftStyle = 'none';
}
return output;
}, [styles.cellViewer, props.visiblePanes]);
useRefocusOnVisiblePaneChange({ editorRef, webviewRef, visiblePanes: props.visiblePanes });
useEditorSearchHandler({
@ -406,7 +387,7 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
const renderEditor = () => {
return (
<div style={cellEditorStyle}>
<div className='editor'>
<Editor
style={styles.editor}
initialText={props.content}
@ -427,7 +408,7 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
const renderViewer = () => {
return (
<div style={cellViewerStyle}>
<div className='viewer'>
<NoteTextViewer
ref={webviewRef}
themeId={props.themeId}
@ -440,8 +421,18 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
);
};
const windowId = useContext(WindowIdContext);
const editorViewerRow = (
<div className={[
'note-editor-viewer-row',
props.visiblePanes.includes('editor') ? '-show-editor' : '',
props.visiblePanes.includes('viewer') ? '-show-viewer' : '',
].join(' ')}>
{renderEditor()}
{renderViewer()}
</div>
);
const windowId = useContext(WindowIdContext);
return (
<ErrorBoundary message="The text editor encountered a fatal error and could not continue. The error might be due to a plugin, so please try to disable some of them and try again.">
<div style={styles.root} ref={rootRef}>
@ -449,10 +440,7 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
<Toolbar themeId={props.themeId} windowId={windowId}/>
{props.noteToolbar}
</div>
<div style={styles.rowEditorViewer}>
{renderEditor()}
{renderViewer()}
</div>
{editorViewerRow}
</div>
</ErrorBoundary>
);

1
packages/app-desktop/gui/NoteEditor/style.scss
View File

@ -4,3 +4,4 @@
@use "./styles/note-title-info-group.scss";
@use "./styles/note-title-wrapper.scss";
@use "./styles/note-editor-wrapper.scss";
@use "./styles/note-editor-viewer-row.scss";

37
packages/app-desktop/gui/NoteEditor/styles/note-editor-viewer-row.scss Normal file
View File

@ -0,0 +1,37 @@
.note-editor-viewer-row {
position: relative;
display: flex;
flex-direction: row;
flex: 1;
padding-top: 10px;
// Allow the editor container to shrink (allowing the editor to scroll)
min-height: 0;
> .editor, > .viewer {
position: relative;
display: flex;
flex: 1;
}
> .viewer {
border-left-width: 1px;
border-left-color: var(--joplin-divider-color);
border-left-style: solid;
}
&:not(.-show-viewer) > .viewer {
display: none;
}
&:not(.-show-editor) {
> .editor {
display: none;
}
> .viewer {
border-left: none;
}
}
}