Merge branch 'master' of github.com:payloadcms/payload

src/admin/components/forms/field-types/RichText/elements/blockquote/index.scss

@@ -0,0 +1,9 @@
+@import '../../../../../../scss/styles.scss';
+
+.rich-text-blockquote {
+  &[data-slate-node=element] {
+    margin: base(.625) 0;
+    padding-left: base(0.625);
+    border-left: 1px solid var(--theme-elevation-200);
+  }
+}

src/admin/components/forms/field-types/RichText/elements/blockquote/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import ElementButton from '../Button';
+import BlockquoteIcon from '../../../../../icons/Blockquote';
+
+import './index.scss';
+
+const Blockquote = ({ attributes, children }) => (
+  <blockquote
+    className="rich-text-blockquote"
+    {...attributes}
+  >
+    {children}
+  </blockquote>
+);
+
+const blockquote = {
+  Button: () => (
+    <ElementButton format="blockquote">
+      <BlockquoteIcon />
+    </ElementButton>
+  ),
+  Element: Blockquote,
+};
+
+export default blockquote;

src/admin/components/forms/field-types/RichText/elements/index.tsx

@@ -5,6 +5,7 @@ import h4 from './h4';
 import h5 from './h5';
 import h6 from './h6';
 import link from './link';
+import blockquote from './blockquote';
 import ol from './ol';
 import ul from './ul';
 import li from './li';
@@ -20,6 +21,7 @@ const elements = {
   h5,
   h6,
   link,
+  blockquote,
   ol,
   ul,
   li,

src/admin/components/forms/field-types/RichText/index.scss

@@ -102,7 +102,8 @@
 
   &--read-only {
     .rich-text__editor {
-      background-color: var(--theme-elevation-150);
+      background: var(--theme-elevation-200);
+      color: var(--theme-elevation-450);
       padding: base(.5);
 
       .popup button {
@@ -122,7 +123,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: var(--theme-elevation-150);
+        background-color: var(--theme-elevation-200);
         opacity: .85;
         z-index: 2;
         backdrop-filter: unset;

src/admin/components/forms/field-types/Textarea/index.scss

@@ -28,6 +28,17 @@
     }
   }
 
+  &.read-only {
+    .textarea-outer {
+      background: var(--theme-elevation-200);
+      color: var(--theme-elevation-450);
+      &:hover {
+        border-color: var(--theme-elevation-150);
+        @include shadow-sm;
+      }
+    }
+  }
+
   // This element takes exactly the same dimensions as the clone
   .textarea-inner {
     display: block;

src/admin/components/forms/field-types/Upload/Input.tsx

@@ -174,7 +174,7 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
             <FileDetails
               collection={collection}
               doc={file}
-              handleRemove={() => {
+              handleRemove={readOnly ? undefined : () => {
                 onChange(null);
               }}
             />
@@ -184,20 +184,24 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
               <div className={`${baseClass}__buttons`}>
                 <DocumentDrawerToggler
                   className={`${baseClass}__toggler`}
+                  disabled={readOnly}
                 >
                   <Button
                     buttonStyle="secondary"
                     el="div"
+                    disabled={readOnly}
                   >
                     {t('uploadNewLabel', { label: getTranslation(collection.labels.singular, i18n) })}
                   </Button>
                 </DocumentDrawerToggler>
                 <ListDrawerToggler
                   className={`${baseClass}__toggler`}
+                  disabled={readOnly}
                 >
                   <Button
                     buttonStyle="secondary"
                     el="div"
+                    disabled={readOnly}
                   >
                     {t('chooseFromExisting')}
                   </Button>
@@ -211,8 +215,8 @@ const UploadInput: React.FC<UploadInputProps> = (props) => {
           />
         </React.Fragment>
       )}
-      <DocumentDrawer onSave={onSave} />
-      <ListDrawer onSelect={onSelect} />
+      {!readOnly && <DocumentDrawer onSave={onSave} />}
+      {!readOnly && <ListDrawer onSelect={onSelect} />}
     </div>
   );
 };

src/admin/components/views/Version/RenderFieldsToDiff/fields/Text/richTextToHTML.ts

@@ -70,6 +70,10 @@ export const richTextToHTML = (content: unknown): string => {
             nodeHTML = `<h6>${richTextToHTML(node.children)}</h6>`;
             break;
 
+          case 'blockquote':
+            nodeHTML = `<blockquote>${richTextToHTML(node.children)}</blockquote>`;
+            break;
+
           case 'ul':
             nodeHTML = `<ul>${richTextToHTML(node.children)}</ul>`;
             break;

src/collections/config/schema.ts

@@ -184,6 +184,14 @@ const collectionSchema = joi.object().keys({
         format: joi.string(),
         options: joi.object(),
       }),
+      trimOptions: joi.alternatives().try(
+        joi.object().keys({
+          format: joi.string(),
+          options: joi.object(),
+        }),
+        joi.string(),
+        joi.number(),
+      ),
     }),
     joi.boolean(),
   ),

src/uploads/generateFileData.ts

@@ -56,7 +56,7 @@ export const generateFileData = async <T>({
     };
   }
 
-  const { staticDir, imageSizes, disableLocalStorage, resizeOptions, formatOptions } = collectionConfig.upload;
+  const { staticDir, imageSizes, disableLocalStorage, resizeOptions, formatOptions, trimOptions } = collectionConfig.upload;
 
   let staticPath = staticDir;
   if (staticDir.indexOf('/') !== 0) {
@@ -85,7 +85,7 @@ export const generateFileData = async <T>({
 
     if (fileIsAnimated) sharpOptions.animated = true;
 
-    if (fileSupportsResize && (resizeOptions || formatOptions)) {
+    if (fileSupportsResize && (resizeOptions || formatOptions || trimOptions)) {
       if (file.tempFilePath) {
         sharpFile = sharp(file.tempFilePath, sharpOptions);
       } else {
@@ -99,6 +99,9 @@ export const generateFileData = async <T>({
       if (formatOptions) {
         sharpFile = sharpFile.toFormat(formatOptions.format, formatOptions.options);
       }
+      if (trimOptions) {
+        sharpFile = sharpFile.trim(trimOptions);
+      }
     }
 
     if (isImage(file.mimetype)) {

src/uploads/imageResizer.ts

@@ -77,6 +77,10 @@ export default async function resizeAndSave({
         resized = resized.toFormat(desiredSize.formatOptions.format, desiredSize.formatOptions.options);
       }
 
+      if (desiredSize.trimOptions) {
+        resized = resized.trim(desiredSize.trimOptions);
+      }
+
       const bufferObject = await resized.toBuffer({
         resolveWithObject: true,
       });

src/uploads/types.ts

@@ -41,9 +41,16 @@ export type ImageUploadFormatOptions = {
   options?: Parameters<Sharp['toFormat']>[1]
 }
 
+/**
+ * Params sent to the sharp trim() function
+ * @link https://sharp.pixelplumbing.com/api-resize#trim
+ */
+export type ImageUploadTrimOptions = Parameters<Sharp['trim']>[0]
+
 export type ImageSize = ResizeOptions & {
   name: string
   formatOptions?: ImageUploadFormatOptions
+  trimOptions?: ImageUploadTrimOptions
   /**
    * @deprecated prefer position
    */
@@ -64,6 +71,7 @@ export type IncomingUploadType = {
   resizeOptions?: ResizeOptions
   /** Options for original upload file only. For sizes, set each formatOptions individually. */
   formatOptions?: ImageUploadFormatOptions
+  trimOptions?: ImageUploadTrimOptions
 }
 
 export type Upload = {
@@ -77,6 +85,7 @@ export type Upload = {
   handlers?: any[]
   resizeOptions?: ResizeOptions;
   formatOptions?: ImageUploadFormatOptions
+  trimOptions?: ImageUploadTrimOptions
 }
 
 export type File = {