-
-
Notifications
You must be signed in to change notification settings - Fork 5.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Desktop: Resolves #9450: Move the beta editor out of beta
- Loading branch information
1 parent
afcd2d2
commit 6238498
Showing
12 changed files
with
176 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 24 additions & 0 deletions
24
packages/app-desktop/gui/NoteEditor/WarningBanner/BannerContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import * as React from 'react'; | ||
| import { _ } from '@joplin/lib/locale'; | ||
|
|
||
| interface Props { | ||
| children: React.ReactElement|string; | ||
| acceptMessage: string; | ||
| onAccept: ()=> void; | ||
| onDismiss: ()=> void; | ||
| visible: boolean; | ||
| } | ||
|
|
||
| const BannerContent: React.FC<Props> = props => { | ||
| if (!props.visible) { | ||
| return null; | ||
| } | ||
|
|
||
| return <div className='warning-banner'> | ||
| {props.children} | ||
| <a onClick={props.onAccept} className='warning-banner-link' href="#">[ {props.acceptMessage} ]</a> | ||
| <a onClick={props.onDismiss} className='warning-banner-link' href="#">[ {_('Dismiss')} ]</a> | ||
| </div>; | ||
| }; | ||
|
|
||
| export default BannerContent; |
96 changes: 96 additions & 0 deletions
96
packages/app-desktop/gui/NoteEditor/WarningBanner/WarningBanner.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import * as React from 'react'; | ||
| import { connect } from 'react-redux'; | ||
| import { AppState } from '../../../app.reducer'; | ||
| import Setting from '@joplin/lib/models/Setting'; | ||
| import BannerContent from './BannerContent'; | ||
| import { _ } from '@joplin/lib/locale'; | ||
| import bridge from '../../../services/bridge'; | ||
| import { useMemo } from 'react'; | ||
| import { PluginStates } from '@joplin/lib/services/plugins/reducer'; | ||
| import PluginService from '@joplin/lib/services/plugins/PluginService'; | ||
|
|
||
| interface Props { | ||
| bodyEditor: string; | ||
| richTextBannerDismissed: boolean; | ||
| pluginCompatibilityBannerDismissedFor: string[]; | ||
| plugins: PluginStates; | ||
| } | ||
|
|
||
| const onRichTextDismissLinkClick = () => { | ||
| Setting.setValue('richTextBannerDismissed', true); | ||
| }; | ||
|
|
||
| const onRichTextReadMoreLinkClick = () => { | ||
| void bridge().openExternal('https://joplinapp.org/help/apps/rich_text_editor'); | ||
| }; | ||
|
|
||
| const onSwitchToLegacyEditor = () => { | ||
| Setting.setValue('editor.markdown-legacy', true); | ||
| }; | ||
|
|
||
| const incompatiblePluginIds = [ | ||
| // cSpell:disable | ||
| 'com.septemberhx.Joplin.Enhancement', | ||
| 'ylc395.noteLinkSystem', | ||
| 'outline', | ||
| 'joplin.plugin.cmoptions', | ||
| 'plugin.calebjohn.MathMode', | ||
| // cSpell:enable | ||
| ]; | ||
|
|
||
| const onDismissLegacyEditorPrompt = () => { | ||
| Setting.setValue('editor.pluginCompatibilityBannerDismissedFor', [...PluginService.instance().pluginIds]); | ||
| }; | ||
|
|
||
| const WarningBanner: React.FC<Props> = props => { | ||
| const wysiwygBanner = ( | ||
| <BannerContent | ||
| acceptMessage={_('Read more about it')} | ||
| onAccept={onRichTextReadMoreLinkClick} | ||
| onDismiss={onRichTextDismissLinkClick} | ||
| visible={props.bodyEditor === 'TinyMCE' && !props.richTextBannerDismissed} | ||
| > | ||
| {_('This Rich Text editor has a number of limitations and it is recommended to be aware of them before using it.')} | ||
| </BannerContent> | ||
| ); | ||
|
|
||
| const showMarkdownPluginBanner = useMemo(() => { | ||
| if (props.bodyEditor === 'CodeMirror5') { | ||
| return false; | ||
| } | ||
|
|
||
| const runningPluginIds = Object.keys(props.plugins); | ||
|
|
||
| return runningPluginIds.some(id => { | ||
| if (props.pluginCompatibilityBannerDismissedFor.includes(id)) { | ||
| return false; | ||
| } | ||
|
|
||
| return incompatiblePluginIds.includes(id); | ||
| }); | ||
| }, [props.bodyEditor, props.plugins, props.pluginCompatibilityBannerDismissedFor]); | ||
|
|
||
| const markdownPluginBanner = ( | ||
| <BannerContent | ||
| acceptMessage={_('Switch to the legacy editor')} | ||
| onAccept={onSwitchToLegacyEditor} | ||
| onDismiss={onDismissLegacyEditorPrompt} | ||
| visible={showMarkdownPluginBanner} | ||
| > | ||
| {_('One or more installed plugins does not support the current markdown editor.')} | ||
| </BannerContent> | ||
| ); | ||
|
|
||
| return <> | ||
| {wysiwygBanner} | ||
| {markdownPluginBanner} | ||
| </>; | ||
| }; | ||
|
|
||
| export default connect((state: AppState) => { | ||
| return { | ||
| richTextBannerDismissed: state.settings.richTextBannerDismissed, | ||
| pluginCompatibilityBannerDismissedFor: state.settings['editor.pluginCompatibilityBannerDismissedFor'], | ||
| plugins: state.pluginService.plugins, | ||
| }; | ||
| })(WarningBanner); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
|
|
||
| @use "./styles/warning-banner.scss"; | ||
| @use "./styles/warning-banner-link.scss"; |
6 changes: 6 additions & 0 deletions
6
packages/app-desktop/gui/NoteEditor/styles/warning-banner-link.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| .warning-banner-link { | ||
| color: var(--joplin-color); | ||
| font-family: var(--joplin-font-family); | ||
| font-size: var(--joplin-font-siize); | ||
| font-weight: bold; | ||
| } |
10 changes: 10 additions & 0 deletions
10
packages/app-desktop/gui/NoteEditor/styles/warning-banner.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
|
|
||
| .warning-banner { | ||
| background: var(--joplin-warning-background-color); | ||
| font-family: var(--joplin-font-family); | ||
| padding: 10px; | ||
| font-size: var(--joplin-font-size); | ||
| line-height: 1.6em; | ||
| margin-top: 5px; | ||
| margin-bottom: 5px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters