Improve preview style

packages/strapi-admin/admin/src/styles/base/fonts.scss

@@ -143,6 +143,9 @@
   src: url("styles/fonts/lato/lato-black-italic/lato-black-italic.woff2") format("woff2"), url("styles/fonts/lato/lato-black-italic/lato-black-italic.woff") format("woff");
 }
 
+
+
+
 @font-face {
   font-family: 'FontAwesome';
   src: url('styles/fonts/fontawesome/fontawesome-webfont.eot?v=4.7.0');
@@ -150,3 +153,85 @@
   font-weight: normal;
   font-style: normal;
 }
+
+
+/* OpenSans (light, regular) */
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 300;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  src: url("styles/fonts/open-sans/open-sans-light/open-sans-light.woff2") format("woff2"), url("styles/fonts/open-sans/open-sans-light/open-sans-light.woff") format("woff");
+}
+/* OpenSans (light, italic) */
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 300;
+  font-style: italic;
+  text-rendering: optimizeLegibility;
+  src: url("styles/fonts/open-sans/open-sans-light-italic/open-sans-light-italic.woff2") format("woff2"), url("styles/fonts/open-sans/open-sans-light-italic/open-sans-light-italic.woff") format("woff");
+}
+/* OpenSans (normal, regular) */
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  src: url("styles/fonts/open-sans/open-sans-regular/open-sans-regular.woff2") format("woff2"), url("styles/fonts/open-sans/open-sans-regular/open-sans-regular.woff") format("woff");
+}
+/* OpenSans (normal, italic) */
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 400;
+  font-style: italic;
+  text-rendering: optimizeLegibility;
+  src: url("styles/fonts/open-sans/open-sans-regular-italic/open-sans-regular-italic.woff2") format("woff2"), url("styles/fonts/open-sans/open-sans-regular-italic/open-sans-regular-italic.woff") format("woff");
+}
+/* OpenSans (semibold, regular) */
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 500;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  src: url("styles/fonts/open-sans/open-sans-semi-bold/open-sans-semi-bold.woff2") format("woff2"), url("styles/fonts/open-sans/open-sans-semi-bold/open-sans-semi-bold.woff") format("woff");
+}
+/* OpenSans (semibold, italic) */
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 500;
+  font-style: italic;
+  text-rendering: optimizeLegibility;
+  src: url("styles/fonts/open-sans/open-sans-semi-bold-italic/open-sans-semi-bold-italic.woff2") format("woff2"), url("styles/fonts/open-sans/open-sans-semi-bold-italic/open-sans-semi-bold-italic.woff") format("woff");
+}
+/* OpenSans (bold, regular) */
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 600;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  src: url("styles/fonts/open-sans/open-sans-bold/open-sans-bold.woff2") format("woff2"), url("styles/fonts/open-sans/open-sans-bold/open-sans-bold.woff") format("woff");
+}
+/* OpenSans (bold, italic) */
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 600;
+  font-style: italic;
+  text-rendering: optimizeLegibility;
+  src: url("styles/fonts/open-sans/open-sans-bold-italic/open-sans-bold-italic.woff2") format("woff2"), url("styles/fonts/open-sans/open-sans-bold-italic/open-sans-bold-italic.woff") format("woff");
+}
+/* OpenSans (heavy, regular) */
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 800;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  src: url("styles/fonts/open-sans/open-sans-extra-bold/open-sans-extra-bold.woff2") format("woff2"), url("styles/fonts/open-sans/open-sans-extra-bold/open-sans-extra-bold.woff") format("woff");
+}
+/* OpenSans (heavy, italic) */
+@font-face {
+  font-family: 'OpenSans';
+  font-weight: 800;
+  font-style: italic;
+  text-rendering: optimizeLegibility;
+  src: url("styles/fonts/open-sans/open-sans-extra-bold-italic/open-sans-extra-bold-italic.woff2") format("woff2"), url("styles/fonts/open-sans/open-sans-extra-bold-italic/open-sans-extra-bold-italic.woff") format("woff");
+}

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

@@ -12,12 +12,33 @@ import { isEmpty } from 'lodash';
 
 import WysiwygEditor from 'components/WysiwygEditor';
 import converter from '../converter';
-import { getBlockStyle } from '../helpers';
 import { findLinkEntities, findImageEntities } from '../strategies';
 
 import styles from './styles.scss';
 import { Image, Link } from './index';
 
+function getBlockStyle(block) {
+  switch (block.getType()) {
+    case 'blockquote':
+      return styles.editorBlockquote;
+    case 'code-block':
+      return styles.editorCodeBlock;
+    case 'unstyled':
+      return styles.editorParagraph;
+    case 'unordered-list-item':
+      return styles.unorderedList;
+    case 'ordered-list-item':
+    case 'header-one':
+    case 'header-two':
+    case 'header-three':
+    case 'header-four':
+    case 'header-five':
+    case 'header-six':
+    default:
+      return null;
+  }
+}
+
 class PreviewWysiwyg extends React.Component {
   getClassName = () => {
     if (this.context.isFullscreen) {
@@ -40,6 +61,7 @@ class PreviewWysiwyg extends React.Component {
         component: Image,
       },
     ]);
+
     const blocksFromHTML = convertFromHTML(html);
     // Make sure blocksFromHTML.contentBlocks !== null
     if (blocksFromHTML.contentBlocks) {

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

@@ -1,20 +1,43 @@
 .editor {
   min-height: 303px;
-  padding: 10px 20px 0 20px;
+  padding: 20px 20px 0 20px;
   font-size: 16px;
-  margin-top: 10px;
   background-color: #fff;
-  line-height: 18px !important;
+  line-height: 24px !important;
+  font-family: "OpenSans";
   cursor: text;
+
   // TODO define rules for header's margin
   h1, h2, h3, h4, h5, h6 {
     margin: 0;
-    line-height: 18px !important;
+    line-height: 24px !important;
+    font-family: "OpenSans";
   }
+
   h1 {
-    margin-top: 13px !important;
+    margin-top: 11px !important;
-    margin-bottom: 22px;
+    font-size: 36px;
+    font-weight: 600;
   }
+
+  h2 {
+    margin-top: 26px;
+    font-size: 30px;
+    font-weight: 500;
+  }
+
+  h3 {
+    margin-top: 26px;
+    font-size: 24px;
+    font-weight: 500;
+  }
+
+  h4 {
+    margin-top: 26px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+
   > div {
     > div {
       > div {
@@ -22,17 +45,74 @@
       }
     }
   }
+
   li {
     margin-top: 0;
   }
+
   ul, ol {
-    margin-bottom: 18px;
+    padding: 0;
+    margin-top: 27px;
   }
+
   span {
     white-space: pre-line;
   }
 }
 
+h1+.editorParagraph{
+  margin-top: 31px;
+}
+
+.editorParagraph+* {
+  margin-bottom: -2px !important;
+}
+
+.editorParagraph+.editorBlockquote {
+  margin-bottom: 32px !important;
+}
+
+.editorBlockquote+ul {
+  margin-top: 38px !important;
+}
+
+.editorParagraph {
+  color: #333740;
+  margin-top: 27px;
+  margin-bottom: -3px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.editorBlockquote {
+  margin-top: 41px;
+  margin-bottom: 34px;
+  font-size: 16px;
+  font-weight: 400;
+  border-left: 5px solid #eee;
+  font-style: italic;
+  padding: 10px 20px;
+}
+
+.unorderedList {
+  padding: 0;
+  margin-left: 18px;
+}
+
+.editorCodeBlock {
+  padding: 16px;
+  margin-top: 26px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+
+  span {
+    font-family: Consolas, monospace !important;
+    font-size: 12px;
+    line-height: 16px;
+    white-space: pre;
+  }
+}
+
 .editorFullScreen {
   max-height: calc(100% - 100px) !important;
   margin-bottom: 0;

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

@@ -1,29 +1,12 @@
 import { trimEnd, trimStart } from 'lodash';
-import styles from './styles.scss';
 /**
  * Override the editor css
  * @param  {[type]} block [description]
  * @return {[type]}       [description]
  */
 
-export function getBlockStyle(block) {
+export function getBlockStyle() {
-  switch (block.getType()) {
-    case 'blockquote':
-      return styles.editorBlockquote;
-    case 'code-block':
-      return styles.editorCodeBlock;
-    case 'paragraph':
-    case 'unordered-list-item':
-    case 'ordered-list-item':
-    case 'header-one':
-    case 'header-two':
-    case 'header-three':
-    case 'header-four':
-    case 'header-five':
-    case 'header-six':
-    default:
   return null;
-  }
 }
 
 export function getBlockContent(style) {

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

@@ -24,7 +24,7 @@ import Drop from 'components/WysiwygDropUpload';
 import WysiwygBottomControls from 'components/WysiwygBottomControls';
 import WysiwygEditor from 'components/WysiwygEditor';
 import request from 'utils/request';
-import { CustomSelect, PreviewControl, PreviewWysiwyg, ToggleMode } from './components/index';
+import { CustomSelect, PreviewControl, PreviewWysiwyg, ToggleMode } from './components';
 import { CONTROLS } from './constants';
 import { getBlockContent, getBlockStyle, getDefaultSelectionOffsets, getOffSets } from './helpers';
 import styles from './styles.scss';

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

@@ -21,6 +21,7 @@
   line-height: 32px;
   text-align: center;
   cursor: pointer;
+
   &:hover {
     background-color: #F3F4F4;
   }
@@ -35,6 +36,7 @@
 .styleButtonBold {
   background-image: url('../../assets/icons/icon_bold.svg');
   background-position: center;
+  background-repeat: no-repeat;
 }
 
 .styleButtonDisabled {
@@ -44,36 +46,43 @@
 .styleButtonItalic {
   background-image: url('../../assets/icons/icon_italic.svg');
   background-position: center;
+  background-repeat: no-repeat;
 }
 
 .styleButtonUnderline {
   background-image: url('../../assets/icons/icon_underline.svg');
   background-position: center 11px;
+  background-repeat: no-repeat;
 }
 
 .styleButtonUL {
   background-image: url('../../assets/icons/icon_bullet-list.svg');
   background-position: center;
+  background-repeat: no-repeat;
 }
 
 .styleButtonOL {
   background-image: url('../../assets/icons/icon_numbered-list.svg');
   background-position: center 12px;
+  background-repeat: no-repeat;
 }
 
 .styleButtonBlockQuote {
   background-image: url('../../assets/icons/icon_quote-block.svg');
   background-position: center;
+  background-repeat: no-repeat;
 }
 
 .styleButtonCodeBlock {
   background-image: url('../../assets/icons/icon_code-block.svg');
   background-position: center;
+  background-repeat: no-repeat;
 }
 
 .styleButtonLink {
   background-image: url('../../assets/icons/icon_link.svg');
   background-position: center;
+  background-repeat: no-repeat;
 }
 
 .styleButtonImg {
@@ -84,6 +93,7 @@
 .styleButtonStrikedOut {
   background-image: url('../../assets/icons/icon_barred.svg');
   background-position: center;
+  background-repeat: no-repeat;
 }
 
 .wysiwygInlineControls {

packages/strapi-plugin-users-permissions/models/User.settings.json

@@ -38,6 +38,14 @@
       "via": "users",
       "plugin": "users-permissions",
       "configurable": false
+    },
+    "bio": {
+      "multiple": false,
+      "type": "text"
+    },
+    "about": {
+      "multiple": false,
+      "type": "text"
     }
   },
   "collectionName": "users-permissions_user"