#8389

Committed 18 Jul 2024 07:25AM UTC coverage: 5.75%. First build

Build # #8389

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/ToggleLinkButton.tsx

import { Button } from '@mui/material';
import { Editor } from '@tiptap/react';
import { useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Form, Formik } from 'formik';
import * as yup from 'yup';
import FormikInputField from '../FormikInputField/FormikInputField';
import { LinkOutlined } 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 { Selection } from 'prosemirror-state';
import { BlockTitle } from '@/core/ui/typography';
import MarkdownInputToolbarButton, { MarkdownInputToolbarButtonProps } from './MarkdownInputToolbarButton';
import { urlValidator } from '../validator/urlValidator';
import { MID_TEXT_LENGTH } from '../field-length.constants';

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

type LinkProps = { href: string };

const ToggleLinkButton = ({ editor, onDialogOpen, onDialogClose, ...buttonProps }: ToggleLinkButtonProps) => {
  const { t } = useTranslation();
  const wasFocusedRef = useRef<boolean>(false);

  const subscribeToFocus = (editor: Editor) => {
    const markAsFocused = () => {
      wasFocusedRef.current = true;
    };

    editor.on('focus', markAsFocused);

    return () => {
      editor.off('focus', markAsFocused);
    };
  };

  useEffect(() => {
    if (editor) {
      subscribeToFocus(editor);
    }
  }, [editor]);

  const [isDialogOpen, setIsDialogOpen] = useState(false);

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

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

  const notify = useNotification();

  const markAsLink = (linkProps: LinkProps) => {
    if (!editor) {
      return;
    }

    const { selection } = editor.state;

    try {
      if (!selection.empty) {
        editor.commands.setLink(linkProps);
      } else {
        // If the input hasn't been focused once, the link is inserted at the end.
        const from = wasFocusedRef.current ? selection.from : Selection.atEnd(editor.state.doc).from;
        const to = from + linkProps.href.length;

        editor
          .chain()
          .setTextSelection(from)
          .insertContent(linkProps.href)
          .setTextSelection({ from, to })
          .setLink(linkProps)
          .setTextSelection(to)
          .run();
      }
    } catch (error) {
      if (error instanceof Error) {
        notify(error.message, 'error');
      }
      throw error;
    }

    closeDialog();
  };

  const unmarkAsLink = () => editor?.chain().focus().unsetLink().run();

  const initialValues: LinkProps = { href: 'https://' };

  const validationSchema = yup.object().shape({
    href: urlValidator({ maxLength: MID_TEXT_LENGTH, required: true }),
  });

  const isDisabled = !editor || !editor.can().toggleLink(initialValues);

  const isActive = editor?.isActive('link');

  const handleClick = isActive ? unmarkAsLink : openDialog;

  return (
    <>
      <MarkdownInputToolbarButton
        onClick={handleClick}
        disabled={isDisabled}
        color={isActive ? 'secondary' : undefined}
        tooltip={t('components.wysiwyg-editor.toolbar.link.link')}
        {...buttonProps}
      >
        <LinkOutlined />
      </MarkdownInputToolbarButton>
      <DialogWithGrid open={isDialogOpen} onClose={closeDialog} aria-labelledby="toggle-link-dialog-title">
        <DialogHeader onClose={closeDialog}>
          <BlockTitle id="toggle-link-dialog-title">{t('components.wysiwyg-editor.link.dialogHeader')}</BlockTitle>
        </DialogHeader>
        <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={markAsLink}>
          <Form>
            <Gutters>
              <FormikInputField title={t('common.url')} name="href" />
              <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 ToggleLinkButton;

1	import { Button } from '@mui/material';
2	import { Editor } from '@tiptap/react';
3	import { useEffect, useRef, useState } from 'react';
4	import { useTranslation } from 'react-i18next';
5	import { Form, Formik } from 'formik';
6	import * as yup from 'yup';
7	import FormikInputField from '../FormikInputField/FormikInputField';
8	import { LinkOutlined } 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 { Selection } from 'prosemirror-state';
15	import { BlockTitle } from '@/core/ui/typography';
16	import MarkdownInputToolbarButton, { MarkdownInputToolbarButtonProps } from './MarkdownInputToolbarButton';
17	import { urlValidator } from '../validator/urlValidator';
18	import { MID_TEXT_LENGTH } from '../field-length.constants';
19
20	interface ToggleLinkButtonProps extends Omit<MarkdownInputToolbarButtonProps, 'tooltip'> {
21	editor: Editor \| null;
22	onDialogOpen?: () => void;
23	onDialogClose?: () => void;
24	}
25
26	type LinkProps = { href: string };	×
27		×
28	const ToggleLinkButton = ({ editor, onDialogOpen, onDialogClose, ...buttonProps }: ToggleLinkButtonProps) => {	×
29	const { t } = useTranslation();
30	const wasFocusedRef = useRef<boolean>(false);	×
31		×
32	const subscribeToFocus = (editor: Editor) => {	×
33	const markAsFocused = () => {
34	wasFocusedRef.current = true;
35	};	×
36
37	editor.on('focus', markAsFocused);	×
38		×
39	return () => {
40	editor.off('focus', markAsFocused);
41	};
42	};	×
43		×
44	useEffect(() => {	×
45	if (editor) {
46	subscribeToFocus(editor);
47	}
48	}, [editor]);	×
49
50	const [isDialogOpen, setIsDialogOpen] = useState(false);	×
51		×
52	const openDialog = () => {	×
53	onDialogOpen?.();
54	setIsDialogOpen(true);
55	};	×
56		×
57	const closeDialog = () => {	×
58	setIsDialogOpen(false);	×
59	editor?.commands.focus();
60	onDialogClose?.();
61	};	×
62
63	const notify = useNotification();	×
64		×
65	const markAsLink = (linkProps: LinkProps) => {	×
66	if (!editor) {
67	return;
68	}	×
69
70	const { selection } = editor.state;	×
71		×
72	try {	×
73	if (!selection.empty) {
74	editor.commands.setLink(linkProps);
75	} else {	×
76	// If the input hasn't been focused once, the link is inserted at the end.	×
77	const from = wasFocusedRef.current ? selection.from : Selection.atEnd(editor.state.doc).from;
78	const to = from + linkProps.href.length;	×
79
80	editor
81	.chain()
82	.setTextSelection(from)
83	.insertContent(linkProps.href)
84	.setTextSelection({ from, to })
85	.setLink(linkProps)
86	.setTextSelection(to)
87	.run();
NEW 88	}	×
NEW 89	} catch (error) {	×
90	if (error instanceof Error) {
91	notify(error.message, 'error');	×
92	}
93	throw error;
94	}	×
95
96	closeDialog();
97	};	×
98
99	const unmarkAsLink = () => editor?.chain().focus().unsetLink().run();	×
100
101	const initialValues: LinkProps = { href: 'https://' };
102
103	const validationSchema = yup.object().shape({	×
104	href: urlValidator({ maxLength: MID_TEXT_LENGTH, required: true }),
105	});	×
106
107	const isDisabled = !editor \|\| !editor.can().toggleLink(initialValues);	×
108
109	const isActive = editor?.isActive('link');	×
110
111	const handleClick = isActive ? unmarkAsLink : openDialog;
112
113	return (
114	<>	×
115	<MarkdownInputToolbarButton
116	onClick={handleClick}
117	disabled={isDisabled}
118	color={isActive ? 'secondary' : undefined}
119	tooltip={t('components.wysiwyg-editor.toolbar.link.link')}
120	{...buttonProps}
121	>
122	<LinkOutlined />
123	</MarkdownInputToolbarButton>
124	<DialogWithGrid open={isDialogOpen} onClose={closeDialog} aria-labelledby="toggle-link-dialog-title">
125	<DialogHeader onClose={closeDialog}>
126	<BlockTitle id="toggle-link-dialog-title">{t('components.wysiwyg-editor.link.dialogHeader')}</BlockTitle>
127	</DialogHeader>
128	<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={markAsLink}>
129	<Form>
130	<Gutters>
131	<FormikInputField title={t('common.url')} name="href" />
132	<Actions justifyContent="space-between">
133	<Button onClick={closeDialog}>{t('buttons.cancel')}</Button>
134	<Button type="submit" variant="contained">
135	{t('buttons.insert')}
136	</Button>
137	</Actions>
138	</Gutters>
139	</Form>
140	</Formik>
141	</DialogWithGrid>
142	</>
143	);
144	};
145
146	export default ToggleLinkButton;

alkem-io / client-web / #8389

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