diff --git a/packages/client/package.json b/packages/client/package.json index 1a0511e..4d445f7 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -78,6 +78,7 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-helmet": "^6.1.0", + "react-select": "^5.2.2", "react-split-pane": "^0.1.92", "scroll-into-view-if-needed": "^2.2.29", "swr": "^1.2.0", diff --git a/packages/client/src/components/icons/IconHeading1.tsx b/packages/client/src/components/icons/IconHeading1.tsx new file mode 100644 index 0000000..9282c12 --- /dev/null +++ b/packages/client/src/components/icons/IconHeading1.tsx @@ -0,0 +1,14 @@ +import { Icon } from '@douyinfe/semi-ui'; + +export const IconHeading1: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => { + return ( + + + + } + /> + ); +}; diff --git a/packages/client/src/components/icons/IconHeading2.tsx b/packages/client/src/components/icons/IconHeading2.tsx new file mode 100644 index 0000000..d00d245 --- /dev/null +++ b/packages/client/src/components/icons/IconHeading2.tsx @@ -0,0 +1,14 @@ +import { Icon } from '@douyinfe/semi-ui'; + +export const IconHeading2: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => { + return ( + + + + } + /> + ); +}; diff --git a/packages/client/src/components/icons/IconHeading3.tsx b/packages/client/src/components/icons/IconHeading3.tsx new file mode 100644 index 0000000..c1fcfb8 --- /dev/null +++ b/packages/client/src/components/icons/IconHeading3.tsx @@ -0,0 +1,14 @@ +import { Icon } from '@douyinfe/semi-ui'; + +export const IconHeading3: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => { + return ( + + + + } + /> + ); +}; diff --git a/packages/client/src/components/icons/index.tsx b/packages/client/src/components/icons/index.tsx index 3cba93b..1d187fc 100644 --- a/packages/client/src/components/icons/index.tsx +++ b/packages/client/src/components/icons/index.tsx @@ -39,3 +39,6 @@ export * from './IconQuote'; export * from './IconHorizontalRule'; export * from './IconOrderedList'; export * from './IconList'; +export * from './IconHeading1'; +export * from './IconHeading2'; +export * from './IconHeading3'; diff --git a/packages/client/src/components/tiptap/components/attachment/index.module.scss b/packages/client/src/components/tiptap/components/attachment/index.module.scss index cf5601f..977f95b 100644 --- a/packages/client/src/components/tiptap/components/attachment/index.module.scss +++ b/packages/client/src/components/tiptap/components/attachment/index.module.scss @@ -6,4 +6,8 @@ padding: 8px 16px; border: 1px solid var(--semi-color-border); border-radius: var(--border-radius); + + &:hover { + border: 1px solid var(--semi-color-link); + } } diff --git a/packages/client/src/components/tiptap/components/attachment/index.tsx b/packages/client/src/components/tiptap/components/attachment/index.tsx index bd3d144..8d20260 100644 --- a/packages/client/src/components/tiptap/components/attachment/index.tsx +++ b/packages/client/src/components/tiptap/components/attachment/index.tsx @@ -1,24 +1,26 @@ import { useEffect, useRef } from 'react'; import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'; -import { Button, Typography, Spin } from '@douyinfe/semi-ui'; -import { IconDownload } from '@douyinfe/semi-icons'; +import { Button, Typography, Spin, Collapsible } from '@douyinfe/semi-ui'; +import { IconDownload, IconPlayCircle } from '@douyinfe/semi-icons'; import { Tooltip } from 'components/tooltip'; import { useToggle } from 'hooks/useToggle'; import { download } from '../../services/download'; import { uploadFile } from 'services/file'; -import { normalizeFileSize, extractFileExtension, extractFilename } from '../../services/file'; +import { normalizeFileSize, extractFileExtension, extractFilename, normalizeFileType } from '../../services/file'; import styles from './index.module.scss'; const { Text } = Typography; -export const AttachmentWrapper = ({ node, updateAttributes }) => { +export const AttachmentWrapper = ({ editor, node, updateAttributes }) => { const $upload = useRef(); + const isEditable = editor.isEditable; const { autoTrigger, fileName, fileSize, fileExt, fileType, url, error } = node.attrs; const [loading, toggleLoading] = useToggle(false); + const [visible, toggleVisible] = useToggle(false); const selectFile = () => { // @ts-ignore - $upload.current.click(); + isEditable && $upload.current.click(); }; const handleFile = async (e) => { @@ -40,6 +42,8 @@ export const AttachmentWrapper = ({ node, updateAttributes }) => { } }; + const type = normalizeFileType(fileType); + useEffect(() => { if (!url && !autoTrigger) { selectFile(); @@ -68,6 +72,11 @@ export const AttachmentWrapper = ({ node, updateAttributes }) => { ({normalizeFileSize(fileSize)}) + {type === 'video' || type === 'audio' ? ( + +