@soul-refiner/design-system 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "main": "src/index.ts",
   "license": "MIT",
   "publishConfig": {

package/src/components/actions/dropdown/dropdown.tsx

@@ -180,7 +180,8 @@ const Dropdown = ({
     >
       {React.cloneElement(
         trigger,
-        typeof trigger.type === 'string'
+        typeof trigger.type === 'string' ||
+          (trigger.type as any)?.displayName !== 'Button'
           ? { onClick: handleOpen }
           : { isDropdownOpen: open, onClick: handleOpen }
       )}
@@ -254,7 +255,7 @@ export interface DropdownOptionProps {
   color?: string;
   disabled?: boolean;
   icon?: React.ReactElement;
-  label: React.ReactNode;
+  label?: React.ReactNode;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
   selected: boolean;
   sublabel?: string;
@@ -285,15 +286,17 @@ const Option = ({
     >
       {checkbox ? <Checkbox selected={selected} /> : icon}
       <Box $dir="column" $display="flex">
-        <P
-          $color="grey-4"
-          $fontSize={14}
-          $lineHeight={20}
-          $mediumBold
-          $textClampLines={1}
-        >
-          {label}
-        </P>
+        {label && (
+          <P
+            $color="grey-4"
+            $fontSize={14}
+            $lineHeight={20}
+            $mediumBold
+            $textClampLines={1}
+          >
+            {label}
+          </P>
+        )}
         {sublabel && (
           <P
             $color="grey-4"

package/src/components/editor/constants.ts

@@ -0,0 +1,288 @@
+export {
+  ELEMENT_BLOCKQUOTE,
+  ELEMENT_CODE_BLOCK,
+  ELEMENT_CODE_LINE,
+  ELEMENT_CODE_SYNTAX,
+  ELEMENT_DEFAULT,
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+  ELEMENT_HR,
+  ELEMENT_IMAGE,
+  ELEMENT_LI,
+  ELEMENT_LIC,
+  ELEMENT_LINK,
+  ELEMENT_MEDIA,
+  ELEMENT_MEDIA_EMBED,
+  ELEMENT_MENTION,
+  ELEMENT_MENTION_INPUT,
+  ELEMENT_OL,
+  ELEMENT_PARAGRAPH,
+  ELEMENT_TABLE,
+  ELEMENT_TD,
+  ELEMENT_TH,
+  ELEMENT_TODO_LI,
+  ELEMENT_TR,
+  ELEMENT_UL,
+  MARK_BG_COLOR,
+  MARK_BOLD,
+  MARK_CODE,
+  MARK_COLOR,
+  MARK_FONT_FAMILY,
+  MARK_FONT_SIZE,
+  MARK_FONT_WEIGHT,
+  MARK_HIGHLIGHT,
+  MARK_ITALIC,
+  MARK_KBD,
+  MARK_SEARCH_HIGHLIGHT,
+  MARK_STRIKETHROUGH,
+  MARK_SUBSCRIPT,
+  MARK_SUPERSCRIPT,
+  MARK_UNDERLINE,
+} from '@udecode/plate';
+
+export const ELEMENT_AUDIO = 'audio';
+export const ELEMENT_BIBLE_QUOTE = 'bible-quote';
+export const ELEMENT_BUTTON = 'button';
+export const ELEMENT_EXAMPLE = 'example';
+export const ELEMENT_FOOTNOTE = 'footnote';
+export const ELEMENT_PAYWALL = 'paywall';
+export const ELEMENT_POLL = 'poll';
+export const ELEMENT_QA = 'q-n-a';
+export const ELEMENT_RECIPE = 'recipe';
+export const ELEMENT_VIDEO = 'video';
+
+export const BUTTON_COMMENT = 'button-comment';
+export const BUTTON_GIFT_SUBSCRIPTION = 'button-gift-subscription';
+export const BUTTON_LINK = 'button-link';
+export const BUTTON_SHARE = 'button-share';
+export const BUTTON_SHARE_PAGE = 'button-share-page';
+export const BUTTON_SIGNUP = 'signup';
+export const BUTTON_SPECIAL_OFFER = 'button-special-offer';
+export const BUTTON_SUBSCRIBE = 'button-subscribe';
+
+export const COLORS = [
+  'var(--color-turquoise-5)',
+  'var(--color-green-5)',
+  'var(--color-blue-5)',
+  'var(--color-purple-5)',
+  'var(--color-yellow-5)',
+  'var(--color-orange-5)',
+  'var(--color-red-5)',
+];
+
+export const PLACEHOLDER = 'This is a placeholder';
+
+export const DEFAULT_CONTENT = [
+  {
+    type: 'h1',
+    children: [
+      {
+        text: 'Module 1:  The Warrior Identity',
+        bold: true,
+      },
+    ],
+  },
+  // {
+  //   id: "video-234jlnlknsdlkfjwlkjaa",
+  //   parentId: "course-1lk4j3k4jlkj2l4k2j34lkj",
+  //   children: [
+  //     {
+  //       text: "The DNA of a Warrior",
+  //     },
+  //   ],
+  //   captions: [],
+  //   duration: 3765,
+  //   source: "",
+  //   synopsis:
+  //     "Understanding the battlefield is the first key to winning the war for sexual purity. In this episode, you will discover hell's strategies against the 21st Century Church and be introduced to the four components of the noose of sexual bondage. Learn the first key steps to freedom and how to stay pure.",
+  //   thumbnail: "video-thumbnail.jpg",
+  //   title: "The DNA of a Warrior",
+  //   type: "video",
+  // },
+  // {
+  //   type: "p",
+  //   children: [
+  //     {
+  //       text: "Welcome to Warpath. You’re about to embark on a journey towards lifelong healing, freedom and victory. This is a season of training. It’s sanctification on steroids, not for the faint-hearted, but for those who truly desire to live the rest of their lives for Jesus. No reserves, no retreats, no regrets.",
+  //     },
+  //     {
+  //       type: "footnote",
+  //       children: [
+  //         {
+  //           text: "This is a footnote",
+  //         },
+  //       ],
+  //     },
+  //     {
+  //       text: " What was once your deepest, darkest secret will now become the word of your testimony that heals and liberates others.",
+  //     },
+  //   ],
+  // },
+  // {
+  //   type: "q-n-a",
+  //   children: [
+  //     {
+  //       type: "p",
+  //       children: [
+  //         {
+  //           text: "Ask your question...",
+  //         },
+  //       ],
+  //     },
+  //   ],
+  // },
+  {
+    type: 'p',
+    children: [
+      {
+        text: 'In this new season, God is calling you up. He’s calling you to a higher level, a place where you’re no longer part of the problem but are becoming a part of the solution.',
+      },
+      // {
+      //   type: "footnote",
+      //   children: [
+      //     {
+      //       text: "This is another footnote",
+      //     },
+      //   ],
+      // },
+      {
+        text: '',
+      },
+    ],
+  },
+  {
+    type: 'blockquote',
+    children: [
+      {
+        text: '"Warpath isn’t about just winning for you; that’s the beginning. Warpath is about you taking the battle and winning for others so they can have their families, and their marriages, and their destinies." \n— ',
+      },
+      {
+        text: 'Dr. Doug Weiss',
+        italic: true,
+      },
+    ],
+  },
+  {
+    type: 'hr',
+    children: [
+      {
+        text: '',
+      },
+    ],
+  },
+  {
+    type: 'h2',
+    children: [
+      {
+        text: 'Lesson Overview',
+        bold: true,
+      },
+    ],
+  },
+  {
+    type: 'h3',
+    align: 'center',
+    children: [
+      {
+        text: 'THE WARRIOR IDENTITY',
+        bold: true,
+      },
+    ],
+  },
+  {
+    type: 'hr',
+    children: [
+      {
+        text: '',
+      },
+    ],
+  },
+  {
+    type: 'img',
+    url: 'https://source.unsplash.com/1600x900/?christian',
+    children: [
+      {
+        text: '',
+      },
+    ],
+  },
+  {
+    type: 'p',
+    children: [
+      {
+        text: 'Identity: You will have to grasp your true identity in Christ. You cannot look at this as a “what”, but instead about a “who”. We must become more like Christ, because He is a warrior.',
+      },
+    ],
+  },
+  {
+    type: 'p',
+    children: [
+      {
+        text: 'A different DNA: As a warrior, your spiritual genetic code will be different from those who haven’t tasted the victory and grace you’ve experienced from this battle. You’ve experienced truth as a person: Jesus; and it has forever changed you. You’ve been set apart as a “fighting man”, no longer a civilian idly consumed by the cares of this world, but a warrior who’s passionate about the Kingdom and craving some sweet revenge.',
+      },
+    ],
+  },
+  {
+    type: 'code_block',
+    lang: 'typescript',
+    children: [
+      {
+        type: 'code_line',
+        children: [
+          {
+            text: 'const variable = "DO_NOT_USE"',
+          },
+        ],
+      },
+    ],
+  },
+  // {
+  //   type: "paywall",
+  //   children: [
+  //     {
+  //       type: "h2",
+  //       children: [
+  //         {
+  //           text: "Keep reading with a paid subscription",
+  //         },
+  //       ],
+  //     },
+  //     {
+  //       type: "p",
+  //       children: [
+  //         {
+  //           text: "Subscribe to ",
+  //         },
+  //         {
+  //           text: "Soul Refiner",
+  //           italic: true,
+  //         },
+  //         {
+  //           text: " to keep reading this content.",
+  //         },
+  //       ],
+  //     },
+  //     {
+  //       type: "button",
+  //       buttonType: "button-subscribe",
+  //       children: [
+  //         {
+  //           text: "Get Access",
+  //         },
+  //       ],
+  //     },
+  //   ],
+  // },
+  {
+    type: 'p',
+    children: [
+      {
+        text: '',
+      },
+    ],
+  },
+];

package/src/components/editor/editor.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+import { createPlugins, Plate, PlateProvider, TElement } from '@udecode/plate';
+import { DEFAULT_CONTENT, PLACEHOLDER } from './constants';
+import { EditorBar } from './navbar';
+import { plateUI } from './plate';
+import { blocks, inline, marks, utils } from './plugins';
+
+const plugins = createPlugins([...blocks, ...inline, ...marks, ...utils], {
+  components: plateUI,
+});
+
+export interface EditorProps {
+  communityName: string;
+  editable: boolean;
+  onChange: (newNodes: TElement[]) => void;
+}
+
+export const Editor = ({ communityName, editable, onChange }: EditorProps) => {
+  return (
+    <PlateProvider
+      id="main"
+      initialValue={DEFAULT_CONTENT}
+      onChange={onChange}
+      plugins={plugins}
+    >
+      <Wrapper>
+        <EditorBar communityName={communityName} />
+        <Plate
+          id="main"
+          editableProps={{
+            readOnly: !editable,
+            spellCheck: true,
+            autoFocus: true,
+            placeholder: PLACEHOLDER,
+          }}
+        />
+      </Wrapper>
+    </PlateProvider>
+  );
+};
+
+const Wrapper = styled.div`
+  * {
+    font-family: Inter;
+  }
+
+  & > [data-slate-editor='true'] > * {
+    margin: 24px 0px;
+  }
+
+  position: relative;
+  padding: 24px;
+  max-width: 1200px;
+  margin: 98px auto 0px;
+`;

package/src/components/editor/index.ts

@@ -0,0 +1,2 @@
+export { Editor } from './editor';
+export type { EditorProps } from './editor';

package/src/components/editor/navbar/alignment_dropdown.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  Alignment,
+  AlignToolbarButton,
+  isCollapsed,
+  PlateEditor,
+  setAlign,
+  someNode,
+} from '@udecode/plate';
+import { Dropdown } from 'components';
+import {
+  PlayerListPlay,
+  AlignCenter,
+  AlignJustified,
+  AlignLeft,
+  AlignRight,
+} from 'icons';
+
+export interface AlignmentDropdownProps {
+  editorRef: PlateEditor;
+}
+
+export const AlignmentDropdown = ({ editorRef }: AlignmentDropdownProps) => {
+  const handleAlign = (event: React.FormEvent) => {
+    const value = (event.target as HTMLElement)?.getAttribute(
+      'data-value'
+    ) as Alignment | null;
+
+    if (!value) return;
+
+    setAlign(editorRef, {
+      value: value,
+    });
+  };
+
+  const alignment = (() => {
+    if (!isCollapsed(editorRef?.selection)) {
+      return 'multiple-lines';
+    } else if (
+      someNode(editorRef, { match: { align: 'center' } }) ? true : undefined
+    ) {
+      return 'center';
+    } else if (
+      someNode(editorRef, { match: { align: 'right' } }) ? true : undefined
+    ) {
+      return 'right';
+    } else if (
+      someNode(editorRef, { match: { align: 'justify' } }) ? true : undefined
+    ) {
+      return 'justify';
+    } else {
+      return 'left';
+    }
+  })();
+
+  return (
+    <Dropdown
+      closeOnBlur={false}
+      closeOnChange={false}
+      onChange={handleAlign}
+      maintainState={false}
+      trigger={<PlayerListPlay size={24} color="grey-5" />}
+    >
+      <AlignToolbarButton
+        as="div"
+        active={alignment === 'left' ? true : undefined}
+        data-value="left"
+        value="left"
+        icon={<AlignLeft size={24} color="grey-5" />}
+      />
+      <AlignToolbarButton
+        as="div"
+        active={alignment === 'center' ? true : undefined}
+        data-value="center"
+        value="center"
+        icon={<AlignCenter size={24} color="grey-5" />}
+      />
+      <AlignToolbarButton
+        as="div"
+        active={alignment === 'right' ? true : undefined}
+        data-value="right"
+        value="right"
+        icon={<AlignRight size={24} color="grey-5" />}
+      />
+      <AlignToolbarButton
+        as="div"
+        active={alignment === 'justify' ? true : undefined}
+        data-value="justify"
+        value="justify"
+        icon={<AlignJustified size={24} color="grey-5" />}
+      />
+    </Dropdown>
+  );
+};

package/src/components/editor/navbar/index.ts

@@ -0,0 +1,2 @@
+export { EditorBar } from './navbar';
+export type { EditorBarProps } from './navbar';

package/src/components/editor/navbar/navbar.tsx

@@ -0,0 +1,336 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  Alignment,
+  AlignToolbarButton,
+  focusEditor,
+  getPluginType,
+  // getPreventDefaultHandler,
+  ImageToolbarButton,
+  insertImage,
+  insertNodes,
+  isCollapsed,
+  LinkToolbarButton,
+  MarkToolbarButton,
+  PlateEditor,
+  setMarks,
+  setAlign,
+  someNode,
+  toggleIndentList,
+  toggleNodeType,
+  ToolbarButton,
+  usePlateEditorRef,
+  usePlateEditorState,
+} from '@udecode/plate';
+
+import { Tooltip } from 'components';
+import {
+  Bold,
+  Dollar,
+  FileCode,
+  Italic,
+  Link,
+  ListOrdered,
+  ListUnordered,
+  Quote,
+  Redo,
+  Strikethrough,
+  Underline,
+  Undo,
+} from 'icons';
+import {
+  BUTTON_SUBSCRIBE,
+  ELEMENT_BLOCKQUOTE,
+  ELEMENT_BUTTON,
+  ELEMENT_DEFAULT,
+  ELEMENT_H2,
+  ELEMENT_PARAGRAPH,
+  ELEMENT_PAYWALL,
+  ELEMENT_QA,
+  MARK_BOLD,
+  MARK_CODE,
+  MARK_ITALIC,
+  MARK_HIGHLIGHT,
+  MARK_STRIKETHROUGH,
+  MARK_SUBSCRIPT,
+  MARK_SUPERSCRIPT,
+  MARK_UNDERLINE,
+} from '../constants';
+import { AlignmentDropdown } from './alignment_dropdown';
+
+export interface EditorBarProps {
+  communityName: string;
+}
+
+export const EditorBar = ({ communityName }: EditorBarProps) => {
+  const editorRef = usePlateEditorRef('main');
+  const stateEditor = usePlateEditorState();
+  const audioRef = React.useRef<HTMLInputElement>(null);
+  const imageRef = React.useRef<HTMLInputElement>(null);
+  const videoRef = React.useRef<HTMLInputElement>(null);
+
+  const handleAudioChange = async (event: React.FormEvent) => {
+    const file = (event.target as HTMLInputElement)?.files?.[0];
+    if (!file) return;
+    /**
+     * TODO: Insert audio component
+     */
+  };
+
+  const handleBlockquote = (event: React.MouseEvent) => {
+    toggleNodeType(stateEditor, { activeType: ELEMENT_BLOCKQUOTE });
+  };
+
+  const handleImageChange = async (event: React.FormEvent) => {
+    const file = (event.target as HTMLInputElement)?.files?.[0];
+    if (!file) return;
+    // const imageurl = await handleUploadImage(file);
+    // if (imageurl) {
+    //   insertImage(editorRef, imageurl);
+    // }
+  };
+
+  const handleFont = (value: string) => {
+    const type = getPluginType(editorRef, 'fontSize');
+    focusEditor(editorRef);
+    setMarks(stateEditor, { [type]: `${value}px` });
+  };
+
+  const handleOrderedList = (event: any) => {
+    event.preventDefault();
+    toggleIndentList(editorRef, {
+      listStyleType: 'decimals',
+    });
+  };
+
+  const handlePaywall = () => {
+    insertNodes(editorRef, [
+      {
+        type: ELEMENT_PAYWALL,
+        children: [
+          {
+            type: ELEMENT_H2,
+            children: [
+              {
+                text: 'Keep reading with a paid subscription',
+              },
+            ],
+          },
+          {
+            type: ELEMENT_PARAGRAPH,
+            children: [
+              {
+                text: 'Subscribe to ',
+              },
+              {
+                text: communityName,
+                italic: true,
+              },
+              {
+                text: ' to keep reading this content.',
+              },
+            ],
+          },
+          {
+            type: ELEMENT_BUTTON,
+            buttonType: BUTTON_SUBSCRIBE,
+            children: [
+              {
+                text: 'Get Access',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: ELEMENT_DEFAULT,
+        children: [
+          {
+            text: '',
+          },
+        ],
+      },
+    ]);
+    focusEditor(editorRef);
+  };
+
+  const handleQA = () => {
+    insertNodes(editorRef, {
+      type: ELEMENT_QA,
+      children: [
+        {
+          type: ELEMENT_PARAGRAPH,
+          children: [
+            {
+              text: 'Ask your question here...',
+            },
+          ],
+        },
+      ],
+    });
+  };
+
+  const handleRedo = () => editorRef.redo();
+
+  const handleUndo = () => editorRef.undo();
+
+  const handleUnorderedList = (event: any) => {
+    event.preventDefault();
+    toggleIndentList(editorRef, {
+      listStyleType: 'disc',
+    });
+  };
+
+  const handleVideoChange = async (event: React.FormEvent) => {
+    const file = (event.target as HTMLInputElement)?.files?.[0];
+    if (!file) return;
+    /**
+     * TODO: Insert video component
+     */
+  };
+
+  return (
+    <Wrapper>
+      <Menu aria-label="editor-navigation">
+        <MenuSection>
+          <Tooltip content="Undo" place="top">
+            <MenuButton $active={false} onClick={handleUndo}>
+              <Undo size={24} color="grey-5" />
+            </MenuButton>
+          </Tooltip>
+          <Tooltip content="Redo" place="top">
+            <MenuButton $active={false} onClick={handleRedo}>
+              <Redo size={24} color="grey-5" />
+            </MenuButton>
+          </Tooltip>
+        </MenuSection>
+        <Divider />
+        <MenuSection>
+          <Tooltip content="Bold" place="top">
+            <MarkToolbarButton
+              as="div"
+              type={getPluginType(editorRef, MARK_BOLD)}
+              icon={
+                <MenuButton $active={true}>
+                  <Bold size={24} color="grey-5" />
+                </MenuButton>
+              }
+            />
+          </Tooltip>
+          <Tooltip content="Italic" place="top">
+            <MarkToolbarButton
+              as="div"
+              type={getPluginType(editorRef, MARK_ITALIC)}
+              icon={
+                <MenuButton $active={false}>
+                  <Italic size={24} color="grey-5" />
+                </MenuButton>
+              }
+            />
+          </Tooltip>
+          <Tooltip content="Underline" place="top">
+            <MarkToolbarButton
+              as="div"
+              type={getPluginType(editorRef, MARK_UNDERLINE)}
+              icon={<Underline size={24} color="grey-5" />}
+            />
+          </Tooltip>
+          <Tooltip content="Strikethrough" place="top">
+            <MarkToolbarButton
+              as="div"
+              type={getPluginType(editorRef, MARK_STRIKETHROUGH)}
+              icon={
+                <MenuButton $active={false}>
+                  <Strikethrough size={24} color="grey-5" />
+                </MenuButton>
+              }
+            />
+          </Tooltip>
+          <Tooltip content="Inline code" place="top">
+            <MarkToolbarButton
+              as="div"
+              type={getPluginType(editorRef, MARK_CODE)}
+              icon={
+                <MenuButton $active={false}>
+                  <FileCode size={24} color="grey-5" />
+                </MenuButton>
+              }
+            />
+          </Tooltip>
+        </MenuSection>
+        <Divider />
+        <MenuSection>
+          <MenuButton $active={false} as="div">
+            <AlignmentDropdown editorRef={editorRef} />
+          </MenuButton>
+        </MenuSection>
+      </Menu>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  position: sticky;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  top: 0;
+`;
+
+const Menu = styled.nav`
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 14px 24px;
+  background-color: var(--color-white);
+`;
+
+const MenuSection = styled.div`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: fit-content;
+  flex-shrink: 0;
+`;
+
+export const MenuButton = styled.button<{
+  $active?: boolean;
+}>`
+  padding: 2px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  height: 28px;
+  width: 28px;
+  border-radius: 2px;
+
+  &:hover:not(:disabled) {
+    padding: 1px;
+    border: 1px solid var(--color-grey-8);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--color-grey-9);
+  }
+
+  &:disabled {
+    background-color: var(--color-white) !important;
+    cursor: initial;
+    svg {
+      fill: var(--color-grey-7) !important;
+    }
+  }
+
+  background-color: ${({ $active }) =>
+    $active ? 'background-color: var(--color-grey-9)' : 'transparent'};
+`;
+
+const Divider = styled.div`
+  width: 1px;
+  height: 28px;
+  background-color: var(--color-grey-9);
+`;

package/src/components/editor/plate.ts

@@ -0,0 +1,17 @@
+import {
+  CodeBlockElement,
+  BlockquoteElement,
+  CodeLineElement,
+  CodeSyntaxLeaf,
+  ImageElement,
+  createPlateUI,
+} from '@udecode/plate';
+import * as Elements from './constants';
+
+export const plateUI = createPlateUI({
+  [Elements.ELEMENT_BLOCKQUOTE]: BlockquoteElement,
+  [Elements.ELEMENT_CODE_BLOCK]: CodeBlockElement,
+  [Elements.ELEMENT_CODE_LINE]: CodeLineElement,
+  [Elements.ELEMENT_CODE_SYNTAX]: CodeSyntaxLeaf,
+  [Elements.ELEMENT_IMAGE]: ImageElement,
+});

package/src/components/editor/plugins/buttons.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  createPluginFactory,
+  ELEMENT_LINK,
+  getAboveNode,
+  insertLink,
+  isEditorReadOnly,
+  setNodes,
+  PlateRenderElementProps,
+} from '@udecode/plate';
+import { Button as UIButton, P } from 'components';
+import {
+  BUTTON_COMMENT,
+  BUTTON_GIFT_SUBSCRIPTION,
+  BUTTON_LINK,
+  BUTTON_SHARE,
+  BUTTON_SHARE_PAGE,
+  BUTTON_SPECIAL_OFFER,
+  BUTTON_SUBSCRIBE,
+  BUTTON_SIGNUP,
+  COLORS,
+  ELEMENT_BUTTON,
+  ELEMENT_PARAGRAPH,
+} from '../constants';
+
+export const Button = ({
+  attributes,
+  className,
+  children,
+  editor,
+  element,
+}: PlateRenderElementProps) => {
+  const [state, setState] = React.useState('');
+  const { ref: _, ...htmlAttributes } = attributes;
+  const { buttonType, color } = element;
+
+  const currAboveNode = getAboveNode(editor, {
+    /**
+     * @todo possibly wrong
+     */
+    at: editor.prevSelection?.focus,
+    match: {
+      type: ELEMENT_BUTTON,
+      buttonType: buttonType,
+    },
+  });
+
+  const editable = !isEditorReadOnly(editor);
+
+  const handleColorChange = (color: string) => {
+    if (currAboveNode) {
+      setNodes(
+        editor,
+        {
+          color,
+        },
+        {
+          at: currAboveNode ? currAboveNode[1] : undefined,
+        }
+      );
+    }
+  };
+
+  const ColorMenu = () =>
+    !currAboveNode?.[1] || !editable ? null : (
+      <ColorMenuComponent contentEditable={false}>
+        {COLORS.map((color) => (
+          <ColorItem
+            $color={color}
+            contentEditable={false}
+            key={color}
+            onClick={(event: React.MouseEvent) => {
+              event.stopPropagation();
+              handleColorChange(color);
+            }}
+          />
+        ))}
+      </ColorMenuComponent>
+    );
+
+  return (
+    <ButtonWrapper>
+      <ColorMenu />
+      <UIButton>{children}</UIButton>
+    </ButtonWrapper>
+  );
+};
+
+const ColorMenuComponent = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  z-index: 5;
+  position: absolute;
+  left: calc(50% - 148px);
+  border-radius: 16px;
+  padding: 8px 16px;
+  box-shadow: var(--elevation-1);
+  background-color: var(--color-white);
+`;
+
+const ColorItem = styled.div<{ $color: string }>`
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: ${({ $color }) => $color};
+  cursor: pointer;
+`;
+
+const ButtonWrapper = styled.div``;
+
+export const createButtonsPlugin = createPluginFactory({
+  key: ELEMENT_BUTTON,
+  type: ELEMENT_BUTTON,
+  isElement: true,
+  component: Button,
+  then: (editor) => ({
+    inject: {
+      props: {
+        classNames: undefined,
+        validTypes: [ELEMENT_PARAGRAPH],
+      },
+    },
+  }),
+});

package/src/components/editor/plugins/exitBreak.ts

@@ -0,0 +1,41 @@
+import { KEYS_HEADING } from '@udecode/plate';
+import {
+  ELEMENT_BLOCKQUOTE,
+  ELEMENT_BUTTON,
+  ELEMENT_CODE_BLOCK,
+  ELEMENT_MEDIA,
+  ELEMENT_MEDIA_EMBED,
+  ELEMENT_OL,
+  ELEMENT_UL,
+} from '../constants';
+
+export const exitBreakPlugin = {
+  options: {
+    rules: [
+      {
+        hotkey: 'mod+enter',
+      },
+      {
+        hotkey: 'mod+shift+enter',
+        before: true,
+      },
+      {
+        hotkey: 'enter',
+        query: {
+          start: true,
+          end: true,
+          allow: [
+            ELEMENT_BLOCKQUOTE,
+            ELEMENT_BUTTON,
+            ELEMENT_CODE_BLOCK,
+            ELEMENT_MEDIA,
+            ELEMENT_MEDIA_EMBED,
+            ELEMENT_OL,
+            ELEMENT_UL,
+            ...KEYS_HEADING,
+          ],
+        },
+      },
+    ],
+  },
+};

package/src/components/editor/plugins/index.ts

@@ -0,0 +1,151 @@
+import {
+  createBlockquotePlugin,
+  createCodeBlockPlugin,
+  createHeadingPlugin,
+  createHorizontalRulePlugin,
+  createIndentListPlugin,
+  createImagePlugin,
+  createMediaEmbedPlugin,
+  createResetNodePlugin,
+  createTablePlugin,
+  createBoldPlugin,
+  createCodePlugin,
+  createFontBackgroundColorPlugin,
+  createFontSizePlugin,
+  createFontFamilyPlugin,
+  createItalicPlugin,
+  createStrikethroughPlugin,
+  createSubscriptPlugin,
+  createSuperscriptPlugin,
+  createUnderlinePlugin,
+  createAlignPlugin,
+  createIndentPlugin,
+  createLineHeightPlugin,
+  createLinkPlugin,
+  PlateFloatingLink,
+  createExitBreakPlugin,
+  createHistoryPlugin,
+  createSelectOnBackspacePlugin,
+  createSoftBreakPlugin,
+} from '@udecode/plate';
+
+import {
+  ELEMENT_PARAGRAPH,
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+  ELEMENT_CODE_BLOCK,
+} from '../constants';
+
+import { createButtonsPlugin } from './buttons';
+import { exitBreakPlugin } from './exitBreak';
+import { resetBlockTypePlugin } from './resetBlockType';
+import { selectOnBackspace } from './selectOnBackspace';
+import { softBreakPlugin } from './softBreak';
+import {
+  createParagraphPlugin,
+  createHOnePlugin,
+  createHTwoPlugin,
+  createHThreePlugin,
+  createHFourPlugin,
+  createHFivePlugin,
+  createHSixPlugin,
+} from './text';
+
+export const blocks = [
+  createButtonsPlugin(),
+  createBlockquotePlugin(),
+  createCodeBlockPlugin(),
+  createHeadingPlugin(),
+  createHorizontalRulePlugin(),
+  createImagePlugin({
+    options: {
+      disableUploadInsert: true,
+      disableCaption: true,
+      disableEmbedInsert: true,
+    },
+  }),
+  createIndentListPlugin({
+    inject: {
+      props: {
+        validTypes: [
+          ELEMENT_PARAGRAPH,
+          ELEMENT_H1,
+          ELEMENT_H2,
+          ELEMENT_H3,
+          ELEMENT_H4,
+          ELEMENT_H5,
+          ELEMENT_H6,
+          ELEMENT_CODE_BLOCK,
+        ],
+      },
+    },
+  }),
+  // createFootnotePlugin(),
+  createMediaEmbedPlugin(),
+  createParagraphPlugin(),
+  createHOnePlugin(),
+  createHTwoPlugin(),
+  createHThreePlugin(),
+  createHFourPlugin(),
+  createHFivePlugin(),
+  createHSixPlugin(),
+  // createPaywallPlugin(),
+  // createQAPlugin(),
+  createResetNodePlugin(),
+  createTablePlugin(),
+  // createVideoPlugin(),
+];
+
+export const marks = [
+  createBoldPlugin(),
+  createCodePlugin(),
+  createFontBackgroundColorPlugin(),
+  createFontSizePlugin(),
+  createFontFamilyPlugin(),
+  createItalicPlugin(),
+  createStrikethroughPlugin(),
+  createSubscriptPlugin(),
+  createSuperscriptPlugin(),
+  createUnderlinePlugin(),
+];
+
+export const inline = [
+  createAlignPlugin({
+    inject: {
+      props: {
+        validTypes: [
+          ELEMENT_PARAGRAPH,
+          ELEMENT_H1,
+          ELEMENT_H2,
+          ELEMENT_H3,
+          ELEMENT_H4,
+          ELEMENT_H5,
+          ELEMENT_H6,
+        ],
+      },
+    },
+  }),
+  createIndentPlugin({
+    inject: {
+      props: {
+        validTypes: [ELEMENT_PARAGRAPH, ELEMENT_H1],
+      },
+    },
+  }),
+  createLineHeightPlugin(),
+  createLinkPlugin({
+    renderAfterEditable: PlateFloatingLink,
+  }),
+];
+
+export const utils = [
+  createExitBreakPlugin(exitBreakPlugin),
+  createHistoryPlugin(),
+  createResetNodePlugin(resetBlockTypePlugin),
+  createSelectOnBackspacePlugin(selectOnBackspace),
+  createSoftBreakPlugin(softBreakPlugin),
+];

package/src/components/editor/plugins/resetBlockType.ts

@@ -0,0 +1,29 @@
+import { isBlockAboveEmpty, isSelectionAtBlockStart } from '@udecode/plate';
+
+import {
+  ELEMENT_BLOCKQUOTE,
+  ELEMENT_PARAGRAPH,
+  ELEMENT_TODO_LI,
+} from '../constants';
+
+const resetBlockTypesCommonRule = {
+  types: [ELEMENT_BLOCKQUOTE, ELEMENT_TODO_LI],
+  defaultType: ELEMENT_PARAGRAPH,
+};
+
+export const resetBlockTypePlugin = {
+  options: {
+    rules: [
+      {
+        ...resetBlockTypesCommonRule,
+        hotkey: 'Enter',
+        predicate: isBlockAboveEmpty,
+      },
+      {
+        ...resetBlockTypesCommonRule,
+        hotkey: 'Backspace',
+        predicate: isSelectionAtBlockStart,
+      },
+    ],
+  },
+};

package/src/components/editor/plugins/selectOnBackspace.ts

@@ -0,0 +1,7 @@
+import { ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED } from '../constants';
+
+export const selectOnBackspace = {
+  options: {
+    query: { allow: [ELEMENT_HR, ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED] },
+  },
+};

package/src/components/editor/plugins/softBreak.ts

@@ -0,0 +1,19 @@
+import {
+  ELEMENT_BLOCKQUOTE,
+  ELEMENT_CODE_BLOCK,
+  ELEMENT_TD,
+} from '@udecode/plate';
+
+export const softBreakPlugin = {
+  options: {
+    rules: [
+      { hotkey: 'shift+enter' },
+      {
+        hotkey: 'enter',
+        query: {
+          allow: [ELEMENT_CODE_BLOCK, ELEMENT_BLOCKQUOTE, ELEMENT_TD],
+        },
+      },
+    ],
+  },
+};

package/src/components/editor/plugins/text.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { PlateRenderElementProps, createPluginFactory } from '@udecode/plate';
+import { H, P } from 'components';
+import * as Elements from '../constants';
+
+const ParagraphElement = ({
+  attributes,
+  nodeProps,
+  children,
+}: PlateRenderElementProps) => {
+  return (
+    <P {...attributes} {...nodeProps}>
+      {children}
+    </P>
+  );
+};
+
+export const createParagraphPlugin = createPluginFactory({
+  key: Elements.ELEMENT_PARAGRAPH,
+  type: Elements.ELEMENT_PARAGRAPH,
+  isElement: true,
+  component: ParagraphElement,
+});
+
+const HOneElement = ({
+  attributes,
+  nodeProps,
+  children,
+}: PlateRenderElementProps) => {
+  return (
+    <H.One {...attributes} {...nodeProps}>
+      {children}
+    </H.One>
+  );
+};
+
+export const createHOnePlugin = createPluginFactory({
+  key: Elements.ELEMENT_H1,
+  type: Elements.ELEMENT_H1,
+  isElement: true,
+  component: HOneElement,
+});
+
+const HTwoElement = ({
+  attributes,
+  nodeProps,
+  children,
+}: PlateRenderElementProps) => {
+  return (
+    <H.Two {...attributes} {...nodeProps}>
+      {children}
+    </H.Two>
+  );
+};
+
+export const createHTwoPlugin = createPluginFactory({
+  key: Elements.ELEMENT_H2,
+  type: Elements.ELEMENT_H2,
+  isElement: true,
+  component: HTwoElement,
+});
+
+const HThreeElement = ({
+  attributes,
+  nodeProps,
+  children,
+}: PlateRenderElementProps) => {
+  return (
+    <H.Three {...attributes} {...nodeProps}>
+      {children}
+    </H.Three>
+  );
+};
+
+export const createHThreePlugin = createPluginFactory({
+  key: Elements.ELEMENT_H3,
+  type: Elements.ELEMENT_H3,
+  isElement: true,
+  component: HThreeElement,
+});
+
+const HFourElement = ({
+  attributes,
+  nodeProps,
+  children,
+}: PlateRenderElementProps) => {
+  return (
+    <H.Four {...attributes} {...nodeProps}>
+      {children}
+    </H.Four>
+  );
+};
+
+export const createHFourPlugin = createPluginFactory({
+  key: Elements.ELEMENT_H4,
+  type: Elements.ELEMENT_H4,
+  isElement: true,
+  component: HFourElement,
+});
+
+const HFiveElement = ({
+  attributes,
+  nodeProps,
+  children,
+}: PlateRenderElementProps) => {
+  return (
+    <H.Five {...attributes} {...nodeProps}>
+      {children}
+    </H.Five>
+  );
+};
+
+export const createHFivePlugin = createPluginFactory({
+  key: Elements.ELEMENT_H5,
+  type: Elements.ELEMENT_H5,
+  isElement: true,
+  component: HFiveElement,
+});
+
+const HSixElement = ({
+  attributes,
+  nodeProps,
+  children,
+}: PlateRenderElementProps) => {
+  return (
+    <H.Six {...attributes} {...nodeProps}>
+      {children}
+    </H.Six>
+  );
+};
+
+export const createHSixPlugin = createPluginFactory({
+  key: Elements.ELEMENT_H6,
+  type: Elements.ELEMENT_H6,
+  isElement: true,
+  component: HSixElement,
+});

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './actions';
 export * from './atoms';
 export * from './card';
+export * from './editor';
 export * from './feedback';
 export * from './iconography';
 export * from './input';