fix context-menu of markdown editor
This commit is contained in:
parent
c9ae62a38e
commit
be9c16cbde
3 changed files with 41 additions and 6 deletions
|
@ -6,6 +6,7 @@ import MarkdownPreview from 'component/common/markdown-preview';
|
|||
import SimpleMDE from 'react-simplemde-editor';
|
||||
import 'simplemde/dist/simplemde.min.css';
|
||||
import Toggle from 'react-toggle';
|
||||
import { openEditorMenu } from 'util/contextMenu';
|
||||
|
||||
type Props = {
|
||||
name: string,
|
||||
|
@ -54,11 +55,21 @@ export class FormField extends React.PureComponent<Props> {
|
|||
</select>
|
||||
);
|
||||
} else if (type === 'markdown') {
|
||||
const stopContextMenu = event => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
};
|
||||
const handleEvents = {
|
||||
contextmenu(codeMirror, event) {
|
||||
openEditorMenu(event, codeMirror);
|
||||
},
|
||||
};
|
||||
input = (
|
||||
<div className="form-field--SimpleMDE">
|
||||
<div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
|
||||
<SimpleMDE
|
||||
{...inputProps}
|
||||
type="textarea"
|
||||
events={handleEvents}
|
||||
options={{
|
||||
hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
|
||||
previewRender(plainText) {
|
||||
|
|
|
@ -21,9 +21,9 @@ function injectDevelopmentTemplate(event, templates) {
|
|||
return templates;
|
||||
}
|
||||
|
||||
export function openContextMenu(event, templates = [], canEdit = false) {
|
||||
export function openContextMenu(event, templates = [], canEdit = false, selection = '') {
|
||||
const { type, value } = event.target;
|
||||
const isSomethingSelected = window.getSelection().toString().length > 0;
|
||||
const isSomethingSelected = selection.length > 0 || window.getSelection().toString().length > 0;
|
||||
const isInput = event.target.matches('input') && (type === 'text' || type === 'number');
|
||||
const isTextField = canEdit || isInput || event.target.matches('textarea');
|
||||
|
||||
|
@ -61,6 +61,30 @@ export function openContextMenu(event, templates = [], canEdit = false) {
|
|||
injectDevelopmentTemplate(event, templates);
|
||||
remote.Menu.buildFromTemplate(templates).popup();
|
||||
}
|
||||
|
||||
export function openEditorMenu(event, codeMirror) {
|
||||
const value = codeMirror.doc.getValue();
|
||||
const selection = codeMirror.doc.getSelection();
|
||||
const templates = [
|
||||
{
|
||||
label: 'Select All',
|
||||
accelerator: 'CmdOrCtrl+A',
|
||||
role: 'selectall',
|
||||
click: () => {
|
||||
codeMirror.execCommand('selectAll');
|
||||
},
|
||||
enabled: value.length > 0,
|
||||
},
|
||||
{
|
||||
label: 'Cut',
|
||||
accelerator: 'CmdOrCtrl+X',
|
||||
role: 'cut',
|
||||
enabled: selection.length > 0,
|
||||
},
|
||||
];
|
||||
openContextMenu(event, templates, true, selection);
|
||||
}
|
||||
|
||||
export function openCopyLinkMenu(text, event) {
|
||||
const templates = [
|
||||
{
|
||||
|
|
|
@ -7626,9 +7626,9 @@ react-redux@^5.0.3:
|
|||
loose-envify "^1.1.0"
|
||||
prop-types "^15.6.0"
|
||||
|
||||
react-simplemde-editor@^3.6.15:
|
||||
version "3.6.15"
|
||||
resolved "https://registry.yarnpkg.com/react-simplemde-editor/-/react-simplemde-editor-3.6.15.tgz#b4991304c7e1cac79258bb225579d008c13b5991"
|
||||
react-simplemde-editor@^3.6.16:
|
||||
version "3.6.16"
|
||||
resolved "https://registry.yarnpkg.com/react-simplemde-editor/-/react-simplemde-editor-3.6.16.tgz#33633259478d3395f2c7b70deb56a1a40e863bea"
|
||||
dependencies:
|
||||
simplemde "^1.11.2"
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue