Skip to content

Commit

Permalink
fix code bug (#220)
Browse files Browse the repository at this point in the history
  • Loading branch information
shuntian authored Nov 21, 2024
1 parent 2ddf1dd commit cc5ad44
Show file tree
Hide file tree
Showing 7 changed files with 134 additions and 137 deletions.
2 changes: 1 addition & 1 deletion src/containers/outline/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const Outline = ({ editor }) => {
scrollRef.current.addEventListener('scroll', updateScrollLeft);

return () => {
scrollRef.current.removeEventListener('scroll', updateScrollLeft);
scrollRef.current?.removeEventListener('scroll', updateScrollLeft);
};
}, [scrollRef]);

Expand Down
41 changes: 7 additions & 34 deletions src/editors/slate-editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@ import EditorHelp from './editor-help';
import { focusEditor } from '../../extension/core';
import { ScrollContext } from '../../hooks/use-scroll-context';
import useSeafileUtils from '../../hooks/use-insert-image';
import { isDocumentEmpty, isMac } from '../../utils/common';
import Outline, { getOutlineSetting } from '../../containers/outline';
import { INTERNAL_EVENTS } from '../../constants/event-types';
import { isDocumentEmpty, isMac, isMobile } from '../../utils/common';
import Outline from '../../containers/outline';
import useContainerStyle from '../../hooks/use-container-style';

import './style.css';

const isMacOS = isMac();
export default function SlateEditor({ value, editorApi, onSave, onContentChanged, isSupportFormula, isSupportInsertSeafileImage, children }) {
const scrollRef = useRef(null);
const [slateValue, setSlateValue] = useState(value);
const [containerStyle, setContainerStyle] = useState({});
const { containerStyle } = useContainerStyle(scrollRef);

const scrollRef = useRef(null);
const editor = useMemo(() => withPropsEditor(baseEditor, { editorApi, onSave }), [editorApi, onSave]);
const eventProxy = useMemo(() => {
return new EventProxy(editor);
Expand All @@ -30,33 +30,6 @@ export default function SlateEditor({ value, editorApi, onSave, onContentChanged

const decorate = useHighlight(editor);

// Adjust article container margin-left value according to isShown of the outline and width of window
const handleWindowResize = useCallback(() => {
const rect = scrollRef.current.getBoundingClientRect();
const articleElement = document.querySelector('.article');
const articleRect = articleElement ? articleElement.getBoundingClientRect() : null;
const isOutlineShow = getOutlineSetting();
if (isOutlineShow && articleRect && (rect.width - articleRect.width) / 2 < 280) {
setContainerStyle({ marginLeft: 280 });
} else {
setContainerStyle({});
}
}, []);

useEffect(() => {
handleWindowResize();
window.addEventListener('resize', handleWindowResize);
const eventBus = EventBus.getInstance();
const unsubscribeOutline = eventBus.subscribe(INTERNAL_EVENTS.OUTLINE_STATE_CHANGED, handleWindowResize);
const unsubscribeResizeArticle = eventBus.subscribe(INTERNAL_EVENTS.RESIZE_ARTICLE, handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
unsubscribeOutline();
unsubscribeResizeArticle();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const onChange = useCallback((value) => {
setSlateValue(value);
if (editor.forceNormalize) return;
Expand Down Expand Up @@ -120,14 +93,14 @@ export default function SlateEditor({ value, editorApi, onSave, onContentChanged
}, [editor, focusFirstNode]);

return (
<div className="sf-slate-editor-container">
<div className={`sf-slate-editor-container ${isMobile && 'mobile'}`}>
<Toolbar editor={editor} isRichEditor={true} isSupportFormula={isSupportFormula} isSupportInsertSeafileImage={isSupportInsertSeafileImage} />
<div className="sf-slate-editor-content" onClick={onEditorClick}>
<ScrollContext.Provider value={{ scrollRef }}>
<Slate editor={editor} initialValue={slateValue} onChange={onChange}>
<div ref={scrollRef} className={`sf-slate-scroll-container ${isMacOS ? '' : 'isWin'}`}>
<div className="sf-slate-article-content">
<Outline editor={editor} />
{!isMobile && <Outline editor={editor} />}
<div className="sf-slate-article-container" style={containerStyle}>
<div className="article">
<SetNodeToDecorations />
Expand Down
67 changes: 20 additions & 47 deletions src/editors/slate-editor/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
flex-direction: column;
min-height: 0;
min-width: 0;
position:relative;
position: relative;
}

.sf-slate-editor-container .sf-slate-editor-toolbar {
Expand All @@ -18,6 +18,11 @@
border-bottom: 1px solid #e5e6e8;
position: relative;
z-index: 102;
overflow-x: auto;
}

.sf-slate-editor-container .sf-slate-editor-toolbar::-webkit-scrollbar {
display: none;
}

.sf-slate-editor-container .sf-slate-editor-content {
Expand All @@ -42,7 +47,7 @@
position: relative;
}

.sf-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar{
.sf-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar {
width: 8px;
height: 8px;
}
Expand All @@ -56,7 +61,7 @@
border-radius: 10px;
}

.sf-slate-scroll-container .sf-slate-article-content{
.sf-slate-scroll-container .sf-slate-article-content {
display: flex;
position: absolute;
min-width: 1100px;
Expand Down Expand Up @@ -98,51 +103,19 @@
outline: none;
}

@media (max-width: 991.8px) {
.sf-slate-editor-toolbar {
overflow-x: auto;
padding-right: 40px !important;
justify-content: flex-start !important;
}

.sf-slate-editor-toolbar::-webkit-scrollbar{
display: none;
}

.sf-slate-editor-toolbar .sf-slate-article-info-control,
.sf-slate-editor-toolbar .sf-slate-help-info-control {
right: 0;
padding: 0 20px;
height: 43px;
align-items: center;
background-color: #fcfcfc;
position: fixed;
}

.sf-slate-article-container {
width: 100%;
}

.sf-slate-article-container .article {
margin: 20px !important;
padding: 20px 30px;
}
.sf-slate-editor-container.mobile .sf-slate-scroll-container .sf-slate-article-content {
min-width: 0;
min-height: 0;
}

@media (max-width: 768px) {
.sf-slate-editor-container .sf-slate-article-container {
flex: 1;
position: relative;
max-width: 950px;
min-width: auto;
margin: 0 auto;
padding-top: 0;
padding-bottom: 0;
}
.sf-slate-editor-container.mobile .sf-slate-article-container {
min-width: 0;
padding-top: 0;
padding-bottom: 0;
}

.sf-slate-article-container .article {
margin: 0 !important;
padding: 10px 15px !important;
border: 0 !important;
}
.sf-slate-editor-container.mobile .sf-slate-article-container .article {
margin: 0 !important;
padding: 10px 15px !important;
border: 0 !important;
}
45 changes: 24 additions & 21 deletions src/editors/slate-viewer/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import { Editable, Slate } from 'slate-react';
import Outline from '../../containers/outline';
import { ScrollContext } from '../../hooks/use-scroll-context';
import useLinkClick from '../../hooks/user-link-click';
import { isMac } from '../../utils/common';
import { isMac, isMobile } from '../../utils/common';
import useContainerStyle from '../../hooks/use-container-style';

import './style.css';

Expand All @@ -13,6 +14,8 @@ const isMacOS = isMac();
export default function SlateViewer({ value, isShowOutline, scrollRef: externalScrollRef, onLinkClick }) {

const scrollRef = useRef(null);
const { containerStyle } = useContainerStyle(scrollRef);

const editor = useMemo(() => {
return createSlateEditor();
}, []);
Expand All @@ -34,27 +37,27 @@ export default function SlateViewer({ value, isShowOutline, scrollRef: externalS
}, []);

return (
<Slate editor={editor} initialValue={value}>
<ScrollContext.Provider value={{ scrollRef: containerScrollRef }}>
<div ref={scrollRef} className={`sf-slate-viewer-scroll-container ${isMacOS ? '' : 'isWin'} ${isShowOutline ? 'outline' : ''}`}>
<div className='sf-slate-viewer-article-container'>
<div className='article'>
<SetNodeToDecorations />
<Editable
readOnly={true}
decorate={decorate}
renderElement={renderElement}
renderLeaf={renderLeaf}
/>
<div className={`sf-slate-viewer-container ${isMobile && 'mobile'}`}>
<Slate editor={editor} initialValue={value}>
<ScrollContext.Provider value={{ scrollRef: containerScrollRef }}>
<div ref={scrollRef} className={`sf-slate-viewer-scroll-container ${isMacOS ? '' : 'isWin'} ${isShowOutline ? 'outline' : ''}`}>
<div className="sf-slate-article-content">
{isShowOutline && !isMobile && <Outline editor={editor} />}
<div className='sf-slate-viewer-article-container' style={containerStyle}>
<div className='article'>
<SetNodeToDecorations />
<Editable
readOnly={true}
decorate={decorate}
renderElement={renderElement}
renderLeaf={renderLeaf}
/>
</div>
</div>
</div>
</div>
{isShowOutline && (
<div className='sf-slate-viewer-outline'>
<Outline editor={editor} />
</div>
)}
</div>
</ScrollContext.Provider>
</Slate>
</ScrollContext.Provider>
</Slate>
</div>
);
}
68 changes: 35 additions & 33 deletions src/editors/slate-viewer/style.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
.sf-slate-viewer-container {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
position: relative;
}

.sf-slate-viewer-scroll-container {
flex: 1;
display: flex;
Expand All @@ -8,7 +17,7 @@
padding: 30px 0 15px;
}

.sf-slate-viewer-scroll-container.isWin::-webkit-scrollbar{
.sf-slate-viewer-scroll-container.isWin::-webkit-scrollbar {
width: 8px;
height: 8px;
}
Expand All @@ -22,27 +31,19 @@
border-radius: 10px;
}

.sf-slate-viewer-scroll-container .sf-slate-viewer-article-container {
.sf-slate-viewer-scroll-container .sf-slate-article-content {
flex: 1;
margin: 0 auto 15px;
display: flex;
}

.sf-slate-viewer-scroll-container.outline .sf-slate-viewer-article-container {
margin: 0 340px 15px 40px;
}

.sf-slate-viewer-scroll-container .sf-slate-viewer-outline {
height: 80%;
overflow-y: hidden;
padding-right: 1rem;
position: fixed;
right: 0;
top: 97px;
width: 300px;
}

.sf-slate-viewer-scroll-container .sf-slate-viewer-outline:hover {
overflow-y: auto;
flex: 1;
position: relative;
max-width: 950px;
min-width: 400px;
margin: 0 auto;
width: 794px;
top: 0px;
}

.sf-slate-viewer-scroll-container .article {
Expand All @@ -64,23 +65,24 @@
color: #212529;
}

@media (max-width: 991.98px) {
.sf-slate-viewer-article-container {
padding: 0 10px;
width: 100%;
margin: 0 !important;
}

.sf-slate-viewer-outline {
display: none !important;
}
.sf-slate-viewer-container.mobile .sf-slate-article-content {
min-width: 0;
min-height: 0;
width: 100%;
}

@media (max-width: 768px) {
.sf-slate-viewer-article-container .article {
margin: 0 !important;
padding: 20px !important;
}
.sf-slate-viewer-container.mobile .sf-slate-viewer-article-container {
min-width: 0;
padding-top: 0;
padding-bottom: 0;
}

.sf-slate-viewer-container.mobile .sf-slate-viewer-article-container .article {
margin: 0 !important;
padding: 10px 15px !important;
border: 0 !important;
}

.sf-slate-viewer-container .sf-editor-outline-wrapper {
top: 130px;
}
44 changes: 44 additions & 0 deletions src/hooks/use-container-style.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { useCallback, useEffect, useState } from 'react';
import { getOutlineSetting } from '../containers/outline';
import { isMobile } from '../utils/common';
import EventBus from '../utils/event-bus';
import { INTERNAL_EVENTS } from '../constants/event-types';

const useContainerStyle = (scrollRef) => {

const [containerStyle, setContainerStyle] = useState({});

// Adjust article container margin-left value according to isShown of the outline and width of window
const handleWindowResize = useCallback(() => {
const rect = scrollRef.current.getBoundingClientRect();
const articleElement = document.querySelector('.article');
const articleRect = articleElement ? articleElement.getBoundingClientRect() : null;
const isOutlineShow = getOutlineSetting();
if (isOutlineShow && articleRect && (rect.width - articleRect.width) / 2 < 280) {
setContainerStyle({ marginLeft: 280 });
} else {
setContainerStyle({});
}
}, [scrollRef]);

useEffect(() => {
if (isMobile) return;
handleWindowResize();
window.addEventListener('resize', handleWindowResize);
const eventBus = EventBus.getInstance();
const unsubscribeOutline = eventBus.subscribe(INTERNAL_EVENTS.OUTLINE_STATE_CHANGED, handleWindowResize);
const unsubscribeResizeArticle = eventBus.subscribe(INTERNAL_EVENTS.RESIZE_ARTICLE, handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
unsubscribeOutline();
unsubscribeResizeArticle();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return {
containerStyle
};
};

export default useContainerStyle;
Loading

0 comments on commit cc5ad44

Please sign in to comment.