Created WysiwygBottomControls component

packages/strapi-admin/admin/src/translations/en.json

@@ -105,6 +105,9 @@
 
   "components.ListRow.empty": "There is no data to be shown.",
 
+  "components.WysiwygBottomControls.charactersIndicators": "{characters} characters",
+  "components.WysiwygBottomControls.fullscreen": "Fullscreen mode",
+
   "notification.error": "An error occurred",
 
   "Users & Permissions": "Users & Permissions",

packages/strapi-admin/admin/src/translations/fr.json

@@ -105,6 +105,9 @@
 
   "components.ListRow.empty": "Il n'y a pas de données à afficher.",
 
+  "components.WysiwygBottomControls.charactersIndicators": "{characters} charactères",
+  "components.WysiwygBottomControls.fullscreen": "Mode plein écran",
+
   "notification.error": "Une erreur est survenue",
 
   "Auth & Permissions": "Auth & Permissions",

packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js

@@ -20,8 +20,10 @@ import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
 import cn from 'classnames';
 
-import Select from 'components/InputSelect';
 import Controls from 'components/WysiwygInlineControls';
+import Select from 'components/InputSelect';
+import WysiwygBottomControls from 'components/WysiwygBottomControls';
+
 import styles from './styles.scss';
 
 const SELECT_OPTIONS = [
@@ -253,6 +255,7 @@ class Wysiwyg extends React.Component {
           />
           <input className={styles.editorInput} value="" tabIndex="-1" />
         </div>
+        <WysiwygBottomControls />
       </div>
     );
   }

packages/strapi-helper-plugin/lib/src/components/Wysiwyg/styles.scss

@@ -9,7 +9,7 @@
 }
 
 .editorWrapper {
-  min-height: 350px;
+  min-height: 320px;
   margin-top: .9rem;
   border: 1px solid #E3E9F3;
   border-radius: 0.25rem;

packages/strapi-helper-plugin/lib/src/components/WysiwygBottomControls/index.js

@@ -0,0 +1,33 @@
+/**
+ *
+ * WysiwygBottomControls
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { FormattedMessage } from 'react-intl';
+
+import styles from './styles.scss';
+
+const WysiwygBottomControls = (props) => {
+  return (
+    <div className={styles.wysiwygBottomControlsWrapper}>
+      <div><FormattedMessage id="components.WysiwygBottomControls.charactersIndicators" values={{ characters: props.charactersNumber }} /></div>
+      <div className={styles.fullScreenWrapper}>
+        <FormattedMessage id="components.WysiwygBottomControls.fullscreen" />
+      </div>
+    </div>
+  );
+}
+
+WysiwygBottomControls.defaultProps = {
+  charactersNumber: 0,
+};
+
+WysiwygBottomControls.propTypes = {
+  charactersNumber: PropTypes.number,
+};
+
+export default WysiwygBottomControls;

packages/strapi-helper-plugin/lib/src/components/WysiwygBottomControls/styles.scss

@@ -0,0 +1,21 @@
+.wysiwygBottomControlsWrapper {
+  display: flex;
+  height: 30px;
+  width: 100%;
+  padding: 0 17px;
+  justify-content: space-between;
+  background-color: #FAFAFB;
+  line-height: 30px;
+  font-size: 12px;
+  font-family: Lato;
+}
+
+
+.fullScreenWrapper {
+  &:after {
+    content: '\f065';
+    margin-left: 8px;
+    font-family: FontAwesome;
+    font-size: 10px;
+  }
+}