Merge pull request #8753 from weseek/fix/codeblock-overflow

fix: Codeblock overflow

apps/app/src/components/Layout/BasicLayout.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 
 import dynamic from 'next/dynamic';
 import { DndProvider } from 'react-dnd';
@@ -42,7 +43,7 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
             <Sidebar />
           </div>
 
-          <div className="d-flex flex-grow-1 flex-column z-1">{/* neccessary for nested {children} make expanded */}
+          <div className="d-flex flex-grow-1 flex-column mw-0 z-1">{/* neccessary for nested {children} make expanded */}
             <AlertSiteUrlUndefined />
             {children}
           </div>

apps/app/src/components/ReactMarkdownComponents/CodeBlock.module.scss

@@ -1,25 +1,6 @@
 @use '~/styles/variables' as var;
 @use '@growi/core/scss/bootstrap/init' as bs;
 
-
-.code-highlighted {
-  // for word wrapping
-  // ref: https://qiita.com/spaceonly/items/9aa8599a082cb72740b7
-  %breaker {
-    word-break: break-all !important;
-    word-wrap: break-word !important;
-    overflow-wrap: break-word !important;
-    white-space: break-spaces !important;
-    line-break: anywhere !important;
-  };
-
-  @extend %breaker;
-
-  code {
-    @extend %breaker;
-  }
-}
-
 .code-highlighted-title {
   position: absolute;
   top: 0;

apps/app/src/components/ReactMarkdownComponents/CodeBlock.tsx

@@ -6,8 +6,6 @@ import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 import styles from './CodeBlock.module.scss';
 
-const codeHighlightedClass = styles['code-highlighted'];
-
 // remove font-family
 Object.entries<object>(oneDark).forEach(([key, value]) => {
   if ('fontFamily' in value) {
@@ -50,7 +48,7 @@ function CodeBlockSubstance({ lang, children }: { lang: string, children: ReactN
   const isSimpleString = Array.isArray(children) && children.length === 1 && typeof children[0] === 'string';
   if (!isSimpleString) {
     return (
-      <div className={codeHighlightedClass} style={oneDark['pre[class*="language-"]']}>
+      <div style={oneDark['pre[class*="language-"]']}>
         <code className={`language-${lang}`} style={oneDark['code[class*="language-"]']}>
           {children}
         </code>
@@ -60,7 +58,6 @@ function CodeBlockSubstance({ lang, children }: { lang: string, children: ReactN
 
   return (
     <PrismAsyncLight
-      className={codeHighlightedClass}
       PreTag="div"
       style={oneDark}
       language={lang}