first commit

examples/cms-payload/payload/fields/richText/largeBody/Button/index.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line no-use-before-define
+import React from "react";
+import { ElementButton } from "payload/components/rich-text";
+import Icon from "../Icon";
+
+const baseClass = "rich-text-large-body-button";
+
+const ToolbarButton: React.FC<{ path: string }> = () => (
+  <ElementButton className={baseClass} format="large-body">
+    <Icon />
+  </ElementButton>
+);
+
+export default ToolbarButton;

examples/cms-payload/payload/fields/richText/largeBody/Element/index.scss

@@ -0,0 +1,5 @@
+@import "~payload/scss";
+
+.rich-text-large-body {
+  font-size: base(0.8);
+}

examples/cms-payload/payload/fields/richText/largeBody/Element/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import "./index.scss";
+
+const baseClass = "rich-text-large-body";
+
+const LargeBodyElement: React.FC<{
+  attributes: any;
+  element: any;
+  children: React.ReactNode;
+}> = ({ attributes, children }) => (
+  <div {...attributes}>
+    <span className={baseClass}>{children}</span>
+  </div>
+);
+export default LargeBodyElement;

examples/cms-payload/payload/fields/richText/largeBody/Icon/index.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable no-use-before-define */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import React from "react";
+
+const Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
+    <path
+      d="M6.61695 9.94917L3.16602 19.25H4.65415L5.37256 17.2102H9.41361L10.1448 19.25H11.7356L8.23337 9.94917H6.61695ZM5.80874 15.9787L7.37384 11.5399L8.96461 15.9787H5.80874Z"
+      fill="currentColor"
+    />
+    <path
+      d="M14.2739 5.75H16.7691L21.8339 19.25H19.2457L18.1843 16.2521H12.7098L11.667 19.25H9.24635L14.2739 5.75ZM13.3988 14.2783H17.4767L15.4284 8.48724L13.3988 14.2783Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Icon;

examples/cms-payload/payload/fields/richText/largeBody/index.ts

@@ -0,0 +1,11 @@
+import { RichTextCustomElement } from "payload/types";
+import Button from "./Button";
+import Element from "./Element";
+import withLargeBody from "./plugin";
+
+export default {
+  name: "large-body",
+  Button,
+  Element,
+  plugins: [withLargeBody],
+} as RichTextCustomElement;

examples/cms-payload/payload/fields/richText/largeBody/plugin.ts

@@ -0,0 +1,11 @@
+const withLargeBody = (incomingEditor) => {
+  const editor = incomingEditor;
+  const { shouldBreakOutOnEnter } = editor;
+
+  editor.shouldBreakOutOnEnter = (element) =>
+    element.type === "large-body" ? true : shouldBreakOutOnEnter(element);
+
+  return editor;
+};
+
+export default withLargeBody;