self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-01-11 18:24:43 +02:00
Code Issues Releases Activity

Desktop: Fixes #10025: Toggle external editing button overlaps with bold button. (#10069)

Browse Source
This commit is contained in:
Janhavi Alekar 2024-04-03 22:59:22 +05:30 committed by GitHub
parent 1e6cc11868
commit ce3a28de70
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
View File

@ -549,9 +549,12 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
// our styling is overwritten which causes some elements to have the wrong styling. Removing the
// style and re-applying it on editorReady gives our styles precedence and prevents any flashing
//
// watchedNoteFiles is here , as it triggers a re-render of styles whenever it changes,
// this keeps the toolbar header styles in sync with toggle external editing button
//
// tl;dr: editorReady is used here because the css needs to be re-applied after TinyMCE init
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
}, [editorReady, props.themeId, lightTheme, props.whiteBackgroundNoteRendering]);
}, [editorReady, props.themeId, lightTheme, props.whiteBackgroundNoteRendering, props.watchedNoteFiles]);
// -----------------------------------------------------------------------------------------
// Enable or disable the editor

5
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.ts
View File

@ -3,7 +3,8 @@ import { NoteBodyEditorProps } from '../../../utils/types';
const { buildStyle } = require('@joplin/lib/theme');
export default function styles(props: NoteBodyEditorProps) {
return buildStyle(['TinyMCE', props.style.width, props.style.height], props.themeId, (theme: any) => {
const leftExtraToolbarContainerWidth = props.watchedNoteFiles.length > 0 ? 120 : 80;
return buildStyle(['TinyMCE', props.style.width, props.style.height, leftExtraToolbarContainerWidth], props.themeId, (theme: any) => {
const extraToolbarContainer = {
boxSizing: 'content-box',
backgroundColor: theme.backgroundColor3,
@ -38,7 +39,7 @@ export default function styles(props: NoteBodyEditorProps) {
},
leftExtraToolbarContainer: {
...extraToolbarContainer,
width: 80,
width: leftExtraToolbarContainerWidth,
left: 0,
},
rightExtraToolbarContainer: {

1
packages/app-desktop/gui/NoteEditor/NoteEditor.tsx
View File

@ -466,6 +466,7 @@ function NoteEditor(props: NoteEditorProps) {
// We need it to identify the context for which media is rendered.
// It is currently used to remember pdf scroll position for each attachments of each note uniquely.
noteId: props.noteId,
watchedNoteFiles: props.watchedNoteFiles,
};
let editor = null;

1
packages/app-desktop/gui/NoteEditor/utils/types.ts
View File

@ -122,6 +122,7 @@ export interface NoteBodyEditorProps {
isSafeMode: boolean;
noteId: string;
useCustomPdfViewer: boolean;
watchedNoteFiles: string[];
}
export interface FormNote {