Desktop: WYSIWYG: Added support for custom icon package and set Attach toolbar icon

.eslintignore

@@ -55,6 +55,7 @@ Server/docs/
 Server/node_modules/
 Tools/node_modules
 Tools/PortableAppsLauncher
+Modules/TinyMCE/IconPack/postinstall.js
 
 # AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
 ElectronClient/gui/editors/PlainEditor.js

ElectronClient/gui/editors/TinyMCE.tsx

@@ -414,6 +414,8 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
 				width: '100%',
 				height: '100%',
 				resize: false,
+				icons: 'Joplin',
+				icons_url: 'gui/editors/TinyMCE/icons.js',
 				plugins: 'noneditable link joplinLists hr searchreplace codesample',
 				noneditable_noneditable_class: 'joplin-editable', // Can be a regex too
 				valid_elements: '*[*]', // We already filter in sanitize_html
@@ -487,7 +489,7 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
 
 					editor.ui.registry.addButton('joplinAttach', {
 						tooltip: 'Attach...',
-						icon: 'upload',
+						icon: 'paperclip',
 						onAction: async function() {
 							const resources = await attachResources.current();
 							if (!resources.length) return;

ElectronClient/gui/editors/TinyMCE/icons.js

@@ -0,0 +1,5 @@
+tinymce.IconManager.add('Joplin', {
+	icons: {
+		'paperclip': '<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><defs><path d="M17.5 21.8c-1 0-2.1-.4-2.9-1.2L5 10.9a4.9 4.9 0 01-1.4-3.3c0-2.7 2.1-4.8 4.8-4.8 1.2 0 2.4.5 3.3 1.4l7.6 7.6.1.2c0 .3-.7 1-1 1l-.2-.1-7.6-7.6c-.6-.6-1.4-1-2.2-1A3.2 3.2 0 006 9.8l9.6 9.8c.5.4 1.2.7 1.8.7 1 0 1.9-.7 1.9-1.8 0-.7-.3-1.3-.8-1.8l-7.2-7.2c-.2-.2-.5-.3-.8-.3-.4 0-.8.3-.8.8 0 .3.1.5.3.7l5.1 5.1.1.3c0 .3-.7 1-1 1l-.2-.1L9 11.8c-.5-.5-.8-1.2-.8-1.9 0-1.4 1-2.4 2.4-2.4.7 0 1.4.3 1.9.8l7.2 7.2c.8.8 1.3 1.8 1.3 2.9 0 2-1.5 3.4-3.5 3.4z" id="a"/></defs><use xlink:href="#a"/><use xlink:href="#a" fill-opacity="0" stroke="#000" stroke-opacity="0"/></svg>',
+	},
+});

Modules/TinyMCE/IconPack/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

Modules/TinyMCE/IconPack/README.md

@@ -0,0 +1,19 @@
+# Joplin TinyMCE Icon Pack
+
+Created from template: https://raw.githubusercontent.com/tinymce/oxide-icon-pack-template
+
+## Adding an icon
+
+- Get it from [Fork Awesome](https://forkaweso.me/)
+- Using https://vectr.com/Resize Resize vector graphics to between 15x15 to 20x20 max. Set page dimensions to 24x24 pixels
+- Save to src/svg
+
+![](./IconDimensions.png)
+
+## Building
+
+Open a terminal and navigate to the project folder, then
+
+1. Install dependencies using `npm install`.
+2. Place your icons in `src/svg`
+3. Run `gulp` to build the icon pack

Modules/TinyMCE/IconPack/gulpfile.js

@@ -0,0 +1,27 @@
+const iconPackager = require('@ephox/oxide-icons-tools').iconPackager;
+const clean = require('gulp-clean');
+const gulp = require('gulp');
+const fs = require('fs');
+
+gulp.task('icon-packager', function() {
+	const contents = fs.readFileSync('package.json');
+	const name = JSON.parse(contents).iconPackName;
+
+	return gulp.src('src/svg/**/*.svg')
+		.pipe(iconPackager({ name }))
+		.pipe(gulp.dest('dist'));
+});
+
+gulp.task('deploy', function() {
+	fs.copyFileSync(`${__dirname}/dist/icons/Joplin/icons.js`, `${__dirname}/../../../ElectronClient/gui/editors/TinyMCE/icons.js`);
+	return Promise.resolve();
+});
+
+gulp.task('clean', function() {
+	return gulp.src('./dist', {
+		read: false,
+		allowEmpty: true,
+	}).pipe(clean());
+});
+
+gulp.task('default', gulp.series('clean', 'icon-packager', 'deploy'));

Modules/TinyMCE/IconPack/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "oxide-icon-pack-template",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "postinstall": "node postinstall.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@ephox/oxide-icons-tools": "^2.1.1",
+    "gulp": "^4.0.2",
+    "gulp-clean": "^0.4.0",
+    "prompts": "^2.2.1"
+  },
+  "iconPackName": "Joplin"
+}

Modules/TinyMCE/IconPack/postinstall.js

@@ -0,0 +1,20 @@
+const prompts = require('prompts');
+const fs = require('fs');
+
+(async function() {
+	const response = await prompts({
+		type: 'text',
+		name: 'iconPackName',
+		message: 'Enter the name of the icon pack.',
+		validate: function(iconPackName) { return iconPackName.length > 0; },
+	});
+
+	try {
+		const contents = fs.readFileSync('package.json');
+		obj = JSON.parse(contents);
+		obj.iconPackName = response.iconPackName;
+		fs.writeFileSync('package.json', JSON.stringify(obj, undefined, 2));
+	} catch (err) {
+		console.error(err.message);
+	}
+})();

Modules/TinyMCE/IconPack/src/svg/paperclip.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="24" height="24"><defs><path d="M17.53 21.82C16.44 21.82 15.38 21.35 14.61 20.58C13.64 19.61 5.91 11.89 4.95 10.93C4.07 10.03 3.54 8.82 3.54 7.56C3.54 4.92 5.62 2.82 8.26 2.82C9.52 2.82 10.74 3.33 11.65 4.23C12.4 4.98 18.42 11.01 19.18 11.76C19.25 11.84 19.3 11.94 19.3 12.04C19.3 12.3 18.6 12.99 18.34 12.99C18.23 12.99 18.13 12.94 18.06 12.87C17.3 12.11 11.27 6.08 10.52 5.32C9.92 4.74 9.11 4.36 8.27 4.36C6.5 4.36 5.14 5.79 5.14 7.55C5.14 8.39 5.48 9.2 6.08 9.8C7.05 10.76 14.77 18.49 15.73 19.46C16.2 19.93 16.86 20.24 17.53 20.24C18.59 20.24 19.37 19.46 19.37 18.4C19.37 17.72 19.06 17.07 18.59 16.6C17.87 15.88 12.09 10.1 11.37 9.38C11.17 9.19 10.89 9.08 10.62 9.08C10.15 9.08 9.79 9.42 9.79 9.91C9.79 10.18 9.91 10.44 10.1 10.64C10.61 11.15 14.69 15.23 15.2 15.74C15.27 15.82 15.32 15.92 15.32 16.02C15.32 16.28 14.61 16.99 14.35 16.99C14.25 16.99 14.15 16.94 14.08 16.86C13.57 16.35 9.49 12.27 8.98 11.76C8.48 11.28 8.19 10.59 8.19 9.91C8.19 8.54 9.26 7.47 10.63 7.47C11.33 7.47 12 7.76 12.48 8.26C13.21 8.98 18.99 14.76 19.71 15.48C20.49 16.25 20.95 17.31 20.95 18.4C20.95 20.34 19.47 21.82 17.53 21.82Z" id="a3MUovWvUV"></path></defs><g><g><g><use xlink:href="#a3MUovWvUV" opacity="1" fill="#000000" fill-opacity="1"></use><g><use xlink:href="#a3MUovWvUV" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></g></svg>

gulpfile.js

@@ -18,6 +18,7 @@ const updateIgnoredTypeScriptBuildTask = async function() {
 			'**/CliClient/tests-build/lib/**',
 			'**/ElectronClient/dist/**',
 			'**/Modules/TinyMCE/JoplinLists/**',
+			'**/Modules/TinyMCE/IconPack/**',
 		],
 	}).map(f => f.substr(__dirname.length + 1));