🛠 Added style

Author: melishev

admin/src/components/Wysiwyg/index.js

@@ -1,59 +1,100 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'lodash';
-import { Label, InputDescription, InputErrors } from 'strapi-helper-plugin';
+import { LabelIconWrapper } from 'strapi-helper-plugin';
 import Editor from '../editorjs';
 
-const Wysiwyg = ({
-  inputDescription,
-  errors,
-  label,
-  name,
-  noErrorsDescription,
-  onChange,
-  value,
-}) => {
+import cn from 'classnames';
+import { Description, ErrorMessage, Label } from '@buffetjs/styles';
+import { Error } from '@buffetjs/core';
+import Wrapper from './wrapper';
 
-  return (
-    <div
-      style={{
-        marginBottom: '1.6rem',
-        fontSize: '1.3rem',
-        fontFamily: 'Lato',
-      }}
-    >
-      <Label
-        htmlFor={name}
-        message={label}
-        style={{ marginBottom: 10 }}
-      />
-      <Editor
-        name={name}
-        onChange={onChange}
-        value={value}
-      />
-      <InputDescription
-        message={inputDescription}
-        style={!isEmpty(inputDescription) ? { marginTop: '1.4rem' } : {}}
-      />
-      <InputErrors
-        errors={(!noErrorsDescription && errors) || []}
-        name={name}
-      />
-    </div>
-  );
-};
+// eslint-disable-next-line react/prefer-stateless-function
+class WysiwygWithErrors extends React.Component {
+  render() {
+    const {
+      autoFocus,
+      className,
+      deactivateErrorHighlight,
+      disabled,
+      error: inputError,
+      inputClassName,
+      inputDescription,
+      inputStyle,
+      label,
+      labelIcon,
+      name,
+      onBlur: handleBlur,
+      onChange,
+      placeholder,
+      resetProps,
+      style,
+      tabIndex,
+      validations,
+      value,
+      ...rest
+    } = this.props;
+
+    return (
+      <Error inputError={inputError} name={name} type="text" validations={validations}>
+        {({ canCheck, onBlur, error, dispatch }) => {
+          const hasError = Boolean(error);
+
+          return (
+            <Wrapper
+              className={`${cn(!isEmpty(className) && className)} ${hasError ? 'bordered' : ''}`}
+              style={style}
+            >
+              <Label htmlFor={name}>
+                <span>{label}</span>
+                {labelIcon && (
+                  <LabelIconWrapper title={labelIcon.title}>{labelIcon.icon}</LabelIconWrapper>
+                )}
+              </Label>
+              <Editor
+                name={name}
+                onChange={onChange}
+                value={value}
+              />
+              {!hasError && inputDescription && <Description>{inputDescription}</Description>}
+              {hasError && <ErrorMessage>{error}</ErrorMessage>}
+            </Wrapper>
+          );
+        }}
+      </Error>
+    );
+  }
+}
 
-Wysiwyg.defaultProps = {
-  errors: [],
-  inputDescription: null,
+WysiwygWithErrors.defaultProps = {
+  autoFocus: false,
+  className: '',
+  deactivateErrorHighlight: false,
+  didCheckErrors: false,
+  disabled: false,
+  error: null,
+  inputClassName: '',
+  inputDescription: '',
+  inputStyle: {},
   label: '',
-  noErrorsDescription: false,
-  value: '',
+  labelIcon: null,
+  onBlur: false,
+  placeholder: '',
+  resetProps: false,
+  style: {},
+  tabIndex: '0',
+  validations: {},
+  value: null,
 };
 
-Wysiwyg.propTypes = {
-  errors: PropTypes.array,
+WysiwygWithErrors.propTypes = {
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  deactivateErrorHighlight: PropTypes.bool,
+  didCheckErrors: PropTypes.bool,
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  inputClassName: PropTypes.string,
   inputDescription: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func,
@@ -62,6 +103,7 @@ Wysiwyg.propTypes = {
       params: PropTypes.object,
     }),
   ]),
+  inputStyle: PropTypes.object,
   label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func,
@@ -70,10 +112,19 @@ Wysiwyg.propTypes = {
       params: PropTypes.object,
     }),
   ]),
+  labelIcon: PropTypes.shape({
+    icon: PropTypes.node.isRequired,
+    title: PropTypes.string,
+  }),
   name: PropTypes.string.isRequired,
-  noErrorsDescription: PropTypes.bool,
+  onBlur: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  resetProps: PropTypes.bool,
+  style: PropTypes.object,
+  tabIndex: PropTypes.string,
+  validations: PropTypes.object,
   value: PropTypes.string,
 };
 
-export default Wysiwyg;
+export default WysiwygWithErrors;

admin/src/components/Wysiwyg/wrapper.js

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  padding-bottom: 2.8rem;
+  font-size: 1.3rem;
+  font-family: 'Lato';
+  label {
+    display: block;
+    margin-bottom: 1rem;
+  }
+  &.bordered {
+    .editorWrapper {
+      border-color: red;
+    }
+  }
+  > div + p {
+    width: 100%;
+    padding-top: 12px;
+    font-size: 1.2rem;
+    line-height: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: -9px;
+  }
+
+  div,
+  pre,
+  code {
+    ::-webkit-scrollbar {
+      height: 5px;
+      width: 5px;
+      cursor: default;
+    }
+  }
+`;
+
+export default Wrapper;

admin/src/components/editorjs/index.js

@@ -39,21 +39,25 @@ const Editor = ({ onChange, name, value }) => {
 
   return (
     <>
-      <EditorJs
-        data={JSON.parse(value)}
-        onReady={(api) => {
-          if(value) {
-            api.blocks.render(JSON.parse(value))
-          }
-          document.querySelector('[data-tool="image"]').remove()
-        }}
-        onChange={(api, newData) => {
-          onChange({ target: { name, value: JSON.stringify(newData) } })}
-        }
-        tools={{...EditorTools, ...customImageTool}}
-        instanceRef={instance => setEditorInstance(instance)}
-        style={{border: `1px solid red`}}
-      />
+      <div style={{ border: `1px solid rgb(227, 233, 243)`, borderRadius: `2px` }}>
+        <EditorJs
+          // data={JSON.parse(value)}
+          // enableReInitialize={true}
+          onReady={(api) => {
+            if(value && JSON.parse(value).blocks.length) {
+              api.blocks.render(JSON.parse(value))
+            }
+            document.querySelector('[data-tool="image"]').remove()
+          }}
+          onChange={(api, newData) => {
+            if (newData.blocks.length) {
+              onChange({target: {name, value: JSON.stringify(newData)}})
+            }
+          }}
+          tools={{...EditorTools, ...customImageTool}}
+          instanceRef={instance => setEditorInstance(instance)}
+        />
+      </div>
       <MediaLibComponent
         toggle={mediaLibToggleFunc}
         isOpen={isMediaLibOpen}