From b58f9449e0fdab478be2529154193d8bc29720ba Mon Sep 17 00:00:00 2001 From: fantasticit Date: Mon, 21 Mar 2022 17:54:54 +0800 Subject: [PATCH] feat: improve tiptap --- packages/client/package.json | 1 + .../src/components/icons/IconHeading1.tsx | 14 ++ .../src/components/icons/IconHeading2.tsx | 14 ++ .../src/components/icons/IconHeading3.tsx | 14 ++ .../client/src/components/icons/index.tsx | 3 + .../components/attachment/index.module.scss | 4 + .../tiptap/components/attachment/index.tsx | 26 ++- .../components/documentReference/index.tsx | 27 ++- .../tiptap/components/image/index.module.scss | 4 + .../tiptap/components/image/index.tsx | 2 +- .../src/components/tiptap/menus/evokeMenu.tsx | 41 ++-- .../src/components/tiptap/menus/image.tsx | 2 - .../src/components/tiptap/services/file.ts | 12 ++ .../tiptap/services/markdown/helpers.ts | 2 - packages/client/src/styles/globals.scss | 9 + packages/client/src/styles/prosemirror.scss | 56 +----- pnpm-lock.yaml | 187 ++++++++++++++++-- 17 files changed, 298 insertions(+), 120 deletions(-) create mode 100644 packages/client/src/components/icons/IconHeading1.tsx create mode 100644 packages/client/src/components/icons/IconHeading2.tsx create mode 100644 packages/client/src/components/icons/IconHeading3.tsx diff --git a/packages/client/package.json b/packages/client/package.json index 1a0511e8..4d445f72 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 00000000..9282c121 --- /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 00000000..d00d245d --- /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 00000000..c1fcfb82 --- /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 3cba93b4..1d187fc6 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 cf5601f3..977f95be 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 bd3d1442..8d202604 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' ? ( + +