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

Desktop: Add new beta Markdown editor based on CodeMirror 6 (#8793)

Browse Source
This commit is contained in:
Henry Heino
2023-09-21 01:12:40 -07:00
committed by GitHub
parent c3971ff226
commit 84c6de9b56
70 changed files with 4201 additions and 1306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
.eslintignore
View File

@@ -215,12 +215,11 @@ packages/app-desktop/gui/MenuBar.js
packages/app-desktop/gui/MultiNoteActions.js
packages/app-desktop/gui/Navigator.js
packages/app-desktop/gui/NoteContentPropertiesDialog.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/Editor.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/Toolbar.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/styles/index.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/index.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/setupVim.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/types.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useContextMenu.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useCursorUtils.test.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useCursorUtils.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useEditorSearch.js
@@ -232,6 +231,13 @@ packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useLineSorting.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useListIdent.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollHandler.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollUtils.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useStyles.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useWebviewIpcMessage.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v5/CodeMirror.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v5/Editor.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/Editor.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/useEditorCommands.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/joplinCommandToTinyMceCommands.js
@@ -410,23 +416,7 @@ packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.js
packages/app-mobile/components/NoteBodyViewer/hooks/useOnMessage.js
packages/app-mobile/components/NoteBodyViewer/hooks/useOnResourceLongPress.js
packages/app-mobile/components/NoteBodyViewer/hooks/useSource.js
packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.test.js
packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.js
packages/app-mobile/components/NoteEditor/CodeMirror/decoratorExtension.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.bulletedVsChecklist.test.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.test.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.toggleList.test.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownMathParser.test.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownMathParser.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownReformatter.test.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownReformatter.js
packages/app-mobile/components/NoteEditor/CodeMirror/syntaxHighlightingLanguages.js
packages/app-mobile/components/NoteEditor/CodeMirror/testUtil/createEditor.js
packages/app-mobile/components/NoteEditor/CodeMirror/testUtil/forceFullParse.js
packages/app-mobile/components/NoteEditor/CodeMirror/testUtil/loadLanguages.js
packages/app-mobile/components/NoteEditor/CodeMirror/theme.js
packages/app-mobile/components/NoteEditor/CodeMirror/types.js
packages/app-mobile/components/NoteEditor/CodeMirror/webviewLogger.js
packages/app-mobile/components/NoteEditor/EditLinkDialog.js
packages/app-mobile/components/NoteEditor/MarkdownToolbar/MarkdownToolbar.js
@@ -439,7 +429,6 @@ packages/app-mobile/components/NoteEditor/MarkdownToolbar/types.js
packages/app-mobile/components/NoteEditor/NoteEditor.test.js
packages/app-mobile/components/NoteEditor/NoteEditor.js
packages/app-mobile/components/NoteEditor/SearchPanel.js
packages/app-mobile/components/NoteEditor/SelectionFormatting.js
packages/app-mobile/components/NoteEditor/types.js
packages/app-mobile/components/NoteList.js
packages/app-mobile/components/ProfileSwitcher/ProfileEditor.js
@@ -489,6 +478,38 @@ packages/app-mobile/utils/fs-driver-rn.js
packages/app-mobile/utils/setupNotifications.js
packages/app-mobile/utils/shareHandler.js
packages/app-mobile/utils/types.js
packages/editor/CodeMirror/CodeMirror5Emulation/CodeMirror5Emulation.test.js
packages/editor/CodeMirror/CodeMirror5Emulation/CodeMirror5Emulation.js
packages/editor/CodeMirror/CodeMirror5Emulation/Decorator.js
packages/editor/CodeMirror/CodeMirrorControl.test.js
packages/editor/CodeMirror/CodeMirrorControl.js
packages/editor/CodeMirror/PluginLoader.js
packages/editor/CodeMirror/configFromSettings.js
packages/editor/CodeMirror/createEditor.test.js
packages/editor/CodeMirror/createEditor.js
packages/editor/CodeMirror/editorCommands/editorCommands.js
packages/editor/CodeMirror/editorCommands/supportsCommand.js
packages/editor/CodeMirror/editorCommands/swapLine.js
packages/editor/CodeMirror/getScrollFraction.js
packages/editor/CodeMirror/markdown/computeSelectionFormatting.js
packages/editor/CodeMirror/markdown/decoratorExtension.js
packages/editor/CodeMirror/markdown/markdownCommands.bulletedVsChecklist.test.js
packages/editor/CodeMirror/markdown/markdownCommands.test.js
packages/editor/CodeMirror/markdown/markdownCommands.toggleList.test.js
packages/editor/CodeMirror/markdown/markdownCommands.js
packages/editor/CodeMirror/markdown/markdownMathParser.test.js
packages/editor/CodeMirror/markdown/markdownMathParser.js
packages/editor/CodeMirror/markdown/markdownReformatter.test.js
packages/editor/CodeMirror/markdown/markdownReformatter.js
packages/editor/CodeMirror/markdown/syntaxHighlightingLanguages.js
packages/editor/CodeMirror/testUtil/createEditorSettings.js
packages/editor/CodeMirror/testUtil/createTestEditor.js
packages/editor/CodeMirror/testUtil/forceFullParse.js
packages/editor/CodeMirror/testUtil/loadLanguages.js
packages/editor/CodeMirror/theme.js
packages/editor/SelectionFormatting.js
packages/editor/events.js
packages/editor/types.js
packages/fork-htmlparser2/src/CollectingHandler.js
packages/fork-htmlparser2/src/FeedHandler.spec.js
packages/fork-htmlparser2/src/FeedHandler.js

61
.gitignore vendored
View File

@@ -201,12 +201,11 @@ packages/app-desktop/gui/MenuBar.js
packages/app-desktop/gui/MultiNoteActions.js
packages/app-desktop/gui/Navigator.js
packages/app-desktop/gui/NoteContentPropertiesDialog.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/Editor.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/Toolbar.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/styles/index.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/index.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/setupVim.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/types.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useContextMenu.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useCursorUtils.test.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useCursorUtils.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useEditorSearch.js
@@ -218,6 +217,13 @@ packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useLineSorting.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useListIdent.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollHandler.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollUtils.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useStyles.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useWebviewIpcMessage.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v5/CodeMirror.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v5/Editor.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/Editor.js
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/useEditorCommands.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/joplinCommandToTinyMceCommands.js
@@ -396,23 +402,7 @@ packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.js
packages/app-mobile/components/NoteBodyViewer/hooks/useOnMessage.js
packages/app-mobile/components/NoteBodyViewer/hooks/useOnResourceLongPress.js
packages/app-mobile/components/NoteBodyViewer/hooks/useSource.js
packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.test.js
packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.js
packages/app-mobile/components/NoteEditor/CodeMirror/decoratorExtension.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.bulletedVsChecklist.test.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.test.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.toggleList.test.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownMathParser.test.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownMathParser.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownReformatter.test.js
packages/app-mobile/components/NoteEditor/CodeMirror/markdownReformatter.js
packages/app-mobile/components/NoteEditor/CodeMirror/syntaxHighlightingLanguages.js
packages/app-mobile/components/NoteEditor/CodeMirror/testUtil/createEditor.js
packages/app-mobile/components/NoteEditor/CodeMirror/testUtil/forceFullParse.js
packages/app-mobile/components/NoteEditor/CodeMirror/testUtil/loadLanguages.js
packages/app-mobile/components/NoteEditor/CodeMirror/theme.js
packages/app-mobile/components/NoteEditor/CodeMirror/types.js
packages/app-mobile/components/NoteEditor/CodeMirror/webviewLogger.js
packages/app-mobile/components/NoteEditor/EditLinkDialog.js
packages/app-mobile/components/NoteEditor/MarkdownToolbar/MarkdownToolbar.js
@@ -425,7 +415,6 @@ packages/app-mobile/components/NoteEditor/MarkdownToolbar/types.js
packages/app-mobile/components/NoteEditor/NoteEditor.test.js
packages/app-mobile/components/NoteEditor/NoteEditor.js
packages/app-mobile/components/NoteEditor/SearchPanel.js
packages/app-mobile/components/NoteEditor/SelectionFormatting.js
packages/app-mobile/components/NoteEditor/types.js
packages/app-mobile/components/NoteList.js
packages/app-mobile/components/ProfileSwitcher/ProfileEditor.js
@@ -475,6 +464,38 @@ packages/app-mobile/utils/fs-driver-rn.js
packages/app-mobile/utils/setupNotifications.js
packages/app-mobile/utils/shareHandler.js
packages/app-mobile/utils/types.js
packages/editor/CodeMirror/CodeMirror5Emulation/CodeMirror5Emulation.test.js
packages/editor/CodeMirror/CodeMirror5Emulation/CodeMirror5Emulation.js
packages/editor/CodeMirror/CodeMirror5Emulation/Decorator.js
packages/editor/CodeMirror/CodeMirrorControl.test.js
packages/editor/CodeMirror/CodeMirrorControl.js
packages/editor/CodeMirror/PluginLoader.js
packages/editor/CodeMirror/configFromSettings.js
packages/editor/CodeMirror/createEditor.test.js
packages/editor/CodeMirror/createEditor.js
packages/editor/CodeMirror/editorCommands/editorCommands.js
packages/editor/CodeMirror/editorCommands/supportsCommand.js
packages/editor/CodeMirror/editorCommands/swapLine.js
packages/editor/CodeMirror/getScrollFraction.js
packages/editor/CodeMirror/markdown/computeSelectionFormatting.js
packages/editor/CodeMirror/markdown/decoratorExtension.js
packages/editor/CodeMirror/markdown/markdownCommands.bulletedVsChecklist.test.js
packages/editor/CodeMirror/markdown/markdownCommands.test.js
packages/editor/CodeMirror/markdown/markdownCommands.toggleList.test.js
packages/editor/CodeMirror/markdown/markdownCommands.js
packages/editor/CodeMirror/markdown/markdownMathParser.test.js
packages/editor/CodeMirror/markdown/markdownMathParser.js
packages/editor/CodeMirror/markdown/markdownReformatter.test.js
packages/editor/CodeMirror/markdown/markdownReformatter.js
packages/editor/CodeMirror/markdown/syntaxHighlightingLanguages.js
packages/editor/CodeMirror/testUtil/createEditorSettings.js
packages/editor/CodeMirror/testUtil/createTestEditor.js
packages/editor/CodeMirror/testUtil/forceFullParse.js
packages/editor/CodeMirror/testUtil/loadLanguages.js
packages/editor/CodeMirror/theme.js
packages/editor/SelectionFormatting.js
packages/editor/events.js
packages/editor/types.js
packages/fork-htmlparser2/src/CollectingHandler.js
packages/fork-htmlparser2/src/FeedHandler.spec.js
packages/fork-htmlparser2/src/FeedHandler.js

1
.npmpackagejsonlintrc.json
View File

@@ -5,6 +5,7 @@
"exceptions": [
"@joplin/lib",
"@joplin/renderer",
"@joplin/editor",
"@joplin/pdf-viewer",
"@joplin/fork-htmlparser2",
"@joplin/fork-sax",

2
packages/app-desktop/app.ts
View File

@@ -192,7 +192,7 @@ class Application extends BaseApplication {
// The '*' and '!important' parts are necessary to make sure Russian text is displayed properly
// https://github.com/laurent22/joplin/issues/155
const css = `.CodeMirror * { font-family: ${fontFamilies.join(', ')} !important; }`;
const css = `.CodeMirror *, .cm-editor .cm-content { font-family: ${fontFamilies.join(', ')} !important; }`;
const styleTag = document.createElement('style');
styleTag.type = 'text/css';
styleTag.appendChild(document.createTextNode(css));

8
packages/app-desktop/gui/MainScreen/MainScreen.tsx
View File

@@ -79,6 +79,7 @@ interface Props {
startupPluginsLoaded: boolean;
shareInvitations: ShareInvitation[];
isSafeMode: boolean;
enableBetaMarkdownEditor: boolean;
needApiAuth: boolean;
processingShareInvitationResponse: boolean;
isResettingLayout: boolean;
@@ -737,7 +738,11 @@ class MainScreenComponent extends React.Component<Props, State> {
},
editor: () => {
const bodyEditor = this.props.settingEditorCodeView ? 'CodeMirror' : 'TinyMCE';
let bodyEditor = this.props.settingEditorCodeView ? 'CodeMirror' : 'TinyMCE';
if (this.props.settingEditorCodeView && this.props.enableBetaMarkdownEditor) {
bodyEditor = 'CodeMirror6';
}
return <NoteEditor key={key} bodyEditor={bodyEditor} />;
},
};
@@ -909,6 +914,7 @@ const mapStateToProps = (state: AppState) => {
shareInvitations: state.shareService.shareInvitations,
processingShareInvitationResponse: state.shareService.processingShareInvitationResponse,
isSafeMode: state.settings.isSafeMode,
enableBetaMarkdownEditor: state.settings['editor.beta'],
needApiAuth: state.needApiAuth,
showInstallTemplatesPlugin: state.hasLegacyTemplates && !state.pluginService.plugins['joplin.plugin.templates'],
isResettingLayout: state.isResettingLayout,

60
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/styles/index.ts
View File

@@ -1,60 +0,0 @@
import { NoteBodyEditorProps } from '../../../utils/types';
const { buildStyle } = require('@joplin/lib/theme');
export default function styles(props: NoteBodyEditorProps) {
return buildStyle(['CodeMirror', props.fontSize], props.themeId, (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: `${Math.round(17 * props.fontSize / 12)}px`,
fontSize: `${props.fontSize}px`,
color: theme.color,
backgroundColor: theme.backgroundColor,
codeMirrorTheme: theme.codeMirrorTheme, // Defined in theme.js
},
};
});
}

12
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/setupVim.ts Normal file
View File

@@ -0,0 +1,12 @@
import CodeMirrorControl from '@joplin/editor/CodeMirror/CodeMirrorControl';
const setupVim = (CodeMirror: CodeMirrorControl) => {
CodeMirror.Vim.defineAction('swapLineDown', CodeMirror.commands.swapLineDown);
CodeMirror.Vim.mapCommand('<A-j>', 'action', 'swapLineDown', {}, { context: 'normal', isEdit: true });
CodeMirror.Vim.defineAction('swapLineUp', CodeMirror.commands.swapLineUp);
CodeMirror.Vim.mapCommand('<A-k>', 'action', 'swapLineUp', {}, { context: 'normal', isEdit: true });
CodeMirror.Vim.defineAction('insertListElement', CodeMirror.commands.vimInsertListElement);
CodeMirror.Vim.mapCommand('o', 'action', 'insertListElement', { after: true }, { context: 'normal', isEdit: true, interlaceInsertRepeat: true });
};
export default setupVim;

175
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useContextMenu.ts Normal file
View File

@@ -0,0 +1,175 @@
import { ContextMenuEvent, ContextMenuParams } from 'electron';
import { useEffect, RefObject } from 'react';
import { _ } from '@joplin/lib/locale';
import Setting from '@joplin/lib/models/Setting';
import { PluginStates } from '@joplin/lib/services/plugins/reducer';
import { MenuItemLocation } from '@joplin/lib/services/plugins/api/types';
import MenuUtils from '@joplin/lib/services/commands/MenuUtils';
import CommandService from '@joplin/lib/services/CommandService';
import convertToScreenCoordinates from '../../../../utils/convertToScreenCoordinates';
import SpellCheckerService from '@joplin/lib/services/spellChecker/SpellCheckerService';
import { EditContextMenuFilterObject } from '@joplin/lib/services/plugins/api/JoplinWorkspace';
import type CodeMirrorControl from '@joplin/editor/CodeMirror/CodeMirrorControl';
import eventManager from '@joplin/lib/eventManager';
import bridge from '../../../../../services/bridge';
const Menu = bridge().Menu;
const MenuItem = bridge().MenuItem;
const menuUtils = new MenuUtils(CommandService.instance());
interface ContextMenuProps {
plugins: PluginStates;
editorCutText: ()=> void;
editorCopyText: ()=> void;
editorPaste: ()=> void;
editorRef: RefObject<CodeMirrorControl>;
editorClassName: string;
}
const useContextMenu = (props: ContextMenuProps) => {
const editorRef = props.editorRef;
// The below code adds support for spellchecking when it is enabled
// It might be buggy, refer to the below issue
// https://github.com/laurent22/joplin/pull/3974#issuecomment-718936703
useEffect(() => {
const isAncestorOfCodeMirrorEditor = (elem: HTMLElement) => {
for (; elem.parentElement; elem = elem.parentElement) {
if (elem.classList.contains(props.editorClassName)) {
return true;
}
}
return false;
};
let lastInCodeMirrorContextMenuTimestamp = 0;
// The browser's contextmenu event provides additional information about the
// target of the event, not provided by the Electron context-menu event.
const onBrowserContextMenu = (event: Event) => {
if (isAncestorOfCodeMirrorEditor(event.target as HTMLElement)) {
lastInCodeMirrorContextMenuTimestamp = Date.now();
}
};
function pointerInsideEditor(params: ContextMenuParams) {
const x = params.x, y = params.y, isEditable = params.isEditable;
const elements = document.getElementsByClassName(props.editorClassName);
// Note: We can't check inputFieldType here. When spellcheck is enabled,
// params.inputFieldType is "none". When spellcheck is disabled,
// params.inputFieldType is "plainText". Thus, such a check would be inconsistent.
if (!elements.length || !isEditable) return false;
const maximumMsSinceBrowserEvent = 100;
if (Date.now() - lastInCodeMirrorContextMenuTimestamp > maximumMsSinceBrowserEvent) {
return false;
}
const rect = convertToScreenCoordinates(Setting.value('windowContentZoomFactor'), elements[0].getBoundingClientRect());
return rect.x < x && rect.y < y && rect.right > x && rect.bottom > y;
}
async function onContextMenu(event: ContextMenuEvent, params: ContextMenuParams) {
if (!pointerInsideEditor(params)) return;
// Don't show the default menu.
event.preventDefault();
const menu = new Menu();
const hasSelectedText = editorRef.current && !!editorRef.current.getSelection() ;
menu.append(
new MenuItem({
label: _('Cut'),
enabled: hasSelectedText,
click: async () => {
props.editorCutText();
},
}),
);
menu.append(
new MenuItem({
label: _('Copy'),
enabled: hasSelectedText,
click: async () => {
props.editorCopyText();
},
}),
);
menu.append(
new MenuItem({
label: _('Paste'),
enabled: true,
click: async () => {
props.editorPaste();
},
}),
);
const spellCheckerMenuItems = SpellCheckerService.instance().contextMenuItems(params.misspelledWord, params.dictionarySuggestions);
for (const item of spellCheckerMenuItems) {
menu.append(new MenuItem(item));
}
// CodeMirror 5 only:
// Typically CodeMirror handles all interactions itself (highlighting etc.)
// But in the case of clicking a mispelled word, we need electron to handle the click
// The result is that CodeMirror doesn't know what's been selected and doesn't
// move the cursor into the correct location.
// and when the user selects a new spelling it will be inserted in the wrong location
// So in this situation, we use must manually align the internal codemirror selection
// to the contextmenu selection
if (editorRef.current && !editorRef.current.cm6 && spellCheckerMenuItems.length > 0) {
(editorRef.current as any).alignSelection(params);
}
let filterObject: EditContextMenuFilterObject = {
items: [],
};
filterObject = await eventManager.filterEmit('editorContextMenu', filterObject);
for (const item of filterObject.items) {
menu.append(new MenuItem({
label: item.label,
click: async () => {
const args = item.commandArgs || [];
void CommandService.instance().execute(item.commandName, ...args);
},
type: item.type,
}));
}
// eslint-disable-next-line github/array-foreach -- Old code before rule was applied
menuUtils.pluginContextMenuItems(props.plugins, MenuItemLocation.EditorContextMenu).forEach((item: any) => {
menu.append(new MenuItem(item));
});
menu.popup();
}
// Prepend the event listener so that it gets called before
// the listener that shows the default menu.
bridge().window().webContents.prependListener('context-menu', onContextMenu);
window.addEventListener('contextmenu', onBrowserContextMenu);
return () => {
bridge().window().webContents.off('context-menu', onContextMenu);
window.removeEventListener('contextmenu', onBrowserContextMenu);
};
}, [
props.plugins, props.editorClassName, editorRef,
props.editorCutText, props.editorCopyText, props.editorPaste,
]);
};
export default useContextMenu;

11
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useKeymap.ts
View File

@@ -4,6 +4,7 @@ import KeymapService, { KeymapItem } from '@joplin/lib/services/KeymapService';
import { EditorCommand } from '../../../utils/types';
import shim from '@joplin/lib/shim';
import { reg } from '@joplin/lib/registry';
import setupVim from './setupVim';
export default function useKeymap(CodeMirror: any) {
@@ -17,14 +18,6 @@ export default function useKeymap(CodeMirror: any) {
CodeMirror.keyMap.emacs['Shift-Tab'] = 'smartListUnindent';
}
function setupVim() {
CodeMirror.Vim.defineAction('swapLineDown', CodeMirror.commands.swapLineDown);
CodeMirror.Vim.mapCommand('<A-j>', 'action', 'swapLineDown', {}, { context: 'normal', isEdit: true });
CodeMirror.Vim.defineAction('swapLineUp', CodeMirror.commands.swapLineUp);
CodeMirror.Vim.mapCommand('<A-k>', 'action', 'swapLineUp', {}, { context: 'normal', isEdit: true });
CodeMirror.Vim.defineAction('insertListElement', CodeMirror.commands.vimInsertListElement);
CodeMirror.Vim.mapCommand('o', 'action', 'insertListElement', { after: true }, { context: 'normal', isEdit: true, interlaceInsertRepeat: true });
}
function isEditorCommand(command: string) {
return command.startsWith('editor.');
}
@@ -184,7 +177,7 @@ export default function useKeymap(CodeMirror: any) {
keymapService.on('keymapChange', registerKeymap);
setupEmacs();
setupVim();
setupVim(CodeMirror);
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
}, []);
}

82
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useStyles.ts Normal file
View File

@@ -0,0 +1,82 @@
import { Theme } from '@joplin/lib/themes/type';
import { NoteBodyEditorProps } from '../../../utils/types';
import { buildStyle } from '@joplin/lib/theme';
import { useMemo } from 'react';
const useStyles = (props: NoteBodyEditorProps) => {
return useMemo(() => {
return buildStyle(['CodeMirror', props.fontSize], props.themeId, (theme: Theme) => {
return {
root: {
position: 'relative',
display: 'flex',
flexDirection: 'column',
minHeight: 0,
...props.style,
},
rowToolbar: {
position: 'relative',
display: 'flex',
flexDirection: 'row',
},
rowEditorViewer: {
position: 'relative',
display: 'flex',
flexDirection: 'row',
flex: 1,
paddingTop: 10,
// Allow the editor container to shrink (allowing the editor to scroll)
minHeight: 0,
},
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: `${Math.round(17 * props.fontSize / 12)}px`,
fontSize: `${props.fontSize}px`,
color: theme.color,
backgroundColor: theme.backgroundColor,
// CM5 only
codeMirrorTheme: theme.codeMirrorTheme, // Defined in theme.js
},
// CM6 only
globalTheme: {
...theme,
fontFamily: 'inherit',
fontSize: props.fontSize,
fontSizeUnits: 'px',
isDesktop: true,
},
};
});
}, [props.style, props.themeId, props.fontSize]);
};
export default useStyles;

46
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useWebviewIpcMessage.ts Normal file
View File

@@ -0,0 +1,46 @@
import type CodeMirror5Emulation from '@joplin/editor/CodeMirror/CodeMirror5Emulation/CodeMirror5Emulation';
import shared from '@joplin/lib/components/shared/note-screen-shared';
import { useCallback, RefObject } from 'react';
interface Props {
onMessage(event: any): void;
getLineScrollPercent(): number;
setEditorPercentScroll(fraction: number): void;
editorRef: RefObject<CodeMirror5Emulation>;
content: string;
}
const useWebviewIpcMessage = (props: Props) => {
const editorRef = props.editorRef;
return 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 { line, from, to } = shared.toggleCheckboxRange(msg, props.content);
if (editorRef.current) {
// To cancel CodeMirror's layout drift, the scroll position
// is recorded before updated, and then it is restored.
// Ref. https://github.com/laurent22/joplin/issues/5890
const percent = props.getLineScrollPercent();
editorRef.current.replaceRange(line, from, to);
props.setEditorPercentScroll(percent);
}
} else if (msg === 'percentScroll') {
const percent = arg0;
props.setEditorPercentScroll(percent);
} else {
props.onMessage(event);
}
}, [
props.onMessage,
props.content,
editorRef,
props.getLineScrollPercent,
props.setEditorPercentScroll,
]);
};
export default useWebviewIpcMessage;

224
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx → packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v5/CodeMirror.tsx
View File

@@ -1,55 +1,45 @@
import * as React from 'react';
import { useState, useEffect, useRef, forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
import { useState, useEffect, useRef, forwardRef, useCallback, useImperativeHandle, useMemo, ForwardedRef } from 'react';
// eslint-disable-next-line no-unused-vars
import { EditorCommand, NoteBodyEditorProps } from '../../utils/types';
import { commandAttachFileToBody, getResourcesFromPasteEvent } from '../../utils/resourceHandling';
import { ScrollOptions, ScrollOptionTypes } from '../../utils/types';
import { CommandValue } from '../../utils/types';
import { usePrevious, cursorPositionToTextOffset } from './utils';
import useScrollHandler from './utils/useScrollHandler';
import { EditorCommand, NoteBodyEditorProps, NoteBodyEditorRef } from '../../../utils/types';
import { commandAttachFileToBody, getResourcesFromPasteEvent } from '../../../utils/resourceHandling';
import { ScrollOptions, ScrollOptionTypes } from '../../../utils/types';
import { CommandValue } from '../../../utils/types';
import { usePrevious, cursorPositionToTextOffset } from '../utils';
import useScrollHandler from '../utils/useScrollHandler';
import useElementSize from '@joplin/lib/hooks/useElementSize';
import Toolbar from './Toolbar';
import styles_ from './styles';
import { RenderedBody, defaultRenderedBody } from './utils/types';
import NoteTextViewer from '../../../NoteTextViewer';
import Toolbar from '../Toolbar';
import { RenderedBody, defaultRenderedBody } from '../utils/types';
import NoteTextViewer from '../../../../NoteTextViewer';
import Editor from './Editor';
import usePluginServiceRegistration from '../../utils/usePluginServiceRegistration';
import usePluginServiceRegistration from '../../../utils/usePluginServiceRegistration';
import Setting from '@joplin/lib/models/Setting';
import Note from '@joplin/lib/models/Note';
import { _ } from '@joplin/lib/locale';
import bridge from '../../../../services/bridge';
import bridge from '../../../../../services/bridge';
import markdownUtils from '@joplin/lib/markdownUtils';
import shim from '@joplin/lib/shim';
import { MenuItemLocation } from '@joplin/lib/services/plugins/api/types';
import MenuUtils from '@joplin/lib/services/commands/MenuUtils';
import CommandService from '@joplin/lib/services/CommandService';
import { themeStyle } from '@joplin/lib/theme';
import { ThemeAppearance } from '@joplin/lib/themes/type';
import SpellCheckerService from '@joplin/lib/services/spellChecker/SpellCheckerService';
import dialogs from '../../../dialogs';
import convertToScreenCoordinates from '../../../utils/convertToScreenCoordinates';
import dialogs from '../../../../dialogs';
import { MarkupToHtml } from '@joplin/renderer';
const { clipboard } = require('electron');
const debounce = require('debounce');
import shared from '@joplin/lib/components/shared/note-screen-shared';
const Menu = bridge().Menu;
const MenuItem = bridge().MenuItem;
import { reg } from '@joplin/lib/registry';
import ErrorBoundary from '../../../ErrorBoundary';
import { MarkupToHtmlOptions } from '../../utils/useMarkupToHtml';
import eventManager from '@joplin/lib/eventManager';
import { EditContextMenuFilterObject } from '@joplin/lib/services/plugins/api/JoplinWorkspace';
import type { ContextMenuEvent, ContextMenuParams } from 'electron';
const menuUtils = new MenuUtils(CommandService.instance());
import { reg } from '@joplin/lib/registry';
import ErrorBoundary from '../../../../ErrorBoundary';
import { MarkupToHtmlOptions } from '../../../utils/useMarkupToHtml';
import useStyles from '../utils/useStyles';
import useContextMenu from '../utils/useContextMenu';
import useWebviewIpcMessage from '../utils/useWebviewIpcMessage';
function markupRenderOptions(override: MarkupToHtmlOptions = null): MarkupToHtmlOptions {
return { ...override };
}
function CodeMirror(props: NoteBodyEditorProps, ref: any) {
const styles = styles_(props);
function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditorRef>) {
const styles = useStyles(props);
const [renderedBody, setRenderedBody] = useState<RenderedBody>(defaultRenderedBody()); // Viewer content
const [renderedBodyContentKey, setRenderedBodyContentKey] = useState<string>(null);
@@ -599,29 +589,13 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
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 { line, from, to } = shared.toggleCheckboxRange(msg, props.content);
if (editorRef.current) {
// To cancel CodeMirror's layout drift, the scroll position
// is recorded before updated, and then it is restored.
// Ref. https://github.com/laurent22/joplin/issues/5890
const percent = getLineScrollPercent();
editorRef.current.replaceRange(line, from, to);
setEditorPercentScroll(percent);
}
} else if (msg === 'percentScroll') {
const percent = arg0;
setEditorPercentScroll(percent);
} else {
props.onMessage(event);
}
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
}, [props.onMessage, props.content, setEditorPercentScroll]);
const webview_ipcMessage = useWebviewIpcMessage({
editorRef,
setEditorPercentScroll,
getLineScrollPercent,
content: props.content,
onMessage: props.onMessage,
});
useEffect(() => {
let cancelled = false;
@@ -779,142 +753,12 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
editorRef.current.refresh();
}, [rootSize, styles.editor, props.visiblePanes]);
// The below code adds support for spellchecking when it is enabled
// It might be buggy, refer to the below issue
// https://github.com/laurent22/joplin/pull/3974#issuecomment-718936703
useEffect(() => {
const isAncestorOfCodeMirrorEditor = (elem: HTMLElement) => {
for (; elem.parentElement; elem = elem.parentElement) {
if (elem.classList.contains('codeMirrorEditor')) {
return true;
}
}
return false;
};
let lastInCodeMirrorContextMenuTimestamp = 0;
// The browser's contextmenu event provides additional information about the
// target of the event, not provided by the Electron context-menu event.
const onBrowserContextMenu = (event: Event) => {
if (isAncestorOfCodeMirrorEditor(event.target as HTMLElement)) {
lastInCodeMirrorContextMenuTimestamp = Date.now();
}
};
function pointerInsideEditor(params: ContextMenuParams) {
const x = params.x, y = params.y, isEditable = params.isEditable;
const elements = document.getElementsByClassName('codeMirrorEditor');
// Note: We can't check inputFieldType here. When spellcheck is enabled,
// params.inputFieldType is "none". When spellcheck is disabled,
// params.inputFieldType is "plainText". Thus, such a check would be inconsistent.
if (!elements.length || !isEditable) return false;
const maximumMsSinceBrowserEvent = 100;
if (Date.now() - lastInCodeMirrorContextMenuTimestamp > maximumMsSinceBrowserEvent) {
return false;
}
const rect = convertToScreenCoordinates(Setting.value('windowContentZoomFactor'), elements[0].getBoundingClientRect());
return rect.x < x && rect.y < y && rect.right > x && rect.bottom > y;
}
async function onContextMenu(event: ContextMenuEvent, params: ContextMenuParams) {
if (!pointerInsideEditor(params)) return;
// Don't show the default menu.
event.preventDefault();
const menu = new Menu();
const hasSelectedText = editorRef.current && !!editorRef.current.getSelection() ;
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 () => {
editorPaste();
},
}),
);
const spellCheckerMenuItems = SpellCheckerService.instance().contextMenuItems(params.misspelledWord, params.dictionarySuggestions);
for (const item of spellCheckerMenuItems) {
menu.append(new MenuItem(item));
}
// Typically CodeMirror handles all interactions itself (highlighting etc.)
// But in the case of clicking a mispelled word, we need electron to handle the click
// The result is that CodeMirror doesn't know what's been selected and doesn't
// move the cursor into the correct location.
// and when the user selects a new spelling it will be inserted in the wrong location
// So in this situation, we use must manually align the internal codemirror selection
// to the contextmenu selection
if (editorRef.current && spellCheckerMenuItems.length > 0) {
editorRef.current.alignSelection(params);
}
let filterObject: EditContextMenuFilterObject = {
items: [],
};
filterObject = await eventManager.filterEmit('editorContextMenu', filterObject);
for (const item of filterObject.items) {
menu.append(new MenuItem({
label: item.label,
click: async () => {
const args = item.commandArgs || [];
void CommandService.instance().execute(item.commandName, ...args);
},
type: item.type,
}));
}
// eslint-disable-next-line github/array-foreach -- Old code before rule was applied
menuUtils.pluginContextMenuItems(props.plugins, MenuItemLocation.EditorContextMenu).forEach((item: any) => {
menu.append(new MenuItem(item));
});
menu.popup();
}
// Prepend the event listener so that it gets called before
// the listener that shows the default menu.
bridge().window().webContents.prependListener('context-menu', onContextMenu);
window.addEventListener('contextmenu', onBrowserContextMenu);
return () => {
bridge().window().webContents.off('context-menu', onContextMenu);
window.removeEventListener('contextmenu', onBrowserContextMenu);
};
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
}, [props.plugins]);
useContextMenu({
plugins: props.plugins,
editorCutText, editorCopyText, editorPaste,
editorRef,
editorClassName: 'codeMirrorEditor',
});
function renderEditor() {

18
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/Editor.tsx → packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v5/Editor.tsx
View File

@@ -12,15 +12,15 @@ import 'codemirror/addon/scroll/annotatescrollbar';
import 'codemirror/addon/search/matchesonscrollbar';
import 'codemirror/addon/search/searchcursor';
import useListIdent from './utils/useListIdent';
import useScrollUtils from './utils/useScrollUtils';
import useCursorUtils from './utils/useCursorUtils';
import useLineSorting from './utils/useLineSorting';
import useEditorSearch from './utils/useEditorSearch';
import useJoplinMode from './utils/useJoplinMode';
import useKeymap from './utils/useKeymap';
import useExternalPlugins from './utils/useExternalPlugins';
import useJoplinCommands from './utils/useJoplinCommands';
import useListIdent from '../utils/useListIdent';
import useScrollUtils from '../utils/useScrollUtils';
import useCursorUtils from '../utils/useCursorUtils';
import useLineSorting from '../utils/useLineSorting';
import useEditorSearch from '../utils/useEditorSearch';
import useJoplinMode from '../utils/useJoplinMode';
import useKeymap from '../utils/useKeymap';
import useExternalPlugins from '../utils/useExternalPlugins';
import useJoplinCommands from '../utils/useJoplinCommands';
import 'codemirror/keymap/emacs';
import 'codemirror/keymap/vim';

428
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/CodeMirror.tsx Normal file
View File

@@ -0,0 +1,428 @@
import * as React from 'react';
import { useState, useEffect, useRef, forwardRef, useCallback, useImperativeHandle, useMemo, ForwardedRef } from 'react';
import { EditorCommand, NoteBodyEditorProps, NoteBodyEditorRef, OnChangeEvent } from '../../../utils/types';
import { getResourcesFromPasteEvent } from '../../../utils/resourceHandling';
import { ScrollOptions, ScrollOptionTypes } from '../../../utils/types';
import NoteTextViewer from '../../../../NoteTextViewer';
import Editor from './Editor';
import usePluginServiceRegistration from '../../../utils/usePluginServiceRegistration';
import Setting from '@joplin/lib/models/Setting';
import Note from '@joplin/lib/models/Note';
import { _ } from '@joplin/lib/locale';
import bridge from '../../../../../services/bridge';
import shim from '@joplin/lib/shim';
import { MarkupToHtml } from '@joplin/renderer';
const { clipboard } = require('electron');
import { reg } from '@joplin/lib/registry';
import ErrorBoundary from '../../../../ErrorBoundary';
import { MarkupToHtmlOptions } from '../../../utils/useMarkupToHtml';
import { EditorKeymap, EditorLanguageType, EditorSettings } from '@joplin/editor/types';
import useStyles from '../utils/useStyles';
import { EditorEvent, EditorEventType } from '@joplin/editor/events';
import useScrollHandler from '../utils/useScrollHandler';
import Logger from '@joplin/utils/Logger';
import useEditorCommands from './useEditorCommands';
import CodeMirrorControl from '@joplin/editor/CodeMirror/CodeMirrorControl';
import useContextMenu from '../utils/useContextMenu';
import useWebviewIpcMessage from '../utils/useWebviewIpcMessage';
import Toolbar from '../Toolbar';
const logger = Logger.create('CodeMirror6');
const logDebug = (message: string) => logger.debug(message);
interface RenderedBody {
html: string;
pluginAssets: any[];
}
function defaultRenderedBody(): RenderedBody {
return {
html: '',
pluginAssets: [],
};
}
function markupRenderOptions(override: MarkupToHtmlOptions = null): MarkupToHtmlOptions {
return { ...override };
}
const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditorRef>) => {
const styles = useStyles(props);
const [renderedBody, setRenderedBody] = useState<RenderedBody>(defaultRenderedBody()); // Viewer content
const [renderedBodyContentKey, setRenderedBodyContentKey] = useState<string>(null);
const [webviewReady, setWebviewReady] = useState(false);
const editorRef = useRef<CodeMirrorControl>(null);
const rootRef = useRef(null);
const webviewRef = useRef(null);
type OnChangeCallback = (event: OnChangeEvent)=> void;
const props_onChangeRef = useRef<OnChangeCallback>(null);
props_onChangeRef.current = props.onChange;
const [selectionRange, setSelectionRange] = useState({ from: 0, to: 0 });
const {
resetScroll, editor_scroll, setEditorPercentScroll, setViewerPercentScroll, getLineScrollPercent,
} = useScrollHandler(editorRef, webviewRef, props.onScroll);
usePluginServiceRegistration(ref);
const codeMirror_change = useCallback((newBody: string) => {
if (newBody !== props.content) {
props_onChangeRef.current({ changeId: null, content: newBody });
}
}, [props.content]);
const onEditorPaste = useCallback(async (event: any = null) => {
const resourceMds = await getResourcesFromPasteEvent(event);
if (!resourceMds.length) return;
if (editorRef.current) {
editorRef.current.insertText(resourceMds.join('\n'));
}
}, []);
const editorCutText = useCallback(() => {
if (editorRef.current) {
const selections = editorRef.current.getSelections();
if (selections.length > 0 && selections[0]) {
clipboard.writeText(selections[0]);
// Easy way to wipe out just the first selection
selections[0] = '';
editorRef.current.replaceSelections(selections);
} else {
const cursor = editorRef.current.getCursor();
const line = editorRef.current.getLine(cursor.line);
clipboard.writeText(`${line}\n`);
const startLine = editorRef.current.getCursor('head');
startLine.ch = 0;
const endLine = {
line: startLine.line + 1,
ch: 0,
};
editorRef.current.replaceRange('', startLine, endLine);
}
}
}, []);
const editorCopyText = useCallback(() => {
if (editorRef.current) {
const selections = editorRef.current.getSelections();
// Handle the case when there is a selection - copy the selection to the clipboard
// When there is no selection, the selection array contains an empty string.
if (selections.length > 0 && selections[0]) {
clipboard.writeText(selections[0]);
} else {
// This is the case when there is no selection - copy the current line to the clipboard
const cursor = editorRef.current.getCursor();
const line = editorRef.current.getLine(cursor.line);
clipboard.writeText(line);
}
}
}, []);
const editorPasteText = useCallback(async () => {
if (editorRef.current) {
const modifiedMd = await Note.replaceResourceExternalToInternalLinks(clipboard.readText(), { useAbsolutePaths: true });
editorRef.current.insertText(modifiedMd);
}
}, []);
const editorPaste = useCallback(() => {
const clipboardText = clipboard.readText();
if (clipboardText) {
void editorPasteText();
} else {
// To handle pasting images
void onEditorPaste();
}
}, [editorPasteText, onEditorPaste]);
const commands = useEditorCommands({
webviewRef,
editorRef,
selectionRange,
editorCopyText, editorCutText, editorPaste,
editorContent: props.content,
visiblePanes: props.visiblePanes,
});
useImperativeHandle(ref, () => {
return {
content: () => props.content,
resetScroll: () => {
resetScroll();
},
scrollTo: (options: ScrollOptions) => {
if (options.type === ScrollOptionTypes.Hash) {
if (!webviewRef.current) return;
webviewRef.current.send('scrollToHash', options.value as string);
} else if (options.type === ScrollOptionTypes.Percent) {
const percent = options.value as number;
setEditorPercentScroll(percent);
setViewerPercentScroll(percent);
} else {
throw new Error(`Unsupported scroll options: ${options.type}`);
}
},
supportsCommand: (name: string) => {
return name in commands || editorRef.current.supportsCommand(name);
},
execCommand: async (cmd: EditorCommand) => {
if (!editorRef.current) return false;
logger.debug('execCommand', cmd);
let commandOutput = null;
if (cmd.name in commands) {
commandOutput = (commands as any)[cmd.name](cmd.value);
} else if (editorRef.current.supportsCommand(cmd.name)) {
commandOutput = editorRef.current.execCommand(cmd.name);
} else if (editorRef.current.supportsJoplinCommand(cmd.name)) {
commandOutput = editorRef.current.execJoplinCommand(cmd.name);
} else {
reg.logger().warn('CodeMirror: unsupported Joplin command: ', cmd);
}
return commandOutput;
},
};
}, [props.content, commands, resetScroll, setEditorPercentScroll, setViewerPercentScroll]);
const webview_domReady = useCallback(() => {
setWebviewReady(true);
}, []);
const webview_ipcMessage = useWebviewIpcMessage({
editorRef,
setEditorPercentScroll,
getLineScrollPercent,
content: props.content,
onMessage: props.onMessage,
});
useEffect(() => {
let cancelled = false;
// When a new note is loaded (contentKey is different), we want the note to be displayed
// right away. However once that's done, we put a small delay so that the view is not
// being constantly updated while the user changes the note.
const interval = renderedBodyContentKey !== props.contentKey ? 0 : 500;
const timeoutId = shim.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,
contentMaxWidth: props.contentMaxWidth,
mapsToLine: true,
// Always using useCustomPdfViewer for now, we can add a new setting for it in future if we need to.
useCustomPdfViewer: props.useCustomPdfViewer,
noteId: props.noteId,
vendorDir: bridge().vendorDir(),
}));
if (cancelled) return;
setRenderedBody(result);
// Since we set `renderedBodyContentKey` here, it means this effect is going to
// be triggered again, but that's hard to avoid and the second call would be cheap
// anyway since the renderered markdown is cached by MdToHtml. We could use a ref
// to avoid this, but a second rendering might still happens anyway to render images,
// resources, or for other reasons. So it's best to focus on making any second call
// to this effect as cheap as possible with caching, etc.
setRenderedBodyContentKey(props.contentKey);
}, interval);
return () => {
cancelled = true;
shim.clearTimeout(timeoutId);
};
}, [
props.content, props.contentKey, renderedBodyContentKey, props.contentMarkupLanguage,
props.visiblePanes, props.resourceInfos, props.markupToHtml, props.contentMaxWidth,
props.noteId, props.useCustomPdfViewer,
]);
useEffect(() => {
if (!webviewReady) return;
let lineCount = 0;
if (editorRef.current) {
lineCount = editorRef.current.editor.state.doc.lines;
}
const options: any = {
pluginAssets: renderedBody.pluginAssets,
downloadResources: Setting.value('sync.resourceDownloadMode'),
markupLineCount: lineCount,
};
// It seems when there's an error immediately when the component is
// mounted, webviewReady might be true, but webviewRef.current will be
// undefined. Maybe due to the error boundary that unmount components.
// Since we can't do much about it we just print an error.
if (webviewRef.current) {
// To keep consistency among CodeMirror's editing and scroll percents
// of Editor and Viewer.
const percent = getLineScrollPercent();
setEditorPercentScroll(percent);
options.percent = percent;
webviewRef.current.send('setHtml', renderedBody.html, options);
} else {
console.error('Trying to set HTML on an undefined webview ref');
}
}, [renderedBody, webviewReady, getLineScrollPercent, setEditorPercentScroll]);
const cellEditorStyle = useMemo(() => {
const output = { ...styles.cellEditor };
if (!props.visiblePanes.includes('editor')) {
output.display = 'none'; // Seems to work fine since the refactoring
}
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]);
const editorPaneVisible = props.visiblePanes.indexOf('editor') >= 0;
useEffect(() => {
if (!editorRef.current) return;
// Anytime the user toggles the visible panes AND the editor is visible as a result
// we should focus the editor
// The intuition is that a panel toggle (with editor in view) is the equivalent of
// an editor interaction so users should expect the editor to be focused
if (editorPaneVisible) {
editorRef.current.focus();
}
}, [editorPaneVisible]);
useContextMenu({
plugins: props.plugins,
editorCutText, editorCopyText, editorPaste,
editorRef,
editorClassName: 'cm-editor',
});
const onEditorEvent = useCallback((event: EditorEvent) => {
if (event.kind === EditorEventType.Scroll) {
editor_scroll();
} else if (event.kind === EditorEventType.Change) {
codeMirror_change(event.value);
} else if (event.kind === EditorEventType.SelectionRangeChange) {
setSelectionRange({ from: event.from, to: event.to });
}
}, [editor_scroll, codeMirror_change]);
const editorSettings = useMemo((): EditorSettings => {
const isHTMLNote = props.contentMarkupLanguage === MarkupToHtml.MARKUP_LANGUAGE_HTML;
let keyboardMode = EditorKeymap.Default;
if (props.keyboardMode === 'vim') {
keyboardMode = EditorKeymap.Vim;
} else if (props.keyboardMode === 'emacs') {
keyboardMode = EditorKeymap.Emacs;
}
return {
language: isHTMLNote ? EditorLanguageType.Html : EditorLanguageType.Markdown,
readOnly: props.disabled || props.visiblePanes.indexOf('editor') < 0,
katexEnabled: Setting.value('markdown.plugin.katex'),
themeData: {
...styles.globalTheme,
monospaceFont: Setting.value('style.editor.monospaceFontFamily'),
},
automatchBraces: Setting.value('editor.autoMatchingBraces'),
useExternalSearch: false,
ignoreModifiers: true,
spellcheckEnabled: Setting.value('editor.spellcheckBeta'),
keymap: keyboardMode,
indentWithTabs: true,
};
}, [
props.contentMarkupLanguage, props.disabled, props.visiblePanes,
props.keyboardMode, styles.globalTheme,
]);
// Update the editor's value
useEffect(() => {
if (editorRef.current?.updateBody(props.content)) {
editorRef.current?.clearHistory();
}
}, [props.content]);
const renderEditor = () => {
return (
<div style={cellEditorStyle}>
<Editor
style={styles.editor}
initialText={props.content}
ref={editorRef}
settings={editorSettings}
pluginStates={props.plugins}
onEvent={onEditorEvent}
onLogMessage={logDebug}
/>
</div>
);
};
const renderViewer = () => {
return (
<div style={cellViewerStyle}>
<NoteTextViewer
ref={webviewRef}
themeId={props.themeId}
viewerStyle={styles.viewer}
onIpcMessage={webview_ipcMessage}
onDomReady={webview_domReady}
contentMaxWidth={props.contentMaxWidth}
/>
</div>
);
};
return (
<ErrorBoundary message="The text editor encountered a fatal error and could not continue. The error might be due to a plugin, so please try to disable some of them and try again.">
<div style={styles.root} ref={rootRef}>
<div style={styles.rowToolbar}>
<Toolbar themeId={props.themeId}/>
{props.noteToolbar}
</div>
<div style={styles.rowEditorViewer}>
{renderEditor()}
{renderViewer()}
</div>
</div>
</ErrorBoundary>
);
};
export default forwardRef(CodeMirror);

103
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/Editor.tsx Normal file
View File

@@ -0,0 +1,103 @@
import * as React from 'react';
import { ForwardedRef } from 'react';
import { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
import { EditorProps, LogMessageCallback, OnEventCallback, PluginData } from '@joplin/editor/types';
import createEditor from '@joplin/editor/CodeMirror/createEditor';
import CodeMirrorControl from '@joplin/editor/CodeMirror/CodeMirrorControl';
import { PluginStates } from '@joplin/lib/services/plugins/reducer';
import { ContentScriptType } from '@joplin/lib/services/plugins/api/types';
import shim from '@joplin/lib/shim';
import PluginService from '@joplin/lib/services/plugins/PluginService';
import setupVim from '../utils/setupVim';
interface Props extends EditorProps {
style: React.CSSProperties;
pluginStates: PluginStates;
}
const Editor = (props: Props, ref: ForwardedRef<CodeMirrorControl>) => {
const editorContainerRef = useRef<HTMLDivElement>();
const [editor, setEditor] = useState<CodeMirrorControl|null>(null);
// The editor will only be created once, so callbacks that could
// change need to be stored as references.
const onEventRef = useRef<OnEventCallback>(props.onEvent);
const onLogMessageRef = useRef<LogMessageCallback>(props.onLogMessage);
useEffect(() => {
onEventRef.current = props.onEvent;
onLogMessageRef.current = props.onLogMessage;
}, [props.onEvent, props.onLogMessage]);
useImperativeHandle(ref, () => {
return editor;
}, [editor]);
useEffect(() => {
if (!editor) {
return;
}
const plugins: PluginData[] = [];
for (const pluginId in props.pluginStates) {
const pluginState = props.pluginStates[pluginId];
const codeMirrorContentScripts = pluginState.contentScripts[ContentScriptType.CodeMirrorPlugin] ?? [];
for (const contentScript of codeMirrorContentScripts) {
plugins.push({
pluginId,
contentScriptId: contentScript.id,
contentScriptJs: () => shim.fsDriver().readFile(contentScript.path),
postMessageHandler: (message: any) => {
const plugin = PluginService.instance().pluginById(pluginId);
return plugin.emitContentScriptMessage(contentScript.id, message);
},
});
}
}
void editor.setPlugins(plugins);
}, [editor, props.pluginStates]);
useEffect(() => {
if (!editorContainerRef.current) return () => {};
const editorProps: EditorProps = {
...props,
onEvent: event => onEventRef.current(event),
onLogMessage: message => onLogMessageRef.current(message),
};
const editor = createEditor(editorContainerRef.current, editorProps);
editor.addStyles({
'.cm-scroller': { overflow: 'auto' },
});
setEditor(editor);
return () => {
editor.remove();
};
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Should run just once
}, []);
useEffect(() => {
editor?.updateSettings(props.settings);
}, [props.settings, editor]);
useEffect(() => {
if (!editor) {
return;
}
setupVim(editor);
}, [editor]);
return (
<div
style={props.style}
ref={editorContainerRef}
></div>
);
};
export default forwardRef(Editor);

136
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/useEditorCommands.ts Normal file
View File

@@ -0,0 +1,136 @@
import { RefObject, useMemo } from 'react';
import { CommandValue } from '../../../utils/types';
import { commandAttachFileToBody } from '../../../utils/resourceHandling';
import { _ } from '@joplin/lib/locale';
import dialogs from '../../../../dialogs';
import { EditorCommandType } from '@joplin/editor/types';
import Logger from '@joplin/utils/Logger';
import CodeMirrorControl from '@joplin/editor/CodeMirror/CodeMirrorControl';
const logger = Logger.create('CodeMirror 6 commands');
const wrapSelectionWithStrings = (editor: CodeMirrorControl, string1: string, string2 = '', defaultText = '') => {
if (editor.somethingSelected()) {
editor.wrapSelections(string1, string2);
} else {
editor.wrapSelections(string1 + defaultText, string2);
// Now select the default text so the user can replace it
const selections = editor.listSelections();
const newSelections = [];
for (let i = 0; i < selections.length; i++) {
const s = selections[i];
const anchor = { line: s.anchor.line, ch: s.anchor.ch + string1.length };
const head = { line: s.head.line, ch: s.head.ch - string2.length };
newSelections.push({ anchor: anchor, head: head });
}
editor.setSelections(newSelections);
}
};
interface Props {
webviewRef: RefObject<any>;
editorRef: RefObject<CodeMirrorControl>;
editorContent: string;
editorCutText(): void;
editorCopyText(): void;
editorPaste(): void;
selectionRange: { from: number; to: number };
visiblePanes: string[];
}
const useEditorCommands = (props: Props) => {
const editorRef = props.editorRef;
return useMemo(() => {
const selectedText = () => {
if (!editorRef.current) return '';
return editorRef.current.getSelection();
};
return {
dropItems: async (cmd: any) => {
if (cmd.type === 'notes') {
editorRef.current.insertText(cmd.markdownTags.join('\n'));
} else if (cmd.type === 'files') {
const pos = props.selectionRange.from;
const newBody = await commandAttachFileToBody(props.editorContent, cmd.paths, { createFileURL: !!cmd.createFileURL, position: pos });
editorRef.current.updateBody(newBody);
} else {
logger.warn('CodeMirror: unsupported drop item: ', cmd);
}
},
selectedText: () => {
return selectedText();
},
selectedHtml: () => {
return selectedText();
},
replaceSelection: (value: string) => {
return editorRef.current.insertText(value);
},
textCopy: () => {
props.editorCopyText();
},
textCut: () => {
props.editorCutText();
},
textPaste: () => {
props.editorPaste();
},
textSelectAll: () => {
return editorRef.current.execCommand(EditorCommandType.SelectAll);
},
textLink: async () => {
const url = await dialogs.prompt(_('Insert Hyperlink'));
editorRef.current.focus();
if (url) wrapSelectionWithStrings(editorRef.current, '[', `](${url})`);
},
insertText: (value: any) => editorRef.current.insertText(value),
attachFile: async () => {
const newBody = await commandAttachFileToBody(
props.editorContent, null, { position: props.selectionRange.from },
);
if (newBody) {
editorRef.current.updateBody(newBody);
}
},
textHorizontalRule: () => editorRef.current.insertText('* * *'),
'editor.execCommand': (value: CommandValue) => {
if (!('args' in value)) value.args = [];
if ((editorRef.current as any)[value.name]) {
const result = (editorRef.current as any)[value.name](...value.args);
return result;
} else if (editorRef.current.commandExists(value.name)) {
const result = editorRef.current.execCommand(value.name);
return result;
} else {
logger.warn('CodeMirror execCommand: unsupported command: ', value.name);
}
},
'editor.focus': () => {
if (props.visiblePanes.indexOf('editor') >= 0) {
editorRef.current.editor.focus();
} else {
// If we just call focus() then the iframe is focused,
// but not its content, such that scrolling up / down
// with arrow keys fails
props.webviewRef.current.send('focus');
}
},
search: () => {
editorRef.current.execCommand(EditorCommandType.ShowSearch);
},
};
}, [
props.visiblePanes, props.editorContent, props.editorCopyText, props.editorCutText, props.editorPaste,
props.selectionRange,
props.webviewRef, editorRef,
]);
};
export default useEditorCommands;

11
packages/app-desktop/gui/NoteEditor/NoteEditor.tsx
View File

@@ -1,7 +1,6 @@
import * as React from 'react';
import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
import TinyMCE from './NoteBody/TinyMCE/TinyMCE';
import CodeMirror from './NoteBody/CodeMirror/CodeMirror';
import { connect } from 'react-redux';
import MultiNoteActions from '../MultiNoteActions';
import { htmlToMarkdown, formNoteToNote } from './utils';
@@ -46,6 +45,8 @@ import { ModelType } from '@joplin/lib/BaseModel';
import BaseItem from '@joplin/lib/models/BaseItem';
import { ErrorCode } from '@joplin/lib/errors';
import ItemChange from '@joplin/lib/models/ItemChange';
import CodeMirror6 from './NoteBody/CodeMirror/v6/CodeMirror';
import CodeMirror5 from './NoteBody/CodeMirror/v5/CodeMirror';
const commands = [
require('./commands/showRevisions'),
@@ -380,7 +381,7 @@ function NoteEditor(props: NoteEditorProps) {
};
}, [setShowRevisions]);
const onScroll = useCallback((event: any) => {
const onScroll = useCallback((event: { percent: number }) => {
props.dispatch({
type: 'EDITOR_SCROLL_PERCENT_SET',
// In callbacks of setTimeout()/setInterval(), props/state cannot be used
@@ -462,7 +463,9 @@ function NoteEditor(props: NoteEditorProps) {
if (props.bodyEditor === 'TinyMCE') {
editor = <TinyMCE {...editorProps}/>;
} else if (props.bodyEditor === 'CodeMirror') {
editor = <CodeMirror {...editorProps}/>;
editor = <CodeMirror5 {...editorProps}/>;
} else if (props.bodyEditor === 'CodeMirror6') {
editor = <CodeMirror6 {...editorProps}/>;
} else {
throw new Error(`Invalid editor: ${props.bodyEditor}`);
}
@@ -602,7 +605,7 @@ function NoteEditor(props: NoteEditorProps) {
disabled={isReadOnly}
/>
{renderSearchInfo()}
<div style={{ display: 'flex', flex: 1, paddingLeft: theme.editorPaddingLeft, maxHeight: '100%' }}>
<div style={{ display: 'flex', flex: 1, paddingLeft: theme.editorPaddingLeft, maxHeight: '100%', minHeight: '0' }}>
{editor}
</div>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>

11
packages/app-desktop/gui/NoteEditor/utils/types.ts
View File

@@ -48,6 +48,15 @@ export interface NoteEditorProps {
syncUserId: string;
}
export interface NoteBodyEditorRef {
content(): string|Promise<string>;
resetScroll(): void;
scrollTo(options: ScrollOptions): void;
supportsCommand(name: string): boolean;
execCommand(command: CommandValue): Promise<void>;
}
export interface NoteBodyEditorProps {
style: any;
ref: any;
@@ -59,7 +68,7 @@ export interface NoteBodyEditorProps {
onChange(event: OnChangeEvent): void;
onWillChange(event: any): void;
onMessage(event: any): void;
onScroll(event: any): void;
onScroll(event: { percent: number }): void;
markupToHtml: (markupLanguage: MarkupLanguage, markup: string, options: MarkupToHtmlOptions)=> Promise<RenderResult>;
// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
htmlToMarkdown: Function;

1
packages/app-desktop/package.json
View File

@@ -143,6 +143,7 @@
"@electron/remote": "2.0.11",
"@fortawesome/fontawesome-free": "5.15.4",
"@joeattardi/emoji-button": "4.6.4",
"@joplin/editor": "~2.13",
"@joplin/lib": "~2.13",
"@joplin/renderer": "~2.13",
"@joplin/utils": "~2.13",

59
packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.test.ts
View File

@@ -1,59 +0,0 @@
/**
* @jest-environment jsdom
*/
import { EditorSettings } from '../types';
import { initCodeMirror } from './CodeMirror';
import { themeStyle } from '@joplin/lib/theme';
import Setting from '@joplin/lib/models/Setting';
import { forceParsing } from '@codemirror/language';
import loadLangauges from './testUtil/loadLanguages';
import { expect, describe, it } from '@jest/globals';
const createEditorSettings = (themeId: number) => {
const themeData = themeStyle(themeId);
const editorSettings: EditorSettings = {
katexEnabled: true,
spellcheckEnabled: true,
readOnly: false,
themeId,
themeData,
};
return editorSettings;
};
describe('CodeMirror', () => {
// This checks for a regression -- occasionally, when updating packages,
// syntax highlighting in the CodeMirror editor stops working. This is usually
// fixed by
// 1. removing all `@codemirror/` and `@lezer/` dependencies from yarn.lock,
// 2. upgrading all CodeMirror packages to the latest versions in package.json, and
// 3. re-running `yarn install`.
//
// See https://github.com/laurent22/joplin/issues/7253
it('should give headings a different style', async () => {
const headerLineText = '# Testing...';
const initialText = `${headerLineText}\nThis is a test.`;
const editorSettings = createEditorSettings(Setting.THEME_LIGHT);
await loadLangauges();
const editor = initCodeMirror(document.body, initialText, editorSettings);
// Force the generation of the syntax tree now.
forceParsing(editor.editor);
// CodeMirror nests the tag that styles the header within .cm-headerLine:
// <div class='cm-headerLine'><span class='someclass'>Testing...</span></div>
const headerLineContent = document.body.querySelector('.cm-headerLine > span')!;
expect(headerLineContent.textContent).toBe(headerLineText);
const style = getComputedStyle(headerLineContent);
expect(style.borderBottom).not.toBe('');
expect(style.fontSize).toBe('1.6em');
});
});

452
packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts
View File

@@ -9,448 +9,24 @@
// wrapper to access CodeMirror functionalities. Anything else should be done
// from NoteEditor.tsx.
import { MarkdownMathExtension } from './markdownMathParser';
import createTheme from './theme';
import decoratorExtension from './decoratorExtension';
import syntaxHighlightingLanguages from './syntaxHighlightingLanguages';
import { EditorState } from '@codemirror/state';
import { markdown } from '@codemirror/lang-markdown';
import { GFM as GitHubFlavoredMarkdownExtension } from '@lezer/markdown';
import { indentOnInput, indentUnit, syntaxTree } from '@codemirror/language';
import {
openSearchPanel, closeSearchPanel, SearchQuery, setSearchQuery, getSearchQuery,
/* highlightSelectionMatches, */ search, findNext, findPrevious, replaceAll, replaceNext,
} from '@codemirror/search';
import {
EditorView, drawSelection, highlightSpecialChars, ViewUpdate, Command,
} from '@codemirror/view';
import { undo, redo, history, undoDepth, redoDepth, indentWithTab } from '@codemirror/commands';
import { keymap, KeyBinding } from '@codemirror/view';
import { searchKeymap } from '@codemirror/search';
import { historyKeymap, defaultKeymap } from '@codemirror/commands';
import { CodeMirrorControl } from './types';
import { EditorSettings, ListType, SearchState } from '../types';
import { ChangeEvent, SelectionChangeEvent, Selection } from '../types';
import SelectionFormatting from '../SelectionFormatting';
import { EditorSettings } from '@joplin/editor/types';
import createEditor from '@joplin/editor/CodeMirror/createEditor';
import { logMessage, postMessage } from './webviewLogger';
import {
decreaseIndent, increaseIndent,
toggleBolded, toggleCode,
toggleHeaderLevel, toggleItalicized,
toggleList, toggleMath, updateLink,
} from './markdownCommands';
interface CodeMirrorResult extends CodeMirrorControl {
editor: EditorView;
}
import CodeMirrorControl from '@joplin/editor/CodeMirror/CodeMirrorControl';
export function initCodeMirror(
parentElement: any, initialText: string, settings: EditorSettings,
): CodeMirrorResult {
logMessage('Initializing CodeMirror...');
const theme = settings.themeData;
parentElement: HTMLElement, initialText: string, settings: EditorSettings,
): CodeMirrorControl {
return createEditor(parentElement, {
initialText,
settings,
let searchVisible = false;
let schedulePostUndoRedoDepthChangeId_: any = 0;
const schedulePostUndoRedoDepthChange = (editor: EditorView, doItNow = false) => {
if (schedulePostUndoRedoDepthChangeId_) {
if (doItNow) {
clearTimeout(schedulePostUndoRedoDepthChangeId_);
} else {
return;
}
}
schedulePostUndoRedoDepthChangeId_ = setTimeout(() => {
schedulePostUndoRedoDepthChangeId_ = null;
postMessage('onUndoRedoDepthChange', {
undoDepth: undoDepth(editor.state),
redoDepth: redoDepth(editor.state),
});
}, doItNow ? 0 : 1000);
};
const notifyDocChanged = (viewUpdate: ViewUpdate) => {
if (viewUpdate.docChanged) {
const event: ChangeEvent = {
value: editor.state.doc.toString(),
};
postMessage('onChange', event);
schedulePostUndoRedoDepthChange(editor);
}
};
const notifyLinkEditRequest = () => {
postMessage('onRequestLinkEdit', null);
};
const showSearchDialog = () => {
const query = getSearchQuery(editor.state);
const searchState: SearchState = {
searchText: query.search,
replaceText: query.replace,
useRegex: query.regexp,
caseSensitive: query.caseSensitive,
dialogVisible: true,
};
postMessage('onRequestShowSearch', searchState);
searchVisible = true;
};
const hideSearchDialog = () => {
postMessage('onRequestHideSearch', null);
searchVisible = false;
};
const notifySelectionChange = (viewUpdate: ViewUpdate) => {
if (!viewUpdate.state.selection.eq(viewUpdate.startState.selection)) {
const mainRange = viewUpdate.state.selection.main;
const selection: Selection = {
start: mainRange.from,
end: mainRange.to,
};
const event: SelectionChangeEvent = {
selection,
};
postMessage('onSelectionChange', event);
}
};
const notifySelectionFormattingChange = (viewUpdate?: ViewUpdate) => {
// If we can't determine the previous formatting, post the update regardless
if (!viewUpdate) {
const formatting = computeSelectionFormatting(editor.state);
postMessage('onSelectionFormattingChange', formatting.toJSON());
} else if (viewUpdate.docChanged || !viewUpdate.state.selection.eq(viewUpdate.startState.selection)) {
// Only post the update if something changed
const oldFormatting = computeSelectionFormatting(viewUpdate.startState);
const newFormatting = computeSelectionFormatting(viewUpdate.state);
if (!oldFormatting.eq(newFormatting)) {
postMessage('onSelectionFormattingChange', newFormatting.toJSON());
}
}
};
const computeSelectionFormatting = (state: EditorState): SelectionFormatting => {
const range = state.selection.main;
const formatting: SelectionFormatting = new SelectionFormatting();
formatting.selectedText = state.doc.sliceString(range.from, range.to);
formatting.spellChecking = editor.contentDOM.spellcheck;
const parseLinkData = (nodeText: string) => {
const linkMatch = nodeText.match(/\[([^\]]*)\]\(([^)]*)\)/);
if (linkMatch) {
return {
linkText: linkMatch[1],
linkURL: linkMatch[2],
};
}
return null;
};
// Find nodes that overlap/are within the selected region
syntaxTree(state).iterate({
from: range.from, to: range.to,
enter: node => {
// Checklists don't have a specific containing node. As such,
// we're in a checklist if we've selected a 'Task' node.
if (node.name === 'Task') {
formatting.inChecklist = true;
}
// Only handle notes that contain the entire range.
if (node.from > range.from || node.to < range.to) {
return;
}
// Lazily compute the node's text
const nodeText = () => state.doc.sliceString(node.from, node.to);
switch (node.name) {
case 'StrongEmphasis':
formatting.bolded = true;
break;
case 'Emphasis':
formatting.italicized = true;
break;
case 'ListItem':
formatting.listLevel += 1;
break;
case 'BulletList':
formatting.inUnorderedList = true;
break;
case 'OrderedList':
formatting.inOrderedList = true;
break;
case 'TaskList':
formatting.inChecklist = true;
break;
case 'InlineCode':
case 'FencedCode':
formatting.inCode = true;
formatting.unspellCheckableRegion = true;
break;
case 'InlineMath':
case 'BlockMath':
formatting.inMath = true;
formatting.unspellCheckableRegion = true;
break;
case 'ATXHeading1':
formatting.headerLevel = 1;
break;
case 'ATXHeading2':
formatting.headerLevel = 2;
break;
case 'ATXHeading3':
formatting.headerLevel = 3;
break;
case 'ATXHeading4':
formatting.headerLevel = 4;
break;
case 'ATXHeading5':
formatting.headerLevel = 5;
break;
case 'URL':
formatting.inLink = true;
formatting.linkData.linkURL = nodeText();
formatting.unspellCheckableRegion = true;
break;
case 'Link':
formatting.inLink = true;
formatting.linkData = parseLinkData(nodeText());
break;
}
},
});
// The markdown parser marks checklists as unordered lists. Ensure
// that they aren't marked as such.
if (formatting.inChecklist) {
if (!formatting.inUnorderedList) {
// Even if the selection contains a Task, because an unordered list node
// must contain a valid Task node, we're only in a checklist if we're also in
// an unordered list.
formatting.inChecklist = false;
} else {
formatting.inUnorderedList = false;
}
}
if (formatting.unspellCheckableRegion) {
formatting.spellChecking = false;
}
return formatting;
};
// Returns a keyboard command that returns true (so accepts the keybind)
const keyCommand = (key: string, run: Command): KeyBinding => {
return {
key,
run,
preventDefault: true,
};
};
const editor = new EditorView({
state: EditorState.create({
// See https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
// for a sample configuration.
extensions: [
markdown({
extensions: [
GitHubFlavoredMarkdownExtension,
// Don't highlight KaTeX if the user disabled it
settings.katexEnabled ? MarkdownMathExtension : [],
],
codeLanguages: syntaxHighlightingLanguages,
}),
...createTheme(theme),
history(),
search({
createPanel(_: EditorView) {
return {
// The actual search dialog is implemented with react native,
// use a dummy element.
dom: document.createElement('div'),
mount() {
showSearchDialog();
},
destroy() {
hideSearchDialog();
},
};
},
}),
drawSelection(),
highlightSpecialChars(),
// highlightSelectionMatches(),
indentOnInput(),
// By default, indent with four spaces
indentUnit.of(' '),
EditorState.tabSize.of(4),
// Apply styles to entire lines (block-display decorations)
decoratorExtension,
EditorView.lineWrapping,
EditorView.contentAttributes.of({
autocapitalize: 'sentence',
autocorrect: settings.spellcheckEnabled ? 'true' : 'false',
spellcheck: settings.spellcheckEnabled ? 'true' : 'false',
}),
EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
notifyDocChanged(viewUpdate);
notifySelectionChange(viewUpdate);
notifySelectionFormattingChange(viewUpdate);
}),
keymap.of([
// Custom mod-f binding: Toggle the external dialog implementation
// (don't show/hide the Panel dialog).
keyCommand('Mod-f', (_: EditorView) => {
if (searchVisible) {
hideSearchDialog();
} else {
showSearchDialog();
}
return true;
}),
// Markdown formatting keyboard shortcuts
keyCommand('Mod-b', toggleBolded),
keyCommand('Mod-i', toggleItalicized),
keyCommand('Mod-$', toggleMath),
keyCommand('Mod-`', toggleCode),
keyCommand('Mod-[', decreaseIndent),
keyCommand('Mod-]', increaseIndent),
keyCommand('Mod-k', (_: EditorView) => {
notifyLinkEditRequest();
return true;
}),
...defaultKeymap, ...historyKeymap, indentWithTab, ...searchKeymap,
]),
EditorState.readOnly.of(settings.readOnly),
],
doc: initialText,
}),
parent: parentElement,
onLogMessage: message => {
logMessage(message);
},
onEvent: (event): void => {
postMessage('onEditorEvent', event);
},
});
// HACK: 09/02/22: Work around https://github.com/laurent22/joplin/issues/6802 by creating a copy mousedown
// event to prevent the Editor's .preventDefault from making the context menu not appear.
// TODO: Track the upstream issue at https://github.com/codemirror/dev/issues/935 and remove this workaround
// when the upstream bug is fixed.
document.body.addEventListener('mousedown', (evt) => {
if (!evt.isTrusted) {
return;
}
// Walk up the tree -- is evt.target or any of its parent nodes the editor's input region?
for (let current: Record<string, any> = evt.target; current; current = current.parentElement) {
if (current === editor.contentDOM) {
evt.stopPropagation();
const copyEvent = new Event('mousedown', evt);
editor.contentDOM.dispatchEvent(copyEvent);
return;
}
}
}, true);
const updateSearchQuery = (newState: SearchState) => {
const query = new SearchQuery({
search: newState.searchText,
caseSensitive: newState.caseSensitive,
regexp: newState.useRegex,
replace: newState.replaceText,
});
editor.dispatch({
effects: setSearchQuery.of(query),
});
};
const editorControls = {
editor,
undo: () => {
undo(editor);
schedulePostUndoRedoDepthChange(editor, true);
},
redo: () => {
redo(editor);
schedulePostUndoRedoDepthChange(editor, true);
},
select: (anchor: number, head: number) => {
editor.dispatch(editor.state.update({
selection: { anchor, head },
scrollIntoView: true,
}));
},
scrollSelectionIntoView: () => {
editor.dispatch(editor.state.update({
scrollIntoView: true,
}));
},
insertText: (text: string) => {
editor.dispatch(editor.state.replaceSelection(text));
},
toggleFindDialog: () => {
const opened = openSearchPanel(editor);
if (!opened) {
closeSearchPanel(editor);
}
},
// Formatting
toggleBolded: () => { toggleBolded(editor); },
toggleItalicized: () => { toggleItalicized(editor); },
toggleCode: () => { toggleCode(editor); },
toggleMath: () => { toggleMath(editor); },
increaseIndent: () => { increaseIndent(editor); },
decreaseIndent: () => { decreaseIndent(editor); },
toggleList: (kind: ListType) => { toggleList(kind)(editor); },
toggleHeaderLevel: (level: number) => { toggleHeaderLevel(level)(editor); },
updateLink: (label: string, url: string) => { updateLink(label, url)(editor); },
// Search
searchControl: {
findNext: () => {
findNext(editor);
},
findPrevious: () => {
findPrevious(editor);
},
replaceCurrent: () => {
replaceNext(editor);
},
replaceAll: () => {
replaceAll(editor);
},
setSearchState: (state: SearchState) => {
updateSearchQuery(state);
},
showSearch: () => {
showSearchDialog();
},
hideSearch: () => {
hideSearchDialog();
},
},
};
return editorControls;
}

27
packages/app-mobile/components/NoteEditor/CodeMirror/types.ts
View File

@@ -1,27 +0,0 @@
import { ListType, SearchControl } from '../types';
// Controls for the CodeMirror portion of the editor
export interface CodeMirrorControl {
undo(): void;
redo(): void;
select(anchor: number, head: number): void;
insertText(text: string): void;
// Toggle whether we're in a type of region.
toggleBolded(): void;
toggleItalicized(): void;
toggleList(kind: ListType): void;
toggleCode(): void;
toggleMath(): void;
toggleHeaderLevel(level: number): void;
// Create a new link or update the currently selected link with
// the given [label] and [url].
updateLink(label: string, url: string): void;
increaseIndent(): void;
decreaseIndent(): void;
scrollSelectionIntoView(): void;
searchControl: SearchControl;
}

4
packages/app-mobile/components/NoteEditor/EditLinkDialog.tsx
View File

@@ -9,8 +9,8 @@ import Modal from '../Modal';
import { themeStyle } from '@joplin/lib/theme';
import { _ } from '@joplin/lib/locale';
import { EditorControl } from './types';
import SelectionFormatting from './SelectionFormatting';
import { useCallback } from 'react';
import SelectionFormatting from '@joplin/editor/SelectionFormatting';
interface LinkDialogProps {
editorControl: EditorControl;
@@ -21,7 +21,7 @@ interface LinkDialogProps {
const EditLinkDialog = (props: LinkDialogProps) => {
// The content of the link selected in the editor (if any)
const editorLinkData = props.selectionState.linkData ?? {};
const editorLinkData = props.selectionState.linkData;
const [linkLabel, setLinkLabel] = useState('');
const [linkURL, setLinkURL] = useState('');

17
packages/app-mobile/components/NoteEditor/MarkdownToolbar/MarkdownToolbar.tsx
View File

@@ -14,13 +14,14 @@ import { _ } from '@joplin/lib/locale';
import time from '@joplin/lib/time';
import { useEffect } from 'react';
import { Keyboard, ViewStyle } from 'react-native';
import { EditorControl, EditorSettings, ListType, SearchState } from '../types';
import SelectionFormatting from '../SelectionFormatting';
import { EditorControl, EditorSettings } from '../types';
import { ButtonSpec, StyleSheetData } from './types';
import Toolbar from './Toolbar';
import { buttonSize } from './ToolbarButton';
import { Theme } from '@joplin/lib/themes/type';
import ToggleSpaceButton from './ToggleSpaceButton';
import { SearchState } from '@joplin/editor/types';
import SelectionFormatting from '@joplin/editor/SelectionFormatting';
type OnAttachCallback = ()=> void;
@@ -71,9 +72,7 @@ const MarkdownToolbar = (props: MarkdownToolbarProps) => {
),
description: _('Unordered list'),
active: selState.inUnorderedList,
onPress: useCallback(() => {
editorControl.toggleList(ListType.UnorderedList);
}, [editorControl]),
onPress: editorControl.toggleUnorderedList,
priority: -2,
disabled: readOnly,
@@ -85,9 +84,7 @@ const MarkdownToolbar = (props: MarkdownToolbarProps) => {
),
description: _('Ordered list'),
active: selState.inOrderedList,
onPress: useCallback(() => {
editorControl.toggleList(ListType.OrderedList);
}, [editorControl]),
onPress: editorControl.toggleOrderedList,
priority: -2,
disabled: readOnly,
@@ -99,9 +96,7 @@ const MarkdownToolbar = (props: MarkdownToolbarProps) => {
),
description: _('Task list'),
active: selState.inChecklist,
onPress: useCallback(() => {
editorControl.toggleList(ListType.CheckList);
}, [editorControl]),
onPress: editorControl.toggleTaskList,
priority: -2,
disabled: readOnly,

203
packages/app-mobile/components/NoteEditor/NoteEditor.tsx
View File

@@ -5,29 +5,29 @@ import EditLinkDialog from './EditLinkDialog';
import { defaultSearchState, SearchPanel } from './SearchPanel';
import ExtendedWebView from '../ExtendedWebView';
const React = require('react');
import * as React from 'react';
import { forwardRef, RefObject, useImperativeHandle } from 'react';
import { useEffect, useMemo, useState, useCallback, useRef } from 'react';
import { LayoutChangeEvent, View, ViewStyle } from 'react-native';
const { editorFont } = require('../global-style');
import SelectionFormatting from './SelectionFormatting';
import {
EditorSettings, EditorControl,
ChangeEvent, UndoRedoDepthChangeEvent, Selection, SelectionChangeEvent, ListType, SearchState,
} from './types';
import { EditorControl, EditorSettings, SelectionRange } from './types';
import { _ } from '@joplin/lib/locale';
import MarkdownToolbar from './MarkdownToolbar/MarkdownToolbar';
import { ChangeEvent, EditorEvent, EditorEventType, SelectionRangeChangeEvent, UndoRedoDepthChangeEvent } from '@joplin/editor/events';
import { EditorCommandType, EditorKeymap, EditorLanguageType, PluginData, SearchState } from '@joplin/editor/types';
import supportsCommand from '@joplin/editor/CodeMirror/editorCommands/supportsCommand';
import SelectionFormatting, { defaultSelectionFormatting } from '@joplin/editor/SelectionFormatting';
type ChangeEventHandler = (event: ChangeEvent)=> void;
type UndoRedoDepthChangeHandler = (event: UndoRedoDepthChangeEvent)=> void;
type SelectionChangeEventHandler = (event: SelectionChangeEvent)=> void;
type SelectionChangeEventHandler = (event: SelectionRangeChangeEvent)=> void;
type OnAttachCallback = ()=> void;
interface Props {
themeId: number;
initialText: string;
initialSelection?: Selection;
initialSelection?: SelectionRange;
style: ViewStyle;
contentStyle?: ViewStyle;
toolbarEnabled: boolean;
@@ -110,6 +110,11 @@ function editorTheme(themeId: number) {
return {
...themeStyle(themeId),
// To allow accessibility font scaling, we also need to set the
// fontSize to a value in `em`s (relative scaling relative to
// parent font size).
fontSizeUnits: 'em',
fontSize: estimatedFontSizeInEm,
fontFamily: fontFamilyFromSettings(),
};
@@ -120,48 +125,92 @@ type OnSetVisibleCallback = (visible: boolean)=> void;
type OnSearchStateChangeCallback = (state: SearchState)=> void;
const useEditorControl = (
injectJS: OnInjectJSCallback, setLinkDialogVisible: OnSetVisibleCallback,
setSearchState: OnSearchStateChangeCallback, searchStateRef: RefObject<SearchState>,
setSearchState: OnSearchStateChangeCallback,
searchStateRef: RefObject<SearchState>,
): EditorControl => {
return useMemo(() => {
return {
const execCommand = (command: EditorCommandType) => {
injectJS(`cm.execCommand(${JSON.stringify(command)})`);
};
const setSearchStateCallback = (state: SearchState) => {
injectJS(`cm.setSearchState(${JSON.stringify(state)})`);
setSearchState(state);
};
const control: EditorControl = {
supportsCommand(command: EditorCommandType) {
return supportsCommand(command);
},
execCommand,
undo() {
injectJS('cm.undo();');
injectJS('cm.undo()');
},
redo() {
injectJS('cm.redo();');
injectJS('cm.redo()');
},
select(anchor: number, head: number) {
injectJS(
`cm.select(${JSON.stringify(anchor)}, ${JSON.stringify(head)});`,
);
},
setScrollPercent(fraction: number) {
injectJS(`cm.setScrollFraction(${JSON.stringify(fraction)})`);
},
insertText(text: string) {
injectJS(`cm.insertText(${JSON.stringify(text)});`);
},
updateBody(newBody: string) {
injectJS(`cm.updateBody(${JSON.stringify(newBody)});`);
},
updateSettings(newSettings: EditorSettings) {
injectJS(`cm.updateSettings(${JSON.stringify(newSettings)})`);
},
toggleBolded() {
injectJS('cm.toggleBolded();');
execCommand(EditorCommandType.ToggleBolded);
},
toggleItalicized() {
injectJS('cm.toggleItalicized();');
execCommand(EditorCommandType.ToggleItalicized);
},
toggleList(listType: ListType) {
injectJS(`cm.toggleList(${JSON.stringify(listType)});`);
toggleOrderedList() {
execCommand(EditorCommandType.ToggleNumberedList);
},
toggleUnorderedList() {
execCommand(EditorCommandType.ToggleCheckList);
},
toggleTaskList() {
execCommand(EditorCommandType.ToggleCheckList);
},
toggleCode() {
injectJS('cm.toggleCode();');
execCommand(EditorCommandType.ToggleCode);
},
toggleMath() {
injectJS('cm.toggleMath();');
execCommand(EditorCommandType.ToggleMath);
},
toggleHeaderLevel(level: number) {
injectJS(`cm.toggleHeaderLevel(${level});`);
const levelToCommand = [
EditorCommandType.ToggleHeading1,
EditorCommandType.ToggleHeading2,
EditorCommandType.ToggleHeading3,
EditorCommandType.ToggleHeading4,
EditorCommandType.ToggleHeading5,
];
const index = level - 1;
if (index < 0 || index >= levelToCommand.length) {
throw new Error(`Unsupported header level ${level}`);
}
execCommand(levelToCommand[index]);
},
increaseIndent() {
injectJS('cm.increaseIndent();');
execCommand(EditorCommandType.IndentMore);
},
decreaseIndent() {
injectJS('cm.decreaseIndent();');
execCommand(EditorCommandType.IndentLess);
},
updateLink(label: string, url: string) {
injectJS(`cm.updateLink(
@@ -170,7 +219,7 @@ const useEditorControl = (
);`);
},
scrollSelectionIntoView() {
injectJS('cm.scrollSelectionIntoView();');
execCommand(EditorCommandType.ScrollSelectionIntoView);
},
showLinkDialog() {
setLinkDialogVisible(true);
@@ -181,23 +230,27 @@ const useEditorControl = (
hideKeyboard() {
injectJS('document.activeElement?.blur();');
},
setPlugins: async (plugins: PluginData[]) => {
injectJS(`cm.setPlugins(${JSON.stringify(plugins)});`);
},
setSearchState: setSearchStateCallback,
searchControl: {
findNext() {
injectJS('cm.searchControl.findNext();');
execCommand(EditorCommandType.FindNext);
},
findPrevious() {
injectJS('cm.searchControl.findPrevious();');
execCommand(EditorCommandType.FindPrevious);
},
replaceCurrent() {
injectJS('cm.searchControl.replaceCurrent();');
replaceNext() {
execCommand(EditorCommandType.ReplaceNext);
},
replaceAll() {
injectJS('cm.searchControl.replaceAll();');
},
setSearchState(state: SearchState) {
injectJS(`cm.searchControl.setSearchState(${JSON.stringify(state)})`);
setSearchState(state);
execCommand(EditorCommandType.ReplaceAll);
},
showSearch() {
setSearchState({
...searchStateRef.current,
@@ -210,8 +263,12 @@ const useEditorControl = (
dialogVisible: false,
});
},
setSearchState: setSearchStateCallback,
},
};
return control;
}, [injectJS, searchStateRef, setLinkDialogVisible, setSearchState]);
};
@@ -227,7 +284,16 @@ function NoteEditor(props: Props, ref: any) {
themeData: editorTheme(props.themeId),
katexEnabled: Setting.value('markdown.plugin.katex'),
spellcheckEnabled: Setting.value('editor.mobile.spellcheckEnabled'),
language: EditorLanguageType.Markdown,
useExternalSearch: true,
readOnly: props.readOnly,
keymap: EditorKeymap.Default,
automatchBraces: false,
ignoreModifiers: false,
indentWithTabs: false,
};
const injectedJavaScript = `
@@ -252,6 +318,12 @@ function NoteEditor(props: Props, ref: any) {
);
};
window.onunhandledrejection = (event) => {
window.ReactNativeWebView.postMessage(
"error: Unhandled promise rejection: " + event
);
};
if (!window.cm) {
// This variable is not used within this script
// but is called using "injectJavaScript" from
@@ -269,7 +341,7 @@ function NoteEditor(props: Props, ref: any) {
${setInitialSelectionJS}
window.onresize = () => {
cm.scrollSelectionIntoView();
cm.execCommand('scrollSelectionIntoView');
};
} catch (e) {
window.ReactNativeWebView.postMessage("error:" + e.message + ": " + JSON.stringify(e))
@@ -280,7 +352,7 @@ function NoteEditor(props: Props, ref: any) {
const css = useCss(props.themeId);
const html = useHtml(css);
const [selectionState, setSelectionState] = useState(new SelectionFormatting());
const [selectionState, setSelectionState] = useState<SelectionFormatting>(defaultSelectionFormatting);
const [linkDialogVisible, setLinkDialogVisible] = useState(false);
const [searchState, setSearchState] = useState(defaultSearchState);
@@ -293,7 +365,7 @@ function NoteEditor(props: Props, ref: any) {
searchStateRef.current = searchState;
}, [searchState]);
// / Runs [js] in the context of the CodeMirror frame.
// Runs [js] in the context of the CodeMirror frame.
const injectJS = (js: string) => {
webviewRef.current.injectJS(js);
};
@@ -323,36 +395,41 @@ function NoteEditor(props: Props, ref: any) {
console.info('CodeMirror:', ...event.value);
},
onChange: (event: ChangeEvent) => {
props.onChange(event);
},
onEditorEvent: (event: EditorEvent) => {
let exhaustivenessCheck: never;
switch (event.kind) {
case EditorEventType.Change:
props.onChange(event);
break;
case EditorEventType.UndoRedoDepthChange:
props.onUndoRedoDepthChange(event);
break;
case EditorEventType.SelectionRangeChange:
props.onSelectionChange(event);
break;
case EditorEventType.SelectionFormattingChange:
setSelectionState(event.formatting);
break;
case EditorEventType.EditLink:
editorControl.showLinkDialog();
break;
case EditorEventType.UpdateSearchDialog:
setSearchState(event.searchState);
onUndoRedoDepthChange: (event: UndoRedoDepthChangeEvent) => {
props.onUndoRedoDepthChange(event);
},
onSelectionChange: (event: SelectionChangeEvent) => {
props.onSelectionChange(event);
},
onSelectionFormattingChange(data: string) {
// We want a SelectionFormatting object, so are
// instantiating it from JSON.
const formatting = SelectionFormatting.fromJSON(data);
setSelectionState(formatting);
},
onRequestLinkEdit() {
editorControl.showLinkDialog();
},
onRequestShowSearch(data: SearchState) {
setSearchState(data);
editorControl.searchControl.showSearch();
},
onRequestHideSearch() {
editorControl.searchControl.hideSearch();
if (event.searchState.dialogVisible) {
editorControl.searchControl.showSearch();
} else {
editorControl.searchControl.hideSearch();
}
break;
case EditorEventType.Scroll:
// Not handled
break;
default:
exhaustivenessCheck = event;
return exhaustivenessCheck;
}
return;
},
};

6
packages/app-mobile/components/NoteEditor/SearchPanel.tsx
View File

@@ -4,11 +4,13 @@ const React = require('react');
const { useMemo, useState, useEffect } = require('react');
const MaterialCommunityIcon = require('react-native-vector-icons/MaterialCommunityIcons').default;
import { SearchControl, SearchState, EditorSettings } from './types';
import { EditorSettings } from './types';
import { _ } from '@joplin/lib/locale';
import { BackHandler, TextInput, View, Text, StyleSheet, ViewStyle } from 'react-native';
import { Theme } from '@joplin/lib/themes/type';
import CustomButton from '../CustomButton';
import { SearchState } from '@joplin/editor/types';
import { SearchControl } from './types';
const buttonSize = 48;
@@ -284,7 +286,7 @@ export const SearchPanel = (props: SearchPanelProps) => {
themeId={themeId}
styles={styles}
iconName="swap-horizontal"
onPress={control.replaceCurrent}
onPress={control.replaceNext}
title={_('Replace')}
/>
);

98
packages/app-mobile/components/NoteEditor/SelectionFormatting.ts
View File

@@ -1,98 +0,0 @@
// Stores information about the current content of the user's selection
export default class SelectionFormatting {
public bolded = false;
public italicized = false;
public inChecklist = false;
public inCode = false;
public inUnorderedList = false;
public inOrderedList = false;
public inMath = false;
public inLink = false;
public spellChecking = false;
public unspellCheckableRegion = false;
// Link data, both fields are null if not in a link.
public linkData: { linkText?: string; linkURL?: string } = {
linkText: null,
linkURL: null,
};
// If [headerLevel], [listLevel], etc. are zero, then the
// selection isn't in a header/list
public headerLevel = 0;
public listLevel = 0;
// Content of the selection
public selectedText = '';
// List of data properties (for serializing/deseralizing)
private static propNames: string[] = [
'bolded', 'italicized', 'inChecklist', 'inCode',
'inUnorderedList', 'inOrderedList', 'inMath',
'inLink', 'linkData',
'headerLevel', 'listLevel',
'selectedText',
'spellChecking',
'unspellCheckableRegion',
];
// Returns true iff [this] is equivalent to [other]
public eq(other: SelectionFormatting): boolean {
// Cast to Records to allow usage of the indexing ([])
// operator.
const selfAsRec = this as Record<string, any>;
const otherAsRec = other as Record<string, any>;
for (const prop of SelectionFormatting.propNames) {
if (selfAsRec[prop] !== otherAsRec[prop]) {
return false;
}
}
return true;
}
public static fromJSON(json: string): SelectionFormatting {
const result = new SelectionFormatting();
// Casting result to a Record<string, any> lets us use
// the indexing [] operator.
const resultRecord = result as Record<string, any>;
const obj = JSON.parse(json) as Record<string, any>;
for (const prop of SelectionFormatting.propNames) {
if (obj[prop] !== undefined) {
// Type checking!
if (typeof obj[prop] !== typeof resultRecord[prop]) {
throw new Error([
'Deserialization Error:',
`${obj[prop]} and ${resultRecord[prop]}`,
'have different types.',
].join(' '));
}
resultRecord[prop] = obj[prop];
}
}
return result;
}
public toJSON(): string {
const resultObj: Record<string, any> = {};
// Cast this to a dictionary. This allows us to use
// the indexing [] operator.
const selfAsRecord = this as Record<string, any>;
for (const prop of SelectionFormatting.propNames) {
resultObj[prop] = selfAsRecord[prop];
}
return JSON.stringify(resultObj);
}
}

92
packages/app-mobile/components/NoteEditor/types.ts
View File

@@ -1,69 +1,53 @@
// Types related to the NoteEditor
import { Theme } from '@joplin/lib/themes/type';
import { CodeMirrorControl } from './CodeMirror/types';
// Controls for the entire editor (including dialogs)
export interface EditorControl extends CodeMirrorControl {
showLinkDialog(): void;
hideLinkDialog(): void;
hideKeyboard(): void;
}
export interface EditorSettings {
// EditorSettings objects are deserialized within WebViews, where
// [themeStyle(themeId: number)] doesn't work. As such, we need both
// the [themeId] and [themeData].
themeId: number;
themeData: Theme;
katexEnabled: boolean;
spellcheckEnabled: boolean;
readOnly: boolean;
}
export interface ChangeEvent {
// New editor content
value: string;
}
export interface UndoRedoDepthChangeEvent {
undoDepth: number;
redoDepth: number;
}
export interface Selection {
start: number;
end: number;
}
export interface SelectionChangeEvent {
selection: Selection;
}
import { EditorControl as EditorBodyControl, EditorSettings as EditorBodySettings, SearchState } from '@joplin/editor/types';
export interface SearchControl {
findNext(): void;
findPrevious(): void;
replaceCurrent(): void;
replaceNext(): void;
replaceAll(): void;
setSearchState(state: SearchState): void;
showSearch(): void;
hideSearch(): void;
setSearchState(state: SearchState): void;
}
export interface SearchState {
useRegex: boolean;
caseSensitive: boolean;
// Controls for the entire editor (including dialogs)
export interface EditorControl extends EditorBodyControl {
showLinkDialog(): void;
hideLinkDialog(): void;
hideKeyboard(): void;
searchText: string;
replaceText: string;
dialogVisible: boolean;
// Additional shortcut commands (equivalent to .execCommand
// with the corresponding type).
// This reduces the need for useCallbacks in many cases.
undo(): void;
redo(): void;
increaseIndent(): void;
decreaseIndent(): void;
toggleBolded(): void;
toggleItalicized(): void;
toggleCode(): void;
toggleMath(): void;
toggleOrderedList(): void;
toggleUnorderedList(): void;
toggleTaskList(): void;
toggleHeaderLevel(level: number): void;
scrollSelectionIntoView(): void;
showLinkDialog(): void;
hideLinkDialog(): void;
hideKeyboard(): void;
searchControl: SearchControl;
}
// Possible types of lists in the editor
export enum ListType {
CheckList,
OrderedList,
UnorderedList,
export interface EditorSettings extends EditorBodySettings {
themeId: number;
}
export interface SelectionRange {
start: number;
end: number;
}

4
packages/app-mobile/components/screens/Note.tsx
View File

@@ -6,7 +6,6 @@ import UndoRedoService from '@joplin/lib/services/UndoRedoService';
import NoteBodyViewer from '../NoteBodyViewer/NoteBodyViewer';
import checkPermissions from '../../utils/checkPermissions';
import NoteEditor from '../NoteEditor/NoteEditor';
import { ChangeEvent, UndoRedoDepthChangeEvent } from '../NoteEditor/types';
const FileViewer = require('react-native-file-viewer').default;
const React = require('react');
@@ -48,6 +47,7 @@ import Logger from '@joplin/utils/Logger';
import VoiceTypingDialog from '../voiceTyping/VoiceTypingDialog';
import { voskEnabled } from '../../services/voiceTyping/vosk';
import { isSupportedLanguage } from '../../services/voiceTyping/vosk.android';
import { ChangeEvent as EditorChangeEvent, UndoRedoDepthChangeEvent } from '@joplin/editor/events';
const urlUtils = require('@joplin/lib/urlUtils');
// import Vosk from 'react-native-vosk';
@@ -255,7 +255,7 @@ class NoteScreenComponent extends BaseScreenComponent {
return this.props.useEditorBeta;
}
private onBodyChange(event: ChangeEvent) {
private onBodyChange(event: EditorChangeEvent) {
shared.noteComponent_change(this, 'body', event.value);
this.scheduleSave();
}

16
packages/app-mobile/jest.setup.js
View File

@@ -14,22 +14,6 @@ import { setImmediate } from 'timers';
// so is removed by jsdom).
window.setImmediate = setImmediate;
// Prevents the CodeMirror error "getClientRects is undefined".
// See https://github.com/jsdom/jsdom/issues/3002#issue-652790925
document.createRange = () => {
const range = new Range();
range.getBoundingClientRect = jest.fn();
range.getClientRects = () => {
return {
length: 0,
item: () => null,
[Symbol.iterator]: jest.fn(),
};
};
return range;
};
shimInit({ nodeSqlite: sqlite3 });

1
packages/app-mobile/metro.config.js
View File

@@ -15,6 +15,7 @@ const path = require('path');
const localPackages = {
'@joplin/lib': path.resolve(__dirname, '../lib/'),
'@joplin/renderer': path.resolve(__dirname, '../renderer/'),
'@joplin/editor': path.resolve(__dirname, '../editor/'),
'@joplin/tools': path.resolve(__dirname, '../tools/'),
'@joplin/utils': path.resolve(__dirname, '../utils/'),
'@joplin/fork-htmlparser2': path.resolve(__dirname, '../fork-htmlparser2/'),

16
packages/app-mobile/package.json
View File

@@ -18,7 +18,8 @@
"postinstall": "jetify && yarn run build"
},
"dependencies": {
"@bam.tech/react-native-image-resizer": "3.0.7",
"@bam.tech/react-native-image-resizer": "3.0.5",
"@joplin/editor": "~2.13",
"@joplin/lib": "~2.13",
"@joplin/react-native-alarm-notification": "~2.13",
"@joplin/react-native-saf-x": "~2.13",
@@ -86,19 +87,6 @@
"@babel/core": "7.20.2",
"@babel/preset-env": "7.20.2",
"@babel/runtime": "7.20.0",
"@codemirror/commands": "6.2.2",
"@codemirror/lang-cpp": "6.0.2",
"@codemirror/lang-html": "6.4.3",
"@codemirror/lang-java": "6.0.1",
"@codemirror/lang-javascript": "6.1.5",
"@codemirror/lang-markdown": "6.1.0",
"@codemirror/lang-php": "6.0.1",
"@codemirror/lang-rust": "6.0.1",
"@codemirror/language": "6.6.0",
"@codemirror/legacy-modes": "6.3.2",
"@codemirror/search": "6.3.0",
"@codemirror/state": "6.2.0",
"@codemirror/view": "6.9.3",
"@joplin/tools": "~2.13",
"@lezer/highlight": "1.1.4",
"@testing-library/jest-native": "5.4.3",

111
packages/editor/CodeMirror/CodeMirror5Emulation/CodeMirror5Emulation.test.ts Normal file
View File

@@ -0,0 +1,111 @@
import CodeMirror5Emulation from './CodeMirror5Emulation';
import { EditorView } from '@codemirror/view';
const makeCodeMirrorEmulation = (initialDocText: string) => {
const editorView = new EditorView({
doc: initialDocText,
});
return new CodeMirror5Emulation(editorView, ()=>{});
};
describe('CodeMirror5Emulation', () => {
it('getSearchCursor should support searching for strings', () => {
const codeMirror = makeCodeMirrorEmulation('testing --- this is a test.');
// Should find two matches for "test"
// Note that the CodeMirror documentation specifies that a search cursor
// should return a boolean when calling findNext/findPrevious. However,
// the codemirror-vim adapter returns just a truthy/falsy value.
const testCursor = codeMirror.getSearchCursor('test');
expect(testCursor.findNext()).toBeTruthy();
expect(testCursor.findNext()).toBeTruthy();
// Replace the second match
testCursor.replace('passing test');
expect(codeMirror.getValue()).toBe('testing --- this is a passing test.');
// Should also be able to find previous matches
expect(testCursor.findPrevious()).toBeTruthy();
// Should return a falsy value when attempting to search past the end of
// the document.
expect(testCursor.findPrevious()).toBeFalsy();
});
it('should fire update/change events on change', async () => {
const codeMirror = makeCodeMirrorEmulation('testing --- this is a test.');
const updateCallback = jest.fn();
const changeCallback = jest.fn();
codeMirror.on('update', updateCallback);
codeMirror.on('change', changeCallback);
expect(updateCallback).not.toHaveBeenCalled();
expect(changeCallback).not.toHaveBeenCalled();
jest.useFakeTimers();
// Inserting text should trigger the update and change events
codeMirror.editor.dispatch({
changes: { from: 0, to: 1, insert: 'Test: ' },
});
// Advance timers -- there may be a delay between the CM 6 event
// and the dispatched CM 5 event.
await jest.advanceTimersByTimeAsync(100);
expect(updateCallback).toHaveBeenCalled();
expect(changeCallback).toHaveBeenCalled();
// The change callback should be given two arguments:
// - the CodeMirror emulation object
// - a description of the changes
expect(changeCallback.mock.lastCall[0]).toBe(codeMirror);
expect(changeCallback.mock.lastCall[1]).toMatchObject({
from: { line: 0, ch: 0 },
to: { line: 0, ch: 1 },
// Arrays of lines
text: ['Test: '],
removed: ['t'],
});
});
it('defineOption should fire the option\'s update callback on change', () => {
const codeMirror = makeCodeMirrorEmulation('Test 1\nTest 2');
const onOptionUpdate = jest.fn();
codeMirror.defineOption('an-option!', 'test', onOptionUpdate);
const onOtherOptionUpdate = jest.fn();
codeMirror.defineOption('an-option 2', 1, onOtherOptionUpdate);
// onUpdate should be called once initially
expect(onOtherOptionUpdate).toHaveBeenCalledTimes(1);
expect(onOptionUpdate).toHaveBeenCalledTimes(1);
expect(onOptionUpdate).toHaveBeenLastCalledWith(
codeMirror,
// default value -- the new value
'test',
// the original value (none, so given CodeMirror.Init)
codeMirror.Init,
);
// onUpdate should be called each time the option changes
codeMirror.setOption('an-option!', 'test 2');
expect(onOptionUpdate).toHaveBeenCalledTimes(2);
expect(onOptionUpdate).toHaveBeenLastCalledWith(
codeMirror, 'test 2', 'test',
);
codeMirror.setOption('an-option!', 'test...');
expect(onOptionUpdate).toHaveBeenCalledTimes(3);
// The other update callback should not have been triggered
// additional times if its option hasn't updated.
expect(onOtherOptionUpdate).toHaveBeenCalledTimes(1);
});
});

410
packages/editor/CodeMirror/CodeMirror5Emulation/CodeMirror5Emulation.ts Normal file
View File

@@ -0,0 +1,410 @@
import { EditorView, ViewPlugin, ViewUpdate, showPanel } from '@codemirror/view';
import { Extension, Text, Transaction } from '@codemirror/state';
import getScrollFraction from '../getScrollFraction';
import { CodeMirror as BaseCodeMirror5Emulation, Vim } from '@replit/codemirror-vim';
import { LogMessageCallback } from '../../types';
import editorCommands from '../editorCommands/editorCommands';
import { StateEffect } from '@codemirror/state';
import { StreamParser } from '@codemirror/language';
import Decorator, { LineWidgetOptions } from './Decorator';
const { pregQuote } = require('@joplin/lib/string-utils-common');
type CodeMirror5Command = (codeMirror: CodeMirror5Emulation)=> void;
type EditorEventCallback = (editor: CodeMirror5Emulation, ...args: any[])=> void;
type OptionUpdateCallback = (editor: CodeMirror5Emulation, newVal: any, oldVal: any)=> void;
interface CodeMirror5OptionRecord {
onUpdate: OptionUpdateCallback;
value: any;
}
interface DocumentPosition {
line: number;
ch: number;
}
const documentPositionFromPos = (doc: Text, pos: number): DocumentPosition => {
const line = doc.lineAt(pos);
return {
// CM 5 uses 0-based line numbering
line: line.number - 1,
ch: pos - line.from,
};
};
export default class CodeMirror5Emulation extends BaseCodeMirror5Emulation {
private _events: Record<string, EditorEventCallback[]> = {};
private _options: Record<string, CodeMirror5OptionRecord> = Object.create(null);
private _decorator: Decorator;
private _decoratorExtension: Extension;
// Used by some plugins to store state.
public state: Record<string, any> = Object.create(null);
public Vim = Vim;
// Passed as initial state to plugins
public Init = { toString: () => 'CodeMirror.Init' };
public constructor(
public editor: EditorView,
private logMessage: LogMessageCallback,
) {
super(editor);
const { decorator, extension: decoratorExtension } = Decorator.create(editor);
this._decorator = decorator;
this._decoratorExtension = decoratorExtension;
editor.dispatch({
effects: StateEffect.appendConfig.of(this.makeCM6Extensions()),
});
}
private makeCM6Extensions() {
const cm5 = this;
const editor = this.editor;
return [
// Fires events
EditorView.domEventHandlers({
scroll: () => CodeMirror5Emulation.signal(this, 'scroll'),
focus: () => CodeMirror5Emulation.signal(this, 'focus'),
blur: () => CodeMirror5Emulation.signal(this, 'blur'),
mousedown: event => CodeMirror5Emulation.signal(this, 'mousedown', event),
}),
ViewPlugin.fromClass(class {
public update(update: ViewUpdate) {
try {
if (update.viewportChanged) {
CodeMirror5Emulation.signal(
cm5,
'viewportChange',
editor.viewport.from,
editor.viewport.to,
);
}
if (update.docChanged) {
cm5.fireChangeEvents(update);
cm5.onChange(update);
}
if (update.selectionSet) {
cm5.onSelectionChange();
}
CodeMirror5Emulation.signal(cm5, 'update');
// Catch the error -- otherwise, CodeMirror will de-register the update listener.
} catch (error) {
cm5.logMessage(`Error dispatching update: ${error}`);
}
}
}),
// Decorations
this._decoratorExtension,
// Some plugins rely on a CodeMirror-measure element
// to store temporary content.
showPanel.of(() => {
const dom = document.createElement('div');
dom.classList.add('CodeMirror-measure');
return { dom };
}),
// Note: We can allow legacy CM5 CSS to apply to the editor
// with a line similar to the following:
// EditorView.editorAttributes.of({ class: 'CodeMirror' }),
// Many of these styles, however, don't work well with CodeMirror 6.
];
}
private isEventHandledBySuperclass(eventName: string) {
return ['beforeSelectionChange'].includes(eventName);
}
public on(eventName: string, callback: EditorEventCallback) {
if (this.isEventHandledBySuperclass(eventName)) {
return super.on(eventName, callback);
}
this._events[eventName] ??= [];
this._events[eventName].push(callback);
}
public off(eventName: string, callback: EditorEventCallback) {
if (!(eventName in this._events)) {
return;
}
this._events[eventName] = this._events[eventName].filter(
otherCallback => otherCallback !== callback,
);
}
public static signal(target: CodeMirror5Emulation, eventName: string, ...args: any[]) {
const listeners = target._events[eventName] ?? [];
for (const listener of listeners) {
listener(target, ...args);
}
super.signal(target, eventName, ...args);
}
private fireChangeEvents(update: ViewUpdate) {
type ChangeRecord = {
from: DocumentPosition;
to: DocumentPosition;
text: string[];
removed: string[];
transaction: Transaction;
};
const changes: ChangeRecord[] = [];
const origDoc = update.startState.doc;
for (const transaction of update.transactions) {
transaction.changes.iterChanges((fromA, toA, _fromB, _toB, inserted: Text) => {
changes.push({
from: documentPositionFromPos(origDoc, fromA),
to: documentPositionFromPos(origDoc, toA),
text: inserted.sliceString(0).split('\n'),
removed: origDoc.sliceString(fromA, toA).split('\n'),
transaction,
});
});
}
// Delay firing events -- event listeners may try to create transactions.
// (this is done by the rich markdown plugin).
setTimeout(() => {
for (const change of changes) {
CodeMirror5Emulation.signal(this, 'change', change);
// If triggered by a user, also send the inputRead event
if (change.transaction.isUserEvent('input')) {
CodeMirror5Emulation.signal(this, 'inputRead', change);
}
}
CodeMirror5Emulation.signal(this, 'changes', changes);
}, 0);
}
// codemirror-vim's adapter doesn't match the CM5 docs -- wrap it.
public getCursor(mode?: 'head' | 'anchor' | 'from' | 'to'| 'start' | 'end') {
if (mode === 'from') {
mode = 'start';
}
if (mode === 'to') {
mode = 'end';
}
return super.getCursor(mode);
}
public override getSearchCursor(query: RegExp|string, pos?: DocumentPosition|null|0) {
// The superclass CodeMirror adapter only supports regular expression
// arguments.
if (typeof query === 'string') {
query = new RegExp(pregQuote(query));
}
return super.getSearchCursor(query, pos || { line: 0, ch: 0 });
}
public lineAtHeight(height: number, _mode?: 'local') {
const lineInfo = this.editor.lineBlockAtHeight(height);
// - 1: Convert to zero-based.
const lineNumber = this.editor.state.doc.lineAt(lineInfo.to).number - 1;
return lineNumber;
}
public heightAtLine(lineNumber: number, mode?: 'local') {
// CodeMirror 5 uses 0-based line numbers. CM6 uses 1-based
// line numbers.
const doc = this.editor.state.doc;
const lineInfo = doc.line(Math.min(lineNumber + 1, doc.lines));
const lineBlock = this.editor.lineBlockAt(lineInfo.from);
const height = lineBlock.top;
if (mode === 'local') {
const editorTop = this.editor.lineBlockAt(0).top;
return height - editorTop;
} else {
return height;
}
}
public lineInfo(lineNumber: number) {
const line = this.editor.state.doc.line(lineNumber + 1);
const result = {
line: lineNumber,
// Note: In CM5, a line handle is not just a line number
handle: lineNumber,
text: line.text,
gutterMarkers: [] as any[],
textClass: ['cm-line', ...this._decorator.getLineClasses(lineNumber)],
bgClass: '',
wrapClass: '',
widgets: this._decorator.getLineWidgets(lineNumber),
};
return result;
}
public getStateAfter(_line: number) {
// TODO: Should return parser state. Returning an empty object
// allows some plugins to run without crashing, however.
return {};
}
public getScrollPercent() {
return getScrollFraction(this.editor);
}
public defineExtension(name: string, value: any) {
(CodeMirror5Emulation.prototype as any)[name] ??= value;
}
public defineOption(name: string, defaultValue: any, onUpdate: OptionUpdateCallback) {
this._options[name] = {
value: defaultValue,
onUpdate,
};
onUpdate(this, defaultValue, this.Init);
}
// Override codemirror-vim's setOption to allow user-defined options
public override setOption(name: string, value: any) {
if (name in this._options) {
const oldValue = this._options[name].value;
this._options[name].value = value;
this._options[name].onUpdate(this, value, oldValue);
} else {
super.setOption(name, value);
}
}
public override getOption(name: string): any {
if (name in this._options) {
return this._options[name].value;
} else {
return super.getOption(name);
}
}
// codemirror-vim's API doesn't match the API docs here -- it expects addOverlay
// to return a SearchQuery. As such, this override returns "any".
public override addOverlay<State>(modeObject: StreamParser<State>|{ query: RegExp }): any {
if ('query' in modeObject) {
return super.addOverlay(modeObject);
}
this._decorator.addOverlay(modeObject);
}
public addLineClass(lineNumber: number, where: string, className: string) {
this._decorator.addLineClass(lineNumber, where, className);
}
public removeLineClass(lineNumber: number, where: string, className: string) {
this._decorator.removeLineClass(lineNumber, where, className);
}
public addLineWidget(lineNumber: number, node: HTMLElement, options: LineWidgetOptions) {
this._decorator.addLineWidget(lineNumber, node, options);
}
// TODO: Currently copied from useCursorUtils.ts.
// TODO: Remove the duplicate code when CodeMirror 5 is eventually removed.
public wrapSelections(string1: string, string2: string) {
const selectedStrings = this.getSelections();
// Batches the insert operations, if this wasn't done the inserts
// could potentially overwrite one another
this.operation(() => {
for (let i = 0; i < selectedStrings.length; i++) {
const selected = selectedStrings[i];
// Remove white space on either side of selection
const start = selected.search(/[^\s]/);
const end = selected.search(/[^\s](?=[\s]*$)/);
const core = selected.substring(start, end - start + 1);
// If selection can be toggled do that
if (core.startsWith(string1) && core.endsWith(string2)) {
const inside = core.substring(string1.length, core.length - string1.length - string2.length);
selectedStrings[i] = selected.substring(0, start) + inside + selected.substring(end + 1);
} else {
selectedStrings[i] = selected.substring(0, start) + string1 + core + string2 + selected.substring(end + 1);
}
}
this.replaceSelections(selectedStrings);
});
}
public static commands = (() => {
const commands: Record<string, CodeMirror5Command> = {
...BaseCodeMirror5Emulation.commands,
};
for (const commandName in editorCommands) {
const command = editorCommands[commandName as keyof typeof editorCommands];
commands[commandName] = (codeMirror: CodeMirror5Emulation) => command(codeMirror.editor);
}
// as any: Required to properly extend the base class -- without this,
// the commands dictionary isn't known (by TypeScript) to have the same
// properties as the commands dictionary in the parent class.
return commands as any;
})();
public commands = CodeMirror5Emulation.commands;
private joplinCommandToCodeMirrorCommand(commandName: string): string|null {
const match = /^editor\.(.*)$/g.exec(commandName);
if (!match || !(match[1] in CodeMirror5Emulation.commands)) {
return null;
}
return match[1] as string;
}
public supportsJoplinCommand(commandName: string): boolean {
return this.joplinCommandToCodeMirrorCommand(commandName) in CodeMirror5Emulation.commands;
}
public execJoplinCommand(joplinCommandName: string) {
const commandName = this.joplinCommandToCodeMirrorCommand(joplinCommandName);
if (commandName === null) {
this.logMessage(`Unsupported Joplin command, ${joplinCommandName}`);
return;
}
this.execCommand(commandName);
}
public commandExists(commandName: string) {
return commandName in CodeMirror5Emulation.commands;
}
public execCommand(name: string) {
if (!this.commandExists(name)) {
this.logMessage(`Unsupported CodeMirror command, ${name}`);
return;
}
CodeMirror5Emulation.commands[name as (keyof typeof CodeMirror5Emulation.commands)](this);
}
}

385
packages/editor/CodeMirror/CodeMirror5Emulation/Decorator.ts Normal file
View File

@@ -0,0 +1,385 @@
// Handles adding decorations to the CodeMirror editor -- converts CodeMirror5-style calls
// to input accepted by CodeMirror 6
import { Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate, WidgetType } from '@codemirror/view';
import { ChangeDesc, Extension, Range, RangeSetBuilder, StateEffect, StateField, Transaction } from '@codemirror/state';
import { StreamParser, StringStream, indentUnit } from '@codemirror/language';
interface DecorationRange {
from: number;
to: number;
}
const mapRangeConfig = {
// Updates a range based on some change to the document
map: <T extends DecorationRange> (range: T, change: ChangeDesc): T => {
const from = change.mapPos(range.from);
const to = change.mapPos(range.to);
return {
...range,
from: Math.min(from, to),
to: Math.max(from, to),
};
},
};
interface LineCssDecorationSpec extends DecorationRange {
cssClass: string;
}
const addLineDecorationEffect = StateEffect.define<LineCssDecorationSpec>(mapRangeConfig);
const removeLineDecorationEffect = StateEffect.define<LineCssDecorationSpec>(mapRangeConfig);
const addMarkDecorationEffect = StateEffect.define<LineCssDecorationSpec>(mapRangeConfig);
// TODO: Support removing mark decorations
// const removeMarkDecorationEffect = StateEffect.define<LineDecorationSpec>(mapRangeConfig);
export interface LineWidgetOptions {
className?: string;
above?: boolean;
}
interface LineWidgetDecorationSpec extends DecorationRange {
element: HTMLElement;
options: LineWidgetOptions;
}
const addLineWidgetEffect = StateEffect.define<LineWidgetDecorationSpec>(mapRangeConfig);
const removeLineWidgetEffect = StateEffect.define<{ element: HTMLElement }>();
class WidgetDecorationWrapper extends WidgetType {
public constructor(
public readonly element: HTMLElement,
public readonly options: LineWidgetOptions,
) {
super();
}
public override toDOM() {
const container = document.createElement('div');
this.element.remove();
container.appendChild(this.element);
if (this.options.className) {
container.classList.add(this.options.className);
}
return container;
}
}
interface LineWidgetControl {
node: HTMLElement;
clear(): void;
changed(): void;
className?: string;
}
export default class Decorator {
private _extension: Extension;
private _effectDecorations: DecorationSet = Decoration.none;
private constructor(private editor: EditorView) {
const decorator = this;
this._extension = [
// Overlay decorations -- recreate all decorations when the editor changes
// (overlay decorations require parsing the document and may change output
// when the editor/view changes.)
ViewPlugin.fromClass(class {
public decorations: DecorationSet;
public constructor(view: EditorView) {
this.decorations = decorator.createOverlayDecorations(view);
}
public update(update: ViewUpdate) {
if (update.viewportChanged || update.docChanged) {
this.decorations = decorator.createOverlayDecorations(update.view);
}
}
}, {
decorations: v => v.decorations,
}),
// Other decorations based on effects. See the decoration examples: https://codemirror.net/examples/decoration/
// Note that EditorView.decorations.from is required for block widgets.
StateField.define<DecorationSet>({
create: () => Decoration.none,
update: (_, viewUpdate) => decorator.updateEffectDecorations([viewUpdate]),
provide: field => EditorView.decorations.from(field),
}),
];
}
public static create(editor: EditorView) {
const decorator = new Decorator(editor);
return { decorator, extension: decorator._extension };
}
private _decorationCache: Record<string, Decoration> = Object.create(null);
private _overlays: (StreamParser<any>)[] = [];
private classNameToCssDecoration(className: string, isLineDecoration: boolean) {
let decoration;
if (className in this._decorationCache) {
decoration = this._decorationCache[className];
} else {
const attributes = { class: className };
if (isLineDecoration) {
decoration = Decoration.line({ attributes });
} else {
decoration = Decoration.mark({ attributes });
}
this._decorationCache[className] = decoration;
}
return decoration;
}
private updateEffectDecorations(transactions: Transaction[]) {
let decorations = this._effectDecorations;
// Update decoration positions
for (const transaction of transactions) {
decorations = decorations.map(transaction.changes);
// Add or remove decorations
for (const effect of transaction.effects) {
const isMarkDecoration = effect.is(addMarkDecorationEffect);
const isLineDecoration = effect.is(addLineDecorationEffect);
if (isMarkDecoration || isLineDecoration) {
const decoration = this.classNameToCssDecoration(
effect.value.cssClass, isLineDecoration,
);
const value = effect.value;
const from = effect.value.from;
// Line decorations are specified to have a size-zero range.
const to = isLineDecoration ? from : value.to;
decorations = decorations.update({
add: [decoration.range(from, to)],
});
} else if (effect.is(removeLineDecorationEffect)) {
const doc = transaction.state.doc;
const targetFrom = doc.lineAt(effect.value.from).from;
const targetTo = doc.lineAt(effect.value.to).to;
const targetDecoration = this.classNameToCssDecoration(effect.value.cssClass, true);
decorations = decorations.update({
// Returns true only for decorations that should be kept.
filter: (from, to, value) => {
if (from >= targetFrom && to <= targetTo && value.eq(targetDecoration)) {
return false;
}
return true;
},
});
} else if (effect.is(addLineWidgetEffect)) {
const options = effect.value.options;
const decoration = Decoration.widget({
widget: new WidgetDecorationWrapper(effect.value.element, options),
side: options.above ? -1 : 1,
block: true,
});
decorations = decorations.update({
add: [decoration.range(options.above ? effect.value.from : effect.value.to)],
});
} else if (effect.is(removeLineWidgetEffect)) {
decorations = decorations.update({
// Returns true only for decorations that should be kept.
filter: (_from, _to, value) => {
return value.spec.widget?.element !== effect.value.element;
},
});
}
}
}
this._effectDecorations = decorations;
return decorations;
}
private createOverlayDecorations(view: EditorView): DecorationSet {
const makeDecoration = (
tokenName: string, start: number, stop: number,
) => {
const isLineDecoration = tokenName.startsWith('line-');
// CM5 prefixes class names with cm-
tokenName = `cm-${tokenName}`;
const decoration = this.classNameToCssDecoration(tokenName, isLineDecoration);
return decoration.range(start, stop);
};
const indentSize = view.state.facet(indentUnit).length;
const newDecorations: Range<Decoration>[] = [];
for (const overlay of this._overlays) {
const state = overlay.startState?.(indentSize) ?? {};
for (const { from, to } of view.visibleRanges) {
const fromLine = view.state.doc.lineAt(from);
const toLine = view.state.doc.lineAt(to);
const fromLineNumber = fromLine.number;
const toLineNumber = toLine.number;
for (let i = fromLineNumber; i <= toLineNumber; i++) {
const line = view.state.doc.line(i);
const reader = new StringStream(
line.text,
view.state.tabSize,
indentSize,
);
let lastPos = 0;
(reader as any).baseToken ??= (): null => null;
while (!reader.eol()) {
const token = overlay.token(reader, state);
if (token) {
for (const className of token.split(/\s+/)) {
if (className.startsWith('line-')) {
newDecorations.push(makeDecoration(className, line.from, line.from));
} else {
const from = lastPos + line.from;
const to = reader.pos + line.from;
newDecorations.push(makeDecoration(className, from, to));
}
}
}
if (reader.pos === lastPos) {
throw new Error(
'Mark decoration position did not increase -- overlays must advance with each call to .token()',
);
}
lastPos = reader.pos;
}
}
}
}
// Required by CodeMirror:
// Should be sorted by from position, then by length.
newDecorations.sort((a, b) => {
if (a.from !== b.from) {
return a.from - b.from;
}
return a.to - b.to;
});
// Per the documentation, new tokens should be added in
// increasing order.
const decorations = new RangeSetBuilder<Decoration>();
for (const decoration of newDecorations) {
decorations.add(decoration.from, decoration.to, decoration.value);
}
return decorations.finish();
}
public addOverlay<State>(modeObject: StreamParser<State>) {
this._overlays.push(modeObject);
}
private addRemoveLineClass(lineNumber: number, className: string, add: boolean) {
// + 1: Convert from zero-indexed to one-indexed
const line = this.editor.state.doc.line(lineNumber + 1);
const effect = add ? addLineDecorationEffect : removeLineDecorationEffect;
this.editor.dispatch({
effects: effect.of({
cssClass: className,
from: line.from,
to: line.to,
}),
});
}
public addLineClass(lineNumber: number, _where: string, className: string) {
this.addRemoveLineClass(lineNumber, className, true);
}
public removeLineClass(lineNumber: number, _where: string, className: string) {
this.addRemoveLineClass(lineNumber, className, false);
}
public getLineClasses(lineNumber: number) {
const line = this.editor.state.doc.line(lineNumber + 1);
const lineClasses: string[] = [];
this._effectDecorations.between(line.from, line.to, (from, to, decoration) => {
if (from === line.from && to === line.to) {
const className = decoration.spec?.class;
if (typeof className === 'string') {
lineClasses.push(className);
}
}
});
return lineClasses;
}
private createLineWidgetControl(node: HTMLElement, options: LineWidgetOptions): LineWidgetControl {
return {
node,
clear: () => {
this.editor.dispatch({
effects: removeLineWidgetEffect.of({ element: node }),
});
},
changed: () => {
this.editor.requestMeasure();
},
className: options.className,
};
}
public getLineWidgets(lineNumber: number): LineWidgetControl[] {
const line = this.editor.state.doc.line(lineNumber + 1);
const lineWidgets: LineWidgetControl[] = [];
this._effectDecorations.between(line.from, line.to, (from, to, decoration) => {
if (from >= line.from && from <= line.to && from === to) {
const widget = decoration.spec?.widget;
if (widget && widget instanceof WidgetDecorationWrapper) {
lineWidgets.push(this.createLineWidgetControl(widget.element, widget.options));
}
}
});
return lineWidgets;
}
public addLineWidget(lineNumber: number, node: HTMLElement, options: LineWidgetOptions): LineWidgetControl {
const line = this.editor.state.doc.line(lineNumber + 1);
const lineWidgetOptions = {
from: line.from,
to: line.to,
element: node,
options,
};
this.editor.dispatch({
effects: addLineWidgetEffect.of(lineWidgetOptions),
});
return this.createLineWidgetControl(node, options);
}
}

46
packages/editor/CodeMirror/CodeMirrorControl.test.ts Normal file
View File

@@ -0,0 +1,46 @@
import createEditor from './createEditor';
import createEditorSettings from './testUtil/createEditorSettings';
import Setting from '@joplin/lib/models/Setting';
const createEditorControls = (initialText: string) => {
const editorSettings = createEditorSettings(Setting.THEME_LIGHT);
return createEditor(document.body, {
initialText,
settings: editorSettings,
onEvent: _event => {},
onLogMessage: _message => {},
});
};
describe('CodeMirrorControl', () => {
it('clearHistory should clear the undo/redo history', () => {
const controls = createEditorControls('');
const insertedText = 'Testing... This is a test...';
controls.insertText(insertedText);
const fullInsertedText = insertedText;
expect(controls.getValue()).toBe(fullInsertedText);
// Undo should work before clearing history
controls.undo();
expect(controls.getValue()).toBe('');
controls.redo();
controls.clearHistory();
expect(controls.getValue()).toBe(fullInsertedText);
// Should not be able to undo cleared changes
controls.undo();
expect(controls.getValue()).toBe(fullInsertedText);
// Should be able to undo new changes
controls.insertText('!!!');
expect(controls.getValue()).toBe(`${fullInsertedText}!!!`);
controls.undo();
expect(controls.getValue()).toBe(fullInsertedText);
});
});

137
packages/editor/CodeMirror/CodeMirrorControl.ts Normal file
View File

@@ -0,0 +1,137 @@
import { EditorView } from '@codemirror/view';
import { EditorCommandType, EditorControl, EditorSettings, LogMessageCallback, PluginData, SearchState } from '../types';
import CodeMirror5Emulation from './CodeMirror5Emulation/CodeMirror5Emulation';
import editorCommands from './editorCommands/editorCommands';
import { EditorSelection, StateEffect } from '@codemirror/state';
import { updateLink } from './markdown/markdownCommands';
import { SearchQuery, setSearchQuery } from '@codemirror/search';
import PluginLoader from './PluginLoader';
interface Callbacks {
onUndoRedo(): void;
onSettingsChange(newSettings: EditorSettings): void;
onClearHistory(): void;
onRemove(): void;
onLogMessage: LogMessageCallback;
}
export default class CodeMirrorControl extends CodeMirror5Emulation implements EditorControl {
private _pluginControl: PluginLoader;
public constructor(
editor: EditorView,
private _callbacks: Callbacks,
) {
super(editor, _callbacks.onLogMessage);
this._pluginControl = new PluginLoader(this, _callbacks.onLogMessage);
}
public supportsCommand(name: string) {
return name in editorCommands || super.commandExists(name);
}
public override execCommand(name: string) {
if (name in editorCommands) {
editorCommands[name as EditorCommandType](this.editor);
} else if (super.commandExists(name)) {
super.execCommand(name);
}
if (name === EditorCommandType.Undo || name === EditorCommandType.Redo) {
this._callbacks.onUndoRedo();
}
}
public undo() {
this.execCommand(EditorCommandType.Undo);
this._callbacks.onUndoRedo();
}
public redo() {
this.execCommand(EditorCommandType.Redo);
this._callbacks.onUndoRedo();
}
public select(anchor: number, head: number) {
this.editor.dispatch(this.editor.state.update({
selection: { anchor, head },
scrollIntoView: true,
}));
}
public clearHistory() {
this._callbacks.onClearHistory();
}
public setScrollPercent(fraction: number) {
const maxScroll = this.editor.scrollDOM.scrollHeight - this.editor.scrollDOM.clientHeight;
this.editor.scrollDOM.scrollTop = fraction * maxScroll;
}
public insertText(text: string) {
this.editor.dispatch(this.editor.state.replaceSelection(text));
}
public updateBody(newBody: string) {
// TODO: doc.toString() can be slow for large documents.
const currentBody = this.editor.state.doc.toString();
if (newBody !== currentBody) {
// For now, collapse the selection to a single cursor
// to ensure that the selection stays within the document
// (and thus avoids an exception).
const mainCursorPosition = this.editor.state.selection.main.anchor;
const newCursorPosition = Math.min(mainCursorPosition, newBody.length);
this.editor.dispatch(this.editor.state.update({
changes: {
from: 0,
to: this.editor.state.doc.length,
insert: newBody,
},
selection: EditorSelection.cursor(newCursorPosition),
scrollIntoView: true,
}));
return true;
}
return false;
}
public updateLink(newLabel: string, newUrl: string) {
updateLink(newLabel, newUrl)(this.editor);
}
public updateSettings(newSettings: EditorSettings) {
this._callbacks.onSettingsChange(newSettings);
}
public setSearchState(newState: SearchState) {
const query = new SearchQuery({
search: newState.searchText,
caseSensitive: newState.caseSensitive,
regexp: newState.useRegex,
replace: newState.replaceText,
});
this.editor.dispatch({
effects: setSearchQuery.of(query),
});
}
public addStyles(...styles: Parameters<typeof EditorView.theme>) {
this.editor.dispatch({
effects: StateEffect.appendConfig.of(EditorView.theme(...styles)),
});
}
public setPlugins(plugins: PluginData[]) {
return this._pluginControl.setPlugins(plugins);
}
public remove() {
this._pluginControl.remove();
this._callbacks.onRemove();
}
}

156
packages/editor/CodeMirror/PluginLoader.ts Normal file
View File

@@ -0,0 +1,156 @@
import { LogMessageCallback, PluginData } from '../types';
import CodeMirrorControl from './CodeMirrorControl';
let pluginScriptIdCounter = 0;
type OnScriptLoadCallback = (exports: any)=> void;
type OnPluginRemovedCallback = ()=> void;
export default class PluginLoader {
private pluginScriptsContainer: HTMLElement;
private loadedPluginIds: string[] = [];
private pluginRemovalCallbacks: Record<string, OnPluginRemovedCallback> = {};
public constructor(private editor: CodeMirrorControl, private logMessage: LogMessageCallback) {
this.pluginScriptsContainer = document.createElement('div');
this.pluginScriptsContainer.style.display = 'none';
// For testing
this.pluginScriptsContainer.id = 'joplin-plugin-scripts-container';
document.body.appendChild(this.pluginScriptsContainer);
(window as any).scriptLoadCallbacks ??= Object.create(null);
}
public async setPlugins(plugins: PluginData[]) {
for (const plugin of plugins) {
if (!this.loadedPluginIds.includes(plugin.pluginId)) {
this.addPlugin(plugin);
}
}
// Remove old plugins
const pluginIds = plugins.map(plugin => plugin.pluginId);
const removedIds = this.loadedPluginIds
.filter(id => !pluginIds.includes(id));
for (const id of removedIds) {
if (id in this.pluginRemovalCallbacks) {
this.pluginRemovalCallbacks[id]();
}
}
}
private addPlugin(plugin: PluginData) {
const onRemoveCallbacks: OnPluginRemovedCallback[] = [];
this.logMessage(`Loading plugin ${plugin.pluginId}`);
const addScript = (onLoad: OnScriptLoadCallback) => {
const scriptElement = document.createElement('script');
onRemoveCallbacks.push(() => {
scriptElement.remove();
});
void (async () => {
const scriptId = pluginScriptIdCounter++;
const js = await plugin.contentScriptJs();
// Stop if cancelled
if (!this.loadedPluginIds.includes(plugin.pluginId)) {
return;
}
scriptElement.innerText = `
(async () => {
const exports = {};
${js};
window.scriptLoadCallbacks[${scriptId}](exports);
})();
`;
(window as any).scriptLoadCallbacks[scriptId] = onLoad;
this.pluginScriptsContainer.appendChild(scriptElement);
})();
};
const addStyles = (cssStrings: string[]) => {
// A container for style elements
const styleContainer = document.createElement('div');
onRemoveCallbacks.push(() => {
styleContainer.remove();
});
for (const cssText of cssStrings) {
const style = document.createElement('style');
style.innerText = cssText;
styleContainer.appendChild(style);
}
this.pluginScriptsContainer.appendChild(styleContainer);
};
this.pluginRemovalCallbacks[plugin.pluginId] = () => {
for (const callback of onRemoveCallbacks) {
callback();
}
this.loadedPluginIds = this.loadedPluginIds.filter(id => {
return id !== plugin.pluginId;
});
};
addScript(exports => {
if (!exports?.default || !(typeof exports.default === 'function')) {
throw new Error('All plugins must have a function default export');
}
const context = {
postMessage: plugin.postMessageHandler,
pluginId: plugin.pluginId,
contentScriptId: plugin.contentScriptId,
};
const loadedPlugin = exports.default(context);
loadedPlugin.plugin?.(this.editor);
if (loadedPlugin.codeMirrorOptions) {
for (const key in loadedPlugin.codeMirrorOptions) {
this.editor.setOption(key, loadedPlugin.codeMirrorOptions[key]);
}
}
if (loadedPlugin.assets) {
const cssStrings = [];
for (const asset of loadedPlugin.assets()) {
if (!asset.inline) {
this.logMessage('Warning: The CM6 plugin API currently only supports inline CSS.');
continue;
}
if (asset.mime !== 'text/css') {
throw new Error('Inline assets must have property "mime" set to "text/css"');
}
cssStrings.push(asset.text);
}
addStyles(cssStrings);
}
});
this.loadedPluginIds.push(plugin.pluginId);
}
public remove() {
this.pluginScriptsContainer.remove();
}
}

70
packages/editor/CodeMirror/configFromSettings.ts Normal file
View File

@@ -0,0 +1,70 @@
import { EditorView, keymap } from '@codemirror/view';
import { closeBrackets } from '@codemirror/autocomplete';
import { EditorKeymap, EditorLanguageType, EditorSettings } from '../types';
import createTheme from './theme';
import { EditorState } from '@codemirror/state';
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
import { GFM as GitHubFlavoredMarkdownExtension } from '@lezer/markdown';
import { MarkdownMathExtension } from './markdown/markdownMathParser';
import syntaxHighlightingLanguages from './markdown/syntaxHighlightingLanguages';
import { html } from '@codemirror/lang-html';
import { defaultKeymap, emacsStyleKeymap } from '@codemirror/commands';
import { vim } from '@replit/codemirror-vim';
import { indentUnit } from '@codemirror/language';
const configFromSettings = (settings: EditorSettings) => {
const languageExtension = (() => {
const openingBrackets = '`([{\'"‘“（《「『【〔〖〘〚'.split('');
const language = settings.language;
if (language === EditorLanguageType.Markdown) {
return [
markdown({
extensions: [
GitHubFlavoredMarkdownExtension,
// Don't highlight KaTeX if the user disabled it
settings.katexEnabled ? MarkdownMathExtension : [],
],
codeLanguages: syntaxHighlightingLanguages,
}),
markdownLanguage.data.of({ closeBrackets: openingBrackets }),
];
} else if (language === EditorLanguageType.Html) {
return html();
} else {
const exhaustivenessCheck: never = language;
return exhaustivenessCheck;
}
})();
const extensions = [
languageExtension,
createTheme(settings.themeData),
EditorView.contentAttributes.of({
autocapitalize: 'sentence',
autocorrect: settings.spellcheckEnabled ? 'true' : 'false',
spellcheck: settings.spellcheckEnabled ? 'true' : 'false',
}),
EditorState.readOnly.of(settings.readOnly),
indentUnit.of(settings.indentWithTabs ? '\t' : ' '),
];
if (settings.automatchBraces) {
extensions.push(closeBrackets());
}
if (settings.keymap === EditorKeymap.Vim) {
extensions.push(vim());
} else if (settings.keymap === EditorKeymap.Emacs) {
extensions.push(keymap.of(emacsStyleKeymap));
}
if (!settings.ignoreModifiers) {
extensions.push(keymap.of(defaultKeymap));
}
return extensions;
};
export default configFromSettings;

122
packages/editor/CodeMirror/createEditor.test.ts Normal file
View File

@@ -0,0 +1,122 @@
/**
* @jest-environment jsdom
*/
import createEditor from './createEditor';
import Setting from '@joplin/lib/models/Setting';
import { forceParsing } from '@codemirror/language';
import loadLangauges from './testUtil/loadLanguages';
import { expect, describe, it } from '@jest/globals';
import createEditorSettings from './testUtil/createEditorSettings';
describe('createEditor', () => {
beforeAll(() => {
jest.useFakeTimers();
});
// This checks for a regression -- occasionally, when updating packages,
// syntax highlighting in the CodeMirror editor stops working. This is usually
// fixed by
// 1. removing all `@codemirror/` and `@lezer/` dependencies from yarn.lock,
// 2. upgrading all CodeMirror packages to the latest versions in package.json, and
// 3. re-running `yarn install`.
//
// See https://github.com/laurent22/joplin/issues/7253
it('should give headings a different style', async () => {
const headerLineText = '# Testing...';
const initialText = `${headerLineText}\nThis is a test.`;
const editorSettings = createEditorSettings(Setting.THEME_LIGHT);
await loadLangauges();
const editor = createEditor(document.body, {
initialText,
settings: editorSettings,
onEvent: _event => {},
onLogMessage: _message => {},
});
// Force the generation of the syntax tree now.
forceParsing(editor.editor);
const headerLine = document.body.querySelector('.cm-headerLine')!;
expect(headerLine.textContent).toBe(headerLineText);
// CodeMirror nests the tag that styles the header within .cm-headerLine:
// <div class='cm-headerLine'><span class='someclass'>Testing...</span></div>
const headerLineContent = document.body.querySelectorAll('.cm-headerLine > span');
expect(headerLineContent.length).toBeGreaterThanOrEqual(1);
for (const part of headerLineContent) {
const style = getComputedStyle(part);
expect(style.fontSize).toBe('1.6em');
}
// Cleanup
editor.remove();
});
it('should support loading plugins', async () => {
const initialText = '# Test\nThis is a test.';
const editorSettings = createEditorSettings(Setting.THEME_LIGHT);
const editor = createEditor(document.body, {
initialText,
settings: editorSettings,
onEvent: _event => {},
onLogMessage: _message => {},
});
const getContentScriptJs = jest.fn(async () => {
return `
exports.default = context => {
context.postMessage(context.pluginId);
};
`;
});
const postMessageHandler = jest.fn();
const testPlugin1 = {
pluginId: 'a.plugin.id',
contentScriptId: 'a.plugin.id.contentScript',
contentScriptJs: getContentScriptJs,
postMessageHandler,
};
const testPlugin2 = {
pluginId: 'another.plugin.id',
contentScriptId: 'another.plugin.id.contentScript',
contentScriptJs: getContentScriptJs,
postMessageHandler,
};
// Should be able to load a plugin
await editor.setPlugins([
testPlugin1,
]);
// Allow plugins to load
await jest.runAllTimersAsync();
// Because plugin loading is done by adding script elements to the document,
// we test for the presence of these script elements, rather than waiting for
// them to run.
expect(document.querySelectorAll('#joplin-plugin-scripts-container')).toHaveLength(1);
// Only one script should be present.
const scriptContainer = document.querySelector('#joplin-plugin-scripts-container');
expect(scriptContainer.querySelectorAll('script')).toHaveLength(1);
// Adding another plugin should add another script element
await editor.setPlugins([
testPlugin2, testPlugin1,
]);
await jest.runAllTimersAsync();
// There should now be script elements for each plugin
expect(scriptContainer.querySelectorAll('script')).toHaveLength(2);
// Removing the editor should remove the script container
editor.remove();
expect(document.querySelectorAll('#joplin-plugin-scripts-container')).toHaveLength(0);
});
});

303
packages/editor/CodeMirror/createEditor.ts Normal file
View File

@@ -0,0 +1,303 @@
import { Compartment, EditorState } from '@codemirror/state';
import { indentOnInput, syntaxHighlighting } from '@codemirror/language';
import {
openSearchPanel, closeSearchPanel, getSearchQuery,
highlightSelectionMatches, search,
} from '@codemirror/search';
import { classHighlighter } from '@lezer/highlight';
import {
EditorView, drawSelection, highlightSpecialChars, ViewUpdate, Command,
} from '@codemirror/view';
import { history, undoDepth, redoDepth, standardKeymap } from '@codemirror/commands';
import { keymap, KeyBinding } from '@codemirror/view';
import { searchKeymap } from '@codemirror/search';
import { historyKeymap } from '@codemirror/commands';
import { SearchState, EditorProps, EditorSettings } from '../types';
import { EditorEventType, SelectionRangeChangeEvent } from '../events';
import {
decreaseIndent, increaseIndent,
toggleBolded, toggleCode,
toggleItalicized, toggleMath,
} from './markdown/markdownCommands';
import decoratorExtension from './markdown/decoratorExtension';
import computeSelectionFormatting from './markdown/computeSelectionFormatting';
import { selectionFormattingEqual } from '../SelectionFormatting';
import configFromSettings from './configFromSettings';
import getScrollFraction from './getScrollFraction';
import CodeMirrorControl from './CodeMirrorControl';
const createEditor = (
parentElement: HTMLElement, props: EditorProps,
): CodeMirrorControl => {
const initialText = props.initialText;
let settings = props.settings;
props.onLogMessage('Initializing CodeMirror...');
let searchVisible = false;
// Handles firing an event when the undo/redo stack changes
let schedulePostUndoRedoDepthChangeId_: ReturnType<typeof setTimeout>|null = null;
let lastUndoDepth = 0;
let lastRedoDepth = 0;
const schedulePostUndoRedoDepthChange = (editor: EditorView, doItNow = false) => {
if (schedulePostUndoRedoDepthChangeId_ !== null) {
if (doItNow) {
clearTimeout(schedulePostUndoRedoDepthChangeId_);
} else {
return;
}
}
schedulePostUndoRedoDepthChangeId_ = setTimeout(() => {
schedulePostUndoRedoDepthChangeId_ = null;
const newUndoDepth = undoDepth(editor.state);
const newRedoDepth = redoDepth(editor.state);
if (newUndoDepth !== lastUndoDepth || newRedoDepth !== lastRedoDepth) {
props.onEvent({
kind: EditorEventType.UndoRedoDepthChange,
undoDepth: newUndoDepth,
redoDepth: newRedoDepth,
});
lastUndoDepth = newUndoDepth;
lastRedoDepth = newRedoDepth;
}
}, doItNow ? 0 : 1000);
};
let currentDocText = props.initialText;
const notifyDocChanged = (viewUpdate: ViewUpdate) => {
if (viewUpdate.docChanged) {
currentDocText = editor.state.doc.toString();
props.onEvent({
kind: EditorEventType.Change,
value: currentDocText,
});
schedulePostUndoRedoDepthChange(editor);
}
};
const notifyLinkEditRequest = () => {
props.onEvent({
kind: EditorEventType.EditLink,
});
};
const onSearchDialogUpdate = () => {
const query = getSearchQuery(editor.state);
const searchState: SearchState = {
searchText: query.search,
replaceText: query.replace,
useRegex: query.regexp,
caseSensitive: query.caseSensitive,
dialogVisible: searchVisible,
};
props.onEvent({
kind: EditorEventType.UpdateSearchDialog,
searchState,
});
};
const showSearchDialog = () => {
if (!searchVisible) {
openSearchPanel(editor);
}
searchVisible = true;
onSearchDialogUpdate();
};
const hideSearchDialog = () => {
if (searchVisible) {
closeSearchPanel(editor);
}
searchVisible = false;
onSearchDialogUpdate();
};
const globalSpellcheckEnabled = () => {
return editor.contentDOM.spellcheck;
};
const notifySelectionChange = (viewUpdate: ViewUpdate) => {
if (!viewUpdate.state.selection.eq(viewUpdate.startState.selection)) {
const mainRange = viewUpdate.state.selection.main;
const event: SelectionRangeChangeEvent = {
kind: EditorEventType.SelectionRangeChange,
anchor: mainRange.anchor,
head: mainRange.head,
from: mainRange.from,
to: mainRange.to,
};
props.onEvent(event);
}
};
const notifySelectionFormattingChange = (viewUpdate?: ViewUpdate) => {
const spellcheck = globalSpellcheckEnabled();
// If we can't determine the previous formatting, post the update regardless
if (!viewUpdate) {
const formatting = computeSelectionFormatting(editor.state, spellcheck);
props.onEvent({
kind: EditorEventType.SelectionFormattingChange,
formatting,
});
} else if (viewUpdate.docChanged || !viewUpdate.state.selection.eq(viewUpdate.startState.selection)) {
// Only post the update if something changed
const oldFormatting = computeSelectionFormatting(viewUpdate.startState, spellcheck);
const newFormatting = computeSelectionFormatting(viewUpdate.state, spellcheck);
if (!selectionFormattingEqual(oldFormatting, newFormatting)) {
props.onEvent({
kind: EditorEventType.SelectionFormattingChange,
formatting: newFormatting,
});
}
}
};
// Returns a keyboard command that returns true (so accepts the keybind)
// alwaysActive: true if this command should be registered even if ignoreModifiers is given.
const keyCommand = (key: string, run: Command, alwaysActive?: boolean): KeyBinding => {
return {
key,
run: editor => {
if (settings.ignoreModifiers && !alwaysActive) return false;
return run(editor);
},
};
};
const historyCompartment = new Compartment();
const dynamicConfig = new Compartment();
const editor = new EditorView({
state: EditorState.create({
// See https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts
// for a sample configuration.
extensions: [
dynamicConfig.of(configFromSettings(props.settings)),
historyCompartment.of(history()),
search(settings.useExternalSearch ? {
createPanel(_: EditorView) {
return {
// The actual search dialog is implemented with react native,
// use a dummy element.
dom: document.createElement('div'),
mount() {
showSearchDialog();
},
destroy() {
hideSearchDialog();
},
};
},
} : undefined),
drawSelection(),
highlightSpecialChars(),
highlightSelectionMatches(),
indentOnInput(),
EditorView.domEventHandlers({
scroll: (_event, view) => {
props.onEvent({
kind: EditorEventType.Scroll,
fraction: getScrollFraction(view),
});
},
}),
EditorState.tabSize.of(4),
// Apply styles to entire lines (block-display decorations)
decoratorExtension,
// Adds additional CSS classes to tokens (the default CSS classes are
// auto-generated and thus unstable).
syntaxHighlighting(classHighlighter),
EditorView.lineWrapping,
EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
notifyDocChanged(viewUpdate);
notifySelectionChange(viewUpdate);
notifySelectionFormattingChange(viewUpdate);
}),
keymap.of([
// Custom mod-f binding: Toggle the external dialog implementation
// (don't show/hide the Panel dialog).
keyCommand('Mod-f', (_: EditorView) => {
if (searchVisible) {
hideSearchDialog();
} else {
showSearchDialog();
}
return true;
}),
// Markdown formatting keyboard shortcuts
keyCommand('Mod-b', toggleBolded),
keyCommand('Mod-i', toggleItalicized),
keyCommand('Mod-$', toggleMath),
keyCommand('Mod-`', toggleCode),
keyCommand('Mod-[', decreaseIndent),
keyCommand('Mod-]', increaseIndent),
keyCommand('Mod-k', (_: EditorView) => {
notifyLinkEditRequest();
return true;
}),
keyCommand('Tab', increaseIndent, true),
keyCommand('Shift-Tab', decreaseIndent, true),
...standardKeymap, ...historyKeymap, ...searchKeymap,
]),
],
doc: initialText,
}),
parent: parentElement,
});
const editorControls = new CodeMirrorControl(editor, {
onClearHistory: () => {
// Clear history by removing then re-add the history extension.
// Just re-adding the history extension isn't enough.
editor.dispatch({
effects: historyCompartment.reconfigure([]),
});
editor.dispatch({
effects: historyCompartment.reconfigure(history()),
});
},
onSettingsChange: (newSettings: EditorSettings) => {
settings = newSettings;
editor.dispatch({
effects: dynamicConfig.reconfigure(
configFromSettings(newSettings),
),
});
},
onUndoRedo: () => {
// This callback is triggered when undo/redo is called
// directly. Show visual feedback immediately.
schedulePostUndoRedoDepthChange(editor, true);
},
onLogMessage: props.onLogMessage,
onRemove: () => {
editor.destroy();
},
});
return editorControls;
};
export default createEditor;

69
packages/editor/CodeMirror/editorCommands/editorCommands.ts Normal file
View File

@@ -0,0 +1,69 @@
import { EditorView } from '@codemirror/view';
import { EditorCommandType, ListType } from '../../types';
import { undo, redo, selectAll, indentSelection, cursorDocStart, cursorDocEnd, cursorLineStart, cursorLineEnd, deleteToLineStart, deleteToLineEnd, undoSelection, redoSelection, cursorPageDown, cursorPageUp, cursorCharRight, cursorCharLeft, insertNewlineAndIndent, cursorLineDown, cursorLineUp } from '@codemirror/commands';
import {
decreaseIndent, increaseIndent,
toggleBolded, toggleCode,
toggleHeaderLevel, toggleItalicized,
toggleList, toggleMath,
} from '../markdown/markdownCommands';
import swapLine, { SwapLineDirection } from './swapLine';
import { closeSearchPanel, findNext, findPrevious, openSearchPanel, replaceAll, replaceNext } from '@codemirror/search';
type EditorCommandFunction = (editor: EditorView)=> void;
const editorCommands: Record<EditorCommandType, EditorCommandFunction> = {
[EditorCommandType.Undo]: undo,
[EditorCommandType.Redo]: redo,
[EditorCommandType.SelectAll]: selectAll,
[EditorCommandType.Focus]: editor => editor.focus(),
[EditorCommandType.ToggleBolded]: toggleBolded,
[EditorCommandType.ToggleItalicized]: toggleItalicized,
[EditorCommandType.ToggleCode]: toggleCode,
[EditorCommandType.ToggleMath]: toggleMath,
[EditorCommandType.ToggleNumberedList]: toggleList(ListType.OrderedList),
[EditorCommandType.ToggleBulletedList]: toggleList(ListType.UnorderedList),
[EditorCommandType.ToggleCheckList]: toggleList(ListType.CheckList),
[EditorCommandType.ToggleHeading]: toggleHeaderLevel(2),
[EditorCommandType.ToggleHeading1]: toggleHeaderLevel(1),
[EditorCommandType.ToggleHeading2]: toggleHeaderLevel(2),
[EditorCommandType.ToggleHeading3]: toggleHeaderLevel(3),
[EditorCommandType.ToggleHeading4]: toggleHeaderLevel(4),
[EditorCommandType.ToggleHeading5]: toggleHeaderLevel(5),
[EditorCommandType.ScrollSelectionIntoView]: editor => {
editor.dispatch(editor.state.update({
scrollIntoView: true,
}));
},
[EditorCommandType.DeleteToLineEnd]: deleteToLineEnd,
[EditorCommandType.DeleteToLineStart]: deleteToLineStart,
[EditorCommandType.IndentMore]: increaseIndent,
[EditorCommandType.IndentLess]: decreaseIndent,
[EditorCommandType.IndentAuto]: indentSelection,
[EditorCommandType.InsertNewlineAndIndent]: insertNewlineAndIndent,
[EditorCommandType.SwapLineUp]: swapLine(SwapLineDirection.Up),
[EditorCommandType.SwapLineDown]: swapLine(SwapLineDirection.Down),
[EditorCommandType.GoDocEnd]: cursorDocEnd,
[EditorCommandType.GoDocStart]: cursorDocStart,
[EditorCommandType.GoLineStart]: cursorLineStart,
[EditorCommandType.GoLineEnd]: cursorLineEnd,
[EditorCommandType.GoLineUp]: cursorLineUp,
[EditorCommandType.GoLineDown]: cursorLineDown,
[EditorCommandType.GoPageUp]: cursorPageUp,
[EditorCommandType.GoPageDown]: cursorPageDown,
[EditorCommandType.GoCharLeft]: cursorCharLeft,
[EditorCommandType.GoCharRight]: cursorCharRight,
[EditorCommandType.UndoSelection]: undoSelection,
[EditorCommandType.RedoSelection]: redoSelection,
[EditorCommandType.ShowSearch]: openSearchPanel,
[EditorCommandType.HideSearch]: closeSearchPanel,
[EditorCommandType.FindNext]: findNext,
[EditorCommandType.FindPrevious]: findPrevious,
[EditorCommandType.ReplaceNext]: replaceNext,
[EditorCommandType.ReplaceAll]: replaceAll,
};
export default editorCommands;

11
packages/editor/CodeMirror/editorCommands/supportsCommand.ts Normal file
View File

@@ -0,0 +1,11 @@
import { EditorCommandType } from '../../types';
// The CodeMirror 6 editor supports all EditorCommandTypes.
// Note that this file is separate from editorCommands.ts to allow importing it in
// non-browser contexts.
const supportsCommand = (commandName: EditorCommandType) => {
return Object.values(EditorCommandType).includes(commandName);
};
export default supportsCommand;

49
packages/editor/CodeMirror/editorCommands/swapLine.ts Normal file
View File

@@ -0,0 +1,49 @@
import { EditorSelection } from '@codemirror/state';
import { Command, EditorView } from '@codemirror/view';
export enum SwapLineDirection {
Up = -1,
Down = 1,
}
const swapLine = (direction: SwapLineDirection): Command => (editor: EditorView) => {
const state = editor.state;
const doc = state.doc;
const transaction = state.changeByRange(range => {
const currentLine = doc.lineAt(range.anchor);
const otherLineNumber = currentLine.number + direction;
// Out of range? No changes.
if (otherLineNumber <= 0 || otherLineNumber > doc.lines) {
return { range };
}
const otherLine = doc.line(otherLineNumber);
let deltaPos;
if (direction === SwapLineDirection.Down) {
// +1: include newline
deltaPos = otherLine.length + 1;
} else {
deltaPos = otherLine.from - currentLine.from;
}
return {
range: EditorSelection.range(range.anchor + deltaPos, range.head + deltaPos),
changes: [{
from: currentLine.from,
to: currentLine.to,
insert: otherLine.text,
}, {
from: otherLine.from,
to: otherLine.to,
insert: currentLine.text,
}],
};
});
editor.dispatch(transaction);
return true;
};
export default swapLine;

11
packages/editor/CodeMirror/getScrollFraction.ts Normal file
View File

@@ -0,0 +1,11 @@
import { EditorView } from '@codemirror/view';
const getScrollFraction = (view: EditorView) => {
const maxScroll = view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight;
// Prevent division by zero
return maxScroll > 0 ? view.scrollDOM.scrollTop / maxScroll : 0;
};
export default getScrollFraction;

123
packages/editor/CodeMirror/markdown/computeSelectionFormatting.ts Normal file
View File

@@ -0,0 +1,123 @@
import SelectionFormatting, { MutableSelectionFormatting, defaultSelectionFormatting } from '../../SelectionFormatting';
import { syntaxTree } from '@codemirror/language';
import { EditorState } from '@codemirror/state';
const computeSelectionFormatting = (state: EditorState, globalSpellcheck: boolean): SelectionFormatting => {
const range = state.selection.main;
const formatting: MutableSelectionFormatting = {
...defaultSelectionFormatting,
selectedText: state.doc.sliceString(range.from, range.to),
spellChecking: globalSpellcheck,
};
const parseLinkData = (nodeText: string) => {
const linkMatch = nodeText.match(/\[([^\]]*)\]\(([^)]*)\)/);
if (linkMatch) {
return {
linkText: linkMatch[1],
linkURL: linkMatch[2],
};
}
return null;
};
// Find nodes that overlap/are within the selected region
syntaxTree(state).iterate({
from: range.from, to: range.to,
enter: node => {
// Checklists don't have a specific containing node. As such,
// we're in a checklist if we've selected a 'Task' node.
if (node.name === 'Task') {
formatting.inChecklist = true;
}
// Only handle notes that contain the entire range.
if (node.from > range.from || node.to < range.to) {
return;
}
// Lazily compute the node's text
const nodeText = () => state.doc.sliceString(node.from, node.to);
switch (node.name) {
case 'StrongEmphasis':
formatting.bolded = true;
break;
case 'Emphasis':
formatting.italicized = true;
break;
case 'ListItem':
formatting.listLevel += 1;
break;
case 'BulletList':
formatting.inUnorderedList = true;
break;
case 'OrderedList':
formatting.inOrderedList = true;
break;
case 'TaskList':
formatting.inChecklist = true;
break;
case 'InlineCode':
case 'FencedCode':
formatting.inCode = true;
formatting.unspellCheckableRegion = true;
break;
case 'InlineMath':
case 'BlockMath':
formatting.inMath = true;
formatting.unspellCheckableRegion = true;
break;
case 'ATXHeading1':
formatting.headerLevel = 1;
break;
case 'ATXHeading2':
formatting.headerLevel = 2;
break;
case 'ATXHeading3':
formatting.headerLevel = 3;
break;
case 'ATXHeading4':
formatting.headerLevel = 4;
break;
case 'ATXHeading5':
formatting.headerLevel = 5;
break;
case 'URL':
formatting.inLink = true;
formatting.linkData = {
...formatting.linkData,
linkURL: nodeText(),
};
formatting.unspellCheckableRegion = true;
break;
case 'Link':
formatting.inLink = true;
formatting.linkData = parseLinkData(nodeText());
break;
}
},
});
// The markdown parser marks checklists as unordered lists. Ensure
// that they aren't marked as such.
if (formatting.inChecklist) {
if (!formatting.inUnorderedList) {
// Even if the selection contains a Task, because an unordered list node
// must contain a valid Task node, we're only in a checklist if we're also in
// an unordered list.
formatting.inChecklist = false;
} else {
formatting.inUnorderedList = false;
}
}
if (formatting.unspellCheckableRegion) {
formatting.spellChecking = false;
}
return formatting;
};
export default computeSelectionFormatting;

43
packages/app-mobile/components/NoteEditor/CodeMirror/decoratorExtension.ts → packages/editor/CodeMirror/markdown/decoratorExtension.ts
View File

@@ -40,6 +40,10 @@ const urlDecoration = Decoration.mark({
attributes: { class: 'cm-url', ...noSpellCheckAttrs },
});
const htmlTagNameDecoration = Decoration.mark({
attributes: { class: 'cm-htmlTag', ...noSpellCheckAttrs },
});
const blockQuoteDecoration = Decoration.line({
attributes: { class: 'cm-blockQuote' },
});
@@ -48,6 +52,26 @@ const headerLineDecoration = Decoration.line({
attributes: { class: 'cm-headerLine' },
});
const tableHeaderDecoration = Decoration.line({
attributes: { class: 'cm-tableHeader' },
});
const tableBodyDecoration = Decoration.line({
attributes: { class: 'cm-tableRow' },
});
const tableDelimiterDecoration = Decoration.line({
attributes: { class: 'cm-tableDelimiter' },
});
const horizontalRuleDecoration = Decoration.mark({
attributes: { class: 'cm-hr' },
});
const taskMarkerDecoration = Decoration.mark({
attributes: { class: 'cm-taskMarker' },
});
type DecorationDescription = { pos: number; length?: number; decoration: Decoration };
// Returns a set of [Decoration]s, associated with block syntax groups that require
@@ -125,6 +149,25 @@ const computeDecorations = (view: EditorView) => {
case 'ATXHeading6':
addDecorationToLines(viewFrom, viewTo, headerLineDecoration);
break;
case 'HTMLTag':
case 'TagName':
addDecorationToRange(viewFrom, viewTo, htmlTagNameDecoration);
break;
case 'TableHeader':
addDecorationToLines(viewFrom, viewTo, tableHeaderDecoration);
break;
case 'TableDelimiter':
addDecorationToLines(viewFrom, viewTo, tableDelimiterDecoration);
break;
case 'TableRow':
addDecorationToLines(viewFrom, viewTo, tableBodyDecoration);
break;
case 'HorizontalRule':
addDecorationToRange(viewFrom, viewTo, horizontalRuleDecoration);
break;
case 'TaskMarker':
addDecorationToRange(viewFrom, viewTo, taskMarkerDecoration);
break;
}
// Only block decorations will have differing first and last lines

10
packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.bulletedVsChecklist.test.ts → packages/editor/CodeMirror/markdown/markdownCommands.bulletedVsChecklist.test.ts
View File

@@ -1,6 +1,6 @@
import { EditorSelection } from '@codemirror/state';
import { ListType } from '../types';
import createEditor from './testUtil/createEditor';
import { ListType } from '../../types';
import createTestEditor from '../testUtil/createTestEditor';
import { toggleList } from './markdownCommands';
describe('markdownCommands.bulletedVsChecklist', () => {
@@ -13,7 +13,7 @@ describe('markdownCommands.bulletedVsChecklist', () => {
const expectedTags = ['BulletList', 'Task'];
it('should remove a checklist following a bulleted list without modifying the bulleted list', async () => {
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText, EditorSelection.cursor(bulletedListPart.length + 5), expectedTags,
);
@@ -24,7 +24,7 @@ describe('markdownCommands.bulletedVsChecklist', () => {
});
it('should remove an unordered list following a checklist without modifying the checklist', async () => {
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText, EditorSelection.cursor(bulletedListPart.length - 5), expectedTags,
);
@@ -35,7 +35,7 @@ describe('markdownCommands.bulletedVsChecklist', () => {
});
it('should replace a selection of unordered and task lists with a correctly-numbered list', async () => {
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText, EditorSelection.range(0, initialDocText.length), expectedTags,
);

28
packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.test.ts → packages/editor/CodeMirror/markdown/markdownCommands.test.ts
View File

@@ -2,7 +2,7 @@ import { EditorSelection } from '@codemirror/state';
import {
toggleBolded, toggleCode, toggleHeaderLevel, toggleItalicized, toggleMath, updateLink,
} from './markdownCommands';
import createEditor from './testUtil/createEditor';
import createTestEditor from '../testUtil/createTestEditor';
import { blockMathTagName } from './markdownMathParser';
describe('markdownCommands', () => {
@@ -11,7 +11,7 @@ describe('markdownCommands', () => {
it('should bold/italicize everything selected', async () => {
const initialDocText = 'Testing...';
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText, EditorSelection.range(0, initialDocText.length), [],
);
@@ -38,7 +38,7 @@ describe('markdownCommands', () => {
it('for a cursor, bolding, then italicizing, should produce a bold-italic region', async () => {
const initialDocText = '';
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText, EditorSelection.cursor(0), [],
);
@@ -56,7 +56,7 @@ describe('markdownCommands', () => {
it('toggling math should both create and navigate out of math regions', async () => {
const initialDocText = 'Testing... ';
const editor = await createEditor(initialDocText, EditorSelection.cursor(initialDocText.length), []);
const editor = await createTestEditor(initialDocText, EditorSelection.cursor(initialDocText.length), []);
toggleMath(editor);
expect(editor.state.doc.toString()).toBe('Testing... $$');
@@ -72,7 +72,7 @@ describe('markdownCommands', () => {
it('toggling inline code should both create and navigate out of an inline code region', async () => {
const initialDocText = 'Testing...\n\n';
const editor = await createEditor(initialDocText, EditorSelection.cursor(initialDocText.length), []);
const editor = await createTestEditor(initialDocText, EditorSelection.cursor(initialDocText.length), []);
toggleCode(editor);
editor.dispatch(editor.state.replaceSelection('f(x) = ...'));
@@ -84,7 +84,7 @@ describe('markdownCommands', () => {
it('should set headers to the proper levels (when toggling)', async () => {
const initialDocText = 'Testing...\nThis is a test.';
const editor = await createEditor(initialDocText, EditorSelection.cursor(3), []);
const editor = await createTestEditor(initialDocText, EditorSelection.cursor(3), []);
toggleHeaderLevel(1)(editor);
@@ -110,7 +110,7 @@ describe('markdownCommands', () => {
it('headers should toggle properly within block quotes', async () => {
const initialDocText = 'Testing...\n\n> This is a test.\n> ...a test';
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText,
EditorSelection.cursor('Testing...\n\n> This'.length),
['Blockquote'],
@@ -134,7 +134,7 @@ describe('markdownCommands', () => {
it('block math should be created correctly within block quotes', async () => {
const initialDocText = 'Testing...\n\n> This is a test.\n> y = mx + b\n> ...a test';
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText,
EditorSelection.range(
'Testing...\n\n> This'.length,
@@ -157,7 +157,7 @@ describe('markdownCommands', () => {
it('block math should be correctly removed within block quotes', async () => {
const initialDocText = 'Testing...\n\n> $$\n> This is a test.\n> y = mx + b\n> $$\n> ...a test';
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText,
EditorSelection.cursor('Testing...\n\n> $$\n> This is'.length),
['Blockquote', blockMathTagName],
@@ -173,7 +173,7 @@ describe('markdownCommands', () => {
it('updateLink should replace link titles and isolate URLs if no title is given', async () => {
const initialDocText = '[foo](http://example.com/)';
const editor = await createEditor(initialDocText, EditorSelection.cursor('[f'.length), ['Link']);
const editor = await createTestEditor(initialDocText, EditorSelection.cursor('[f'.length), ['Link']);
updateLink('bar', 'https://example.com/')(editor);
expect(editor.state.doc.toString()).toBe(
@@ -188,7 +188,7 @@ describe('markdownCommands', () => {
it('toggling math twice, starting on a line with content, should a math block', async () => {
const initialDocText = 'Testing... ';
const editor = await createEditor(initialDocText, EditorSelection.cursor(initialDocText.length), []);
const editor = await createTestEditor(initialDocText, EditorSelection.cursor(initialDocText.length), []);
toggleMath(editor);
toggleMath(editor);
@@ -198,7 +198,7 @@ describe('markdownCommands', () => {
it('toggling math twice on an empty line should create an empty math block', async () => {
const initialDocText = 'Testing...\n\n';
const editor = await createEditor(initialDocText, EditorSelection.cursor(initialDocText.length), []);
const editor = await createTestEditor(initialDocText, EditorSelection.cursor(initialDocText.length), []);
toggleMath(editor);
toggleMath(editor);
@@ -208,7 +208,7 @@ describe('markdownCommands', () => {
it('toggling code twice on an empty line should create an empty code block', async () => {
const initialDocText = 'Testing...\n\n';
const editor = await createEditor(initialDocText, EditorSelection.cursor(initialDocText.length), []);
const editor = await createTestEditor(initialDocText, EditorSelection.cursor(initialDocText.length), []);
// Toggling code twice should create a block code region
toggleCode(editor);
@@ -222,7 +222,7 @@ describe('markdownCommands', () => {
it('toggling math twice inside a block quote should produce an empty math block', async () => {
const initialDocText = '> Testing...> \n> ';
const editor = await createEditor(initialDocText, EditorSelection.cursor(initialDocText.length), ['Blockquote']);
const editor = await createTestEditor(initialDocText, EditorSelection.cursor(initialDocText.length), ['Blockquote']);
toggleMath(editor);
toggleMath(editor);

16
packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.toggleList.test.ts → packages/editor/CodeMirror/markdown/markdownCommands.toggleList.test.ts
View File

@@ -2,8 +2,8 @@ import { EditorSelection, EditorState } from '@codemirror/state';
import {
increaseIndent, toggleList,
} from './markdownCommands';
import { ListType } from '../types';
import createEditor from './testUtil/createEditor';
import { ListType } from '../../types';
import createTestEditor from '../testUtil/createTestEditor';
describe('markdownCommands.toggleList', () => {
@@ -12,7 +12,7 @@ describe('markdownCommands.toggleList', () => {
it('should remove the same type of list', async () => {
const initialDocText = '- testing\n- this is a `test`\n';
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText,
EditorSelection.cursor(5),
['BulletList', 'InlineCode'],
@@ -26,7 +26,7 @@ describe('markdownCommands.toggleList', () => {
it('should insert a numbered list with correct numbering', async () => {
const initialDocText = 'Testing...\nThis is a test\nof list toggling...';
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText,
EditorSelection.cursor('Testing...\nThis is a'.length),
[],
@@ -51,7 +51,7 @@ describe('markdownCommands.toggleList', () => {
const unorderedListText = '- 1\n- 2\n- 3\n- 4\n- 5\n- 6\n- 7';
it('should correctly replace an unordered list with a numbered list', async () => {
const editor = await createEditor(
const editor = await createTestEditor(
unorderedListText,
EditorSelection.cursor(unorderedListText.length),
['BulletList'],
@@ -154,7 +154,7 @@ describe('markdownCommands.toggleList', () => {
it('should toggle a numbered list without changing its sublists', async () => {
const initialDocText = '1. Foo\n2. Bar\n3. Baz\n\t- Test\n\t- of\n\t- sublists\n4. Foo';
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText,
EditorSelection.cursor(0),
['OrderedList', 'BulletList'],
@@ -169,7 +169,7 @@ describe('markdownCommands.toggleList', () => {
it('should toggle a sublist without changing the parent list', async () => {
const initialDocText = '1. This\n2. is\n3. ';
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText,
EditorSelection.cursor(initialDocText.length),
['OrderedList'],
@@ -192,7 +192,7 @@ describe('markdownCommands.toggleList', () => {
it('should toggle lists properly within block quotes', async () => {
const preSubListText = '> # List test\n> * This\n> * is\n';
const initialDocText = `${preSubListText}> \t* a\n> \t* test\n> * of list toggling`;
const editor = await createEditor(
const editor = await createTestEditor(
initialDocText, EditorSelection.cursor(preSubListText.length + 3),
['BlockQuote', 'BulletList'],
);

2
packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.ts → packages/editor/CodeMirror/markdown/markdownCommands.ts
View File

@@ -2,7 +2,7 @@
import { EditorView, Command } from '@codemirror/view';
import { ListType } from '../types';
import { ListType } from '../../types';
import {
SelectionRange, EditorSelection, ChangeSpec, Line, TransactionSpec,
} from '@codemirror/state';

4
packages/app-mobile/components/NoteEditor/CodeMirror/markdownMathParser.test.ts → packages/editor/CodeMirror/markdown/markdownMathParser.test.ts
View File

@@ -3,11 +3,11 @@ import { SyntaxNode } from '@lezer/common';
import { EditorSelection, EditorState } from '@codemirror/state';
import { blockMathTagName, inlineMathContentTagName, inlineMathTagName } from './markdownMathParser';
import createEditor from './testUtil/createEditor';
import createTestEditor from '../testUtil/createTestEditor';
// Creates an EditorState with math and markdown extensions
const createEditorState = async (initialText: string, expectedTags: string[]): Promise<EditorState> => {
return (await createEditor(initialText, EditorSelection.cursor(0), expectedTags)).state;
return (await createTestEditor(initialText, EditorSelection.cursor(0), expectedTags)).state;
};
// Returns a list of all nodes with the given name in the given editor's syntax tree.

0
packages/app-mobile/components/NoteEditor/CodeMirror/markdownMathParser.ts → packages/editor/CodeMirror/markdown/markdownMathParser.ts
View File

0
packages/app-mobile/components/NoteEditor/CodeMirror/markdownReformatter.test.ts → packages/editor/CodeMirror/markdown/markdownReformatter.test.ts
View File

0
packages/app-mobile/components/NoteEditor/CodeMirror/markdownReformatter.ts → packages/editor/CodeMirror/markdown/markdownReformatter.ts
View File

0
packages/app-mobile/components/NoteEditor/CodeMirror/syntaxHighlightingLanguages.ts → packages/editor/CodeMirror/markdown/syntaxHighlightingLanguages.ts
View File

24
packages/editor/CodeMirror/testUtil/createEditorSettings.ts Normal file
View File

@@ -0,0 +1,24 @@
import { themeStyle } from '@joplin/lib/theme';
import { EditorKeymap, EditorLanguageType, EditorSettings } from '../../types';
const createEditorSettings = (themeId: number) => {
const themeData = themeStyle(themeId);
const editorSettings: EditorSettings = {
katexEnabled: true,
spellcheckEnabled: true,
useExternalSearch: true,
readOnly: false,
automatchBraces: false,
ignoreModifiers: false,
keymap: EditorKeymap.Default,
language: EditorLanguageType.Markdown,
themeData,
indentWithTabs: true,
};
return editorSettings;
};
export default createEditorSettings;

6
packages/app-mobile/components/NoteEditor/CodeMirror/testUtil/createEditor.ts → packages/editor/CodeMirror/testUtil/createTestEditor.ts
View File

@@ -3,13 +3,13 @@ import { GFM as GithubFlavoredMarkdownExt } from '@lezer/markdown';
import { indentUnit, syntaxTree } from '@codemirror/language';
import { SelectionRange, EditorSelection, EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { MarkdownMathExtension } from '../markdownMathParser';
import { MarkdownMathExtension } from '../markdown/markdownMathParser';
import forceFullParse from './forceFullParse';
import loadLangauges from './loadLanguages';
// Creates and returns a minimal editor with markdown extensions. Waits to return the editor
// until all syntax tree tags in `expectedSyntaxTreeTags` exist.
const createEditor = async (
const createTestEditor = async (
initialText: string, initialSelection: SelectionRange, expectedSyntaxTreeTags: string[],
): Promise<EditorView> => {
await loadLangauges();
@@ -62,4 +62,4 @@ const createEditor = async (
return editor;
};
export default createEditor;
export default createTestEditor;

0
packages/app-mobile/components/NoteEditor/CodeMirror/testUtil/forceFullParse.ts → packages/editor/CodeMirror/testUtil/forceFullParse.ts
View File

2
packages/app-mobile/components/NoteEditor/CodeMirror/testUtil/loadLanguages.ts → packages/editor/CodeMirror/testUtil/loadLanguages.ts
View File

@@ -1,4 +1,4 @@
import syntaxHighlightingLanguages from '../syntaxHighlightingLanguages';
import syntaxHighlightingLanguages from '../markdown/syntaxHighlightingLanguages';
// Ensure languages we use are loaded. Without this, tests may randomly fail (LanguageDescriptions
// are loaded asyncronously, in the background).

72
packages/app-mobile/components/NoteEditor/CodeMirror/theme.ts → packages/editor/CodeMirror/theme.ts vendored
View File

@@ -8,7 +8,7 @@ import { tags } from '@lezer/highlight';
import { EditorView } from '@codemirror/view';
import { Extension } from '@codemirror/state';
import { inlineMathTag, mathTag } from './markdownMathParser';
import { inlineMathTag, mathTag } from './markdown/markdownMathParser';
// For an example on how to customize the theme, see:
//
@@ -25,6 +25,12 @@ import { inlineMathTag, mathTag } from './markdownMathParser';
//
// [theme] should be a joplin theme (see @joplin/lib/theme)
const createTheme = (theme: any): Extension[] => {
// If the theme hasn't loaded yet, return nothing.
// (createTheme should be called again after the theme has loaded).
if (!theme) {
return [];
}
const isDarkTheme = theme.appearance === 'dark';
const baseGlobalStyle: Record<string, string> = {
@@ -34,15 +40,19 @@ const createTheme = (theme: any): Extension[] => {
// On iOS, apply system font scaling (e.g. font scaling
// set in accessibility settings).
font: '-apple-system-body',
// Fill container horizontally
width: '100%',
boxSizing: 'border-box',
};
const baseCursorStyle: Record<string, string> = { };
const baseContentStyle: Record<string, string> = {
fontFamily: theme.fontFamily,
fontSize: `${theme.fontSize}${theme.fontSizeUnits ?? 'px'}`,
// To allow accessibility font scaling, we also need to set the
// fontSize to a value in `em`s (relative scaling relative to
// parent font size).
fontSize: `${theme.fontSize}em`,
// Avoid using units here -- 1.55em, for example, can cause lines to overlap
// if some lines contain text with a large enough font size.
lineHeight: theme.isDesktop ? '1.55' : undefined,
};
const baseSelectionStyle: Record<string, string> = { };
const blurredSelectionStyle: Record<string, string> = { };
@@ -60,17 +70,42 @@ const createTheme = (theme: any): Extension[] => {
blurredSelectionStyle.backgroundColor = '#444';
}
const baseTheme = EditorView.baseTheme({
const monospaceStyle = {
fontFamily: theme.monospaceFont || 'monospace',
};
// This is equivalent to the default selection style -- our styling must
// be at least this specific.
const selectionBackgroundSelector = '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground';
const codeMirrorTheme = EditorView.theme({
'&': baseGlobalStyle,
// These must be !important or more specific than CodeMirror's built-ins
'.cm-content': {
fontFamily: theme.fontFamily,
...baseContentStyle,
paddingBottom: theme.isDesktop ? '400px' : undefined,
},
'&.cm-focused .cm-cursor': baseCursorStyle,
'&.cm-focused .cm-selectionBackground, ::selection': baseSelectionStyle,
'.cm-selectionBackground': blurredSelectionStyle,
// The desktop app sets the font for these elements to a specific font.
// Override this.
'& div, & span, & a': {
fontFamily: 'inherit',
},
// Override the default border around CodeMirror panels
'& > .cm-panels': {
border: 'none',
},
// &.cm-focused is used to give these styles higher specificity
// than the defaults.
[selectionBackgroundSelector]: baseSelectionStyle,
'&.cm-focused ::selection': baseSelectionStyle,
'& ::selection': blurredSelectionStyle,
'& .cm-selectionLayer .cm-selectionBackground': blurredSelectionStyle,
'&.cm-editor.cm-focused': {
outline: 'none !important',
@@ -101,6 +136,8 @@ const createTheme = (theme: any): Extension[] => {
borderStyle: 'solid',
borderColor: theme.colorFaded,
backgroundColor: 'rgba(155, 155, 155, 0.1)',
...(theme.isDesktop ? monospaceStyle : {}),
},
// CodeMirror wraps the existing inline span in an additional element.
@@ -113,12 +150,21 @@ const createTheme = (theme: any): Extension[] => {
borderStyle: 'solid',
borderColor: isDarkTheme ? 'rgba(200, 200, 200, 0.5)' : 'rgba(100, 100, 100, 0.5)',
borderRadius: '4px',
...(theme.isDesktop ? monospaceStyle : {}),
},
'& .cm-mathBlock, & .cm-inlineMath': {
color: isDarkTheme ? '#9fa' : '#276',
},
'& .cm-tableHeader, & .cm-tableRow, & .cm-tableDelimiter': monospaceStyle,
'& .cm-taskMarker': monospaceStyle,
// Override the default URL style when the URL is within a link
'& .tok-url.tok-link, & .tok-link.tok-meta, & .tok-link.tok-string': {
opacity: theme.isDesktop ? 0.6 : 1,
},
// Style the search widget. Use ':root' to increase the selector's precedence
// (override the existing preset styles).
@@ -128,9 +174,7 @@ const createTheme = (theme: any): Extension[] => {
color: isDarkTheme ? 'white' : 'black',
},
},
});
const appearanceTheme = EditorView.theme({}, { dark: isDarkTheme });
}, { dark: isDarkTheme });
const baseHeadingStyle = {
fontWeight: 'bold',
@@ -150,7 +194,6 @@ const createTheme = (theme: any): Extension[] => {
...baseHeadingStyle,
tag: tags.heading1,
fontSize: '1.6em',
borderBottom: `1px solid ${theme.dividerColor}`,
},
{
...baseHeadingStyle,
@@ -189,7 +232,7 @@ const createTheme = (theme: any): Extension[] => {
{
tag: tags.link,
color: theme.urlColor,
textDecoration: 'underline',
textDecoration: theme.isDesktop ? undefined : 'underline',
},
{
tag: [mathTag, inlineMathTag],
@@ -220,8 +263,7 @@ const createTheme = (theme: any): Extension[] => {
]);
return [
baseTheme,
appearanceTheme,
codeMirrorTheme,
syntaxHighlighting(highlightingStyle),
// If we haven't defined highlighting for tags, fall back

73
packages/editor/SelectionFormatting.ts Normal file
View File

@@ -0,0 +1,73 @@
// Stores information about the current content of the user's selection
export interface MutableSelectionFormatting {
bolded: boolean;
italicized: boolean;
inChecklist: boolean;
inCode: boolean;
inUnorderedList: boolean;
inOrderedList: boolean;
inMath: boolean;
inLink: boolean;
spellChecking: boolean;
unspellCheckableRegion: boolean;
// Link data, both fields are null if not in a link.
linkData: {
readonly linkText: string|null;
readonly linkURL: string|null;
};
// If [headerLevel], [listLevel], etc. are zero, then the
// selection isn't in a header/list
headerLevel: number;
listLevel: number;
// Content of the selection
selectedText: string;
}
type SelectionFormatting = Readonly<MutableSelectionFormatting>;
export default SelectionFormatting;
export const defaultSelectionFormatting: SelectionFormatting = {
bolded: false,
italicized: false,
inChecklist: false,
inCode: false,
inUnorderedList: false,
inOrderedList: false,
inMath: false,
inLink: false,
spellChecking: false,
unspellCheckableRegion: false,
linkData: {
linkText: null,
linkURL: null,
},
headerLevel: 0,
listLevel: 0,
selectedText: '',
};
export const selectionFormattingEqual = (a: SelectionFormatting, b: SelectionFormatting): boolean => {
// Get keys from the default so that only SelectionFormatting key/value pairs are
// considered. If a and/or b inherit from SelectionFormatting, we want to ignore
// keys added by child interfaces.
const keys = Object.keys(defaultSelectionFormatting) as (keyof SelectionFormatting)[];
for (const key of keys) {
if (key === 'linkData') {
// A deeper check is required for linkData
if (a[key].linkText !== b[key].linkText || a[key].linkURL !== b[key].linkURL) {
return false;
}
} else if (a[key] !== b[key]) {
return false;
}
}
return true;
};

65
packages/editor/events.ts Normal file
View File

@@ -0,0 +1,65 @@
import type SelectionFormatting from './SelectionFormatting';
import type { SearchState } from './types';
export enum EditorEventType {
Change,
UndoRedoDepthChange,
SelectionRangeChange,
SelectionFormattingChange,
UpdateSearchDialog,
EditLink,
Scroll,
}
export interface ChangeEvent {
kind: EditorEventType.Change;
// New editor content
value: string;
}
export interface UndoRedoDepthChangeEvent {
kind: EditorEventType.UndoRedoDepthChange;
undoDepth: number;
redoDepth: number;
}
export interface SelectionRangeChangeEvent {
kind: EditorEventType.SelectionRangeChange;
anchor: number;
head: number;
from: number;
to: number;
}
export interface SelectionFormattingChangeEvent {
kind: EditorEventType.SelectionFormattingChange;
formatting: SelectionFormatting;
}
export interface EditorScrolledEvent {
kind: EditorEventType.Scroll;
// A fraction from 0 to 1, where 1 corresponds to the end of the document
fraction: number;
}
export interface UpdateSearchDialogEvent {
kind: EditorEventType.UpdateSearchDialog;
searchState: SearchState;
}
export interface RequestEditLinkEvent {
kind: EditorEventType.EditLink;
}
export type EditorEvent =
ChangeEvent|UndoRedoDepthChangeEvent|SelectionRangeChangeEvent|
EditorScrolledEvent|
SelectionFormattingChangeEvent|UpdateSearchDialogEvent|
RequestEditLinkEvent;

19
packages/editor/jest.config.js Normal file
View File

@@ -0,0 +1,19 @@
module.exports = {
'moduleFileExtensions': [
'ts',
'tsx',
'js',
'jsx',
],
'transform': {
'\\.(ts|tsx)$': 'ts-jest',
},
testEnvironment: 'jsdom',
testMatch: ['**/*.test.(ts|tsx)'],
setupFilesAfterEnv: ['./jest.setup.js'],
testPathIgnorePatterns: ['<rootDir>/node_modules/'],
slowTestThreshold: 40,
};

16
packages/editor/jest.setup.js Normal file
View File

@@ -0,0 +1,16 @@
// Prevents the CodeMirror error "getClientRects is undefined".
// See https://github.com/jsdom/jsdom/issues/3002#issue-652790925
document.createRange = () => {
const range = new Range();
range.getBoundingClientRect = jest.fn();
range.getClientRects = () => {
return {
length: 0,
item: () => null,
[Symbol.iterator]: jest.fn(),
};
};
return range;
};

48
packages/editor/package.json Normal file
View File

@@ -0,0 +1,48 @@
{
"name": "@joplin/editor",
"version": "2.13.0",
"description": "Web-based markdown editor",
"private": true,
"scripts": {
"tsc": "tsc --project tsconfig.json",
"watch": "tsc --watch --preserveWatchOutput --project tsconfig.json",
"postinstall": "yarn run tsc",
"test": "jest",
"test-ci": "yarn test"
},
"repository": {
"type": "git",
"url": "git+https://github.com/laurent22/joplin.git"
},
"devDependencies": {
"@joplin/lib": "~2.13",
"@joplin/tools": "~2.13",
"@testing-library/react-hooks": "8.0.1",
"@types/jest": "29.5.3",
"@types/react": "18.0.24",
"@types/react-redux": "7.1.25",
"@types/styled-components": "5.1.26",
"jest": "29.5.0",
"jest-environment-jsdom": "29.5.0",
"ts-jest": "29.1.1",
"typescript": "5.1.3"
},
"dependencies": {
"@codemirror/autocomplete": "6.9.0",
"@codemirror/commands": "6.2.5",
"@codemirror/lang-cpp": "6.0.2",
"@codemirror/lang-html": "6.4.6",
"@codemirror/lang-java": "6.0.1",
"@codemirror/lang-javascript": "6.2.1",
"@codemirror/lang-markdown": "6.2.1",
"@codemirror/lang-php": "6.0.1",
"@codemirror/lang-rust": "6.0.1",
"@codemirror/language": "6.9.0",
"@codemirror/legacy-modes": "6.3.3",
"@codemirror/search": "6.5.2",
"@codemirror/state": "6.2.1",
"@codemirror/view": "6.18.0",
"@lezer/markdown": "1.1.0",
"@replit/codemirror-vim": "6.0.14"
}
}

11
packages/editor/tsconfig.json Normal file
View File

@@ -0,0 +1,11 @@
{
"extends": "../../tsconfig.json",
"include": [
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"**/node_modules",
"**/dist"
]
}

163
packages/editor/types.ts Normal file
View File

@@ -0,0 +1,163 @@
import type { Theme } from '@joplin/lib/themes/type';
import type { EditorEvent } from './events';
// Editor commands. For compatibility, the string values of these commands
// should correspond with the CodeMirror 5 commands:
// https://codemirror.net/5/doc/manual.html#commands
export enum EditorCommandType {
Undo = 'undo',
Redo = 'redo',
SelectAll = 'selectAll',
Focus = 'focus',
// Formatting editor commands
ToggleBolded = 'textBold',
ToggleItalicized = 'textItalic',
ToggleCode = 'textCode',
ToggleMath = 'textMath',
ToggleNumberedList = 'textNumberedList',
ToggleBulletedList = 'textBulletedList',
ToggleCheckList = 'textCheckbox',
ToggleHeading = 'textHeading',
ToggleHeading1 = 'textHeading1',
ToggleHeading2 = 'textHeading2',
ToggleHeading3 = 'textHeading3',
ToggleHeading4 = 'textHeading4',
ToggleHeading5 = 'textHeading5',
// Find commands
ShowSearch = 'find',
HideSearch = 'hideSearchDialog',
FindNext = 'findNext',
FindPrevious = 'findPrev',
ReplaceNext = 'replace',
ReplaceAll = 'replaceAll',
// Editing and navigation commands
ScrollSelectionIntoView = 'scrollSelectionIntoView',
DeleteToLineEnd = 'killLine',
DeleteToLineStart = 'delLineLeft',
IndentMore = 'indentMore',
IndentLess = 'indentLess',
IndentAuto = 'indentAuto',
InsertNewlineAndIndent = 'newlineAndIndent',
SwapLineUp = 'swapLineUp',
SwapLineDown = 'swapLineDown',
GoDocEnd = 'goDocEnd',
GoDocStart = 'goDocStart',
GoLineStart = 'goLineStart',
GoLineEnd = 'goLineEnd',
GoLineUp = 'goLineUp',
GoLineDown = 'goLineDown',
GoPageUp = 'goPageUp',
GoPageDown = 'goPageDown',
GoCharLeft = 'goCharLeft',
GoCharRight = 'goCharRight',
UndoSelection = 'undoSelection',
RedoSelection = 'redoSelection',
}
// Because the editor package can run in a WebView, plugin content scripts
// need to be provided as text, rather than as file paths.
export interface PluginData {
pluginId: string;
contentScriptId: string;
contentScriptJs: ()=> Promise<string>;
postMessageHandler: (message: any)=> any;
}
export interface EditorControl {
supportsCommand(name: EditorCommandType|string): boolean;
execCommand(name: EditorCommandType|string): void;
undo(): void;
redo(): void;
select(anchor: number, head: number): void;
// 0 corresponds to the top, 1 corresponds to the bottom.
setScrollPercent(fraction: number): void;
insertText(text: string): void;
updateBody(newBody: string): void;
updateSettings(newSettings: EditorSettings): void;
// Create a new link or update the currently selected link with
// the given [label] and [url].
updateLink(label: string, url: string): void;
setSearchState(state: SearchState): void;
setPlugins(plugins: PluginData[]): Promise<void>;
}
export enum EditorLanguageType {
Markdown,
Html,
}
export enum EditorKeymap {
Default = 'default',
Vim = 'vim',
Emacs = 'emacs',
}
export interface EditorSettings {
// EditorSettings objects are deserialized within WebViews, where
// [themeStyle(themeId: number)] doesn't work. As such, we need both
// a Theme must be provided.
themeData: Theme;
// True if the search panel is implemented outside of the editor (e.g. with
// React Native).
useExternalSearch: boolean;
automatchBraces: boolean;
// True if internal command keyboard shortcuts should be ignored (thus
// allowing Joplin shortcuts to run).
ignoreModifiers: boolean;
language: EditorLanguageType;
keymap: EditorKeymap;
katexEnabled: boolean;
spellcheckEnabled: boolean;
readOnly: boolean;
indentWithTabs: boolean;
}
export type LogMessageCallback = (message: string)=> void;
export type OnEventCallback = (event: EditorEvent)=> void;
export interface EditorProps {
settings: EditorSettings;
initialText: string;
onEvent: OnEventCallback;
onLogMessage: LogMessageCallback;
}
export interface SearchState {
useRegex: boolean;
caseSensitive: boolean;
searchText: string;
replaceText: string;
dialogVisible: boolean;
}
// Possible types of lists in the editor
export enum ListType {
CheckList,
OrderedList,
UnorderedList,
}

31
packages/lib/models/Setting.ts
View File

@@ -1022,23 +1022,6 @@ class Setting extends BaseModel {
'folders.sortOrder.reverse': { value: false, type: SettingItemType.Bool, storage: SettingStorage.File, isGlobal: true, public: true, label: () => _('Reverse sort order'), appTypes: [AppType.Cli] },
trackLocation: { value: true, type: SettingItemType.Bool, section: 'note', storage: SettingStorage.File, isGlobal: true, public: true, label: () => _('Save geo-location with notes') },
// 2020-10-29: For now disable the beta editor due to
// underlying bugs in the TextInput component which we cannot
// fix. Also the editor crashes in Android and in some cases in
// iOS.
// https://discourse.joplinapp.org/t/anyone-using-the-beta-editor-on-ios/11658/9
'editor.beta': {
value: false,
type: SettingItemType.Bool,
section: 'note',
public: false,
appTypes: [AppType.Mobile],
label: () => 'Opt-in to the editor beta',
description: () => 'This beta adds list continuation and syntax highlighting. If you find bugs, please report them in the Discourse forum.',
storage: SettingStorage.File,
isGlobal: true,
},
'editor.usePlainText': {
value: false,
type: SettingItemType.Bool,
@@ -1475,6 +1458,20 @@ class Setting extends BaseModel {
isGlobal: true,
},
// 2023-09-07: This setting is now used to track the desktop beta editor. It
// was used to track the mobile beta editor previously.
'editor.beta': {
value: false,
type: SettingItemType.Bool,
section: 'general',
public: true,
appTypes: [AppType.Desktop],
label: () => 'Opt-in to the editor beta',
description: () => 'This beta adds improved accessibility and plugin API compatibility with the mobile editor. If you find bugs, please report them in the Discourse forum.',
storage: SettingStorage.File,
isGlobal: true,
},
'net.customCertificates': {
value: '',
type: SettingItemType.String,

425
yarn.lock
View File

@@ -2778,13 +2778,13 @@ __metadata:
languageName: node
linkType: hard
"@bam.tech/react-native-image-resizer@npm:3.0.7":
version: 3.0.7
resolution: "@bam.tech/react-native-image-resizer@npm:3.0.7"
"@bam.tech/react-native-image-resizer@npm:3.0.5":
version: 3.0.5
resolution: "@bam.tech/react-native-image-resizer@npm:3.0.5"
peerDependencies:
react: "*"
react-native: "*"
checksum: a4eaeb4a00fcc92e9f31d2e7bd7a55f0f90a76b25f8cd049e087ed95b99d961481bb0c5baad6393b57a551266ade10cacd608b37e27fc458a120c04b947729a6
checksum: f555bd10aafab1a797b6f5142e59b1bb11f229b61d35c3e6c9d734bbd4999f97bcc86853f69965d758ca872aad024add7a852041da498b177eee923ef82e506d
languageName: node
linkType: hard
@@ -2814,9 +2814,9 @@ __metadata:
languageName: node
linkType: hard
"@codemirror/autocomplete@npm:^6.0.0":
version: 6.4.2
resolution: "@codemirror/autocomplete@npm:6.4.2"
"@codemirror/autocomplete@npm:6.9.0, @codemirror/autocomplete@npm:^6.0.0, @codemirror/autocomplete@npm:^6.7.1":
version: 6.9.0
resolution: "@codemirror/autocomplete@npm:6.9.0"
dependencies:
"@codemirror/language": ^6.0.0
"@codemirror/state": ^6.0.0
@@ -2827,19 +2827,19 @@ __metadata:
"@codemirror/state": ^6.0.0
"@codemirror/view": ^6.0.0
"@lezer/common": ^1.0.0
checksum: c6cc4edb1c412153e6f6f27926674d7f1d386d1f30d6d4f60c5b52bfa0105870b0c70449b69891937bcf082340d8b0fa6d1f9f28f5eb60adc2974ed4c73aadc1
checksum: a5f661944c75f40b02c90a193c9a459c0fd7e335c0ac5973420c19157dfb46010f573c2b70731591fe477e7a2ad10121ff3ae394a72d450946d7b886c28b0368
languageName: node
linkType: hard
"@codemirror/commands@npm:6.2.2":
version: 6.2.2
resolution: "@codemirror/commands@npm:6.2.2"
"@codemirror/commands@npm:6.2.5":
version: 6.2.5
resolution: "@codemirror/commands@npm:6.2.5"
dependencies:
"@codemirror/language": ^6.0.0
"@codemirror/state": ^6.2.0
"@codemirror/view": ^6.0.0
"@lezer/common": ^1.0.0
checksum: d3aa1ca8cbd7b9434eedba6b6d783411670796bf6ab61990afc4fd0c04645189fe4dd55bb95e23b943e9089f9739bc7e92aa4b2ac3eac09cfa2b91a45f608d3e
checksum: 6d373bcfd4337160243e1493c8703a8e367e208811742331679a6410a3645de36ae8a5664e11790fec521137b45f34d703e9292932a98c4de10139510f3f29a3
languageName: node
linkType: hard
@@ -2854,31 +2854,32 @@ __metadata:
linkType: hard
"@codemirror/lang-css@npm:^6.0.0":
version: 6.1.1
resolution: "@codemirror/lang-css@npm:6.1.1"
version: 6.2.1
resolution: "@codemirror/lang-css@npm:6.2.1"
dependencies:
"@codemirror/autocomplete": ^6.0.0
"@codemirror/language": ^6.0.0
"@codemirror/state": ^6.0.0
"@lezer/common": ^1.0.2
"@lezer/css": ^1.0.0
checksum: 9b0bf7c7544fb604b67325689d783981e4099560f577bc1f10c52cb18e9d275ebdbdbd3f335a1dbb9c4910c36320f74ca015fc92ef99f930ecb9d481a2bf3511
checksum: 5a8457ee8a4310030a969f2d3128429f549c4dc9b7907ee8888b42119c80b65af99093801432efdf659b8ec36a147d2a947bc1ecbbf69a759395214e3f4834a8
languageName: node
linkType: hard
"@codemirror/lang-html@npm:6.4.3, @codemirror/lang-html@npm:^6.0.0":
version: 6.4.3
resolution: "@codemirror/lang-html@npm:6.4.3"
"@codemirror/lang-html@npm:6.4.6, @codemirror/lang-html@npm:^6.0.0":
version: 6.4.6
resolution: "@codemirror/lang-html@npm:6.4.6"
dependencies:
"@codemirror/autocomplete": ^6.0.0
"@codemirror/lang-css": ^6.0.0
"@codemirror/lang-javascript": ^6.0.0
"@codemirror/language": ^6.4.0
"@codemirror/state": ^6.0.0
"@codemirror/view": ^6.2.2
"@codemirror/view": ^6.17.0
"@lezer/common": ^1.0.0
"@lezer/css": ^1.1.0
"@lezer/html": ^1.3.0
checksum: 6177d19147580964ecd6910ae951201929a96e63f4f0e624c3138e2805fa87ec6d6d952a3a888c5a52af78b6dd6d04d7d8c76c6a9cd65b1921dc467b5dbaea72
checksum: 8f884f4423ffc783181ee933f7212ad4ece204695cf8af9535a593f95e901d36515a8561fc336a0fbcf5782369b9484eeb0d2cec2167622868238177c5e6eb36
languageName: node
linkType: hard
@@ -2892,32 +2893,33 @@ __metadata:
languageName: node
linkType: hard
"@codemirror/lang-javascript@npm:6.1.5, @codemirror/lang-javascript@npm:^6.0.0":
version: 6.1.5
resolution: "@codemirror/lang-javascript@npm:6.1.5"
"@codemirror/lang-javascript@npm:6.2.1, @codemirror/lang-javascript@npm:^6.0.0":
version: 6.2.1
resolution: "@codemirror/lang-javascript@npm:6.2.1"
dependencies:
"@codemirror/autocomplete": ^6.0.0
"@codemirror/language": ^6.6.0
"@codemirror/lint": ^6.0.0
"@codemirror/state": ^6.0.0
"@codemirror/view": ^6.0.0
"@codemirror/view": ^6.17.0
"@lezer/common": ^1.0.0
"@lezer/javascript": ^1.0.0
checksum: f0355f9577fac03437137356b5c8826ec073480d9b0efc62289eac483172d47dafe569f31bf788e4228e8b789197e50a0768cf10b0cde5f600e89b6b469f52cc
checksum: 3df38c4cced06195283a9a2a9365aaa7c8c1b157852b331bc3a118403f774bbba57d2a392de52f5e28d2b344a323bc0146bcf7c8ef8be2473f167d815e4a37cd
languageName: node
linkType: hard
"@codemirror/lang-markdown@npm:6.1.0":
version: 6.1.0
resolution: "@codemirror/lang-markdown@npm:6.1.0"
"@codemirror/lang-markdown@npm:6.2.1":
version: 6.2.1
resolution: "@codemirror/lang-markdown@npm:6.2.1"
dependencies:
"@codemirror/autocomplete": ^6.7.1
"@codemirror/lang-html": ^6.0.0
"@codemirror/language": ^6.3.0
"@codemirror/state": ^6.0.0
"@codemirror/view": ^6.0.0
"@lezer/common": ^1.0.0
"@lezer/markdown": ^1.0.0
checksum: faee880c5e695391fc5b92788d1500bed3f0cc3766c987077cdc1643cf38b97eb1774a29491a7a75064089478b895e7c8fe5a4f08ac93c9614ccbbe188f10b47
checksum: ef3bdfd01e418efc7f7fdf0baa2e8e91875b37f870fcad98f846954763c7cc71bac95736591cd6c52b39cc380261d76ae7b37ca97ef1641c4c266476748046d3
languageName: node
linkType: hard
@@ -2944,9 +2946,9 @@ __metadata:
languageName: node
linkType: hard
"@codemirror/language@npm:6.6.0, @codemirror/language@npm:^6.0.0, @codemirror/language@npm:^6.3.0, @codemirror/language@npm:^6.4.0, @codemirror/language@npm:^6.6.0":
version: 6.6.0
resolution: "@codemirror/language@npm:6.6.0"
"@codemirror/language@npm:6.9.0, @codemirror/language@npm:^6.0.0, @codemirror/language@npm:^6.3.0, @codemirror/language@npm:^6.4.0, @codemirror/language@npm:^6.6.0":
version: 6.9.0
resolution: "@codemirror/language@npm:6.9.0"
dependencies:
"@codemirror/state": ^6.0.0
"@codemirror/view": ^6.0.0
@@ -2954,56 +2956,56 @@ __metadata:
"@lezer/highlight": ^1.0.0
"@lezer/lr": ^1.0.0
style-mod: ^4.0.0
checksum: bb9411620e2f231653a3f0c4429e0d19a3843bff5dbc117df4649d7bf783ec4ad809c0add8bc0887a4ec3f48b4f8f941621168e47d76101d5383f0d670af1722
checksum: 9a897fb0f569159eeafb7dce83061b425af7244bbeae2649e0e677488548b2a02eaf0c13c0c5b4d59da55e8866e6f4dc7abe3dfaa09c13749a2fa2c0dbc0c565
languageName: node
linkType: hard
"@codemirror/legacy-modes@npm:6.3.2":
version: 6.3.2
resolution: "@codemirror/legacy-modes@npm:6.3.2"
"@codemirror/legacy-modes@npm:6.3.3":
version: 6.3.3
resolution: "@codemirror/legacy-modes@npm:6.3.3"
dependencies:
"@codemirror/language": ^6.0.0
checksum: fa5f5477fb9e19267251e2ecd3de8c1a4c2512813555bb60111dce3951f2c3f6080a2985a573b7542534ba1d2c34115f7e39ee23fdf8f6f81db6f8ce447c1efc
checksum: 3cd32b0f011b0a193e0948e5901b625f38aa6d9a8b24344531d6e142eb6fbb3e6cb5969429102044f3d04fbe53c4deaebd9f659c05067a0b18d17766290c9e05
languageName: node
linkType: hard
"@codemirror/lint@npm:^6.0.0":
version: 6.2.0
resolution: "@codemirror/lint@npm:6.2.0"
version: 6.4.1
resolution: "@codemirror/lint@npm:6.4.1"
dependencies:
"@codemirror/state": ^6.0.0
"@codemirror/view": ^6.0.0
crelt: ^1.0.5
checksum: b97e55a07bca9f7e357e495853ba189ae0ff7dfe7e7ae445d7a0d6c6926ec792c7f5c6b6c13a1f137fd9fedf44a6624e9d500f76d0d46a3c3e9d19c2cda9d28a
checksum: ac8120ca96b5ef57abd2705b2620c15c7449b5056bca87053480e244c6772863e1537387a863cfb784f9f2af2c8b30be78a31660d96a815672059085beb51fd5
languageName: node
linkType: hard
"@codemirror/search@npm:6.3.0":
version: 6.3.0
resolution: "@codemirror/search@npm:6.3.0"
"@codemirror/search@npm:6.5.2":
version: 6.5.2
resolution: "@codemirror/search@npm:6.5.2"
dependencies:
"@codemirror/state": ^6.0.0
"@codemirror/view": ^6.0.0
crelt: ^1.0.5
checksum: b757eebbb541c9d74fe36ccfdd03bc3e4e7aebb08b491e207d5898f24aaa612558c393ba49de5bf375972f5774de817fcfbad1ac551dda1a34badb41cf130d36
checksum: bc535151277fda0a370ac496b9b0d5751fd91bd8e3eb29dafbfe6bf3125dc450a7e361ebc302f0ebc4193ac337bdf555ab3d5ec753dbb44452225618a5630dd3
languageName: node
linkType: hard
"@codemirror/state@npm:6.2.0, @codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.1.4, @codemirror/state@npm:^6.2.0":
version: 6.2.0
resolution: "@codemirror/state@npm:6.2.0"
checksum: fdc99c773dc09c700dd02bf918f06132aa8d3069c262cc4eb6ca5c810ce24ae2d7e90719ae7630a8158fd263018de6d40bd78f312e6bfba754e737b64e6c6b3d
"@codemirror/state@npm:6.2.1, @codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.1.4, @codemirror/state@npm:^6.2.0":
version: 6.2.1
resolution: "@codemirror/state@npm:6.2.1"
checksum: d12a321d0471b264b9d3259042bff913a8b939e8d28d408ff452004538a71ca9d5329df3f8a1d8a9183f5b42a7ef5b200737bcab1065714f5ae8e0a5ba9d59d3
languageName: node
linkType: hard
"@codemirror/view@npm:6.9.3, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.2.2, @codemirror/view@npm:^6.6.0":
version: 6.9.3
resolution: "@codemirror/view@npm:6.9.3"
"@codemirror/view@npm:6.18.0, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.6.0":
version: 6.18.0
resolution: "@codemirror/view@npm:6.18.0"
dependencies:
"@codemirror/state": ^6.1.4
style-mod: ^4.0.0
style-mod: ^4.1.0
w3c-keyname: ^2.2.4
checksum: 718ecbb021ca75eb89003f73c846a07d36a708dcfec8345f0f0dbcfc0d0df5ea6f114918694b2730a6d49e5e50502bcce79ce7ff94ce55748e068e5a35073755
checksum: 275bf5898e884297f16f73e4dff1b520a196a5f7724fbeda634a927e7f4036f6786e816b124505942de99800fb66c538307e8c08e55234ad57483f1a009e3d35
languageName: node
linkType: hard
@@ -4056,6 +4058,47 @@ __metadata:
languageName: node
linkType: hard
"@jest/core@npm:^29.5.0, @jest/core@npm:^29.7.0":
version: 29.7.0
resolution: "@jest/core@npm:29.7.0"
dependencies:
"@jest/console": ^29.7.0
"@jest/reporters": ^29.7.0
"@jest/test-result": ^29.7.0
"@jest/transform": ^29.7.0
"@jest/types": ^29.6.3
"@types/node": "*"
ansi-escapes: ^4.2.1
chalk: ^4.0.0
ci-info: ^3.2.0
exit: ^0.1.2
graceful-fs: ^4.2.9
jest-changed-files: ^29.7.0
jest-config: ^29.7.0
jest-haste-map: ^29.7.0
jest-message-util: ^29.7.0
jest-regex-util: ^29.6.3
jest-resolve: ^29.7.0
jest-resolve-dependencies: ^29.7.0
jest-runner: ^29.7.0
jest-runtime: ^29.7.0
jest-snapshot: ^29.7.0
jest-util: ^29.7.0
jest-validate: ^29.7.0
jest-watcher: ^29.7.0
micromatch: ^4.0.4
pretty-format: ^29.7.0
slash: ^3.0.0
strip-ansi: ^6.0.0
peerDependencies:
node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
peerDependenciesMeta:
node-notifier:
optional: true
checksum: af759c9781cfc914553320446ce4e47775ae42779e73621c438feb1e4231a5d4862f84b1d8565926f2d1aab29b3ec3dcfdc84db28608bdf5f29867124ebcfc0d
languageName: node
linkType: hard
"@jest/core@npm:^29.6.4":
version: 29.6.4
resolution: "@jest/core@npm:29.6.4"
@@ -4097,47 +4140,6 @@ __metadata:
languageName: node
linkType: hard
"@jest/core@npm:^29.7.0":
version: 29.7.0
resolution: "@jest/core@npm:29.7.0"
dependencies:
"@jest/console": ^29.7.0
"@jest/reporters": ^29.7.0
"@jest/test-result": ^29.7.0
"@jest/transform": ^29.7.0
"@jest/types": ^29.6.3
"@types/node": "*"
ansi-escapes: ^4.2.1
chalk: ^4.0.0
ci-info: ^3.2.0
exit: ^0.1.2
graceful-fs: ^4.2.9
jest-changed-files: ^29.7.0
jest-config: ^29.7.0
jest-haste-map: ^29.7.0
jest-message-util: ^29.7.0
jest-regex-util: ^29.6.3
jest-resolve: ^29.7.0
jest-resolve-dependencies: ^29.7.0
jest-runner: ^29.7.0
jest-runtime: ^29.7.0
jest-snapshot: ^29.7.0
jest-util: ^29.7.0
jest-validate: ^29.7.0
jest-watcher: ^29.7.0
micromatch: ^4.0.4
pretty-format: ^29.7.0
slash: ^3.0.0
strip-ansi: ^6.0.0
peerDependencies:
node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
peerDependenciesMeta:
node-notifier:
optional: true
checksum: af759c9781cfc914553320446ce4e47775ae42779e73621c438feb1e4231a5d4862f84b1d8565926f2d1aab29b3ec3dcfdc84db28608bdf5f29867124ebcfc0d
languageName: node
linkType: hard
"@jest/create-cache-key-function@npm:^27.0.1":
version: 27.4.2
resolution: "@jest/create-cache-key-function@npm:27.4.2"
@@ -4637,6 +4639,7 @@ __metadata:
"@electron/remote": 2.0.11
"@fortawesome/fontawesome-free": 5.15.4
"@joeattardi/emoji-button": 4.6.4
"@joplin/editor": ~2.13
"@joplin/lib": ~2.13
"@joplin/renderer": ~2.13
"@joplin/tools": ~2.13
@@ -4712,20 +4715,8 @@ __metadata:
"@babel/core": 7.20.2
"@babel/preset-env": 7.20.2
"@babel/runtime": 7.20.0
"@bam.tech/react-native-image-resizer": 3.0.7
"@codemirror/commands": 6.2.2
"@codemirror/lang-cpp": 6.0.2
"@codemirror/lang-html": 6.4.3
"@codemirror/lang-java": 6.0.1
"@codemirror/lang-javascript": 6.1.5
"@codemirror/lang-markdown": 6.1.0
"@codemirror/lang-php": 6.0.1
"@codemirror/lang-rust": 6.0.1
"@codemirror/language": 6.6.0
"@codemirror/legacy-modes": 6.3.2
"@codemirror/search": 6.3.0
"@codemirror/state": 6.2.0
"@codemirror/view": 6.9.3
"@bam.tech/react-native-image-resizer": 3.0.5
"@joplin/editor": ~2.13
"@joplin/lib": ~2.13
"@joplin/react-native-alarm-notification": ~2.13
"@joplin/react-native-saf-x": ~2.13
@@ -4822,6 +4813,40 @@ __metadata:
languageName: unknown
linkType: soft
"@joplin/editor@workspace:packages/editor, @joplin/editor@~2.13":
version: 0.0.0-use.local
resolution: "@joplin/editor@workspace:packages/editor"
dependencies:
"@codemirror/autocomplete": 6.9.0
"@codemirror/commands": 6.2.5
"@codemirror/lang-cpp": 6.0.2
"@codemirror/lang-html": 6.4.6
"@codemirror/lang-java": 6.0.1
"@codemirror/lang-javascript": 6.2.1
"@codemirror/lang-markdown": 6.2.1
"@codemirror/lang-php": 6.0.1
"@codemirror/lang-rust": 6.0.1
"@codemirror/language": 6.9.0
"@codemirror/legacy-modes": 6.3.3
"@codemirror/search": 6.5.2
"@codemirror/state": 6.2.1
"@codemirror/view": 6.18.0
"@joplin/lib": ~2.13
"@joplin/tools": ~2.13
"@lezer/markdown": 1.1.0
"@replit/codemirror-vim": 6.0.14
"@testing-library/react-hooks": 8.0.1
"@types/jest": 29.5.3
"@types/react": 18.0.24
"@types/react-redux": 7.1.25
"@types/styled-components": 5.1.26
jest: 29.5.0
jest-environment-jsdom: 29.5.0
ts-jest: 29.1.1
typescript: 5.1.3
languageName: unknown
linkType: soft
"@joplin/fork-htmlparser2@^4.1.46, @joplin/fork-htmlparser2@workspace:packages/fork-htmlparser2":
version: 0.0.0-use.local
resolution: "@joplin/fork-htmlparser2@workspace:packages/fork-htmlparser2"
@@ -6178,34 +6203,34 @@ __metadata:
languageName: node
linkType: hard
"@lezer/common@npm:^1.0.0":
version: 1.0.2
resolution: "@lezer/common@npm:1.0.2"
checksum: bbcc58e07be02652bf0700d2856042ec089d5be0b95893d628b3e18192ade864fac83b61b19653e10b9f1472261a178b12318d934e9004edd5483a577c0db56b
"@lezer/common@npm:^1.0.0, @lezer/common@npm:^1.0.2":
version: 1.0.4
resolution: "@lezer/common@npm:1.0.4"
checksum: 0bea82da76e0b89afad4e5159d3add460022916352c47906ec67b26d6fe5ec9cb8e23df0e2bf0adef765ae78bed1706fc573a11506d01a80112a5b6dd317730c
languageName: node
linkType: hard
"@lezer/cpp@npm:^1.0.0":
version: 1.1.0
resolution: "@lezer/cpp@npm:1.1.0"
version: 1.1.1
resolution: "@lezer/cpp@npm:1.1.1"
dependencies:
"@lezer/highlight": ^1.0.0
"@lezer/lr": ^1.0.0
checksum: 9b25c881fc9b64fd2b019a077a85b0ba7cfda0bbdd92dbb0ff43300c9ba1ec4360128fe912bfe0f06a1c1bb5a564c5ace375c8aad254d07a717768a8f268695d
checksum: c9e1db19776eafbfe0c3b8448d46c94d9a1d30f7fef630292e63bab82e6d5d6903a043ee8cf341bcbf84c00ee0d79b8c255bab8fd8e0a91355ae912b53c78935
languageName: node
linkType: hard
"@lezer/css@npm:^1.0.0, @lezer/css@npm:^1.1.0":
version: 1.1.1
resolution: "@lezer/css@npm:1.1.1"
version: 1.1.3
resolution: "@lezer/css@npm:1.1.3"
dependencies:
"@lezer/highlight": ^1.0.0
"@lezer/lr": ^1.0.0
checksum: a7e4893aacaa7f26d5679c77a640f401b37d14155cb54863aa91b59dfd220b280360a341c0fedafc65d31101de13a5ae33cf3876c352f2da528344dafdc9b3d7
checksum: c8069ef0a6751441d2dc9180f7ebfd7aeb35df0ca2f1a748a2f26203a9ef6cc30f17f3074e2b49520453eb39329dadfdbbb901c6d9d067dc955ceb58c1f8cc6a
languageName: node
linkType: hard
"@lezer/highlight@npm:1.1.4, @lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.1.3":
"@lezer/highlight@npm:1.1.4":
version: 1.1.4
resolution: "@lezer/highlight@npm:1.1.4"
dependencies:
@@ -6214,53 +6239,62 @@ __metadata:
languageName: node
linkType: hard
"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.1.3":
version: 1.1.6
resolution: "@lezer/highlight@npm:1.1.6"
dependencies:
"@lezer/common": ^1.0.0
checksum: 411a702394c4c996b7d7f145a38f3a85a8cc698b3918acc7121c629255bb76d4ab383753f69009e011dc415210c6acbbb5b27bde613259ab67e600b29397b03b
languageName: node
linkType: hard
"@lezer/html@npm:^1.3.0":
version: 1.3.4
resolution: "@lezer/html@npm:1.3.4"
version: 1.3.6
resolution: "@lezer/html@npm:1.3.6"
dependencies:
"@lezer/common": ^1.0.0
"@lezer/highlight": ^1.0.0
"@lezer/lr": ^1.0.0
checksum: 81dd134ac094edf7c40bae4c3b7126d336ce4c3c87756344bf604eff64d89b06fcb55f91618a4622eb0dae6d6015722f5bab58e2252d86e81fca8c3ced1a0c4d
checksum: 1d3af781660968505e5083a34f31ea3549fd5f3949227fa93cc318bca61bce76ffe977bd875624ba938a2039834ec1a33df5d365e94c48131c85dd26f980d92c
languageName: node
linkType: hard
"@lezer/java@npm:^1.0.0":
version: 1.0.3
resolution: "@lezer/java@npm:1.0.3"
version: 1.0.4
resolution: "@lezer/java@npm:1.0.4"
dependencies:
"@lezer/highlight": ^1.0.0
"@lezer/lr": ^1.0.0
checksum: 2fffea6627d130413ffad4e61040267974cca3167d98881b9e5b5e2455530de74a82c234d93603e92a4972fad314671453c49c0a76b0f4547c4617d671fd7b99
checksum: 97f5a2c2d733afba5dc57a0da9a97515b19b5e63bb5937717dac4e8c9baed74d15c0cb5c1580858b678931f11d517c56d89f903968fa48931f9c62e2ea67a107
languageName: node
linkType: hard
"@lezer/javascript@npm:^1.0.0":
version: 1.4.2
resolution: "@lezer/javascript@npm:1.4.2"
version: 1.4.7
resolution: "@lezer/javascript@npm:1.4.7"
dependencies:
"@lezer/highlight": ^1.1.3
"@lezer/lr": ^1.3.0
checksum: 542261c297709babfe450de1233c13fe2f5b111678d280cb0f8304f12bcdae294cb43c0ac64bbd647e5039de3286f6f0715d120fb132bd5af778363d1f612a1f
checksum: 37c05793e0e45280fa5d7b845a3132a84596105d48b7d2c195abea0a198477ea6719b07d1c8967679e80fc466388151956901fd6962479c130ffda64a6d09591
languageName: node
linkType: hard
"@lezer/lr@npm:^1.0.0, @lezer/lr@npm:^1.1.0, @lezer/lr@npm:^1.3.0":
version: 1.3.3
resolution: "@lezer/lr@npm:1.3.3"
version: 1.3.10
resolution: "@lezer/lr@npm:1.3.10"
dependencies:
"@lezer/common": ^1.0.0
checksum: 1804074c794005a31c54d80ab72127f19ae5be29bb627c52bc001a57b1af97a9e62732ff13e3aeb7bc53b330202b6bd3747272c64d87f257dbba533e75a183a3
checksum: 9d3c22bf692561cf7fe2f3d14e821913f87116ff9d73b8b550e7998b6135baae9f504563846a4257e1bb4eae97ae1b60c06c6066450ddeef5e03e8783526b2ae
languageName: node
linkType: hard
"@lezer/markdown@npm:^1.0.0":
version: 1.0.2
resolution: "@lezer/markdown@npm:1.0.2"
"@lezer/markdown@npm:1.1.0, @lezer/markdown@npm:^1.0.0":
version: 1.1.0
resolution: "@lezer/markdown@npm:1.1.0"
dependencies:
"@lezer/common": ^1.0.0
"@lezer/highlight": ^1.0.0
checksum: c4bbfcd8a5a9d924a7cf2b5e5e99c78e7705473cc59804070278b5cfcf478af9dd567025d0926cbf03e3ea6abb8f173425220d3107c05a2d7e0ca3fe3d5c92ef
checksum: b3699c0724dd41e3e6e3078a0e1bcd272ccaebf17b20e5160de3ecf26200cdaa59aa19c9542aac5ab8c7e3aecce1003544b016bb5c32e458bbd5982add8ca0bf
languageName: node
linkType: hard
@@ -6275,12 +6309,12 @@ __metadata:
linkType: hard
"@lezer/rust@npm:^1.0.0":
version: 1.0.0
resolution: "@lezer/rust@npm:1.0.0"
version: 1.0.1
resolution: "@lezer/rust@npm:1.0.1"
dependencies:
"@lezer/highlight": ^1.0.0
"@lezer/lr": ^1.0.0
checksum: 0c42f415674f60ca2ef4274b446577621cdeec8f31168b1c3b90888a4377c513f02a89ee346421c264ec3a77fe2fa3e134996be6463ed506dbbc79b4b4505375
checksum: 1e02fdf09206979e7d4f87b020589f410c4c5e452a7b7b0296f6772ce3571c1bd7ed37495fbeeecf3d4423000f2efdabd462ba8a949c2b351fd35550327a7613
languageName: node
linkType: hard
@@ -7189,6 +7223,19 @@ __metadata:
languageName: node
linkType: hard
"@replit/codemirror-vim@npm:6.0.14":
version: 6.0.14
resolution: "@replit/codemirror-vim@npm:6.0.14"
peerDependencies:
"@codemirror/commands": ^6.0.0
"@codemirror/language": ^6.1.0
"@codemirror/search": ^6.2.0
"@codemirror/state": ^6.0.1
"@codemirror/view": ^6.0.3
checksum: 43d14512172df23a47818a8f19ead1733cc1dc7c77cf27d6fd3bc75d645b0400affd96c15e32d2985404b603a09b9296dab9173c501096b42e5e8e8092dbfe0f
languageName: node
linkType: hard
"@rmp135/sql-ts@npm:1.18.0":
version: 1.18.0
resolution: "@rmp135/sql-ts@npm:1.18.0"
@@ -7887,6 +7934,16 @@ __metadata:
languageName: node
linkType: hard
"@types/jest@npm:29.5.3":
version: 29.5.3
resolution: "@types/jest@npm:29.5.3"
dependencies:
expect: ^29.0.0
pretty-format: ^29.0.0
checksum: e36bb92e0b9e5ea7d6f8832baa42f087fc1697f6cd30ec309a07ea4c268e06ec460f1f0cfd2581daf5eff5763475190ec1ad8ac6520c49ccfe4f5c0a48bfa676
languageName: node
linkType: hard
"@types/jest@npm:29.5.4":
version: 29.5.4
resolution: "@types/jest@npm:29.5.4"
@@ -8243,6 +8300,18 @@ __metadata:
languageName: node
linkType: hard
"@types/react-redux@npm:7.1.25":
version: 7.1.25
resolution: "@types/react-redux@npm:7.1.25"
dependencies:
"@types/hoist-non-react-statics": ^3.3.0
"@types/react": "*"
hoist-non-react-statics: ^3.3.0
redux: ^4.0.0
checksum: a61ec25cbf8bb3720850402d3c49493fcff4afb73ad447d161460b5d4c600c984ad48708e8564d2fd32052eaa3c3b3f655c5b300ce813429637cce9e5958329f
languageName: node
linkType: hard
"@types/react-redux@npm:7.1.26":
version: 7.1.26
resolution: "@types/react-redux@npm:7.1.26"
@@ -8275,6 +8344,17 @@ __metadata:
languageName: node
linkType: hard
"@types/react@npm:18.0.24":
version: 18.0.24
resolution: "@types/react@npm:18.0.24"
dependencies:
"@types/prop-types": "*"
"@types/scheduler": "*"
csstype: ^3.0.2
checksum: 7d06125bac61e1c6661e5dfbeeeb56d5b6d1d4c743292faebaa6b0f30f8414c7af3cadf674923fd86e4ca14e82566ff9156cd40c56786be024600c31b97d6c03
languageName: node
linkType: hard
"@types/react@npm:18.2.21":
version: 18.2.21
resolution: "@types/react@npm:18.2.21"
@@ -20939,7 +21019,7 @@ __metadata:
languageName: node
linkType: hard
"jest-cli@npm:^29.6.4":
"jest-cli@npm:^29.5.0, jest-cli@npm:^29.6.4":
version: 29.7.0
resolution: "jest-cli@npm:29.7.0"
dependencies:
@@ -21145,6 +21225,27 @@ __metadata:
languageName: node
linkType: hard
"jest-environment-jsdom@npm:29.5.0":
version: 29.5.0
resolution: "jest-environment-jsdom@npm:29.5.0"
dependencies:
"@jest/environment": ^29.5.0
"@jest/fake-timers": ^29.5.0
"@jest/types": ^29.5.0
"@types/jsdom": ^20.0.0
"@types/node": "*"
jest-mock: ^29.5.0
jest-util: ^29.5.0
jsdom: ^20.0.0
peerDependencies:
canvas: ^2.5.0
peerDependenciesMeta:
canvas:
optional: true
checksum: 3df7fc85275711f20b483ac8cd8c04500704ed0f69791eb55c574b38f5a39470f03d775cf20c1025bc1884916ac0573aa2fa4db1bb74225bc7fdd95ba97ad0da
languageName: node
linkType: hard
"jest-environment-jsdom@npm:29.6.4":
version: 29.6.4
resolution: "jest-environment-jsdom@npm:29.6.4"
@@ -21919,6 +22020,25 @@ __metadata:
languageName: node
linkType: hard
"jest@npm:29.5.0":
version: 29.5.0
resolution: "jest@npm:29.5.0"
dependencies:
"@jest/core": ^29.5.0
"@jest/types": ^29.5.0
import-local: ^3.0.2
jest-cli: ^29.5.0
peerDependencies:
node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
peerDependenciesMeta:
node-notifier:
optional: true
bin:
jest: bin/jest.js
checksum: a8ff2eb0f421623412236e23cbe67c638127fffde466cba9606bc0c0553b4c1e5cb116d7e0ef990b5d1712851652c8ee461373b578df50857fe635b94ff455d5
languageName: node
linkType: hard
"jest@npm:29.6.4":
version: 29.6.4
resolution: "jest@npm:29.6.4"
@@ -32766,6 +32886,13 @@ __metadata:
languageName: node
linkType: hard
"style-mod@npm:^4.1.0":
version: 4.1.0
resolution: "style-mod@npm:4.1.0"
checksum: 8402b14ca11113a3640d46b3cf7ba49f05452df7846bc5185a3535d9b6a64a3019e7fb636b59ccbb7816aeb0725b24723e77a85b05612a9360e419958e13b4e6
languageName: node
linkType: hard
"styled-components@npm:5.3.11":
version: 5.3.11
resolution: "styled-components@npm:5.3.11"
@@ -34349,6 +34476,16 @@ __metadata:
languageName: node
linkType: hard
"typescript@npm:5.1.3":
version: 5.1.3
resolution: "typescript@npm:5.1.3"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: d9d51862d98efa46534f2800a1071a613751b1585dc78884807d0c179bcd93d6e9d4012a508e276742f5f33c480adefc52ffcafaf9e0e00ab641a14cde9a31c7
languageName: node
linkType: hard
"typescript@npm:5.1.6":
version: 5.1.6
resolution: "typescript@npm:5.1.6"
@@ -34399,6 +34536,16 @@ __metadata:
languageName: node
linkType: hard
"typescript@patch:typescript@5.1.3#~builtin<compat/typescript>":
version: 5.1.3
resolution: "typescript@patch:typescript@npm%3A5.1.3#~builtin<compat/typescript>::version=5.1.3&hash=5da071"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: 6f0a9dca6bf4ce9dcaf4e282aade55ef4c56ecb5fb98d0a4a5c0113398815aea66d871b5611e83353e5953a19ed9ef103cf5a76ac0f276d550d1e7cd5344f61e
languageName: node
linkType: hard
"typescript@patch:typescript@5.1.6#~builtin<compat/typescript>":
version: 5.1.6
resolution: "typescript@patch:typescript@npm%3A5.1.6#~builtin<compat/typescript>::version=5.1.6&hash=5da071"