fix: style fullscreen cannot scroll bottom

doreamon-design · Apr 30, 2024 · 178663a · 178663a
1 parent 80ffe8e
commit 178663a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/web/src/components/MemoEditor/Editor/index.tsx b/web/src/components/MemoEditor/Editor/index.tsx
@@ -19,6 +19,7 @@ export interface EditorRefActions {
 
 interface Props {
   className: string;
+  style?: React.CSSProperties;
   initialContent: string;
   placeholder: string;
   tools?: ReactNode;
@@ -27,7 +28,7 @@ interface Props {
 }
 
 const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<EditorRefActions>) {
-  const { className, initialContent, placeholder, onPaste, onContentChange: handleContentChangeCallback } = props;
+  const { className, style, initialContent, placeholder, onPaste, onContentChange: handleContentChangeCallback } = props;
   const editorRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -151,6 +152,7 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
         className,
       )}
       style={{
+        ...style,
         flex: 1,
       }}
     >

diff --git a/web/src/components/MemoEditor/MemoEditorDialog.tsx b/web/src/components/MemoEditor/MemoEditorDialog.tsx
@@ -64,6 +64,9 @@ const MemoEditorDialog: React.FC<Props> = ({ memoId, cacheKey, relationList, des
             // minHeight: '60vh',
             flex: 1,
           }}
+          editorStyle={{
+            maxHeight: !isFullscreen ? 512 : 'calc(100vh - 200px)',
+          }}
           cacheKey={`memo-editor-${cacheKey || memoId}`}
           memoId={memoId}
           relationList={relationList}

diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
@@ -31,6 +31,7 @@ import { MemoEditorContext } from "./types";
 interface Props {
   className?: string;
   style?: React.CSSProperties;
+  editorStyle?: React.CSSProperties;
   editorClassName?: string;
   cacheKey?: string;
   memoId?: number;
@@ -403,7 +404,11 @@ const MemoEditor = (props: Props) => {
         onCompositionStart={handleCompositionStart}
         onCompositionEnd={handleCompositionEnd}
       >
-        <Editor ref={editorRef} {...editorConfig} />
+        <Editor
+          style={props.editorStyle}
+          ref={editorRef}
+          {...editorConfig}
+        />
         <ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />
         <RelationListView relationList={referenceRelations} setRelationList={handleSetRelationList} />
         <div className="relative w-full flex flex-row justify-between items-center pt-2" onFocus={(e) => e.stopPropagation()}>