Merge pull request #160 from fantasticit/pr159

packages/client/src/components/document/actions/index.tsx

@@ -79,7 +79,7 @@ export const DocumentActions: React.FC<IProps> = ({
         visible={popoverVisible}
         onVisibleChange={wrapOnVisibleChange}
         content={
-          <Dropdown.Menu>
+          <Dropdown.Menu style={{ width: 112 }}>
             {showCreateDocument && (
               <Dropdown.Item onClick={create}>
                 <Text>

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', 'doc'].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/components/document/version/index.tsx

@@ -33,6 +33,11 @@ export const DocumentVersion: React.FC<Partial<IProps>> = ({ documentId, onSelec
 
   const editor = useEditor({
     editable: false,
+    editorProps: {
+      attributes: {
+        class: 'is-editable',
+      },
+    },
     extensions: CollaborationKit,
     content: { type: 'doc', content: [] },
   });

packages/client/src/tiptap/core/extensions/dragable.ts

@@ -145,10 +145,10 @@ export const Dragable = Extension.create({
               }
 
               const result = selectRootNodeByDom(dom, view);
-              activeNode = result;
 
               if (
                 !result ||
+                result.node.type.name === 'doc' ||
                 result.node.type.name === 'title' ||
                 result.node.type.name === 'tableOfContents' ||
                 // empty paragraph
@@ -159,6 +159,8 @@ export const Dragable = Extension.create({
                 return false;
               }
 
+              activeNode = result;
+
               renderDragHandleDOM(view, result.el);
               return false;
             },

packages/client/src/tiptap/core/styles/title.scss

@@ -9,17 +9,25 @@
 
     &::before {
       position: absolute;
-      top: 0;
       height: 0;
       color: var(--semi-color-text-0);
       pointer-events: none;
       content: attr(data-placeholder);
     }
+  }
 
-    &.is-editable {
-      &::before {
-        color: #aaa;
-      }
+  &.is-withauthor {
+    .node-title::before {
+      bottom: 0;
+      transform: translateY(-4.2em);
+    }
+  }
+
+  &.is-editable {
+    .node-title::before {
+      bottom: 0;
+      color: #aaa;
+      transform: translateY(-1.7em);
     }
   }
 }

packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx

@@ -54,6 +54,9 @@ export const EditorInstance = forwardRef((props: IProps, ref) => {
       editorProps: {
         // @ts-ignore
         taskItemClickable: true,
+        attributes: {
+          class: 'is-withauthor',
+        },
       },
       extensions: [
         ...CollaborationKit,

packages/client/src/tiptap/editor/collaboration/kit.ts

@@ -72,6 +72,8 @@ const DocumentWithTitle = Document.extend({
   content: 'title block+',
 });
 
+export { Document };
+
 export const CollaborationKit = [
   Paragraph,
   Placeholder.configure({