Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

minor: disable image upload support in description editor #17697

Merged
merged 6 commits into from
Sep 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ describe('ImageComponent', () => {

expect(popover).toBeInTheDocument();

expect(screen.getByText('label.upload')).toBeInTheDocument();
expect(screen.getByText('label.embed-link')).toBeInTheDocument();
});

Expand Down Expand Up @@ -100,36 +99,6 @@ describe('ImageComponent', () => {
expect(popover).not.toBeInTheDocument();
});

it('should render the upload tab by default', async () => {
await act(async () => {
render(<ImageComponent {...mockNodeViewProps} />);
});

const imageNode = screen.getByTestId('uploaded-image-node');

await act(async () => {
userEvent.click(imageNode);
});

const uploadTab = screen.getByText('label.upload');

expect(uploadTab).toBeInTheDocument();

expect(uploadTab).toHaveAttribute('aria-selected', 'true');

// image upload form should be visible

expect(screen.getByTestId('image-upload-form')).toBeInTheDocument();

// update button should be disabled

expect(screen.getByText('label.update-image')).toBeInTheDocument();

// delete button should be visible

expect(screen.getByText('label.delete')).toBeInTheDocument();
});

it('should render the embed link tab when clicked', async () => {
await act(async () => {
render(<ImageComponent {...mockNodeViewProps} />);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,7 @@ import {
Space,
Tabs,
Typography,
Upload,
UploadProps,
} from 'antd';
import { UploadChangeParam } from 'antd/lib/upload';
import classNames from 'classnames';
import { isEmpty } from 'lodash';
import React, { FC, useState } from 'react';
Expand All @@ -48,36 +45,10 @@ const PopoverContent: FC<PopoverContentProps> = ({
updateAttributes,
onPopupVisibleChange,
onUploadingChange,
isUploading,
deleteNode,
isValidSource,
src,
deleteNode,
}) => {
const { t } = useTranslation();
const handleFileUploadChange = async (info: UploadChangeParam) => {
try {
const srcUrl = info.file.response?.result;
if (srcUrl) {
updateAttributes({ src: srcUrl, alt: info.file.fileName });
onPopupVisibleChange(false);
}
} catch (error) {
// handle error
} finally {
onUploadingChange(false);
}
};

const handleRequestUpload: UploadProps['customRequest'] = (options) => {
onUploadingChange(true);
const reader = new FileReader();
reader.readAsDataURL(options.file as Blob);
reader.addEventListener('load', (e) => {
setTimeout(() => {
options?.onSuccess?.(e.target);
}, 1000);
});
};

const handleEmbedImage: FormProps['onFinish'] = (values) => {
onPopupVisibleChange(false);
Expand All @@ -87,35 +58,6 @@ const PopoverContent: FC<PopoverContentProps> = ({
onUploadingChange(false);
};

const uploadElement = (
<Upload
accept="image/jpeg, image/png, image/webp"
className="om-node-image-upload"
customRequest={handleRequestUpload}
data-testid="image-upload-form"
multiple={false}
showUploadList={false}
onChange={handleFileUploadChange}>
<Space className="om-image-node-action">
<Button className="w-full" disabled={isUploading}>
{isValidSource ? t('label.update-image') : t('label.upload-image')}
</Button>
{isValidSource && (
<Button
className="w-full"
disabled={isUploading}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
deleteNode();
}}>
{t('label.delete')}
</Button>
)}
</Space>
</Upload>
);

const embedLinkElement = (
<Form
data-testid="embed-link-form"
Expand All @@ -142,6 +84,16 @@ const PopoverContent: FC<PopoverContentProps> = ({
</Form.Item>
</Col>
<Col className="om-image-node-embed-link-btn-col" span={24}>
<Space className="om-image-node-action">
<Button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
deleteNode();
}}>
{t('label.delete')}
</Button>
</Space>
<Button htmlType="submit" type="primary">
{t('label.embed-image')}
</Button>
Expand All @@ -152,13 +104,8 @@ const PopoverContent: FC<PopoverContentProps> = ({

return (
<Tabs
defaultActiveKey="upload"
defaultActiveKey="embed"
items={[
{
label: t('label.upload'),
key: 'upload',
children: uploadElement,
},
{
label: t('label.embed-link'),
key: 'embed',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import React, {
useImperativeHandle,
useState,
} from 'react';
import { useTranslation } from 'react-i18next';
import i18n from '../../../utils/i18next/LocalUtil';
import { customHTMLRenderer } from './CustomHtmlRederer/CustomHtmlRederer';
import { EDITOR_TOOLBAR_ITEMS } from './EditorToolBar';
Expand All @@ -49,9 +50,11 @@ const RichTextEditor = forwardRef<editorRef, RichTextEditorProp>(
}: RichTextEditorProp,
ref
) => {
const { t } = useTranslation();
const richTextEditorRef = createRef<Editor>();

const [editorValue, setEditorValue] = useState(initialValue);
const [imageBlobError, setImageBlobError] = useState<string | null>(null);

const onChangeHandler = () => {
const value = richTextEditorRef.current
Expand Down Expand Up @@ -113,6 +116,15 @@ const RichTextEditor = forwardRef<editorRef, RichTextEditorProp>(
) : (
<div data-testid="editor">
<Editor
hooks={{
addImageBlobHook() {
setImageBlobError(t('message.image-upload-error'));

setTimeout(() => {
setImageBlobError(null);
}, 3000);
},
}}
autofocus={autofocus}
extendedAutolinks={extendedAutolinks}
height={height ?? '320px'}
Expand All @@ -128,6 +140,18 @@ const RichTextEditor = forwardRef<editorRef, RichTextEditorProp>(
useCommandShortcut={useCommandShortcut}
onChange={onChangeHandler}
/>
{imageBlobError && (
<div style={{ display: 'flex', flexWrap: 'nowrap' }}>
<div
className="ant-form-item-explain ant-form-item-explain-connected"
role="alert">
<div className="ant-form-item-explain-error">
{imageBlobError}
</div>
</div>
<div style={{ width: '0px', height: '24px' }}></div>
</div>
)}
</div>
)}
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1546,6 +1546,7 @@
"hex-code-placeholder": "Select or enter HEX color code.",
"hex-color-validation": "Input is not valid HEX code.",
"hi-user-welcome-to": "Hallo {{user}}, Willkommen bei",
"image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
"import-entity-help": "Sparen Sie Zeit und Aufwand, indem Sie eine CSV-Datei mit mehreren {{entity}} in einem Durchgang hochladen.",
"in-this-database": "In dieser Datenbank",
"include-assets-message": "Aktivieren Sie das Extrahieren von {{assets}} aus der Datenquelle.",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1546,6 +1546,7 @@
"hex-code-placeholder": "Select or enter HEX color code.",
"hex-color-validation": "Input is not valid HEX code.",
"hi-user-welcome-to": "Hi {{user}}, Welcome to",
"image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
"import-entity-help": "Save time & effort by uploading a CSV file with several {{entity}} in one go.",
"in-this-database": "In this Database",
"include-assets-message": "Enable extracting {{assets}} from the data source.",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1546,6 +1546,7 @@
"hex-code-placeholder": "Seleccione o ingrese el código de color HEX.",
"hex-color-validation": "La entrada no es un código HEX válido.",
"hi-user-welcome-to": "Hola {{user}}, Bienvenido a",
"image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
"import-entity-help": "Ahorre tiempo y esfuerzo cargando un archivo CSV con varios {{entity}} de una vez.",
"in-this-database": "En esta base de datos",
"include-assets-message": "Configuración opcional para activar la ingestión de {{assets}}.",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1546,6 +1546,7 @@
"hex-code-placeholder": "Sélectionnez un code couleur hexadécimal.",
"hex-color-validation": "Code hexadécimal non valide.",
"hi-user-welcome-to": "Bonjour {{user}}, Bienvenue sur",
"image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
"import-entity-help": "Gagnez du temps et de l'effort en téléchargeant un fichier CSV contenant plusieurs {{entityPlural}} en une seule fois.",
"in-this-database": "Dans cette base de données",
"include-assets-message": "Activer l'extraction des {{assets}} de la source de données.",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1546,6 +1546,7 @@
"hex-code-placeholder": "בחר או הזן קוד צבע HEX.",
"hex-color-validation": "הקלט אינו קוד HEX תקין.",
"hi-user-welcome-to": "שלום {{user}}, ברוך הבא אל",
"image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
"import-entity-help": "חסוך זמן ומאמץ על ידי העלאת קובץ CSV עם מספר {{entity}} בפעם אחת.",
"in-this-database": "במסד נתונים זה",
"include-assets-message": "הפעל את החילוץ של {{assets}} ממקור הנתונים.",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1546,6 +1546,7 @@
"hex-code-placeholder": "Select or enter HEX color code.",
"hex-color-validation": "Input is not valid HEX code.",
"hi-user-welcome-to": "Hi {{user}}, Welcome to",
"image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
"import-entity-help": "Save time & effort by uploading a CSV file with several {{entity}} in one go.",
"in-this-database": "In this Database",
"include-assets-message": "データソースから{{assets}}の抽出を有効にする。",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1546,6 +1546,7 @@
"hex-code-placeholder": "Selecteer of voer de HEX-kleurcode in.",
"hex-color-validation": "Invoer is geen geldige HEX-code.",
"hi-user-welcome-to": "Hoi {{user}}, welkom bij",
"image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
"import-entity-help": "Bespaar tijd en moeite door een CSV-bestand te uploaden met verschillende {{entity}} in één keer.",
"in-this-database": "In deze database",
"include-assets-message": "Schakel het extraheren van {{assets}} uit de databron in.",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1546,6 +1546,7 @@
"hex-code-placeholder": "Selecione ou insira o código de cor HEX.",
"hex-color-validation": "A entrada não é um código HEX válido.",
"hi-user-welcome-to": "Olá {{user}}, Bem-vindo(a) ao",
"image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
"import-entity-help": "Economize tempo e esforço fazendo upload de um arquivo CSV com vários {{entity}} de uma só vez.",
"in-this-database": "Neste Banco de Dados",
"include-assets-message": "Habilite a extração de {{assets}} da fonte de dados.",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1546,6 +1546,7 @@
"hex-code-placeholder": "Select or enter HEX color code.",
"hex-color-validation": "Input is not valid HEX code.",
"hi-user-welcome-to": "Привет, {{user}}! Добро пожаловать в",
"image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
"import-entity-help": "Сэкономьте время и усилия, загрузив CSV-файл с несколькими {{entity}} за один раз.",
"in-this-database": "В этой базе данных",
"include-assets-message": "Включите извлечение {{assets}} из источника данных.",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1546,6 +1546,7 @@
"hex-code-placeholder": "选择或输入 HEX 颜色代码",
"hex-color-validation": "输入不是有效的 HEX 颜色代码",
"hi-user-welcome-to": "Hi {{user}}, 欢迎来到",
"image-upload-error": "Image upload is not supported. Please use Markdown syntax for images available via URL.",
"import-entity-help": "通过上传 CSV 文件批量维护术语, 节约时间并提高效率。",
"in-this-database": "在此数据库中",
"include-assets-message": "启用从数据源提取{{assets}}",
Expand Down
Loading