Merge branch 'master' into imprv/brushup-group-select-ui

# Conflicts:
#	resource/styles/scss/style.scss

CHANGES.md

@@ -1,9 +1,35 @@
 CHANGES
 ========
 
-## 3.0.8-RC
+## 3.0.11-RC
 
-* 
+* Support: Optimize development build
+* Support: Upgrade libs
+    * env-cmd
+
+## 3.0.10
+
+* Improvement: Add 'nature' theme
+* Fix: Page list and Timeline layout for layout-growi
+* Fix: Adjust theme colors
+    * Introduced by 3.0.9
+
+## 3.0.9
+
+* Fix: Registering new LDAP User is failed
+    * Introduced by 3.0.6
+* Support: Organize scss for overriding bootstrap variables
+* Support: Upgrade libs
+    * codemirror
+    * react-codemirror2
+    * normalize-path
+    * style-loader
+
+## 3.0.8
+
+* Improvement: h1#revision-path occupies most of the screen when the page path is long
+* Improvement: Ensure not to save concealed email field to localStorage
+* Fix: Cannot input "c" and "e" on iOS
 
 ## 3.0.7
 

bin/shrink-emojione-strategy.js

@@ -4,7 +4,6 @@
  * @author Yuki Takei <yuki@weseek.co.jp>
  */
 const fs = require('graceful-fs');
-const normalize = require('normalize-path');
 const helpers = require('../config/helpers');
 
 const OUT = helpers.root('tmp/emoji_strategy_shrinked.json');

config/webpack.common.js

@@ -10,15 +10,13 @@ const helpers = require('./helpers');
  */
 const AssetsPlugin = require('assets-webpack-plugin');
 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 /*
  * Webpack configuration
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = function (options) {
-  isProd = options.env === 'production';
+module.exports = function(options) {
   return {
     entry: {
       'app':                  './resource/js/app',
@@ -36,9 +34,9 @@ module.exports = function (options) {
     externals: {
       // require("jquery") is external and available
       //  on the global var jQuery
-      "jquery": "jQuery",
-      "emojione": "emojione",
-      "hljs": "hljs",
+      'jquery': 'jQuery',
+      'emojione': 'emojione',
+      'hljs': 'hljs',
     },
     resolve: {
       extensions: ['.js', '.json'],
@@ -56,26 +54,6 @@ module.exports = function (options) {
             }
           }]
         },
-        {
-          test: /\.scss$/,
-          use: ExtractTextPlugin.extract({
-            fallback: 'style-loader',
-            use: [
-              { loader: 'css-loader', options: {
-                sourceMap: !isProd,
-                minimize: isProd
-              } },
-              { loader: 'postcss-loader', options: {
-                sourceMap: !isProd,
-                plugins: (loader) => [
-                  require('autoprefixer')()
-                ]
-              } },
-              { loader: 'sass-loader', options: { sourceMap: !isProd } }
-            ]
-          }),
-          include: [helpers.root('resource/styles/scss')]
-        },
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],
@@ -127,8 +105,8 @@ module.exports = function (options) {
       new webpack.IgnorePlugin(/^\.\/lib\/deflate\.js/, /markdown-it-plantuml/),
 
       new webpack.ProvidePlugin({ // refs externals
-        jQuery: "jquery",
-        $: "jquery",
+        jQuery: 'jquery',
+        $: 'jquery',
       }),
 
     ]

config/webpack.dev.js

@@ -12,8 +12,6 @@ const commonConfig = require('./webpack.common.js');
 /*
  * Webpack Plugins
  */
-const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
@@ -22,17 +20,15 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
  */
 const ANALYZE = process.env.ANALYZE;
 const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
-const HOST = process.env.HOST || '0.0.0.0';
-const PORT = process.env.PORT || 3000;
 
 /*
  * Webpack configuration
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = function (options) {
+module.exports = function(options) {
   return webpackMerge(commonConfig({ env: ENV }), {
-    devtool: 'cheap-module-source-map',
+    devtool: 'cheap-module-eval-source-map',
     entry: {
       dev: './resource/js/dev',
     },
@@ -40,7 +36,6 @@ module.exports = function (options) {
       path: helpers.root('public/js'),
       publicPath: '/js/',
       filename: '[name].bundle.js',
-      sourceMapFilename: '[file].map',
     },
     resolve: {
       extensions: ['.js', '.json'],
@@ -48,17 +43,45 @@ module.exports = function (options) {
     },
     module: {
       rules: [
+        {
+          test: /\.css$/,
+          use: [
+            'style-loader',
+            { loader: 'css-loader', options: { sourceMap: true } },
+          ],
+          include: [helpers.root('resource/styles/scss')]
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            'style-loader',
+            { loader: 'css-loader', options: { sourceMap: true } },
+            { loader: 'sass-loader', options: { sourceMap: true } },
+          ],
+          include: [helpers.root('resource/styles/scss')]
+        },
       ],
     },
     plugins: [
 
-      new ExtractTextPlugin('[name].bundle.css'),
-
       new DllBundlesPlugin({
         bundles: {
           vendor: [
+            'axios',
+            'codemirror',
+            'date-fns',
+            'diff',
+            'diff2html',
+            'jquery-ui',
+            'markdown-it',
+            'metismenu',
             'react',
-            'react-dom'
+            'react-dom',
+            'react-bootstrap',
+            'react-bootstrap-typeahead',
+            'react-dropzone',
+            'socket.io-client',
+            'toastr',
           ],
         },
         dllDir: helpers.root('public/dll'),

config/webpack.prod.js

@@ -10,7 +10,6 @@ const commonConfig = require('./webpack.common.js'); // the settings that are co
 /**
  * Webpack Plugins
  */
-const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
 const OptimizeJsPlugin = require('optimize-js-plugin');
@@ -21,10 +20,8 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
  */
 const ANALYZE = process.env.ANALYZE;
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
-const HOST = process.env.HOST || 'localhost';
-const PORT = process.env.PORT || 3000;
 
-module.exports = function (env) {
+module.exports = function(env) {
   return webpackMerge(commonConfig({ env: ENV }), {
     devtool: undefined,
     output: {
@@ -36,6 +33,26 @@ module.exports = function (env) {
     },
     module: {
       rules: [
+        {
+          test: /\.scss$/,
+          use: ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: [
+              { loader: 'css-loader', options: {
+                sourceMap: false,
+                minimize: true
+              } },
+              { loader: 'postcss-loader', options: {
+                sourceMap: false,
+                plugins: (loader) => [
+                  require('autoprefixer')()
+                ]
+              } },
+              { loader: 'sass-loader', options: { sourceMap: false } }
+            ]
+          }),
+          include: [helpers.root('resource/styles/scss')]
+        }
       ]
     },
     plugins: [

lib/crowi/dev.js

@@ -1,11 +1,9 @@
 const debug = require('debug')('crowi:crowi:dev');
 const fs = require('fs');
 const path = require('path');
-const webpack = require('webpack');
-const helpers = require('./helpers');
 
 const swig = require('swig-templates');
-const onHeaders = require('on-headers')
+const onHeaders = require('on-headers');
 
 
 class CrowiDev {
@@ -29,7 +27,9 @@ class CrowiDev {
 
   initPromiseRejectionWarningHandler() {
     // https://qiita.com/syuilo/items/0800d7e44e93203c7285
+    /* eslint-disable no-console */
     process.on('unhandledRejection', console.dir);
+    /* eslint-enable */
   }
 
   initSwig() {
@@ -103,4 +103,4 @@ class CrowiDev {
   }
 }
 
-module.exports = CrowiDev
+module.exports = CrowiDev;

lib/form/admin/securityGeneral.js

@@ -11,6 +11,5 @@ module.exports = form(
   field('settingForm[security:basicSecret]'),
   field('settingForm[security:restrictGuestMode]').required(),
   field('settingForm[security:registrationMode]').required(),
-  field('settingForm[security:registrationWhiteList]').custom(normalizeCRLF).custom(stringToArray),
+  field('settingForm[security:registrationWhiteList]').custom(normalizeCRLF).custom(stringToArray)
 );
-

lib/form/admin/slackSetting.js

@@ -4,6 +4,5 @@ var form = require('express-form')
   , field = form.field;
 
 module.exports = form(
-  field('slackSetting[slack:token]', 'token'),
+  field('slackSetting[slack:token]', 'token')
 );
-

lib/locales/en-US/sandbox-bootstrap3.md

@@ -0,0 +1,135 @@
+# Labels
+
+<span class="label label-default">Default</span>
+<span class="label label-primary">Primary</span>
+<span class="label label-success">Success</span>
+<span class="label label-info">Info</span>
+<span class="label label-warning">Warning</span>
+<span class="label label-danger">Danger</span>
+
+# Alerts
+
+<div class="alert alert-success" role="alert"><b>Well done!</b> You successfully read this important alert message. </div>
+<div class="alert alert-info" role="alert"><b>Heads up!</b> This alert needs your attention, but it's not super important. </div>
+<div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
+<div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>
+
+# Panels
+
+<div class="panel panel-default">
+  <div class="panel-heading">Panel heading without title</div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>
+
+<div class="panel panel-primary">
+  <div class="panel-heading">Panel heading without title</div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>
+
+<div class="panel panel-success">
+  <div class="panel-heading">Panel heading without title</div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>
+
+<div class="panel panel-info">
+  <div class="panel-heading">Panel heading without title</div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>
+
+<div class="panel panel-warning">
+  <div class="panel-heading">Panel heading without title</div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>
+
+<div class="panel panel-danger">
+  <div class="panel-heading">Panel heading without title</div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>
+
+# Wells
+
+## Default well
+
+<div class="well">Look, I'm in a well! </div>
+
+## Optional classes
+
+<div class="well well-lg">Look, I'm in a well! </div>
+
+<div class="well well-sm">Look, I'm in a well! </div>
+
+# Typography
+
+## Lead body copy
+
+<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
+
+## Marked text
+
+You can use the mark tag to <mark>highlight</mark> text.
+
+## Small text
+
+<small>This line of text is meant to be treated as fine print.</small>
+
+## Alignment classes
+
+<div class="panel panel-default">
+  <div class="panel-body">
+    <p class="text-left">Left aligned text.</p>
+    <p class="text-center">Center aligned text.</p>
+    <p class="text-right">Right aligned text.</p>
+    <p class="text-justify">Justified text.</p>
+    <p class="text-nowrap">No wrap text.</p>
+  </div>
+</div>
+
+## Transformation classes
+
+<div class="panel panel-default">
+  <div class="panel-body">
+    <p class="text-lowercase">Lowercased text.</p>
+    <p class="text-uppercase">Uppercased text.</p>
+    <p class="text-capitalize">Capitalized text.</p>
+  </div>
+</div>
+
+
+# Helper classes
+
+## Contextual colors
+
+<div class="panel panel-default">
+  <div class="panel-body">
+    <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+    <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+    <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+    <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+  </div>
+</div>
+
+## Contextual backgrounds
+
+<div class="panel panel-default">
+  <div class="panel-body">
+    <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+    <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+    <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+    <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+    <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+  </div>
+</div>

lib/models/external-account.js

@@ -92,7 +92,7 @@ class ExternalAccount {
             return User.createUser('', usernameToBeRegistered, undefined, undefined, undefined, User.STATUS_ACTIVE);
           })
           .then(newUser => {
-            return this.associate(providerType, accountId, newUser._id);
+            return this.associate(providerType, accountId, newUser);
           });
 
       });

lib/routes/installer.js

@@ -21,6 +21,11 @@ module.exports = function(crowi, app) {
     const sandboxMarkdownPath = path.join(crowi.localeDir, lang, 'sandbox.md');
     const sandboxMarkdown = fs.readFileSync(sandboxMarkdownPath);
     Page.create('/Sandbox', sandboxMarkdown, owner, {});
+
+    // create /Sandbox/Bootstrap3
+    const bs3MarkdownPath = path.join(crowi.localeDir, 'en-US', 'sandbox-bootstrap3.md');
+    const bs3Markdown = fs.readFileSync(bs3MarkdownPath);
+    Page.create('/Sandbox/Bootstrap3', bs3Markdown, owner, {});
   }
 
   actions.index = function(req, res) {

lib/views/admin/customize.html

@@ -3,8 +3,13 @@
 {% block html_title %}{{ customTitle(t('Customize')) }} {% endblock %}
 
 {% block style_css_block %}
-  <link rel="stylesheet" href="{{ webpack_asset('style').css }}">
-  <link rel="stylesheet" id="jssDefault" {# append id for theme selector #} href="{{ webpack_asset('style-theme-' + theme()).css }}">
+  {% if env === 'development' %}
+    <script src="{{ webpack_asset('style').js }}"></script>
+    <script src="{{ webpack_asset('style-theme-' + theme()).js }}"></script>
+  {% else %}
+    <link rel="stylesheet" href="{{ webpack_asset('style').css }}">
+    <link rel="stylesheet" id="jssDefault" {# append id for theme selector #} href="{{ webpack_asset('style-theme-' + theme()).css }}">
+  {% endif %}
 {% endblock %}
 
 {% block html_additional_headers %}
@@ -52,24 +57,22 @@
         <fieldset>
           <legend>{{ t('customize_page.Theme') }}</legend>
 
-          <div id="themeOptions" class="d-flex">
-            <a id="theme-option-default" href="#"
-                class="default {% if 'default' === settingForm['customize:theme'] %}active{% endif %}"
-                onclick="selectTheme('default')"
-                data-theme="{{ webpack_asset('style-theme-default').css }}">
-              {% include 'widget/theme-colorbox.html' %}
-            </a>
-            <a id="theme-option-default-dark" href="#"
-                class="default-dark {% if 'default-dark' === settingForm['customize:theme'] %}active{% endif %}"
-                onclick="selectTheme('default-dark')"
-                data-theme="{{ webpack_asset('style-theme-default-dark').css }}">
-              {% include 'widget/theme-colorbox.html' %}
-            </a>
-            <a id="theme-option-nature"
-             class="nature"
-             data-theme="{{ webpack_asset('style-theme-nature').css }}">
-              {% include 'widget/theme-colorbox.html' %}
-            </a>
+          {% if env === 'development' %}
+            <div class="alert alert-warning">
+              <strong>DEBUG MESSAGE:</strong> development build では、リアルタイムプレビューが無効になります
+            </div>
+          {% endif %}
+
+          <div id="themeOptions">
+            {# Light Themes #}
+            <div class="d-flex">
+              {% include 'widget/theme-colorbox.html' with { name: 'default',  bg: '#ffffff', topbar: '#334455', theme: '#112744' } %}
+              {% include 'widget/theme-colorbox.html' with { name: 'nature',   bg: '#f9fff3', topbar: '#118050', theme: '#460039' } %}
+            </div>
+            {# Dark Themes #}
+            <div class="d-flex">
+              {% include 'widget/theme-colorbox.html' with { name: 'default-dark', bg: '#212731', topbar: '#151515', theme: '#f75b36' } %}
+            </div>
           </div>
 
           <div class="form-group">
@@ -509,12 +512,12 @@ window.addEventListener('load', (event) => {
       $(this).submit(function()
       {
         function showMessage(formId, msg, status) {
-          $('#' + formId + ' .alert').remove();
+          $('#' + formId + ' #alert-results').remove();
 
           if (!status) {
             status = 'success';
           }
-          var $message = $('<p class="alert"></p>');
+          var $message = $('<p id="alert-results" class="alert"></p>');
           $message.addClass('alert-' + status);
           $message.html(msg.replace('\n', '<br>'));
           $message.insertAfter('#' + formId + ' legend');

lib/views/admin/widget/theme-colorbox.html

@@ -1,7 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
-  <g>
-    <path class="color1" d="M -1 -1 L65 -1 L65 65 L-1 65 L-1 -1 Z" fill="#ccc"></path>
-    <path class="color2" d="M -1 -1 L65 -1 L65 15 L-1 15 L-1 -1 Z" fill="#000"></path>
-    <path class="color3" d="M 44 15 L65 15 L65 65 L44 65 L44 15 Z" fill="#300"></path>
-  </g>
-</svg>
+<a id="theme-option-{{name}}" href="#"
+    class="{{name}} {% if name === settingForm['customize:theme'] %}active{% endif %}"
+    onclick="selectTheme('{{name}}')"
+    data-theme="{{ webpack_asset('style-theme-' + name).css }}">
+
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+    <g>
+      <path d="M -1 -1 L65 -1 L65 65 L-1 65 L-1 -1 Z" fill="{{bg}}"></path>
+      <path d="M -1 -1 L65 -1 L65 15 L-1 15 L-1 -1 Z" fill="{{topbar}}"></path>
+      <path d="M 44 15 L65 15 L65 65 L44 65 L44 15 Z" fill="{{theme}}"></path>
+    </g>
+  </svg>
+
+</a>

lib/views/layout-crowi/not_found.html

@@ -7,9 +7,9 @@
 
   <div class="header-wrap">
     <header id="page-header">
-      <div class="flex-title-line">
+      <div>
         <div>
-          <h1 class="title flex-item-title" id="revision-path"></h1>
+          <h1 class="title" id="revision-path"></h1>
           <div id="revision-url" class="url-line"></div>
         </div>
       </div>

lib/views/layout-crowi/page.html

@@ -10,7 +10,7 @@
     <header id="page-header">
       <div class="d-flex align-items-center">
         <div class="title-container">
-          <h1 class="title flex-item-title" id="revision-path"></h1>
+          <h1 class="title" id="revision-path"></h1>
           <div id="revision-url" class="url-line"></div>
         </div>
         {% include '../widget/header-buttons.html' %}

lib/views/layout-crowi/page_list.html

@@ -17,7 +17,7 @@
     <div class="d-flex align-items-center">
       <div class="title-container">
         <div class="d-flex">
-          <h1 class="title flex-item-title" id="revision-path"></h1>
+          <h1 class="title" id="revision-path"></h1>
           {% if false %} {# Disable temporaly -- 2018.03.08 Yuki Takei #}
           {% if searchConfigured() && !isTopPage() && !isTrashPage() %}
           <form id="search-listpage-form" class="m-l-10 input-group search-input-group hidden-xs hidden-sm"

lib/views/layout-growi/page.html

@@ -35,7 +35,7 @@
 
   {% if 'growi' === behaviorType() || 'crowi-plus' === behaviorType() %}
   <div class="row page-list">
-    <div class="col-md-12">
+    <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>
   </div>

lib/views/layout-growi/page_list.html

@@ -34,7 +34,7 @@
   </div>
 
   <div class="row page-list">
-    <div class="col-md-12">
+    <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>
   </div>

lib/views/layout-growi/user_page.html

@@ -53,7 +53,7 @@
 
   {% if 'growi' === behaviorType() || 'crowi-plus' === behaviorType() %}
   <div class="row page-list">
-    <div class="col-md-12">
+    <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>
   </div>

lib/views/layout-growi/widget/header.html

@@ -7,13 +7,13 @@
         </a>
       </div>
       <div class="title-container">
-        <h1 class="title flex-item-title" id="revision-path"></h1>
+        <h1 class="title" id="revision-path"></h1>
         <div id="revision-url" class="url-line"></div>
       </div>
       {% if page %}
       {% include '../../widget/header-buttons.html' %}
 
-      <ul class="authors hidden-sm hidden-xs">
+      <ul class="authors hidden-sm hidden-xs text-nowrap">
         <li>
           <div class="d-flex align-items-center">
             <a class="m-r-5" href="{{ userPageRoot(page.creator) }}">

lib/views/layout/layout.html

@@ -83,8 +83,13 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
 
   <!-- styles -->
   {% block style_css_block %}
-  <link rel="stylesheet" href="{{ webpack_asset('style').css }}">
-  <link rel="stylesheet" href="{{ webpack_asset('style-theme-' + theme()).css }}">
+    {% if env === 'development' %}
+      <script src="{{ webpack_asset('style').js }}"></script>
+      <script src="{{ webpack_asset('style-theme-' + theme()).js }}"></script>
+    {% else %}
+      <link rel="stylesheet" href="{{ webpack_asset('style').css }}">
+      <link rel="stylesheet" href="{{ webpack_asset('style-theme-' + theme()).css }}">
+    {% endif %}
   {% endblock %}
 
   <!-- Google Fonts -->

package.json

@@ -1,6 +1,6 @@
 {
   "name": "growi",
-  "version": "3.0.8-RC",
+  "version": "3.0.11-RC",
   "description": "Team collaboration software using markdown",
   "tags": [
     "wiki",
@@ -62,7 +62,7 @@
     "bootstrap-sass": "~3.3.6",
     "bootstrap-select": "^1.12.4",
     "check-node-version": "^3.1.1",
-    "codemirror": "^5.36.0",
+    "codemirror": "^5.37.0",
     "connect-flash": "~0.1.1",
     "connect-mongo": "^2.0.1",
     "connect-redis": "^3.3.0",
@@ -78,7 +78,7 @@
     "eazy-logger": "^3.0.2",
     "elasticsearch": "^14.0.0",
     "entities": "^1.1.1",
-    "env-cmd": "^7.0.0",
+    "env-cmd": "^8.0.1",
     "escape-string-regexp": "^1.0.5",
     "express": "^4.16.1",
     "express-form": "~0.12.0",
@@ -117,7 +117,7 @@
     "node-sass": "^4.5.0",
     "nodemailer": "^4.0.1",
     "nodemailer-ses-transport": "~1.5.0",
-    "normalize-path": "^2.1.1",
+    "normalize-path": "^3.0.0",
     "npm-run-all": "^4.1.2",
     "optimize-js-plugin": "0.0.4",
     "passport": "^0.4.0",
@@ -130,7 +130,7 @@
     "react-bootstrap": "^0.32.1",
     "react-bootstrap-typeahead": "^3.0.3",
     "react-clipboard.js": "^1.1.3",
-    "react-codemirror2": "^4.2.1",
+    "react-codemirror2": "^5.0.0",
     "react-dom": "^16.2.0",
     "react-dropzone": "^4.2.7",
     "reveal.js": "^3.5.0",
@@ -139,7 +139,7 @@
     "slack-node": "^0.1.8",
     "socket.io": "^2.0.3",
     "socket.io-client": "^2.0.3",
-    "style-loader": "^0.20.1",
+    "style-loader": "^0.21.0",
     "swig-templates": "^2.0.2",
     "throttle-debounce": "^1.0.1",
     "toastr": "^2.1.2",

resource/js/components/Page/RevisionPath.js

@@ -88,7 +88,8 @@ export default class RevisionPath extends React.Component {
       afterElements.push(
         <span key={page.pagePath} className="path-segment">
           <a href={page.pagePath}>{page.pageName}</a>
-        </span>);
+        </span>
+      );
 
       // add elements for '/'
       afterElements.push(

resource/js/legacy/crowi.js

@@ -902,7 +902,7 @@ window.addEventListener('keydown', (event) => {
 
   // ignore when target dom is input
   const inputPattern = /^input|textinput|textarea$/i;
-  if (target.tagName.match(inputPattern)) {
+  if (target.tagName.match(inputPattern) || target.isContentEditable) {
     return;
   }
 

resource/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

@@ -49,6 +49,10 @@ input.form-control, textarea.form-control {
   > li > a {
     color: $bodytext;
   }
+
+  .divider {
+    background-color: $border;
+  }
 }
 
 .modal {
@@ -71,31 +75,29 @@ input.form-control, textarea.form-control {
 }
 
 /*
- * Tabs
+ * Table
  */
-.nav.nav-tabs {
-  border-bottom-color: $border;
+ .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
+ .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td ,
+ .table > thead > tr > th, .table-bordered{
+     border-top: 1px solid $border;
+ }
 
-  > li > a {
-    color:$linktext;
-    &:hover, &:focus {
-      color: $linktext-hover;
-    }
-  }
-  > li.active > a {
-    border-top-color: $border;
-    border-left-color: $border;
-    border-right-color: $border;
-  }
-  > li:not(.active) > a {
-    &:hover, &:focus {
-      border-top-color: darken($border, 5%);
-      border-left-color: darken($border, 5%);
-      border-right-color: darken($border, 5%);
-      border-bottom: transparent;
-    }
-  }
-}
+ .table-bordered > thead > tr > th,
+ .table-bordered > tbody > tr > th,
+ .table-bordered > tfoot > tr > th,
+ .table-bordered > thead > tr > td,
+ .table-bordered > tbody > tr > td,
+ .table-bordered > tfoot > tr > td {
+   border: 1px solid $border;
+ }
+ .table > thead > tr > th {
+     border-bottom: 1px solid $border;
+ }
+
+ .table-bordered {
+     border: 1px solid $border;
+ }
 
 
 /*

resource/styles/agile-admin/inverse/colors/_apply-colors-light.scss

@@ -15,13 +15,6 @@
   background-color: darken($bodycolor, 5%);
 }
 
-/*
- * Tabs
- */
-.nav-tabs > li > a {
-  color: $dark;
-}
-
 /*
  * GROWI header
  */

resource/styles/agile-admin/inverse/colors/_apply-colors.scss

@@ -214,6 +214,33 @@ legend {
   }
 }
 
+/*
+ * Tabs
+ */
+ .nav.nav-tabs {
+  border-bottom-color: $navbar-border;
+
+  > li > a {
+    color:$linktext;
+    &:hover, &:focus {
+      color: $linktext-hover;
+    }
+  }
+  > li.active > a {
+    border-top-color: $navbar-border;
+    border-left-color: $navbar-border;
+    border-right-color: $navbar-border;
+  }
+  > li:not(.active) > a {
+    &:hover, &:focus {
+      border-top-color: $active-navbar-border;
+      border-left-color: $active-navbar-border;
+      border-right-color: $active-navbar-border;
+      border-bottom: transparent;
+    }
+  }
+}
+
 
 /*
  * Crowi sidebar

resource/styles/agile-admin/inverse/colors/default-dark.scss

@@ -20,6 +20,9 @@ $wikilinktext-hover: darken($wikilinktext, 5%);
 
 $dark: darken($bodytext, 5%);
 $border: lighten($basecolor, 15%);
+$navbar-border: lighten($border, 10%);
+$active-navbar-border: darken($border, 3%);
+$btn-default-bgcolor: darken($basecolor, 10%);
 
 @import 'apply-colors';
 @import 'apply-colors-dark';

resource/styles/agile-admin/inverse/colors/nature.scss

@@ -1,19 +1,20 @@
 @import '../variables';
 
-$themecolor:#112744;
+$themecolor:#460039;
 
-$topbar:#334455;
+$topbar:#118050;;
 $sidebar:#fff;
-$bodycolor:#fff;
-$headingtext: #2b2b2b;
+$bodycolor:#fefffd;
+
+$headingtext: #46694e;
 $bodytext: #333333;
-$linktext: lighten($themecolor, 20%);
-$linktext-hover: lighten($linktext, 20%);
-$sidebar-text:#38495a;
+$linktext: lighten($themecolor,5%);
+$linktext-hover: lighten($linktext, 12%);
+$sidebar-text:#5c7253;
 
 $primary: $themecolor;
 
-$logo-mark-fill: lighten(desaturate($topbar, 10%), 15%);
+$logo-mark-fill: lighten(desaturate($topbar, 30%), 20%);
 $wikilinktext: lighten($themecolor, 20%);
 $wikilinktext-hover: lighten($wikilinktext, 20%);
 

resource/styles/agile-admin/inverse/eliteadmin.scss

@@ -1140,7 +1140,7 @@ label{
 }
 .btn-default, .btn-default.disabled{
   color: $bodytext;
-  $this-color: darken($bodycolor, 10%);
+  $this-color: $btn-default-bgcolor;
   background: $this-color;
   border:1px solid $this-color;
    &:hover, &:focus, &.focus{
@@ -1155,7 +1155,7 @@ label{
 .btn-default.btn-outline {
     background-color: transparent;
     &:hover, &:focus, &.focus{
-    background:darken($bodycolor, 10%);
+    background: $btn-default-bgcolor;
     }
 }
 .btn-primary.btn-outline {

resource/styles/agile-admin/inverse/variables.scss

@@ -51,6 +51,9 @@ $rgt:right !default;
 $lft:left !default;
 
 $dark-text:#848a96 !default;
+$navbar-border: #ccc !default;
+$active-navbar-border: lighten($navbar-border, 10%) !default;
+$btn-default-bgcolor: darken(#fff, 10%) !default;
 
 /*Border radius*/
 $radius: 0 !default;

resource/styles/bootstrap4/_mixins.scss

@@ -12,8 +12,8 @@
 // @import "mixins/size";
 // @import "mixins/reset-text";
 // @import "mixins/text-emphasis";
-// @import "mixins/text-hide";
-// @import "mixins/text-truncate";
+@import "mixins/text-hide";
+@import "mixins/text-truncate";
 // @import "mixins/visibility";
 
 // // Components

resource/styles/bootstrap4/_utilities.scss

@@ -10,5 +10,5 @@
 // @import "utilities/screenreaders";
 // @import "utilities/sizing";
 @import "utilities/spacing";
-// @import "utilities/text";
+@import "utilities/text";
 // @import "utilities/visibility";

resource/styles/bootstrap4/_variables.scss

@@ -231,9 +231,9 @@ $grid-breakpoints: (
 // $font-size-lg:                ($font-size-base * 1.25) !default;
 // $font-size-sm:                ($font-size-base * .875) !default;
 
-// $font-weight-light:           300 !default;
-// $font-weight-normal:          400 !default;
-// $font-weight-bold:            700 !default;
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-bold:            700 !default;
 
 // $font-weight-base:            $font-weight-normal !default;
 // $line-height-base:            1.5 !default;

resource/styles/bootstrap4/utilities/_text.scss

@@ -39,11 +39,11 @@
 
 .text-white { color: #fff !important; }
 
-@each $color, $value in $theme-colors {
-  @include text-emphasis-variant(".text-#{$color}", $value);
-}
+// @each $color, $value in $theme-colors {
+//   @include text-emphasis-variant(".text-#{$color}", $value);
+// }
 
-.text-muted { color: $text-muted !important; }
+// .text-muted { color: $text-muted !important; }
 
 // Misc
 

resource/styles/scss/_admin.scss

@@ -92,40 +92,5 @@
         background-color: $brand-success;
       }
     }
-
-    // theme color
-    .default {
-      .color1 {
-        fill: white;
-      }
-      .color2 {
-        fill: #334455;
-      }
-      .color3 {
-        fill: #112744;
-      }
-    }
-    .default-dark {
-      .color1 {
-        fill: #212731;
-      }
-      .color2 {
-        fill: #151515;
-      }
-      .color3 {
-        fill: #f75b36;
-      }
-    }
-    .nature {
-      .color1 {
-        fill: #dfffd1;
-      }
-      .color2 {
-        fill: #1f9b33;
-      }
-      .color3 {
-        fill: #56f736;
-      }
-    }
   }
 }

resource/styles/scss/_layout_crowi.scss

@@ -22,7 +22,7 @@
       border-radius: 0 5px;
       padding: 3px 11px;
       font-weight: bold;
-      background: $gray-light;
+      background: $gray-lighter;
       margin-left: 5px;
       margin-bottom: 5px;
 

resource/styles/scss/_login.scss

@@ -163,7 +163,7 @@
     }
   }
   .link-switch {
-    color: $gray;
+    color: $gray-lighter;
     &:hover {
       color: white;
     }

resource/styles/scss/_mixins.scss

@@ -0,0 +1,15 @@
+@mixin variable-font-size($basesize) {
+  font-size: $basesize;
+  @media(max-width: $screen-lg) {
+    font-size: #{$basesize * 0.9};
+  }
+  @media(max-width: $screen-md) {
+    font-size: #{$basesize * 0.8};
+  }
+  @media(max-width: $screen-sm) {
+    font-size: #{$basesize * 0.7};
+  }
+  @media(max-width: $screen-xs) {
+    font-size: #{$basesize * 0.6};
+  }
+}

resource/styles/scss/_on-edit.scss

@@ -34,7 +34,7 @@ body.on-edit {
    */
   .nav-main-right-tab:not(.dropdown) {
     // hide if screen size is less than smartphone
-    @media (max-width: $screen-xs-max) {
+    @media (max-width: $screen-xs) {
       display: none;
     }
   }
@@ -128,12 +128,12 @@ body.on-edit {
 
   .row.bg-title {
     $left-margin: $nav-main-left-tab-width * 2 + 25px;  // width of .nav-main-left-tab x 2 + some margin
-    $right-margin: 128px + 94px;                        // width of presentation and history tabs width
+    $right-margin: 128px + 94px + 46px;                 // width of all of nav-main-right-tab
 
     position: absolute;
     z-index: 1;
     left: $left-margin;
-    min-width: calc(100% - #{$left-margin} - #{$right-margin});
+    width: calc(100% - #{$left-margin} - #{$right-margin});
 
     // for crowi layout
     > .col-md-9, .col-xs-12 {
@@ -143,13 +143,24 @@ body.on-edit {
 
     background: none;
 
-    h1 {
-      font-size: 20px;
+    .header-wrap {
+      overflow-x: hidden;
+    }
+    h1#revision-path {
+      @include variable-font-size(20px);
       line-height: 1em;
+
+      // nowrap even if the path is too long
+      .d-flex {
+        flex-wrap: nowrap;
+      }
+      .path-segment {
+        white-space: nowrap;
+      }
     }
 
     // hide if screen size is less than smartphone
-    @media (max-width: $screen-xs-max) {
+    @media (max-width: $screen-sm) {
       display: none;
     }
   }

resource/styles/scss/_override-bootstrap-variables.scss

@@ -8,11 +8,11 @@
 //## Gray and brand colors for use across Bootstrap.
 
 $gray-base:              #000 !default;
-$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
-$gray-dark:              lighten($gray-base, 20%) !default;   // #333
-$gray:                   #f0f0f0;
-$gray-light:             #f5f5f5;
-$gray-lighter:           #fafafa;
+$gray-darker:            lighten($gray-base, 13.5%); // #222
+$gray-dark:              lighten($gray-base, 20%);   // #333
+$gray:                   lighten($gray-base, 33.5%); // #555
+$gray-light:             lighten($gray-base, 46.7%); // #777
+$gray-lighter:           lighten($gray-base, 93.5%); // #eee
 $gray-extralight:        #fafafa; // Growi original
 
 $brand-primary:         $primary;
@@ -41,6 +41,13 @@ $border-radius-large: 0;
 $border-radius-small: 0;
 
 
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-default-bg: $btn-default-bgcolor;
+
+
 
 //== Forms
 //
@@ -49,7 +56,7 @@ $border-radius-small: 0;
 //** `<input>` background color
 $input-bg:                       $bodycolor;
 //** `<input disabled>` background color
-$input-bg-disabled:              darken($bodycolor, 10%);
+$input-bg-disabled:              $btn-default-bgcolor;
 
 //** `<input>` border color
 $input-border:                   $border;

resource/styles/scss/_page.scss

@@ -52,10 +52,19 @@
       }
     }
 
-    h1 {
-      font-size: 28px;
+    .url-line {
+      color: #999;
+      font-size: 1rem;
+    }
+
+    h1#revision-path {
+      @include variable-font-size(28px);
+
       margin-top: 0;
       margin-bottom: 0;
+      .d-flex {
+        flex-wrap: wrap;  // for long page path
+      }
 
       // crowi layout only
       a.last-path {
@@ -68,11 +77,6 @@
 
     }
 
-    .url-line {
-      color: #999;
-      font-size: 1rem;
-    }
-
     // affix
     &.affix {
       width: 100%;
@@ -82,8 +86,8 @@
       z-index: 15; // over the .sidebar
       box-shadow: 0 0px 2px #999;
 
-      h1 {
-        font-size: 1.8em;
+      h1#revision-path {
+        @include variable-font-size(20px);
       }
     }
 

resource/styles/scss/style.scss

@@ -1,13 +1,12 @@
-// vendor
-@import 'vendor';
-
 // import variables
 @import '../agile-admin/inverse/variables';
 @import 'variables';
+@import 'mixins';
 
 @import 'override-bootstrap-variables';
 
-@import 'override-bootstrap-collapse-width';
+// vendor
+@import 'vendor';
 
 // override react-bootstrap-typeahead styles
 @import 'override-rbt';

resource/styles/scss/theme/_override-agileadmin.scss

@@ -1,3 +1,7 @@
+.bg-title {
+  overflow: unset;
+}
+
 /*
  * Growi original
  */

yarn.lock

@@ -1607,9 +1607,9 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
-codemirror@^5.36.0:
-  version "5.36.0"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.36.0.tgz#1172ad9dc298056c06e0b34e5ccd23825ca15b40"
+codemirror@^5.37.0:
+  version "5.37.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.37.0.tgz#c349b584e158f590277f26d37c2469a6bc538036"
 
 color-convert@^1.3.0, color-convert@^1.9.0:
   version "1.9.1"
@@ -1875,6 +1875,16 @@ cross-spawn@^5.0.1, cross-spawn@^5.1.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+cross-spawn@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
 crypt@~0.0.1:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
@@ -2373,11 +2383,11 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
-env-cmd@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/env-cmd/-/env-cmd-7.0.0.tgz#d1fcfea6e0cbe6bf50b7130221d568907b6349bd"
+env-cmd@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/env-cmd/-/env-cmd-8.0.1.tgz#0070518b29e78b1102f2e753551eaae3f971a335"
   dependencies:
-    cross-spawn "^5.0.1"
+    cross-spawn "^6.0.5"
 
 errno@^0.1.3:
   version "0.1.6"
@@ -4760,6 +4770,10 @@ neo-async@^2.5.0:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.1.tgz#acb909e327b1e87ec9ef15f41b8a269512ad41ee"
 
+nice-try@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.4.tgz#d93962f6c52f2c1558c0fbda6d512819f1efe1c4"
+
 nise@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/nise/-/nise-1.2.0.tgz#079d6cadbbcb12ba30e38f1c999f36ad4d6baa53"
@@ -4934,12 +4948,16 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1:
+normalize-path@^2.0.0, normalize-path@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
   dependencies:
     remove-trailing-separator "^1.0.1"
 
+normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+
 normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
@@ -5275,7 +5293,7 @@ path-is-inside@^1.0.1, path-is-inside@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
 
-path-key@^2.0.0:
+path-key@^2.0.0, path-key@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
 
@@ -5955,9 +5973,9 @@ react-clipboard.js@^1.1.3:
     clipboard "^1.6.1"
     prop-types "^15.5.0"
 
-react-codemirror2@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-4.2.1.tgz#4ad3c5c60ebbcb34880f961721b51527324ec021"
+react-codemirror2@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-5.0.0.tgz#18e0d4495c3cfe0c4675dd9bfcea074ca3aa9f56"
 
 react-dom@^16.2.0:
   version "16.2.0"
@@ -6503,20 +6521,13 @@ schema-utils@^0.3.0:
   dependencies:
     ajv "^5.0.0"
 
-schema-utils@^0.4.0:
+schema-utils@^0.4.0, schema-utils@^0.4.5:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
   dependencies:
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.3.tgz#e2a594d3395834d5e15da22b48be13517859458e"
-  dependencies:
-    ajv "^5.0.0"
-    ajv-keywords "^2.1.0"
-
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -6532,6 +6543,10 @@ select@^1.1.2:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
 
+semver@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
 semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@@ -6980,12 +6995,12 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-style-loader@^0.20.1:
-  version "0.20.1"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.20.1.tgz#33ac2bf4d5c65a8906bc586ad253334c246998d0"
+style-loader@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.21.0.tgz#68c52e5eb2afc9ca92b6274be277ee59aea3a852"
   dependencies:
     loader-utils "^1.1.0"
-    schema-utils "^0.4.3"
+    schema-utils "^0.4.5"
 
 supports-color@4.4.0:
   version "4.4.0"