self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-03-20 20:55:18 +02:00
Code Issues Releases Activity

Desktop: Fixes #5461: Editor max width was not always applied in Rich Text editor

Browse Source
This commit is contained in:
Laurent Cozic 2021-09-19 12:03:16 +01:00
parent 0d40026d8b
commit 6d981864ef
4 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -793,7 +793,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
};
}
await loadDocumentAssets(editor, await props.allAssets(props.contentMarkupLanguage));
await loadDocumentAssets(editor, await props.allAssets(props.contentMarkupLanguage, { contentMaxWidthTarget: '.mce-content-body' }));
dispatchDidUpdate(editor);
};

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

@ -14,7 +14,7 @@ import useMarkupToHtml from './utils/useMarkupToHtml';
import useFormNote, { OnLoadEvent } from './utils/useFormNote';
import useFolder from './utils/useFolder';
import styles_ from './styles';
import { NoteEditorProps, FormNote, ScrollOptions, ScrollOptionTypes, OnChangeEvent, NoteBodyEditorProps } from './utils/types';
import { NoteEditorProps, FormNote, ScrollOptions, ScrollOptionTypes, OnChangeEvent, NoteBodyEditorProps, AllAssetsOptions } from './utils/types';
import ResourceEditWatcher from '@joplin/lib/services/ResourceEditWatcher/index';
import CommandService from '@joplin/lib/services/CommandService';
import ToolbarButton from '../ToolbarButton/ToolbarButton';
@ -151,7 +151,7 @@ function NoteEditor(props: NoteEditorProps) {
plugins: props.plugins,
});
const allAssets = useCallback(async (markupLanguage: number): Promise<any[]> => {
const allAssets = useCallback(async (markupLanguage: number, options: AllAssetsOptions = null): Promise<any[]> => {
const theme = themeStyle(props.themeId);
const markupToHtml = markupLanguageUtils.newMarkupToHtml({}, {
@ -159,7 +159,10 @@ function NoteEditor(props: NoteEditorProps) {
customCss: props.customCss,
});
return markupToHtml.allAssets(markupLanguage, theme, { contentMaxWidth: props.contentMaxWidth });
return markupToHtml.allAssets(markupLanguage, theme, {
contentMaxWidth: props.contentMaxWidth,
contentMaxWidthTarget: options.contentMaxWidthTarget,
});
}, [props.themeId, props.customCss, props.contentMaxWidth]);
const handleProvisionalFlag = useCallback(() => {

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

@ -6,6 +6,10 @@ import { MarkupLanguage } from '@joplin/renderer';
import { RenderResult, RenderResultPluginAsset } from '@joplin/renderer/MarkupToHtml';
import { MarkupToHtmlOptions } from './useMarkupToHtml';
export interface AllAssetsOptions {
contentMaxWidthTarget?: string;
}
export interface ToolbarButtonInfos {
[key: string]: ToolbarButtonInfo;
}
@ -55,7 +59,7 @@ export interface NoteBodyEditorProps {
onScroll(event: any): void;
markupToHtml: (markupLanguage: MarkupLanguage, markup: string, options: MarkupToHtmlOptions)=> Promise<RenderResult>;
htmlToMarkdown: Function;
allAssets: (markupLanguage: MarkupLanguage)=> Promise<RenderResultPluginAsset[]>;
allAssets: (markupLanguage: MarkupLanguage, options: AllAssetsOptions)=> Promise<RenderResultPluginAsset[]>;
disabled: boolean;
dispatch: Function;
noteToolbar: any;

4
packages/renderer/noteStyle.ts
View File

@ -9,6 +9,7 @@ function formatCssSize(v: any): string {
export interface Options {
contentMaxWidth?: number;
contentMaxWidthTarget?: string;
}
export default function(theme: any, options: Options = null) {
@ -21,8 +22,9 @@ export default function(theme: any, options: Options = null) {
const fontFamily = '\'Avenir\', \'Arial\', sans-serif';
const maxWidthTarget = options.contentMaxWidthTarget ? options.contentMaxWidthTarget : '#rendered-md';
const maxWidthCss = options.contentMaxWidth ? `
#rendered-md {
${maxWidthTarget} {
max-width: ${options.contentMaxWidth}px;
margin-left: auto;
margin-right: auto;