#8407

Committed 18 Jul 2024 02:23PM UTC coverage: 5.75%. First build

Build # #8407

Build Type

Pull #6612

travis-ci

Pull Request Pull Request #6612: Package updates to reduce vulnerabilities

Run Details

188 of 9965 branches covered (1.89%)

Branch coverage included in aggregate %.

0 of 13 new or added lines in 7 files covered. (0.0%)

1407 of 17775 relevant lines covered (7.92%)

0.19 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/core/ui/forms/MarkdownInputControls/InsertImageButton.tsx

import { Button } from '@mui/material';
import { Editor } from '@tiptap/react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Form, Formik } from 'formik';
import * as yup from 'yup';
import FormikFileInput from '../FormikFileInput/FormikFileInput';
import { AddPhotoAlternateOutlined } from '@mui/icons-material';
import DialogHeader from '@/core/ui/dialog/DialogHeader';
import Gutters from '@/core/ui/grid/Gutters';
import { Actions } from '@/core/ui/actions/Actions';
import DialogWithGrid from '@/core/ui/dialog/DialogWithGrid';
import { useNotification } from '@/core/ui/notifications/useNotification';
import { BlockTitle } from '@/core/ui/typography';
import FormikInputField from '../FormikInputField/FormikInputField';
import MarkdownInputToolbarButton, { MarkdownInputToolbarButtonProps } from './MarkdownInputToolbarButton';
import { urlValidator } from '../validator/urlValidator';
import { textLengthValidator } from '../validator/textLengthValidator';
import { ALT_TEXT_LENGTH, MID_TEXT_LENGTH } from '../field-length.constants';

interface InsertImageButtonProps extends Omit<MarkdownInputToolbarButtonProps, 'tooltip'> {
  editor: Editor | null;
  onDialogOpen?: () => void;
  onDialogClose?: () => void;
  temporaryLocation?: boolean;
}

type ImageProps = {
  src: string;
  alt: string;
};

const InsertImageButton = ({
  editor,
  onDialogOpen,
  onDialogClose,
  temporaryLocation = false,
  ...buttonProps
}: InsertImageButtonProps) => {
  const { t } = useTranslation();
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const openDialog = () => {
    onDialogOpen?.();
    setIsDialogOpen(true);
  };

  const closeDialog = () => {
    setIsDialogOpen(false);
    editor?.commands.focus();
    onDialogClose?.();
  };

  const notify = useNotification();

  const insertImage = (imageProps: ImageProps) => {
    try {
      editor?.commands.setImage(imageProps);
    } catch (error) {
      if (error instanceof Error) {
        notify(error.message, 'error');
      }
      throw error;
    }
    closeDialog();
  };

  const initialValues: ImageProps = { src: 'https://', alt: '' };
  const isDisabled = !editor || !editor.can().setImage(initialValues);

  const validationSchema = yup.object().shape({
    src: urlValidator({ maxLength: MID_TEXT_LENGTH, required: true }),
    alt: textLengthValidator({ maxLength: ALT_TEXT_LENGTH }),
  });

  return (
    <>
      <MarkdownInputToolbarButton
        onClick={openDialog}
        disabled={isDisabled}
        tooltip={t('components.wysiwyg-editor.toolbar.image.image')}
        {...buttonProps}
      >
        <AddPhotoAlternateOutlined />
      </MarkdownInputToolbarButton>
      <DialogWithGrid open={isDialogOpen} onClose={closeDialog} aria-labelledby="insert-image-dialog-title">
        <DialogHeader onClose={closeDialog}>
          <BlockTitle id="insert-image-dialog-title">{t('components.wysiwyg-editor.image.dialogHeader')}</BlockTitle>
        </DialogHeader>
        <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={insertImage}>
          <Form>
            <Gutters>
              <FormikFileInput title={t('common.url')} name="src" temporaryLocation={temporaryLocation} />
              <FormikInputField title={t('common.description')} name="alt" />
              <Actions justifyContent="space-between">
                <Button onClick={closeDialog}>{t('buttons.cancel')}</Button>
                <Button type="submit" variant="contained">
                  {t('buttons.insert')}
                </Button>
              </Actions>
            </Gutters>
          </Form>
        </Formik>
      </DialogWithGrid>
    </>
  );
};

export default InsertImageButton;

1	import { Button } from '@mui/material';
2	import { Editor } from '@tiptap/react';
3	import { useState } from 'react';
4	import { useTranslation } from 'react-i18next';
5	import { Form, Formik } from 'formik';
6	import * as yup from 'yup';
7	import FormikFileInput from '../FormikFileInput/FormikFileInput';
8	import { AddPhotoAlternateOutlined } from '@mui/icons-material';
9	import DialogHeader from '@/core/ui/dialog/DialogHeader';
10	import Gutters from '@/core/ui/grid/Gutters';
11	import { Actions } from '@/core/ui/actions/Actions';
12	import DialogWithGrid from '@/core/ui/dialog/DialogWithGrid';
13	import { useNotification } from '@/core/ui/notifications/useNotification';
14	import { BlockTitle } from '@/core/ui/typography';
15	import FormikInputField from '../FormikInputField/FormikInputField';
16	import MarkdownInputToolbarButton, { MarkdownInputToolbarButtonProps } from './MarkdownInputToolbarButton';
17	import { urlValidator } from '../validator/urlValidator';
18	import { textLengthValidator } from '../validator/textLengthValidator';
19	import { ALT_TEXT_LENGTH, MID_TEXT_LENGTH } from '../field-length.constants';
20
21	interface InsertImageButtonProps extends Omit<MarkdownInputToolbarButtonProps, 'tooltip'> {
22	editor: Editor \| null;
23	onDialogOpen?: () => void;
24	onDialogClose?: () => void;
25	temporaryLocation?: boolean;
26	}
27		×
28	type ImageProps = {	×
29	src: string;	×
30	alt: string;
31	};	×
32		×
33	const InsertImageButton = ({	×
34	editor,
35	onDialogOpen,
36	onDialogClose,	×
37	temporaryLocation = false,	×
38	...buttonProps	×
39	}: InsertImageButtonProps) => {	×
40	const { t } = useTranslation();
41	const [isDialogOpen, setIsDialogOpen] = useState(false);
42		×
43	const openDialog = () => {
44	onDialogOpen?.();	×
45	setIsDialogOpen(true);	×
46	};	×
47
NEW 48	const closeDialog = () => {	×
NEW 49	setIsDialogOpen(false);	×
50	editor?.commands.focus();
51	onDialogClose?.();	×
52	};
53		×
54	const notify = useNotification();
55
56	const insertImage = (imageProps: ImageProps) => {	×
57	try {
58	editor?.commands.setImage(imageProps);
59	} catch (error) {
60	if (error instanceof Error) {
61	notify(error.message, 'error');	×
62	}
63	throw error;	×
64	}
65	closeDialog();
66	};
67
68	const initialValues: ImageProps = { src: 'https://', alt: '' };
69	const isDisabled = !editor \|\| !editor.can().setImage(initialValues);
70
71	const validationSchema = yup.object().shape({
72	src: urlValidator({ maxLength: MID_TEXT_LENGTH, required: true }),
73	alt: textLengthValidator({ maxLength: ALT_TEXT_LENGTH }),
74	});
75
76	return (
77	<>
78	<MarkdownInputToolbarButton
79	onClick={openDialog}
80	disabled={isDisabled}
81	tooltip={t('components.wysiwyg-editor.toolbar.image.image')}
82	{...buttonProps}
83	>
84	<AddPhotoAlternateOutlined />
85	</MarkdownInputToolbarButton>
86	<DialogWithGrid open={isDialogOpen} onClose={closeDialog} aria-labelledby="insert-image-dialog-title">
87	<DialogHeader onClose={closeDialog}>
88	<BlockTitle id="insert-image-dialog-title">{t('components.wysiwyg-editor.image.dialogHeader')}</BlockTitle>
89	</DialogHeader>
90	<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={insertImage}>
91	<Form>
92	<Gutters>
93	<FormikFileInput title={t('common.url')} name="src" temporaryLocation={temporaryLocation} />
94	<FormikInputField title={t('common.description')} name="alt" />
95	<Actions justifyContent="space-between">
96	<Button onClick={closeDialog}>{t('buttons.cancel')}</Button>
97	<Button type="submit" variant="contained">
98	{t('buttons.insert')}
99	</Button>
100	</Actions>
101	</Gutters>
102	</Form>
103	</Formik>
104	</DialogWithGrid>
105	</>
106	);
107	};
108
109	export default InsertImageButton;

alkem-io / client-web / #8407

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous