react-bricks RichText

BodyText.js

import React from "react";
import { Text, Plain, RichText, Image, Link, types } from "react-bricks";

import BlockNames from "../BlockNames";
import Colors from "../Colors";

//=============================
// Component to be rendered
//=============================
const BodyText = ({ onChange, backgroundColor, title, text, textColor }) => {
  return (
    <section
      style={{ backgroundColor }}
      className="px-4 py-16 overflow-hidden xl:py-36 sm:px-6 lg:px-8"
    >
      <div className="mx-auto max-w-max-content lg:max-w-7xl">
        <div className="relative z-10 mb-8 md:mb-2 md:px-6">
          <div
            className="text-base max-w-prose lg:max-w-none"
            style={{ color: textColor }}
          >
            {/* <p className="font-semibold tracking-wide text-indigo-600 uppercase leading-6">
                Transactions
              </p> */}

            <Text
              renderBlock={(props) => (
                <h1 className="mt-2 text-3xl font-extrabold tracking-tight text-gray-900 leading-8 sm:text-4xl sm:leading-10">
                  {props.children}
                </h1>
              )}
              value={title}
              placeholder="Type a title..."
              propName="title"
              onChange={onChange}
            />
          </div>
        </div>
        <div className="relative">
          <div className="relative md:p-6">
            <div className="mb-8 lg:grid lg:grid-cols-2 lg:gap-6">
              <RichText
                renderBlock={(props) => (
                  <p className="mb-6 text-gray-500 prose prose-lg lg:max-w-none lg:mb-0">
                    {props.children}
                  </p>
                )}
                value={text}
                placeholder="Type a richtext..."
                propName="text"
                onChange={onChange}
                allowedFeatures={[
                  types.RichTextFeatures.Bold,
                  types.RichTextFeatures.Highlight,
                  types.RichTextFeatures.Link,
                  types.RichTextFeatures.UL,
                ]}
                renderUL={(props) => (
                  <ul>
                    <li>{props.children}</li>
                  </ul>
                )}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
//=============================
// Get Default Props
//=============================
const getDefaultProps = () => ({
  backgroundColor: Colors.bgDarkGray.value,
  textColor: Colors.white.value,
  title: Plain.deserialize("We develop beautiful web applications"),
  text: Plain.deserialize("We develop beautiful web applications"),
});
//=============================
// Side Edit Props
//=============================
const sideEditProps = [
  {
    name: "backgroundColor",
    label: "Background",
    type: types.SideEditPropType.Select,
    selectOptions: {
      display: types.OptionsDisplay.Color,
      options: [
        Colors.white,
        Colors.lightGray,
        Colors.darkGray,
        Colors.lightPurple,
        Colors.bgDarkGray,
      ],
    },
  },
  {
    name: "textColor",
    label: "Text Color",
    type: types.SideEditPropType.Select,
    selectOptions: {
      display: types.OptionsDisplay.Color,
      options: [
        Colors.white,
        Colors.lightGray,
        Colors.darkGray,
        Colors.lightPurple,
        Colors.bgDarkGray,
      ],
    },
  },
];
//=============================
// Exported BlockType Schema
//=============================
const schema = {
  name: BlockNames.BodyText,
  label: "Fließtext",
  superType: types.BlockSuperType.Single,
  render: (props) => <BodyText {...props} />,
  getDefaultProps,
  sideEditProps,
  textEditProps: ["title", "text"],
};

export default schema;