self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-07-13 00:10:37 +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
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); 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 useFormNote, { OnLoadEvent } from './utils/useFormNote';
import useFolder from './utils/useFolder'; import useFolder from './utils/useFolder';
import styles_ from './styles'; 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 ResourceEditWatcher from '@joplin/lib/services/ResourceEditWatcher/index';
import CommandService from '@joplin/lib/services/CommandService'; import CommandService from '@joplin/lib/services/CommandService';
import ToolbarButton from '../ToolbarButton/ToolbarButton'; import ToolbarButton from '../ToolbarButton/ToolbarButton';
@ -151,7 +151,7 @@ function NoteEditor(props: NoteEditorProps) {
plugins: props.plugins, 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 theme = themeStyle(props.themeId);
const markupToHtml = markupLanguageUtils.newMarkupToHtml({}, { const markupToHtml = markupLanguageUtils.newMarkupToHtml({}, {
@ -159,7 +159,10 @@ function NoteEditor(props: NoteEditorProps) {
customCss: props.customCss, 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]); }, [props.themeId, props.customCss, props.contentMaxWidth]);
const handleProvisionalFlag = useCallback(() => { 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 { RenderResult, RenderResultPluginAsset } from '@joplin/renderer/MarkupToHtml';
import { MarkupToHtmlOptions } from './useMarkupToHtml'; import { MarkupToHtmlOptions } from './useMarkupToHtml';
export interface AllAssetsOptions {
contentMaxWidthTarget?: string;
}
export interface ToolbarButtonInfos { export interface ToolbarButtonInfos {
[key: string]: ToolbarButtonInfo; [key: string]: ToolbarButtonInfo;
} }
@ -55,7 +59,7 @@ export interface NoteBodyEditorProps {
onScroll(event: any): void; onScroll(event: any): void;
markupToHtml: (markupLanguage: MarkupLanguage, markup: string, options: MarkupToHtmlOptions)=> Promise<RenderResult>; markupToHtml: (markupLanguage: MarkupLanguage, markup: string, options: MarkupToHtmlOptions)=> Promise<RenderResult>;
htmlToMarkdown: Function; htmlToMarkdown: Function;
allAssets: (markupLanguage: MarkupLanguage)=> Promise<RenderResultPluginAsset[]>; allAssets: (markupLanguage: MarkupLanguage, options: AllAssetsOptions)=> Promise<RenderResultPluginAsset[]>;
disabled: boolean; disabled: boolean;
dispatch: Function; dispatch: Function;
noteToolbar: any; noteToolbar: any;

4
packages/renderer/noteStyle.ts
View File

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