self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-10-31 00:07:48 +02:00
Code Issues Releases Activity

Refactor note editor

Browse Source 
Refactor note editor using React Hooks and TypeScript
and moved editor-specific code to separate files.
Moved business logic into more maintainable custom hooks.

Squashed commit of the following:

commit f243d9bf89bdcfa1849ee26df5c0dd3e33405010
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sat May 2 16:04:14 2020 +0100

    Fixed saving issue

commit 055f68d2e8b6cf6f130336c38ac2ab480887583d
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sat May 2 15:43:38 2020 +0100

    Fixed HTML notes

commit 99a3cf71f58d2fedcdf3001bf4110b6e8e3993da
Merge: 9be85c45f2 b16ebbbf7a
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sat May 2 12:54:42 2020 +0100

    Merge branch 'master' into refactor_note_text

commit 9be85c45f23e5cb1ecd612b0ee631947871ada6f
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sat May 2 12:21:01 2020 +0100

    Ident to space

commit 848dde1869c010fe5851f493ef7287ada5f2991e
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sat May 2 11:28:50 2020 +0100

    Refactor prop types

commit 13c3bbe2b4f9a522ea3f8a25e7e5e7bb026dfd4f
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sat May 2 11:15:45 2020 +0100

    Fixed resource loading issue

commit 50cb38e3f00ef40ea8b6a468eadd66728a3ec332
Author: Laurent Cozic <laurent@cozic.net>
Date:   Fri May 1 23:46:58 2020 +0100

    Fixed resource loading logic

commit bc42ed03735f50c8394d597bb9e67312e55752fe
Author: Laurent Cozic <laurent@cozic.net>
Date:   Fri May 1 23:08:41 2020 +0100

    Various fixes

commit 03c038e6d6cbde03bd474798b96c4eb120fd1647
Author: Laurent Cozic <laurent@cozic.net>
Date:   Wed Apr 29 23:22:49 2020 +0100

    Fixed resource handling

commit dc6c15302fac094c4e7dec5a20c9fcc4edb3d132
Author: Laurent Cozic <laurent@cozic.net>
Date:   Wed Apr 29 22:55:13 2020 +0100

    Moved more code to files

commit 398d5121e53df34de89b4148ef2cfd3a7bbe4feb
Author: Laurent Cozic <laurent@cozic.net>
Date:   Wed Apr 29 00:22:43 2020 +0000

    More fixes

commit 3ebbb80147d7d502fd955776c7fedb743400597f
Author: Laurent Cozic <laurent@cozic.net>
Date:   Wed Apr 29 00:12:44 2020 +0000

    Various improvements and bug fixes

commit 52a65ed3875e0709117ca93ba723e20624577d05
Author: Laurent Cozic <laurent@cozic.net>
Date:   Tue Apr 28 23:51:07 2020 +0000

    Move more code to sub-files

commit 33ccf530fb442d7ddae0852cbab2c335efdbbf33
Author: Laurent Cozic <laurent@cozic.net>
Date:   Tue Apr 28 23:25:12 2020 +0100

    Moved code to sub-files

commit ba3ad2cf9fcc1d7809df4afe93cd9737585a9960
Merge: 445acdab73 150ee14de6
Author: Laurent Cozic <laurent@cozic.net>
Date:   Tue Apr 28 22:28:56 2020 +0100

    Merge branch 'master' into refactor_note_text

commit 445acdab7368345369d7f69b9becd1e77c8383dc
Author: Laurent Cozic <laurent@cozic.net>
Date:   Tue Apr 28 19:01:41 2020 +0100

    Imported more code

commit 772481d3a3ac7f0b0b00e86394c0f4fd2f3a9fa7
Author: Laurent Cozic <laurent@cozic.net>
Date:   Mon Apr 27 23:43:17 2020 +0000

    Handle save/load state

commit b3b92192ae3a1a30e3018810346cebfad47ac5e3
Author: Laurent Cozic <laurent@cozic.net>
Date:   Mon Apr 27 23:11:11 2020 +0000

    Clean up and added back scroll

commit 7a19ecfd0cb7fef1d58ece2e024099c7e40986da
Author: Laurent Cozic <laurent@cozic.net>
Date:   Mon Apr 27 22:29:39 2020 +0100

    More refactoring

commit ac388afd381eaecfa4582b3566d032c9d953c4dc
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sun Apr 26 17:07:01 2020 +0100

    Restored print

commit 1d2c0ed389a5398dacc584d24922c5ea0dda861a
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sun Apr 26 12:03:15 2020 +0100

    Put back search

commit c618cb59d43fa3bb507dbd0b757b302ecfe907b3
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sat Apr 25 18:21:11 2020 +0100

    Restore scrolling behaviour

commit 324e6ea79ebafab1d2bca246ef030751147a47eb
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sat Apr 25 10:22:31 2020 +0100

    Simplified saving notes

commit ef089aaf2289193bf275d94c1f2785f6d88657e4
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sat Apr 25 10:12:16 2020 +0100

    More refactoring

commit 61b102307d5a98d2c1502d7bf073592da21af720
Author: Laurent Cozic <laurent@cozic.net>
Date:   Fri Apr 24 18:04:44 2020 +0100

    Added back note revisions

commit 7d5e3694d0df044b8493d9114e89e2d81c9b69ad
Author: Laurent Cozic <laurent@cozic.net>
Date:   Thu Apr 23 22:51:52 2020 +0000

    More note toolbar refactoring

commit a56d58e7c80d91f29afadaffaaa004f3254482f7
Author: Laurent Cozic <laurent@cozic.net>
Date:   Thu Apr 23 20:54:37 2020 +0100

    Finished toolbar refactoring

commit 6c8ef9f44f880a9569eed5c54c9c47dca2251e5e
Author: Laurent Cozic <laurent@cozic.net>
Date:   Thu Apr 23 19:17:44 2020 +0100

    More refactoring

commit 7de8057158a9256e2e0dcf948081e10a6a642216
Author: Laurent Cozic <laurent@cozic.net>
Date:   Wed Apr 22 23:48:42 2020 +0100

    Started refactoring commands

commit 177263c85e7d17d8ddc01b583738c2ab14b3acd7
Merge: f58f1a06e0 7ceb68d835
Author: Laurent Cozic <laurent@cozic.net>
Date:   Wed Apr 22 20:26:19 2020 +0100

    Merge branch 'master' into refactor_note_text

commit f58f1a06e08b3cf80e2ac7a794b15f4b5caf8932
Author: Laurent Cozic <laurent@cozic.net>
Date:   Wed Apr 22 20:25:43 2020 +0100

    Moving Ace Editor to separate component

commit a83d3a220515137985c0f334f5848c91b8539138
Author: Laurent Cozic <laurent@cozic.net>
Date:   Mon Apr 20 20:33:21 2020 +0000

    Cleaned up directory structure for note editor

commit c6f2e609c9443bac21de5033bbedf86ac6f12cc0
Author: Laurent Cozic <laurent@cozic.net>
Date:   Mon Apr 20 19:23:06 2020 +0100

    Added "note" menu to move note-related items to it

commit 1219465318ae5a7a2c777ae2ec15d3357e1499df
Author: Laurent Cozic <laurent@cozic.net>
Date:   Mon Apr 20 19:05:04 2020 +0100

    Moved note related toolbar to separate component
This commit is contained in:
Laurent Cozic
2020-05-02 16:41:07 +01:00
parent b16ebbbf7a
commit cb8dca747b
60 changed files with 3861 additions and 1392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
.eslintignore
View File

@@ -27,8 +27,8 @@ Clipper/popup/node_modules
Clipper/popup/scripts/build.js
docs/
ElectronClient/dist
ElectronClient/gui/editors/TinyMCE/plugins/lists.js
ElectronClient/lib
ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/plugins/lists.js
ElectronClient/lib/vendor/sjcl-rn.js
ElectronClient/lib/vendor/sjcl.js
ElectronClient/locales
@@ -59,15 +59,32 @@ Tools/PortableAppsLauncher
Modules/TinyMCE/IconPack/postinstall.js
# AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
ElectronClient/gui/editors/PlainEditor.js
ElectronClient/gui/editors/TinyMCE.js
ElectronClient/gui/MultiNoteActions.js
ElectronClient/gui/NoteContentPropertiesDialog.js
ElectronClient/gui/NoteText2.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/index.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/types.js
ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js
ElectronClient/gui/NoteEditor/NoteEditor.js
ElectronClient/gui/NoteEditor/styles/index.js
ElectronClient/gui/NoteEditor/utils/index.js
ElectronClient/gui/NoteEditor/utils/resourceHandling.js
ElectronClient/gui/NoteEditor/utils/types.js
ElectronClient/gui/NoteEditor/utils/useDropHandler.js
ElectronClient/gui/NoteEditor/utils/useFormNote.js
ElectronClient/gui/NoteEditor/utils/useMarkupToHtml.js
ElectronClient/gui/NoteEditor/utils/useMessageHandler.js
ElectronClient/gui/NoteEditor/utils/useNoteSearchBar.js
ElectronClient/gui/NoteEditor/utils/useSearchMarkers.js
ElectronClient/gui/NoteEditor/utils/useWindowCommandHandler.js
ElectronClient/gui/NoteToolbar/NoteToolbar.js
ElectronClient/gui/ResourceScreen.js
ElectronClient/gui/ShareNoteDialog.js
ElectronClient/gui/utils/NoteText.js
ReactNativeClient/lib/AsyncActionQueue.js
ReactNativeClient/lib/hooks/useImperativeHandlerDebugger.js
ReactNativeClient/lib/hooks/usePrevious.js
ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.js
ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/fence.js
ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.js

1
.eslintrc.js
View File

@@ -49,6 +49,7 @@ module.exports = {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"no-unused-vars": "error",
"@typescript-eslint/no-unused-vars": "error",
"no-constant-condition": 0,
"no-prototype-builtins": 0,
// This error is always a false positive so far since it detects

25
.gitignore vendored
View File

@@ -50,15 +50,32 @@ Tools/commit_hook.txt
*.map
# AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
ElectronClient/gui/editors/PlainEditor.js
ElectronClient/gui/editors/TinyMCE.js
ElectronClient/gui/MultiNoteActions.js
ElectronClient/gui/NoteContentPropertiesDialog.js
ElectronClient/gui/NoteText2.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/index.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/types.js
ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js
ElectronClient/gui/NoteEditor/NoteEditor.js
ElectronClient/gui/NoteEditor/styles/index.js
ElectronClient/gui/NoteEditor/utils/index.js
ElectronClient/gui/NoteEditor/utils/resourceHandling.js
ElectronClient/gui/NoteEditor/utils/types.js
ElectronClient/gui/NoteEditor/utils/useDropHandler.js
ElectronClient/gui/NoteEditor/utils/useFormNote.js
ElectronClient/gui/NoteEditor/utils/useMarkupToHtml.js
ElectronClient/gui/NoteEditor/utils/useMessageHandler.js
ElectronClient/gui/NoteEditor/utils/useNoteSearchBar.js
ElectronClient/gui/NoteEditor/utils/useSearchMarkers.js
ElectronClient/gui/NoteEditor/utils/useWindowCommandHandler.js
ElectronClient/gui/NoteToolbar/NoteToolbar.js
ElectronClient/gui/ResourceScreen.js
ElectronClient/gui/ShareNoteDialog.js
ElectronClient/gui/utils/NoteText.js
ReactNativeClient/lib/AsyncActionQueue.js
ReactNativeClient/lib/hooks/useImperativeHandlerDebugger.js
ReactNativeClient/lib/hooks/usePrevious.js
ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.js
ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/fence.js
ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.js

447
Clipper/popup/config/webpack.config.js
View File

@@ -36,7 +36,7 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
);
// Check if TypeScript is setup
@@ -51,113 +51,113 @@ const sassModuleRegex = /\.module\.(scss|sass)$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// Variable used for enabling profiling in Production
// passed into alias object. Uses a flag if passed into the build command
const isEnvProductionProfile =
// Variable used for enabling profiling in Production
// passed into alias object. Uses a flag if passed into the build command
const isEnvProductionProfile =
isEnvProduction && process.argv.includes('--profile');
// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction
? publicPath.slice(0, -1)
: isEnvDevelopment && '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction
? publicPath.slice(0, -1)
: isEnvDevelopment && '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
},
}
);
}
return loaders;
};
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
},
}
);
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
@@ -329,7 +329,6 @@ module.exports = function(webpackEnv) {
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
//
@@ -379,8 +378,7 @@ module.exports = function(webpackEnv) {
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
@@ -422,7 +420,6 @@ module.exports = function(webpackEnv) {
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
@@ -551,131 +548,131 @@ module.exports = function(webpackEnv) {
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].css',
chunkFilename: 'static/css/[name].chunk.css',
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].css',
chunkFilename: 'static/css/[name].chunk.css',
}),
// Generate an asset manifest file with the following content:
// - "files" key: Mapping of all asset filenames to their corresponding
// output file so that tools can pick it up without having to parse
// `index.html`
// - "entrypoints" key: Array of files which are included in `index.html`,
// can be used to reconstruct the HTML if necessary
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
generate: (seed, files, entrypoints) => {
const manifestFiles = files.reduce((manifest, file) => {
manifest[file.name] = file.path;
return manifest;
}, seed);
const entrypointFiles = entrypoints.main.filter(
fileName => !fileName.endsWith('.map')
);
// Generate an asset manifest file with the following content:
// - "files" key: Mapping of all asset filenames to their corresponding
// output file so that tools can pick it up without having to parse
// `index.html`
// - "entrypoints" key: Array of files which are included in `index.html`,
// can be used to reconstruct the HTML if necessary
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
generate: (seed, files, entrypoints) => {
const manifestFiles = files.reduce((manifest, file) => {
manifest[file.name] = file.path;
return manifest;
}, seed);
const entrypointFiles = entrypoints.main.filter(
fileName => !fileName.endsWith('.map')
);
return {
files: manifestFiles,
entrypoints: entrypointFiles,
};
},
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
// isEnvProduction &&
return {
files: manifestFiles,
entrypoints: entrypointFiles,
};
},
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
// isEnvProduction &&
// new WorkboxWebpackPlugin.GenerateSW({
// clientsClaim: true,
// exclude: [/\.map$/, /asset-manifest\.json$/],
// importWorkboxFrom: 'cdn',
// navigateFallback: `${publicUrl}/index.html`,
// navigateFallbackBlacklist: [
// // Exclude URLs starting with /_, as they're likely an API call
// new RegExp('^/_'),
// // Exclude any URLs whose last part seems to be a file extension
// // as they're likely a resource and not a SPA route.
// // URLs containing a "?" character won't be blacklisted as they're likely
// // a route with query params (e.g. auth callbacks).
// new RegExp('/[^/?]+\\.[^/]+$'),
// ],
// clientsClaim: true,
// exclude: [/\.map$/, /asset-manifest\.json$/],
// importWorkboxFrom: 'cdn',
// navigateFallback: `${publicUrl}/index.html`,
// navigateFallbackBlacklist: [
// // Exclude URLs starting with /_, as they're likely an API call
// new RegExp('^/_'),
// // Exclude any URLs whose last part seems to be a file extension
// // as they're likely a resource and not a SPA route.
// // URLs containing a "?" character won't be blacklisted as they're likely
// // a route with query params (e.g. auth callbacks).
// new RegExp('/[^/?]+\\.[^/]+$'),
// ],
// }),
// TypeScript type checking
useTypeScript &&
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
resolveModuleNameModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
resolveTypeReferenceDirectiveModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
resolveModuleNameModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
resolveTypeReferenceDirectiveModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
].filter(Boolean),
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
http2: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
].filter(Boolean),
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
http2: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};

2
ElectronClient/InteropServiceHelper.js
View File

@@ -70,6 +70,8 @@ class InteropServiceHelper {
cleanup();
}
} else {
// TODO: it is crashing at this point
win.webContents.print(options, (success, reason) => {
// TODO: This is correct but broken in Electron 4. Need to upgrade to 5+
// It calls the callback right away with "false" even if the document hasn't be print yet.

71
ElectronClient/app.js
View File

@@ -134,8 +134,6 @@ class Application extends BaseApplication {
paneOptions = ['editor', 'both'];
} else if (state.settings.layoutButtonSequence === Setting.LAYOUT_VIEWER_SPLIT) {
paneOptions = ['viewer', 'both'];
} else if (state.settings.layoutButtonSequence === Setting.LAYOUT_SPLIT_WYSIWYG) {
paneOptions = ['both', 'wysiwyg'];
} else {
paneOptions = ['editor', 'viewer', 'both'];
}
@@ -547,6 +545,7 @@ class Application extends BaseApplication {
this.dispatch({
type: 'WINDOW_COMMAND',
name: 'print',
noteIds: this.store().getState().selectedNoteIds,
});
},
};
@@ -890,33 +889,6 @@ class Application extends BaseApplication {
}, {
type: 'separator',
screens: ['Main'],
}, {
id: 'edit:commandStartExternalEditing',
label: _('Edit in external editor'),
screens: ['Main'],
accelerator: 'CommandOrControl+E',
click: () => {
this.dispatch({
type: 'WINDOW_COMMAND',
name: 'commandStartExternalEditing',
});
},
}, {
id: 'edit:setTags',
label: _('Tags'),
screens: ['Main'],
accelerator: 'CommandOrControl+Alt+T',
click: () => {
const selectedNoteIds = this.store().getState().selectedNoteIds;
this.dispatch({
type: 'WINDOW_COMMAND',
name: 'setTags',
noteIds: selectedNoteIds,
});
},
}, {
type: 'separator',
screens: ['Main'],
}, {
id: 'edit:focusSearch',
label: _('Search in all the notes'),
@@ -1056,6 +1028,46 @@ class Application extends BaseApplication {
accelerator: 'CommandOrControl+-',
}],
},
note: {
label: _('&Note'),
submenu: [{
id: 'edit:commandStartExternalEditing',
label: _('Edit in external editor'),
screens: ['Main'],
accelerator: 'CommandOrControl+E',
click: () => {
this.dispatch({
type: 'WINDOW_COMMAND',
name: 'commandStartExternalEditing',
});
},
}, {
id: 'edit:setTags',
label: _('Tags'),
screens: ['Main'],
accelerator: 'CommandOrControl+Alt+T',
click: () => {
const selectedNoteIds = this.store().getState().selectedNoteIds;
this.dispatch({
type: 'WINDOW_COMMAND',
name: 'setTags',
noteIds: selectedNoteIds,
});
},
}, {
type: 'separator',
screens: ['Main'],
}, {
label: _('Statistics...'),
click: () => {
this.dispatch({
type: 'WINDOW_COMMAND',
name: 'commandContentProperties',
// text: this.state.note.body,
});
},
}],
},
tools: {
label: _('&Tools'),
submenu: toolsItems,
@@ -1136,6 +1148,7 @@ class Application extends BaseApplication {
rootMenus.file,
rootMenus.edit,
rootMenus.view,
rootMenus.note,
rootMenus.tools,
rootMenus.help,
];

4
ElectronClient/eventManager.js
View File

@@ -18,6 +18,10 @@ class EventManager {
return this.emitter_.removeListener(eventName, callback);
}
off(eventName, callback) {
return this.removeListener(eventName, callback);
}
}
const eventManager = new EventManager();

18
ElectronClient/gui/Header.jsx
View File

@@ -134,6 +134,8 @@ class HeaderComponent extends React.Component {
}
makeButton(key, style, options) {
const theme = themeStyle(this.props.theme);
let icon = null;
if (options.iconName) {
const iconStyle = {
@@ -158,6 +160,20 @@ class HeaderComponent extends React.Component {
const title = options.title ? options.title : '';
if (options.type === 'checkbox' && options.checked) {
finalStyle.backgroundColor = theme.selectedColor;
finalStyle.borderWidth = 1;
finalStyle.borderTopColor = theme.selectedDividerColor;
finalStyle.borderLeftColor = theme.selectedDividerColor;
finalStyle.borderTopStyle = 'solid';
finalStyle.borderLeftStyle = 'solid';
finalStyle.paddingLeft++;
finalStyle.paddingTop++;
finalStyle.paddingBottom--;
finalStyle.paddingRight--;
finalStyle.boxSizing = 'border-box';
}
return (
<a
className={classes.join(' ')}
@@ -256,6 +272,8 @@ class HeaderComponent extends React.Component {
height: theme.headerHeight,
display: 'flex',
alignItems: 'center',
paddingTop: 1,
paddingBottom: 1,
paddingLeft: theme.headerButtonHPadding,
paddingRight: theme.headerButtonHPadding,
color: theme.color,

172
ElectronClient/gui/MainScreen.jsx
View File

@@ -3,18 +3,19 @@ const { connect } = require('react-redux');
const { Header } = require('./Header.min.js');
const { SideBar } = require('./SideBar.min.js');
const { NoteList } = require('./NoteList.min.js');
const { NoteText } = require('./NoteText.min.js');
const NoteText2 = require('./NoteText2.js').default;
const NoteEditor = require('./NoteEditor/NoteEditor.js').default;
const { stateUtils } = require('lib/reducer.js');
const { PromptDialog } = require('./PromptDialog.min.js');
const NoteContentPropertiesDialog = require('./NoteContentPropertiesDialog.js').default;
const NotePropertiesDialog = require('./NotePropertiesDialog.min.js');
const ShareNoteDialog = require('./ShareNoteDialog.js').default;
const InteropServiceHelper = require('../InteropServiceHelper.js');
const Setting = require('lib/models/Setting.js');
const BaseModel = require('lib/BaseModel.js');
const Tag = require('lib/models/Tag.js');
const Note = require('lib/models/Note.js');
const { uuid } = require('lib/uuid.js');
const { shim } = require('lib/shim');
const Folder = require('lib/models/Folder.js');
const { themeStyle } = require('../theme.js');
const { _ } = require('lib/locale.js');
@@ -25,6 +26,7 @@ const PluginManager = require('lib/services/PluginManager');
const TemplateUtils = require('lib/TemplateUtils');
const EncryptionService = require('lib/services/EncryptionService');
const ipcRenderer = require('electron').ipcRenderer;
const { time } = require('lib/time-utils.js');
class MainScreenComponent extends React.Component {
constructor() {
@@ -48,6 +50,8 @@ class MainScreenComponent extends React.Component {
this.shareNoteDialog_close = this.shareNoteDialog_close.bind(this);
this.sidebar_onDrag = this.sidebar_onDrag.bind(this);
this.noteList_onDrag = this.noteList_onDrag.bind(this);
this.commandSavePdf = this.commandSavePdf.bind(this);
this.commandPrint = this.commandPrint.bind(this);
}
setupAppCloseHandling() {
@@ -149,6 +153,9 @@ class MainScreenComponent extends React.Component {
let commandProcessed = true;
let delayedFunction = null;
let delayedArgs = null;
if (command.name === 'newNote') {
if (!this.props.folders.length) {
bridge().showErrorMessageBox(_('Please create a notebook first.'));
@@ -350,13 +357,16 @@ class MainScreenComponent extends React.Component {
},
});
} else if (command.name === 'commandContentProperties') {
this.setState({
noteContentPropertiesDialogOptions: {
visible: true,
text: command.text,
lines: command.lines,
},
});
const note = await Note.load(this.props.selectedNoteId);
if (note) {
this.setState({
noteContentPropertiesDialogOptions: {
visible: true,
text: note.body,
// lines: command.lines,
},
});
}
} else if (command.name === 'commandShareNoteDialog') {
this.setState({
shareNoteDialogOptions: {
@@ -413,7 +423,7 @@ class MainScreenComponent extends React.Component {
if (newNote) {
await Note.save(newNote);
eventManager.emit('alarmChange', { noteId: note.id });
eventManager.emit('alarmChange', { noteId: note.id, note: newNote });
}
this.setState({ promptOptions: null });
@@ -444,6 +454,12 @@ class MainScreenComponent extends React.Component {
},
},
});
} else if (command.name === 'exportPdf') {
delayedFunction = this.commandSavePdf;
delayedArgs = { noteIds: command.noteIds };
} else if (command.name === 'print') {
delayedFunction = this.commandPrint;
delayedArgs = { noteIds: command.noteIds };
} else {
commandProcessed = false;
}
@@ -454,6 +470,106 @@ class MainScreenComponent extends React.Component {
name: null,
});
}
if (delayedFunction) {
requestAnimationFrame(() => {
delayedFunction = delayedFunction.bind(this);
delayedFunction(delayedArgs);
});
}
}
async waitForNoteToSaved(noteId) {
while (noteId && this.props.editorNoteStatuses[noteId] === 'saving') {
console.info('Waiting for note to be saved...', this.props.editorNoteStatuses);
await time.msleep(100);
}
}
async printTo_(target, options) {
// Concurrent print calls are disallowed to avoid incorrect settings being restored upon completion
if (this.isPrinting_) {
console.info(`Printing ${options.path} to ${target} disallowed, already printing.`);
return;
}
this.isPrinting_ = true;
// Need to wait for save because the interop service reloads the note from the database
await this.waitForNoteToSaved(options.noteId);
if (target === 'pdf') {
try {
const pdfData = await InteropServiceHelper.exportNoteToPdf(options.noteId, {
printBackground: true,
pageSize: Setting.value('export.pdfPageSize'),
landscape: Setting.value('export.pdfPageOrientation') === 'landscape',
customCss: this.props.customCss,
});
await shim.fsDriver().writeFile(options.path, pdfData, 'buffer');
} catch (error) {
console.error(error);
bridge().showErrorMessageBox(error.message);
}
} else if (target === 'printer') {
try {
await InteropServiceHelper.printNote(options.noteId, {
printBackground: true,
customCss: this.props.customCss,
});
} catch (error) {
console.error(error);
bridge().showErrorMessageBox(error.message);
}
}
this.isPrinting_ = false;
}
async commandSavePdf(args) {
try {
const noteIds = args.noteIds;
if (!noteIds.length) throw new Error('No notes selected for pdf export');
let path = null;
if (noteIds.length === 1) {
path = bridge().showSaveDialog({
filters: [{ name: _('PDF File'), extensions: ['pdf'] }],
defaultPath: await InteropServiceHelper.defaultFilename(noteIds, 'pdf'),
});
} else {
path = bridge().showOpenDialog({
properties: ['openDirectory', 'createDirectory'],
});
}
if (!path) return;
for (let i = 0; i < noteIds.length; i++) {
const note = await Note.load(noteIds[i]);
const folder = Folder.byId(this.props.folders, note.parent_id);
const pdfPath = (noteIds.length === 1) ? path :
await shim.fsDriver().findUniqueFilename(`${path}/${this.pdfFileName_(note, folder)}`);
await this.printTo_('pdf', { path: pdfPath, noteId: note.id });
}
} catch (error) {
bridge().showErrorMessageBox(error.message);
}
}
async commandPrint(args) {
// TODO: test
try {
const noteIds = args.noteIds;
if (noteIds.length !== 1) throw new Error(_('Only one note can be printed at a time.'));
await this.printTo_('printer', { noteId: noteIds[0] });
} catch (error) {
bridge().showErrorMessageBox(error.message);
}
}
styles(themeId, width, height, messageBoxVisible, isSidebarVisible, isNoteListVisible, sidebarWidth, noteListWidth) {
@@ -683,14 +799,32 @@ class MainScreenComponent extends React.Component {
});
headerItems.push({
title: _('Layout'),
iconName: 'fa-columns',
title: _('Code View'),
iconName: 'fa-file-code-o ',
enabled: !!notes.length,
type: 'checkbox',
checked: this.props.settingEditorCodeView,
onClick: () => {
this.doCommand({ name: 'toggleVisiblePanes' });
// A bit of a hack, but for now don't allow changing code view
// while a note is being saved as it will cause a problem with
// TinyMCE because it won't have time to send its content before
// being switch to Ace Editor.
if (this.props.hasNotesBeingSaved) return;
Setting.toggle('editor.codeView');
},
});
if (this.props.settingEditorCodeView) {
headerItems.push({
title: _('Layout'),
iconName: 'fa-columns',
enabled: !!notes.length,
onClick: () => {
this.doCommand({ name: 'toggleVisiblePanes' });
},
});
}
headerItems.push({
title: _('Search...'),
iconName: 'fa-search',
@@ -716,13 +850,9 @@ class MainScreenComponent extends React.Component {
const notePropertiesDialogOptions = this.state.notePropertiesDialogOptions;
const noteContentPropertiesDialogOptions = this.state.noteContentPropertiesDialogOptions;
const shareNoteDialogOptions = this.state.shareNoteDialogOptions;
const keyboardMode = Setting.value('editor.keyboardMode');
const isWYSIWYG = this.props.noteVisiblePanes.length && this.props.noteVisiblePanes[0] === 'wysiwyg';
const noteTextComp = isWYSIWYG ?
<NoteText2 editor="TinyMCE" style={styles.noteText} keyboardMode={keyboardMode} visiblePanes={this.props.noteVisiblePanes} />
:
<NoteText style={styles.noteText} keyboardMode={keyboardMode} visiblePanes={this.props.noteVisiblePanes} />;
const bodyEditor = this.props.settingEditorCodeView ? 'AceEditor' : 'TinyMCE';
const noteTextComp = <NoteEditor bodyEditor={bodyEditor} style={styles.noteText} />;
return (
<div style={style}>
@@ -750,8 +880,8 @@ class MainScreenComponent extends React.Component {
const mapStateToProps = state => {
return {
theme: state.settings.theme,
settingEditorCodeView: state.settings['editor.codeView'],
windowCommand: state.windowCommand,
noteVisiblePanes: state.noteVisiblePanes,
sidebarVisibility: state.sidebarVisibility,
noteListVisibility: state.noteListVisibility,
folders: state.folders,
@@ -767,6 +897,8 @@ const mapStateToProps = state => {
selectedNoteId: state.selectedNoteIds.length === 1 ? state.selectedNoteIds[0] : null,
plugins: state.plugins,
templates: state.templates,
customCss: state.customCss,
editorNoteStatuses: state.editorNoteStatuses,
hasNotesBeingSaved: stateUtils.hasNotesBeingSaved(state),
};
};

2
ElectronClient/gui/NoteContentPropertiesDialog.tsx
View File

@@ -74,7 +74,7 @@ export default function NoteContentPropertiesDialog(props:NoteContentPropertiesD
return (
<div style={theme.dialogModalLayer}>
<div style={theme.dialogBox}>
<div style={theme.dialogTitle}>{_('Content properties')}</div>
<div style={theme.dialogTitle}>{_('Statistics')}</div>
<div>{textComps}</div>
<DialogButtonRow theme={props.theme} onClick={buttonRow_click} okButtonShow={false} cancelButtonLabel={_('Close')}/>
</div>

686
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx Normal file
View File

@@ -0,0 +1,686 @@
import * as React from 'react';
import { useState, useEffect, useRef, forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
// eslint-disable-next-line no-unused-vars
import { EditorCommand, NoteBodyEditorProps } from '../../utils/types';
import { commandAttachFileToBody } from '../../utils/resourceHandling';
import { ScrollOptions, ScrollOptionTypes } from '../../utils/types';
import { textOffsetToCursorPosition, useScrollHandler, usePrevious, lineLeftSpaces, selectionRangeCurrentLine, selectionRangePreviousLine, currentTextOffset, textOffsetSelection, selectedText, useSelectionRange } from './utils';
import Toolbar from './Toolbar';
import styles_ from './styles';
import { RenderedBody, defaultRenderedBody } from './utils/types';
const AceEditorReact = require('react-ace').default;
const { bridge } = require('electron').remote.require('./bridge');
const Note = require('lib/models/Note.js');
const { clipboard } = require('electron');
const mimeUtils = require('lib/mime-utils.js').mime;
const Setting = require('lib/models/Setting.js');
const NoteTextViewer = require('../../../NoteTextViewer.min');
const shared = require('lib/components/shared/note-screen-shared.js');
const md5 = require('md5');
const { shim } = require('lib/shim.js');
const Menu = bridge().Menu;
const MenuItem = bridge().MenuItem;
const markdownUtils = require('lib/markdownUtils');
const { _ } = require('lib/locale');
const { reg } = require('lib/registry.js');
const dialogs = require('../../../dialogs');
require('brace/mode/markdown');
// https://ace.c9.io/build/kitchen-sink.html
// https://highlightjs.org/static/demo/
require('brace/theme/chrome');
require('brace/theme/solarized_light');
require('brace/theme/solarized_dark');
require('brace/theme/twilight');
require('brace/theme/dracula');
require('brace/theme/chaos');
require('brace/keybinding/vim');
require('brace/keybinding/emacs');
// TODO: Could not get below code to work
// @ts-ignore Ace global variable
// const aceGlobal = (ace as any);
// class CustomHighlightRules extends aceGlobal.acequire(
// 'ace/mode/markdown_highlight_rules'
// ).MarkdownHighlightRules {
// constructor() {
// super();
// if (Setting.value('markdown.plugin.mark')) {
// this.$rules.start.push({
// // This is actually a highlight `mark`, but Ace has no token name for
// // this so we made up our own. Reference for common tokens here:
// // https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode#common-tokens
// token: 'highlight_mark',
// regex: '==[^ ](?:.*?[^ ])?==',
// });
// }
// }
// }
// /* eslint-disable-next-line no-undef */
// class CustomMdMode extends aceGlobal.acequire('ace/mode/markdown').Mode {
// constructor() {
// super();
// this.HighlightRules = CustomHighlightRules;
// }
// }
function markupRenderOptions(override: any = null) {
return { ...override };
}
function AceEditor(props: NoteBodyEditorProps, ref: any) {
const styles = styles_(props);
const [renderedBody, setRenderedBody] = useState<RenderedBody>(defaultRenderedBody()); // Viewer content
const [editor, setEditor] = useState(null);
const [lastKeys, setLastKeys] = useState([]);
const [webviewReady, setWebviewReady] = useState(false);
const previousRenderedBody = usePrevious(renderedBody);
const previousSearchMarkers = usePrevious(props.searchMarkers);
const previousContentKey = usePrevious(props.contentKey);
const editorRef = useRef(null);
editorRef.current = editor;
const indentOrig = useRef<any>(null);
const webviewRef = useRef(null);
const props_onChangeRef = useRef<Function>(null);
props_onChangeRef.current = props.onChange;
const contentKeyHasChangedRef = useRef(false);
contentKeyHasChangedRef.current = previousContentKey !== props.contentKey;
// The selection range changes all the time, when the caret moves or
// when the selection changes, so it's best not to make it part of the
// state as it would trigger too many unecessary updates.
const selectionRangeRef = useRef(null);
selectionRangeRef.current = useSelectionRange(editor);
const { resetScroll, setEditorPercentScroll, setViewerPercentScroll, editor_scroll } = useScrollHandler(editor, webviewRef, props.onScroll);
const aceEditor_change = useCallback((newBody: string) => {
props_onChangeRef.current({ changeId: null, content: newBody });
}, []);
const wrapSelectionWithStrings = useCallback((string1: string, string2 = '', defaultText = '', replacementText: string = null, byLine = false) => {
if (!editor) return;
const selection = textOffsetSelection(selectionRangeRef.current, props.content);
let newBody = props.content;
if (selection && selection.start !== selection.end) {
const selectedLines = replacementText !== null ? replacementText : props.content.substr(selection.start, selection.end - selection.start);
const selectedStrings = byLine ? selectedLines.split(/\r?\n/) : [selectedLines];
newBody = props.content.substr(0, selection.start);
let startCursorPos, endCursorPos;
for (let i = 0; i < selectedStrings.length; i++) {
if (byLine == false) {
const start = selectedStrings[i].search(/[^\s]/);
const end = selectedStrings[i].search(/[^\s](?=[\s]*$)/);
newBody += selectedStrings[i].substr(0, start) + string1 + selectedStrings[i].substr(start, end - start + 1) + string2 + selectedStrings[i].substr(end + 1);
// Getting position for correcting offset in highlighted text when surrounded by white spaces
startCursorPos = textOffsetToCursorPosition(selection.start + start, newBody);
endCursorPos = textOffsetToCursorPosition(selection.start + end + 1, newBody);
} else { newBody += string1 + selectedStrings[i] + string2; }
}
newBody += props.content.substr(selection.end);
const r = selectionRangeRef.current;
// Because some insertion strings will have newlines, we'll need to account for them
const str1Split = string1.split(/\r?\n/);
// Add the number of newlines to the row
// and add the length of the final line to the column (for strings with no newlines this is the string length)
let newRange: any = {};
if (!byLine) {
// Correcting offset in Highlighted text when surrounded by white spaces
newRange = {
start: {
row: startCursorPos.row,
column: startCursorPos.column + string1.length,
},
end: {
row: endCursorPos.row,
column: endCursorPos.column + string1.length,
},
};
} else {
newRange = {
start: {
row: r.start.row + str1Split.length - 1,
column: r.start.column + str1Split[str1Split.length - 1].length,
},
end: {
row: r.end.row + str1Split.length - 1,
column: r.end.column + str1Split[str1Split.length - 1].length,
},
};
}
if (replacementText !== null) {
const diff = replacementText.length - (selection.end - selection.start);
newRange.end.column += diff;
}
setTimeout(() => {
const range = selectionRangeRef.current;
range.setStart(newRange.start.row, newRange.start.column);
range.setEnd(newRange.end.row, newRange.end.column);
editor.getSession().getSelection().setSelectionRange(range, false);
editor.focus();
}, 10);
} else {
const middleText = replacementText !== null ? replacementText : defaultText;
const textOffset = currentTextOffset(editor, props.content);
const s1 = props.content.substr(0, textOffset);
const s2 = props.content.substr(textOffset);
newBody = s1 + string1 + middleText + string2 + s2;
const p = textOffsetToCursorPosition(textOffset + string1.length, newBody);
const newRange = {
start: { row: p.row, column: p.column },
end: { row: p.row, column: p.column + middleText.length },
};
// BUG!! If replacementText contains newline characters, the logic
// to select the new text will not work.
setTimeout(() => {
if (middleText && newRange) {
const range = selectionRangeRef.current;
range.setStart(newRange.start.row, newRange.start.column);
range.setEnd(newRange.end.row, newRange.end.column);
editor.getSession().getSelection().setSelectionRange(range, false);
} else {
for (let i = 0; i < string1.length; i++) {
editor.getSession().getSelection().moveCursorRight();
}
}
editor.focus();
}, 10);
}
aceEditor_change(newBody);
}, [editor, props.content, aceEditor_change]);
const addListItem = useCallback((string1, string2 = '', defaultText = '', byLine = false) => {
let newLine = '\n';
const range = selectionRangeRef.current;
if (!range || (range.start.row === range.end.row && !selectionRangeCurrentLine(range, props.content))) {
newLine = '';
}
wrapSelectionWithStrings(newLine + string1, string2, defaultText, null, byLine);
}, [wrapSelectionWithStrings, props.content]);
useImperativeHandle(ref, () => {
return {
content: () => props.content,
setContent: (body: string) => {
aceEditor_change(body);
},
resetScroll: () => {
resetScroll();
},
scrollTo: (options:ScrollOptions) => {
if (options.type === ScrollOptionTypes.Hash) {
if (!webviewRef.current) return;
webviewRef.current.wrappedInstance.send('scrollToHash', options.value as string);
} else if (options.type === ScrollOptionTypes.Percent) {
const p = options.value as number;
setEditorPercentScroll(p);
setViewerPercentScroll(p);
} else {
throw new Error(`Unsupported scroll options: ${options.type}`);
}
},
clearState: () => {
if (!editor) return;
editor.clearSelection();
editor.moveCursorTo(0, 0);
},
execCommand: async (cmd: EditorCommand) => {
if (!editor) return false;
reg.logger().debug('AceEditor: execCommand', cmd);
let commandProcessed = true;
if (cmd.name === 'dropItems') {
if (cmd.value.type === 'notes') {
wrapSelectionWithStrings('', '', '', cmd.value.markdownTags.join('\n'));
} else if (cmd.value.type === 'files') {
const newBody = await commandAttachFileToBody(props.content, cmd.value.paths, { createFileURL: !!cmd.value.createFileURL });
aceEditor_change(newBody);
} else {
reg.logger().warn('AceEditor: unsupported drop item: ', cmd);
}
} else if (cmd.name === 'focus') {
editor.focus();
} else {
commandProcessed = false;
}
if (!commandProcessed) {
const commands: any = {
textBold: () => wrapSelectionWithStrings('**', '**', _('strong text')),
textItalic: () => wrapSelectionWithStrings('*', '*', _('emphasized text')),
textLink: async () => {
const url = await dialogs.prompt(_('Insert Hyperlink'));
if (url) wrapSelectionWithStrings('[', `](${url})`);
},
textCode: () => {
const selection = textOffsetSelection(selectionRangeRef.current, props.content);
const string = props.content.substr(selection.start, selection.end - selection.start);
// Look for newlines
const match = string.match(/\r?\n/);
if (match && match.length > 0) {
if (string.startsWith('```') && string.endsWith('```')) {
wrapSelectionWithStrings('', '', '', string.substr(4, selection.end - selection.start - 8));
} else {
wrapSelectionWithStrings(`\`\`\`${match[0]}`, `${match[0]}\`\`\``);
}
} else {
wrapSelectionWithStrings('`', '`', '');
}
},
insertText: (value: any) => wrapSelectionWithStrings(value),
attachFile: async () => {
const selection = textOffsetSelection(selectionRangeRef.current, props.content);
const newBody = await commandAttachFileToBody(props.content, null, { position: selection ? selection.start : 0 });
if (newBody) aceEditor_change(newBody);
},
textNumberedList: () => {
let bulletNumber = markdownUtils.olLineNumber(selectionRangeCurrentLine(selectionRangeRef.current, props.content));
if (!bulletNumber) bulletNumber = markdownUtils.olLineNumber(selectionRangePreviousLine(selectionRangeRef.current, props.content));
if (!bulletNumber) bulletNumber = 0;
addListItem(`${bulletNumber + 1}. `, '', _('List item'), true);
},
textBulletedList: () => addListItem('- ', '', _('List item'), true),
textCheckbox: () => addListItem('- [ ] ', '', _('List item'), true),
textHeading: () => addListItem('## ','','', true),
textHorizontalRule: () => addListItem('* * *'),
};
if (commands[cmd.name]) {
commands[cmd.name](cmd.value);
} else {
reg.logger().warn('AceEditor: unsupported Joplin command: ', cmd);
return false;
}
}
return true;
},
};
}, [editor, props.content, addListItem, wrapSelectionWithStrings, selectionRangeCurrentLine, aceEditor_change, setEditorPercentScroll, setViewerPercentScroll, resetScroll, renderedBody]);
const onEditorPaste = useCallback(async (event: any = null) => {
const formats = clipboard.availableFormats();
for (let i = 0; i < formats.length; i++) {
const format = formats[i].toLowerCase();
const formatType = format.split('/')[0];
const position = currentTextOffset(editor, props.content);
if (formatType === 'image') {
if (event) event.preventDefault();
const image = clipboard.readImage();
const fileExt = mimeUtils.toFileExtension(format);
const filePath = `${Setting.value('tempDir')}/${md5(Date.now())}.${fileExt}`;
await shim.writeImageToFile(image, format, filePath);
const newBody = await commandAttachFileToBody(props.content, [filePath], { position });
await shim.fsDriver().remove(filePath);
aceEditor_change(newBody);
}
}
}, [editor, props.content, aceEditor_change]);
const onEditorKeyDown = useCallback((event: any) => {
setLastKeys(prevLastKeys => {
const keys = prevLastKeys.slice();
keys.push(event.key);
while (keys.length > 2) keys.splice(0, 1);
return keys;
});
}, []);
const editorCutText = useCallback(() => {
const text = selectedText(selectionRangeRef.current, props.content);
if (!text) return;
clipboard.writeText(text);
const s = textOffsetSelection(selectionRangeRef.current, props.content);
if (!s || s.start === s.end) return;
const s1 = props.content.substr(0, s.start);
const s2 = props.content.substr(s.end);
aceEditor_change(s1 + s2);
setTimeout(() => {
const range = selectionRangeRef.current;
range.setStart(range.start.row, range.start.column);
range.setEnd(range.start.row, range.start.column);
editor.getSession().getSelection().setSelectionRange(range, false);
editor.focus();
}, 10);
}, [props.content, editor, aceEditor_change]);
const editorCopyText = useCallback(() => {
const text = selectedText(selectionRangeRef.current, props.content);
clipboard.writeText(text);
}, [props.content]);
const editorPasteText = useCallback(() => {
wrapSelectionWithStrings(clipboard.readText(), '', '', '');
}, [wrapSelectionWithStrings]);
const onEditorContextMenu = useCallback(() => {
const menu = new Menu();
const hasSelectedText = !!selectedText(selectionRangeRef.current, props.content);
const clipboardText = clipboard.readText();
menu.append(
new MenuItem({
label: _('Cut'),
enabled: hasSelectedText,
click: async () => {
editorCutText();
},
})
);
menu.append(
new MenuItem({
label: _('Copy'),
enabled: hasSelectedText,
click: async () => {
editorCopyText();
},
})
);
menu.append(
new MenuItem({
label: _('Paste'),
enabled: true,
click: async () => {
if (clipboardText) {
editorPasteText();
} else {
// To handle pasting images
onEditorPaste();
}
},
})
);
menu.popup(bridge().window());
}, [props.content, editorCutText, editorPasteText, editorCopyText, onEditorPaste]);
function aceEditor_load(editor: any) {
setEditor(editor);
}
useEffect(() => {
if (!editor) return () => {};
editor.indent = indentOrig.current;
const cancelledKeys = [];
const letters = ['F', 'T', 'P', 'Q', 'L', ',', 'G', 'K'];
for (let i = 0; i < letters.length; i++) {
const l = letters[i];
cancelledKeys.push(`Ctrl+${l}`);
cancelledKeys.push(`Command+${l}`);
}
cancelledKeys.push('Alt+E');
for (let i = 0; i < cancelledKeys.length; i++) {
const k = cancelledKeys[i];
editor.commands.bindKey(k, () => {
// HACK: Ace doesn't seem to provide a way to override its shortcuts, but throwing
// an exception from this undocumented function seems to cancel it without any
// side effect.
// https://stackoverflow.com/questions/36075846
throw new Error(`HACK: Overriding Ace Editor shortcut: ${k}`);
});
}
document.querySelector('#note-editor').addEventListener('paste', onEditorPaste, true);
document.querySelector('#note-editor').addEventListener('keydown', onEditorKeyDown);
document.querySelector('#note-editor').addEventListener('contextmenu', onEditorContextMenu);
// Disable Markdown auto-completion (eg. auto-adding a dash after a line with a dash.
// https://github.com/ajaxorg/ace/issues/2754
// @ts-ignore: Keep the function signature as-is despite unusued arguments
editor.getSession().getMode().getNextLineIndent = function(state: any, line: string) {
const ls = lastKeys;
if (ls.length >= 2 && ls[ls.length - 1] === 'Enter' && ls[ls.length - 2] === 'Enter') return this.$getIndent(line);
const leftSpaces = lineLeftSpaces(line);
const lineNoLeftSpaces = line.trimLeft();
if (lineNoLeftSpaces.indexOf('- [ ] ') === 0 || lineNoLeftSpaces.indexOf('- [x] ') === 0 || lineNoLeftSpaces.indexOf('- [X] ') === 0) return `${leftSpaces}- [ ] `;
if (lineNoLeftSpaces.indexOf('- ') === 0) return `${leftSpaces}- `;
if (lineNoLeftSpaces.indexOf('* ') === 0 && line.trim() !== '* * *') return `${leftSpaces}* `;
const bulletNumber = markdownUtils.olLineNumber(lineNoLeftSpaces);
if (bulletNumber) return `${leftSpaces + (bulletNumber + 1)}. `;
return this.$getIndent(line);
};
return () => {
document.querySelector('#note-editor').removeEventListener('paste', onEditorPaste, true);
document.querySelector('#note-editor').removeEventListener('keydown', onEditorKeyDown);
document.querySelector('#note-editor').removeEventListener('contextmenu', onEditorContextMenu);
};
}, [editor, onEditorPaste, onEditorContextMenu, lastKeys]);
useEffect(() => {
if (!editor) return;
// Markdown list indentation. (https://github.com/laurent22/joplin/pull/2713)
// If the current line starts with `markup.list` token,
// hitting `Tab` key indents the line instead of inserting tab at cursor.
indentOrig.current = editor.indent;
const localIndentOrig = indentOrig.current;
editor.indent = function() {
const range = selectionRangeRef.current;
if (range.isEmpty()) {
const row = range.start.row;
const tokens = this.session.getTokens(row);
if (tokens.length > 0 && tokens[0].type == 'markup.list') {
if (tokens[0].value.search(/\d+\./) != -1) {
// Resets numbered list to 1.
this.session.replace({ start: { row, column: 0 }, end: { row, column: tokens[0].value.length } },
tokens[0].value.replace(/\d+\./, '1.'));
}
this.session.indentRows(row, row, '\t');
return;
}
}
localIndentOrig.call(this);
};
}, [editor]);
const webview_domReady = useCallback(() => {
setWebviewReady(true);
}, []);
const webview_ipcMessage = useCallback((event: any) => {
const msg = event.channel ? event.channel : '';
const args = event.args;
const arg0 = args && args.length >= 1 ? args[0] : null;
if (msg.indexOf('checkboxclick:') === 0) {
const newBody = shared.toggleCheckbox(msg, props.content);
aceEditor_change(newBody);
} else if (msg === 'percentScroll') {
setEditorPercentScroll(arg0);
} else {
props.onMessage(event);
}
}, [props.onMessage, props.content, aceEditor_change]);
useEffect(() => {
let cancelled = false;
const interval = contentKeyHasChangedRef.current ? 0 : 500;
const timeoutId = setTimeout(async () => {
let bodyToRender = props.content;
if (!bodyToRender.trim() && props.visiblePanes.indexOf('viewer') >= 0 && props.visiblePanes.indexOf('editor') < 0) {
// Fixes https://github.com/laurent22/joplin/issues/217
bodyToRender = `<i>${_('This note has no content. Click on "%s" to toggle the editor and edit the note.', _('Layout'))}</i>`;
}
const result = await props.markupToHtml(props.contentMarkupLanguage, bodyToRender, markupRenderOptions({ resourceInfos: props.resourceInfos }));
if (cancelled) return;
setRenderedBody(result);
}, interval);
return () => {
cancelled = true;
clearTimeout(timeoutId);
};
}, [props.content, props.contentMarkupLanguage, props.visiblePanes, props.resourceInfos]);
useEffect(() => {
if (!webviewReady) return;
const options: any = {
pluginAssets: renderedBody.pluginAssets,
downloadResources: Setting.value('sync.resourceDownloadMode'),
};
webviewRef.current.wrappedInstance.send('setHtml', renderedBody.html, options);
}, [renderedBody, webviewReady]);
useEffect(() => {
if (props.searchMarkers !== previousSearchMarkers || renderedBody !== previousRenderedBody) {
webviewRef.current.wrappedInstance.send('setMarkers', props.searchMarkers.keywords, props.searchMarkers.options);
}
}, [props.searchMarkers, renderedBody]);
const cellEditorStyle = useMemo(() => {
const output = { ...styles.cellEditor };
if (!props.visiblePanes.includes('editor')) {
// Note: Ideally we'd set the display to "none" to take the editor out
// of the DOM but if we do that, certain things won't work, in particular
// things related to scroll, which are based on the editor.
output.width = 1;
output.maxWidth = 1;
output.position = 'absolute';
output.left = -100000;
}
return output;
}, [styles.cellEditor, props.visiblePanes]);
const cellViewerStyle = useMemo(() => {
const output = { ...styles.cellViewer };
if (!props.visiblePanes.includes('viewer')) {
// Note: setting webview.display to "none" is currently not supported due
// to this bug: https://github.com/electron/electron/issues/8277
// So instead setting the width 0.
output.width = 1;
output.maxWidth = 1;
} else if (!props.visiblePanes.includes('editor')) {
output.borderLeftStyle = 'none';
}
return output;
}, [styles.cellViewer, props.visiblePanes]);
function renderEditor() {
return (
<div style={cellEditorStyle}>
<AceEditorReact
value={props.content}
mode={props.contentMarkupLanguage === Note.MARKUP_LANGUAGE_HTML ? 'text' : 'markdown'}
theme={styles.editor.editorTheme}
style={styles.editor}
fontSize={styles.editor.fontSize}
showGutter={false}
readOnly={props.visiblePanes.indexOf('editor') < 0}
name="note-editor"
wrapEnabled={true}
onScroll={editor_scroll}
onChange={aceEditor_change}
showPrintMargin={false}
onLoad={aceEditor_load}
// Enable/Disable the autoclosing braces
setOptions={
{
behavioursEnabled: Setting.value('editor.autoMatchingBraces'),
useSoftTabs: false,
}
}
// Disable warning: "Automatically scrolling cursor into view after
// selection change this will be disabled in the next version set
// editor.$blockScrolling = Infinity to disable this message"
editorProps={{ $blockScrolling: Infinity }}
// This is buggy (gets outside the container)
highlightActiveLine={false}
keyboardHandler={props.keyboardMode}
/>
</div>
);
}
function renderViewer() {
return (
<div style={cellViewerStyle}>
<NoteTextViewer
ref={webviewRef}
viewerStyle={styles.viewer}
onIpcMessage={webview_ipcMessage}
onDomReady={webview_domReady}
/>
</div>
);
}
return (
<div style={styles.root}>
<div style={styles.rowToolbar}>
<Toolbar
theme={props.theme}
dispatch={props.dispatch}
/>
{props.noteToolbar}
</div>
<div style={styles.rowEditorViewer}>
{renderEditor()}
{renderViewer()}
</div>
</div>
);
}
export default forwardRef(AceEditor);

166
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx Normal file
View File

@@ -0,0 +1,166 @@
import * as React from 'react';
const ToolbarBase = require('../../../Toolbar.min.js');
const { _ } = require('lib/locale');
const { buildStyle } = require('../../../../theme.js');
interface ToolbarProps {
theme: number,
dispatch: Function,
}
function styles_(props:ToolbarProps) {
return buildStyle('AceEditorToolbar', props.theme, (/* theme:any*/) => {
return {
root: {
// marginTop: 4,
marginBottom: 0,
},
};
});
}
export default function Toolbar(props:ToolbarProps) {
const styles = styles_(props);
function createToolbarItems() {
const toolbarItems = [];
toolbarItems.push({
tooltip: _('Bold'),
iconName: 'fa-bold',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textBold',
});
},
});
toolbarItems.push({
tooltip: _('Italic'),
iconName: 'fa-italic',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textItalic',
});
},
});
toolbarItems.push({
type: 'separator',
});
toolbarItems.push({
tooltip: _('Hyperlink'),
iconName: 'fa-link',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textLink',
});
},
});
toolbarItems.push({
tooltip: _('Code'),
iconName: 'fa-code',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textCode',
});
},
});
toolbarItems.push({
tooltip: _('Attach file'),
iconName: 'fa-paperclip',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'attachFile',
});
},
});
toolbarItems.push({
type: 'separator',
});
toolbarItems.push({
tooltip: _('Numbered List'),
iconName: 'fa-list-ol',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textNumberedList',
});
},
});
toolbarItems.push({
tooltip: _('Bulleted List'),
iconName: 'fa-list-ul',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textBulletedList',
});
},
});
toolbarItems.push({
tooltip: _('Checkbox'),
iconName: 'fa-check-square',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textCheckbox',
});
},
});
toolbarItems.push({
tooltip: _('Heading'),
iconName: 'fa-header',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textHeading',
});
},
});
toolbarItems.push({
tooltip: _('Horizontal Rule'),
iconName: 'fa-ellipsis-h',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'textHorizontalRule',
});
},
});
toolbarItems.push({
tooltip: _('Insert Date Time'),
iconName: 'fa-calendar-plus-o',
onClick: () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'insertDateTime',
});
},
});
toolbarItems.push({
type: 'separator',
});
return toolbarItems;
}
return <ToolbarBase style={styles.root} items={createToolbarItems()} />;
}

60
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.ts Normal file
View File

@@ -0,0 +1,60 @@
import { NoteBodyEditorProps } from '../../../utils/types';
const { buildStyle } = require('../../../../../theme.js');
export default function styles(props: NoteBodyEditorProps) {
return buildStyle('AceEditor', props.theme, (theme: any) => {
return {
root: {
position: 'relative',
display: 'flex',
flexDirection: 'column',
...props.style,
},
rowToolbar: {
position: 'relative',
display: 'flex',
flexDirection: 'row',
},
rowEditorViewer: {
position: 'relative',
display: 'flex',
flexDirection: 'row',
flex: 1,
paddingTop: 10,
},
cellEditor: {
position: 'relative',
display: 'flex',
flex: 1,
},
cellViewer: {
position: 'relative',
display: 'flex',
flex: 1,
borderLeftWidth: 1,
borderLeftColor: theme.dividerColor,
borderLeftStyle: 'solid',
},
viewer: {
display: 'flex',
overflow: 'hidden',
verticalAlign: 'top',
boxSizing: 'border-box',
width: '100%',
},
editor: {
display: 'flex',
width: 'auto',
height: 'auto',
flex: 1,
overflowY: 'hidden',
paddingTop: 0,
lineHeight: `${theme.textAreaLineHeight}px`,
fontSize: `${theme.editorFontSize}px`,
color: theme.color,
backgroundColor: theme.backgroundColor,
editorTheme: theme.editorTheme, // Defined in theme.js
},
};
});
}

241
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/index.ts Normal file
View File

@@ -0,0 +1,241 @@
import { useState, useEffect, useCallback, useRef } from 'react';
export function cursorPositionToTextOffset(cursorPos: any, body: string) {
if (!body) return 0;
const noteLines = body.split('\n');
let pos = 0;
for (let i = 0; i < noteLines.length; i++) {
if (i > 0) pos++; // Need to add the newline that's been removed in the split() call above
if (i === cursorPos.row) {
pos += cursorPos.column;
break;
} else {
pos += noteLines[i].length;
}
}
return pos;
}
export function currentTextOffset(editor: any, body: string) {
return cursorPositionToTextOffset(editor.getCursorPosition(), body);
}
export function rangeToTextOffsets(range: any, body: string) {
return {
start: cursorPositionToTextOffset(range.start, body),
end: cursorPositionToTextOffset(range.end, body),
};
}
export function textOffsetSelection(selectionRange: any, body: string) {
return selectionRange && body ? rangeToTextOffsets(selectionRange, body) : null;
}
export function selectedText(selectionRange: any, body: string) {
const selection = textOffsetSelection(selectionRange, body);
if (!selection || selection.start === selection.end) return '';
return body.substr(selection.start, selection.end - selection.start);
}
export function useSelectionRange(editor: any) {
const [selectionRange, setSelectionRange] = useState(null);
useEffect(() => {
if (!editor) return () => {};
function updateSelection() {
const ranges = editor.getSelection().getAllRanges();
const firstRange = ranges && ranges.length ? ranges[0] : null;
setSelectionRange(firstRange);
// if (process.platform === 'linux') {
// const textRange = this.textOffsetSelection();
// if (textRange.start != textRange.end) {
// clipboard.writeText(this.state.note.body.slice(
// Math.min(textRange.start, textRange.end),
// Math.max(textRange.end, textRange.start)), 'selection');
// }
// }
}
function onSelectionChange() {
updateSelection();
}
function onFocus() {
updateSelection();
}
editor.getSession().selection.on('changeSelection', onSelectionChange);
editor.on('focus', onFocus);
return () => {
editor.getSession().selection.off('changeSelection', onSelectionChange);
editor.off('focus', onFocus);
};
}, [editor]);
return selectionRange;
}
export function textOffsetToCursorPosition(offset: number, body: string) {
const lines = body.split('\n');
let row = 0;
let currentOffset = 0;
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
if (currentOffset + line.length >= offset) {
return {
row: row,
column: offset - currentOffset,
};
}
row++;
currentOffset += line.length + 1;
}
return null;
}
function lineAtRow(body: string, row: number) {
if (!body) return '';
const lines = body.split('\n');
if (row < 0 || row >= lines.length) return '';
return lines[row];
}
export function selectionRangeCurrentLine(selectionRange: any, body: string) {
if (!selectionRange) return '';
return lineAtRow(body, selectionRange.start.row);
}
export function selectionRangePreviousLine(selectionRange: any, body: string) {
if (!selectionRange) return '';
return lineAtRow(body, selectionRange.start.row - 1);
}
export function lineLeftSpaces(line: string) {
let output = '';
for (let i = 0; i < line.length; i++) {
if ([' ', '\t'].indexOf(line[i]) >= 0) {
output += line[i];
} else {
break;
}
}
return output;
}
export function usePrevious(value: any): any {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
export function useScrollHandler(editor: any, webviewRef: any, onScroll: Function) {
const editorMaxScrollTop_ = useRef(0);
const restoreScrollTop_ = useRef<any>(null);
const ignoreNextEditorScrollEvent_ = useRef(false);
const scrollTimeoutId_ = useRef<any>(null);
// TODO: Below is not needed anymore????
//
// this.editorMaxScrollTop_ = 0;
// // HACK: To go around a bug in Ace editor, we first set the scroll position to 1
// // and then (in the renderer callback) to the value we actually need. The first
// // operation helps clear the scroll position cache. See:
// //
// this.editorSetScrollTop(1);
// this.restoreScrollTop_ = 0;
const editorSetScrollTop = useCallback((v) => {
if (!editor) return;
editor.getSession().setScrollTop(v);
}, [editor]);
// Complicated but reliable method to get editor content height
// https://github.com/ajaxorg/ace/issues/2046
const onAfterEditorRender = useCallback(() => {
const r = editor.renderer;
editorMaxScrollTop_.current = Math.max(0, r.layerConfig.maxHeight - r.$size.scrollerHeight);
if (restoreScrollTop_.current !== null) {
editorSetScrollTop(restoreScrollTop_.current);
restoreScrollTop_.current = null;
}
}, [editor, editorSetScrollTop]);
const scheduleOnScroll = useCallback((event: any) => {
if (scrollTimeoutId_.current) {
clearTimeout(scrollTimeoutId_.current);
scrollTimeoutId_.current = null;
}
scrollTimeoutId_.current = setTimeout(() => {
scrollTimeoutId_.current = null;
onScroll(event);
}, 10);
}, [onScroll]);
const setEditorPercentScroll = useCallback((p: number) => {
ignoreNextEditorScrollEvent_.current = true;
editorSetScrollTop(p * editorMaxScrollTop_.current);
scheduleOnScroll({ percent: p });
}, [editorSetScrollTop, scheduleOnScroll]);
const setViewerPercentScroll = useCallback((p: number) => {
if (webviewRef.current) {
webviewRef.current.wrappedInstance.send('setPercentScroll', p);
scheduleOnScroll({ percent: p });
}
}, [scheduleOnScroll]);
const editor_scroll = useCallback(() => {
if (ignoreNextEditorScrollEvent_.current) {
ignoreNextEditorScrollEvent_.current = false;
return;
}
const m = editorMaxScrollTop_.current;
const percent = m ? editor.getSession().getScrollTop() / m : 0;
setViewerPercentScroll(percent);
}, [editor, setViewerPercentScroll]);
const resetScroll = useCallback(() => {
if (!editor) return;
// Ace Editor caches scroll values, which makes
// it hard to reset the scroll position, so we
// need to use this hack.
// https://github.com/ajaxorg/ace/issues/2195
editor.session.$scrollTop = -1;
editor.session.$scrollLeft = -1;
editor.renderer.scrollTop = -1;
editor.renderer.scrollLeft = -1;
editor.renderer.scrollBarV.scrollTop = -1;
editor.renderer.scrollBarH.scrollLeft = -1;
editor.session.setScrollTop(0);
editor.session.setScrollLeft(0);
}, [editorSetScrollTop, editor]);
useEffect(() => {
if (!editor) return () => {};
editor.renderer.on('afterRender', onAfterEditorRender);
return () => {
editor.renderer.off('afterRender', onAfterEditorRender);
};
}, [editor]);
return { resetScroll, setEditorPercentScroll, setViewerPercentScroll, editor_scroll };
}

11
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/types.ts Normal file
View File

@@ -0,0 +1,11 @@
export interface RenderedBody {
html: string;
pluginAssets: any[];
}
export function defaultRenderedBody(): RenderedBody {
return {
html: '',
pluginAssets: [],
};
}

24
ElectronClient/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor.js Normal file
View File

@@ -0,0 +1,24 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const React = require('react');
const react_1 = require('react');
const PlainEditor = (props, ref) => {
const editorRef = react_1.useRef();
react_1.useImperativeHandle(ref, () => {
return {
content: () => '',
};
}, []);
react_1.useEffect(() => {
if (!editorRef.current) { return; }
editorRef.current.value = props.defaultEditorState.value;
}, [props.defaultEditorState]);
const onChange = react_1.useCallback((event) => {
props.onChange({ changeId: null, content: event.target.value });
}, [props.onWillChange, props.onChange]);
return (React.createElement('div', { style: props.style },
React.createElement('textarea', { ref: editorRef, style: { width: '100%', height: '100%' }, defaultValue: props.defaultEditorState.value, onChange: onChange }),
';'));
};
exports.default = react_1.forwardRef(PlainEditor);
// # sourceMappingURL=PlainEditor.js.map

12
ElectronClient/gui/editors/PlainEditor.tsx → ElectronClient/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor_tsx.txt
View File

@@ -1,9 +1,8 @@
// Kept only for reference
import * as React from 'react';
import { useEffect, useCallback, useRef, forwardRef, useImperativeHandle } from 'react';
// eslint-disable-next-line no-unused-vars
import { DefaultEditorState, TextEditorUtils } from '../utils/NoteText';
export interface OnChangeEvent {
changeId: number,
content: any,
@@ -13,18 +12,11 @@ interface PlainEditorProps {
style: any,
onChange(event: OnChangeEvent): void,
onWillChange(event:any): void,
defaultEditorState: DefaultEditorState,
markupToHtml: Function,
attachResources: Function,
disabled: boolean,
}
export const utils:TextEditorUtils = {
editorContentToHtml(content:any):Promise<string> {
return content ? content : '';
},
};
const PlainEditor = (props:PlainEditorProps, ref:any) => {
const editorRef = useRef<any>();

112
ElectronClient/gui/editors/TinyMCE.tsx → ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
View File

@@ -1,29 +1,13 @@
import * as React from 'react';
import { useState, useEffect, useCallback, useRef, forwardRef, useImperativeHandle } from 'react';
// eslint-disable-next-line no-unused-vars
import { DefaultEditorState, OnChangeEvent, TextEditorUtils, EditorCommand, resourcesStatus } from '../utils/NoteText';
import { EditorCommand, NoteBodyEditorProps } from '../../utils/types';
import { resourcesStatus } from '../../utils/resourceHandling';
const { MarkupToHtml } = require('lib/joplin-renderer');
const taboverride = require('taboverride');
const { reg } = require('lib/registry.js');
const { _ } = require('lib/locale');
const BaseItem = require('lib/models/BaseItem');
const { themeStyle, buildStyle } = require('../../theme.js');
interface TinyMCEProps {
style: any,
theme: number,
onChange(event: OnChangeEvent): void,
onWillChange(event:any): void,
onMessage(event:any): void,
defaultEditorState: DefaultEditorState,
markupToHtml: Function,
allAssets: Function,
attachResources: Function,
joplinHtml: Function,
disabled: boolean,
}
const { themeStyle, buildStyle } = require('../../../../theme.js');
function markupRenderOptions(override:any = null) {
return {
@@ -35,6 +19,7 @@ function markupRenderOptions(override:any = null) {
linkRenderingType: 2,
},
},
replaceResourceInternalToExternalLinks: true,
...override,
};
}
@@ -104,12 +89,6 @@ function enableTextAreaTab(enable:boolean) {
}
}
export const utils:TextEditorUtils = {
editorContentToHtml(content:any):Promise<string> {
return content ? content : '';
},
};
interface TinyMceCommand {
name: string,
value?: any,
@@ -127,7 +106,7 @@ const joplinCommandToTinyMceCommands:JoplinCommandToTinyMceCommands = {
'search': { name: 'SearchReplace' },
};
function styles_(props:TinyMCEProps) {
function styles_(props:NoteBodyEditorProps) {
return buildStyle('TinyMCE', props.theme, (/* theme:any */) => {
return {
disabledOverlay: {
@@ -155,7 +134,7 @@ let loadedAssetFiles_:string[] = [];
let dispatchDidUpdateIID_:any = null;
let changeId_:number = 1;
const TinyMCE = (props:TinyMCEProps, ref:any) => {
const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
const [editor, setEditor] = useState(null);
const [scriptLoaded, setScriptLoaded] = useState(false);
const [editorReady, setEditorReady] = useState(false);
@@ -166,9 +145,6 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
const markupToHtml = useRef(null);
markupToHtml.current = props.markupToHtml;
const joplinHtml = useRef(null);
joplinHtml.current = props.joplinHtml;
const rootIdRef = useRef<string>(`tinymce-${Date.now()}${Math.round(Math.random() * 10000)}`);
const editorRef = useRef<any>(null);
editorRef.current = editor;
@@ -194,16 +170,16 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
if (nodeName === 'A' && (event.ctrlKey || event.metaKey)) {
const href = event.target.getAttribute('href');
const joplinUrl = href.indexOf('joplin://') === 0 ? href : null;
// const joplinUrl = href.indexOf('joplin://') === 0 ? href : null;
if (joplinUrl) {
props.onMessage({
name: 'openInternal',
args: {
url: joplinUrl,
},
});
} else if (href.indexOf('#') === 0) {
// if (joplinUrl) {
// props.onMessage({
// name: 'openInternal',
// args: {
// url: joplinUrl,
// },
// });
if (href.indexOf('#') === 0) {
const anchorName = href.substr(1);
const anchor = editor.getDoc().getElementById(anchorName);
if (anchor) {
@@ -213,7 +189,7 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
}
} else {
props.onMessage({
name: 'openExternal',
name: 'openUrl',
args: {
url: href,
},
@@ -224,7 +200,22 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
useImperativeHandle(ref, () => {
return {
content: () => editor ? editor.getContent() : '',
content: async () => {
if (!editorRef.current) return '';
return prop_htmlToMarkdownRef.current(props.contentMarkupLanguage, editorRef.current.getContent(), props.contentOriginalCss);
},
setContent: (/* body: string*/) => {
console.warn('TinyMCE::setContent - not implemented');
},
resetScroll: () => {
console.warn('TinyMCE::resetScroll - not implemented');
},
scrollTo: (/* options:ScrollOptions*/) => {
console.warn('TinyMCE::scrollTo - not implemented');
},
clearState: () => {
console.warn('TinyMCE::clearState - not implemented');
},
execCommand: async (cmd:EditorCommand) => {
if (!editor) return false;
@@ -257,7 +248,7 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
return true;
},
};
}, [editor]);
}, [editor, props.contentMarkupLanguage, props.contentOriginalCss]);
// -----------------------------------------------------------------------------------------
// Load the TinyMCE library. The lib loads additional JS and CSS files on startup
@@ -303,7 +294,7 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
loaded: false,
},
{
src: 'gui/editors/TinyMCE/plugins/lists.js',
src: 'gui/NoteEditor/NoteBody/TinyMCE/plugins/lists.js',
id: 'tinyMceListsPluginScript',
loaded: false,
},
@@ -440,7 +431,7 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
height: '100%',
resize: false,
icons: 'Joplin',
icons_url: 'gui/editors/TinyMCE/icons.js',
icons_url: 'gui/NoteEditor/NoteBody/TinyMCE/icons.js',
plugins: 'noneditable link joplinLists hr searchreplace codesample table',
noneditable_noneditable_class: 'joplin-editable', // Can be a regex too
valid_elements: '*[*]', // We already filter in sanitize_html
@@ -524,7 +515,7 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
const html = [];
for (const resource of resources) {
const result = await markupToHtml.current(MarkupToHtml.MARKUP_LANGUAGE_MARKDOWN, resource.markdownTag, { bodyOnly: true });
const result = await markupToHtml.current(MarkupToHtml.MARKUP_LANGUAGE_MARKDOWN, resource.markdownTag, markupRenderOptions({ bodyOnly: true }));
html.push(result.html);
}
@@ -597,7 +588,7 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
.map((a:any) => a.path)
).filter((path:string) => !loadedAssetFiles_.includes(path));
const jsFiles = ['gui/editors/TinyMCE/content_script.js'].concat(
const jsFiles = ['gui/NoteEditor/NoteBody/TinyMCE/content_script.js'].concat(
pluginAssets
.filter((a:any) => a.mime === 'application/javascript')
.map((a:any) => a.path)
@@ -628,7 +619,7 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
useEffect(() => {
if (!editor) return () => {};
if (resourcesStatus(props.defaultEditorState.resourceInfos) !== 'ready') {
if (resourcesStatus(props.resourceInfos) !== 'ready') {
editor.setContent('');
return () => {};
}
@@ -636,12 +627,12 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
let cancelled = false;
const loadContent = async () => {
const result = await props.markupToHtml(props.defaultEditorState.markupLanguage, props.defaultEditorState.value, markupRenderOptions());
const result = await props.markupToHtml(props.contentMarkupLanguage, props.content, markupRenderOptions({ resourceInfos: props.resourceInfos }));
if (cancelled) return;
editor.setContent(result.html);
await loadDocumentAssets(editor, await props.allAssets(props.defaultEditorState.markupLanguage));
await loadDocumentAssets(editor, await props.allAssets(props.contentMarkupLanguage));
editor.getDoc().addEventListener('click', onEditorContentClick);
@@ -661,7 +652,7 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
cancelled = true;
editor.getDoc().removeEventListener('click', onEditorContentClick);
};
}, [editor, props.markupToHtml, props.allAssets, props.defaultEditorState, onEditorContentClick]);
}, [editor, props.markupToHtml, props.allAssets, onEditorContentClick, props.resourceInfos]);
// -----------------------------------------------------------------------------------------
// Handle onChange event
@@ -673,6 +664,9 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
const props_onChangeRef = useRef<Function>();
props_onChangeRef.current = props.onChange;
const prop_htmlToMarkdownRef = useRef<Function>();
prop_htmlToMarkdownRef.current = props.htmlToMarkdown;
useEffect(() => {
if (!editor) return () => {};
@@ -684,14 +678,16 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
if (onChangeHandlerIID) clearTimeout(onChangeHandlerIID);
onChangeHandlerIID = setTimeout(() => {
onChangeHandlerIID = setTimeout(async () => {
onChangeHandlerIID = null;
const contentMd = await prop_htmlToMarkdownRef.current(props.contentMarkupLanguage, editor.getContent(), props.contentOriginalCss);
if (!editor) return;
props_onChangeRef.current({
changeId: changeId,
content: editor.getContent(),
content: contentMd,
});
dispatchDidUpdate(editor);
@@ -755,6 +751,8 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
editor.on('paste', onPaste);
editor.on('cut', onChangeHandler);
editor.on('joplinChange', onChangeHandler);
editor.on('Undo', onChangeHandler);
editor.on('Redo', onChangeHandler);
editor.on('ExecCommand', onExecCommand);
return () => {
@@ -764,12 +762,14 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
editor.off('paste', onPaste);
editor.off('cut', onChangeHandler);
editor.off('joplinChange', onChangeHandler);
editor.off('Undo', onChangeHandler);
editor.off('Redo', onChangeHandler);
editor.off('ExecCommand', onExecCommand);
} catch (error) {
console.warn('Error removing events', error);
}
};
}, [props.onWillChange, props.onChange, editor]);
}, [props.onWillChange, props.onChange, props.contentMarkupLanguage, props.contentOriginalCss, editor]);
// -----------------------------------------------------------------------------------------
// Destroy the editor when unmounting
@@ -783,11 +783,13 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
};
}, []);
// Currently we don't handle resource "auto" and "manual" mode with TinyMCE
// as it is quite complex and probably rarely used.
function renderDisabledOverlay() {
const status = resourcesStatus(props.defaultEditorState.resourceInfos);
const status = resourcesStatus(props.resourceInfos);
if (status === 'ready') return null;
const message = _('Please wait for all attachments to be downloaded and decrypted. You may also switch the layout and edit the note in Markdown mode.');
const message = _('Please wait for all attachments to be downloaded and decrypted. You may also switch to %s to edit the note.', _('Code View'));
return (
<div style={styles.disabledOverlay}>
<p style={theme.textStyle}>{message}</p>

0
ElectronClient/gui/editors/TinyMCE/content_script.js → ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/content_script.js
View File

0
ElectronClient/gui/editors/TinyMCE/icons.js → ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/icons.js
View File

0
ElectronClient/gui/editors/TinyMCE/plugins/lists.js → ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/plugins/lists.js
View File

570
ElectronClient/gui/NoteEditor/NoteEditor.tsx Normal file
View File

@@ -0,0 +1,570 @@
import * as React from 'react';
import { useState, useEffect, useCallback, useRef } from 'react';
// eslint-disable-next-line no-unused-vars
import TinyMCE from './NoteBody/TinyMCE/TinyMCE';
import AceEditor from './NoteBody/AceEditor/AceEditor';
import { connect } from 'react-redux';
import MultiNoteActions from '../MultiNoteActions';
import NoteToolbar from '../NoteToolbar/NoteToolbar';
import { htmlToMarkdown, formNoteToNote } from './utils';
import useSearchMarkers from './utils/useSearchMarkers';
import useNoteSearchBar from './utils/useNoteSearchBar';
import useMessageHandler from './utils/useMessageHandler';
import useWindowCommandHandler from './utils/useWindowCommandHandler';
import useDropHandler from './utils/useDropHandler';
import useMarkupToHtml from './utils/useMarkupToHtml';
import useFormNote, { OnLoadEvent } from './utils/useFormNote';
import styles_ from './styles';
import { NoteTextProps, FormNote, ScrollOptions, ScrollOptionTypes, OnChangeEvent, NoteBodyEditorProps } from './utils/types';
import { attachResources } from './utils/resourceHandling';
const { themeStyle } = require('../../theme.js');
const NoteSearchBar = require('../NoteSearchBar.min.js');
const { reg } = require('lib/registry.js');
const { time } = require('lib/time-utils.js');
const markupLanguageUtils = require('lib/markupLanguageUtils');
const usePrevious = require('lib/hooks/usePrevious').default;
const Setting = require('lib/models/Setting');
const { _ } = require('lib/locale');
const Note = require('lib/models/Note.js');
const { bridge } = require('electron').remote.require('./bridge');
const ExternalEditWatcher = require('lib/services/ExternalEditWatcher');
const eventManager = require('../../eventManager');
const NoteRevisionViewer = require('../NoteRevisionViewer.min');
const TagList = require('../TagList.min.js');
function NoteEditor(props: NoteTextProps) {
const [showRevisions, setShowRevisions] = useState(false);
const [titleHasBeenManuallyChanged, setTitleHasBeenManuallyChanged] = useState(false);
const [scrollWhenReady, setScrollWhenReady] = useState<ScrollOptions>(null);
const editorRef = useRef<any>();
const titleInputRef = useRef<any>();
const isMountedRef = useRef(true);
const noteSearchBarRef = useRef(null);
const formNote_beforeLoad = useCallback(async (event:OnLoadEvent) => {
await saveNoteIfWillChange(event.formNote);
setShowRevisions(false);
}, []);
const formNote_afterLoad = useCallback(async () => {
setTitleHasBeenManuallyChanged(false);
}, []);
const { formNote, setFormNote, isNewNote, resourceInfos } = useFormNote({
syncStarted: props.syncStarted,
noteId: props.noteId,
isProvisional: props.isProvisional,
titleInputRef: titleInputRef,
editorRef: editorRef,
onBeforeLoad: formNote_beforeLoad,
onAfterLoad: formNote_afterLoad,
});
const formNoteRef = useRef<FormNote>();
formNoteRef.current = { ...formNote };
const {
localSearch,
onChange: localSearch_change,
onNext: localSearch_next,
onPrevious: localSearch_previous,
onClose: localSearch_close,
setResultCount: setLocalSearchResultCount,
showLocalSearch,
setShowLocalSearch,
searchMarkers: localSearchMarkerOptions,
} = useNoteSearchBar();
// If the note has been modified in another editor, wait for it to be saved
// before loading it in this editor.
// const waitingToSaveNote = props.noteId && formNote.id !== props.noteId && props.editorNoteStatuses[props.noteId] === 'saving';
const styles = styles_(props);
function scheduleSaveNote(formNote: FormNote) {
if (!formNote.saveActionQueue) throw new Error('saveActionQueue is not set!!'); // Sanity check
reg.logger().debug('Scheduling...', formNote);
const makeAction = (formNote: FormNote) => {
return async function() {
const note = await formNoteToNote(formNote);
reg.logger().debug('Saving note...', note);
const savedNote:any = await Note.save(note);
setFormNote((prev: FormNote) => {
return { ...prev, user_updated_time: savedNote.user_updated_time };
});
ExternalEditWatcher.instance().updateNoteFile(savedNote);
props.dispatch({
type: 'EDITOR_NOTE_STATUS_REMOVE',
id: formNote.id,
});
};
};
formNote.saveActionQueue.push(makeAction(formNote));
}
async function saveNoteIfWillChange(formNote: FormNote) {
if (!formNote.id || !formNote.bodyWillChangeId) return;
const body = await editorRef.current.content();
scheduleSaveNote({
...formNote,
body: body,
bodyWillChangeId: 0,
bodyChangeId: 0,
});
}
async function saveNoteAndWait(formNote: FormNote) {
saveNoteIfWillChange(formNote);
return formNote.saveActionQueue.waitForAllDone();
}
const markupToHtml = useMarkupToHtml({ themeId: props.theme, customCss: props.customCss });
const allAssets = useCallback(async (markupLanguage: number): Promise<any[]> => {
const theme = themeStyle(props.theme);
const markupToHtml = markupLanguageUtils.newMarkupToHtml({
resourceBaseUrl: `file://${Setting.value('resourceDir')}/`,
});
return markupToHtml.allAssets(markupLanguage, theme);
}, [props.theme]);
const handleProvisionalFlag = useCallback(() => {
if (props.isProvisional) {
props.dispatch({
type: 'NOTE_PROVISIONAL_FLAG_CLEAR',
id: formNote.id,
});
}
}, [props.isProvisional, formNote.id]);
useEffect(() => {
// This is not exactly a hack but a bit ugly. If the note was changed (willChangeId > 0) but not
// yet saved, we need to save it now before the component is unmounted. However, we can't put
// formNote in the dependency array or that effect will run every time the note changes. We only
// want to run it once on unmount. So because of that we need to use that formNoteRef.
return () => {
isMountedRef.current = false;
saveNoteIfWillChange(formNoteRef.current);
};
}, []);
const previousNoteId = usePrevious(formNote.id);
useEffect(() => {
if (formNote.id === previousNoteId) return;
if (editorRef.current) {
editorRef.current.resetScroll();
}
setScrollWhenReady({
type: props.selectedNoteHash ? ScrollOptionTypes.Hash : ScrollOptionTypes.Percent,
value: props.selectedNoteHash ? props.selectedNoteHash : props.lastEditorScrollPercents[props.noteId] || 0,
});
}, [formNote.id, previousNoteId]);
const onFieldChange = useCallback((field: string, value: any, changeId = 0) => {
if (!isMountedRef.current) {
// When the component is unmounted, various actions can happen which can
// trigger onChange events, for example the textarea might be cleared.
// We need to ignore these events, otherwise the note is going to be saved
// with an invalid body.
reg.logger().debug('Skipping change event because the component is unmounted');
return;
}
handleProvisionalFlag();
const change = field === 'body' ? {
body: value,
} : {
title: value,
};
const newNote = {
...formNote,
...change,
bodyWillChangeId: 0,
bodyChangeId: 0,
hasChanged: true,
};
if (field === 'title') {
setTitleHasBeenManuallyChanged(true);
}
if (isNewNote && !titleHasBeenManuallyChanged && field === 'body') {
// TODO: Handle HTML/Markdown format
newNote.title = Note.defaultTitle(value);
}
if (changeId !== null && field === 'body' && formNote.bodyWillChangeId !== changeId) {
// Note was changed, but another note was loaded before save - skipping
// The previously loaded note, that was modified, will be saved via saveNoteIfWillChange()
} else {
setFormNote(newNote);
scheduleSaveNote(newNote);
}
}, [handleProvisionalFlag, formNote, isNewNote, titleHasBeenManuallyChanged]);
useWindowCommandHandler({ windowCommand: props.windowCommand, dispatch: props.dispatch, formNote, setShowLocalSearch, noteSearchBarRef, editorRef, titleInputRef, saveNoteAndWait });
const onDrop = useDropHandler({ editorRef });
const onBodyChange = useCallback((event: OnChangeEvent) => onFieldChange('body', event.content, event.changeId), [onFieldChange]);
const onTitleChange = useCallback((event: any) => onFieldChange('title', event.target.value), [onFieldChange]);
const onTitleKeydown = useCallback((event:any) => {
const keyCode = event.keyCode;
if (keyCode === 9) {
// TAB
event.preventDefault();
if (event.shiftKey) {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'focusElement',
target: 'noteList',
});
} else {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'focusElement',
target: 'noteBody',
});
}
}
}, [props.dispatch]);
const onBodyWillChange = useCallback((event: any) => {
handleProvisionalFlag();
setFormNote(prev => {
return {
...prev,
bodyWillChangeId: event.changeId,
hasChanged: true,
};
});
props.dispatch({
type: 'EDITOR_NOTE_STATUS_SET',
id: formNote.id,
status: 'saving',
});
}, [formNote, handleProvisionalFlag]);
const onMessage = useMessageHandler(scrollWhenReady, setScrollWhenReady, editorRef, setLocalSearchResultCount, props.dispatch);
const introductionPostLinkClick = useCallback(() => {
bridge().openExternal('https://www.patreon.com/posts/34246624');
}, []);
const externalEditWatcher_noteChange = useCallback((event) => {
if (event.id === formNote.id) {
const newFormNote = {
...formNote,
title: event.note.title,
body: event.note.body,
};
setFormNote(newFormNote);
}
}, [formNote]);
const onNotePropertyChange = useCallback((event) => {
setFormNote(formNote => {
if (formNote.id !== event.note.id) return formNote;
const newFormNote: FormNote = { ...formNote };
for (const key in event.note) {
if (key === 'id') continue;
(newFormNote as any)[key] = event.note[key];
}
return newFormNote;
});
}, []);
useEffect(() => {
eventManager.on('alarmChange', onNotePropertyChange);
ExternalEditWatcher.instance().on('noteChange', externalEditWatcher_noteChange);
return () => {
eventManager.off('alarmChange', onNotePropertyChange);
ExternalEditWatcher.instance().off('noteChange', externalEditWatcher_noteChange);
};
}, [externalEditWatcher_noteChange, onNotePropertyChange]);
const noteToolbar_buttonClick = useCallback((event: any) => {
const cases: any = {
'startExternalEditing': async () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'commandStartExternalEditing',
});
},
'stopExternalEditing': () => {
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'commandStopExternalEditing',
});
},
'setTags': async () => {
await saveNoteAndWait(formNote);
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'setTags',
noteIds: [formNote.id],
});
},
'setAlarm': async () => {
await saveNoteAndWait(formNote);
props.dispatch({
type: 'WINDOW_COMMAND',
name: 'editAlarm',
noteId: formNote.id,
});
},
'showRevisions': () => {
setShowRevisions(true);
},
};
if (!cases[event.name]) throw new Error(`Unsupported event: ${event.name}`);
cases[event.name]();
}, [formNote]);
const onScroll = useCallback((event: any) => {
props.dispatch({
type: 'EDITOR_SCROLL_PERCENT_SET',
noteId: formNote.id,
percent: event.percent,
});
}, [props.dispatch, formNote]);
function renderNoNotes(rootStyle:any) {
const emptyDivStyle = Object.assign(
{
backgroundColor: 'black',
opacity: 0.1,
},
rootStyle
);
return <div style={emptyDivStyle}></div>;
}
function renderNoteToolbar() {
const toolbarStyle = {
// marginTop: 4,
marginBottom: 0,
flex: 1,
};
return <NoteToolbar
theme={props.theme}
note={formNote}
dispatch={props.dispatch}
style={toolbarStyle}
watchedNoteFiles={props.watchedNoteFiles}
onButtonClick={noteToolbar_buttonClick}
/>;
}
const searchMarkers = useSearchMarkers(showLocalSearch, localSearchMarkerOptions, props.searches, props.selectedSearchId);
const editorProps:NoteBodyEditorProps = {
ref: editorRef,
contentKey: formNote.id,
style: styles.tinyMCE,
onChange: onBodyChange,
onWillChange: onBodyWillChange,
onMessage: onMessage,
content: formNote.body,
contentMarkupLanguage: formNote.markup_language,
contentOriginalCss: formNote.originalCss,
resourceInfos: resourceInfos,
htmlToMarkdown: htmlToMarkdown,
markupToHtml: markupToHtml,
allAssets: allAssets,
attachResources: attachResources,
disabled: false,
theme: props.theme,
dispatch: props.dispatch,
noteToolbar: renderNoteToolbar(),
onScroll: onScroll,
searchMarkers: searchMarkers,
visiblePanes: props.noteVisiblePanes || ['editor', 'viewer'],
keyboardMode: Setting.value('editor.keyboardMode'),
};
let editor = null;
if (props.bodyEditor === 'TinyMCE') {
editor = <TinyMCE {...editorProps}/>;
} else if (props.bodyEditor === 'AceEditor') {
editor = <AceEditor {...editorProps}/>;
} else {
throw new Error(`Invalid editor: ${props.bodyEditor}`);
}
const wysiwygBanner = props.bodyEditor !== 'TinyMCE' ? null : (
<div style={{ ...styles.warningBanner, marginBottom: 10 }}>
This is an experimental WYSIWYG editor for evaluation only. Please do not use with important notes as you may lose some data! See the <a style={styles.urlColor} onClick={introductionPostLinkClick} href="#">introduction post</a> for more information.
</div>
);
const noteRevisionViewer_onBack = useCallback(() => {
setShowRevisions(false);
}, []);
const tagStyle = {
marginBottom: 10,
};
const tagList = props.selectedNoteTags.length ? <TagList style={tagStyle} items={props.selectedNoteTags} /> : null;
if (showRevisions) {
const theme = themeStyle(props.theme);
const revStyle = {
...props.style,
display: 'inline-flex',
padding: theme.margin,
verticalAlign: 'top',
boxSizing: 'border-box',
};
return (
<div style={revStyle}>
<NoteRevisionViewer customCss={props.customCss} noteId={formNote.id} onBack={noteRevisionViewer_onBack} />
</div>
);
}
if (props.selectedNoteIds.length > 1) {
return <MultiNoteActions
theme={props.theme}
selectedNoteIds={props.selectedNoteIds}
notes={props.notes}
dispatch={props.dispatch}
watchedNoteFiles={props.watchedNoteFiles}
style={props.style}
/>;
}
const titleBarDate = <span style={styles.titleDate}>{time.formatMsToLocal(formNote.user_updated_time)}</span>;
function renderSearchBar() {
if (!showLocalSearch) return false;
const theme = themeStyle(props.theme);
return (
<NoteSearchBar
ref={noteSearchBarRef}
style={{
display: 'flex',
height: 35,
borderTop: `1px solid ${theme.dividerColor}`,
}}
query={localSearch.query}
searching={localSearch.searching}
resultCount={localSearch.resultCount}
selectedIndex={localSearch.selectedIndex}
onChange={localSearch_change}
onNext={localSearch_next}
onPrevious={localSearch_previous}
onClose={localSearch_close}
/>
);
}
if (formNote.encryption_applied || !formNote.id) {
return renderNoNotes(styles.root);
}
return (
<div style={styles.root} onDrop={onDrop}>
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
{wysiwygBanner}
{tagList}
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
<input
type="text"
ref={titleInputRef}
// disabled={waitingToSaveNote}
placeholder={props.isProvisional ? _('Creating new %s...', formNote.is_todo ? _('to-do') : _('note')) : ''}
style={styles.titleInput}
onChange={onTitleChange}
onKeyDown={onTitleKeydown}
value={formNote.title}
/>
{titleBarDate}
</div>
<div style={{ display: 'flex', flex: 1 }}>
{editor}
</div>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
{renderSearchBar()}
</div>
</div>
</div>
);
}
export {
NoteEditor as NoteEditorComponent,
};
const mapStateToProps = (state: any) => {
const noteId = state.selectedNoteIds.length === 1 ? state.selectedNoteIds[0] : null;
return {
noteId: noteId,
notes: state.notes,
folders: state.folders,
selectedNoteIds: state.selectedNoteIds,
isProvisional: state.provisionalNoteIds.includes(noteId),
editorNoteStatuses: state.editorNoteStatuses,
syncStarted: state.syncStarted,
theme: state.settings.theme,
watchedNoteFiles: state.watchedNoteFiles,
windowCommand: state.windowCommand,
notesParentType: state.notesParentType,
historyNotes: state.historyNotes,
selectedNoteTags: state.selectedNoteTags,
lastEditorScrollPercents: state.lastEditorScrollPercents,
selectedNoteHash: state.selectedNoteHash,
searches: state.searches,
selectedSearchId: state.selectedSearchId,
customCss: state.customCss,
noteVisiblePanes: state.noteVisiblePanes,
};
};
export default connect(mapStateToProps)(NoteEditor);

53
ElectronClient/gui/NoteEditor/styles/index.ts Normal file
View File

@@ -0,0 +1,53 @@
import { NoteTextProps } from '../utils/types';
const { buildStyle } = require('../../../theme.js');
export default function styles(props: NoteTextProps) {
return buildStyle('NoteEditor', props.theme, (theme: any) => {
return {
root: {
...props.style,
boxSizing: 'border-box',
paddingLeft: 10,
paddingTop: 10,
borderLeftWidth: 1,
borderLeftColor: theme.dividerColor,
borderLeftStyle: 'solid',
},
titleInput: {
flex: 1,
display: 'inline-block',
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 8,
paddingRight: 8,
marginRight: theme.paddingLeft,
color: theme.textStyle.color,
fontSize: theme.textStyle.fontSize * 1.25 * 1.5,
backgroundColor: theme.backgroundColor,
border: '1px solid',
borderColor: theme.dividerColor,
},
warningBanner: {
background: theme.warningBackgroundColor,
fontFamily: theme.fontFamily,
padding: 10,
fontSize: theme.fontSize,
},
tinyMCE: {
width: '100%',
height: '100%',
},
toolbar: {
marginTop: 4,
marginBottom: 0,
},
titleDate: {
...theme.textStyle,
color: theme.colorFaded,
paddingLeft: 10,
paddingRight: 10,
},
};
});
}

28
ElectronClient/gui/NoteEditor/utils/index.ts Normal file
View File

@@ -0,0 +1,28 @@
import { FormNote } from './types';
const HtmlToMd = require('lib/HtmlToMd');
const Note = require('lib/models/Note');
const { MarkupToHtml } = require('lib/joplin-renderer');
export async function htmlToMarkdown(markupLanguage: number, html: string, originalCss:string): Promise<string> {
let newBody = '';
if (markupLanguage === MarkupToHtml.MARKUP_LANGUAGE_MARKDOWN) {
const htmlToMd = new HtmlToMd();
newBody = htmlToMd.parse(html, { preserveImageTagsWithSize: true });
newBody = await Note.replaceResourceExternalToInternalLinks(newBody, { useAbsolutePaths: true });
} else {
newBody = await Note.replaceResourceExternalToInternalLinks(html, { useAbsolutePaths: true });
if (originalCss) newBody = `<style>${originalCss}</style>\n${newBody}`;
}
return newBody;
}
export async function formNoteToNote(formNote: FormNote): Promise<any> {
return {
id: formNote.id,
title: formNote.title,
body: formNote.body,
};
}

122
ElectronClient/gui/NoteEditor/utils/resourceHandling.ts Normal file
View File

@@ -0,0 +1,122 @@
const Setting = require('lib/models/Setting');
const Note = require('lib/models/Note.js');
const BaseModel = require('lib/BaseModel.js');
const Resource = require('lib/models/Resource.js');
const { shim } = require('lib/shim');
const { bridge } = require('electron').remote.require('./bridge');
const ResourceFetcher = require('lib/services/ResourceFetcher.js');
const { reg } = require('lib/registry.js');
const joplinRendererUtils = require('lib/joplin-renderer').utils;
export async function handleResourceDownloadMode(noteBody: string) {
if (noteBody && Setting.value('sync.resourceDownloadMode') === 'auto') {
const resourceIds = await Note.linkedResourceIds(noteBody);
await ResourceFetcher.instance().markForDownload(resourceIds);
}
}
let resourceCache_: any = {};
export function clearResourceCache() {
resourceCache_ = {};
}
export async function attachedResources(noteBody: string): Promise<any> {
if (!noteBody) return {};
const resourceIds = await Note.linkedItemIdsByType(BaseModel.TYPE_RESOURCE, noteBody);
const output: any = {};
for (let i = 0; i < resourceIds.length; i++) {
const id = resourceIds[i];
if (resourceCache_[id]) {
output[id] = resourceCache_[id];
} else {
const resource = await Resource.load(id);
const localState = await Resource.localState(resource);
const o = {
item: resource,
localState: localState,
};
// eslint-disable-next-line require-atomic-updates
resourceCache_[id] = o;
output[id] = o;
}
}
return output;
}
export async function attachResources() {
const filePaths = bridge().showOpenDialog({
properties: ['openFile', 'createDirectory', 'multiSelections'],
});
if (!filePaths || !filePaths.length) return [];
const output = [];
for (const filePath of filePaths) {
try {
const resource = await shim.createResourceFromPath(filePath);
output.push({
item: resource,
markdownTag: Resource.markdownTag(resource),
});
} catch (error) {
bridge().showErrorMessageBox(error.message);
}
}
return output;
}
export async function commandAttachFileToBody(body:string, filePaths:string[] = null, options:any = null) {
options = {
createFileURL: false,
position: 0,
...options,
};
if (!filePaths) {
filePaths = bridge().showOpenDialog({
properties: ['openFile', 'createDirectory', 'multiSelections'],
});
if (!filePaths || !filePaths.length) return null;
}
for (let i = 0; i < filePaths.length; i++) {
const filePath = filePaths[i];
try {
reg.logger().info(`Attaching ${filePath}`);
const newBody = await shim.attachFileToNoteBody(body, filePath, options.position, {
createFileURL: options.createFileURL,
resizeLargeImages: 'ask',
});
if (!newBody) {
reg.logger().info('File attachment was cancelled');
return null;
}
body = newBody;
reg.logger().info('File was attached.');
} catch (error) {
reg.logger().error(error);
bridge().showErrorMessageBox(error.message);
}
}
return body;
}
export function resourcesStatus(resourceInfos: any) {
let lowestIndex = joplinRendererUtils.resourceStatusIndex('ready');
for (const id in resourceInfos) {
const s = joplinRendererUtils.resourceStatus(Resource, resourceInfos[id]);
const idx = joplinRendererUtils.resourceStatusIndex(s);
if (idx < lowestIndex) lowestIndex = idx;
}
return joplinRendererUtils.resourceStatusName(lowestIndex);
}

145
ElectronClient/gui/NoteEditor/utils/types.ts Normal file
View File

@@ -0,0 +1,145 @@
// eslint-disable-next-line no-unused-vars
import AsyncActionQueue from '../../../lib/AsyncActionQueue';
export interface NoteTextProps {
style: any;
noteId: string;
theme: number;
dispatch: Function;
selectedNoteIds: string[];
notes: any[];
watchedNoteFiles: string[];
isProvisional: boolean;
editorNoteStatuses: any;
syncStarted: boolean;
bodyEditor: string;
windowCommand: any;
folders: any[];
notesParentType: string;
historyNotes: any[];
selectedNoteTags: any[];
lastEditorScrollPercents: any;
selectedNoteHash: string;
searches: any[],
selectedSearchId: string,
customCss: string,
noteVisiblePanes: string[],
}
export interface NoteBodyEditorProps {
style: any;
ref: any,
theme: number;
content: string,
contentKey: string,
contentMarkupLanguage: number,
contentOriginalCss: string,
onChange(event: OnChangeEvent): void;
onWillChange(event: any): void;
onMessage(event: any): void;
onScroll(event: any): void;
markupToHtml: Function;
htmlToMarkdown: Function;
allAssets: Function;
attachResources: Function;
disabled: boolean;
dispatch: Function;
noteToolbar: any;
searchMarkers: any,
visiblePanes: string[],
keyboardMode: string,
resourceInfos: ResourceInfos,
}
export interface FormNote {
id: string,
title: string,
body: string,
parent_id: string,
is_todo: number,
bodyEditorContent?: any,
markup_language: number,
user_updated_time: number,
encryption_applied: number,
hasChanged: boolean,
// Getting the content from the editor can be a slow process because that content
// might need to be serialized first. For that reason, the wrapped editor (eg TinyMCE)
// first emits onWillChange when there is a change. That event does not include the
// editor content. After a few milliseconds (eg if the user stops typing for long
// enough), the editor emits onChange, and that event will include the editor content.
//
// Both onWillChange and onChange events include a changeId property which is used
// to link the two events together. It is used for example to detect if a new note
// was loaded before the current note was saved - in that case the changeId will be
// different. The two properties bodyWillChangeId and bodyChangeId are used to save
// this info with the currently loaded note.
//
// The willChange/onChange events also allow us to handle the case where the user
// types something then quickly switch a different note. In that case, bodyWillChangeId
// is set, thus we know we should save the note, even though we won't receive the
// onChange event.
bodyWillChangeId: number
bodyChangeId: number,
saveActionQueue: AsyncActionQueue,
// Note with markup_language = HTML have a block of CSS at the start, which is used
// to preserve the style from the original (web-clipped) page. When sending the note
// content to TinyMCE, we only send the actual HTML, without this CSS. The CSS is passed
// via a file in pluginAssets. This is because TinyMCE would not render the style otherwise.
// However, when we get back the HTML from TinyMCE, we need to reconstruct the original note.
// Since the CSS used by TinyMCE has been lost (since it's in a temp CSS file), we keep that
// original CSS here. It's used in formNoteToNote to rebuild the note body.
// We can keep it here because we know TinyMCE will not modify it anyway.
originalCss: string,
}
export function defaultFormNote():FormNote {
return {
id: '',
parent_id: '',
title: '',
body: '',
is_todo: 0,
markup_language: 1,
bodyWillChangeId: 0,
bodyChangeId: 0,
saveActionQueue: null,
originalCss: '',
hasChanged: false,
user_updated_time: 0,
encryption_applied: 0,
};
}
export interface ResourceInfo {
localState: any,
item: any,
}
export interface ResourceInfos {
[index:string]: ResourceInfo,
}
export enum ScrollOptionTypes {
None = 0,
Hash = 1,
Percent = 2,
}
export interface ScrollOptions {
type: ScrollOptionTypes,
value: any,
}
export interface OnChangeEvent {
changeId: number;
content: any;
}
export interface EditorCommand {
name: string;
value: any;
}

53
ElectronClient/gui/NoteEditor/utils/useDropHandler.ts Normal file
View File

@@ -0,0 +1,53 @@
import { useCallback } from 'react';
const Note = require('lib/models/Note.js');
interface HookDependencies {
editorRef:any,
}
export default function useDropHandler(dependencies:HookDependencies) {
const { editorRef } = dependencies;
return useCallback(async (event:any) => {
const dt = event.dataTransfer;
const createFileURL = event.altKey;
if (dt.types.indexOf('text/x-jop-note-ids') >= 0) {
const noteIds = JSON.parse(dt.getData('text/x-jop-note-ids'));
const noteMarkdownTags = [];
for (let i = 0; i < noteIds.length; i++) {
const note = await Note.load(noteIds[i]);
noteMarkdownTags.push(Note.markdownTag(note));
}
editorRef.current.execCommand({
name: 'dropItems',
value: {
type: 'notes',
markdownTags: noteMarkdownTags,
},
});
return;
}
const files = dt.files;
if (files && files.length) {
const paths = [];
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (!file.path) continue;
paths.push(file.path);
}
editorRef.current.execCommand({
name: 'dropItems',
value: {
type: 'files',
paths: paths,
createFileURL: createFileURL,
},
});
}
}, []);
}

208
ElectronClient/gui/NoteEditor/utils/useFormNote.ts Normal file
View File

@@ -0,0 +1,208 @@
import { useState, useEffect, useCallback } from 'react';
import { FormNote, defaultFormNote, ResourceInfos } from './types';
import { clearResourceCache, attachedResources } from './resourceHandling';
const { MarkupToHtml } = require('lib/joplin-renderer');
const HtmlToHtml = require('lib/joplin-renderer/HtmlToHtml');
import AsyncActionQueue from '../../../lib/AsyncActionQueue';
import { handleResourceDownloadMode } from './resourceHandling';
const usePrevious = require('lib/hooks/usePrevious').default;
const Note = require('lib/models/Note');
const Setting = require('lib/models/Setting');
const { reg } = require('lib/registry.js');
const ResourceFetcher = require('lib/services/ResourceFetcher.js');
const DecryptionWorker = require('lib/services/DecryptionWorker.js');
export interface OnLoadEvent {
formNote: FormNote,
}
interface HookDependencies {
syncStarted: boolean,
noteId: string,
isProvisional: boolean,
titleInputRef: any,
editorRef: any,
onBeforeLoad(event:OnLoadEvent):void,
onAfterLoad(event:OnLoadEvent):void,
}
function installResourceChangeHandler(onResourceChangeHandler: Function) {
ResourceFetcher.instance().on('downloadComplete', onResourceChangeHandler);
ResourceFetcher.instance().on('downloadStarted', onResourceChangeHandler);
DecryptionWorker.instance().on('resourceDecrypted', onResourceChangeHandler);
}
function uninstallResourceChangeHandler(onResourceChangeHandler: Function) {
ResourceFetcher.instance().off('downloadComplete', onResourceChangeHandler);
ResourceFetcher.instance().off('downloadStarted', onResourceChangeHandler);
DecryptionWorker.instance().off('resourceDecrypted', onResourceChangeHandler);
}
export default function useFormNote(dependencies:HookDependencies) {
const { syncStarted, noteId, isProvisional, titleInputRef, editorRef, onBeforeLoad, onAfterLoad } = dependencies;
const [formNote, setFormNote] = useState<FormNote>(defaultFormNote());
const [isNewNote, setIsNewNote] = useState(false);
const prevSyncStarted = usePrevious(syncStarted);
const previousNoteId = usePrevious(formNote.id);
const [resourceInfos, setResourceInfos] = useState<ResourceInfos>({});
async function initNoteState(n: any) {
let originalCss = '';
if (n.markup_language === MarkupToHtml.MARKUP_LANGUAGE_HTML) {
const htmlToHtml = new HtmlToHtml();
const splitted = htmlToHtml.splitHtml(n.body);
originalCss = splitted.css;
}
const newFormNote = {
id: n.id,
title: n.title,
body: n.body,
is_todo: n.is_todo,
parent_id: n.parent_id,
bodyWillChangeId: 0,
bodyChangeId: 0,
markup_language: n.markup_language,
saveActionQueue: new AsyncActionQueue(300),
originalCss: originalCss,
hasChanged: false,
user_updated_time: n.user_updated_time,
encryption_applied: n.encryption_applied,
};
// Note that for performance reason,the call to setResourceInfos should
// be first because it loads the resource infos in an async way. If we
// swap them, the formNote will be updated first and rendered, then the
// the resources will load, and the note will be re-rendered.
setResourceInfos(await attachedResources(n.body));
setFormNote(newFormNote);
await handleResourceDownloadMode(n.body);
return newFormNote;
}
useEffect(() => {
// Check that synchronisation has just finished - and
// if the note has never been changed, we reload it.
// If the note has already been changed, it's a conflict
// that's already been handled by the synchronizer.
if (!prevSyncStarted) return () => {};
if (syncStarted) return () => {};
if (formNote.hasChanged) return () => {};
reg.logger().debug('Sync has finished and note has never been changed - reloading it');
let cancelled = false;
const loadNote = async () => {
const n = await Note.load(noteId);
if (cancelled) return;
// Normally should not happened because if the note has been deleted via sync
// it would not have been loaded in the editor (due to note selection changing
// on delete)
if (!n) {
reg.logger().warn('Trying to reload note that has been deleted:', noteId);
return;
}
await initNoteState(n);
};
loadNote();
return () => {
cancelled = true;
};
}, [prevSyncStarted, syncStarted, formNote]);
useEffect(() => {
if (!noteId) return () => {};
if (formNote.id === noteId) return () => {};
let cancelled = false;
reg.logger().debug('Loading existing note', noteId);
function handleAutoFocus(noteIsTodo: boolean) {
if (!isProvisional) return;
const focusSettingName = noteIsTodo ? 'newTodoFocus' : 'newNoteFocus';
requestAnimationFrame(() => {
if (Setting.value(focusSettingName) === 'title') {
if (titleInputRef.current) titleInputRef.current.focus();
} else {
if (editorRef.current) editorRef.current.execCommand({ name: 'focus' });
}
});
}
async function loadNote() {
const n = await Note.load(noteId);
if (cancelled) return;
if (!n) throw new Error(`Cannot find note with ID: ${noteId}`);
reg.logger().debug('Loaded note:', n);
await onBeforeLoad({ formNote });
const newFormNote = await initNoteState(n);
setIsNewNote(isProvisional);
await onAfterLoad({ formNote: newFormNote });
handleAutoFocus(!!n.is_todo);
}
loadNote();
return () => {
cancelled = true;
};
}, [noteId, isProvisional, formNote]);
const onResourceChange = useCallback(async function(event:any = null) {
const resourceIds = await Note.linkedResourceIds(formNote.body);
if (!event || resourceIds.indexOf(event.id) >= 0) {
clearResourceCache();
setResourceInfos(await attachedResources(formNote.body));
}
}, [formNote.body]);
useEffect(() => {
installResourceChangeHandler(onResourceChange);
return () => {
uninstallResourceChangeHandler(onResourceChange);
};
}, [onResourceChange]);
useEffect(() => {
if (previousNoteId !== formNote.id) {
onResourceChange();
}
}, [previousNoteId, formNote.id, onResourceChange]);
useEffect(() => {
let cancelled = false;
async function runEffect() {
const r = await attachedResources(formNote.body);
if (cancelled) return;
setResourceInfos(r);
}
runEffect();
return () => {
cancelled = true;
};
}, [formNote.body]);
return { isNewNote, formNote, setFormNote, resourceInfos };
}

56
ElectronClient/gui/NoteEditor/utils/useMarkupToHtml.ts Normal file
View File

@@ -0,0 +1,56 @@
import { useCallback } from 'react';
import { ResourceInfos } from './types';
const { themeStyle } = require('../../../theme.js');
const Note = require('lib/models/Note');
const Setting = require('lib/models/Setting');
const markupLanguageUtils = require('lib/markupLanguageUtils');
interface HookDependencies {
themeId: number,
customCss: string,
}
interface MarkupToHtmlOptions {
replaceResourceInternalToExternalLinks?: boolean,
resourceInfos?: ResourceInfos,
}
export default function useMarkupToHtml(dependencies:HookDependencies) {
const { themeId, customCss } = dependencies;
return useCallback(async (markupLanguage: number, md: string, options: MarkupToHtmlOptions = null): Promise<any> => {
options = {
replaceResourceInternalToExternalLinks: false,
resourceInfos: {},
...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;
const markupToHtml = markupLanguageUtils.newMarkupToHtml({
resourceBaseUrl: `file://${Setting.value('resourceDir')}/`,
});
const result = await markupToHtml.render(markupLanguage, md, theme, Object.assign({}, {
codeTheme: theme.codeThemeCss,
userCss: customCss || '',
resources: resources,
postMessageSyntax: 'ipcProxySendToHost',
splitted: true,
externalAssetsOnly: true,
}, options));
return result;
}, [themeId, customCss]);
}

152
ElectronClient/gui/NoteEditor/utils/useMessageHandler.ts Normal file
View File

@@ -0,0 +1,152 @@
import { useCallback } from 'react';
const BaseItem = require('lib/models/BaseItem');
const { _ } = require('lib/locale');
const BaseModel = require('lib/BaseModel.js');
const Resource = require('lib/models/Resource.js');
const { bridge } = require('electron').remote.require('./bridge');
const { urlDecode } = require('lib/string-utils');
const urlUtils = require('lib/urlUtils');
const ResourceFetcher = require('lib/services/ResourceFetcher.js');
const Menu = bridge().Menu;
const MenuItem = bridge().MenuItem;
const fs = require('fs-extra');
const { clipboard } = require('electron');
const { toSystemSlashes } = require('lib/path-utils');
const { reg } = require('lib/registry.js');
export default function useMessageHandler(scrollWhenReady:any, setScrollWhenReady:Function, editorRef:any, setLocalSearchResultCount:Function, dispatch:Function) {
return useCallback(async (event: any) => {
const msg = event.channel ? event.channel : '';
const args = event.args;
const arg0 = args && args.length >= 1 ? args[0] : null;
if (msg !== 'percentScroll') console.info(`Got ipc-message: ${msg}`, args);
if (msg.indexOf('error:') === 0) {
const s = msg.split(':');
s.splice(0, 1);
reg.logger().error(s.join(':'));
} else if (msg === 'noteRenderComplete') {
if (scrollWhenReady) {
const options = { ...scrollWhenReady };
setScrollWhenReady(null);
editorRef.current.scrollTo(options);
}
} else if (msg === 'setMarkerCount') {
setLocalSearchResultCount(arg0);
} else if (msg.indexOf('markForDownload:') === 0) {
const s = msg.split(':');
if (s.length < 2) throw new Error(`Invalid message: ${msg}`);
ResourceFetcher.instance().markForDownload(s[1]);
} else if (msg === 'contextMenu') {
const itemType = arg0 && arg0.type;
const menu = new Menu();
if (itemType === 'image' || itemType === 'resource') {
const resource = await Resource.load(arg0.resourceId);
const resourcePath = Resource.fullPath(resource);
menu.append(
new MenuItem({
label: _('Open...'),
click: async () => {
const ok = bridge().openExternal(`file://${resourcePath}`);
if (!ok) bridge().showErrorMessageBox(_('This file could not be opened: %s', resourcePath));
},
})
);
menu.append(
new MenuItem({
label: _('Save as...'),
click: async () => {
const filePath = bridge().showSaveDialog({
defaultPath: resource.filename ? resource.filename : resource.title,
});
if (!filePath) return;
await fs.copy(resourcePath, filePath);
},
})
);
menu.append(
new MenuItem({
label: _('Copy path to clipboard'),
click: async () => {
clipboard.writeText(toSystemSlashes(resourcePath));
},
})
);
} else if (itemType === 'text') {
menu.append(
new MenuItem({
label: _('Copy'),
click: async () => {
clipboard.writeText(arg0.textToCopy);
},
})
);
} else if (itemType === 'link') {
menu.append(
new MenuItem({
label: _('Copy Link Address'),
click: async () => {
clipboard.writeText(arg0.textToCopy);
},
})
);
} else {
reg.logger().error(`Unhandled item type: ${itemType}`);
return;
}
menu.popup(bridge().window());
} else if (msg.indexOf('joplin://') === 0) {
const resourceUrlInfo = urlUtils.parseResourceUrl(msg);
const itemId = resourceUrlInfo.itemId;
const item = await BaseItem.loadItemById(itemId);
if (!item) throw new Error(`No item with ID ${itemId}`);
if (item.type_ === BaseModel.TYPE_RESOURCE) {
const localState = await Resource.localState(item);
if (localState.fetch_status !== Resource.FETCH_STATUS_DONE || !!item.encryption_blob_encrypted) {
if (localState.fetch_status === Resource.FETCH_STATUS_ERROR) {
bridge().showErrorMessageBox(`${_('There was an error downloading this attachment:')}\n\n${localState.fetch_error}`);
} else {
bridge().showErrorMessageBox(_('This attachment is not downloaded or not decrypted yet'));
}
return;
}
const filePath = Resource.fullPath(item);
bridge().openItem(filePath);
} else if (item.type_ === BaseModel.TYPE_NOTE) {
dispatch({
type: 'FOLDER_AND_NOTE_SELECT',
folderId: item.parent_id,
noteId: item.id,
hash: resourceUrlInfo.hash,
// historyNoteAction: {
// id: this.state.note.id,
// parent_id: this.state.note.parent_id,
// },
});
} else {
throw new Error(`Unsupported item type: ${item.type_}`);
}
} else if (urlUtils.urlProtocol(msg)) {
if (msg.indexOf('file://') === 0) {
// When using the file:// protocol, openExternal doesn't work (does nothing) with URL-encoded paths
require('electron').shell.openExternal(urlDecode(msg));
} else {
require('electron').shell.openExternal(msg);
}
} else if (msg.indexOf('#') === 0) {
// This is an internal anchor, which is handled by the WebView so skip this case
} else {
bridge().showErrorMessageBox(_('Unsupported link or message: %s', msg));
}
}, [dispatch, setLocalSearchResultCount, scrollWhenReady]);
}

92
ElectronClient/gui/NoteEditor/utils/useNoteSearchBar.ts Normal file
View File

@@ -0,0 +1,92 @@
import { useState, useCallback } from 'react';
import { SearchMarkers } from './useSearchMarkers';
interface LocalSearch {
query: string,
selectedIndex: number,
resultCount: number,
searching: boolean,
timestamp: number,
}
function defaultLocalSearch():LocalSearch {
return {
query: '',
selectedIndex: 0,
resultCount: 0,
searching: false,
timestamp: 0,
};
}
export default function useNoteSearchBar() {
const [showLocalSearch, setShowLocalSearch] = useState(false);
const [localSearch, setLocalSearch] = useState<LocalSearch>(defaultLocalSearch());
const onChange = useCallback((query:string) => {
setLocalSearch((prev:LocalSearch) => {
return {
query: query,
selectedIndex: 0,
timestamp: Date.now(),
resultCount: prev.resultCount,
searching: true,
};
});
}, []);
const noteSearchBarNextPrevious = useCallback((inc:number) => {
setLocalSearch((prev:LocalSearch) => {
const ls = Object.assign({}, prev);
ls.selectedIndex += inc;
ls.timestamp = Date.now();
if (ls.selectedIndex < 0) ls.selectedIndex = ls.resultCount - 1;
if (ls.selectedIndex >= ls.resultCount) ls.selectedIndex = 0;
return ls;
});
}, []);
const onNext = useCallback(() => {
noteSearchBarNextPrevious(+1);
}, [noteSearchBarNextPrevious]);
const onPrevious = useCallback(() => {
noteSearchBarNextPrevious(-1);
}, [noteSearchBarNextPrevious]);
const onClose = useCallback(() => {
setShowLocalSearch(false);
setLocalSearch(defaultLocalSearch());
}, []);
const setResultCount = useCallback((count:number) => {
setLocalSearch((prev:LocalSearch) => {
if (prev.resultCount === count && !prev.searching) return prev;
return {
...prev,
resultCount: count,
searching: false,
};
});
}, []);
const searchMarkers = useCallback(():SearchMarkers => {
return {
options: {
selectedIndex: localSearch.selectedIndex,
separateWordSearch: false,
searchTimestamp: localSearch.timestamp,
},
keywords: [
{
type: 'text',
value: localSearch.query,
accuracy: 'partially',
},
],
};
}, [localSearch]);
return { localSearch, onChange, onNext, onPrevious, onClose, setResultCount, showLocalSearch, setShowLocalSearch, searchMarkers };
}

48
ElectronClient/gui/NoteEditor/utils/useResourceRefresher.js Normal file
View File

@@ -0,0 +1,48 @@
'use strict';
const __awaiter = (this && this.__awaiter) || function(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function(resolve) { resolve(value); }); }
return new (P || (P = Promise))(function(resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator['throw'](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, '__esModule', { value: true });
const react_1 = require('react');
const resourceHandling_1 = require('./resourceHandling');
const ResourceFetcher = require('lib/services/ResourceFetcher.js');
const DecryptionWorker = require('lib/services/DecryptionWorker.js');
const Note = require('lib/models/Note');
function useResourceInfos(dependencies) {
const { noteBody } = dependencies;
const [resourceInfos, setResourceInfos] = react_1.useState({});
function installResourceHandling(refreshResourceHandler) {
ResourceFetcher.instance().on('downloadComplete', refreshResourceHandler);
ResourceFetcher.instance().on('downloadStarted', refreshResourceHandler);
DecryptionWorker.instance().on('resourceDecrypted', refreshResourceHandler);
}
function uninstallResourceHandling(refreshResourceHandler) {
ResourceFetcher.instance().off('downloadComplete', refreshResourceHandler);
ResourceFetcher.instance().off('downloadStarted', refreshResourceHandler);
DecryptionWorker.instance().off('resourceDecrypted', refreshResourceHandler);
}
const refreshResource = react_1.useCallback(function(event) {
return __awaiter(this, void 0, void 0, function* () {
const resourceIds = yield Note.linkedResourceIds(noteBody);
if (resourceIds.indexOf(event.id) >= 0) {
resourceHandling_1.clearResourceCache();
setResourceInfos(yield resourceHandling_1.attachedResources(noteBody));
}
});
}, [noteBody]);
react_1.useEffect(() => {
installResourceHandling(refreshResource);
return () => {
uninstallResourceHandling(refreshResource);
};
}, [refreshResource]);
return { resourceInfos };
}
exports.default = useResourceInfos;
// # sourceMappingURL=useResourceRefresher.js.map

42
ElectronClient/gui/NoteEditor/utils/useSearchMarkers.ts Normal file
View File

@@ -0,0 +1,42 @@
import { useMemo } from 'react';
const BaseModel = require('lib/BaseModel.js');
const SearchEngine = require('lib/services/SearchEngine');
interface SearchMarkersOptions {
searchTimestamp: number,
selectedIndex: number,
separateWordSearch: boolean,
}
export interface SearchMarkers {
keywords: any[],
options: SearchMarkersOptions,
}
function defaultSearchMarkers():SearchMarkers {
return {
keywords: [],
options: {
searchTimestamp: 0,
selectedIndex: 0,
separateWordSearch: false,
},
};
}
export default function useSearchMarkers(showLocalSearch:boolean, localSearchMarkerOptions:Function, searches:any[], selectedSearchId:string) {
return useMemo(():SearchMarkers => {
if (showLocalSearch) return localSearchMarkerOptions();
const output = defaultSearchMarkers();
const search = BaseModel.byId(searches, selectedSearchId);
if (search) {
const parsedQuery = SearchEngine.instance().parseQuery(search.query_pattern);
output.keywords = SearchEngine.instance().allParsedQueryTerms(parsedQuery);
}
return output;
}, [showLocalSearch, localSearchMarkerOptions, searches, selectedSearchId]);
}

104
ElectronClient/gui/NoteEditor/utils/useWindowCommandHandler.ts Normal file
View File

@@ -0,0 +1,104 @@
import { useEffect } from 'react';
import { FormNote, EditorCommand } from './types';
const { time } = require('lib/time-utils.js');
const { reg } = require('lib/registry.js');
const NoteListUtils = require('../../utils/NoteListUtils');
interface HookDependencies {
windowCommand: any,
formNote:FormNote,
setShowLocalSearch:Function,
dispatch:Function,
noteSearchBarRef:any,
editorRef:any,
titleInputRef:any,
saveNoteAndWait: Function,
}
export default function useWindowCommandHandler(dependencies:HookDependencies) {
const { windowCommand, dispatch, formNote, setShowLocalSearch, noteSearchBarRef, editorRef, titleInputRef, saveNoteAndWait } = dependencies;
useEffect(() => {
async function processCommand() {
const command = windowCommand;
if (!command || !formNote) return;
reg.logger().debug('NoteEditor::useWindowCommandHandler:', command);
const editorCmd: EditorCommand = { name: '', value: command.value };
let fn: Function = null;
// These commands can be forwarded directly to the note body editor
// without transformation.
const directMapCommands = [
'textCode',
'textBold',
'textItalic',
'textLink',
'attachFile',
'textNumberedList',
'textBulletedList',
'textCheckbox',
'textHeading',
'textHorizontalRule',
];
if (directMapCommands.includes(command.name)) {
editorCmd.name = command.name;
} else if (command.name === 'commandStartExternalEditing') {
fn = async () => {
await saveNoteAndWait(formNote);
NoteListUtils.startExternalEditing(formNote.id);
};
} else if (command.name === 'commandStopExternalEditing') {
fn = () => {
NoteListUtils.stopExternalEditing(formNote.id);
};
} else if (command.name === 'insertDateTime') {
editorCmd.name = 'insertText',
editorCmd.value = time.formatMsToLocal(new Date().getTime());
} else if (command.name === 'showLocalSearch') {
setShowLocalSearch(true);
if (noteSearchBarRef.current) noteSearchBarRef.current.wrappedInstance.focus();
} else if (command.name === 'insertTemplate') {
editorCmd.name = 'insertText',
editorCmd.value = time.formatMsToLocal(new Date().getTime());
}
if (command.name === 'focusElement' && command.target === 'noteTitle') {
fn = () => {
if (!titleInputRef.current) return;
titleInputRef.current.focus();
};
}
if (command.name === 'focusElement' && command.target === 'noteBody') {
editorCmd.name = 'focus';
}
reg.logger().debug('NoteEditor::useWindowCommandHandler: Dispatch:', editorCmd, fn);
if (!editorCmd.name && !fn) return;
dispatch({
type: 'WINDOW_COMMAND',
name: null,
});
requestAnimationFrame(() => {
if (fn) {
fn();
} else {
if (!editorRef.current.execCommand) {
reg.logger().warn('Received command, but editor cannot execute commands', editorCmd);
} else {
editorRef.current.execCommand(editorCmd);
}
}
});
}
processCommand();
}, [windowCommand, dispatch, formNote, saveNoteAndWait]);
}

2
ElectronClient/gui/NoteList.jsx
View File

@@ -145,7 +145,7 @@ class NoteListComponent extends React.Component {
todo_completed: checked ? time.unixMs() : 0,
};
await Note.save(newNote, { userSideValidation: true });
eventManager.emit('todoToggle', { noteId: item.id });
eventManager.emit('todoToggle', { noteId: item.id, note: newNote });
};
const hPadding = 10;

116
ElectronClient/gui/NoteText.jsx
View File

@@ -10,6 +10,7 @@ const InteropServiceHelper = require('../InteropServiceHelper.js');
const { IconButton } = require('./IconButton.min.js');
const { urlDecode, substrWithEllipsis } = require('lib/string-utils');
const Toolbar = require('./Toolbar.min.js');
const NoteToolbar = require('./NoteToolbar/NoteToolbar.js').default;
const TagList = require('./TagList.min.js');
const { connect } = require('react-redux');
const { _ } = require('lib/locale.js');
@@ -346,6 +347,36 @@ class NoteTextComponent extends React.Component {
this.webview_ipcMessage = this.webview_ipcMessage.bind(this);
this.webview_domReady = this.webview_domReady.bind(this);
this.noteRevisionViewer_onBack = this.noteRevisionViewer_onBack.bind(this);
this.noteToolbar_buttonClick = this.noteToolbar_buttonClick.bind(this);
}
noteToolbar_buttonClick(event) {
const cases = {
'startExternalEditing': () => {
this.commandStartExternalEditing();
},
'stopExternalEditing': () => {
this.commandStopExternalEditing();
},
'setTags': () => {
this.commandSetTags();
},
'setAlarm': () => {
this.commandSetAlarm();
},
'showRevisions': () => {
this.setState({ showRevisions: true });
},
};
if (!cases[event.name]) throw new Error(`Unsupported event: ${event.name}`);
cases[event.name]();
}
// Note:
@@ -1831,79 +1862,6 @@ class NoteTextComponent extends React.Component {
});
}
if (note && this.props.watchedNoteFiles.indexOf(note.id) >= 0) {
toolbarItems.push({
tooltip: _('Click to stop external editing'),
title: _('Watching...'),
iconName: 'fa-external-link',
onClick: () => {
return this.commandStopExternalEditing();
},
});
} else {
toolbarItems.push({
tooltip: _('Edit in external editor'),
iconName: 'fa-external-link',
onClick: () => {
return this.commandStartExternalEditing();
},
});
}
toolbarItems.push({
tooltip: _('Tags'),
iconName: 'fa-tags',
onClick: () => {
return this.commandSetTags();
},
});
if (note.is_todo) {
const item = {
iconName: 'fa-clock-o',
enabled: !note.todo_completed,
onClick: () => {
return this.commandSetAlarm();
},
};
if (Note.needAlarm(note)) {
item.title = time.formatMsToLocal(note.todo_due);
} else {
item.tooltip = _('Set alarm');
}
toolbarItems.push(item);
}
toolbarItems.push({
tooltip: _('Note properties'),
iconName: 'fa-info-circle',
onClick: () => {
const n = this.state.note;
if (!n || !n.id) return;
this.props.dispatch({
type: 'WINDOW_COMMAND',
name: 'commandNoteProperties',
noteId: n.id,
onRevisionLinkClick: () => {
this.setState({ showRevisions: true });
},
});
},
});
toolbarItems.push({
tooltip: _('Content Properties'),
iconName: 'fa-sticky-note',
onClick: () => {
this.props.dispatch({
type: 'WINDOW_COMMAND',
name: 'commandContentProperties',
text: this.state.note.body,
});
},
});
return toolbarItems;
}
@@ -2273,7 +2231,17 @@ class NoteTextComponent extends React.Component {
{titleBarDate}
{false ? titleBarMenuButton : null}
</div>
{toolbar}
<div style={{ display: 'flex', flex: 1, flexDirection: 'row' }}>
{toolbar}
<NoteToolbar
theme={this.props.theme}
note={note}
dispatch={this.props.dispatch}
style={toolbarStyle}
watchedNoteFiles={[]}
onButtonClick={this.noteToolbar_buttonClick}
/>
</div>
{tagList}
{editor}
{viewer}

833
ElectronClient/gui/NoteText2.tsx
View File

@@ -1,833 +0,0 @@
import * as React from 'react';
import { useState, useEffect, useCallback, useRef } from 'react';
// eslint-disable-next-line no-unused-vars
import TinyMCE, { utils as tinyMceUtils } from './editors/TinyMCE';
import PlainEditor, { utils as plainEditorUtils } from './editors/PlainEditor';
import { connect } from 'react-redux';
import AsyncActionQueue from '../lib/AsyncActionQueue';
import MultiNoteActions from './MultiNoteActions';
// eslint-disable-next-line no-unused-vars
import { DefaultEditorState, OnChangeEvent, TextEditorUtils, EditorCommand } from './utils/NoteText';
const { themeStyle, buildStyle } = require('../theme.js');
const { reg } = require('lib/registry.js');
const { time } = require('lib/time-utils.js');
const markupLanguageUtils = require('lib/markupLanguageUtils');
const HtmlToHtml = require('lib/joplin-renderer/HtmlToHtml');
const Setting = require('lib/models/Setting');
const BaseItem = require('lib/models/BaseItem');
const { MarkupToHtml } = require('lib/joplin-renderer');
const HtmlToMd = require('lib/HtmlToMd');
const { _ } = require('lib/locale');
const Note = require('lib/models/Note.js');
const BaseModel = require('lib/BaseModel.js');
const Resource = require('lib/models/Resource.js');
const { shim } = require('lib/shim');
const TemplateUtils = require('lib/TemplateUtils');
const { bridge } = require('electron').remote.require('./bridge');
const { urlDecode } = require('lib/string-utils');
const urlUtils = require('lib/urlUtils');
const ResourceFetcher = require('lib/services/ResourceFetcher.js');
const DecryptionWorker = require('lib/services/DecryptionWorker.js');
interface NoteTextProps {
style: any,
noteId: string,
theme: number,
dispatch: Function,
selectedNoteIds: string[],
notes:any[],
watchedNoteFiles:string[],
isProvisional: boolean,
editorNoteStatuses: any,
syncStarted: boolean,
editor: string,
windowCommand: any,
}
interface FormNote {
id: string,
title: string,
parent_id: string,
is_todo: number,
bodyEditorContent?: any,
markup_language: number,
hasChanged: boolean,
// Getting the content from the editor can be a slow process because that content
// might need to be serialized first. For that reason, the wrapped editor (eg TinyMCE)
// first emits onWillChange when there is a change. That event does not include the
// editor content. After a few milliseconds (eg if the user stops typing for long
// enough), the editor emits onChange, and that event will include the editor content.
//
// Both onWillChange and onChange events include a changeId property which is used
// to link the two events together. It is used for example to detect if a new note
// was loaded before the current note was saved - in that case the changeId will be
// different. The two properties bodyWillChangeId and bodyChangeId are used to save
// this info with the currently loaded note.
//
// The willChange/onChange events also allow us to handle the case where the user
// types something then quickly switch a different note. In that case, bodyWillChangeId
// is set, thus we know we should save the note, even though we won't receive the
// onChange event.
bodyWillChangeId: number
bodyChangeId: number,
saveActionQueue: AsyncActionQueue,
// Note with markup_language = HTML have a block of CSS at the start, which is used
// to preserve the style from the original (web-clipped) page. When sending the note
// content to TinyMCE, we only send the actual HTML, without this CSS. The CSS is passed
// via a file in pluginAssets. This is because TinyMCE would not render the style otherwise.
// However, when we get back the HTML from TinyMCE, we need to reconstruct the original note.
// Since the CSS used by TinyMCE has been lost (since it's in a temp CSS file), we keep that
// original CSS here. It's used in formNoteToNote to rebuild the note body.
// We can keep it here because we know TinyMCE will not modify it anyway.
originalCss: string,
}
const defaultNote = ():FormNote => {
return {
id: '',
parent_id: '',
title: '',
is_todo: 0,
markup_language: 1,
bodyWillChangeId: 0,
bodyChangeId: 0,
saveActionQueue: null,
originalCss: '',
hasChanged: false,
};
};
function styles_(props:NoteTextProps) {
return buildStyle('NoteText', props.theme, (theme:any) => {
return {
titleInput: {
flex: 1,
display: 'inline-block',
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 8,
paddingRight: 8,
marginRight: theme.paddingLeft,
color: theme.textStyle.color,
fontSize: theme.textStyle.fontSize * 1.25 * 1.5,
backgroundColor: theme.backgroundColor,
border: '1px solid',
borderColor: theme.dividerColor,
},
warningBanner: {
background: theme.warningBackgroundColor,
fontFamily: theme.fontFamily,
padding: 10,
fontSize: theme.fontSize,
},
tinyMCE: {
width: '100%',
height: '100%',
},
};
});
}
let textEditorUtils_:TextEditorUtils = null;
function usePrevious(value:any):any {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
async function initNoteState(n:any, setFormNote:Function, setDefaultEditorState:Function) {
let originalCss = '';
if (n.markup_language === MarkupToHtml.MARKUP_LANGUAGE_HTML) {
const htmlToHtml = new HtmlToHtml();
const splitted = htmlToHtml.splitHtml(n.body);
originalCss = splitted.css;
}
setFormNote({
id: n.id,
title: n.title,
is_todo: n.is_todo,
parent_id: n.parent_id,
bodyWillChangeId: 0,
bodyChangeId: 0,
markup_language: n.markup_language,
saveActionQueue: new AsyncActionQueue(1000),
originalCss: originalCss,
hasChanged: false,
});
setDefaultEditorState({
value: n.body,
markupLanguage: n.markup_language,
resourceInfos: await attachedResources(n.body),
});
await handleResourceDownloadMode(n.body);
}
async function handleResourceDownloadMode(noteBody:string) {
if (noteBody && Setting.value('sync.resourceDownloadMode') === 'auto') {
const resourceIds = await Note.linkedResourceIds(noteBody);
await ResourceFetcher.instance().markForDownload(resourceIds);
}
}
async function htmlToMarkdown(html:string):Promise<string> {
const htmlToMd = new HtmlToMd();
let md = htmlToMd.parse(html, { preserveImageTagsWithSize: true });
md = await Note.replaceResourceExternalToInternalLinks(md, { useAbsolutePaths: true });
return md;
}
async function formNoteToNote(formNote:FormNote):Promise<any> {
const newNote:any = Object.assign({}, formNote);
if ('bodyEditorContent' in formNote) {
const html = await textEditorUtils_.editorContentToHtml(formNote.bodyEditorContent);
if (formNote.markup_language === MarkupToHtml.MARKUP_LANGUAGE_MARKDOWN) {
newNote.body = await htmlToMarkdown(html);
} else {
newNote.body = html;
newNote.body = await Note.replaceResourceExternalToInternalLinks(newNote.body, { useAbsolutePaths: true });
if (formNote.originalCss) newNote.body = `<style>${formNote.originalCss}</style>\n${newNote.body}`;
}
}
delete newNote.bodyEditorContent;
return newNote;
}
let resourceCache_:any = {};
function clearResourceCache() {
resourceCache_ = {};
}
async function attachedResources(noteBody:string):Promise<any> {
if (!noteBody) return {};
const resourceIds = await Note.linkedItemIdsByType(BaseModel.TYPE_RESOURCE, noteBody);
const output:any = {};
for (let i = 0; i < resourceIds.length; i++) {
const id = resourceIds[i];
if (resourceCache_[id]) {
output[id] = resourceCache_[id];
} else {
const resource = await Resource.load(id);
const localState = await Resource.localState(resource);
const o = {
item: resource,
localState: localState,
};
// eslint-disable-next-line require-atomic-updates
resourceCache_[id] = o;
output[id] = o;
}
}
return output;
}
function installResourceHandling(refreshResourceHandler:Function) {
ResourceFetcher.instance().on('downloadComplete', refreshResourceHandler);
ResourceFetcher.instance().on('downloadStarted', refreshResourceHandler);
DecryptionWorker.instance().on('resourceDecrypted', refreshResourceHandler);
}
function uninstallResourceHandling(refreshResourceHandler:Function) {
ResourceFetcher.instance().off('downloadComplete', refreshResourceHandler);
ResourceFetcher.instance().off('downloadStarted', refreshResourceHandler);
DecryptionWorker.instance().off('resourceDecrypted', refreshResourceHandler);
}
async function attachResources() {
const filePaths = bridge().showOpenDialog({
properties: ['openFile', 'createDirectory', 'multiSelections'],
});
if (!filePaths || !filePaths.length) return [];
const output = [];
for (const filePath of filePaths) {
try {
const resource = await shim.createResourceFromPath(filePath);
output.push({
item: resource,
markdownTag: Resource.markdownTag(resource),
});
} catch (error) {
bridge().showErrorMessageBox(error.message);
}
}
return output;
}
function scheduleSaveNote(formNote:FormNote, dispatch:Function) {
if (!formNote.saveActionQueue) throw new Error('saveActionQueue is not set!!'); // Sanity check
reg.logger().debug('Scheduling...', formNote);
const makeAction = (formNote:FormNote) => {
return async function() {
const note = await formNoteToNote(formNote);
reg.logger().debug('Saving note...', note);
await Note.save(note);
dispatch({
type: 'EDITOR_NOTE_STATUS_REMOVE',
id: formNote.id,
});
};
};
formNote.saveActionQueue.push(makeAction(formNote));
}
function saveNoteIfWillChange(formNote:FormNote, editorRef:any, dispatch:Function) {
if (!formNote.id || !formNote.bodyWillChangeId) return;
scheduleSaveNote({
...formNote,
bodyEditorContent: editorRef.current.content(),
bodyWillChangeId: 0,
bodyChangeId: 0,
}, dispatch);
}
function useWindowCommand(windowCommand:any, dispatch:Function, formNote:FormNote, titleInputRef:React.MutableRefObject<any>, editorRef:React.MutableRefObject<any>) {
useEffect(() => {
const command = windowCommand;
if (!command || !formNote) return;
const editorCmd:EditorCommand = { name: command.name, value: { ...command.value } };
let fn:Function = null;
if (command.name === 'exportPdf') {
// TODO
} else if (command.name === 'print') {
// TODO
} else if (command.name === 'insertDateTime') {
editorCmd.name = 'insertText',
editorCmd.value = time.formatMsToLocal(new Date().getTime());
} else if (command.name === 'commandStartExternalEditing') {
// TODO
} else if (command.name === 'commandStopExternalEditing') {
// TODO
} else if (command.name === 'showLocalSearch') {
editorCmd.name = 'search';
} else if (command.name === 'textCode') {
// TODO
} else if (command.name === 'insertTemplate') {
editorCmd.name = 'insertText',
editorCmd.value = TemplateUtils.render(command.value);
}
if (command.name === 'focusElement' && command.target === 'noteTitle') {
fn = () => {
if (!titleInputRef.current) return;
titleInputRef.current.focus();
};
}
if (command.name === 'focusElement' && command.target === 'noteBody') {
editorCmd.name = 'focus';
}
if (!editorCmd.name && !fn) return;
dispatch({
type: 'WINDOW_COMMAND',
name: null,
});
requestAnimationFrame(() => {
if (fn) {
fn();
} else {
if (!editorRef.current.execCommand) {
reg.logger().warn('Received command, but editor cannot execute commands', editorCmd);
} else {
editorRef.current.execCommand(editorCmd);
}
}
});
}, [windowCommand, dispatch, formNote]);
}
function NoteText2(props:NoteTextProps) {
const [formNote, setFormNote] = useState<FormNote>(defaultNote());
const [defaultEditorState, setDefaultEditorState] = useState<DefaultEditorState>({ value: '', markupLanguage: MarkupToHtml.MARKUP_LANGUAGE_MARKDOWN, resourceInfos: {} });
const prevSyncStarted = usePrevious(props.syncStarted);
const editorRef = useRef<any>();
const titleInputRef = useRef<any>();
const formNoteRef = useRef<FormNote>();
formNoteRef.current = { ...formNote };
const isMountedRef = useRef(true);
useWindowCommand(props.windowCommand, props.dispatch, formNote, titleInputRef, editorRef);
// If the note has been modified in another editor, wait for it to be saved
// before loading it in this editor.
const waitingToSaveNote = props.noteId && formNote.id !== props.noteId && props.editorNoteStatuses[props.noteId] === 'saving';
const styles = styles_(props);
const markupToHtml = useCallback(async (markupLanguage:number, md:string, options:any = null):Promise<any> => {
md = md || '';
const theme = themeStyle(props.theme);
md = await Note.replaceResourceInternalToExternalLinks(md, { useAbsolutePaths: true });
const markupToHtml = markupLanguageUtils.newMarkupToHtml({
resourceBaseUrl: `file://${Setting.value('resourceDir')}/`,
});
const result = await markupToHtml.render(markupLanguage, md, theme, Object.assign({}, {
codeTheme: theme.codeThemeCss,
// userCss: this.props.customCss ? this.props.customCss : '',
// resources: await shared.attachedResources(noteBody),
resources: [],
postMessageSyntax: 'ipcProxySendToHost',
splitted: true,
externalAssetsOnly: true,
}, options));
return result;
}, [props.theme]);
const allAssets = useCallback(async (markupLanguage:number):Promise<any[]> => {
const theme = themeStyle(props.theme);
const markupToHtml = markupLanguageUtils.newMarkupToHtml({
resourceBaseUrl: `file://${Setting.value('resourceDir')}/`,
});
return markupToHtml.allAssets(markupLanguage, theme);
}, [props.theme]);
const joplinHtml = useCallback(async (type:string) => {
if (type === 'checkbox') {
const result = await markupToHtml(MarkupToHtml.MARKUP_LANGUAGE_MARKDOWN, '- [ ] xxxxxREMOVExxxxx', {
bodyOnly: true,
externalAssetsOnly: true,
});
const html = result.html
.replace(/xxxxxREMOVExxxxx/m, ' ')
.replace(/<ul.*?>/, '')
.replace(/<\/ul>/, '');
return { ...result, html: html };
}
throw new Error(`Invalid type:${type}`);
}, [markupToHtml]);
const handleProvisionalFlag = useCallback(() => {
if (props.isProvisional) {
props.dispatch({
type: 'NOTE_PROVISIONAL_FLAG_CLEAR',
id: formNote.id,
});
}
}, [props.isProvisional, formNote.id]);
const refreshResource = useCallback(async function(event) {
if (!defaultEditorState.value) return;
const resourceIds = await Note.linkedResourceIds(defaultEditorState.value);
if (resourceIds.indexOf(event.id) >= 0) {
clearResourceCache();
const e = {
...defaultEditorState,
resourceInfos: await attachedResources(defaultEditorState.value),
};
setDefaultEditorState(e);
}
}, [defaultEditorState]);
useEffect(() => {
installResourceHandling(refreshResource);
return () => {
uninstallResourceHandling(refreshResource);
};
}, [defaultEditorState]);
useEffect(() => {
// This is not exactly a hack but a bit ugly. If the note was changed (willChangeId > 0) but not
// yet saved, we need to save it now before the component is unmounted. However, we can't put
// formNote in the dependency array or that effect will run every time the note changes. We only
// want to run it once on unmount. So because of that we need to use that formNoteRef.
return () => {
isMountedRef.current = false;
saveNoteIfWillChange(formNoteRef.current, editorRef, props.dispatch);
};
}, []);
useEffect(() => {
// Check that synchronisation has just finished - and
// if the note has never been changed, we reload it.
// If the note has already been changed, it's a conflict
// that's already been handled by the synchronizer.
if (!prevSyncStarted) return () => {};
if (props.syncStarted) return () => {};
if (formNote.hasChanged) return () => {};
reg.logger().debug('Sync has finished and note has never been changed - reloading it');
let cancelled = false;
const loadNote = async () => {
const n = await Note.load(props.noteId);
if (cancelled) return;
// Normally should not happened because if the note has been deleted via sync
// it would not have been loaded in the editor (due to note selection changing
// on delete)
if (!n) {
reg.logger().warn('Trying to reload note that has been deleted:', props.noteId);
return;
}
await initNoteState(n, setFormNote, setDefaultEditorState);
};
loadNote();
return () => {
cancelled = true;
};
}, [prevSyncStarted, props.syncStarted, formNote]);
useEffect(() => {
if (!props.noteId) return () => {};
if (formNote.id === props.noteId) return () => {};
if (waitingToSaveNote) return () => {};
let cancelled = false;
reg.logger().debug('Loading existing note', props.noteId);
saveNoteIfWillChange(formNote, editorRef, props.dispatch);
function handleAutoFocus(noteIsTodo:boolean) {
if (!props.isProvisional) return;
const focusSettingName = noteIsTodo ? 'newTodoFocus' : 'newNoteFocus';
requestAnimationFrame(() => {
if (Setting.value(focusSettingName) === 'title') {
if (titleInputRef.current) titleInputRef.current.focus();
} else {
if (editorRef.current) editorRef.current.execCommand({ name: 'focus' });
}
});
}
async function loadNote() {
const n = await Note.load(props.noteId);
if (cancelled) return;
if (!n) throw new Error(`Cannot find note with ID: ${props.noteId}`);
reg.logger().debug('Loaded note:', n);
await initNoteState(n, setFormNote, setDefaultEditorState);
handleAutoFocus(!!n.is_todo);
}
loadNote();
return () => {
cancelled = true;
};
}, [props.noteId, props.isProvisional, formNote, waitingToSaveNote]);
const onFieldChange = useCallback((field:string, value:any, changeId: number = 0) => {
if (!isMountedRef.current) {
// When the component is unmounted, various actions can happen which can
// trigger onChange events, for example the textarea might be cleared.
// We need to ignore these events, otherwise the note is going to be saved
// with an invalid body.
reg.logger().debug('Skipping change event because the component is unmounted');
return;
}
handleProvisionalFlag();
const change = field === 'body' ? {
bodyEditorContent: value,
} : {
title: value,
};
const newNote = {
...formNote,
...change,
bodyWillChangeId: 0,
bodyChangeId: 0,
hasChanged: true,
};
if (changeId !== null && field === 'body' && formNote.bodyWillChangeId !== changeId) {
// Note was changed, but another note was loaded before save - skipping
// The previously loaded note, that was modified, will be saved via saveNoteIfWillChange()
} else {
setFormNote(newNote);
scheduleSaveNote(newNote, props.dispatch);
}
}, [handleProvisionalFlag, formNote]);
const onBodyChange = useCallback((event:OnChangeEvent) => onFieldChange('body', event.content, event.changeId), [onFieldChange]);
const onTitleChange = useCallback((event:any) => onFieldChange('title', event.target.value), [onFieldChange]);
const onBodyWillChange = useCallback((event:any) => {
handleProvisionalFlag();
setFormNote(prev => {
return {
...prev,
bodyWillChangeId: event.changeId,
hasChanged: true,
};
});
props.dispatch({
type: 'EDITOR_NOTE_STATUS_SET',
id: formNote.id,
status: 'saving',
});
}, [formNote, handleProvisionalFlag]);
const onMessage = useCallback(async (event:any) => {
const msg = event.name;
const args = event.args;
console.info('onMessage', msg, args);
if (msg === 'setMarkerCount') {
// const ls = Object.assign({}, this.state.localSearch);
// ls.resultCount = arg0;
// ls.searching = false;
// this.setState({ localSearch: ls });
} else if (msg.indexOf('markForDownload:') === 0) {
// const s = msg.split(':');
// if (s.length < 2) throw new Error(`Invalid message: ${msg}`);
// ResourceFetcher.instance().markForDownload(s[1]);
} else if (msg === 'percentScroll') {
// this.ignoreNextEditorScroll_ = true;
// this.setEditorPercentScroll(arg0);
} else if (msg === 'contextMenu') {
// const itemType = arg0 && arg0.type;
// const menu = new Menu();
// if (itemType === 'image' || itemType === 'resource') {
// const resource = await Resource.load(arg0.resourceId);
// const resourcePath = Resource.fullPath(resource);
// menu.append(
// new MenuItem({
// label: _('Open...'),
// click: async () => {
// const ok = bridge().openExternal(`file://${resourcePath}`);
// if (!ok) bridge().showErrorMessageBox(_('This file could not be opened: %s', resourcePath));
// },
// })
// );
// menu.append(
// new MenuItem({
// label: _('Save as...'),
// click: async () => {
// const filePath = bridge().showSaveDialog({
// defaultPath: resource.filename ? resource.filename : resource.title,
// });
// if (!filePath) return;
// await fs.copy(resourcePath, filePath);
// },
// })
// );
// menu.append(
// new MenuItem({
// label: _('Copy path to clipboard'),
// click: async () => {
// clipboard.writeText(toSystemSlashes(resourcePath));
// },
// })
// );
// } else if (itemType === 'text') {
// menu.append(
// new MenuItem({
// label: _('Copy'),
// click: async () => {
// clipboard.writeText(arg0.textToCopy);
// },
// })
// );
// } else if (itemType === 'link') {
// menu.append(
// new MenuItem({
// label: _('Copy Link Address'),
// click: async () => {
// clipboard.writeText(arg0.textToCopy);
// },
// })
// );
// } else {
// reg.logger().error(`Unhandled item type: ${itemType}`);
// return;
// }
// menu.popup(bridge().window());
} else if (msg === 'openInternal') {
const resourceUrlInfo = urlUtils.parseResourceUrl(args.url);
const itemId = resourceUrlInfo.itemId;
const item = await BaseItem.loadItemById(itemId);
if (!item) throw new Error(`No item with ID ${itemId}`);
if (item.type_ === BaseModel.TYPE_RESOURCE) {
const localState = await Resource.localState(item);
if (localState.fetch_status !== Resource.FETCH_STATUS_DONE || !!item.encryption_blob_encrypted) {
if (localState.fetch_status === Resource.FETCH_STATUS_ERROR) {
bridge().showErrorMessageBox(`${_('There was an error downloading this attachment:')}\n\n${localState.fetch_error}`);
} else {
bridge().showErrorMessageBox(_('This attachment is not downloaded or not decrypted yet'));
}
return;
}
const filePath = Resource.fullPath(item);
bridge().openItem(filePath);
} else if (item.type_ === BaseModel.TYPE_NOTE) {
props.dispatch({
type: 'FOLDER_AND_NOTE_SELECT',
folderId: item.parent_id,
noteId: item.id,
hash: resourceUrlInfo.hash,
historyAction: 'goto',
});
} else {
throw new Error(`Unsupported item type: ${item.type_}`);
}
} else if (msg.indexOf('#') === 0) {
// This is an internal anchor, which is handled by the WebView so skip this case
} else if (msg === 'openExternal') {
if (args.url.indexOf('file://') === 0) {
// When using the file:// protocol, openExternal doesn't work (does nothing) with URL-encoded paths
bridge().openExternal(urlDecode(args.url));
} else {
bridge().openExternal(args.url);
}
} else {
bridge().showErrorMessageBox(_('Unsupported link or message: %s', msg));
}
}, []);
const introductionPostLinkClick = useCallback(() => {
bridge().openExternal('https://www.patreon.com/posts/34246624');
}, []);
if (props.selectedNoteIds.length > 1) {
return <MultiNoteActions
theme={props.theme}
selectedNoteIds={props.selectedNoteIds}
notes={props.notes}
dispatch={props.dispatch}
watchedNoteFiles={props.watchedNoteFiles}
style={props.style}
/>;
}
const editorProps = {
ref: editorRef,
style: styles.tinyMCE,
onChange: onBodyChange,
onWillChange: onBodyWillChange,
onMessage: onMessage,
defaultEditorState: defaultEditorState,
markupToHtml: markupToHtml,
allAssets: allAssets,
attachResources: attachResources,
disabled: waitingToSaveNote,
joplinHtml: joplinHtml,
theme: props.theme,
};
let editor = null;
if (props.editor === 'TinyMCE') {
editor = <TinyMCE {...editorProps}/>;
textEditorUtils_ = tinyMceUtils;
} else if (props.editor === 'PlainEditor') {
editor = <PlainEditor {...editorProps}/>;
textEditorUtils_ = plainEditorUtils;
} else {
throw new Error(`Invalid editor: ${props.editor}`);
}
return (
<div style={props.style}>
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
<div style={styles.warningBanner}>
This is an experimental WYSIWYG editor for evaluation only. Please do not use with important notes as you may lose some data! See the <a style={styles.urlColor} onClick={introductionPostLinkClick} href="#">introduction post</a> for more information.
</div>
<div style={{ display: 'flex' }}>
<input
type="text"
ref={titleInputRef}
disabled={waitingToSaveNote}
placeholder={props.isProvisional ? _('Creating new %s...', formNote.is_todo ? _('to-do') : _('note')) : ''}
style={styles.titleInput}
onChange={onTitleChange}
value={formNote.title}
/>
</div>
<div style={{ display: 'flex', flex: 1 }}>
{editor}
</div>
</div>
</div>
);
}
export {
NoteText2 as NoteText2Component,
};
const mapStateToProps = (state:any) => {
const noteId = state.selectedNoteIds.length === 1 ? state.selectedNoteIds[0] : null;
return {
noteId: noteId,
notes: state.notes,
selectedNoteIds: state.selectedNoteIds,
isProvisional: state.provisionalNoteIds.includes(noteId),
editorNoteStatuses: state.editorNoteStatuses,
syncStarted: state.syncStarted,
theme: state.settings.theme,
watchedNoteFiles: state.watchedNoteFiles,
windowCommand: state.windowCommand,
};
};
export default connect(mapStateToProps)(NoteText2);

2
ElectronClient/gui/NoteTextViewer.jsx
View File

@@ -162,7 +162,7 @@ class NoteTextViewerComponent extends React.Component {
// ----------------------------------------------------------------
render() {
const viewerStyle = Object.assign({}, this.props.viewerStyle, { borderTop: 'none', borderRight: 'none', borderBottom: 'none' });
const viewerStyle = Object.assign({}, { border: 'none' }, this.props.viewerStyle);
return <iframe className="noteTextViewer" ref={this.webviewRef_} style={viewerStyle} src="gui/note-viewer/index.html"></iframe>;
}
}

148
ElectronClient/gui/NoteToolbar/NoteToolbar.tsx Normal file
View File

@@ -0,0 +1,148 @@
import * as React from 'react';
const { buildStyle } = require('../../theme.js');
const Toolbar = require('../Toolbar.min.js');
const Note = require('lib/models/Note');
const { time } = require('lib/time-utils.js');
const { _ } = require('lib/locale');
// const { substrWithEllipsis } = require('lib/string-utils');
// const Folder = require('lib/models/Folder');
// const { MarkupToHtml } = require('lib/joplin-renderer');
interface ButtonClickEvent {
name: string,
}
interface NoteToolbarProps {
theme: number,
style: any,
watchedNoteFiles: string[],
note: any,
dispatch: Function,
onButtonClick(event:ButtonClickEvent):void,
}
function styles_(props:NoteToolbarProps) {
return buildStyle('NoteToolbar', props.theme, (/* theme:any*/) => {
return {
root: {
...props.style,
},
};
});
}
function useToolbarItems(note:any, watchedNoteFiles:string[], dispatch:Function, onButtonClick:Function) {
const toolbarItems = [];
// TODO: add these two items
// if (props.folder && ['Search', 'Tag', 'SmartFilter'].includes(props.notesParentType)) {
// toolbarItems.push({
// title: _('In: %s', substrWithEllipsis(props.folder.title, 0, 16)),
// iconName: 'fa-book',
// onClick: () => {
// props.dispatch({
// type: 'FOLDER_AND_NOTE_SELECT',
// folderId: props.folder.id,
// noteId: props.formNote.id,
// });
// Folder.expandTree(props.folders, props.folder.parent_id);
// },
// });
// }
// if (props.historyNotes.length) {
// toolbarItems.push({
// tooltip: _('Back'),
// iconName: 'fa-arrow-left',
// onClick: () => {
// if (!props.historyNotes.length) return;
// const lastItem = props.historyNotes[props.historyNotes.length - 1];
// props.dispatch({
// type: 'FOLDER_AND_NOTE_SELECT',
// folderId: lastItem.parent_id,
// noteId: lastItem.id,
// historyNoteAction: 'pop',
// });
// },
// });
// }
if (watchedNoteFiles.indexOf(note.id) >= 0) {
toolbarItems.push({
tooltip: _('Click to stop external editing'),
title: _('Watching...'),
iconName: 'fa-external-link',
onClick: () => {
onButtonClick({ name: 'stopExternalEditing' });
},
});
} else {
toolbarItems.push({
tooltip: _('Edit in external editor'),
iconName: 'fa-external-link',
onClick: () => {
onButtonClick({ name: 'startExternalEditing' });
},
});
}
toolbarItems.push({
tooltip: _('Tags'),
iconName: 'fa-tags',
onClick: () => {
onButtonClick({ name: 'setTags' });
},
});
if (note.is_todo) {
const item:any = {
iconName: 'fa-clock-o',
enabled: !note.todo_completed,
onClick: () => {
onButtonClick({ name: 'setAlarm' });
},
};
if (Note.needAlarm(note)) {
item.title = time.formatMsToLocal(note.todo_due);
} else {
item.tooltip = _('Set alarm');
}
toolbarItems.push(item);
}
toolbarItems.push({
tooltip: _('Note properties'),
iconName: 'fa-info-circle',
onClick: () => {
dispatch({
type: 'WINDOW_COMMAND',
name: 'commandNoteProperties',
noteId: note.id,
onRevisionLinkClick: () => {
onButtonClick({ name: 'showRevisions' });
},
});
},
});
return toolbarItems;
}
export default function NoteToolbar(props:NoteToolbarProps) {
const styles = styles_(props);
const toolbarItems = useToolbarItems(props.note, props.watchedNoteFiles, props.dispatch, props.onButtonClick);
return (
<Toolbar style={styles.root} items={toolbarItems} />
);
}

3
ElectronClient/gui/ResourceScreen.tsx
View File

@@ -69,8 +69,9 @@ const ResourceTable: React.FC<ResourceTable> = (props: ResourceTable) => {
};
const cellStyle = {
...props.theme.textStyleMinor,
...props.theme.textStyle,
whiteSpace: 'nowrap',
color: props.theme.colorFaded,
width: 1,
};

3
ElectronClient/gui/TagList.jsx
View File

@@ -11,10 +11,11 @@ class TagListComponent extends React.Component {
style.display = 'flex';
style.flexDirection = 'row';
style.borderBottom = `1px solid ${theme.dividerColor}`;
// style.borderBottom = `1px solid ${theme.dividerColor}`;
style.boxSizing = 'border-box';
style.fontSize = theme.fontSize;
style.whiteSpace = 'nowrap';
style.height = 25;
const tagItems = [];
if (tags && tags.length > 0) {

2
ElectronClient/gui/Toolbar.jsx
View File

@@ -6,7 +6,7 @@ const ToolbarSpace = require('./ToolbarSpace.min.js');
class ToolbarComponent extends React.Component {
render() {
const style = this.props.style;
const style = Object.assign({}, this.props.style);
const theme = themeStyle(this.props.theme);
style.height = theme.toolbarHeight;
style.display = 'flex';

31
ElectronClient/gui/note-viewer/index.html
View File

@@ -105,8 +105,10 @@
for (let i = 0; i < assets.length; i++) {
const asset = assets[i];
if (pluginAssetsAdded_[asset.name]) continue;
pluginAssetsAdded_[asset.name] = true;
const assetId = asset.name ? asset.name : asset.path;
if (pluginAssetsAdded_[assetId]) continue;
pluginAssetsAdded_[assetId] = true;
if (asset.mime === 'application/javascript') {
const script = document.createElement('script');
@@ -143,6 +145,22 @@
}, 100);
}
// https://stackoverflow.com/a/1977898/561309
function isImageReady(img) {
if (!img.complete) return false;
if (!img.naturalWidth || !img.naturalHeight) return false;
return true;
}
function allImagesLoaded() {
for (const image of document.images) {
if (!isImageReady(image)) return false;
}
return true;
}
let checkAllImageLoadedIID_ = null;
ipc.setHtml = (event) => {
const html = event.html;
@@ -177,6 +195,15 @@
}
document.dispatchEvent(new Event('joplin-noteDidUpdate'));
if (checkAllImageLoadedIID_) clearInterval(checkAllImageLoadedIID_);
checkAllImageLoadedIID_ = setInterval(() => {
if (!allImagesLoaded()) return;
clearInterval(checkAllImageLoadedIID_);
ipcProxySendToHost('noteRenderComplete');
}, 100);
}
let lastScrollEventTime = 0;

10
ElectronClient/gui/utils/NoteListUtils.js
View File

@@ -91,8 +91,14 @@ class NoteListUtils {
click: async () => {
for (let i = 0; i < noteIds.length; i++) {
const note = await Note.load(noteIds[i]);
await Note.save(Note.toggleIsTodo(note), { userSideValidation: true });
eventManager.emit('noteTypeToggle', { noteId: note.id });
const newNote = await Note.save(Note.toggleIsTodo(note), { userSideValidation: true });
const eventNote = {
id: newNote.id,
is_todo: newNote.is_todo,
todo_due: newNote.todo_due,
todo_completed: newNote.todo_completed,
};
eventManager.emit('noteTypeToggle', { noteId: note.id, note: eventNote });
}
},
})

15
ElectronClient/gui/utils/NoteText.js Normal file
View File

@@ -0,0 +1,15 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const joplinRendererUtils = require('lib/joplin-renderer').utils;
const Resource = require('lib/models/Resource');
function resourcesStatus(resourceInfos) {
let lowestIndex = joplinRendererUtils.resourceStatusIndex('ready');
for (const id in resourceInfos) {
const s = joplinRendererUtils.resourceStatus(Resource, resourceInfos[id]);
const idx = joplinRendererUtils.resourceStatusIndex(s);
if (idx < lowestIndex) { lowestIndex = idx; }
}
return joplinRendererUtils.resourceStatusName(lowestIndex);
}
exports.resourcesStatus = resourcesStatus;
// # sourceMappingURL=NoteText.js.map

32
ElectronClient/gui/utils/NoteText.ts
View File

@@ -1,32 +0,0 @@
const joplinRendererUtils = require('lib/joplin-renderer').utils;
const Resource = require('lib/models/Resource');
export interface DefaultEditorState {
value: string,
markupLanguage: number, // MarkupToHtml.MARKUP_LANGUAGE_XXX
resourceInfos: any,
}
export interface OnChangeEvent {
changeId: number,
content: any,
}
export interface TextEditorUtils {
editorContentToHtml(content:any):Promise<string>,
}
export interface EditorCommand {
name: string,
value: any,
}
export function resourcesStatus(resourceInfos:any) {
let lowestIndex = joplinRendererUtils.resourceStatusIndex('ready');
for (const id in resourceInfos) {
const s = joplinRendererUtils.resourceStatus(Resource, resourceInfos[id]);
const idx = joplinRendererUtils.resourceStatusIndex(s);
if (idx < lowestIndex) lowestIndex = idx;
}
return joplinRendererUtils.resourceStatusName(lowestIndex);
}

33
ElectronClient/package-lock.json generated
View File

@@ -2771,6 +2771,15 @@
"object-visit": "^1.0.0"
}
},
"color": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
"integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
"requires": {
"color-convert": "^1.9.1",
"color-string": "^1.5.2"
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2784,6 +2793,15 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"color-string": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
"integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
"requires": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
}
},
"color-support": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -10242,6 +10260,21 @@
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
},
"simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
"requires": {
"is-arrayish": "^0.3.1"
},
"dependencies": {
"is-arrayish": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
}
}
},
"slash": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",

1
ElectronClient/package.json
View File

@@ -91,6 +91,7 @@
"base64-stream": "^1.0.0",
"chokidar": "^3.0.0",
"clean-html": "^1.5.0",
"color": "^3.1.2",
"compare-versions": "^3.2.1",
"countable": "^3.0.1",
"diacritics": "^1.3.0",

19
ElectronClient/theme.js
View File

@@ -1,4 +1,5 @@
const Setting = require('lib/models/Setting.js');
const Color = require('color');
const themes = {
[Setting.THEME_LIGHT]: require('./gui/style/theme/light'),
@@ -29,7 +30,6 @@ const globalStyle = {
headerButtonHPadding: 6,
toolbarHeight: 35,
tagItemPadding: 3,
};
globalStyle.marginRight = globalStyle.margin;
@@ -83,18 +83,21 @@ globalStyle.buttonStyle = {
};
function addExtraStyles(style) {
style.selectedDividerColor = Color(style.dividerColor).darken(0.2).hex();
style.tagStyle = {
fontSize: style.fontSize,
fontFamily: style.fontFamily,
marginTop: style.itemMarginTop * 0.4,
marginBottom: style.itemMarginBottom * 0.4,
marginRight: style.margin * 0.3,
paddingTop: style.tagItemPadding,
paddingBottom: style.tagItemPadding,
paddingRight: style.tagItemPadding * 2,
paddingLeft: style.tagItemPadding * 2,
paddingTop: 3,
paddingBottom: 3,
paddingRight: 8,
paddingLeft: 8,
backgroundColor: style.raisedBackgroundColor,
color: style.raisedColor,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginRight: 5,
};
style.toolbarStyle = {

2
Modules/TinyMCE/IconPack/gulpfile.js
View File

@@ -13,7 +13,7 @@ gulp.task('icon-packager', function() {
});
gulp.task('deploy', function() {
fs.copyFileSync(`${__dirname}/dist/icons/Joplin/icons.js`, `${__dirname}/../../../ElectronClient/gui/editors/TinyMCE/icons.js`);
fs.copyFileSync(`${__dirname}/dist/icons/Joplin/icons.js`, `${__dirname}/../../../ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/icons.js`);
return Promise.resolve();
});

2
Modules/TinyMCE/JoplinLists/Gruntfile.js
View File

@@ -125,7 +125,7 @@ module.exports = function(grunt) {
// { src: ['changelog.txt'], dest: 'dist', expand: true },
{
src: ['dist/joplinLists.js'],
dest: '../../../ElectronClient/gui/editors/TinyMCE/plugins/lists.js',
dest: '../../../ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/plugins/lists.js',
},
],
},

2
ReactNativeClient/lib/components/shared/note-screen-shared.js
View File

@@ -64,7 +64,7 @@ shared.saveNoteButton_press = async function(comp, folderId = null, options = nu
const hasAutoTitle = comp.state.newAndNoTitleChangeNoteId || (isProvisionalNote && !note.title);
if (hasAutoTitle && options.autoTitle) {
note.title = Note.defaultTitle(note);
note.title = Note.defaultTitle(note.body);
if (saveOptions.fields && saveOptions.fields.indexOf('title') < 0) saveOptions.fields.push('title');
}

27
ReactNativeClient/lib/hooks/useImperativeHandlerDebugger.ts Normal file
View File

@@ -0,0 +1,27 @@
import usePrevious from './usePrevious';
import { useImperativeHandle } from 'react';
export default function useImperativeHandleDebugger(ref:any, effectHook:any, dependencies:any, dependencyNames:any[] = []) {
const previousDeps = usePrevious(dependencies, []);
const changedDeps = dependencies.reduce((accum:any, dependency:any, index:any) => {
if (dependency !== previousDeps[index]) {
const keyName = dependencyNames[index] || index;
return {
...accum,
[keyName]: {
before: previousDeps[index],
after: dependency,
},
};
}
return accum;
}, {});
if (Object.keys(changedDeps).length) {
console.log('[use-imperativeHandler-debugger] ', changedDeps);
}
useImperativeHandle(ref, effectHook, dependencies);
}

9
ReactNativeClient/lib/hooks/usePrevious.ts Normal file
View File

@@ -0,0 +1,9 @@
import { useEffect, useRef } from 'react';
export default function usePrevious(value: any, initialValue:any = null): any {
const ref = useRef(initialValue);
useEffect(() => {
ref.current = value;
});
return ref.current;
}

4
ReactNativeClient/lib/joplin-renderer/HtmlToHtml.js
View File

@@ -29,10 +29,10 @@ class HtmlToHtml {
splitHtml(html) {
const trimmedHtml = html.trimStart();
if (trimmedHtml.indexOf('<style>') !== 0) return { html: html, cssStrings: [], originalCssHtml: '' };
if (trimmedHtml.indexOf('<style>') !== 0) return { html: html, css: '' };
const closingIndex = trimmedHtml.indexOf('</style>');
if (closingIndex < 0) return { html: html, cssStrings: [], originalCssHtml: '' };
if (closingIndex < 0) return { html: html, css: '' };
return {
html: trimmedHtml.substr(closingIndex + 8),

4
ReactNativeClient/lib/models/Note.js
View File

@@ -77,8 +77,8 @@ class Note extends BaseItem {
return super.serialize(n, fieldNames);
}
static defaultTitle(note) {
return this.defaultTitleFromBody(note.body);
static defaultTitle(noteBody) {
return this.defaultTitleFromBody(noteBody);
}
static defaultTitleFromBody(body) {

45
ReactNativeClient/lib/models/Setting.js
View File

@@ -43,20 +43,11 @@ class Setting extends BaseModel {
type: Setting.TYPE_STRING,
public: false,
},
'editor.keyboardMode': {
value: 'default',
type: Setting.TYPE_STRING,
public: true,
'editor.codeView': {
value: false,
type: Setting.TYPE_BOOL,
public: false,
appTypes: ['desktop'],
isEnum: true,
label: () => _('Keyboard Mode'),
options: () => {
const output = {};
output['default'] = _('Default');
output['emacs'] = _('Emacs');
output['vim'] = _('Vim');
return output;
},
},
'sync.target': {
value: SyncTargetRegistry.nameToId('dropbox'),
@@ -261,7 +252,7 @@ class Setting extends BaseModel {
return output;
},
},
showNoteCounts: { value: true, type: Setting.TYPE_BOOL, public: true, appTypes: ['desktop'], label: () => _('Show note counts') },
showNoteCounts: { value: true, type: Setting.TYPE_BOOL, public: true, advanced: true, appTypes: ['desktop'], label: () => _('Show note counts') },
layoutButtonSequence: {
value: Setting.LAYOUT_ALL,
type: Setting.TYPE_INT,
@@ -273,7 +264,6 @@ class Setting extends BaseModel {
[Setting.LAYOUT_EDITOR_VIEWER]: _('%s / %s', _('Editor'), _('Viewer')),
[Setting.LAYOUT_EDITOR_SPLIT]: _('%s / %s', _('Editor'), _('Split View')),
[Setting.LAYOUT_VIEWER_SPLIT]: _('%s / %s', _('Viewer'), _('Split View')),
[Setting.LAYOUT_SPLIT_WYSIWYG]: _('%s / %s', _('Split'), 'WYSIWYG (Experimental)'),
}),
},
uncompletedTodosOnTop: { value: true, type: Setting.TYPE_BOOL, section: 'note', public: true, appTypes: ['cli'], label: () => _('Uncompleted to-dos on top') },
@@ -528,7 +518,7 @@ class Setting extends BaseModel {
tagHeaderIsExpanded: { value: true, type: Setting.TYPE_BOOL, public: false, appTypes: ['desktop'] },
folderHeaderIsExpanded: { value: true, type: Setting.TYPE_BOOL, public: false, appTypes: ['desktop'] },
editor: { value: '', type: Setting.TYPE_STRING, subType: 'file_path_and_args', public: true, appTypes: ['cli', 'desktop'], label: () => _('Text editor command'), description: () => _('The editor command (may include arguments) that will be used to open a note. If none is provided it will try to auto-detect the default editor.') },
'export.pdfPageSize': { value: 'A4', type: Setting.TYPE_STRING, isEnum: true, public: true, appTypes: ['desktop'], label: () => _('Page size for PDF export'), options: () => {
'export.pdfPageSize': { value: 'A4', type: Setting.TYPE_STRING, advanced: true, isEnum: true, public: true, appTypes: ['desktop'], label: () => _('Page size for PDF export'), options: () => {
return {
'A4': _('A4'),
'Letter': _('Letter'),
@@ -538,13 +528,29 @@ class Setting extends BaseModel {
'Legal': _('Legal'),
};
} },
'export.pdfPageOrientation': { value: 'portrait', type: Setting.TYPE_STRING, isEnum: true, public: true, appTypes: ['desktop'], label: () => _('Page orientation for PDF export'), options: () => {
'export.pdfPageOrientation': { value: 'portrait', type: Setting.TYPE_STRING, advanced: true, isEnum: true, public: true, appTypes: ['desktop'], label: () => _('Page orientation for PDF export'), options: () => {
return {
'portrait': _('Portrait'),
'landscape': _('Landscape'),
};
} },
'editor.keyboardMode': {
value: '',
type: Setting.TYPE_STRING,
public: true,
appTypes: ['desktop'],
isEnum: true,
advanced: true,
label: () => _('Keyboard Mode'),
options: () => {
const output = {};
output[''] = _('Default');
output['emacs'] = _('Emacs');
output['vim'] = _('Vim');
return output;
},
},
'net.customCertificates': {
value: '',
@@ -771,6 +777,10 @@ class Setting extends BaseModel {
return this.setValue(key, this.value(key) + inc);
}
static toggle(key) {
return this.setValue(key, !this.value(key));
}
static setObjectKey(settingKey, objectKey, value) {
let o = this.value(settingKey);
if (typeof o !== 'object') o = {};
@@ -1080,7 +1090,6 @@ Setting.LAYOUT_ALL = 0;
Setting.LAYOUT_EDITOR_VIEWER = 1;
Setting.LAYOUT_EDITOR_SPLIT = 2;
Setting.LAYOUT_VIEWER_SPLIT = 3;
Setting.LAYOUT_SPLIT_WYSIWYG = 4;
Setting.DATE_FORMAT_1 = 'DD/MM/YYYY';
Setting.DATE_FORMAT_2 = 'DD/MM/YY';

2
ReactNativeClient/lib/services/ExternalEditWatcher.js
View File

@@ -107,7 +107,7 @@ class ExternalEditWatcher {
updatedNote.id = id;
updatedNote.parent_id = note.parent_id;
await Note.save(updatedNote);
this.eventEmitter_.emit('noteChange', { id: updatedNote.id });
this.eventEmitter_.emit('noteChange', { id: updatedNote.id, note: updatedNote });
}
this.skipNextChangeEvent_ = {};

17
ReactNativeClient/lib/shim-init-node.js
View File

@@ -205,7 +205,7 @@ function shimInit() {
return Resource.save(resource, { isNew: true });
};
shim.attachFileToNote = async function(note, filePath, position = null, options = null) {
shim.attachFileToNoteBody = async function(noteBody, filePath, position = null, options = null) {
options = Object.assign({}, {
createFileURL: false,
}, options);
@@ -223,10 +223,10 @@ function shimInit() {
const newBody = [];
if (position === null) {
position = note.body ? note.body.length : 0;
position = noteBody ? noteBody.length : 0;
}
if (note.body && position) newBody.push(note.body.substr(0, position));
if (noteBody && position) newBody.push(noteBody.substr(0, position));
if (!options.createFileURL) {
newBody.push(Resource.markdownTag(resource));
@@ -236,10 +236,17 @@ function shimInit() {
newBody.push(fileURL);
}
if (note.body) newBody.push(note.body.substr(position));
if (noteBody) newBody.push(noteBody.substr(position));
return newBody.join('\n\n');
};
shim.attachFileToNote = async function(note, filePath, position = null, options = null) {
const newBody = await shim.attachFileToNoteBody(note.body, filePath, position, options);
if (!newBody) return null;
const newNote = Object.assign({}, note, {
body: newBody.join('\n\n'),
body: newBody,
});
return await Note.save(newNote);
};

135
joplin.sublime-project
View File

@@ -4,59 +4,82 @@
{
"file_exclude_patterns":
[
"*.base64",
"*.bundle.js",
"*.eps",
"*.icns",
"*.jar",
"*.map",
"*.po",
"*.pot",
"CliClient/app/lib",
"CliClient/app/src",
"locales/*.json",
"log.txt",
"package-lock.json",
"ReactNativeClient/locales/*",
"src/log.txt",
"*.min.js",
"ElectronClient/gui/note-viewer/highlight/*.pack.js",
"ElectronClient/css/font-awesome.min.css",
"docs/*.html",
"docs/*.svg",
"ReactNativeClient/lib/mime-utils.js",
"_mydocs/EnexSamples/*.enex",
"*.min.css",
"*.min.js",
"*.bundle.js",
"yarn.lock",
"*.icns",
"*.base64",
"Podfile.lock",
"ReactNativeClient/PluginAssetsLoader.js",
"ElectronClient/gui/NoteText2.js",
"*.po",
"*.pot",
"_mydocs/EnexSamples/*.enex",
"CliClient/app/lib",
"CliClient/app/src",
"docs/*.html",
"docs/*.svg",
"ElectronClient/css/font-awesome.min.css",
"ElectronClient/gui/MultiNoteActions.js",
"ElectronClient/gui/note-viewer/highlight/*.pack.js",
"ElectronClient/gui/NoteContentPropertiesDialog.js",
"ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.js",
"ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/index.js",
"ElectronClient/gui/NoteEditor/NoteBody/PlainEditor/PlainEditor.js",
"ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/plugins/lists.js",
"ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js",
"ElectronClient/gui/NoteEditor/NoteEditor.js",
"ElectronClient/gui/NoteEditor/utils/index.js",
"ElectronClient/gui/NoteToolbar/NoteToolbar.js",
"ElectronClient/gui/ResourceScreen.js",
"ElectronClient/gui/ShareNoteDialog.js",
"ElectronClient/gui/TinyMCE.js",
"ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/sanitize_html.js",
"ReactNativeClient/setUpQuickActions.js",
"ElectronClient/gui/utils/NoteText.js",
"ElectronClient/gui/NoteEditor/utils/resourceHandling.js",
"ElectronClient/gui/NoteEditor/utils/types.js",
"ElectronClient/gui/NoteEditor/utils/useNoteSearchBar.js",
"ElectronClient/gui/NoteEditor/utils/useSearchMarkers.js",
"ElectronClient/gui/NoteEditor/styles/index.js",
"ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.js",
"ElectronClient/gui/NoteEditor/utils/useDropHandler.js",
"ElectronClient/gui/NoteEditor/utils/useMessageHandler.js",
"ElectronClient/gui/NoteEditor/utils/useWindowCommandHandler.js",
"locales/*.json",
"log.txt",
"package-lock.json",
"Podfile.lock",
"ReactNativeClient/android/app/joplin.keystore",
"ReactNativeClient/lib/AsyncActionHandler.js",
"*.eps",
"ElectronClient/gui/editors/TinyMCE.js",
"ElectronClient/gui/editors/PlainEditor.js",
"ElectronClient/gui/MultiNoteActions.js",
"ElectronClient/gui/NoteContentPropertiesDialog.js",
"ElectronClient/gui/utils/NoteText.js",
"ElectronClient/gui/editors/TinyMCE/plugins/lists.js",
"ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.js",
"ReactNativeClient/lib/AsyncActionQueue.js",
"ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.js",
"ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/fence.js",
"ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.js"
"ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.js",
"ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/sanitize_html.js",
"ReactNativeClient/lib/JoplinServerApi.js",
"ReactNativeClient/lib/mime-utils.js",
"ReactNativeClient/locales/*",
"ReactNativeClient/PluginAssetsLoader.js",
"ReactNativeClient/setUpQuickActions.js",
"src/log.txt",
"yarn.lock",
"ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/types.js",
"ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.js",
"ElectronClient/gui/note-viewer/lib.js",
"ReactNativeClient/lib/hooks/useImperativeHandlerDebugger.js",
"ElectronClient/gui/NoteEditor/utils/useMarkupToHtml.js",
"ElectronClient/gui/NoteEditor/utils/useResourceRefresher.js",
"ElectronClient/gui/NoteEditor/utils/useFormNote.js",
"ElectronClient/gui/NoteEditor/utils/useResourceInfos.js"
],
"folder_exclude_patterns":
[
"_mydocs/mdtest",
"_releases",
"_vieux",
"ElectronClient/fonts",
"CliClient/app/lib",
"CliClient/app/src",
"CliClient/build",
"CliClient/locales-build",
"CliClient/node_modules",
"CliClient/tests-build",
"CliClient/tests-build/lib",
@@ -64,40 +87,40 @@
"CliClient/tests/fuzzing",
"CliClient/tests/src",
"CliClient/tests/sync",
"ElectronClient/dist",
"CliClient/tests/tmp",
"Clipper/dist",
"Clipper/popup/build",
"ElectronClient/build",
"ElectronClient/dist",
"ElectronClient/dist",
"ElectronClient/dist",
"ElectronClient/fonts",
"ElectronClient/gui/note-viewer/highlight/styles",
"ElectronClient/lib",
"ElectronClient/locale",
"ElectronClient/dist",
"ElectronClient/pluginAssets",
"Modules/TinyMCE/JoplinLists/dist",
"Modules/TinyMCE/JoplinLists/lib",
"Modules/TinyMCE/JoplinLists/scratch",
"node_modules",
"ReactNativeClient/android/.gradle",
"ReactNativeClient/android/.idea",
"ReactNativeClient/android/app/build",
"ReactNativeClient/android/build",
"ReactNativeClient/android/local.properties",
"ReactNativeClient/node_modules",
"ReactNativeClient/pluginAssets",
"ElectronClient/gui/note-viewer/highlight/styles",
"tests/logs",
"ReactNativeClient/ios/build",
"ElectronClient/dist",
"_releases",
"ReactNativeClient/lib/csstojs",
"Clipper/popup/build",
"Clipper/dist",
"ReactNativeClient/lib/rnInjectedJs",
"ReactNativeClient/ios/Pods",
"CliClient/locales-build",
"ReactNativeClient/lib/vendor",
"ReactNativeClient/ios/Joplin-tvOS",
"ReactNativeClient/ios/Joplin.xcodeproj/project.xcworkspace",
"ReactNativeClient/ios/Joplin.xcworkspace/xcuserdata",
"ReactNativeClient/ios/Joplin.xcodeproj/xcuserdata",
"ElectronClient/pluginAssets",
"Modules/TinyMCE/JoplinLists/dist",
"Modules/TinyMCE/JoplinLists/lib",
"Modules/TinyMCE/JoplinLists/scratch",
"CliClient/tests/tmp"
"ReactNativeClient/ios/Joplin.xcworkspace/xcuserdata",
"ReactNativeClient/ios/Pods",
"ReactNativeClient/lib/csstojs",
"ReactNativeClient/lib/rnInjectedJs",
"ReactNativeClient/lib/vendor",
"ReactNativeClient/node_modules",
"ReactNativeClient/pluginAssets",
"tests/logs",
"ElectronClient/gui/note-viewer/pluginAssets"
],
"path": "."
}