Fix context-menu #1671
5 changed files with 50 additions and 13 deletions
|
@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
|
||||||
|
|
||||||
### Fixed
|
### Fixed
|
||||||
* Take previous bid amount into account when determining how much users have available to deposit ([#1725](https://github.com/lbryio/lbry-app/pull/1725))
|
* Take previous bid amount into account when determining how much users have available to deposit ([#1725](https://github.com/lbryio/lbry-app/pull/1725))
|
||||||
|
* Fix can't right click > paste into description on publish ([#1664](https://github.com/lbryio/lbry-app/issues/1664))
|
||||||
|
|
||||||
|
|
||||||
### Changed
|
### Changed
|
||||||
|
|
|
@ -60,7 +60,7 @@
|
||||||
"react-modal": "^3.1.7",
|
"react-modal": "^3.1.7",
|
||||||
"react-paginate": "^5.2.1",
|
"react-paginate": "^5.2.1",
|
||||||
"react-redux": "^5.0.3",
|
"react-redux": "^5.0.3",
|
||||||
"react-simplemde-editor": "^3.6.15",
|
"react-simplemde-editor": "^3.6.16",
|
||||||
"react-toggle": "^4.0.2",
|
"react-toggle": "^4.0.2",
|
||||||
"react-transition-group": "1.x",
|
"react-transition-group": "1.x",
|
||||||
"redux": "^3.6.0",
|
"redux": "^3.6.0",
|
||||||
|
|
|
@ -6,6 +6,7 @@ import MarkdownPreview from 'component/common/markdown-preview';
|
||||||
import SimpleMDE from 'react-simplemde-editor';
|
import SimpleMDE from 'react-simplemde-editor';
|
||||||
import 'simplemde/dist/simplemde.min.css';
|
import 'simplemde/dist/simplemde.min.css';
|
||||||
import Toggle from 'react-toggle';
|
import Toggle from 'react-toggle';
|
||||||
|
import { openEditorMenu } from 'util/contextMenu';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
name: string,
|
name: string,
|
||||||
|
@ -54,11 +55,21 @@ export class FormField extends React.PureComponent<Props> {
|
||||||
</select>
|
</select>
|
||||||
);
|
);
|
||||||
} else if (type === 'markdown') {
|
} else if (type === 'markdown') {
|
||||||
|
const stopContextMenu = event => {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
};
|
||||||
|
const handleEvents = {
|
||||||
|
contextmenu(codeMirror, event) {
|
||||||
|
openEditorMenu(event, codeMirror);
|
||||||
|
},
|
||||||
|
};
|
||||||
input = (
|
input = (
|
||||||
<div className="form-field--SimpleMDE">
|
<div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
|
||||||
<SimpleMDE
|
<SimpleMDE
|
||||||
{...inputProps}
|
{...inputProps}
|
||||||
type="textarea"
|
type="textarea"
|
||||||
|
events={handleEvents}
|
||||||
options={{
|
options={{
|
||||||
hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
|
hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
|
||||||
previewRender(plainText) {
|
previewRender(plainText) {
|
||||||
|
|
|
@ -21,11 +21,11 @@ function injectDevelopmentTemplate(event, templates) {
|
||||||
return templates;
|
return templates;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function openContextMenu(event, templates = []) {
|
export function openContextMenu(event, templates = [], canEdit = false, selection = '') {
|
||||||
const isSomethingSelected = window.getSelection().toString().length > 0;
|
const { type, value } = event.target;
|
||||||
const { type } = event.target;
|
const isSomethingSelected = selection.length > 0 || window.getSelection().toString().length > 0;
|
||||||
const isInput = event.target.matches('input') && (type === 'text' || type === 'number');
|
const isInput = event.target.matches('input') && (type === 'text' || type === 'number');
|
||||||
const { value } = event.target;
|
const isTextField = canEdit || isInput || event.target.matches('textarea');
|
||||||
|
|
||||||
templates.push({
|
templates.push({
|
||||||
label: 'Copy',
|
label: 'Copy',
|
||||||
|
@ -36,12 +36,12 @@ export function openContextMenu(event, templates = []) {
|
||||||
|
|
||||||
// If context menu is opened on Input and there is text on the input and something is selected.
|
// If context menu is opened on Input and there is text on the input and something is selected.
|
||||||
const { selectionStart, selectionEnd } = event.target;
|
const { selectionStart, selectionEnd } = event.target;
|
||||||
if (!!value && isInput && selectionStart !== selectionEnd) {
|
if (!!value && isTextField && selectionStart !== selectionEnd) {
|
||||||
templates.push({ label: 'Cut', accelerator: 'CmdOrCtrl+X', role: 'cut' });
|
templates.push({ label: 'Cut', accelerator: 'CmdOrCtrl+X', role: 'cut' });
|
||||||
}
|
}
|
||||||
|
|
||||||
// If context menu is opened on Input and text is present on clipboard
|
// If context menu is opened on Input and text is present on clipboard
|
||||||
if (clipboard.readText().length > 0 && isInput) {
|
if (clipboard.readText().length > 0 && isTextField) {
|
||||||
templates.push({
|
templates.push({
|
||||||
label: 'Paste',
|
label: 'Paste',
|
||||||
accelerator: 'CmdOrCtrl+V',
|
accelerator: 'CmdOrCtrl+V',
|
||||||
|
@ -50,7 +50,7 @@ export function openContextMenu(event, templates = []) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// If context menu is opened on Input
|
// If context menu is opened on Input
|
||||||
if (isInput && value) {
|
if (isTextField && value) {
|
||||||
templates.push({
|
templates.push({
|
||||||
label: 'Select All',
|
label: 'Select All',
|
||||||
accelerator: 'CmdOrCtrl+A',
|
accelerator: 'CmdOrCtrl+A',
|
||||||
|
@ -61,6 +61,31 @@ export function openContextMenu(event, templates = []) {
|
||||||
injectDevelopmentTemplate(event, templates);
|
injectDevelopmentTemplate(event, templates);
|
||||||
remote.Menu.buildFromTemplate(templates).popup();
|
remote.Menu.buildFromTemplate(templates).popup();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// This function is used for the markdown description on the publish page
|
||||||
|
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) {
|
export function openCopyLinkMenu(text, event) {
|
||||||
const templates = [
|
const templates = [
|
||||||
{
|
{
|
||||||
|
@ -70,5 +95,5 @@ export function openCopyLinkMenu(text, event) {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
openContextMenu(event, templates, false);
|
openContextMenu(event, templates);
|
||||||
}
|
}
|
||||||
|
|
|
@ -7626,9 +7626,9 @@ react-redux@^5.0.3:
|
||||||
loose-envify "^1.1.0"
|
loose-envify "^1.1.0"
|
||||||
prop-types "^15.6.0"
|
prop-types "^15.6.0"
|
||||||
|
|
||||||
react-simplemde-editor@^3.6.15:
|
react-simplemde-editor@^3.6.16:
|
||||||
version "3.6.15"
|
version "3.6.16"
|
||||||
resolved "https://registry.yarnpkg.com/react-simplemde-editor/-/react-simplemde-editor-3.6.15.tgz#b4991304c7e1cac79258bb225579d008c13b5991"
|
resolved "https://registry.yarnpkg.com/react-simplemde-editor/-/react-simplemde-editor-3.6.16.tgz#33633259478d3395f2c7b70deb56a1a40e863bea"
|
||||||
dependencies:
|
dependencies:
|
||||||
simplemde "^1.11.2"
|
simplemde "^1.11.2"
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue