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({