diff --git a/joplin.code-workspace b/joplin.code-workspace index 223b66114..14f690c82 100644 --- a/joplin.code-workspace +++ b/joplin.code-workspace @@ -248,7 +248,9 @@ "packages/app-desktop/**/node_modules/": true, "packages/app-desktop/**/packageInfo.js": true, "packages/app-desktop/**/pluginAssets/": true, - "packages/app-desktop/build/": true, + "packages/app-desktop/build/icons/": true, + "packages/app-desktop/build/images/": true, + "packages/app-desktop/vendor/lib/": true, "packages/app-desktop/dist/": true, "packages/app-desktop/fonts/": true, "packages/app-desktop/gui/note-viewer/highlight/styles/": true, diff --git a/packages/app-desktop/.gitignore b/packages/app-desktop/.gitignore index 96c3c5f88..fb31c0a87 100644 --- a/packages/app-desktop/.gitignore +++ b/packages/app-desktop/.gitignore @@ -11,4 +11,6 @@ gui/NoteEditor/NoteBody/TinyMCE/supportedLocales.js runForSharingCommands-* runForTestingCommands-* style.min.css -build/lib/ \ No newline at end of file +build/lib/ +vendor/ +!vendor/loadEmojiLib.js diff --git a/packages/app-desktop/bridge.ts b/packages/app-desktop/bridge.ts index 3876f298c..a545ac1b2 100644 --- a/packages/app-desktop/bridge.ts +++ b/packages/app-desktop/bridge.ts @@ -34,6 +34,29 @@ export class Bridge { return !this.electronApp().electronApp().isPackaged; } + // The build directory contains additional external files that are going to + // be packaged by Electron Builder. This is for files that need to be + // accessed outside of the Electron app (for example the application icon). + // + // Any static file that's accessed from within the app such as CSS or fonts + // should go in /vendor. + // + // The build folder location is dynamic, depending on whether we're running + // in dev or prod, which makes it hard to access it from static files (for + // example from plain HTML files that load CSS or JS files). For this reason + // it should be avoided as much as possible. + public buildDir() { + return this.electronApp().buildDir(); + } + + // The vendor directory and its content is dynamically created from other + // dir (usually by pulling files from node_modules). It can also be accessed + // using a relative path such as "../../vendor/lib/file.js" because it will + // be at the same location in both prod and dev mode (unlike the build dir). + public vendorDir() { + return `${__dirname}/vendor`; + } + env() { return this.electronWrapper_.env(); } @@ -223,10 +246,6 @@ export class Bridge { return require('electron').shell.openPath(fullPath); } - buildDir() { - return this.electronApp().buildDir(); - } - screen() { return require('electron').screen; } diff --git a/packages/app-desktop/gui/EditFolderDialog/IconSelector.tsx b/packages/app-desktop/gui/EditFolderDialog/IconSelector.tsx index c00e1eec9..8c2979a20 100644 --- a/packages/app-desktop/gui/EditFolderDialog/IconSelector.tsx +++ b/packages/app-desktop/gui/EditFolderDialog/IconSelector.tsx @@ -4,6 +4,7 @@ import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffe import { loadScript } from '../utils/loadScript'; import Button from '../Button/Button'; import { FolderIcon } from '@joplin/lib/services/database/types'; +import bridge from '../../services/bridge'; export interface ChangeEvent { value: FolderIcon; @@ -29,7 +30,7 @@ export const IconSelector = (props: Props) => { await loadScript({ id: 'emoji-button-lib', - src: 'build/lib/@joeattardi/emoji-button/dist/index.js', + src: `${bridge().vendorDir()}/lib/@joeattardi/emoji-button/dist/index.js`, attrs: { type: 'module', }, @@ -39,7 +40,7 @@ export const IconSelector = (props: Props) => { await loadScript({ id: 'emoji-button-lib-loader', - src: 'gui/EditFolderDialog/loadEmojiLib.js', + src: `${bridge().vendorDir()}/loadEmojiLib.js`, attrs: { type: 'module', }, diff --git a/packages/app-desktop/gui/EditFolderDialog/loadEmojiLib.js b/packages/app-desktop/gui/EditFolderDialog/loadEmojiLib.js deleted file mode 100644 index 5354efd1d..000000000 --- a/packages/app-desktop/gui/EditFolderDialog/loadEmojiLib.js +++ /dev/null @@ -1,2 +0,0 @@ -import { EmojiButton } from '../../build/lib/@joeattardi/emoji-button/dist/index.js'; -window.EmojiButton = EmojiButton; diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx index 1ad91c378..0fe230802 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx @@ -336,7 +336,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) { async function loadScripts() { const scriptsToLoad: {src: string; id: string; loaded: boolean}[] = [ { - src: 'build/lib/codemirror/addon/dialog/dialog.css', + src: `${bridge().vendorDir()}/lib/codemirror/addon/dialog/dialog.css`, id: 'codemirrorDialogStyle', loaded: false, }, @@ -351,7 +351,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) { if (theme.indexOf('solarized') >= 0) theme = 'solarized'; scriptsToLoad.push({ - src: `build/lib/codemirror/theme/${theme}.css`, + src: `${bridge().vendorDir()}/lib/codemirror/theme/${theme}.css`, id: `codemirrorTheme${theme}`, loaded: false, }); diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx index 16c5cbba4..a6e235f48 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx @@ -23,6 +23,7 @@ import openEditDialog from './utils/openEditDialog'; import { MarkupToHtmlOptions } from '../../utils/useMarkupToHtml'; import { themeStyle } from '@joplin/lib/theme'; import { loadScript } from '../../../utils/loadScript'; +import bridge from '../../../../services/bridge'; const { clipboard } = require('electron'); const supportedLocales = require('./supportedLocales'); @@ -320,7 +321,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => { async function loadScripts() { const scriptsToLoad: any[] = [ { - src: 'build/lib/tinymce/tinymce.min.js', + src: `${bridge().vendorDir()}/lib/tinymce/tinymce.min.js`, id: 'tinyMceScript', loaded: false, }, @@ -571,7 +572,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => { statusbar: false, target_list: false, table_resize_bars: false, - language_url: ['en_US', 'en_GB'].includes(language) ? undefined : `build/lib/tinymce/langs/${language}`, + language_url: ['en_US', 'en_GB'].includes(language) ? undefined : `${bridge().vendorDir()}/lib/tinymce/langs/${language}`, toolbar: toolbar.join(' '), localization_function: _, contextmenu: false, @@ -708,7 +709,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => { } const cssFiles = [ - 'build/lib/@fortawesome/fontawesome-free/css/all.min.css', + `${bridge().vendorDir()}/lib/@fortawesome/fontawesome-free/css/all.min.css`, `gui/note-viewer/pluginAssets/highlight.js/${theme.codeThemeCss}`, ].concat( pluginAssets diff --git a/packages/app-desktop/gui/note-viewer/index.html b/packages/app-desktop/gui/note-viewer/index.html index 581d27b69..f3dd30271 100644 --- a/packages/app-desktop/gui/note-viewer/index.html +++ b/packages/app-desktop/gui/note-viewer/index.html @@ -430,7 +430,7 @@ setMarkers(markLoader_.whenDone.keywords, markLoader_.whenDone.options); }; - script.src = '../../build/lib/mark.js/dist/mark.min.js'; + script.src = '../../vendor/lib/mark.js/dist/mark.min.js'; document.getElementById('joplin-container-markScriptContainer').appendChild(script); } else if (markLoader_.state === 'ready') { setMarkers(keywords, options); diff --git a/packages/app-desktop/gui/utils/loadScript.ts b/packages/app-desktop/gui/utils/loadScript.ts index 62b491d57..1c3bc455f 100644 --- a/packages/app-desktop/gui/utils/loadScript.ts +++ b/packages/app-desktop/gui/utils/loadScript.ts @@ -10,6 +10,8 @@ export interface Script { export const loadScript = async (script: Script) => { return new Promise((resolve) => { + console.info('Loading script:', script); + let element: any = document.getElementById(script.id); if (element) { diff --git a/packages/app-desktop/index.html b/packages/app-desktop/index.html index 7341f5eea..582e4380b 100644 --- a/packages/app-desktop/index.html +++ b/packages/app-desktop/index.html @@ -10,11 +10,11 @@ Joplin - - - - - + + + + +