tiptap: improve

pull/31/head
fantasticit 2022-04-27 21:21:24 +08:00
parent 775172a61c
commit aac6238263
27 changed files with 275 additions and 69 deletions

View File

@ -59,6 +59,7 @@
"copy-to-clipboard": "^3.3.1",
"deep-equal": "^2.0.5",
"dompurify": "^2.3.5",
"interactjs": "^1.10.11",
"katex": "^0.15.2",
"kity": "^2.0.4",
"lib0": "^0.2.47",
@ -74,7 +75,6 @@
"prosemirror-tables": "^1.1.1",
"prosemirror-utils": "^0.9.6",
"prosemirror-view": "^1.23.6",
"re-resizable": "^6.9.9",
"react": "17.0.2",
"react-countdown": "^2.3.2",
"react-dom": "17.0.2",

View File

@ -1,51 +1,108 @@
import React, { useCallback, useState } from 'react';
import React, { useRef, useEffect } from 'react';
import cls from 'classnames';
import { useClickOutside } from 'hooks/use-click-outside';
import interact from 'interactjs';
import styles from './style.module.scss';
import { Resizable } from 're-resizable';
type ISize = { width: number; height: number };
interface IProps {
width: number;
height: number;
onChange?: (arg: { width: number; height: number }) => void;
onChangeEnd?: (arg: { width: number; height: number }) => void;
maxWidth?: number;
onChange?: (arg: ISize) => void;
onChangeEnd?: (arg: ISize) => void;
className?: string;
}
const MIN_WIDTH = 50;
const MIN_HEIGHT = 50;
function clamp(val: number, min: number, max: number): number {
if (val < min) {
return min;
}
if (val > max) {
return max;
}
return val;
}
export const Resizeable: React.FC<IProps> = ({
width: defaultWidth,
height: defaultHeight,
width,
height,
maxWidth,
className,
onChange,
onChangeEnd,
children,
}) => {
const [width, setWidth] = useState(defaultWidth);
const [height, setHeight] = useState(defaultHeight);
const $container = useRef<HTMLDivElement>(null);
const $topLeft = useRef<HTMLDivElement>(null);
const $topRight = useRef<HTMLDivElement>(null);
const $bottomLeft = useRef<HTMLDivElement>(null);
const $bottomRight = useRef<HTMLDivElement>(null);
const onResizeStop = useCallback(
(e, direction, ref, d) => {
const nextWidth = width + d.width;
const nextHeight = height + d.height;
setWidth(nextWidth);
setHeight(nextHeight);
onChangeEnd({ width: nextWidth, height: nextHeight });
},
[width, height]
);
useClickOutside($container, {
in: () => $container.current.classList.add(styles.isActive),
out: () => $container.current.classList.remove(styles.isActive),
});
useEffect(() => {
interact($container.current).resizable({
edges: {
top: true,
right: true,
bottom: true,
left: true,
},
listeners: {
move: function (event) {
let { x, y } = event.target.dataset;
x = (parseFloat(x) || 0) + event.deltaRect.left;
y = (parseFloat(y) || 0) + event.deltaRect.top;
let { width, height } = event.rect;
width = clamp(width, MIN_WIDTH, maxWidth || Infinity);
height = clamp(height, MIN_HEIGHT, Infinity);
Object.assign(event.target.style, {
width: `${width}px`,
height: `${height}px`,
});
Object.assign(event.target.dataset, { x, y });
onChange && onChange({ width, height });
},
end: function (event) {
let { width, height } = event.rect;
width = clamp(width, MIN_WIDTH, maxWidth || Infinity);
height = clamp(height, MIN_HEIGHT, Infinity);
onChangeEnd && onChangeEnd({ width, height });
},
},
});
}, [maxWidth]);
useEffect(() => {
Object.assign($container.current.style, {
width: `${width}px`,
height: `${height}px`,
});
}, [width, height]);
return (
<Resizable
size={{ width, height }}
<div
id="js-resizeable-container"
className={cls(className, styles.resizable)}
minWidth={MIN_WIDTH}
minHeight={MIN_HEIGHT}
onResizeStop={onResizeStop}
ref={$container}
style={{ width, height }}
>
<span className={styles.resizer + ' ' + styles.topLeft} ref={$topLeft} data-type={'topLeft'}></span>
<span className={styles.resizer + ' ' + styles.topRight} ref={$topRight} data-type={'topRight'}></span>
<span className={styles.resizer + ' ' + styles.bottomLeft} ref={$bottomLeft} data-type={'bottomLeft'}></span>
<span className={styles.resizer + ' ' + styles.bottomRight} ref={$bottomRight} data-type={'bottomRight'}></span>
{children}
</Resizable>
</div>
);
};

View File

@ -4,6 +4,43 @@
width: 100px;
height: 100px;
max-width: 100%;
box-sizing: border-box;
.resizer {
position: absolute;
z-index: 9999;
width: 10px;
height: 10px;
background: white;
border: 3px solid #4286f4;
border-radius: 50%;
opacity: 0;
box-sizing: border-box;
}
.resizer.topLeft {
top: -5px;
left: -5px;
cursor: nwse-resize;
}
.resizer.topRight {
top: -5px;
right: -5px;
cursor: nesw-resize;
}
.resizer.bottomLeft {
bottom: -5px;
left: -5px;
cursor: nesw-resize;
}
.resizer.bottomRight {
right: -5px;
bottom: -5px;
cursor: nwse-resize;
}
&.isActive {
.resizer {

View File

@ -10,10 +10,19 @@ const DEFAULT_MIND_DATA = {
version: '1.4.43',
};
export interface IMindAttrs {
width?: number;
height?: number;
data?: Record<string, unknown>;
template?: string;
theme?: string;
zoom?: number;
}
declare module '@tiptap/core' {
interface Commands<ReturnType> {
mind: {
setMind: (attrs?: unknown) => ReturnType;
setMind: (attrs?: IMindAttrs) => ReturnType;
};
}
}
@ -28,7 +37,7 @@ export const Mind = Node.create({
addAttributes() {
return {
width: {
default: '100%',
default: null,
parseHTML: getDatasetAttribute('width'),
},
height: {
@ -51,10 +60,6 @@ export const Mind = Node.create({
default: 100,
parseHTML: getDatasetAttribute('zoom'),
},
callCenterCount: {
default: 0,
parseHTML: (element) => Number(getDatasetAttribute('callcentercount')(element)),
},
};
},
@ -83,6 +88,9 @@ export const Mind = Node.create({
setMind:
(options) =>
({ tr, commands, chain, editor }) => {
options = options || {};
options.data = options.data || DEFAULT_MIND_DATA;
// @ts-ignore
if (tr.selection?.node?.type?.name == this.name) {
return commands.updateAttributes(this.name, options);
@ -94,7 +102,7 @@ export const Mind = Node.create({
.insertContentAt(pos.before(), [
{
type: this.name,
attrs: { data: DEFAULT_MIND_DATA },
attrs: options,
},
])
.run();

View File

@ -34,6 +34,7 @@ import { Search } from './menus/search';
import { Callout } from './menus/callout';
import { Countdonw } from './menus/countdown';
import { DocumentChildren } from './menus/document-children';
import { DocumentReference } from './menus/document-reference';
import { Image } from './menus/image';
import { Iframe } from './menus/iframe';
@ -91,6 +92,7 @@ export const MenuBar: React.FC<{ editor: any }> = ({ editor }) => {
<Callout editor={editor} />
<Countdonw editor={editor} />
<DocumentChildren editor={editor} />
<DocumentReference editor={editor} />
<Image editor={editor} />
<Iframe editor={editor} />

View File

@ -1,11 +1,13 @@
import { useCallback, useRef } from 'react';
import { Button, Form, Dropdown } from '@douyinfe/semi-ui';
import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
import { number } from 'lib0';
type ISize = { width: number; height: number };
export const Size: React.FC<{ width: number; height: number; onOk: (arg: ISize) => void }> = ({
export const Size: React.FC<{ width: number; maxWidth?: number; height: number; onOk: (arg: ISize) => void }> = ({
width,
maxWidth,
height,
onOk,
children,
@ -27,7 +29,7 @@ export const Size: React.FC<{ width: number; height: number; onOk: (arg: ISize)
render={
<div style={{ padding: '0 12px 12px' }}>
<Form initValues={{ width, height }} getFormApi={(formApi) => ($form.current = formApi)} labelPosition="left">
<Form.InputNumber autofocus label="宽" field="width" />
<Form.InputNumber autofocus label="宽" field="width" {...(maxWidth ? { max: maxWidth } : {})} />
<Form.InputNumber label="高" field="height" />
</Form>
<Button size="small" type="primary" theme="solid" htmlType="submit" onClick={handleOk}>

View File

@ -0,0 +1,26 @@
import { useCallback } from 'react';
import { Space, Button } from '@douyinfe/semi-ui';
import { IconDelete } from '@douyinfe/semi-icons';
import { Tooltip } from 'components/tooltip';
import { BubbleMenu } from '../../views/bubble-menu';
import { DocumentChildren } from '../../extensions/document-children';
export const DocumentChildrenBubbleMenu = ({ editor }) => {
const deleteNode = useCallback(() => editor.chain().deleteSelection().run(), [editor]);
return (
<BubbleMenu
className={'bubble-menu'}
editor={editor}
pluginKey="document-children-bubble-menu"
shouldShow={() => editor.isActive(DocumentChildren.name)}
tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
>
<Space>
<Tooltip content="删除节点" hideOnClick>
<Button onClick={deleteNode} icon={<IconDelete />} type="tertiary" theme="borderless" size="small" />
</Tooltip>
</Space>
</BubbleMenu>
);
};

View File

@ -0,0 +1,15 @@
import React from 'react';
import { Editor } from '@tiptap/core';
import { DocumentChildrenBubbleMenu } from './bubble';
export const DocumentChildren: React.FC<{ editor: Editor }> = ({ editor }) => {
if (!editor) {
return null;
}
return (
<>
<DocumentChildrenBubbleMenu editor={editor} />
</>
);
};

View File

@ -60,7 +60,9 @@ export const DocumentReferenceBubbleMenu = ({ editor }) => {
style={{ cursor: 'pointer' }}
main={
<div style={{ display: 'flex', alignItems: 'center' }}>
<IconDocument />
<Text style={{ display: 'flex', alignItems: 'center' }}>
<IconDocument />
</Text>
<Text
ellipsis={{ showTooltip: { opts: { content: item.title, position: 'right' } } }}
style={{ width: 150, paddingLeft: 6 }}

View File

@ -6,10 +6,12 @@ import { BubbleMenu } from '../../views/bubble-menu';
import { Divider } from '../../divider';
import { Image } from '../../extensions/image';
import { Size } from '../_components/size';
import { getEditorContainerDOMSize } from '../../utils/editor';
export const ImageBubbleMenu = ({ editor }) => {
const attrs = editor.getAttributes(Image.name);
const { width: currentWidth, height: currentHeight } = attrs;
const { width: maxWidth } = getEditorContainerDOMSize(editor);
const [width, setWidth] = useState(currentWidth);
const [height, setHeight] = useState(currentHeight);
@ -91,6 +93,7 @@ export const ImageBubbleMenu = ({ editor }) => {
<Size
width={width}
maxWidth={maxWidth}
height={height}
onOk={(size) => {
editor

View File

@ -21,6 +21,7 @@ import { useToggle } from 'hooks/use-toggle';
import { useUser } from 'data/user';
import { createKeysLocalStorageLRUCache } from 'helpers/lru-cache';
import { isTitleActive } from '../../utils/is-active';
import { getEditorContainerDOMSize } from '../../utils/editor';
import { createCountdown } from '../countdown/service';
const insertMenuLRUCache = createKeysLocalStorageLRUCache('TIPTAP_INSERT_MENU', 3);
@ -88,7 +89,10 @@ const COMMANDS = [
{
icon: <IconMind />,
label: '思维导图',
action: (editor) => editor.chain().focus().setMind().run(),
action: (editor) => {
const { width } = getEditorContainerDOMSize(editor);
editor.chain().focus().setMind({ width }).run();
},
},
{
icon: <IconMath />,

View File

@ -1,11 +1,25 @@
import { useCallback } from 'react';
import { Space, Button } from '@douyinfe/semi-ui';
import { IconDelete } from '@douyinfe/semi-icons';
import { IconLineHeight, IconDelete } from '@douyinfe/semi-icons';
import { Tooltip } from 'components/tooltip';
import { BubbleMenu } from '../../views/bubble-menu';
import { Mind } from '../../extensions/mind';
import { Size } from '../_components/size';
import { Divider } from '../../divider';
import { getEditorContainerDOMSize } from '../../utils/editor';
export const MindBubbleMenu = ({ editor }) => {
const attrs = editor.getAttributes(Mind.name);
const { width, height } = attrs;
const { width: maxWidth } = getEditorContainerDOMSize(editor);
const setSize = useCallback(
(size) => {
editor.chain().updateAttributes(Mind.name, size).setNodeSelection(editor.state.selection.from).focus().run();
},
[editor]
);
const deleteNode = useCallback(() => editor.chain().deleteSelection().run(), [editor]);
return (
@ -15,8 +29,15 @@ export const MindBubbleMenu = ({ editor }) => {
pluginKey="mind-bubble-menu"
shouldShow={() => editor.isActive(Mind.name)}
tippyOptions={{ maxWidth: 'calc(100vw - 100px)' }}
matchRenderContainer={(node) => node && node.id === 'js-resizeable-container'}
>
<Space>
<Size width={width} maxWidth={maxWidth} height={height} onOk={setSize}>
<Tooltip content="设置宽高">
<Button icon={<IconLineHeight />} type="tertiary" theme="borderless" size="small" />
</Tooltip>
</Size>
<Divider />
<Tooltip content="删除节点" hideOnClick>
<Button onClick={deleteNode} icon={<IconDelete />} type="tertiary" theme="borderless" size="small" />
</Tooltip>

View File

@ -146,6 +146,7 @@
z-index: 999;
pointer-events: all;
background: white;
color: #333;
outline: none;
opacity: 1;
}

View File

@ -27,12 +27,16 @@
}
}
.node-image,
.node-attachment,
.node-callout,
.node-countdown,
.node-iframe,
.node-image,
.node-katex,
.node-mind,
.node-banner,
.node-countdown {
.node-codeBlock,
.node-documentChildren,
.node-documentReference {
margin-top: 0.75em;
}
@ -53,9 +57,6 @@
.node-codeBlock,
.node-documentChildren,
.node-documentReference {
display: inline-block;
max-width: 100%;
.render-wrapper {
position: relative;
user-select: text;

View File

@ -0,0 +1,15 @@
import { Editor } from '@tiptap/core';
const cache = new Map();
export function getEditorContainerDOMSize(editor: Editor): { width: number } {
if (!cache.has('width')) {
cache.set('width', (editor.options.element as HTMLElement).offsetWidth);
}
if (cache.has('width') && cache.get('width') <= 0) {
cache.set('width', (editor.options.element as HTMLElement).offsetWidth);
}
return { width: cache.get('width') };
}

View File

@ -1,5 +1,4 @@
.wrap {
margin-top: 0.75em;
line-height: 0;
.innerWrap {

View File

@ -1,6 +1,5 @@
.wrap {
position: relative;
margin-top: 0.75em;
.handleWrap {
display: flex;

View File

@ -1,8 +1,8 @@
.wrap {
padding: 12px;
margin-top: 0.75em;
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius);
user-select: none;
.itemWrap {
display: flex;

View File

@ -1,5 +1,4 @@
.wrap {
margin-top: 0.75em;
border-radius: var(--border-radius);
.itemWrap {

View File

@ -3,6 +3,7 @@ import cls from 'classnames';
import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
import { Typography } from '@douyinfe/semi-ui';
import { Resizeable } from 'components/resizeable';
import { getEditorContainerDOMSize } from '../../utils/editor';
import styles from './index.module.scss';
const { Text } = Typography;
@ -10,6 +11,7 @@ const { Text } = Typography;
export const IframeWrapper = ({ editor, node, updateAttributes }) => {
const isEditable = editor.isEditable;
const { url, width, height } = node.attrs;
const { width: maxWidth } = getEditorContainerDOMSize(editor);
const onResize = useCallback((size) => {
updateAttributes({ width: size.width, height: size.height });
@ -39,7 +41,7 @@ export const IframeWrapper = ({ editor, node, updateAttributes }) => {
return (
<NodeViewWrapper>
{isEditable ? (
<Resizeable height={height} width={width} onChangeEnd={onResize}>
<Resizeable width={width || maxWidth} maxWidth={maxWidth} height={height} onChangeEnd={onResize}>
<div style={{ width, height, maxWidth: '100%' }}>{content}</div>
</Resizeable>
) : (

View File

@ -7,6 +7,7 @@ import { Resizeable } from 'components/resizeable';
import { useToggle } from 'hooks/use-toggle';
import { uploadFile } from 'services/file';
import { extractFileExtension, extractFilename, getImageWidthHeight } from '../../utils/file';
import { getEditorContainerDOMSize } from '../../utils/editor';
import styles from './index.module.scss';
const { Text } = Typography;
@ -14,6 +15,7 @@ const { Text } = Typography;
export const ImageWrapper = ({ editor, node, updateAttributes }) => {
const isEditable = editor.isEditable;
const { hasTrigger, error, src, alt, title, width, height, textAlign } = node.attrs;
const { width: maxWidth } = getEditorContainerDOMSize(editor);
const $upload = useRef<HTMLInputElement>();
const [loading, toggleLoading] = useToggle(false);
@ -80,7 +82,13 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
if (isEditable) {
return (
<Resizeable className={cls('render-wrapper')} width={width} height={height} onChangeEnd={onResize}>
<Resizeable
className={cls('render-wrapper')}
width={width || maxWidth}
height={height}
maxWidth={maxWidth}
onChangeEnd={onResize}
>
{img}
</Resizeable>
);

View File

@ -20,7 +20,7 @@
opacity: 0;
}
&.isActive {
&:hover {
.toolbarWrap {
opacity: 1;
}

View File

@ -1,4 +1,4 @@
import { NodeViewWrapper } from '@tiptap/react';
import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
import cls from 'classnames';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Spin, Typography } from '@douyinfe/semi-ui';
@ -6,6 +6,7 @@ import deepEqual from 'deep-equal';
import { Resizeable } from 'components/resizeable';
import { useToggle } from 'hooks/use-toggle';
import { clamp } from '../../utils/clamp';
import { getEditorContainerDOMSize } from '../../utils/editor';
import { Mind } from '../../extensions/mind';
import { loadKityMinder } from './kityminder';
import { Toolbar } from './toolbar';
@ -17,8 +18,9 @@ const { Text } = Typography;
export const MindWrapper = ({ editor, node, updateAttributes }) => {
const $container = useRef();
const $mind = useRef<any>();
const isMindActive = editor.isActive(Mind.name);
const isEditable = editor.isEditable;
const isActive = editor.isActive(Mind.name);
const { width: maxWidth } = getEditorContainerDOMSize(editor);
const { data, template, theme, zoom, width, height } = node.attrs;
const [loading, toggleLoading] = useToggle(true);
const [error, setError] = useState<Error | null>(null);
@ -202,9 +204,9 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
}, [theme]);
return (
<NodeViewWrapper className={cls(styles.wrap, isMindActive && styles.isActive)}>
<NodeViewWrapper className={cls(styles.wrap, isActive && styles.isActive)}>
{isEditable ? (
<Resizeable width={width} height={height} onChangeEnd={onResize}>
<Resizeable width={width} height={height} maxWidth={maxWidth} onChangeEnd={onResize}>
{content}
</Resizeable>
) : (
@ -213,6 +215,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
<div className={styles.toolbarWrap}>
<Toolbar
isEditable={isEditable}
maxHeight={height * 0.8}
template={template}
theme={theme}
zoom={zoom}
@ -223,6 +226,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
setTheme={setTheme}
/>
</div>
<NodeViewContent />
</NodeViewWrapper>
);
};

View File

@ -2,7 +2,6 @@ export const loadKityMinder = async (): Promise<any> => {
if (typeof window !== 'undefined') {
if (window.kityminder) {
if (window.kityminder.Editor) {
console.log('无需重复');
return;
}
}

View File

@ -5,7 +5,7 @@
z-index: 1000;
display: flex;
padding: 4px;
overflow-x: auto;
overflow: auto;
background-color: var(--semi-color-nav-bg);
border: 1px solid var(--semi-color-border);
border-radius: 3px;

View File

@ -11,6 +11,7 @@ const { Text } = Typography;
interface IProps {
isEditable: boolean;
maxHeight: number;
zoom: number | string;
template: string;
theme: string;
@ -23,6 +24,7 @@ interface IProps {
export const Toolbar: React.FC<IProps> = ({
isEditable,
maxHeight,
template,
theme,
zoom,
@ -33,7 +35,7 @@ export const Toolbar: React.FC<IProps> = ({
setTheme,
}) => {
return (
<div className={styles.wrap}>
<div className={styles.wrap} style={{ maxHeight }}>
{isEditable ? (
<>
<Tooltip content="缩小" position="right">

View File

@ -89,6 +89,7 @@ importers:
copy-to-clipboard: ^3.3.1
deep-equal: ^2.0.5
dompurify: ^2.3.5
interactjs: ^1.10.11
katex: ^0.15.2
kity: ^2.0.4
lib0: ^0.2.47
@ -104,7 +105,6 @@ importers:
prosemirror-tables: ^1.1.1
prosemirror-utils: ^0.9.6
prosemirror-view: ^1.23.6
re-resizable: ^6.9.9
react: 17.0.2
react-countdown: ^2.3.2
react-dom: 17.0.2
@ -172,6 +172,7 @@ importers:
copy-to-clipboard: 3.3.1
deep-equal: 2.0.5
dompurify: 2.3.5
interactjs: 1.10.11
katex: 0.15.2
kity: 2.0.4
lib0: 0.2.47
@ -187,7 +188,6 @@ importers:
prosemirror-tables: 1.1.1
prosemirror-utils: 0.9.6_prosemirror-tables@1.1.1
prosemirror-view: 1.23.6
re-resizable: 6.9.9_react-dom@17.0.2+react@17.0.2
react: 17.0.2
react-countdown: 2.3.2_react-dom@17.0.2+react@17.0.2
react-dom: 17.0.2_react@17.0.2
@ -955,6 +955,10 @@ packages:
- y-protocols
dev: false
/@interactjs/types/1.10.11:
resolution: {integrity: sha512-YRsVFWjL8Gkkvlx3qnjeaxW4fnibSJ9791g8BA7Pv5ANByI64WmtR1vU7A2rXcrOn8XvyCEfY0ss1s8NhZP+MA==}
dev: false
/@ioredis/commands/1.1.1:
resolution: {integrity: sha512-fsR4P/ROllzf/7lXYyElUJCheWdTJVJvOTps8v9IWKFATxR61ANOlnoPqhH099xYLrJGpc2ZQ28B3rMeUt5VQg==}
dev: false
@ -4464,6 +4468,12 @@ packages:
through: 2.3.8
dev: true
/interactjs/1.10.11:
resolution: {integrity: sha512-VPUWsGAOPmrZe1YF7Fq/4AIBBZ+3FikZRS8bpzT6VsAfUuhxl/CKJY73IAiZHd3fz9p174CXErn0Qs81XEFICA==}
dependencies:
'@interactjs/types': 1.10.11
dev: false
/internal-slot/1.0.3:
resolution: {integrity: sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==}
engines: {node: '>= 0.4'}
@ -6697,16 +6707,6 @@ packages:
unpipe: 1.0.0
dev: false
/re-resizable/6.9.9_react-dom@17.0.2+react@17.0.2:
resolution: {integrity: sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==}
peerDependencies:
react: ^16.13.1 || ^17.0.0 || ^18.0.0
react-dom: ^16.13.1 || ^17.0.0 || ^18.0.0
dependencies:
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
dev: false
/react-countdown/2.3.2_react-dom@17.0.2+react@17.0.2:
resolution: {integrity: sha512-Q4SADotHtgOxNWhDdvgupmKVL0pMB9DvoFcxv5AzjsxVhzOVxnttMbAywgqeOdruwEAmnPhOhNv/awAgkwru2w==}
peerDependencies: