add customHtml into noscript

packages/app/src/client/services/AdminCustomizeContainer.js

@@ -36,7 +36,7 @@ export default class AdminCustomizeContainer extends Container {
       isAllReplyShown: false,
       isSearchScopeChildrenAsDefault: false,
       currentCustomizeTitle: '',
-      currentCustomizeHeader: '',
+      currentCustomizeHtml: '',
       currentCustomizeCss: '',
       currentCustomizeScript: '',
     };
@@ -73,7 +73,7 @@ export default class AdminCustomizeContainer extends Container {
         isAllReplyShown: customizeParams.isAllReplyShown,
         isSearchScopeChildrenAsDefault: customizeParams.isSearchScopeChildrenAsDefault,
         currentCustomizeTitle: customizeParams.customizeTitle,
-        currentCustomizeHeader: customizeParams.customizeHeader,
+        currentCustomizeHtml: customizeParams.customizeHtml,
         currentCustomizeCss: customizeParams.customizeCss,
         currentCustomizeScript: customizeParams.customizeScript,
       });
@@ -160,8 +160,8 @@ export default class AdminCustomizeContainer extends Container {
   /**
    * Change customize Html header
    */
-  changeCustomizeHeader(inputValue) {
-    this.setState({ currentCustomizeHeader: inputValue });
+  changeCustomizeHtml(inputValue) {
+    this.setState({ currentCustomizeHtml: inputValue });
   }
 
   /**
@@ -239,14 +239,14 @@ export default class AdminCustomizeContainer extends Container {
    * Update customHeader
    * @memberOf AdminCustomizeContainer
    */
-  async updateCustomizeHeader() {
+  async updateCustomizeHtml() {
     try {
-      const response = await apiv3Put('/customize-setting/customize-header', {
-        customizeHeader: this.state.currentCustomizeHeader,
+      const response = await apiv3Put('/customize-setting/customize-html', {
+        customizeHtml: this.state.currentCustomizeHtml,
       });
       const { customizedParams } = response.data;
       this.setState({
-        currentCustomizeHeader: customizedParams.customizeHeader,
+        currentCustomizeHtml: customizedParams.customizeHtml,
       });
     }
     catch (err) {

packages/app/src/components/Admin/Customize/CustomizeHeaderSetting.tsx

@@ -20,7 +20,7 @@ const CustomizeHeaderSetting = (props: Props): JSX.Element => {
 
   const onClickSubmit = useCallback(async() => {
     try {
-      await adminCustomizeContainer.updateCustomizeHeader();
+      await adminCustomizeContainer.updateCustomizeHtml();
       toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.custom_header'), ns: 'commons' }));
     }
     catch (err) {
@@ -55,9 +55,9 @@ const CustomizeHeaderSetting = (props: Props): JSX.Element => {
           <div className="form-group">
             <textarea
               className="form-control"
-              name="customizeHeader"
-              value={adminCustomizeContainer.state.currentCustomizeHeader || ''}
-              onChange={(e) => { adminCustomizeContainer.changeCustomizeHeader(e.target.value) }}
+              name="customizeHtml"
+              value={adminCustomizeContainer.state.currentCustomizeHtml || ''}
+              onChange={(e) => { adminCustomizeContainer.changeCustomizeHtml(e.target.value) }}
             />
             <p className="form-text text-muted text-right">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>

packages/app/src/pages/_document.page.tsx

@@ -73,8 +73,9 @@ const HeadersForGrowiPlugin = (props: HeadersForGrowiPluginProps): JSX.Element =
 
 interface GrowiDocumentProps {
   theme: string,
-  customCss: string | null,
   customScript: string | null,
+  customCss: string | null,
+  customHtml: string | null,
   presetThemesManifest: ViteManifest,
   pluginThemeHref: string | undefined,
   pluginResourceEntries: GrowiPluginResourceEntries;
@@ -89,8 +90,9 @@ class GrowiDocument extends Document<GrowiDocumentInitialProps> {
     const { configManager, customizeService, pluginService } = crowi;
 
     const theme = configManager.getConfig('crowi', 'customize:theme');
-    const customCss: string = customizeService.getCustomCss();
-    const customScript: string = customizeService.getCustomScript();
+    const customScript: string | null = customizeService.getCustomScript();
+    const customCss: string | null = customizeService.getCustomCss();
+    const customHtml: string | null = customizeService.getCustomHtml();
 
     // import preset-themes manifest
     const presetThemesManifest = await import('@growi/preset-themes/dist/themes/manifest.json').then(imported => imported.default);
@@ -102,14 +104,22 @@ class GrowiDocument extends Document<GrowiDocumentInitialProps> {
     return {
       ...initialProps,
       theme,
-      customCss,
       customScript,
+      customCss,
+      customHtml,
       presetThemesManifest,
       pluginThemeHref,
       pluginResourceEntries,
     };
   }
 
+  renderCustomHtml(customHtml: string | null): JSX.Element {
+    if (customHtml == null || customHtml.length === 0) {
+      return <></>;
+    }
+    return <noscript dangerouslySetInnerHTML={{ __html: customHtml }} />;
+  }
+
   renderCustomCss(customCss: string | null): JSX.Element {
     if (customCss == null || customCss.length === 0) {
       return <></>;
@@ -126,13 +136,13 @@ class GrowiDocument extends Document<GrowiDocumentInitialProps> {
 
   override render(): JSX.Element {
     const {
-      customCss, customScript, theme, presetThemesManifest, pluginThemeHref, pluginResourceEntries,
+      customCss, customScript, customHtml,
+      theme, presetThemesManifest, pluginThemeHref, pluginResourceEntries,
     } = this.props;
 
     return (
       <Html>
         <Head>
-          {this.renderCustomCss(customCss)}
           {this.renderCustomScript(customScript)}
           <link rel='preload' href="/static/fonts/PressStart2P-latin.woff2" as="font" type="font/woff2" />
           <link rel='preload' href="/static/fonts/PressStart2P-latin-ext.woff2" as="font" type="font/woff2" />
@@ -143,8 +153,10 @@ class GrowiDocument extends Document<GrowiDocumentInitialProps> {
           <HeadersForThemes theme={theme}
             presetThemesManifest={presetThemesManifest} pluginThemeHref={pluginThemeHref} />
           <HeadersForGrowiPlugin pluginResourceEntries={pluginResourceEntries} />
+          {this.renderCustomCss(customCss)}
         </Head>
         <body>
+          {this.renderCustomHtml(customHtml)}
           <Main />
           <NextScript />
         </body>

packages/app/src/server/models/config.ts

@@ -118,7 +118,7 @@ export const defaultCrowiConfigs: { [key: string]: any } = {
 
   'customize:css' : undefined,
   'customize:script' : undefined,
-  'customize:header' : undefined,
+  'customize:noscript' : undefined,
   'customize:title' : undefined,
   'customize:highlightJsStyle' : 'github',
   'customize:highlightJsStyleBorder' : false,

packages/app/src/server/routes/apiv3/customize-setting.js

@@ -77,11 +77,11 @@ const multer = require('multer');
  *        properties:
  *          customizeTitle:
  *            type: string
- *      CustomizeHeader:
- *        description: CustomizeHeader
+ *      CustomizeHtml:
+ *        description: CustomizeHtml
  *        type: object
  *        properties:
- *          customizeHeader:
+ *          customizeHtml:
  *            type: string
  *      CustomizeCss:
  *        description: CustomizeCss
@@ -131,20 +131,20 @@ module.exports = (crowi) => {
     customizeTitle: [
       body('customizeTitle').isString(),
     ],
-    customizeHeader: [
-      body('customizeHeader').isString(),
-    ],
     highlight: [
       body('highlightJsStyle').isString().isIn([
         'github', 'github-gist', 'atom-one-light', 'xcode', 'vs', 'atom-one-dark', 'hybrid', 'monokai', 'tomorrow-night', 'vs2015',
       ]),
       body('highlightJsStyleBorder').isBoolean(),
     ],
+    customizeScript: [
+      body('customizeScript').isString(),
+    ],
     customizeCss: [
       body('customizeCss').isString(),
     ],
-    customizeScript: [
-      body('customizeScript').isString(),
+    customizeHtml: [
+      body('customizeHtml').isString(),
     ],
     logo: [
       body('isDefaultLogo').isBoolean().optional({ nullable: true }),
@@ -186,9 +186,9 @@ module.exports = (crowi) => {
       styleName: await crowi.configManager.getConfig('crowi', 'customize:highlightJsStyle'),
       styleBorder: await crowi.configManager.getConfig('crowi', 'customize:highlightJsStyleBorder'),
       customizeTitle: await crowi.configManager.getConfig('crowi', 'customize:title'),
-      customizeHeader: await crowi.configManager.getConfig('crowi', 'customize:header'),
-      customizeCss: await crowi.configManager.getConfig('crowi', 'customize:css'),
       customizeScript: await crowi.configManager.getConfig('crowi', 'customize:script'),
+      customizeCss: await crowi.configManager.getConfig('crowi', 'customize:css'),
+      customizeHtml: await crowi.configManager.getConfig('crowi', 'customize:noscript'),
     };
 
     return res.apiv3({ customizeParams });
@@ -531,43 +531,43 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /customize-setting/customizeHeader:
+   *    /customize-setting/customize-html:
    *      put:
    *        tags: [CustomizeSetting]
-   *        operationId: updateCustomizeHeaderCustomizeSetting
-   *        summary: /customize-setting/customizeHeader
-   *        description: Update customizeHeader
+   *        operationId: updateCustomizeHtmlCustomizeSetting
+   *        summary: /customize-setting/customize-html
+   *        description: Update customizeHtml
    *        requestBody:
    *          required: true
    *          content:
    *            application/json:
    *              schema:
-   *                $ref: '#/components/schemas/CustomizeHeader'
+   *                $ref: '#/components/schemas/customizeHtml'
    *        responses:
    *          200:
    *            description: Succeeded to update customize header
    *            content:
    *              application/json:
    *                schema:
-   *                  $ref: '#/components/schemas/CustomizeHeader'
+   *                  $ref: '#/components/schemas/customizeHtml'
    */
-  router.put('/customize-header', loginRequiredStrictly, adminRequired, addActivity, validator.customizeHeader, apiV3FormValidator, async(req, res) => {
+  router.put('/customize-html', loginRequiredStrictly, adminRequired, addActivity, validator.customizeHtml, apiV3FormValidator, async(req, res) => {
     const requestParams = {
-      'customize:header': req.body.customizeHeader,
+      'customize:noscript': req.body.customizeHtml,
     };
     try {
       await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestParams);
       const customizedParams = {
-        customizeHeader: await crowi.configManager.getConfig('crowi', 'customize:header'),
+        customizeHtml: await crowi.configManager.getConfig('crowi', 'customize:noscript'),
       };
       const parameters = { action: SupportedAction.ACTION_ADMIN_CUSTOM_HTML_HEADER_UPDATE };
       activityEvent.emit('update', res.locals.activity._id, parameters);
       return res.apiv3({ customizedParams });
     }
     catch (err) {
-      const msg = 'Error occurred in updating customizeHeader';
+      const msg = 'Error occurred in updating customizeHtml';
       logger.error('Error', err);
-      return res.apiv3Err(new ErrorV3(msg, 'update-customizeHeader-failed'));
+      return res.apiv3Err(new ErrorV3(msg, 'update-customizeHtml-failed'));
     }
   });
 

packages/app/src/server/service/customize.ts

@@ -1,12 +1,13 @@
 // eslint-disable-next-line no-unused-vars
+import { DevidedPagePath } from '@growi/core';
 import uglifycss from 'uglifycss';
 
-import { DevidedPagePath } from '@growi/core';
 import loggerFactory from '~/utils/logger';
 
 import S2sMessage from '../models/vo/s2s-message';
-import { S2sMessageHandlable } from './s2s-messaging/handlable';
+
 import ConfigManager from './config-manager';
+import { S2sMessageHandlable } from './s2s-messaging/handlable';
 
 const logger = loggerFactory('growi:service:CustomizeService');
 
@@ -80,8 +81,6 @@ class CustomizeService implements S2sMessageHandlable {
    * initialize custom css strings
    */
   initCustomCss() {
-    const uglifycss = require('uglifycss');
-
     const rawCss = this.configManager.getConfig('crowi', 'customize:css') || '';
 
     // uglify and store
@@ -95,7 +94,11 @@ class CustomizeService implements S2sMessageHandlable {
   }
 
   getCustomScript() {
-    return this.configManager.getConfig('crowi', 'customize:script') || '';
+    return this.configManager.getConfig('crowi', 'customize:script');
+  }
+
+  getCustomHtml() {
+    return this.configManager.getConfig('crowi', 'customize:noscript');
   }
 
   initCustomTitle() {