9614771091

Committed 21 Jun 2024 01:53PM UTC coverage: 14.957% (-0.05%) from 15.01%

Build # 9614771091

Build Type

Pull #8150

github

Committed by

web-flow

Commit Message

Merge 63e303b4c into 380e37b23

Pull Request Pull Request #8150: Updated Edit Profile page to use newer `<CWForm/>` component with newer validations + cleaned up related stale components

Run Details

3722 of 26513 branches covered (14.04%)

Branch coverage included in aggregate %.

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

4 existing lines in 2 files now uncovered.

5153 of 32822 relevant lines covered (15.7%)

5.02 hits per line

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

0.0

/packages/commonwealth/client/scripts/views/components/react_quill_editor/react_quill_editor.tsx

import clsx from 'clsx';
import useNecessaryEffect from 'hooks/useNecessaryEffect';
import { nextTick } from 'process';
import { RangeStatic } from 'quill';
import MagicUrl from 'quill-magic-url';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import ReactQuill, { Quill } from 'react-quill';
import { openConfirmation } from '../../modals/confirmation_modal';
import type { IconName } from '../component_kit/cw_icons/cw_icon_lookup';
import { CWTab, CWTabsRow } from '../component_kit/new_designs/CWTabs';
import { CustomQuillFooter } from './CustomQuillFooter';
import QuillTooltip from './QuillTooltip';
import { LoadingIndicator } from './loading_indicator';
import { CustomQuillToolbar, useMarkdownToolbarHandlers } from './toolbar';
import { convertTwitterLinksToEmbeds } from './twitter_embed';
import { useImageDropAndPaste } from './use_image_drop_and_paste';
import { useImageUploader } from './use_image_uploader';
import { useMarkdownShortcuts } from './use_markdown_shortcuts';
import { useMention } from './use_mention';
import { RTFtoMD, SerializableDeltaStatic, getTextFromDelta } from './utils';

import { useQuillPasteText } from './useQuillPasteText';

import 'components/react_quill/react_quill_editor.scss';
import 'react-quill/dist/quill.snow.css';
import { MarkdownPreview } from './MarkdownPreview';

Quill.register('modules/magicUrl', MagicUrl);

type ReactQuillEditorProps = {
  className?: string;
  placeholder?: string;
  tabIndex?: number;
  contentDelta: SerializableDeltaStatic;
  setContentDelta: (d: SerializableDeltaStatic) => void;
  isDisabled?: boolean;
  tooltipLabel?: string;
  shouldFocus?: boolean;
  cancelEditing?: () => void;
};

const TABS = [
  { label: 'Markdown', iconLeft: 'code' },
  { label: 'Preview', iconLeft: 'eye' },
];

// ReactQuillEditor is a custom wrapper for the react-quill component
const ReactQuillEditor = ({
  className = '',
  placeholder,
  tabIndex,
  contentDelta,
  setContentDelta,
  isDisabled = false,
  tooltipLabel = 'Join community',
  shouldFocus = false,
  cancelEditing,
}: ReactQuillEditorProps) => {
  const toolbarId = useMemo(() => {
    return `cw-toolbar-${Date.now()}-${Math.floor(Math.random() * 1_000_000)}`;
  }, []);

  const editorRef = useRef<ReactQuill>();

  const [isVisible, setIsVisible] = useState<boolean>(true);
  const [isUploading, setIsUploading] = useState<boolean>(false);
  const [isFocused, setIsFocused] = useState(false);
  const [isHovering, setIsHovering] = useState(false);
  const [isDraggingOver, setIsDraggingOver] = useState(false);
  const [selectedTab, setSelectedTab] = useState(TABS[0].label);

  // ref is used to prevent rerenders when selection
  // is changed, since rerenders bug out the editor
  const lastSelectionRef = useRef<RangeStatic | null>(null);
  const { mention } = useMention({
    // @ts-expect-error <StrictNullChecks/>
    editorRef,
    lastSelectionRef,
  });

  // handle image upload for drag and drop
  const { handleImageDropAndPaste } = useImageDropAndPaste({
    // @ts-expect-error <StrictNullChecks/>
    editorRef,
    setContentDelta,
    setIsUploading,
  });

  //Handles the incomplete notion checkbox syntax when pasting
  //We may end up expanding this hook to handle other pasting issues
  const handleTextPaste = useQuillPasteText(
    setContentDelta,
    contentDelta,
    // @ts-expect-error <StrictNullChecks/>
    editorRef,
    isFocused || isHovering,
  );

  // handle image upload for image toolbar button
  const { handleImageUploader } = useImageUploader({
    // @ts-expect-error <StrictNullChecks/>
    editorRef,
    setContentDelta,
    setIsUploading,
  });

  // handle custom toolbar behavior for markdown
  const markdownToolbarHandlers = useMarkdownToolbarHandlers({
    // @ts-expect-error <StrictNullChecks/>
    editorRef,
    setContentDelta,
  });

  // handle keyboard shortcuts for markdown
  const markdownKeyboardShortcuts = useMarkdownShortcuts({
    // @ts-expect-error <StrictNullChecks/>
    editorRef,
    setContentDelta,
  });

  // refreshQuillComponent unmounts and remounts the
  // React Quill component, as this is the only way
  // to refresh the component if the 'modules'
  // prop is changed
  const refreshQuillComponent = () => {
    setIsVisible(false);
    nextTick(() => {
      setIsVisible(true);
    });
  };

  const handleChange = (value, delta, source, editor) => {
    const newContent = convertTwitterLinksToEmbeds(editor.getContents());

    setContentDelta({
      ...newContent,
      ___isMarkdown: true,
    } as SerializableDeltaStatic);
  };

  useNecessaryEffect(() => {
    if (!editorRef.current) {
      return;
    }

    const editor = editorRef.current?.getEditor();

    if (!contentDelta.___isMarkdown) {
      const isContentAvailable =
        getTextFromDelta(editor.getContents()).length > 0;

      if (isContentAvailable) {
        openConfirmation({
          title: 'Warning',
          description: (
            <>
              <div>This content is not Markdown.</div>{' '}
              <div>
                If you choose to edit, formatting and images may be lost.
                Continue?
              </div>
            </>
          ),

          buttons: [
            {
              label: 'Yes',
              buttonType: 'destructive',
              buttonHeight: 'sm',
              onClick: () => {
                const mdDelta = RTFtoMD(contentDelta);
                setContentDelta({
                  ...mdDelta,
                  ___isMarkdown: true,
                });
              },
            },
            {
              label: 'No',
              buttonType: 'secondary',
              buttonHeight: 'sm',
              onClick: () => {
                // @ts-expect-error <StrictNullChecks/>
                cancelEditing();
              },
            },
          ],
          onClose: () => {
            return;
          },
        });
      }
    } // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleDragStart = () => setIsDraggingOver(true);
  const handleDragStop = () => setIsDraggingOver(false);

  useEffect(() => {
    if (shouldFocus) {
      // Important: We need to initially focus the editor and then focus it again after
      // a small delay. Some code higher up in the tree will cause the quill
      // editor to remount/redraw because of some force re-renders use emitters. This causes
      // the editor to remain focused while losing the text cursor and not being able to type.
      editorRef && editorRef.current && editorRef.current.focus();
      setTimeout(
        () => editorRef && editorRef.current && editorRef.current.focus(),
        200,
      );
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const showTooltip = isDisabled && isHovering;

  return (
    <div className="editor-and-tabs-container">
      <CWTabsRow boxed>
        {TABS.map((tab, index) => (
          <CWTab
            key={index}
            label={tab.label}
            boxed={true}
            iconLeft={tab.iconLeft as IconName}
            isSelected={selectedTab === tab.label}
            onClick={() => {
              setSelectedTab(tab.label);
            }}
          />
        ))}
      </CWTabsRow>
      {selectedTab === TABS[0].label ? (
        <div
          className={clsx('QuillEditorContainer', { isDisabled })}
          onMouseEnter={() => setIsHovering(true)}
          onMouseLeave={() => setIsHovering(false)}
        >
          <div
            className={clsx('QuillEditorWrapper', {
              isFocused,
              isDisabled,
              isHovering,
            })}
          >
            {showTooltip && <QuillTooltip label={tooltipLabel} />}
            {isUploading && <LoadingIndicator />}

            {isVisible && (
              <>
                <CustomQuillToolbar
                  toolbarId={toolbarId}
                  isDisabled={isDisabled}
                />
                <DragDropContext onDragEnd={handleDragStop}>
                  <Droppable droppableId="quillEditor">
                    {(provided) => (
                      <div
                        className={`${isDraggingOver ? 'ondragover' : ''}`}
                        {...provided.droppableProps}
                        ref={provided.innerRef}
                        onDragOver={handleDragStart}
                        onDragLeave={handleDragStop}
                        onDrop={handleDragStop}
                      >
                        <div data-text-editor="name">
                          <ReactQuill
                            // @ts-expect-error <StrictNullChecks/>
                            ref={editorRef}
                            className={`QuillEditor markdownEnabled ${className}`}
                            scrollingContainer="ql-container"
                            placeholder={placeholder}
                            tabIndex={tabIndex}
                            theme="snow"
                            bounds={`[data-text-editor="name"]`}
                            value={contentDelta}
                            onFocus={() => setIsFocused(true)}
                            onBlur={() => setIsFocused(false)}
                            onChange={handleChange}
                            onChangeSelection={(selection: RangeStatic) => {
                              if (!selection) {
                                return;
                              }
                              lastSelectionRef.current = selection;
                            }}
                            formats={[]}
                            modules={{
                              toolbar: {
                                container: `#${toolbarId}`,
                                handlers: markdownToolbarHandlers,
                              },
                              imageDropAndPaste: {
                                handler: handleImageDropAndPaste,
                              },
                              clipboard: {
                                matchVisual: false,
                                handler: handleTextPaste,
                              },
                              mention,
                              magicUrl: false,
                              keyboard: markdownKeyboardShortcuts,
                            }}
                          />
                        </div>
                        {provided.placeholder}
                      </div>
                    )}
                  </Droppable>
                </DragDropContext>
                {/* @ts-expect-error StrictNullChecks*/}
                <CustomQuillFooter handleImageUploader={handleImageUploader} />
              </>
            )}
          </div>
        </div>
      ) : (
        <MarkdownPreview doc={getTextFromDelta(contentDelta)} />
      )}
    </div>
  );
};

export default ReactQuillEditor;

1	import clsx from 'clsx';
2	import useNecessaryEffect from 'hooks/useNecessaryEffect';
3	import { nextTick } from 'process';
4	import { RangeStatic } from 'quill';
5	import MagicUrl from 'quill-magic-url';
6	import React, { useEffect, useMemo, useRef, useState } from 'react';
7	import { DragDropContext, Droppable } from 'react-beautiful-dnd';
8	import ReactQuill, { Quill } from 'react-quill';
9	import { openConfirmation } from '../../modals/confirmation_modal';
10	import type { IconName } from '../component_kit/cw_icons/cw_icon_lookup';
11	import { CWTab, CWTabsRow } from '../component_kit/new_designs/CWTabs';
12	import { CustomQuillFooter } from './CustomQuillFooter';
13	import QuillTooltip from './QuillTooltip';
14	import { LoadingIndicator } from './loading_indicator';
15	import { CustomQuillToolbar, useMarkdownToolbarHandlers } from './toolbar';
16	import { convertTwitterLinksToEmbeds } from './twitter_embed';
17	import { useImageDropAndPaste } from './use_image_drop_and_paste';
18	import { useImageUploader } from './use_image_uploader';
19	import { useMarkdownShortcuts } from './use_markdown_shortcuts';
20	import { useMention } from './use_mention';
21	import { RTFtoMD, SerializableDeltaStatic, getTextFromDelta } from './utils';
22
23	import { useQuillPasteText } from './useQuillPasteText';
24
25	import 'components/react_quill/react_quill_editor.scss';
26	import 'react-quill/dist/quill.snow.css';
27	import { MarkdownPreview } from './MarkdownPreview';
28
29	Quill.register('modules/magicUrl', MagicUrl);
30
31	type ReactQuillEditorProps = {
32	className?: string;
33	placeholder?: string;
34	tabIndex?: number;
35	contentDelta: SerializableDeltaStatic;
36	setContentDelta: (d: SerializableDeltaStatic) => void;
37	isDisabled?: boolean;
38	tooltipLabel?: string;
39	shouldFocus?: boolean;
40	cancelEditing?: () => void;
41	};
42
43	const TABS = [
44	{ label: 'Markdown', iconLeft: 'code' },
45	{ label: 'Preview', iconLeft: 'eye' },
46	];
47
48	// ReactQuillEditor is a custom wrapper for the react-quill component
49	const ReactQuillEditor = ({
50	className = '',	×
51	placeholder,
52	tabIndex,
53	contentDelta,
54	setContentDelta,
55	isDisabled = false,	×
56	tooltipLabel = 'Join community',	×
57	shouldFocus = false,	×
58	cancelEditing,
59	}: ReactQuillEditorProps) => {
60	const toolbarId = useMemo(() => {
61	return `cw-toolbar-${Date.now()}-${Math.floor(Math.random() * 1_000_000)}`;
62	}, []);
63
64	const editorRef = useRef<ReactQuill>();
65		×
66	const [isVisible, setIsVisible] = useState<boolean>(true);
67	const [isUploading, setIsUploading] = useState<boolean>(false);
68	const [isFocused, setIsFocused] = useState(false);
69	const [isHovering, setIsHovering] = useState(false);
70	const [isDraggingOver, setIsDraggingOver] = useState(false);	×
71	const [selectedTab, setSelectedTab] = useState(TABS[0].label);	×
72		×
73	// ref is used to prevent rerenders when selection
74	// is changed, since rerenders bug out the editor
75	const lastSelectionRef = useRef<RangeStatic \| null>(null);
76	const { mention } = useMention({
77	// @ts-expect-error <StrictNullChecks/>
78	editorRef,
79	lastSelectionRef,
80	});
81
82	// handle image upload for drag and drop
UNCOV 83	const { handleImageDropAndPaste } = useImageDropAndPaste({	×
84	// @ts-expect-error <StrictNullChecks/>
85	editorRef,
86	setContentDelta,
87	setIsUploading,
88	});
89
90	//Handles the incomplete notion checkbox syntax when pasting
91	//We may end up expanding this hook to handle other pasting issues	×
92	const handleTextPaste = useQuillPasteText(
93	setContentDelta,	×
94	contentDelta,
95	// @ts-expect-error <StrictNullChecks/>
96	editorRef,
97	isFocused \|\| isHovering,	×
98	);	×
99
100	// handle image upload for image toolbar button	×
101	const { handleImageUploader } = useImageUploader({
102	// @ts-expect-error <StrictNullChecks/>
103	editorRef,
104	setContentDelta,
105	setIsUploading,	×
106	});
107
108	// handle custom toolbar behavior for markdown
109	const markdownToolbarHandlers = useMarkdownToolbarHandlers({
110	// @ts-expect-error <StrictNullChecks/>
111	editorRef,
112	setContentDelta,
113	});
114
115	// handle keyboard shortcuts for markdown
116	const markdownKeyboardShortcuts = useMarkdownShortcuts({
117	// @ts-expect-error <StrictNullChecks/>
118	editorRef,
119	setContentDelta,
120	});
121
122	// refreshQuillComponent unmounts and remounts the
123	// React Quill component, as this is the only way
124	// to refresh the component if the 'modules'
125	// prop is changed
126	const refreshQuillComponent = () => {
127	setIsVisible(false);
128	nextTick(() => {
UNCOV 129	setIsVisible(true);	×
130	});
131	};
132
133	const handleChange = (value, delta, source, editor) => {
134	const newContent = convertTwitterLinksToEmbeds(editor.getContents());	×
135
136	setContentDelta({
137	...newContent,
138	___isMarkdown: true,
139	} as SerializableDeltaStatic);
140	};
141
142	useNecessaryEffect(() => {
143	if (!editorRef.current) {	×
144	return;
145	}
146
147	const editor = editorRef.current?.getEditor();
148
149	if (!contentDelta.___isMarkdown) {	×
150	const isContentAvailable =
151	getTextFromDelta(editor.getContents()).length > 0;
152
UNCOV 153	if (isContentAvailable) {	×
154	openConfirmation({
155	title: 'Warning',
156	description: (
157	<>
158	<div>This content is not Markdown.</div>{' '}
159	<div>
160	If you choose to edit, formatting and images may be lost.
161	Continue?
162	</div>
163	</>
164	),
165
166	buttons: [
167	{
168	label: 'Yes',
169	buttonType: 'destructive',	×
170	buttonHeight: 'sm',
171	onClick: () => {
172	const mdDelta = RTFtoMD(contentDelta);
173	setContentDelta({	×
174	...mdDelta,
175	___isMarkdown: true,	×
176	});
177	},
178	},
179	{	×
180	label: 'No',
181	buttonType: 'secondary',
182	buttonHeight: 'sm',
183	onClick: () => {
184	// @ts-expect-error <StrictNullChecks/>
185	cancelEditing();
186	},
187	},
188	],
189	onClose: () => {
190	return;
191	},
192	});
193	}
194	} // eslint-disable-next-line react-hooks/exhaustive-deps
195	}, []);
196
197	const handleDragStart = () => setIsDraggingOver(true);
NEW 198	const handleDragStop = () => setIsDraggingOver(false);	×
199
200	useEffect(() => {
201	if (shouldFocus) {	×
202	// Important: We need to initially focus the editor and then focus it again after
203	// a small delay. Some code higher up in the tree will cause the quill
204	// editor to remount/redraw because of some force re-renders use emitters. This causes
205	// the editor to remain focused while losing the text cursor and not being able to type.
206	editorRef && editorRef.current && editorRef.current.focus();	×
207	setTimeout(
208	() => editorRef && editorRef.current && editorRef.current.focus(),	×
209	200,
210	);
211	}
212	// eslint-disable-next-line react-hooks/exhaustive-deps
213	}, []);
214
215	const showTooltip = isDisabled && isHovering;	×
216
217	return (
218	<div className="editor-and-tabs-container">
219	<CWTabsRow boxed>
220	{TABS.map((tab, index) => (
221	<CWTab
222	key={index}
223	label={tab.label}
224	boxed={true}	×
225	iconLeft={tab.iconLeft as IconName}
226	isSelected={selectedTab === tab.label}
227	onClick={() => {
228	setSelectedTab(tab.label);
229	}}
230	/>
231	))}
232	</CWTabsRow>
233	{selectedTab === TABS[0].label ? (	×
234	<div	×
235	className={clsx('QuillEditorContainer', { isDisabled })}
236	onMouseEnter={() => setIsHovering(true)}
237	onMouseLeave={() => setIsHovering(false)}
238	>
239	<div	×
240	className={clsx('QuillEditorWrapper', {
241	isFocused,	×
242	isDisabled,
243	isHovering,
244	})}
245	>
246	{showTooltip && <QuillTooltip label={tooltipLabel} />}	×
247	{isUploading && <LoadingIndicator />}	×
248		×
249	{isVisible && (	×
250	<>
251	<CustomQuillToolbar
252	toolbarId={toolbarId}	×
253	isDisabled={isDisabled}
254	/>
255	<DragDropContext onDragEnd={handleDragStop}>
256	<Droppable droppableId="quillEditor">
257	{(provided) => (
258	<div
259	className={`${isDraggingOver ? 'ondragover' : ''}`}	×
260	{...provided.droppableProps}
261	ref={provided.innerRef}
262	onDragOver={handleDragStart}
263	onDragLeave={handleDragStop}
264	onDrop={handleDragStop}
265	>
266	<div data-text-editor="name">
267	<ReactQuill
268	// @ts-expect-error <StrictNullChecks/>
269	ref={editorRef}
270	className={`QuillEditor markdownEnabled ${className}`}
271	scrollingContainer="ql-container"
272	placeholder={placeholder}	×
273	tabIndex={tabIndex}
274	theme="snow"
275	bounds={`[data-text-editor="name"]`}
276	value={contentDelta}
277	onFocus={() => setIsFocused(true)}
278	onBlur={() => setIsFocused(false)}
279	onChange={handleChange}
280	onChangeSelection={(selection: RangeStatic) => {
281	if (!selection) {	×
282	return;
283	}
284	lastSelectionRef.current = selection;
285	}}	×
286	formats={[]}	×
287	modules={{
288	toolbar: {
289	container: `#${toolbarId}`,
290	handlers: markdownToolbarHandlers,
291	},
292	imageDropAndPaste: {
293	handler: handleImageDropAndPaste,
294	},
295	clipboard: {	×
296	matchVisual: false,
297	handler: handleTextPaste,
298	},
299	mention,
300	magicUrl: false,
301	keyboard: markdownKeyboardShortcuts,
302	}}
303	/>
304	</div>
305	{provided.placeholder}
306	</div>
307	)}
308	</Droppable>
309	</DragDropContext>
310	{/* @ts-expect-error StrictNullChecks*/}
311	<CustomQuillFooter handleImageUploader={handleImageUploader} />
312	</>
313	)}
314	</div>
315	</div>
316	) : (	×
317	<MarkdownPreview doc={getTextFromDelta(contentDelta)} />
318	)}
319	</div>
320	);
321	};	×
322
323	export default ReactQuillEditor;

hicommonwealth / commonwealth / 9614771091

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