2020-11-07 17:59:37 +02:00
|
|
|
import { PluginStates } from '@joplin/lib/services/plugins/reducer';
|
2020-10-21 01:23:55 +02:00
|
|
|
import { useCallback, useMemo } from 'react';
|
2021-01-27 19:42:58 +02:00
|
|
|
import markupLanguageUtils from '../../../utils/markupLanguageUtils';
|
2020-11-07 17:59:37 +02:00
|
|
|
import Setting from '@joplin/lib/models/Setting';
|
2023-03-30 17:58:48 +02:00
|
|
|
import shim from '@joplin/lib/shim';
|
2020-10-21 01:23:55 +02:00
|
|
|
|
2020-11-07 17:59:37 +02:00
|
|
|
const { themeStyle } = require('@joplin/lib/theme');
|
2021-01-22 19:41:11 +02:00
|
|
|
import Note from '@joplin/lib/models/Note';
|
2024-01-26 21:11:05 +02:00
|
|
|
import { MarkupToHtmlOptions } from './types';
|
2020-05-02 17:41:07 +02:00
|
|
|
|
|
|
|
interface HookDependencies {
|
2020-11-12 21:29:22 +02:00
|
|
|
themeId: number;
|
|
|
|
customCss: string;
|
|
|
|
plugins: PluginStates;
|
2023-11-03 21:45:21 +02:00
|
|
|
settingValue: (pluginId: string, key: string)=> any;
|
2023-12-29 18:08:09 +02:00
|
|
|
whiteBackgroundNoteRendering: boolean;
|
2020-05-02 17:41:07 +02:00
|
|
|
}
|
|
|
|
|
2020-11-12 21:13:28 +02:00
|
|
|
export default function useMarkupToHtml(deps: HookDependencies) {
|
2023-12-29 18:08:09 +02:00
|
|
|
const { themeId, customCss, plugins, whiteBackgroundNoteRendering } = deps;
|
2020-10-21 01:23:55 +02:00
|
|
|
|
|
|
|
const markupToHtml = useMemo(() => {
|
2023-12-29 18:08:09 +02:00
|
|
|
return markupLanguageUtils.newMarkupToHtml(plugins, {
|
2020-10-21 01:23:55 +02:00
|
|
|
resourceBaseUrl: `file://${Setting.value('resourceDir')}/`,
|
2021-05-19 15:00:16 +02:00
|
|
|
customCss: customCss || '',
|
2020-10-21 01:23:55 +02:00
|
|
|
});
|
2022-08-19 13:10:04 +02:00
|
|
|
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
|
2021-07-23 12:05:21 +02:00
|
|
|
}, [plugins, customCss]);
|
2020-05-02 17:41:07 +02:00
|
|
|
|
|
|
|
return useCallback(async (markupLanguage: number, md: string, options: MarkupToHtmlOptions = null): Promise<any> => {
|
|
|
|
options = {
|
|
|
|
replaceResourceInternalToExternalLinks: false,
|
|
|
|
resourceInfos: {},
|
2023-03-30 17:58:48 +02:00
|
|
|
platformName: shim.platformName(),
|
2020-05-02 17:41:07 +02:00
|
|
|
...options,
|
|
|
|
};
|
|
|
|
|
|
|
|
md = md || '';
|
|
|
|
|
|
|
|
const theme = themeStyle(themeId);
|
|
|
|
let resources = {};
|
|
|
|
|
|
|
|
if (options.replaceResourceInternalToExternalLinks) {
|
|
|
|
md = await Note.replaceResourceInternalToExternalLinks(md, { useAbsolutePaths: true });
|
|
|
|
} else {
|
|
|
|
resources = options.resourceInfos;
|
|
|
|
}
|
|
|
|
|
|
|
|
delete options.replaceResourceInternalToExternalLinks;
|
|
|
|
|
2023-11-03 21:45:21 +02:00
|
|
|
const result = await markupToHtml.render(markupLanguage, md, theme, {
|
|
|
|
codeTheme: theme.codeThemeCss,
|
2020-05-02 17:41:07 +02:00
|
|
|
resources: resources,
|
|
|
|
postMessageSyntax: 'ipcProxySendToHost',
|
|
|
|
splitted: true,
|
|
|
|
externalAssetsOnly: true,
|
2023-11-03 21:45:21 +02:00
|
|
|
codeHighlightCacheKey: 'useMarkupToHtml',
|
|
|
|
settingValue: deps.settingValue,
|
2023-12-29 18:08:09 +02:00
|
|
|
whiteBackgroundNoteRendering,
|
2023-11-03 21:45:21 +02:00
|
|
|
...options,
|
|
|
|
});
|
2020-05-02 17:41:07 +02:00
|
|
|
|
|
|
|
return result;
|
2022-08-19 13:10:04 +02:00
|
|
|
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
|
2023-12-29 18:08:09 +02:00
|
|
|
}, [themeId, customCss, markupToHtml, whiteBackgroundNoteRendering]);
|
2020-05-02 17:41:07 +02:00
|
|
|
}
|