feat(richtext): add blockquote

Author: demshy

packages/decap-cms-widget-richtext/src/RichtextControl/VisualEditor.js

@@ -22,6 +22,8 @@ import {
 import { createSoftBreakPlugin, createExitBreakPlugin } from '@udecode/plate-break';
 import { createListPlugin, ELEMENT_UL, ELEMENT_OL, ELEMENT_LI } from '@udecode/plate-list';
 import { createLinkPlugin, ELEMENT_LINK } from '@udecode/plate-link';
+import { createBlockquotePlugin, ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';
+import { createTrailingBlockPlugin } from '@udecode/plate-trailing-block';
 import { ClassNames } from '@emotion/react';
 import { fonts, lengths, zIndex } from 'decap-cms-ui-default';
 
@@ -35,6 +37,7 @@ import HeadingElement from './components/Element/HeadingElement';
 import ListElement from './components/Element/ListElement';
 import { markdownToSlate, slateToMarkdown } from '../serializers';
 import LinkElement from './components/Element/LinkElement';
+import BlockquoteElement from './components/Element/BlockquoteElement';
 
 function visualEditorStyles({ minimal }) {
   return `
@@ -69,9 +72,18 @@ export default function VisualEditor({ t, field, className, isDisabled, onChange
       createCodePlugin(),
       createListPlugin(),
       createLinkPlugin(),
+      createBlockquotePlugin(),
       createSoftBreakPlugin({
         options: {
-          rules: [{ hotkey: 'shift+enter' }],
+          rules: [
+            { hotkey: 'shift+enter' },
+            {
+              hotkey: 'enter',
+              query: {
+                allow: [ELEMENT_BLOCKQUOTE],
+              },
+            },
+          ],
         },
       }),
       createExitBreakPlugin({
@@ -97,13 +109,17 @@ export default function VisualEditor({ t, field, className, isDisabled, onChange
           ],
         },
       }),
+      createTrailingBlockPlugin({
+        options: { type: ELEMENT_PARAGRAPH },
+      }),
     ],
     {
       components: {
         [MARK_BOLD]: withProps(PlateLeaf, { as: 'b' }),
         [MARK_CODE]: CodeLeaf,
         [MARK_ITALIC]: withProps(PlateLeaf, { as: 'em' }),
         [ELEMENT_PARAGRAPH]: ParagraphElement,
+        [ELEMENT_BLOCKQUOTE]: BlockquoteElement,
         [ELEMENT_LINK]: LinkElement,
         [ELEMENT_H1]: withProps(HeadingElement, { variant: 'h1' }),
         [ELEMENT_H2]: withProps(HeadingElement, { variant: 'h2' }),
@@ -136,9 +152,7 @@ export default function VisualEditor({ t, field, className, isDisabled, onChange
     onChange(mdValue);
   }
 
-  const initialValue = props.value
-      ? markdownToSlate(props.value, {})
-      : emptyValue;
+  const initialValue = props.value ? markdownToSlate(props.value, {}) : emptyValue;
 
   return (
     <ClassNames>

packages/decap-cms-widget-richtext/src/RichtextControl/components/Element/BlockquoteElement.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PlateElement } from '@udecode/plate-common';
+import styled from '@emotion/styled';
+import { colors } from 'decap-cms-ui-default';
+
+const bottomMargin = '16px';
+
+const StyledBlockQuote = styled.blockquote`
+  padding-left: 16px;
+  border-left: 3px solid ${colors.background};
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: ${bottomMargin};
+`;
+
+function BlockquoteElement({ children, ...props }) {
+  return (
+    <PlateElement asChild {...props}>
+      <StyledBlockQuote>{children}</StyledBlockQuote>
+    </PlateElement>
+  );
+}
+
+export default BlockquoteElement;

packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/BlockquoteToolbarButton.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useEditorRef, focusEditor, toggleNodeType } from '@udecode/plate-common';
+import { unwrapList } from '@udecode/plate-list';
+import { ELEMENT_BLOCKQUOTE } from '@udecode/plate-block-quote';
+
+import ToolbarButton from './ToolbarButton';
+
+function BlockquoteToolbarButton(props) {
+  const editor = useEditorRef();
+
+  function handleClick() {
+    unwrapList(editor);
+    toggleNodeType(editor, { activeType: ELEMENT_BLOCKQUOTE });
+    focusEditor(editor);
+  }
+  const pressed = false;
+  return <ToolbarButton isActive={pressed} onClick={handleClick} {...props} />;
+}
+
+export default BlockquoteToolbarButton;

packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/Toolbar.js

@@ -9,6 +9,7 @@ import MarkToolbarButton from './MarkToolbarButton';
 import HeadingToolbarButton from './HeadingToolbarButton';
 import ListToolbarButton from './ListToolbarButton';
 import LinkToolbarButton from './LinkToolbarButton';
+import BlockquoteToolbarButton from './BlockquoteToolbarButton';
 
 const ToolbarContainer = styled.div`
   position: relative;
@@ -67,6 +68,14 @@ function Toolbar(props) {
           t={t}
         />
         <HeadingToolbarButton isVisible={isVisible} disabled={disabled} t={t} />
+        {isVisible('blockquote') && (
+          <BlockquoteToolbarButton
+            type="quote"
+            label={t('editor.editorWidgets.markdown.quote')}
+            icon="quote"
+            disabled={disabled}
+          />
+        )}
         <ListToolbarButton
           type="ul"
           label={t('editor.editorWidgets.markdown.bulletedList')}