Merge branch 'dev/7.0.x' into feat/132680-create-edit-button-handler

apps/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -266,7 +266,6 @@ PageItemControlDropdownMenu.displayName = 'PageItemControl';
 
 type PageItemControlSubstanceProps = CommonProps & {
   pageId: string,
-  fetchOnInit?: boolean,
   children?: React.ReactNode,
   operationProcessData?: IPageOperationProcessData,
 }
@@ -274,12 +273,12 @@ type PageItemControlSubstanceProps = CommonProps & {
 export const PageItemControlSubstance = (props: PageItemControlSubstanceProps): JSX.Element => {
 
   const {
-    pageId, pageInfo: presetPageInfo, fetchOnInit, children, onClickBookmarkMenuItem, onClickRenameMenuItem,
+    pageId, pageInfo: presetPageInfo, children, onClickBookmarkMenuItem, onClickRenameMenuItem,
     onClickDuplicateMenuItem, onClickDeleteMenuItem, onClickPathRecoveryMenuItem,
   } = props;
 
   const [isOpen, setIsOpen] = useState(false);
-  const [shouldFetch, setShouldFetch] = useState(fetchOnInit ?? false);
+  const [shouldFetch, setShouldFetch] = useState(false);
 
   const { data: fetchedPageInfo, mutate: mutatePageInfo } = useSWRxPageInfo(shouldFetch ? pageId : null);
 
@@ -336,10 +335,10 @@ export const PageItemControlSubstance = (props: PageItemControlSubstanceProps):
 
   return (
     <NotAvailableForGuest>
-      <Dropdown isOpen={isOpen} toggle={() => setIsOpen(!isOpen)} data-testid="open-page-item-control-btn">
+      <Dropdown isOpen={isOpen} toggle={() => setIsOpen(!isOpen)} className="grw-page-item-control" data-testid="open-page-item-control-btn">
         { children ?? (
           <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control d-flex align-items-center justify-content-center">
-            <i className="icon-options"></i>
+            <span className="material-symbols-outlined">more_vert</span>
           </DropdownToggle>
         ) }
 
@@ -377,19 +376,3 @@ export const PageItemControl = (props: PageItemControlProps): JSX.Element => {
 
   return <PageItemControlSubstance pageId={pageId} {...props} />;
 };
-
-
-type AsyncPageItemControlProps = Omit<CommonProps, 'pageInfo'> & {
-  pageId?: string,
-  children?: React.ReactNode,
-}
-
-export const AsyncPageItemControl = (props: AsyncPageItemControlProps): JSX.Element => {
-  const { pageId } = props;
-
-  if (pageId == null) {
-    return <></>;
-  }
-
-  return <PageItemControlSubstance pageId={pageId} fetchOnInit {...props} />;
-};

apps/app/src/components/Navbar/GrowiContextualSubNavigation.module.scss

@@ -1,4 +1,13 @@
+@use '~/styles/mixins';
+
 .grw-contextual-sub-navigation :global {
   background-color: rgba(var(--bs-body-bg-rgb), 0.7);
   backdrop-filter: blur(35px);
 }
+
+@include mixins.editing() {
+  .grw-contextual-sub-navigation {
+    position: fixed;
+    right: 0;
+  }
+}

apps/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -335,7 +335,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
   return (
     <>
       <div
-        className={`grw-contextual-sub-navigation ${styles['grw-contextual-sub-navigation']}
+        className={`${styles['grw-contextual-sub-navigation']}
           d-flex align-items-center justify-content-end px-2 py-1 gap-2 gap-md-4
         `}
         data-testid="grw-contextual-sub-nav"

apps/app/src/components/Navbar/PageEditorModeManager.module.scss

@@ -7,9 +7,11 @@
     --bs-btn-font-size: 13px;
     --bs-btn-border-width: 2px;
 
-    width: 90px;
-    @include bs.media-breakpoint-up(md) {
-      width: 70px;
+    width: 70px;
+    height: 30px;
+    @include bs.media-breakpoint-down(sm) {
+      width: 90px;
+      height: 38px;
     }
 
     @include mixins.border-vertical('before', 70%, 1, true);
@@ -18,10 +20,11 @@
 
 .grw-page-editor-mode-manager-skeleton :global {
   width: 179px;
+  height: 30px;
   @include bs.media-breakpoint-down(sm) {
     width: 90px;
+    height: 38px;
   }
-  height: 30px;
 }
 
 // == Colors

apps/app/src/components/Navbar/PageEditorModeManager.tsx

@@ -10,17 +10,16 @@ import styles from './PageEditorModeManager.module.scss';
 type PageEditorModeButtonProps = {
   currentEditorMode: EditorMode,
   editorMode: EditorMode,
-  icon: ReactNode,
-  label: ReactNode,
+  children?: ReactNode,
   isBtnDisabled?: boolean,
   onClick?: (mode: EditorMode) => void,
 }
 const PageEditorModeButton = React.memo((props: PageEditorModeButtonProps) => {
   const {
-    currentEditorMode, isBtnDisabled, editorMode, icon, label, onClick,
+    currentEditorMode, isBtnDisabled, editorMode, children, onClick,
   } = props;
 
-  const classNames = ['btn btn-outline-primary px-1'];
+  const classNames = ['btn btn-outline-primary py-1 px-2 d-flex align-items-center justify-content-center'];
   if (currentEditorMode === editorMode) {
     classNames.push('active');
   }
@@ -35,8 +34,7 @@ const PageEditorModeButton = React.memo((props: PageEditorModeButtonProps) => {
       onClick={() => onClick?.(editorMode)}
       data-testid={`${editorMode}-button`}
     >
-      <span className="me-1">{icon}</span>
-      <span>{label}</span>
+      {children}
     </button>
   );
 });
@@ -79,9 +77,9 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
             editorMode={EditorMode.View}
             isBtnDisabled={isBtnDisabled}
             onClick={pageEditorModeButtonClickedHandler}
-            icon={<i className="icon-control-play" />}
-            label={t('view')}
-          />
+          >
+            <span className="material-symbols-outlined fs-4">play_arrow</span>{t('View')}
+          </PageEditorModeButton>
         )}
         {(!isDeviceSmallerThanMd || editorMode === EditorMode.View) && (
           <PageEditorModeButton
@@ -89,9 +87,9 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
             editorMode={EditorMode.Editor}
             isBtnDisabled={isBtnDisabled}
             onClick={pageEditorModeButtonClickedHandler}
-            icon={<i className="icon-note" />}
-            label={t('Edit')}
-          />
+          >
+            <span className="material-symbols-outlined me-1 fs-5">edit_square</span>{t('Edit')}
+          </PageEditorModeButton>
         )}
       </div>
     </>

apps/app/src/components/Page/DisplaySwitcher.tsx

@@ -12,7 +12,6 @@ import { LazyRenderer } from '../Common/LazyRenderer';
 
 
 const PageEditor = dynamic(() => import('../PageEditor'), { ssr: false });
-const EditorNavbarBottom = dynamic(() => import('../PageEditor/EditorNavbarBottom'), { ssr: false });
 
 
 type Props = {
@@ -37,8 +36,6 @@ export const DisplaySwitcher = (props: Props): JSX.Element => {
       <LazyRenderer shouldRender={isEditable === true && editorMode === EditorMode.Editor}>
         <PageEditor />
       </LazyRenderer>
-
-      { isEditable && !isViewMode && <EditorNavbarBottom /> }
     </>
   );
 };

apps/app/src/components/PageControls/BookmarkButtons.module.scss

@@ -1,17 +1,24 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+@use './button-styles';
+
 .btn-group-bookmark :global {
   .btn-bookmark {
-    box-shadow: none !important;
-
-    @include bs.button-outline-variant(rgba(bs.$secondary, 50%), bs.$orange, rgba(lighten(bs.$orange, 20%), 0.5), rgba(lighten(bs.$orange, 20%), 0.5));
+    @extend %btn-basis;
+  }
+  .dropdown .btn-bookmark {
+    padding-right: 1px;
+  }
+  .total-counts {
+    @extend %btn-total-counts-basis;
+    padding-left: 5px;
+  }
+}
 
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active {
-      color: bs.$orange;
-    }
-    &:not(:disabled):not(.disabled):not(:hover) {
-      background-color: transparent;
-    }
+// == Colors
+.btn-group-bookmark :global {
+  .btn-bookmark {
+    @include button-styles.btn-color(bs.$orange);
   }
 }
+

apps/app/src/components/PageControls/BookmarkButtons.tsx

@@ -73,10 +73,12 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
         <DropdownToggle
           id="bookmark-dropdown-btn"
           color="transparent"
-          className={`shadow-none btn btn-bookmark border-0 rounded-end-0
+          className={`btn btn-bookmark rounded-end-0
           ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
         >
-          <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
+          <span className={`material-symbols-outlined ${isBookmarked ? 'fill' : ''}`}>
+            bookmark
+          </span>
         </DropdownToggle>
       </BookmarkFolderMenu>
       <UncontrolledTooltip placement="top" data-testid="bookmark-button-tooltip" target="bookmark-dropdown-btn" fade={false}>
@@ -86,7 +88,7 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
       <button
         type="button"
         id="po-total-bookmarks"
-        className={`shadow-none btn btn-bookmark border-0
+        className={`btn btn-bookmark
           total-counts ${isBookmarked ? 'active' : ''}`}
       >
         {bookmarkCount}

apps/app/src/components/PageControls/LikeButtons.module.scss

@@ -1,17 +1,23 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+@use './button-styles';
+
 .btn-group-like :global {
   .btn-like {
-    box-shadow: none !important;
-
-    @include bs.button-outline-variant(rgba(bs.$secondary, 50%), lighten(bs.$red, 15%), rgba(lighten(bs.$red, 10%), 0.15), rgba(lighten(bs.$red, 10%), 0.5));
+    @extend %btn-basis;
+  }
+  .btn-like#like-button {
+    padding-right: 3px;
+  }
+  .total-counts {
+    @extend %btn-total-counts-basis;
+    padding-left: 5px;
+  }
+}
 
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active {
-      color: lighten(bs.$red, 15%);
-    }
-    &:not(:disabled):not(.disabled):not(:hover) {
-      background-color: transparent;
-    }
+// == Colors
+.btn-group-like :global {
+  .btn-like {
+    @include button-styles.btn-color(bs.$red);
   }
 }

apps/app/src/components/PageControls/LikeButtons.tsx

@@ -46,10 +46,10 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         type="button"
         id="like-button"
         onClick={onLikeClicked}
-        className={`shadow-none btn btn-like border-0
+        className={`btn btn-like
             ${isLiked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
-        <i className={`fa ${isLiked ? 'fa-heart' : 'fa-heart-o'}`}></i>
+        <span className={`material-symbols-outlined ${isLiked ? 'fill' : ''}`}>favorite</span>
       </button>
 
       <UncontrolledTooltip data-testid="like-button-tooltip" placement="top" target="like-button" autohide={false} fade={false}>
@@ -59,7 +59,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
       <button
         type="button"
         id="po-total-likes"
-        className={`shadow-none btn btn-like border-0
+        className={`btn btn-like
           total-counts ${isLiked ? 'active' : ''}`}
       >
         {sumOfLikers}

apps/app/src/components/PageControls/PageControls.module.scss

@@ -1,30 +1,18 @@
-%page-controls-buttons-height {
-  height: 40px;
-}
-
-.grw-page-controls :global {
-
-  .btn-subscribe {
-    --bs-btn-font-size: 18px;
-    @extend %page-controls-buttons-height;
-  }
-
-  .btn-like,
-  .btn-bookmark,
-  .btn-seen-user {
-    --bs-btn-font-size: 18px;
+@use '@growi/core/scss/bootstrap/init' as bs;
 
-    @extend %page-controls-buttons-height;
-    padding-right: 6px;
-    padding-left: 8px;
-  }
+@use './button-styles';
 
-  .total-counts {
-    font-size: 13px;
+// PageItemControl styles
+.grw-page-controls :global {
+  .btn-page-item-control {
+    @extend %btn-basis;
   }
+}
 
+// == Colors
+// PageItemControl colors
+.grw-page-controls :global {
   .btn-page-item-control {
-    @extend %page-controls-buttons-height;
+    @include button-styles.btn-color(bs.$gray-500);
   }
-
 }

apps/app/src/components/PageControls/SeenUserInfo.module.scss

@@ -1,18 +1,23 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
-@use '~/styles/atoms/mixins/buttons' as mixins-buttons;
+
+@use './button-styles';
 
 .grw-seen-user-info :global {
-  .btn.btn-seen-user {
-    $color-seen-user: #549c79;
+  .btn-seen-user {
+    @extend %btn-basis;
+  }
+  .total-counts {
+    @extend %text-total-counts-basis;
+  }
+}
 
-    @include bs.button-outline-variant($color-seen-user, $color-seen-user, rgba(lighten($color-seen-user, 10%), 0.15), rgba(lighten($color-seen-user, 10%), 0.5));
 
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active {
-      color: $color-seen-user;
-    }
-    &:not(:disabled):not(.disabled):not(:hover) {
-      background-color: transparent;
-    }
+// == Colors
+
+.grw-seen-user-info :global {
+  $color: #549c79;
+
+  .btn-seen-user {
+    @include button-styles.btn-color($color);
   }
 }

apps/app/src/components/PageControls/SeenUserInfo.tsx

@@ -28,10 +28,8 @@ const SeenUserInfo: FC<Props> = (props: Props) => {
 
   return (
     <div className={`grw-seen-user-info ${styles['grw-seen-user-info']}`}>
-      <button type="button" id="btn-seen-user" className="shadow-none btn btn-seen-user border-0">
-        <span className="me-1 footstamp-icon">
-          <FootstampIcon />
-        </span>
+      <button type="button" id="btn-seen-user" className="shadow-none btn btn-seen-user border-0 d-flex align-items-center">
+        <span className="material-symbols-outlined me-1">footprint</span>
         <span className="total-counts">{sumOfSeenUsers || seenUsers.length}</span>
       </button>
       <Popover placement="bottom" isOpen={isPopoverOpen} target="btn-seen-user" toggle={togglePopover} trigger="legacy" disabled={disabled}>

apps/app/src/components/PageControls/SubscribeButton.module.scss

@@ -1,14 +1,16 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
-.btn-subscribe {
-  &:global {
-    @include bs.button-outline-variant(rgba(bs.$secondary, 50%), bs.$success, rgba(lighten(bs.$success, 10%), 0.15), rgba(lighten(bs.$success, 10%), 0.5));
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active {
-      color: lighten(bs.$success, 15%);
-    }
-    &:not(:disabled):not(.disabled):not(:hover) {
-      background-color: transparent;
-    }
+@use './button-styles';
+
+.btn-subscribe :global {
+  @extend %btn-basis;
+
+  .total-counts {
+    @extend %btn-total-counts-basis;
   }
 }
+
+// == Colors
+.btn-subscribe {
+  @include button-styles.btn-color(bs.$success);
+}

apps/app/src/components/PageControls/SubscribeButton.tsx

@@ -36,7 +36,9 @@ const SubscribeButton: FC<Props> = (props: Props) => {
         className={`shadow-none btn btn-subscribe ${styles['btn-subscribe']} border-0
           ${isSubscribing ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
-        <i className={`fa ${isSubscribing ? 'fa-bell' : 'fa-bell-slash-o'}`}></i>
+        <span className={`material-symbols-outlined ${isSubscribing ? 'fill' : ''}`}>
+          {isSubscribing ? 'notifications' : 'notifications_off'}
+        </span>
       </button>
 
       <UncontrolledTooltip data-testid="subscribe-button-tooltip" placement="top" target="subscribe-button" fade={false}>

apps/app/src/components/PageControls/_button-styles.scss

@@ -0,0 +1,34 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+%btn-basis {
+  --bs-btn-padding-x: 6px;
+  --bs-btn-padding-y: 8px;
+  --bs-btn-line-height: 1em;
+  --bs-btn-border-width: 0;
+  --bs-btn-box-shadow: none;
+}
+
+%btn-total-counts-basis {
+  --bs-btn-font-size: 13px;
+}
+
+%text-total-counts-basis {
+  font-size: 13px;
+}
+
+@mixin btn-color($color) {
+  $color-rgb: #{bs.to-rgb($color)};
+
+  --bs-btn-color: var(--bs-tertiary-color);
+  --bs-btn-bg: transparent;
+
+  --bs-btn-hover-color: #{$color};
+  --bs-btn-hover-bg: rgba(#{$color-rgb}, 0.2);
+
+  --bs-btn-active-color: #{$color};
+  --bs-btn-active-bg: transparent;
+
+  &:hover {
+    --bs-btn-active-bg: rgba(#{$color-rgb}, 0.2);
+  }
+}

apps/app/src/components/PageEditor/EditorNavbarBottom.module.scss

@@ -0,0 +1,42 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+@use '~/styles/variables' as var;
+@use '~/styles/mixins';
+
+@include mixins.editing() {
+  .grw-editor-navbar-bottom :global {
+    height: var.$grw-editor-navbar-bottom-height;
+
+    .grw-grant-selector {
+      @include bs.media-breakpoint-down(sm) {
+        .btn .label {
+          display: none;
+        }
+      }
+      @include bs.media-breakpoint-up(md) {
+        .dropdown-toggle {
+          min-width: 100px;
+
+          // caret
+          &::after {
+            margin-left: 1em;
+          }
+        }
+      }
+    }
+
+    .btn-submit {
+      width: 100px;
+    }
+
+    .btn-expand {
+      // rotate icon
+      i {
+        display: inline-block;
+        transition: transform 200ms;
+      }
+      &.expand i {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+}

apps/app/src/components/PageEditor/EditorNavbarBottom.tsx

@@ -13,6 +13,11 @@ import {
 } from '~/stores/ui';
 
 
+import styles from './EditorNavbarBottom.module.scss';
+
+const moduleClass = styles['grw-editor-navbar-bottom'];
+
+
 const SavePageControls = dynamic<SavePageControlsProps>(() => import('~/components/SavePageControls').then(mod => mod.SavePageControls), { ssr: false });
 const SlackLogo = dynamic(() => import('~/components/SlackLogo').then(mod => mod.SlackLogo), { ssr: false });
 const SlackNotification = dynamic(() => import('~/components/SlackNotification').then(mod => mod.SlackNotification), { ssr: false });
@@ -32,7 +37,6 @@ const EditorNavbarBottom = (): JSX.Element => {
   const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
 
   const { data: isSlackEnabled, mutate: mutateIsSlackEnabled } = useIsSlackEnabled();
-  const additionalClasses = ['grw-editor-navbar-bottom'];
 
   const [slackChannelsStr, setSlackChannelsStr] = useState<string>('');
 
@@ -83,7 +87,7 @@ const EditorNavbarBottom = (): JSX.Element => {
       {/* Collapsed SlackNotification */}
       {isSlackConfigured && (
         <Collapse isOpen={isSlackExpanded && isDeviceSmallerThanMd === true}>
-          <nav className={`navbar navbar-expand-lg border-top ${additionalClasses.join(' ')}`}>
+          <nav className={`navbar navbar-expand-lg border-top ${moduleClass}`}>
             {isSlackEnabled != null
             && (
               <SlackNotification
@@ -99,7 +103,7 @@ const EditorNavbarBottom = (): JSX.Element => {
         </Collapse>
       )
       }
-      <div className={`flex-expand-horiz align-items-center border-top px-2 px-md-3 ${additionalClasses.join(' ')}`}>
+      <div className={`flex-expand-horiz align-items-center border-top px-2 px-md-3 ${moduleClass}`}>
         <form>
           { isDeviceSmallerThanMd && renderDrawerButton() }
           { !isDeviceSmallerThanMd && <OptionsSelector /> }
@@ -139,7 +143,7 @@ const EditorNavbarBottom = (): JSX.Element => {
       { isCollapsedOptionsSelectorEnabled && (
         <Collapse isOpen={isExpanded}>
           <div className="px-2"> {/* set padding for border-top */}
-            <div className={`navbar navbar-expand border-top px-0 ${additionalClasses.join(' ')}`}>
+            <div className={`navbar navbar-expand border-top px-0 ${moduleClass}`}>
               <form className="ms-auto">
                 <OptionsSelector />
               </form>

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -59,6 +59,7 @@ import Preview from './Preview';
 import scrollSyncHelper from './ScrollSyncHelper';
 
 import '@growi/editor/dist/style.css';
+import EditorNavbarBottom from './EditorNavbarBottom';
 
 
 const logger = loggerFactory('growi:PageEditor');
@@ -566,48 +567,54 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   }
 
   return (
-    <div data-testid="page-editor" id="page-editor" className={`flex-expand-horiz ${props.visibility ? '' : 'd-none'}`}>
-      <div className="page-editor-editor-container flex-expand-vert">
-        {/* <Editor
-          ref={editorRef}
-          value={initialValue}
-          isUploadable={isUploadable}
-          isUploadableFile={isUploadableFile}
-          indentSize={currentIndentSize}
-          onScroll={editorScrolledHandler}
-          onScrollCursorIntoView={editorScrollCursorIntoViewHandler}
-          onChange={markdownChangedHandler}
-          onUpload={uploadHandler}
-          onSave={saveWithShortcut}
-        /> */}
-        <CodeMirrorEditorMain
-          onChange={markdownChangedHandler}
-          onSave={saveWithShortcut}
-          onUpload={uploadHandler}
-          indentSize={currentIndentSize ?? defaultIndentSize}
-          acceptedFileType={acceptedFileType}
-        />
+    <div data-testid="page-editor" id="page-editor" className={`flex-expand-vert ${props.visibility ? '' : 'd-none'}`}>
+      <div className="flex-expand-vert justify-content-center align-items-center" style={{ minHeight: '72px' }}>
+        <div>Header</div>
       </div>
-      <div className="page-editor-preview-container flex-expand-vert d-none d-lg-flex">
-        <Preview
-          ref={previewRef}
-          rendererOptions={rendererOptions}
-          markdown={markdownToPreview}
-          pagePath={currentPagePath}
-          // TODO: implement
-          // refs: https://redmine.weseek.co.jp/issues/126519
-          // onScroll={offset => scrollEditorByPreviewScrollWithThrottle(offset)}
+      <div className={`flex-expand-horiz ${props.visibility ? '' : 'd-none'}`}>
+        <div className="page-editor-editor-container flex-expand-vert">
+          {/* <Editor
+            ref={editorRef}
+            value={initialValue}
+            isUploadable={isUploadable}
+            isUploadableFile={isUploadableFile}
+            indentSize={currentIndentSize}
+            onScroll={editorScrolledHandler}
+            onScrollCursorIntoView={editorScrollCursorIntoViewHandler}
+            onChange={markdownChangedHandler}
+            onUpload={uploadHandler}
+            onSave={saveWithShortcut}
+          /> */}
+          <CodeMirrorEditorMain
+            onChange={markdownChangedHandler}
+            onSave={saveWithShortcut}
+            onUpload={uploadHandler}
+            indentSize={currentIndentSize ?? defaultIndentSize}
+            acceptedFileType={acceptedFileType}
+          />
+        </div>
+        <div className="page-editor-preview-container flex-expand-vert d-none d-lg-flex">
+          <Preview
+            ref={previewRef}
+            rendererOptions={rendererOptions}
+            markdown={markdownToPreview}
+            pagePath={currentPagePath}
+            // TODO: implement
+            // refs: https://redmine.weseek.co.jp/issues/126519
+            // onScroll={offset => scrollEditorByPreviewScrollWithThrottle(offset)}
+          />
+        </div>
+        {/*
+        <ConflictDiffModal
+          isOpen={conflictDiffModalStatus?.isOpened}
+          onClose={() => closeConflictDiffModal()}
+          markdownOnEdit={markdownToPreview}
+          optionsToSave={optionsToSave}
+          afterResolvedHandler={afterResolvedHandler}
         />
+        */}
       </div>
-      {/*
-      <ConflictDiffModal
-        isOpen={conflictDiffModalStatus?.isOpened}
-        onClose={() => closeConflictDiffModal()}
-        markdownOnEdit={markdownToPreview}
-        optionsToSave={optionsToSave}
-        afterResolvedHandler={afterResolvedHandler}
-      />
-       */}
+      <EditorNavbarBottom />
     </div>
   );
 });

apps/app/src/components/PageEditor/Preview.module.scss

@@ -0,0 +1,30 @@
+@use '~/styles/variables' as var;
+@use '~/styles/mixins';
+
+@include mixins.editing(true) {
+  .page-editor-preview-body :global {
+  }
+}
+
+// modify width for fluid layout
+@include mixins.editing(true) {
+  .dynamic-layout-root:not(.growi-layout-fluid) {
+    :local {
+      .page-editor-preview-body :global {
+        .wiki {
+          max-width: 980px;
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+  .dynamic-layout-root.growi-layout-fluid {
+    :local {
+      .page-editor-preview-body :global {
+        .wiki {
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+}

apps/app/src/components/PageEditor/Preview.tsx

@@ -7,6 +7,11 @@ import type { RendererOptions } from '~/interfaces/renderer-options';
 import RevisionRenderer from '../Page/RevisionRenderer';
 
 
+import styles from './Preview.module.scss';
+
+const moduleClass = styles['page-editor-preview-body'];
+
+
 type Props = {
   rendererOptions: RendererOptions,
   markdown?: string,
@@ -23,7 +28,7 @@ const Preview = React.forwardRef((props: Props, ref: RefObject<HTMLDivElement>):
 
   return (
     <div
-      className={`page-editor-preview-body ${pagePath === '/Sidebar' ? 'preview-sidebar' : ''}`}
+      className={`${moduleClass} ${pagePath === '/Sidebar' ? 'preview-sidebar' : ''}`}
       ref={ref}
       onScroll={(event: SyntheticEvent<HTMLDivElement>) => {
         if (props.onScroll != null) {

apps/app/src/styles/_editor.scss

@@ -29,65 +29,7 @@
     width: calc(100vw - var.$grw-sidebar-nav-width);
     height: 100vh;
   }
-  .grw-editor-navbar-bottom {
-    height: var.$grw-editor-navbar-bottom-height;
 
-    .grw-grant-selector {
-      @include bs.media-breakpoint-down(sm) {
-        .btn .label {
-          display: none;
-        }
-      }
-      @include bs.media-breakpoint-up(md) {
-        .dropdown-toggle {
-          min-width: 100px;
-
-          // caret
-          &::after {
-            margin-left: 1em;
-          }
-        }
-      }
-    }
-
-    .btn-submit {
-      width: 100px;
-    }
-
-    .btn-expand {
-      // rotate icon
-      i {
-        display: inline-block;
-        transition: transform 200ms;
-      }
-      &.expand i {
-        transform: rotate(-180deg);
-      }
-    }
-  }
-
-  /*********************
-   * Navigation styles
-   */
-  .grw-subnav {
-    padding-bottom: 0;
-
-    h1 {
-      font-size: 16px;
-    }
-
-    .grw-drawer-toggler {
-      width: 38px;
-      height: 38px;
-      font-size: 18px;
-    }
-  }
-
-  .grw-copy-dropdown {
-    .btn-copy {
-      padding: 3px !important; // overwrite padding
-    }
-  }
 
   &.builtin-editor {
     /*****************
@@ -174,20 +116,6 @@
 
 }
 
-.layout-root.editing {
-  &:not(.growi-layout-fluid) .page-editor-preview-body {
-    .wiki {
-      max-width: 980px;
-      margin: 0 auto;
-    }
-  }
-  &.growi-layout-fluid .page-editor-preview-body {
-    .wiki {
-      margin: 0 auto;
-    }
-  }
-}
-
 // TODO: Never used this id class
 #tag-edit-button-tooltip {
   .tooltip-inner {

apps/app/src/styles/_mixins.scss

@@ -1,6 +1,7 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 @use './variables' as var;
 
+@import './mixins/editing';
 
 @mixin apply-navigation-transition() {
   transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);

apps/app/src/styles/font-icons.scss

@@ -5,3 +5,9 @@
 @import '@material-symbols/font-300/outlined';
 @import '@material-symbols/font-300/rounded';
 @import '@icon/themify-icons/themify-icons';
+
+.material-symbols-outlined {
+  &.fill {
+    font-variation-settings: 'FILL' 1;
+  }
+}

apps/app/src/styles/mixins/_editing.scss

@@ -0,0 +1,14 @@
+@mixin editing($global: false) {
+  :global {
+    .layout-root.editing {
+      @if ($global) {
+        @content;
+      }
+      @else {
+        :local {
+          @content;
+        }
+      }
+    }
+  }
+}