Merge branch 'master' into support/share-link-for-outside-for-merge

package.json

@@ -54,8 +54,9 @@
     "preserver:prod": "npm run migrate",
     "prestart": "npm run build:prod",
     "resource": "node bin/download-cdn-resources.js",
-    "translations": "rs-i18n -lan zh_CN -t",
-    "i18n-json-merge:noTran": "rs-i18n -lan zh_CN",
+    "i18n-json-merge:withTran": "rs-i18n -lan -- -t",
+    "i18n-json-merge:noTran": "rs-i18n -lan --",
+    "i18n-json-merge": "npm run i18n-json-merge:withTran --",
     "server:nolazy": "env-cmd -f config/env.dev.js node-dev --nolazy --inspect src/server/app.js",
     "server:dev": "env-cmd -f config/env.dev.js node-dev --inspect src/server/app.js",
     "server:prod:ci": "npm run server:prod -- --ci",
@@ -183,10 +184,11 @@
     "diff2html": "^3.1.2",
     "eazy-logger": "^3.0.2",
     "eslint": "^6.0.1",
-    "eslint-config-weseek": "^1.0.3",
+    "eslint-config-weseek": "^1.0.4",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jest": "^23.0.3",
     "eslint-plugin-react": "^7.14.2",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "file-loader": "^5.0.2",
     "handsontable": "=6.2.2",
     "hard-source-webpack-plugin": "^0.13.1",

src/client/js/components/Navbar/SearchTop.jsx

@@ -77,7 +77,7 @@ class SearchTop extends React.Component {
     const isReachable = config.isSearchServiceReachable;
 
     return (
-      <div className={`form-group mb-0 ${isReachable ? '' : 'has-error'}`}>
+      <div className={`form-group mb-0 d-print-none ${isReachable ? '' : 'has-error'}`}>
         <div className="input-group flex-nowrap">
           <div className="input-group-prepend">
             <button className="btn btn-secondary dropdown-toggle py-0" type="button" data-toggle="dropdown" aria-haspopup="true">

src/client/js/components/PageEditor.jsx

@@ -21,6 +21,8 @@ class PageEditor extends React.Component {
   constructor(props) {
     super(props);
 
+    this.previewElement = React.createRef();
+
     const config = this.props.appContainer.getConfig();
     const isUploadable = config.upload.image || config.upload.file;
     const isUploadableFile = config.upload.file;

src/client/js/components/PageEditor/Preview.jsx

@@ -82,7 +82,9 @@ class Preview extends React.PureComponent {
             className="page-editor-preview-body"
             ref={(elm) => {
                 this.previewElement = elm;
-                this.props.inputRef(elm);
+                if (this.props.inputRef != null) {
+                  this.props.inputRef(elm);
+                }
               }}
             onScroll={(event) => {
                 if (this.props.onScroll != null) {
@@ -112,7 +114,7 @@ Preview.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   markdown: PropTypes.string,
-  inputRef: PropTypes.func.isRequired, // for getting div element
+  inputRef: PropTypes.func,
   isMathJaxEnabled: PropTypes.bool,
   renderMathJaxOnInit: PropTypes.bool,
   onScroll: PropTypes.func,

src/client/js/components/Sidebar.jsx

@@ -167,7 +167,7 @@ class Sidebar extends React.Component {
 
     return (
       <>
-        <div className={`grw-sidebar ${this.isDrawerMode ? 'grw-sidebar-drawer' : ''} ${isDrawerOpened ? 'open' : ''}`}>
+        <div className={`grw-sidebar d-print-none ${this.isDrawerMode ? 'grw-sidebar-drawer' : ''} ${isDrawerOpened ? 'open' : ''}`}>
           <ThemeProvider
             theme={theme => ({
               ...theme,

src/client/js/components/StickyStretchableScroller.jsx

@@ -91,7 +91,7 @@ const StickyStretchableScroller = (props) => {
     if (contentsHeight < viewHeight) {
       $(scrollTargetSelector).slimScroll({ destroy: true });
     }
-  }, [contentsElemSelector, calcViewHeightFunc, calcContentsHeightFunc]);
+  }, [contentsElemSelector, calcViewHeightFunc, calcContentsHeightFunc, scrollTargetSelector]);
 
   const resetScrollbarDebounced = debounce(100, resetScrollbar);
 
@@ -99,7 +99,7 @@ const StickyStretchableScroller = (props) => {
   const stickyChangeHandler = useCallback((event) => {
     logger.debug('StickyEvents.CHANGE detected');
     resetScrollbar();
-  });
+  }, [resetScrollbar]);
 
   // setup effect by sticky event
   useEffect(() => {
@@ -118,7 +118,7 @@ const StickyStretchableScroller = (props) => {
     return () => {
       elem.removeEventListener(StickyEvents.CHANGE, stickyChangeHandler);
     };
-  }, []);
+  }, [stickyElemSelector, stickyChangeHandler]);
 
   // setup effect by resizing event
   useEffect(() => {
@@ -132,19 +132,19 @@ const StickyStretchableScroller = (props) => {
     return () => {
       window.removeEventListener('resize', resizeHandler);
     };
-  }, []);
+  }, [resetScrollbarDebounced]);
 
   // setup effect by isScrollTop
   useEffect(() => {
     if (navigationContainer.state.isScrollTop) {
       resetScrollbar();
     }
-  }, [navigationContainer.state.isScrollTop]);
+  }, [navigationContainer.state.isScrollTop, resetScrollbar]);
 
   // setup effect by update props
   useEffect(() => {
     resetScrollbarDebounced();
-  });
+  }, [resetScrollbarDebounced]);
 
   return (
     <>

src/client/js/components/TableOfContents.jsx

@@ -27,7 +27,7 @@ const TableOfContents = (props) => {
 
     // window height - revisionToc top - .system-version height
     return window.innerHeight - containerTop - 20;
-  });
+  }, []);
 
   const { tocHtml } = pageContainer.state;
 

src/client/js/legacy/crowi.js

@@ -106,7 +106,7 @@ Crowi.initClassesByOS = function() {
   const platform = navigator.platform.toLowerCase();
   const isMac = (platform.indexOf('mac') > -1);
 
-  document.querySelectorAll('.system-version .cmd-key').forEach((element) => {
+  document.querySelectorAll('.cmd-key').forEach((element) => {
     if (isMac) {
       element.classList.add('mac');
     }

src/client/styles/scss/_layout.scss

@@ -75,6 +75,10 @@ body {
       }
     }
 
+    .row {
+      display: block !important;
+    }
+
     .revision-toc {
       float: none;
       max-width: 100%;
@@ -100,14 +104,3 @@ body {
     }
   }
 }
-
-.system-version {
-  position: fixed;
-  right: 0.5em;
-  bottom: 0;
-  opacity: 0.6;
-
-  > span {
-    margin-left: 0.5em;
-  }
-}

src/server/views/layout-kibela/base/layout.html

@@ -9,10 +9,10 @@
 {% block layout_main %}
 <div class="container-fluid p-0">
 
-  <div class="row body m-0 p-0">
+  <div class="row body m-0 p-0 d-print-block">
 
     <div id="main" class="main col-12 kibela-block round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
-      <div class="row grw-subnav d-edit-none">
+      <div class="row grw-subnav d-edit-none d-print-block">
         <div class="col-12 col-xl-9 col-lg-8 px-0 mx-0 bg-white kibela-border-top round-corner">
           {% block content_header %} {% endblock %}
         </div>

src/server/views/layout/layout.html

@@ -79,7 +79,7 @@
 
   {% block head_warn_breaking_changes %}{% include '../widget/alert_breaking_changes.html' %}{% endblock %}
 
-  <div id="page-wrapper" class="page-wrapper d-flex">
+  <div id="page-wrapper" class="page-wrapper d-flex d-print-block">
     {# Sidebar #}
     <div id="grw-sidebar-wrapper"></div>
 

yarn.lock

@@ -5474,10 +5474,10 @@ eslint-config-airbnb@^17.1.0:
     object.assign "^4.1.0"
     object.entries "^1.0.4"
 
-eslint-config-weseek@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/eslint-config-weseek/-/eslint-config-weseek-1.0.3.tgz#420f583371447def71af11a78baf39d65a3d9e4a"
-  integrity sha512-AXOuaZomA/h34EHMT+CmhU7TTDbsyqCl702yaY0PGt6wype/YWra9phTbPyHjuI+Uh8gh9eKX2tAhnruKK3Ivw==
+eslint-config-weseek@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/eslint-config-weseek/-/eslint-config-weseek-1.0.4.tgz#26f8dc5ce6e791f9eb379308f0fbac4902b25439"
+  integrity sha512-PkWrFlNDs5X+cyCDEZ6JFoHly0LQhDuPVbEiSxchguk9A8OvrUD+KBgIOWbQZSjI0YJV582zyGSTU5J1lwtpUw==
   dependencies:
     eslint-config-airbnb "^17.1.0"
 
@@ -5520,6 +5520,11 @@ eslint-plugin-jest@^23.0.3:
   dependencies:
     "@typescript-eslint/experimental-utils" "^2.5.0"
 
+eslint-plugin-react-hooks@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.4.tgz#aed33b4254a41b045818cacb047b81e6df27fa58"
+  integrity sha512-equAdEIsUETLFNCmmCkiCGq6rkSK5MoJhXFPFYeUebcjKgBmWWcgVOqZyQC8Bv1BwVCnTq9tBxgJFgAJTWoJtA==
+
 eslint-plugin-react@^7.14.2:
   version "7.14.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.14.2.tgz#94c193cc77a899ac0ecbb2766fbef88685b7ecc1"