activate _wiki.scss

packages/app/src/pages/[[...path]].page.tsx

@@ -34,7 +34,6 @@ import {
 } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
-
 // import { isUserPage, isTrashPage, isSharedPage } from '~/utils/path-utils';
 
 // import GrowiSubNavigation from '../client/js/components/Navbar/GrowiSubNavigation';

packages/app/src/styles/_wiki.scss

@@ -1,11 +1,10 @@
-div.body {
-  padding: 10px;
-}
+@use './variables' as var;
+@use './bootstrap/init' as bs;
 
 // hljs
-.wiki {
-  @import 'hljs';
-}
+// .wiki {
+//   @import 'hljs';
+// }
 
 .wiki {
   @mixin add-left-border($width) {
@@ -17,10 +16,13 @@ div.body {
     }
   }
 
-  @extend .text-break;
-
   font-size: 15px;
 
+  // @extend .text-break;
+  // https://github.com/twbs/bootstrap/blob/v4.6.1/scss/utilities/_text.scss#L65-L68
+  word-break: break-word !important; // Deprecated, but avoids issues with flex containers
+  word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy
+
   h1,
   h2,
   h3,
@@ -82,7 +84,7 @@ div.body {
     padding: 0 20px;
     margin: 0 0 30px 0;
     font-size: 0.9em;
-    color: lighten($gray-800, 35%);
+    color: lighten(bs.$gray-800, 35%);
     border-left: 0.3rem solid #ddd;
   }
 
@@ -91,13 +93,6 @@ div.body {
     margin: 5px 0;
   }
 
-  img.emojione {
-    margin-top: -0.3em !important;
-    margin-bottom: 0 !important;
-    border: none;
-    box-shadow: none;
-  }
-
   ul,
   ol {
     padding-left: 30px;
@@ -108,7 +103,7 @@ div.body {
       line-height: 1.8em;
 
       pre {
-        line-height: $line-height-base;
+        line-height: bs.$line-height-base;
       }
     }
 
@@ -148,16 +143,6 @@ div.body {
     }
   }
 
-  .page-template-builder {
-    position: relative;
-
-    .template-create-button {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-    }
-  }
-
   .revision-head {
     a {
       text-decoration: none;
@@ -213,19 +198,15 @@ div.body {
       font-size: 0.9em * $ratio;
     }
 
-    img.emojione {
-      margin-top: -0.3em * $ratio !important;
-    }
-
     ul,
     ol {
       padding-left: 15px;
       margin: 10px 0;
 
       li {
-        line-height: $line-height-base;
+        line-height: bs.$line-height-base;
         pre {
-          line-height: $line-height-base;
+          line-height: bs.$line-height-base;
         }
       }
     }
@@ -262,7 +243,7 @@ div.body {
   }
 }
 
-@include media-breakpoint-down(sm) {
+@include bs.media-breakpoint-down(sm) {
   .main .wiki {
     img {
       max-width: 100%;

packages/app/src/styles/style-next.scss

@@ -67,7 +67,7 @@
 // @import 'user';
 // @import 'staff_credit';
 // @import 'waves';
-// @import 'wiki';
+@import 'wiki';
 // @import 'sharelink';
 // @import 'linkedit-preview';