feat(widget-file): allow adding file from url (#4700)

This commit is contained in:
Basix
2021-01-13 19:27:21 +09:00
committed by GitHub
parent 7349de1a39
commit 9e277ad851
2 changed files with 26 additions and 4 deletions

View File

@ -157,11 +157,17 @@ const en = {
}, },
image: { image: {
choose: 'Choose an image', choose: 'Choose an image',
chooseUrl: 'Insert from URL',
replaceUrl: 'Replace with URL',
promptUrl: 'Enter the URL of the image',
chooseDifferent: 'Choose different image', chooseDifferent: 'Choose different image',
remove: 'Remove image', remove: 'Remove image',
}, },
file: { file: {
choose: 'Choose a file', choose: 'Choose a file',
chooseUrl: 'Insert from URL',
replaceUrl: 'Replace with URL',
promptUrl: 'Enter the URL of the file',
chooseDifferent: 'Choose different file', chooseDifferent: 'Choose different file',
remove: 'Remove file', remove: 'Remove file',
}, },

View File

@ -60,12 +60,12 @@ const FileLinkList = styled.ul`
const FileWidgetButton = styled.button` const FileWidgetButton = styled.button`
${buttons.button}; ${buttons.button};
${components.badge}; ${components.badge};
margin-bottom: 12px;
`; `;
const FileWidgetButtonRemove = styled.button` const FileWidgetButtonRemove = styled.button`
${buttons.button}; ${buttons.button};
${components.badgeDanger}; ${components.badgeDanger};
margin-top: 12px;
`; `;
function isMultiple(value) { function isMultiple(value) {
@ -174,6 +174,14 @@ export default function withFileControl({ forImage } = {}) {
}); });
}; };
handleUrl = subject => e => {
e.preventDefault();
const url = window.prompt(this.props.t(`editor.editorWidgets.${subject}.promptUrl`));
return this.props.onChange(url);
};
handleRemove = e => { handleRemove = e => {
e.preventDefault(); e.preventDefault();
this.props.onClearMediaControl(this.controlID); this.props.onClearMediaControl(this.controlID);
@ -255,6 +263,9 @@ export default function withFileControl({ forImage } = {}) {
<FileWidgetButton onClick={this.handleChange}> <FileWidgetButton onClick={this.handleChange}>
{t(`editor.editorWidgets.${subject}.chooseDifferent`)} {t(`editor.editorWidgets.${subject}.chooseDifferent`)}
</FileWidgetButton> </FileWidgetButton>
<FileWidgetButton onClick={this.handleUrl(subject)}>
{t(`editor.editorWidgets.${subject}.replaceUrl`)}
</FileWidgetButton>
<FileWidgetButtonRemove onClick={this.handleRemove}> <FileWidgetButtonRemove onClick={this.handleRemove}>
{t(`editor.editorWidgets.${subject}.remove`)} {t(`editor.editorWidgets.${subject}.remove`)}
</FileWidgetButtonRemove> </FileWidgetButtonRemove>
@ -266,9 +277,14 @@ export default function withFileControl({ forImage } = {}) {
renderNoSelection = subject => { renderNoSelection = subject => {
const { t } = this.props; const { t } = this.props;
return ( return (
<FileWidgetButton onClick={this.handleChange}> <>
{t(`editor.editorWidgets.${subject}.choose`)} <FileWidgetButton onClick={this.handleChange}>
</FileWidgetButton> {t(`editor.editorWidgets.${subject}.choose`)}
</FileWidgetButton>
<FileWidgetButton onClick={this.handleUrl(subject)}>
{t(`editor.editorWidgets.${subject}.chooseUrl`)}
</FileWidgetButton>
</>
); );
}; };