diff --git a/.eslintignore b/.eslintignore index fb2f23ece..d6c33847f 100644 --- a/.eslintignore +++ b/.eslintignore @@ -845,6 +845,7 @@ packages/plugins/ToggleSidebars/api/index.js packages/plugins/ToggleSidebars/api/types.js packages/plugins/ToggleSidebars/src/index.js packages/react-native-saf-x/src/index.js +packages/renderer/HtmlToHtml.test.js packages/renderer/HtmlToHtml.js packages/renderer/InMemoryCache.js packages/renderer/MarkupToHtml.js diff --git a/.gitignore b/.gitignore index ec6be3b52..61ffca103 100644 --- a/.gitignore +++ b/.gitignore @@ -830,6 +830,7 @@ packages/plugins/ToggleSidebars/api/index.js packages/plugins/ToggleSidebars/api/types.js packages/plugins/ToggleSidebars/src/index.js packages/react-native-saf-x/src/index.js +packages/renderer/HtmlToHtml.test.js packages/renderer/HtmlToHtml.js packages/renderer/InMemoryCache.js packages/renderer/MarkupToHtml.js diff --git a/packages/app-desktop/gui/NoteEditor/utils/useFormNote.ts b/packages/app-desktop/gui/NoteEditor/utils/useFormNote.ts index e742e9be4..1d9a290cd 100644 --- a/packages/app-desktop/gui/NoteEditor/utils/useFormNote.ts +++ b/packages/app-desktop/gui/NoteEditor/utils/useFormNote.ts @@ -3,7 +3,7 @@ import { FormNote, defaultFormNote, ResourceInfos } from './types'; import { clearResourceCache, attachedResources } from './resourceHandling'; import AsyncActionQueue from '@joplin/lib/AsyncActionQueue'; import { handleResourceDownloadMode } from './resourceHandling'; -import HtmlToHtml from '@joplin/renderer/HtmlToHtml'; +import { splitHtml } from '@joplin/renderer/HtmlToHtml'; import Setting from '@joplin/lib/models/Setting'; import usePrevious from '../../hooks/usePrevious'; import ResourceEditWatcher from '@joplin/lib/services/ResourceEditWatcher/index'; @@ -73,8 +73,7 @@ export default function useFormNote(dependencies: HookDependencies) { let originalCss = ''; if (n.markup_language === MarkupToHtml.MARKUP_LANGUAGE_HTML) { - const htmlToHtml = new HtmlToHtml(); - const splitted = htmlToHtml.splitHtml(n.body); + const splitted = splitHtml(n.body); originalCss = splitted.css; } diff --git a/packages/renderer/HtmlToHtml.test.ts b/packages/renderer/HtmlToHtml.test.ts new file mode 100644 index 000000000..6f0e1648b --- /dev/null +++ b/packages/renderer/HtmlToHtml.test.ts @@ -0,0 +1,44 @@ +import { splitHtml, SplittedHtml } from './HtmlToHtml'; + +describe('HtmlToHtml', () => { + + test('should split an HTML string into HTML and CSS', () => { + const testCases: [string, SplittedHtml][] = [ + [ + '', + { + html: '', + css: '', + }, + ], + [ + '\n
hello
\n

another line

', + { + html: '\n
hello
\n

another line

', + css: 'b { font-weight: bold; }', + }, + ], + [ + '\n
hello
', + { + html: '\n
hello
', + css: 'b { font-weight: bold; }', + }, + ], + [ + '\n
hello
', + { + html: '\n
hello
', + css: '', + }, + ], + ]; + + for (const t of testCases) { + const [input, expected] = t; + const actual = splitHtml(input); + expect(actual).toEqual(expected); + } + }); + +}); diff --git a/packages/renderer/HtmlToHtml.ts b/packages/renderer/HtmlToHtml.ts index 717da48f0..aacd25fae 100644 --- a/packages/renderer/HtmlToHtml.ts +++ b/packages/renderer/HtmlToHtml.ts @@ -1,10 +1,6 @@ import htmlUtils from './htmlUtils'; import linkReplacement from './MdToHtml/linkReplacement'; import utils, { ItemIdToUrlHandler } from './utils'; - -// TODO: fix -// import Setting from '@joplin/lib/models/Setting'; -// const { themeStyle } = require('@joplin/lib/theme'); import InMemoryCache from './InMemoryCache'; import { RenderResult } from './MarkupToHtml'; const md5 = require('md5'); @@ -14,6 +10,11 @@ const md5 = require('md5'); // relatively small. const inMemoryCache = new InMemoryCache(10); +export interface SplittedHtml { + html: string; + css: string; +} + interface FsDriver { // eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied writeFile: Function; @@ -79,19 +80,6 @@ export default class HtmlToHtml { return this.fsDriver_; } - public splitHtml(html: string) { - const trimmedHtml = trimStart(html); - if (trimmedHtml.indexOf(''); - if (closingIndex < 0) return { html: html, css: '' }; - - return { - html: trimmedHtml.substr(closingIndex + 8), - css: trimmedHtml.substr(7, closingIndex), - }; - } - public async allAssets(/* theme*/): Promise { return []; // TODO } @@ -166,7 +154,7 @@ export default class HtmlToHtml { let cssStrings: string[] = []; if (options.splitted) { - const splitted = this.splitHtml(html); + const splitted = splitHtml(html); cssStrings = [splitted.css].concat(cssStrings); const output: RenderResult = { @@ -191,3 +179,16 @@ export default class HtmlToHtml { }; } } + +const splitHtmlRegex = /^