client: fix style in fullscreen

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;
   }

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 (
     <div className={styles.fullScreenToolbar}>
       <Space>
@@ -53,17 +54,18 @@ export const DocumentFullscreen: React.FC<IProps> = ({ 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<IProps> = ({ 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<IProps> = ({ data }) => {
               </Title>
             </div>
             <div className={styles.content}>
-              <div className={styles.title}>{data.title || '未命名文档'}</div>
+              <div className={styles.title}>
+                {cover && (
+                  <div className={styles.imgCover}>
+                    <img src={cover} alt="背景图" />
+                  </div>
+                )}
+                <p>{data.title || '未命名文档'}</p>
+              </div>
               <EditorContent editor={editor} />
             </div>
             <DrawingCursor isDrawing={isDrawing} />

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);
       }
     }
   }

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