2021-07-13 20:13:13 +02:00
|
|
|
import Setting from '@joplin/lib/models/Setting';
|
|
|
|
|
import shim from '@joplin/lib/shim';
|
|
|
|
|
import { themeStyle } from '@joplin/lib/theme';
|
2022-08-08 17:00:14 +02:00
|
|
|
import EditLinkDialog from './EditLinkDialog';
|
|
|
|
|
import { defaultSearchState, SearchPanel } from './SearchPanel';
|
|
|
|
|
|
2021-07-13 20:13:13 +02:00
|
|
|
const React = require('react');
|
2022-08-08 17:00:14 +02:00
|
|
|
const { forwardRef, useImperativeHandle } = require('react');
|
|
|
|
|
const { useEffect, useMemo, useState, useCallback, useRef } = require('react');
|
2021-07-13 20:13:13 +02:00
|
|
|
const { WebView } = require('react-native-webview');
|
2022-08-08 17:00:14 +02:00
|
|
|
const { View } = require('react-native');
|
2021-07-13 20:13:13 +02:00
|
|
|
const { editorFont } = require('../global-style');
|
|
|
|
|
|
2022-08-08 17:00:14 +02:00
|
|
|
import SelectionFormatting from './SelectionFormatting';
|
|
|
|
|
import {
|
|
|
|
|
EditorSettings,
|
|
|
|
|
EditorControl,
|
2022-04-11 12:56:45 +02:00
|
|
|
|
2022-08-08 17:00:14 +02:00
|
|
|
ChangeEvent, UndoRedoDepthChangeEvent, Selection, SelectionChangeEvent,
|
|
|
|
|
ListType,
|
|
|
|
|
SearchState,
|
|
|
|
|
} from './types';
|
|
|
|
|
import { _ } from '@joplin/lib/locale';
|
2022-04-11 12:56:45 +02:00
|
|
|
|
2021-07-13 20:13:13 +02:00
|
|
|
type ChangeEventHandler = (event: ChangeEvent)=> void;
|
|
|
|
|
type UndoRedoDepthChangeHandler = (event: UndoRedoDepthChangeEvent)=> void;
|
2022-04-11 12:56:45 +02:00
|
|
|
type SelectionChangeEventHandler = (event: SelectionChangeEvent)=> void;
|
2021-07-13 20:13:13 +02:00
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
themeId: number;
|
|
|
|
|
initialText: string;
|
2022-04-11 12:56:45 +02:00
|
|
|
initialSelection?: Selection;
|
2021-07-13 20:13:13 +02:00
|
|
|
style: any;
|
2022-04-11 12:56:45 +02:00
|
|
|
|
2021-07-13 20:13:13 +02:00
|
|
|
onChange: ChangeEventHandler;
|
2022-04-11 12:56:45 +02:00
|
|
|
onSelectionChange: SelectionChangeEventHandler;
|
2021-07-13 20:13:13 +02:00
|
|
|
onUndoRedoDepthChange: UndoRedoDepthChangeHandler;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fontFamilyFromSettings() {
|
|
|
|
|
const f = editorFont(Setting.value('style.editor.fontFamily'));
|
|
|
|
|
return [f, 'sans-serif'].join(', ');
|
|
|
|
|
}
|
|
|
|
|
|
2022-04-11 12:57:49 +02:00
|
|
|
function useCss(themeId: number): string {
|
|
|
|
|
return useMemo(() => {
|
|
|
|
|
const theme = themeStyle(themeId);
|
|
|
|
|
return `
|
|
|
|
|
:root {
|
|
|
|
|
background-color: ${theme.backgroundColor};
|
|
|
|
|
}
|
2022-07-28 18:02:46 +02:00
|
|
|
|
|
|
|
|
body {
|
2022-08-08 17:00:14 +02:00
|
|
|
margin: 0;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: 100vh;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
min-width: 100vw;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
padding-left: 1px;
|
|
|
|
|
padding-right: 1px;
|
|
|
|
|
padding-bottom: 1px;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
|
2022-07-28 18:02:46 +02:00
|
|
|
font-size: 13pt;
|
|
|
|
|
}
|
2022-04-11 12:57:49 +02:00
|
|
|
`;
|
|
|
|
|
}, [themeId]);
|
|
|
|
|
}
|
|
|
|
|
|
2021-07-13 20:13:13 +02:00
|
|
|
function useHtml(css: string): string {
|
|
|
|
|
const [html, setHtml] = useState('');
|
|
|
|
|
|
2022-08-08 17:00:14 +02:00
|
|
|
useMemo(() => {
|
|
|
|
|
setHtml(`
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
|
<title>${_('Note editor')}</title>
|
|
|
|
|
<style>
|
|
|
|
|
.cm-editor {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
${css}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="CodeMirror" style="height:100%;" autocapitalize="on"></div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
`);
|
2021-07-13 20:13:13 +02:00
|
|
|
}, [css]);
|
|
|
|
|
|
|
|
|
|
return html;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function editorTheme(themeId: number) {
|
|
|
|
|
return {
|
|
|
|
|
...themeStyle(themeId),
|
2022-07-28 18:02:46 +02:00
|
|
|
fontSize: 0.85, // em
|
2021-07-13 20:13:13 +02:00
|
|
|
fontFamily: fontFamilyFromSettings(),
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function NoteEditor(props: Props, ref: any) {
|
|
|
|
|
const [source, setSource] = useState(undefined);
|
|
|
|
|
const webviewRef = useRef(null);
|
|
|
|
|
|
2022-04-11 12:56:45 +02:00
|
|
|
const setInitialSelectionJS = props.initialSelection ? `
|
|
|
|
|
cm.select(${props.initialSelection.start}, ${props.initialSelection.end});
|
|
|
|
|
` : '';
|
|
|
|
|
|
2022-08-08 17:00:14 +02:00
|
|
|
const editorSettings: EditorSettings = {
|
|
|
|
|
themeData: editorTheme(props.themeId),
|
|
|
|
|
katexEnabled: Setting.value('markdown.plugin.katex') as boolean,
|
|
|
|
|
};
|
|
|
|
|
|
2021-07-13 20:13:13 +02:00
|
|
|
const injectedJavaScript = `
|
|
|
|
|
function postMessage(name, data) {
|
|
|
|
|
window.ReactNativeWebView.postMessage(JSON.stringify({
|
|
|
|
|
data,
|
2022-04-11 12:56:45 +02:00
|
|
|
name,
|
2021-07-13 20:13:13 +02:00
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function logMessage(...msg) {
|
|
|
|
|
postMessage('onLog', { value: msg });
|
|
|
|
|
}
|
|
|
|
|
|
2022-08-08 17:00:14 +02:00
|
|
|
// Globalize logMessage, postMessage
|
|
|
|
|
window.logMessage = logMessage;
|
|
|
|
|
window.postMessage = postMessage;
|
2021-07-13 20:13:13 +02:00
|
|
|
|
2022-08-08 17:00:14 +02:00
|
|
|
window.onerror = (message, source, lineno) => {
|
|
|
|
|
window.ReactNativeWebView.postMessage(
|
|
|
|
|
"error: " + message + " in file://" + source + ", line " + lineno
|
|
|
|
|
);
|
|
|
|
|
};
|
2021-07-13 20:13:13 +02:00
|
|
|
|
2022-08-08 17:00:14 +02:00
|
|
|
if (!window.cm) {
|
|
|
|
|
// This variable is not used within this script
|
|
|
|
|
// but is called using "injectJavaScript" from
|
|
|
|
|
// the wrapper component.
|
|
|
|
|
window.cm = null;
|
2021-07-13 20:13:13 +02:00
|
|
|
|
2022-08-08 17:00:14 +02:00
|
|
|
try {
|
|
|
|
|
${shim.injectedJs('codeMirrorBundle')};
|
2022-06-26 19:21:38 +02:00
|
|
|
|
2022-08-08 17:00:14 +02:00
|
|
|
const parentElement = document.getElementsByClassName('CodeMirror')[0];
|
|
|
|
|
const initialText = ${JSON.stringify(props.initialText)};
|
|
|
|
|
const settings = ${JSON.stringify(editorSettings)};
|
|
|
|
|
|
|
|
|
|
cm = codeMirrorBundle.initCodeMirror(parentElement, initialText, settings);
|
|
|
|
|
${setInitialSelectionJS}
|
|
|
|
|
|
|
|
|
|
window.onresize = () => {
|
|
|
|
|
cm.scrollSelectionIntoView();
|
|
|
|
|
};
|
|
|
|
|
} catch (e) {
|
|
|
|
|
window.ReactNativeWebView.postMessage("error:" + e.message + ": " + JSON.stringify(e))
|
|
|
|
|
}
|
2021-07-13 20:13:13 +02:00
|
|
|
}
|
2022-07-10 16:00:21 +02:00
|
|
|
true;
|
2021-07-13 20:13:13 +02:00
|
|
|
`;
|
|
|
|
|
|
2022-04-11 12:57:49 +02:00
|
|
|
const css = useCss(props.themeId);
|
|
|
|
|
const html = useHtml(css);
|
2022-08-08 17:00:14 +02:00
|
|
|
const [selectionState, setSelectionState] = useState(new SelectionFormatting());
|
|
|
|
|
const [searchState, setSearchState] = useState(defaultSearchState);
|
|
|
|
|
const [linkDialogVisible, setLinkDialogVisible] = useState(false);
|
|
|
|
|
|
|
|
|
|
// / Runs [js] in the context of the CodeMirror frame.
|
|
|
|
|
const injectJS = (js: string) => {
|
|
|
|
|
webviewRef.current.injectJavaScript(`
|
|
|
|
|
try {
|
|
|
|
|
${js}
|
|
|
|
|
}
|
|
|
|
|
catch(e) {
|
|
|
|
|
logMessage('Error in injected JS:' + e, e);
|
|
|
|
|
throw e;
|
|
|
|
|
};
|
2021-07-13 20:13:13 +02:00
|
|
|
|
2022-08-08 17:00:14 +02:00
|
|
|
true;`);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const editorControl: EditorControl = {
|
|
|
|
|
undo() {
|
|
|
|
|
injectJS('cm.undo();');
|
|
|
|
|
},
|
|
|
|
|
redo() {
|
|
|
|
|
injectJS('cm.redo();');
|
|
|
|
|
},
|
|
|
|
|
select(anchor: number, head: number) {
|
|
|
|
|
injectJS(
|
|
|
|
|
`cm.select(${JSON.stringify(anchor)}, ${JSON.stringify(head)});`
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
insertText(text: string) {
|
|
|
|
|
injectJS(`cm.insertText(${JSON.stringify(text)});`);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
toggleBolded() {
|
|
|
|
|
injectJS('cm.toggleBolded();');
|
|
|
|
|
},
|
|
|
|
|
toggleItalicized() {
|
|
|
|
|
injectJS('cm.toggleItalicized();');
|
|
|
|
|
},
|
|
|
|
|
toggleList(listType: ListType) {
|
|
|
|
|
injectJS(`cm.toggleList(${JSON.stringify(listType)});`);
|
|
|
|
|
},
|
|
|
|
|
toggleCode() {
|
|
|
|
|
injectJS('cm.toggleCode();');
|
|
|
|
|
},
|
|
|
|
|
toggleMath() {
|
|
|
|
|
injectJS('cm.toggleMath();');
|
|
|
|
|
},
|
|
|
|
|
toggleHeaderLevel(level: number) {
|
|
|
|
|
injectJS(`cm.toggleHeaderLevel(${level});`);
|
|
|
|
|
},
|
|
|
|
|
increaseIndent() {
|
|
|
|
|
injectJS('cm.increaseIndent();');
|
|
|
|
|
},
|
|
|
|
|
decreaseIndent() {
|
|
|
|
|
injectJS('cm.decreaseIndent();');
|
|
|
|
|
},
|
|
|
|
|
updateLink(label: string, url: string) {
|
|
|
|
|
injectJS(`cm.updateLink(
|
|
|
|
|
${JSON.stringify(label)},
|
|
|
|
|
${JSON.stringify(url)}
|
|
|
|
|
);`);
|
|
|
|
|
},
|
|
|
|
|
scrollSelectionIntoView() {
|
|
|
|
|
injectJS('cm.scrollSelectionIntoView();');
|
|
|
|
|
},
|
|
|
|
|
showLinkDialog() {
|
|
|
|
|
setLinkDialogVisible(true);
|
|
|
|
|
},
|
|
|
|
|
hideLinkDialog() {
|
|
|
|
|
setLinkDialogVisible(false);
|
|
|
|
|
},
|
|
|
|
|
hideKeyboard() {
|
|
|
|
|
injectJS('document.activeElement?.blur();');
|
|
|
|
|
},
|
|
|
|
|
setSpellcheckEnabled(enabled: boolean) {
|
|
|
|
|
injectJS(`cm.setSpellcheckEnabled(${enabled ? 'true' : 'false'});`);
|
|
|
|
|
},
|
|
|
|
|
searchControl: {
|
|
|
|
|
findNext() {
|
|
|
|
|
injectJS('cm.searchControl.findNext();');
|
2021-07-13 20:13:13 +02:00
|
|
|
},
|
2022-08-08 17:00:14 +02:00
|
|
|
findPrevious() {
|
|
|
|
|
injectJS('cm.searchControl.findPrevious();');
|
2021-07-13 20:13:13 +02:00
|
|
|
},
|
2022-08-08 17:00:14 +02:00
|
|
|
replaceCurrent() {
|
|
|
|
|
injectJS('cm.searchControl.replaceCurrent();');
|
2022-04-11 12:56:45 +02:00
|
|
|
},
|
2022-08-08 17:00:14 +02:00
|
|
|
replaceAll() {
|
|
|
|
|
injectJS('cm.searchControl.replaceAll();');
|
2022-04-11 12:56:45 +02:00
|
|
|
},
|
2022-08-08 17:00:14 +02:00
|
|
|
setSearchState(state: SearchState) {
|
|
|
|
|
injectJS(`cm.searchControl.setSearchState(${JSON.stringify(state)})`);
|
|
|
|
|
setSearchState(state);
|
|
|
|
|
},
|
|
|
|
|
showSearch() {
|
|
|
|
|
const newSearchState: SearchState = Object.assign({}, searchState);
|
|
|
|
|
newSearchState.dialogVisible = true;
|
|
|
|
|
|
|
|
|
|
setSearchState(newSearchState);
|
|
|
|
|
},
|
|
|
|
|
hideSearch() {
|
|
|
|
|
const newSearchState: SearchState = Object.assign({}, searchState);
|
|
|
|
|
newSearchState.dialogVisible = false;
|
|
|
|
|
|
|
|
|
|
setSearchState(newSearchState);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
useImperativeHandle(ref, () => {
|
|
|
|
|
return editorControl;
|
2021-07-13 20:13:13 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
let cancelled = false;
|
|
|
|
|
async function createHtmlFile() {
|
|
|
|
|
const tempFile = `${Setting.value('resourceDir')}/NoteEditor.html`;
|
|
|
|
|
await shim.fsDriver().writeFile(tempFile, html, 'utf8');
|
|
|
|
|
if (cancelled) return;
|
|
|
|
|
|
|
|
|
|
setSource({
|
|
|
|
|
uri: `file://${tempFile}?r=${Math.round(Math.random() * 100000000)}`,
|
|
|
|
|
baseUrl: `file://${Setting.value('resourceDir')}/`,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
void createHtmlFile();
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
cancelled = true;
|
|
|
|
|
};
|
|
|
|
|
}, [html]);
|
|
|
|
|
|
|
|
|
|
const onMessage = useCallback((event: any) => {
|
|
|
|
|
const data = event.nativeEvent.data;
|
|
|
|
|
|
|
|
|
|
if (data.indexOf('error:') === 0) {
|
|
|
|
|
console.error('CodeMirror:', data);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const msg = JSON.parse(data);
|
|
|
|
|
|
|
|
|
|
const handlers: Record<string, Function> = {
|
|
|
|
|
onLog: (event: any) => {
|
|
|
|
|
console.info('CodeMirror:', ...event.value);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onChange: (event: ChangeEvent) => {
|
|
|
|
|
props.onChange(event);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onUndoRedoDepthChange: (event: UndoRedoDepthChangeEvent) => {
|
|
|
|
|
console.info('onUndoRedoDepthChange', event);
|
|
|
|
|
props.onUndoRedoDepthChange(event);
|
|
|
|
|
},
|
2022-04-11 12:56:45 +02:00
|
|
|
|
|
|
|
|
onSelectionChange: (event: SelectionChangeEvent) => {
|
|
|
|
|
props.onSelectionChange(event);
|
|
|
|
|
},
|
2022-08-08 17:00:14 +02:00
|
|
|
|
|
|
|
|
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();
|
|
|
|
|
},
|
2021-07-13 20:13:13 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (handlers[msg.name]) {
|
|
|
|
|
handlers[msg.name](msg.data);
|
|
|
|
|
} else {
|
|
|
|
|
console.info('Unsupported CodeMirror message:', msg);
|
|
|
|
|
}
|
|
|
|
|
}, [props.onChange]);
|
|
|
|
|
|
|
|
|
|
const onError = useCallback(() => {
|
|
|
|
|
console.error('NoteEditor: webview error');
|
|
|
|
|
});
|
|
|
|
|
|
2022-08-08 17:00:14 +02:00
|
|
|
|
2021-07-13 20:13:13 +02:00
|
|
|
// - `setSupportMultipleWindows` must be `true` for security reasons:
|
|
|
|
|
// https://github.com/react-native-webview/react-native-webview/releases/tag/v11.0.0
|
2022-07-28 18:05:41 +02:00
|
|
|
// - `scrollEnabled` prevents iOS from scrolling the document (has no effect on Android)
|
|
|
|
|
// when the editor is focused.
|
2022-08-08 17:00:14 +02:00
|
|
|
return (
|
|
|
|
|
<View style={{
|
|
|
|
|
...props.style,
|
|
|
|
|
flexDirection: 'column',
|
|
|
|
|
}}>
|
|
|
|
|
<EditLinkDialog
|
|
|
|
|
visible={linkDialogVisible}
|
|
|
|
|
themeId={props.themeId}
|
|
|
|
|
editorControl={editorControl}
|
|
|
|
|
selectionState={selectionState}
|
|
|
|
|
/>
|
|
|
|
|
<View style={{
|
|
|
|
|
flexGrow: 1,
|
|
|
|
|
flexShrink: 0,
|
|
|
|
|
minHeight: '40%',
|
|
|
|
|
}}>
|
|
|
|
|
<WebView
|
|
|
|
|
style={{
|
|
|
|
|
backgroundColor: editorSettings.themeData.backgroundColor,
|
|
|
|
|
}}
|
|
|
|
|
ref={webviewRef}
|
|
|
|
|
scrollEnabled={false}
|
|
|
|
|
useWebKit={true}
|
|
|
|
|
source={source}
|
|
|
|
|
setSupportMultipleWindows={true}
|
|
|
|
|
hideKeyboardAccessoryView={true}
|
|
|
|
|
allowingReadAccessToURL={`file://${Setting.value('resourceDir')}`}
|
|
|
|
|
originWhitelist={['file://*', './*', 'http://*', 'https://*']}
|
|
|
|
|
allowFileAccess={true}
|
|
|
|
|
injectedJavaScript={injectedJavaScript}
|
|
|
|
|
onMessage={onMessage}
|
|
|
|
|
onError={onError}
|
|
|
|
|
/>
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
<SearchPanel
|
|
|
|
|
editorSettings={editorSettings}
|
|
|
|
|
searchControl={editorControl.searchControl}
|
|
|
|
|
searchState={searchState}
|
|
|
|
|
/>
|
|
|
|
|
</View>
|
|
|
|
|
);
|
2021-07-13 20:13:13 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default forwardRef(NoteEditor);
|
