@soul-refiner/design-system 0.0.4 → 0.0.5

package/src/editor/plateUI.ts

@@ -0,0 +1,82 @@
+import {
+  CodeBlockElement,
+  BlockquoteElement,
+  CodeLineElement,
+  CodeSyntaxLeaf,
+  ImageElement,
+  LinkElement,
+  MediaEmbedElement,
+  MentionElement,
+  MentionInputElement,
+  TableElement,
+  TableCellElement,
+  TableRowElement,
+  TodoListElement,
+  createPlateUI,
+  StyledElement,
+  withProps,
+} from "@udecode/plate";
+import * as Elements from "./common/elements";
+
+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_H1]: withProps(StyledElement, {
+    as: "h1",
+    styles: {
+      root: {
+        margin: 0,
+      },
+    },
+  }),
+  [Elements.ELEMENT_H2]: withProps(StyledElement, {
+    as: "h2",
+    styles: {
+      root: {
+        margin: 0,
+      },
+    },
+  }),
+  [Elements.ELEMENT_H3]: withProps(StyledElement, {
+    as: "h3",
+    styles: {
+      root: {
+        margin: 0,
+      },
+    },
+  }),
+  [Elements.ELEMENT_H4]: withProps(StyledElement, {
+    as: "h4",
+    styles: {
+      root: {
+        margin: 0,
+      },
+    },
+  }),
+  [Elements.ELEMENT_H5]: withProps(StyledElement, {
+    as: "h5",
+    styles: {
+      root: {
+        margin: 0,
+      },
+    },
+  }),
+  [Elements.ELEMENT_H6]: withProps(StyledElement, {
+    as: "h6",
+    styles: {
+      root: {
+        margin: 0,
+      },
+    },
+  }),
+  [Elements.ELEMENT_IMAGE]: ImageElement,
+  [Elements.ELEMENT_PARAGRAPH]: withProps(StyledElement, {
+    as: "div",
+    styles: {
+      root: {},
+    },
+    prefixClassNames: "p",
+  }),
+});

package/src/editor/plugins/blocks.tsx

@@ -0,0 +1,71 @@
+import {
+  createBlockquotePlugin,
+  createCodeBlockPlugin,
+  createHeadingPlugin,
+  createHorizontalRulePlugin,
+  createIndentListPlugin,
+  createImagePlugin,
+  createMediaEmbedPlugin,
+  createParagraphPlugin,
+  createResetNodePlugin,
+  createTablePlugin,
+} from "@udecode/plate";
+import {
+  createButtonsPlugin,
+  createExamplePlugin,
+  createFootnotePlugin,
+  createPaywallPlugin,
+  createQAPlugin,
+  createVideoPlugin,
+} from "./custom";
+
+import {
+  ELEMENT_PARAGRAPH,
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+  ELEMENT_CODE_BLOCK,
+} from "../common";
+
+export const blocks = [
+  createButtonsPlugin(),
+  createBlockquotePlugin(),
+  createCodeBlockPlugin(),
+  createExamplePlugin(),
+  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(),
+  createPaywallPlugin(),
+  createQAPlugin(),
+  createResetNodePlugin(),
+  createTablePlugin(),
+  createVideoPlugin(),
+];

package/src/editor/plugins/custom/assets/DefaultThumbnail.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+export const DefaultThumbnail = () => (
+  <svg
+    width="134"
+    height="76"
+    viewBox="0 0 134 76"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g opacity="0.75">
+      <g clipPath="url(#clip0_7629_204600)">
+        <path
+          d="M43.4559 21.3239H88.4215C90.093 21.3239 91.448 22.6789 91.448 24.3504V45.5584C91.6623 45.5436 91.8785 45.5361 92.0965 45.5361C92.6118 45.5361 93.1173 45.5781 93.6098 45.6587V24.3504C93.6098 21.485 91.2869 19.1621 88.4215 19.1621H43.4559C40.5905 19.1621 38.2676 21.485 38.2676 24.3504V49.4274C38.2676 52.2928 40.5905 54.6157 43.4559 54.6157H82.8032C82.8203 53.8701 82.9251 53.1462 83.1077 52.4539H43.4559C41.7844 52.4539 40.4294 51.0989 40.4294 49.4274V24.3504C40.4294 22.6789 41.7844 21.3239 43.4559 21.3239Z"
+          fill="#636971"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M62.4802 31.8854V41.8934L69.867 36.8894L62.4802 31.8854ZM71.6079 35.4576C72.6205 36.1435 72.6205 37.6352 71.6079 38.3212L63.0178 44.1404C61.8693 44.9183 60.3184 44.0956 60.3184 42.7085V31.0703C60.3184 29.6832 61.8693 28.8605 63.0178 29.6384L71.6079 35.4576Z"
+          fill="#636971"
+        />
+        <circle
+          cx="92.0965"
+          cy="54.8329"
+          r="8.21486"
+          stroke="#636971"
+          strokeWidth="2.16181"
+        />
+        <path
+          d="M91.4483 53.9679L90.5464 54.8697C90.2088 55.2074 89.6612 55.2074 89.3235 54.8697L89.2494 54.7955C88.9117 54.4578 88.9117 53.9103 89.2494 53.5726L91.7015 51.1205C92.0392 50.7828 92.5867 50.7828 92.9244 51.1205L95.3766 53.5726C95.7143 53.9103 95.7143 54.4578 95.3766 54.7955L95.3024 54.8697C94.9647 55.2074 94.4172 55.2074 94.0795 54.8697L93.1777 53.9679V58.0754C93.1777 58.5529 92.7906 58.9401 92.313 58.9401C91.8354 58.9401 91.4483 58.5529 91.4483 58.0754V53.9679Z"
+          fill="#636971"
+        />
+      </g>
+      <rect
+        x="1.36523"
+        y="1.16211"
+        width="131.333"
+        height="73"
+        rx="7"
+        stroke="#636971"
+        strokeWidth="2"
+        strokeDasharray="4 4"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_7629_204600">
+        <rect
+          width="63.1247"
+          height="47.1274"
+          fill="white"
+          transform="translate(38.2676 19.1621)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/editor/plugins/custom/assets/index.ts

@@ -0,0 +1 @@
+export { DefaultThumbnail } from "./DefaultThumbnail";

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

@@ -0,0 +1,289 @@
+import React from "react";
+import {
+  createPluginFactory,
+  ELEMENT_LINK,
+  getAboveNode,
+  insertLink,
+  isEditorReadOnly,
+  setNodes,
+} from "@udecode/plate";
+import { determineTextColor } from "@soul-refiner/utils/src";
+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 "../../common";
+
+import { Button as UIButton } from "../../../actions";
+import { EditorContext } from "../../Editor";
+
+import styles from "./styles/Button.module.scss";
+
+type ExampleProps = any;
+
+export const Button = ({
+  attributes,
+  className,
+  children,
+  editor,
+  element,
+}: ExampleProps) => {
+  const {} = React.useContext(EditorContext);
+  const [state, setState] = React.useState("");
+  const { ref: DONT_USE, ...htmlAttributes } = attributes;
+  const { buttonType, color } = element;
+
+  let currAboveNode = getAboveNode(editor, {
+    at: editor.selection,
+    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 : (
+      <div className={styles.colorpicker} contentEditable={false}>
+        {COLORS.map((color) => (
+          <div
+            className={styles.color}
+            contentEditable={false}
+            key={color}
+            onClick={(event: React.MouseEvent) => {
+              event.stopPropagation();
+              handleColorChange(color);
+            }}
+            style={
+              {
+                "--option-color": color,
+              } as React.CSSProperties
+            }
+          />
+        ))}
+      </div>
+    );
+
+  const GenericButton = ({ ...props }) => (
+    <UIButton
+      buttonColor={color ?? "var(--color-blue-4)"}
+      className={className}
+      color={determineTextColor(color ?? "var(--color-blue-4)")}
+      // onClick={() => !editable && commentHandler}
+      shape="rectangular"
+      style={editable ? { pointerEvents: "none" } : {}}
+      {...htmlAttributes}
+      {...props}
+    >
+      {children}
+    </UIButton>
+  );
+
+  switch (buttonType) {
+    case BUTTON_COMMENT:
+      /**
+       * TODO: Add comment handler logic
+       */
+      return (
+        <div className={styles.buttonWrapper}>
+          <ColorMenu />
+          <GenericButton onClick={undefined} />
+        </div>
+      );
+    case BUTTON_GIFT_SUBSCRIPTION:
+      /**
+       * TODO: Replace with Modal for paying for someone else
+       */
+      return (
+        <div className={styles.buttonWrapper}>
+          <ColorMenu />
+          <GenericButton onClick={undefined} />
+        </div>
+      );
+    // TODO: BUTTON_LINK
+    // case BUTTON_LINK:
+    //   TODO: Replace with Modal for paying for someone else
+    //   return (
+    //     <div className={styles.buttonWrapper}>
+    //        <ColorMenu />
+    //        <GenericButton onClick={undefined} />
+    //     </div>
+    //   );
+    case BUTTON_SHARE:
+      /**
+       * TODO: Replace with Share Modal
+       */
+      return (
+        <div className={styles.buttonWrapper}>
+          <ColorMenu />
+          <GenericButton onClick={undefined} />
+        </div>
+      );
+    case BUTTON_SHARE_PAGE:
+      /**
+       * TODO: Replace with
+       */
+      return (
+        <div className={styles.captionWrapper}>
+          <p>
+            {React.Children.toArray(children).filter((item) => {
+              if (React.isValidElement(item) && item.props.text?.beforeElement)
+                return true;
+              return false;
+            })}
+          </p>
+          <div className={styles.buttonWrapper}>
+            <ColorMenu />
+            <UIButton
+              className={className}
+              buttonColor={color ?? "var(--color-blue-4)"}
+              color={determineTextColor(color ?? "var(--color-blue-4)")}
+              // onClick={undefined}
+              shape="rectangular"
+              style={editable ? { pointerEvents: "none" } : {}}
+              {...htmlAttributes}
+            >
+              {React.Children.toArray(children).filter((item) => {
+                if (
+                  React.isValidElement(item) &&
+                  item.props.text?.beforeElement
+                )
+                  return false;
+                return true;
+              })}
+            </UIButton>
+          </div>
+        </div>
+      );
+    case BUTTON_SPECIAL_OFFER:
+      /**
+       * TODO: Replace with
+       */
+      return (
+        <div className={styles.captionWrapper}>
+          <p>
+            {React.Children.toArray(children).filter((item) => {
+              if (React.isValidElement(item) && item.props.text?.beforeElement)
+                return true;
+              return false;
+            })}
+          </p>
+          <div className={styles.buttonWrapper}>
+            <ColorMenu />
+            <UIButton
+              className={className}
+              buttonColor={color ?? "var(--color-blue-4)"}
+              color={determineTextColor(color ?? "var(--color-blue-4)")}
+              // onClick={() => handler(state)}
+              shape="rectangular"
+              style={editable ? { pointerEvents: "none" } : {}}
+              {...htmlAttributes}
+            >
+              {React.Children.toArray(children).filter((item) => {
+                if (
+                  React.isValidElement(item) &&
+                  item.props.text?.beforeElement
+                )
+                  return false;
+                return true;
+              })}
+            </UIButton>
+          </div>
+        </div>
+      );
+    case BUTTON_SUBSCRIBE:
+      /**
+       * TODO: Replace with pay modal
+       */
+      return (
+        <div className={styles.buttonWrapper}>
+          <ColorMenu />
+          <GenericButton />
+        </div>
+      );
+    case BUTTON_SIGNUP:
+      /**
+       * TODO: add on signup handler
+       */
+      return (
+        <div className={styles.captionWrapper}>
+          <p>
+            {React.Children.toArray(children).filter((item) => {
+              if (React.isValidElement(item) && item.props.text?.beforeElement)
+                return true;
+              return false;
+            })}
+          </p>
+          <div className={styles.buttonWrapper}>
+            <ColorMenu />
+            <input
+              placeholder="Type your email..."
+              disabled={editable}
+              onChange={(event: React.FormEvent) => {
+                !editable && setState((event.target as HTMLInputElement).value);
+              }}
+              value={state}
+            />
+            <UIButton
+              className={className}
+              buttonColor={color ?? "var(--color-blue-4)"}
+              color={determineTextColor(color ?? "var(--color-blue-4)")}
+              // onClick={() => handler(state)}
+              shape="rectangular"
+              style={editable ? { pointerEvents: "none" } : {}}
+              {...htmlAttributes}
+            >
+              {React.Children.toArray(children).filter((item) => {
+                if (
+                  React.isValidElement(item) &&
+                  item.props.text?.beforeElement
+                )
+                  return false;
+                return true;
+              })}
+            </UIButton>
+          </div>
+        </div>
+      );
+    default:
+      return null;
+  }
+};
+
+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/editor/plugins/custom/example.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { createPluginFactory, PlateEditor } from "@udecode/plate";
+import { ELEMENT_EXAMPLE } from "../../common";
+
+type ExampleProps = any;
+
+export const ExampleElement = ({
+  attributes,
+  children,
+  ...props
+}: ExampleProps) => {
+  /**
+   * Pick up state and handlers from context provider defined in Editor.tsx
+   */
+  console.log({ ...attributes, ...children, ...props });
+  return <h1 {...attributes}>{children}</h1>;
+};
+
+export const createExamplePlugin = createPluginFactory({
+  editor: {
+    insertData: {
+      format: undefined,
+      getFragment: undefined,
+      preInsert: undefined,
+      query: undefined,
+      transformData: undefined,
+      transformFragment: undefined,
+    },
+  },
+  handlers: {
+    // onKeyDown: (editor: PlateEditor) => {
+    //   return this
+    // }
+  },
+  key: ELEMENT_EXAMPLE,
+  type: ELEMENT_EXAMPLE,
+  isElement: true,
+  // isInline: true,
+  // isVoid: true,
+  // isLeaf: true,
+  decorate: undefined,
+  component: ExampleElement,
+  options: {
+    hotkey: [],
+  },
+
+  then: (editor) => ({
+    inject: {
+      aboveComponent: undefined,
+      belowComponent: undefined,
+      props: {
+        classNames: undefined,
+        defaultNodeValue: undefined,
+        nodeKey: undefined,
+        styleKey: undefined,
+        transformClassName: undefined,
+        transformNodeValue: undefined,
+        transformStyle: undefined,
+        validNodeValues: undefined,
+        validTypes: undefined,
+      },
+    },
+  }),
+});

package/src/editor/plugins/custom/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 "../../common";
+
+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,
+          ],
+        },
+      },
+    ],
+  },
+};