tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
mauricewegner
2023-04-20 21:52:05 +02:00
parent c251801b1a
commit ed230a42e0
9 changed files with 45 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/fields/rich-text.mdx
View File

@@ -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)}

2
examples/auth/nextjs/components/RichText/serialize.tsx
View File

@@ -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>

2
examples/form-builder/nextjs/components/RichText/serialize.tsx
View File

@@ -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)}

2
examples/preview/nextjs/components/RichText/serialize.tsx
View File

@@ -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>

2
examples/redirects/nextjs/components/RichText/serialize.tsx
View File

@@ -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>

9
src/admin/components/forms/field-types/RichText/elements/blockquote/index.scss Normal file
View File

@@ -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);
}
}

25
src/admin/components/forms/field-types/RichText/elements/blockquote/index.tsx Normal file
View File

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

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

@@ -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,

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

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