Revert "Merge pull request #8750 from weseek/fix/word-break-does-not-work"

This reverts commit 88104a417081a0383e6bdf450eeb2f3b5d4f6f63, reversing
changes made to 814f7adc835ce4ec14840114034bee8c12552a98.

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

@@ -1,12 +1,11 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
-import type { CodeComponent, CodeProps } from 'react-markdown/lib/ast-to-react';
+import type { CodeComponent } from 'react-markdown/lib/ast-to-react';
 import { PrismAsyncLight } from 'react-syntax-highlighter';
 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]) => {
@@ -50,7 +49,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 className="code-highlighted" style={oneDark['pre[class*="language-"]']}>
         <code className={`language-${lang}`} style={oneDark['code[class*="language-"]']}>
           {children}
         </code>
@@ -60,7 +59,7 @@ function CodeBlockSubstance({ lang, children }: { lang: string, children: ReactN
 
   return (
     <PrismAsyncLight
-      className={codeHighlightedClass}
+      className="code-highlighted"
       PreTag="div"
       style={oneDark}
       language={lang}
@@ -70,7 +69,7 @@ function CodeBlockSubstance({ lang, children }: { lang: string, children: ReactN
   );
 }
 
-export const CodeBlock: CodeComponent = ({ inline, className, children }: CodeProps) => {
+export const CodeBlock: CodeComponent = ({ inline, className, children }) => {
 
   if (inline) {
     return <code className={`code-inline ${className ?? ''}`}>{children}</code>;