self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-24 08:12:24 +02:00
Code Issues Releases Activity

Desktop: Fixes #8504: Support plugin toolbar icons in the Rich Text editor toolbar (#8519)

Browse Source
This commit is contained in:
Henry Heino 2023-07-21 12:49:49 -07:00 committed by GitHub
parent 82c33c4f0c
commit 776b6d8f12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
View File

@ -480,6 +480,23 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
border-top: none !important;
}
/* Override the TinyMCE font styles with more specific CSS selectors.
Without this, the built-in FontAwesome styles are not applied because
they are overridden by TinyMCE. */
.plugin-icon.fa, .plugin-icon.far, .plugin-icon.fas {
font-family: "Font Awesome 5 Free";
font-size: ${theme.toolbarHeight - theme.toolbarPadding}px;
}
.plugin-icon.fa, .plugin-icon.fas {
font-weight: 900;
}
.plugin-icon.fab, .plugin-icon.far {
font-weight: 400;
}
.joplin-tinymce .tox-toolbar__group {
background-color: ${theme.backgroundColor3};
padding-top: ${theme.toolbarPadding}px;
@ -631,9 +648,16 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
});
for (const pluginCommandName of pluginCommandNames) {
const iconClassName = CommandService.instance().iconName(pluginCommandName);
// Only allow characters that appear in Font Awesome class names: letters, spaces, and dashes.
const safeIconClassName = iconClassName.replace(/[^a-z0-9 -]/g, '');
editor.ui.registry.addIcon(pluginCommandName, `<i class="plugin-icon ${safeIconClassName}"></i>`);
editor.ui.registry.addButton(pluginCommandName, {
tooltip: CommandService.instance().label(pluginCommandName),
icon: CommandService.instance().iconName(pluginCommandName, 'tinymce'),
icon: pluginCommandName,
onAction: function() {
void CommandService.instance().execute(pluginCommandName);
},

9
packages/lib/services/CommandService.ts
View File

@ -43,11 +43,6 @@ export interface CommandDeclaration {
// All free Font Awesome icons are available: https://fontawesome.com/icons?d=gallery&m=free
iconName?: string;
// Will be used by TinyMCE (which doesn't support Font Awesome icons).
// Defaults to the "preferences" icon (a cog) if not specified.
// https://www.tiny.cloud/docs/advanced/editor-icon-identifiers/
tinymceIconName?: string;
// Same as `role` key in Electron MenuItem:
// https://www.electronjs.org/docs/api/menu-item#new-menuitemoptions
// Note that due to a bug in Electron, menu items with a role cannot
@ -296,10 +291,10 @@ export default class CommandService extends BaseService {
}
}
public iconName(commandName: string, variant: string = null): string {
public iconName(commandName: string): string {
const command = this.commandByName(commandName);
if (!command) throw new Error(`No such command: ${commandName}`);
if (variant === 'tinymce') return command.declaration.tinymceIconName ? command.declaration.tinymceIconName : 'preferences';
return command.declaration.iconName;
}