first commit

examples/cms-payload/payload/fields/richText/elements.ts

@@ -0,0 +1,17 @@
+import { RichTextElement } from "payload/dist/fields/config/types";
+import label from "./label";
+import largeBody from "./largeBody";
+
+const elements: RichTextElement[] = [
+  "blockquote",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "link",
+  largeBody,
+  label,
+];
+
+export default elements;

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

@@ -0,0 +1,38 @@
+import {
+  RichTextElement,
+  RichTextField,
+  RichTextLeaf,
+} from "payload/dist/fields/config/types";
+import deepMerge from "../../utilities/deepMerge";
+import elements from "./elements";
+import leaves from "./leaves";
+
+type RichText = (
+  overrides?: Partial<RichTextField>,
+  additions?: {
+    elements?: RichTextElement[];
+    leaves?: RichTextLeaf[];
+  },
+) => RichTextField;
+
+const richText: RichText = (
+  overrides,
+  additions = {
+    elements: [],
+    leaves: [],
+  },
+) =>
+  deepMerge<RichTextField, Partial<RichTextField>>(
+    {
+      name: "richText",
+      type: "richText",
+      required: true,
+      admin: {
+        elements: [...elements, ...(additions.elements || [])],
+        leaves: [...leaves, ...(additions.leaves || [])],
+      },
+    },
+    overrides || {},
+  );
+
+export default richText;

examples/cms-payload/payload/fields/richText/label/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-label-button";
+
+const ToolbarButton: React.FC<{ path: string }> = () => (
+  <ElementButton className={baseClass} format="label">
+    <Icon />
+  </ElementButton>
+);
+
+export default ToolbarButton;

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

@@ -0,0 +1,9 @@
+@import "~payload/scss";
+
+.rich-text-label {
+  text-transform: uppercase;
+  font-family: "Roboto Mono", monospace;
+  letter-spacing: 2px;
+  font-size: base(0.5);
+  margin: 0 0 base(1);
+}

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

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

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

@@ -0,0 +1,24 @@
+/* eslint-disable no-use-before-define */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import React from "react";
+
+const Icon = () => (
+  <svg
+    width="25"
+    height="25"
+    viewBox="0 0 25 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.08884 15.2753L8.79758 17.7598H10.916L7.28663 6.41986H5.46413L1.75684 17.7598H3.88308L4.59962 15.2753H8.08884ZM5.10586 13.5385L6.36759 9.20812L7.59816 13.5385H5.10586Z"
+      fill="currentColor"
+    />
+    <path
+      d="M21.1778 15.2753L21.8865 17.7598H24.005L20.3756 6.41986H18.5531L14.8458 17.7598H16.972L17.6886 15.2753H21.1778ZM18.1948 13.5385L19.4565 9.20812L20.6871 13.5385H18.1948Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Icon;

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

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

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

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

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;

examples/cms-payload/payload/fields/richText/leaves.ts

@@ -0,0 +1,5 @@
+import { RichTextLeaf } from "payload/dist/fields/config/types";
+
+const defaultLeaves: RichTextLeaf[] = ["bold", "italic", "underline"];
+
+export default defaultLeaves;