diff --git a/packages/client/src/components/document/fullscreen/index.module.scss b/packages/client/src/components/document/fullscreen/index.module.scss index 7ff86b1..feb4571 100644 --- a/packages/client/src/components/document/fullscreen/index.module.scss +++ b/packages/client/src/components/document/fullscreen/index.module.scss @@ -42,7 +42,7 @@ width: auto; height: 100vh; min-height: 680px; - padding: 0 120px; + padding: 60px 120px 0; margin: 0 auto; overflow: auto; letter-spacing: 0.05em; @@ -50,7 +50,10 @@ transition: width 0.3s linear, padding 0.3s linear; .title { - display: table-cell; + display: flex; + align-items: flex-start; + flex-direction: column; + justify-content: center; height: 100vh; font-size: 4rem; line-height: 4.6rem; @@ -59,6 +62,24 @@ word-wrap: break-word; vertical-align: middle; overflow-wrap: break-word; + + .imgCover { + position: relative; + width: 100%; + height: 62.5%; + margin-bottom: 16px; + overflow: hidden; + + > img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-position: center 50%; + object-fit: cover; + } + } } .node-title.is-empty { @@ -76,15 +97,9 @@ padding: 12px; background-color: rgb(var(--semi-grey-9)); border-radius: var(--semi-border-radius-medium); - opacity: 0; transform: translateX(-50%); transition: opacity 0.3s ease-in-out; - &:hover { - opacity: 1; - transition: opacity 0.3s ease-in-out; - } - .selected { background-color: rgb(var(--semi-grey-8)) !important; } diff --git a/packages/client/src/components/document/fullscreen/index.tsx b/packages/client/src/components/document/fullscreen/index.tsx index c14eb2d..ecd3103 100644 --- a/packages/client/src/components/document/fullscreen/index.tsx +++ b/packages/client/src/components/document/fullscreen/index.tsx @@ -7,9 +7,9 @@ import { IconPencil } from 'components/icons/IconPencil'; import { safeJSONParse } from 'helpers/json'; import { useDrawingCursor } from 'hooks/use-cursor'; import { useToggle } from 'hooks/use-toggle'; -import React, { useCallback, useEffect } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { FullScreen, useFullScreenHandle } from 'react-full-screen'; -import { CollaborationKit } from 'tiptap/editor'; +import { CollaborationKit, Document } from 'tiptap/editor'; import styles from './index.module.scss'; @@ -23,6 +23,7 @@ const FullscreenController = ({ handle: fullscreenHandler, isDrawing, toggleDraw fullscreenHandler.exit(); toggleDrawing(false); }, [fullscreenHandler, toggleDrawing]); + return (
@@ -53,17 +54,18 @@ export const DocumentFullscreen: React.FC = ({ data }) => { const fullscreenHandler = useFullScreenHandle(); const [visible, toggleVisible] = useToggle(false); const [isDrawing, toggleDrawing] = useToggle(false); + const [cover, setCover] = useState(''); const editor = useEditor({ editable: false, - extensions: CollaborationKit, + extensions: CollaborationKit.filter((ext) => ['title', 'documentWithTitle'].indexOf(ext.name) < 0).concat(Document), content: { type: 'doc', content: [] }, }); - const startPowerpoint = () => { + const startPowerpoint = useCallback(() => { toggleVisible(true); fullscreenHandler.enter(); - }; + }, [toggleVisible, fullscreenHandler]); const fullscreenChange = useCallback( (state) => { @@ -76,11 +78,13 @@ export const DocumentFullscreen: React.FC = ({ data }) => { ); useEffect(() => { - if (!editor) return; + if (!editor || !visible) return; const docJSON = safeJSONParse(data.content, { default: {} }).default; + const titleNode = docJSON.content.find((item) => item.type === 'title'); docJSON.content = docJSON.content.filter((item) => item.type !== 'title'); + setCover(titleNode.attrs.cover ?? ''); editor.commands.setContent(docJSON); - }, [editor, data]); + }, [editor, data, visible]); const { Title } = Typography; return ( @@ -109,7 +113,14 @@ export const DocumentFullscreen: React.FC = ({ data }) => {
-
{data.title || '未命名文档'}
+
+ {cover && ( +
+ 背景图 +
+ )} +

{data.title || '未命名文档'}

+
diff --git a/packages/client/src/tiptap/core/styles/title.scss b/packages/client/src/tiptap/core/styles/title.scss index 59860d9..b00b51e 100644 --- a/packages/client/src/tiptap/core/styles/title.scss +++ b/packages/client/src/tiptap/core/styles/title.scss @@ -9,16 +9,18 @@ &::before { position: absolute; - top: 0; + bottom: 0; height: 0; color: var(--semi-color-text-0); pointer-events: none; content: attr(data-placeholder); + transform: translateY(-4.2em); } &.is-editable { &::before { color: #aaa; + transform: translateY(-1.7em); } } } diff --git a/packages/client/src/tiptap/editor/collaboration/kit.ts b/packages/client/src/tiptap/editor/collaboration/kit.ts index 0d2ff3a..3cce718 100644 --- a/packages/client/src/tiptap/editor/collaboration/kit.ts +++ b/packages/client/src/tiptap/editor/collaboration/kit.ts @@ -69,9 +69,12 @@ import { markdownToProsemirror } from 'tiptap/markdown/markdown-to-prosemirror'; import { prosemirrorToMarkdown } from 'tiptap/markdown/prosemirror-to-markdown'; const DocumentWithTitle = Document.extend({ + name: 'documentWithTitle', content: 'title block+', }); +export { Document }; + export const CollaborationKit = [ Paragraph, Placeholder.configure({