add .preview-sidebar class

packages/app/src/client/services/layout.ts

@@ -1,3 +1,4 @@
+import type { IPage } from '~/interfaces/page';
 import { useIsContainerFluid } from '~/stores/context';
 import { useSWRxCurrentPage } from '~/stores/page';
 import { useEditorMode } from '~/stores/ui';
@@ -5,14 +6,6 @@ import { useEditorMode } from '~/stores/ui';
 export const useEditorModeClassName = (): string => {
   const { getClassNamesByEditorMode } = useEditorMode();
 
-  // TODO: Enable `editing-sidebar` class somehow
-  // https://redmine.weseek.co.jp/issues/111527
-  // const classNames: string[] = [];
-  // if (currentPage != null) {
-  //   const isSidebar = currentPage.path === '/Sidebar';
-  //   classNames.push(...getClassNamesByEditorMode(/* isSidebar */));
-  // }
-
   return `${getClassNamesByEditorMode().join(' ') ?? ''}`;
 };
 

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

@@ -3,7 +3,6 @@ import React, {
 } from 'react';
 
 import { RendererOptions } from '~/services/renderer/renderer';
-import { useEditorSettings } from '~/stores/editor';
 
 import RevisionRenderer from '../Page/RevisionRenderer';
 
@@ -22,12 +21,9 @@ const Preview = React.forwardRef((props: Props, ref: RefObject<HTMLDivElement>):
     markdown, pagePath,
   } = props;
 
-  const { data: editorSettings } = useEditorSettings();
-
-
   return (
     <div
-      className="page-editor-preview-body"
+      className={`page-editor-preview-body ${pagePath === '/Sidebar' ? 'preview-sidebar' : ''}`}
       ref={ref}
       onScroll={(event: SyntheticEvent<HTMLDivElement>) => {
         if (props.onScroll != null) {

packages/app/src/styles/_editor.scss

@@ -219,6 +219,16 @@
       padding: 18px 15px 0;
       overflow-y: scroll;
     }
+    // editing /Sidebar
+    .page-editor-preview-body.preview-sidebar {
+      width: 320px;
+      margin-right: auto;
+      margin-left: auto;
+
+      .wiki {
+        @extend %grw-custom-sidebar-content;
+      }
+    }
 
     .grw-editor-configuration-dropdown {
       .icon-container {
@@ -232,19 +242,6 @@
 
   // .builtin-editor .tab-pane#edit
 
-  // editing /Sidebar
-  &.editing-sidebar {
-    .page-editor-preview-body {
-      width: 320px;
-      margin-right: auto;
-      margin-left: auto;
-
-      .wiki {
-        @extend %grw-custom-sidebar-content;
-      }
-    }
-  }
-
   &.hackmd {
     .hackmd-preinit,
     #iframe-hackmd-container > iframe {

packages/app/src/styles/theme/_apply-colors.scss

@@ -518,11 +518,9 @@ ul.pagination {
 /*
  * Preview for editing /Sidebar
  */
-body.editing-sidebar {
-  .page-editor-preview-body {
-    color: var(--color-sidebar-context);
-    background-color: var(--bgcolor-sidebar-context);
-  }
+.page-editor-preview-body.preview-sidebar {
+  color: var(--color-sidebar-context);
+  background-color: var(--bgcolor-sidebar-context);
 }
 
 /*