From a29baf7e2a7851f1e14fcb55f0a02f0c70a15b6b Mon Sep 17 00:00:00 2001 From: fantasticit Date: Mon, 15 Aug 2022 11:06:24 +0800 Subject: [PATCH 1/4] client: fix style in fullscreen --- .../document/fullscreen/index.module.scss | 31 ++++++++++++++----- .../components/document/fullscreen/index.tsx | 27 +++++++++++----- .../client/src/tiptap/core/styles/title.scss | 4 ++- .../src/tiptap/editor/collaboration/kit.ts | 3 ++ 4 files changed, 48 insertions(+), 17 deletions(-) diff --git a/packages/client/src/components/document/fullscreen/index.module.scss b/packages/client/src/components/document/fullscreen/index.module.scss index 7ff86b11..feb4571f 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 c14eb2df..ecd31037 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 59860d96..b00b51ef 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 0d2ff3a3..3cce7185 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({ From 1f2b4819d80e80d87cb88f0fce4f77d4ee33b445 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Mon, 15 Aug 2022 11:07:41 +0800 Subject: [PATCH 2/4] client: add menu width --- packages/client/src/components/document/actions/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/document/actions/index.tsx b/packages/client/src/components/document/actions/index.tsx index f3cf0b9d..a103fcdb 100644 --- a/packages/client/src/components/document/actions/index.tsx +++ b/packages/client/src/components/document/actions/index.tsx @@ -79,7 +79,7 @@ export const DocumentActions: React.FC = ({ visible={popoverVisible} onVisibleChange={wrapOnVisibleChange} content={ - + {showCreateDocument && ( From dbf87fec6883143bd164d8d05a0d0a725f42537a Mon Sep 17 00:00:00 2001 From: fantasticit Date: Mon, 15 Aug 2022 11:08:22 +0800 Subject: [PATCH 3/4] tiptap: hide drag handler in topNode --- packages/client/src/tiptap/core/extensions/dragable.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/client/src/tiptap/core/extensions/dragable.ts b/packages/client/src/tiptap/core/extensions/dragable.ts index 22789607..e418483c 100644 --- a/packages/client/src/tiptap/core/extensions/dragable.ts +++ b/packages/client/src/tiptap/core/extensions/dragable.ts @@ -145,10 +145,11 @@ export const Dragable = Extension.create({ } const result = selectRootNodeByDom(dom, view); - activeNode = result; if ( !result || + result.node.type.name === 'doc' || + result.node.type.name === 'documentWithTitle' || result.node.type.name === 'title' || result.node.type.name === 'tableOfContents' || // empty paragraph @@ -159,6 +160,8 @@ export const Dragable = Extension.create({ return false; } + activeNode = result; + renderDragHandleDOM(view, result.el); return false; }, From 59e0c15c5faba9004d0a441916a00ae60c73805e Mon Sep 17 00:00:00 2001 From: fantasticit Date: Mon, 15 Aug 2022 11:29:55 +0800 Subject: [PATCH 4/4] client: fix title style, fix doc extension --- .../components/document/fullscreen/index.tsx | 2 +- .../src/components/document/version/index.tsx | 5 +++++ .../src/tiptap/core/extensions/dragable.ts | 1 - .../client/src/tiptap/core/styles/title.scss | 18 ++++++++++++------ .../collaboration/collaboration/editor.tsx | 3 +++ .../src/tiptap/editor/collaboration/kit.ts | 1 - 6 files changed, 21 insertions(+), 9 deletions(-) diff --git a/packages/client/src/components/document/fullscreen/index.tsx b/packages/client/src/components/document/fullscreen/index.tsx index ecd31037..cd67f0d0 100644 --- a/packages/client/src/components/document/fullscreen/index.tsx +++ b/packages/client/src/components/document/fullscreen/index.tsx @@ -58,7 +58,7 @@ export const DocumentFullscreen: React.FC = ({ data }) => { const editor = useEditor({ editable: false, - extensions: CollaborationKit.filter((ext) => ['title', 'documentWithTitle'].indexOf(ext.name) < 0).concat(Document), + extensions: CollaborationKit.filter((ext) => ['title', 'doc'].indexOf(ext.name) < 0).concat(Document), content: { type: 'doc', content: [] }, }); diff --git a/packages/client/src/components/document/version/index.tsx b/packages/client/src/components/document/version/index.tsx index fe0819aa..738f0154 100644 --- a/packages/client/src/components/document/version/index.tsx +++ b/packages/client/src/components/document/version/index.tsx @@ -33,6 +33,11 @@ export const DocumentVersion: React.FC> = ({ documentId, onSelec const editor = useEditor({ editable: false, + editorProps: { + attributes: { + class: 'is-editable', + }, + }, extensions: CollaborationKit, content: { type: 'doc', content: [] }, }); diff --git a/packages/client/src/tiptap/core/extensions/dragable.ts b/packages/client/src/tiptap/core/extensions/dragable.ts index e418483c..12cb815b 100644 --- a/packages/client/src/tiptap/core/extensions/dragable.ts +++ b/packages/client/src/tiptap/core/extensions/dragable.ts @@ -149,7 +149,6 @@ export const Dragable = Extension.create({ if ( !result || result.node.type.name === 'doc' || - result.node.type.name === 'documentWithTitle' || result.node.type.name === 'title' || result.node.type.name === 'tableOfContents' || // empty paragraph diff --git a/packages/client/src/tiptap/core/styles/title.scss b/packages/client/src/tiptap/core/styles/title.scss index b00b51ef..71f269d9 100644 --- a/packages/client/src/tiptap/core/styles/title.scss +++ b/packages/client/src/tiptap/core/styles/title.scss @@ -9,19 +9,25 @@ &::before { position: absolute; - bottom: 0; height: 0; color: var(--semi-color-text-0); pointer-events: none; content: attr(data-placeholder); + } + } + + &.is-withauthor { + .node-title::before { + bottom: 0; transform: translateY(-4.2em); } + } - &.is-editable { - &::before { - color: #aaa; - transform: translateY(-1.7em); - } + &.is-editable { + .node-title::before { + bottom: 0; + color: #aaa; + transform: translateY(-1.7em); } } } diff --git a/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx b/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx index bfb596ca..5b956ca1 100644 --- a/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx +++ b/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, diff --git a/packages/client/src/tiptap/editor/collaboration/kit.ts b/packages/client/src/tiptap/editor/collaboration/kit.ts index 3cce7185..54b9ae3b 100644 --- a/packages/client/src/tiptap/editor/collaboration/kit.ts +++ b/packages/client/src/tiptap/editor/collaboration/kit.ts @@ -69,7 +69,6 @@ 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+', });