resolves css conflicts with master

src/client/components/elements/Popup/index.scss

@@ -26,7 +26,8 @@
 
   &__scroll {
     padding: base(1);
-    overflow-y: scroll;
+    overflow-y: auto;
+    width: calc(100% + var(--scrollbar-width));
     white-space: nowrap;
   }
 

src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.scss

@@ -25,20 +25,21 @@
   }
 
   input {
-    background: none;
+    background: transparent;
     border: none;
+    border-radius: $style-radius-s;
     width: 100%;
     margin-left: base(.5);
 
+    &:hover {
+      box-shadow: inset 0px -2px 0px -1px $color-light-gray;
+    }
+
     &:hover,
     &:focus {
       outline: 0;
     }
 
-    &:hover {
-      box-shadow: inset 0px -2px 0px -1px $color-light-gray;
-    }
-
     &:focus {
       box-shadow: none;
     }

src/client/components/forms/DraggableSection/SectionTitle/index.scss

@@ -3,5 +3,4 @@
 .section-title {
   display: flex;
   align-items: center;
-  margin-bottom: base(.75);
 }

src/client/components/forms/DraggableSection/index.scss

@@ -42,7 +42,6 @@
   &__content-wrapper {
     display: flex;
     position: relative;
-    padding-top: base(.75);
   }
 
   &.is-closed {
@@ -52,7 +51,15 @@
   }
 
   &__section-header {
+    @include blur-bg(white);
     display: flex;
+    position: sticky;
+    top: $top-header-offset;
+    z-index: 1;
+    padding: base(.75) base(.75);
+    margin-left: - base(.75);
+    margin-right: - base(.75);
+    width: calc(100% + #{base(1.5)});
 
     .toggle-collapse {
       margin: 0 0 0 auto;
@@ -127,6 +134,10 @@
     .position-panel__move-backward {
       opacity: 1;
     }
+
+    &__section-header {
+      top: $top-header-offset-m;
+    }
   }
 }
 

src/client/components/forms/field-types/RichText/CommandToolbar/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import { useSlate, useFocused } from 'slate-react';
 import { ToolbarElement, ToolbarMark, ToolbarList } from '@udecode/slate-plugins';
 

src/client/components/forms/field-types/RichText/icons/Headings/H3/index.js

@@ -12,12 +12,12 @@ const H3Icon = () => {
     >
       <path
         fill="none"
-        d="M0 0h24v24H0z"
-      />
+        d="M.01 0h24v24h-24z"
+      ></path>
       <path
         className="fill"
-        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8a2 2 0 01-2 2h-2v2h4v2H9v-4a2 2 0 012-2h2V9H9V7h4a2 2 0 012 2v2z"
-      />
+        d="M19.01 3h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7.5c0 .83-.67 1.5-1.5 1.5.83 0 1.5.67 1.5 1.5V15a2 2 0 01-2 2h-4v-2h4v-2h-2v-2h2V9h-4V7h4a2 2 0 012 2v1.5z"
+      ></path>
     </svg>
   );
 };

src/client/components/forms/field-types/RichText/index.js

@@ -15,10 +15,10 @@ import {
   ListPlugin,
   ParagraphPlugin,
   pipe,
+  ExitBreakPlugin,
   SoftBreakPlugin,
   StrikethroughPlugin,
   UnderlinePlugin,
-  withList,
   withToggleType,
 } from '@udecode/slate-plugins';
 
@@ -63,7 +63,6 @@ const plugins = [
 const withPlugins = [
   withReact,
   withHistory,
-  withList(nodeTypes),
   withToggleType({ defaultType: nodeTypes.typeP }),
 ];
 
@@ -101,19 +100,6 @@ const RichText = (props) => {
     errorMessage,
   } = fieldType;
 
-  const [internalState, setInternalState] = useState(value);
-  const [valueHasLoaded, setValueHasLoaded] = useState(false);
-
-  useEffect(() => { setValue(internalState); }, [setValue, internalState]);
-
-  useEffect(() => {
-    // ! could use review
-    if (value !== undefined && !valueHasLoaded) {
-      setInternalState(value);
-      setValueHasLoaded(true);
-    }
-  }, [value, valueHasLoaded]);
-
   const classes = [
     baseClass,
     'field-type',
@@ -141,8 +127,8 @@ const RichText = (props) => {
       <div className={`${baseClass}__wrapper`}>
         <Slate
           editor={editor}
-          value={internalState ?? emptyRichTextNode}
-          onChange={(val) => setInternalState(val)}
+          value={value ?? emptyRichTextNode}
+          onChange={val => setValue(val)}
         >
           <CommandToolbar enabledPluginList={plugins} />
 

src/client/components/forms/field-types/RichText/types/index.js

@@ -1,11 +1,29 @@
 import {
-  ACTION_ITEM,
-  BLOCKQUOTE,
-  CODE_BLOCK,
-  HeadingType,
-  IMAGE,
-  LINK,
-  ListType,
+  ELEMENT_PARAGRAPH,
+  ELEMENT_MENTION,
+  ELEMENT_BLOCKQUOTE,
+  ELEMENT_CODE_BLOCK,
+  ELEMENT_LINK,
+  ELEMENT_IMAGE,
+  ELEMENT_MEDIA_EMBED,
+  ELEMENT_TODO_LI,
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+  ELEMENT_ALIGN_LEFT,
+  ELEMENT_ALIGN_CENTER,
+  ELEMENT_ALIGN_RIGHT,
+  ELEMENT_UL,
+  ELEMENT_OL,
+  ELEMENT_LI,
+  ELEMENT_TABLE,
+  ELEMENT_TH,
+  ELEMENT_TR,
+  ELEMENT_TD,
+
   MARK_BOLD,
   MARK_CODE,
   MARK_HIGHLIGHT,
@@ -15,43 +33,31 @@ import {
   MARK_SUBSCRIPT,
   MARK_SUPERSCRIPT,
   MARK_UNDERLINE,
-  MEDIA_EMBED,
-  MENTION,
-  PARAGRAPH,
-  TableType,
 } from '@udecode/slate-plugins';
 
-export const headingTypes = [
-  HeadingType.H1,
-  HeadingType.H2,
-  HeadingType.H3,
-  HeadingType.H4,
-  HeadingType.H5,
-  HeadingType.H6,
-];
-
 export const nodeTypes = {
   // elements
-  typeP: PARAGRAPH,
-  typeMention: MENTION,
-  typeBlockquote: BLOCKQUOTE,
-  typeCodeBlock: CODE_BLOCK,
-  typeLink: LINK,
-  typeImg: IMAGE,
-  typeMediaEmbed: MEDIA_EMBED,
-  typeActionItem: ACTION_ITEM,
-  typeTable: TableType.TABLE,
-  typeTr: TableType.ROW,
-  typeTd: TableType.CELL,
-  typeUl: ListType.UL,
-  typeOl: ListType.OL,
-  typeLi: ListType.LI,
-  typeH1: HeadingType.H1,
-  typeH2: HeadingType.H2,
-  typeH3: HeadingType.H3,
-  typeH4: HeadingType.H4,
-  typeH5: HeadingType.H5,
-  typeH6: HeadingType.H6,
+  typeP: ELEMENT_PARAGRAPH,
+  typeMention: ELEMENT_MENTION,
+  typeBlockquote: ELEMENT_BLOCKQUOTE,
+  typeCodeBlock: ELEMENT_CODE_BLOCK,
+  typeLink: ELEMENT_LINK,
+  typeImg: ELEMENT_IMAGE,
+  typeMediaEmbed: ELEMENT_MEDIA_EMBED,
+  typeTodoLi: ELEMENT_TODO_LI,
+  typeTable: ELEMENT_TABLE,
+  typeTh: ELEMENT_TH,
+  typeTr: ELEMENT_TR,
+  typeTd: ELEMENT_TD,
+  typeUl: ELEMENT_UL,
+  typeOl: ELEMENT_OL,
+  typeLi: ELEMENT_LI,
+  typeH1: ELEMENT_H1,
+  typeH2: ELEMENT_H2,
+  typeH3: ELEMENT_H3,
+  typeH4: ELEMENT_H4,
+  typeH5: ELEMENT_H5,
+  typeH6: ELEMENT_H6,
   // marks
   typeBold: MARK_BOLD,
   typeItalic: MARK_ITALIC,

src/client/scss/app.scss

@@ -7,6 +7,7 @@
   --breakpoint-m-width  : #{$breakpoint-m-width};
   --breakpoint-l-width  : #{$breakpoint-l-width};
   --z-modal: #{$z-modal};
+  --scrollbar-width: 17px;
 }
 
 /////////////////////////////

src/client/scss/vars.scss

@@ -60,6 +60,12 @@ $style-stroke-width-m : 2px;
 //////////////////////////////
 $top-header-offset: 120px;
 
+//////////////////////////////
+// MISC
+//////////////////////////////
+$top-header-offset: base(4);
+$top-header-offset-m: base(3);
+
 //////////////////////////////
 // SHADOWS
 //////////////////////////////
@@ -102,8 +108,8 @@ $top-header-offset: 120px;
   }
 }
 
-@mixin blur-bg {
-  background: rgba($color-background-gray, .7);
+@mixin blur-bg($color: $color-background-gray) {
+  background: rgba($color, .7);
   backdrop-filter: saturate(180%) blur(5px);
 }
 

src/collections/operations/local/find.js

@@ -0,0 +1,29 @@
+async function find(options) {
+  const {
+    collection: collectionSlug,
+    depth,
+    page,
+    limit,
+    where,
+    locale,
+    fallbackLocale,
+  } = options;
+
+  const collection = this.collections[collectionSlug];
+
+  return this.operations.collections.find({
+    depth,
+    page,
+    limit,
+    where,
+    collection,
+    overrideAccess: true,
+    req: {
+      payloadAPI: 'local',
+      locale,
+      fallbackLocale,
+    },
+  });
+}
+
+module.exports = find;

src/collections/operations/local/index.js

@@ -0,0 +1,13 @@
+const find = require('./find');
+const findOne = require('./findOne');
+const create = require('./create');
+const update = require('./update');
+const localDelete = require('./delete');
+
+module.exports = {
+  find,
+  findOne,
+  create,
+  update,
+  localDelete,
+};

src/express/middleware/errorHandler.js

@@ -1,13 +1,13 @@
 const httpStatus = require('http-status');
 const formatErrorResponse = require('../responses/formatError');
+const logger = require('../../utilities/logger')();
 
-const errorHandler = config => async (err, req, res, next) => {
+const errorHandler = (config) => async (err, req, res) => {
   const data = formatErrorResponse(err);
   let response;
   let status = err.status || httpStatus.INTERNAL_SERVER_ERROR;
 
-  // TODO: use payload logging
-  console.error(err.stack);
+  logger.error(err.stack);
 
   if (config.debug && config.debug === true) {
     data.stack = err.stack;

src/express/middleware/index.js

@@ -9,22 +9,26 @@ const localizationMiddleware = require('../../localization/middleware');
 const authenticate = require('./authenticate');
 const identifyAPI = require('./identifyAPI');
 
-const middleware = (config) => [
+const middleware = (payload) => [
   passport.initialize(),
   identifyAPI('REST'),
-  authenticate(config),
+  authenticate(payload.config),
   express.json(),
   methodOverride('X-HTTP-Method-Override'),
   qsMiddleware({ depth: 10 }),
   bodyParser.urlencoded({ extended: true }),
-  compression(config.compression),
-  localizationMiddleware(config.localization),
+  compression(payload.config.compression),
+  localizationMiddleware(payload.config.localization),
   fileUpload({
     parseNested: true,
   }),
+  (req, _, next) => {
+    req.payload = payload;
+    return next();
+  },
   (req, res, next) => {
-    if (config.cors) {
-      if (config.cors.indexOf(req.headers.origin) > -1) {
+    if (payload.config.cors) {
+      if (payload.config.cors.indexOf(req.headers.origin) > -1) {
         res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
         res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
       }

src/index.js

@@ -23,6 +23,8 @@ const identifyAPI = require('./express/middleware/identifyAPI');
 const errorHandler = require('./express/middleware/errorHandler');
 const performFieldOperations = require('./fields/performFieldOperations');
 
+const localOperations = require('./collections/operations/local');
+
 class Payload {
   constructor(options) {
     logger.info('Starting Payload...');
@@ -56,7 +58,7 @@ class Payload {
     // Setup & initialization
     connectMongoose(this.config.mongoURL);
 
-    this.router.use(...expressMiddleware(this.config, this.collections));
+    this.router.use(...expressMiddleware(this));
 
     this.initAuth();
     this.initCollections();
@@ -105,6 +107,12 @@ class Payload {
   authenticate() {
     return authenticate(this.config);
   }
+
+  async find(options) {
+    let { find } = localOperations;
+    find = find.bind(this);
+    return find(options);
+  }
 }
 
 module.exports = Payload;