haiwen · shuntian · Nov 21, 2024 · Nov 21, 2024
diff --git a/src/containers/outline/index.js b/src/containers/outline/index.js
@@ -68,7 +68,7 @@ const Outline = ({ editor }) => {
     scrollRef.current.addEventListener('scroll', updateScrollLeft);
 
     return () => {
-      scrollRef.current.removeEventListener('scroll', updateScrollLeft);
+      scrollRef.current?.removeEventListener('scroll', updateScrollLeft);
     };
   }, [scrollRef]);
 

diff --git a/src/editors/slate-editor/index.js b/src/editors/slate-editor/index.js
@@ -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);
@@ -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;
@@ -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 />

diff --git a/src/editors/slate-editor/style.css b/src/editors/slate-editor/style.css
@@ -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 {
@@ -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 {
@@ -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;
 }
@@ -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;
@@ -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;
 }
diff --git a/src/editors/slate-viewer/index.js b/src/editors/slate-viewer/index.js
@@ -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';
 
@@ -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();
   }, []);
@@ -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>
   );
 }
diff --git a/src/editors/slate-viewer/style.css b/src/editors/slate-viewer/style.css
@@ -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;
@@ -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;
 }
@@ -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 {
@@ -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;
+}
diff --git a/src/hooks/use-container-style.js b/src/hooks/use-container-style.js
@@ -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;