From 242afc277d12708b157937ce5e5c148d705887f5 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sat, 12 Mar 2022 17:52:19 +0800
Subject: [PATCH] fix: fix style

---
 .../client/src/components/document/card/index.tsx    |  9 ++++++++-
 .../client/src/components/document/editor/index.tsx  |  5 +++--
 .../client/src/components/document/reader/index.tsx  |  8 +++++++-
 .../src/components/document/reader/public/index.tsx  |  5 +++--
 .../client/src/components/logo/index.module.scss     |  6 ++++++
 .../client/src/components/template/card/index.tsx    |  9 ++++++++-
 .../client/src/components/template/editor/editor.tsx |  9 +++++++--
 .../src/components/tiptap/extensions/title.tsx       |  6 +++---
 .../src/layouts/router-header/index.module.scss      |  3 ++-
 packages/client/src/styles/prosemirror.scss          | 12 ++++++------
 10 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/packages/client/src/components/document/card/index.tsx b/packages/client/src/components/document/card/index.tsx
index a927d796..0b5ec571 100644
--- a/packages/client/src/components/document/card/index.tsx
+++ b/packages/client/src/components/document/card/index.tsx
@@ -49,7 +49,14 @@ export const DocumentCard: React.FC<{ document: IDocument }> = ({ document }) =>
             </div>
           </header>
           <main>
-            <div style={{ marginBottom: 12 }}>
+            <div
+              style={{
+                marginBottom: 12,
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+                overflow: 'hidden',
+              }}
+            >
               <Text strong>{document.title}</Text>
             </div>
             <div>
diff --git a/packages/client/src/components/document/editor/index.tsx b/packages/client/src/components/document/editor/index.tsx
index b2ab9eb0..aaf628fe 100644
--- a/packages/client/src/components/document/editor/index.tsx
+++ b/packages/client/src/components/document/editor/index.tsx
@@ -14,6 +14,7 @@ import {
 import { IconChevronLeft, IconArticle } from '@douyinfe/semi-icons';
 import { useUser } from 'data/user';
 import { useDocumentDetail } from 'data/document';
+import { useWindowSize } from 'hooks/useWindowSize';
 import { Seo } from 'components/seo';
 import { Theme } from 'components/theme';
 import { DataRender } from 'components/data-render';
@@ -34,7 +35,7 @@ interface IProps {
 
 export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
   if (!documentId) return null;
-
+  const { width: windowWith } = useWindowSize();
   const { width, fontSize } = useDocumentStyle();
   const editorWrapClassNames = useMemo(() => {
     return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth;
@@ -70,7 +71,7 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
           />
         }
         normalContent={() => (
-          <Text ellipsis={{ showTooltip: true }} style={{ width: 120 }}>
+          <Text ellipsis={{ showTooltip: true }} style={{ width: ~~(windowWith / 4) }}>
             {document.title}
           </Text>
         )}
diff --git a/packages/client/src/components/document/reader/index.tsx b/packages/client/src/components/document/reader/index.tsx
index 0c51dece..a6ed5a92 100644
--- a/packages/client/src/components/document/reader/index.tsx
+++ b/packages/client/src/components/document/reader/index.tsx
@@ -21,6 +21,7 @@ import { DocumentCollaboration } from 'components/document/collaboration';
 import { DocumentStyle } from 'components/document/style';
 import { CommentEditor } from 'components/document/comments';
 import { useDocumentStyle } from 'hooks/useDocumentStyle';
+import { useWindowSize } from 'hooks/useWindowSize';
 import { useUser } from 'data/user';
 import { useDocumentDetail } from 'data/document';
 import { DocumentSkeleton } from 'components/tiptap';
@@ -37,6 +38,7 @@ interface IProps {
 
 export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
   if (!documentId) return null;
+  const { width: windowWidth } = useWindowSize();
   const { width, fontSize } = useDocumentStyle();
   const editorWrapClassNames = useMemo(() => {
     return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth;
@@ -73,7 +75,11 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
                 />
               }
               normalContent={() => (
-                <Text strong ellipsis={{ showTooltip: true }} style={{ width: 120 }}>
+                <Text
+                  strong
+                  ellipsis={{ showTooltip: true }}
+                  style={{ width: ~~(windowWidth / 4) }}
+                >
                   {document.title}
                 </Text>
               )}
diff --git a/packages/client/src/components/document/reader/public/index.tsx b/packages/client/src/components/document/reader/public/index.tsx
index d5cd1538..70278fd4 100644
--- a/packages/client/src/components/document/reader/public/index.tsx
+++ b/packages/client/src/components/document/reader/public/index.tsx
@@ -20,6 +20,7 @@ import { DocumentStyle } from 'components/document/style';
 import { User } from 'components/user';
 import { Theme } from 'components/theme';
 import { useDocumentStyle } from 'hooks/useDocumentStyle';
+import { useWindowSize } from 'hooks/useWindowSize';
 import { usePublicDocument } from 'data/document';
 import { DocumentSkeleton } from 'components/tiptap';
 import { DocumentContent } from '../content';
@@ -38,7 +39,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
   if (!documentId) return null;
 
   const { data, loading, error, query } = usePublicDocument(documentId);
-
+  const { width: windowWidth } = useWindowSize();
   const { width, fontSize } = useDocumentStyle();
   const editorWrapClassNames = useMemo(() => {
     return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth;
@@ -105,7 +106,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
               />
             }
             normalContent={() => (
-              <Text strong ellipsis={{ showTooltip: true }} style={{ width: 120 }}>
+              <Text strong ellipsis={{ showTooltip: true }} style={{ width: ~~(windowWidth / 4) }}>
                 {data.title}
               </Text>
             )}
diff --git a/packages/client/src/components/logo/index.module.scss b/packages/client/src/components/logo/index.module.scss
index 7a5129f5..9892f296 100644
--- a/packages/client/src/components/logo/index.module.scss
+++ b/packages/client/src/components/logo/index.module.scss
@@ -14,3 +14,9 @@
     margin-left: 4px;
   }
 }
+
+@media (max-width: 830px) {
+  .wrap {
+    display: none !important;
+  }
+}
diff --git a/packages/client/src/components/template/card/index.tsx b/packages/client/src/components/template/card/index.tsx
index 2b901fd9..a47d949c 100644
--- a/packages/client/src/components/template/card/index.tsx
+++ b/packages/client/src/components/template/card/index.tsx
@@ -72,7 +72,14 @@ export const TemplateCard: React.FC<IProps> = ({
           </div>
         </header>
         <main>
-          <div style={{ marginBottom: 12 }}>
+          <div
+            style={{
+              marginBottom: 12,
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+            }}
+          >
             <Text strong>{template.title}</Text>
           </div>
           <div>
diff --git a/packages/client/src/components/template/editor/editor.tsx b/packages/client/src/components/template/editor/editor.tsx
index dd8c51f0..540e0960 100644
--- a/packages/client/src/components/template/editor/editor.tsx
+++ b/packages/client/src/components/template/editor/editor.tsx
@@ -30,6 +30,7 @@ import { DataRender } from 'components/data-render';
 import { User } from 'components/user';
 import { DocumentStyle } from 'components/document/style';
 import { useDocumentStyle } from 'hooks/useDocumentStyle';
+import { useWindowSize } from 'hooks/useWindowSize';
 import { safeJSONParse } from 'helpers/json';
 import styles from './index.module.scss';
 
@@ -53,7 +54,7 @@ export const Editor: React.FC<IProps> = ({
   deleteTemplate,
 }) => {
   if (!user) return null;
-
+  const { width: windowWidth } = useWindowSize();
   const provider = useMemo(() => {
     return getProvider({
       targetId: data.id,
@@ -116,7 +117,11 @@ export const Editor: React.FC<IProps> = ({
                       style={{ marginRight: 16 }}
                     />
                   </Tooltip>
-                  <Text strong ellipsis={{ showTooltip: true }} style={{ width: 120 }}>
+                  <Text
+                    strong
+                    ellipsis={{ showTooltip: true }}
+                    style={{ width: ~~(windowWidth / 4) }}
+                  >
                     {data.title}
                   </Text>
                 </>
diff --git a/packages/client/src/components/tiptap/extensions/title.tsx b/packages/client/src/components/tiptap/extensions/title.tsx
index 4d915051..366d1b71 100644
--- a/packages/client/src/components/tiptap/extensions/title.tsx
+++ b/packages/client/src/components/tiptap/extensions/title.tsx
@@ -17,18 +17,18 @@ const Title = Node.create({
   parseHTML() {
     return [
       {
-        tag: 'h1[class=title]',
+        tag: 'div[class=title]',
       },
     ];
   },
 
   renderHTML({ HTMLAttributes }) {
-    return ['h1', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
   },
 });
 
 const TitledDocument = Document.extend({
-  content: 'title block+',
+  content: 'title block*',
 });
 
 export { Document, Title, TitledDocument };
diff --git a/packages/client/src/layouts/router-header/index.module.scss b/packages/client/src/layouts/router-header/index.module.scss
index 8ccf5ab2..4b8cd10f 100644
--- a/packages/client/src/layouts/router-header/index.module.scss
+++ b/packages/client/src/layouts/router-header/index.module.scss
@@ -20,12 +20,13 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding: 4px 16px;
+    padding: 8px 16px;
 
     .leftWrap {
       display: flex;
       align-items: center;
       color: var(--semi-color-primary);
+      padding-left: 8px;
 
       svg {
         fill: var(--semi-color-primary);
diff --git a/packages/client/src/styles/prosemirror.scss b/packages/client/src/styles/prosemirror.scss
index 39b1aad4..91349664 100644
--- a/packages/client/src/styles/prosemirror.scss
+++ b/packages/client/src/styles/prosemirror.scss
@@ -103,32 +103,32 @@
 
   h1 {
     font-size: 1.87em;
-    margin: 26px 0 14px 0;
+    margin: 26px 0 12px 0;
   }
 
   h2 {
     font-size: 1.6em;
-    margin: 21px 0 14px 0;
+    margin: 21px 0 12px 0;
   }
 
   h3 {
     font-size: 1.3em;
-    margin: 16px 0 14px 0;
+    margin: 16px 0 12px 0;
   }
 
   h4 {
     font-size: 1.1em;
-    margin: 14px 0 14px 0;
+    margin: 14px 0 12px 0;
   }
 
   h5 {
     font-size: 1em;
-    margin: 5px 0 14px 0;
+    margin: 5px 0 12px 0;
   }
 
   h6 {
     font-size: 1em;
-    margin: 0 0 14px 0;
+    margin: 0 0 12px 0;
   }
 
   h1:first-child,