feat: add rich-text blockquote element, change quote node type to blockquote

docs/fields/rich-text.mdx

@@ -271,7 +271,7 @@ const serialize = (children) => children.map((node, i) => {
           {serialize(node.children)}
         </h6>
       );
-    case 'quote':
+    case 'blockquote':
       return (
         <blockquote key={i}>
           {serialize(node.children)}

examples/auth/nextjs/components/RichText/serialize.tsx

@@ -69,7 +69,7 @@ const serialize = (children: Children): React.ReactElement[] =>
         return <h5 key={i}>{serialize(node.children)}</h5>
       case 'h6':
         return <h6 key={i}>{serialize(node.children)}</h6>
-      case 'quote':
+      case 'blockquote':
         return <blockquote key={i}>{serialize(node.children)}</blockquote>
       case 'ul':
         return <ul key={i}>{serialize(node.children)}</ul>

examples/form-builder/nextjs/components/RichText/serialize.tsx

@@ -114,7 +114,7 @@ const serialize = (children: Children): React.ReactElement[] => children.map((no
           {serialize(node.children)}
         </h6>
       );
-    case 'quote':
+    case 'blockquote':
       return (
         <blockquote key={i}>
           {serialize(node.children)}

examples/preview/nextjs/components/RichText/serialize.tsx

@@ -69,7 +69,7 @@ const serialize = (children: Children): React.ReactElement[] =>
         return <h5 key={i}>{serialize(node.children)}</h5>
       case 'h6':
         return <h6 key={i}>{serialize(node.children)}</h6>
-      case 'quote':
+      case 'blockquote':
         return <blockquote key={i}>{serialize(node.children)}</blockquote>
       case 'ul':
         return <ul key={i}>{serialize(node.children)}</ul>

examples/redirects/nextjs/components/RichText/serialize.tsx

@@ -67,7 +67,7 @@ const serialize = (children: Children): React.ReactElement[] =>
         return <h5 key={i}>{serialize(node.children)}</h5>
       case 'h6':
         return <h6 key={i}>{serialize(node.children)}</h6>
-      case 'quote':
+      case 'blockquote':
         return <blockquote key={i}>{serialize(node.children)}</blockquote>
       case 'ul':
         return <ul key={i}>{serialize(node.children)}</ul>

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/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;