@soul-refiner/design-system 0.0.10 → 0.0.12

package/dist/src/editor/plugins/custom/footnote.tsx

@@ -0,0 +1,185 @@
+import React from "react";
+import {
+  createPluginFactory,
+  findNode,
+  removeNodes,
+  useHotkeys,
+  useComposedRef,
+  useOnClickOutside,
+} from "@udecode/plate";
+import { ELEMENT_FOOTNOTE } from "../../common";
+import { CloseThin, Footnote as FootnoteIcon } from "@soul-refiner/icons/src";
+
+import { EditorContext } from "../../Editor";
+
+import styles from "./styles/Footnote.module.scss";
+
+type FootnoteProps = any;
+
+export const Footnote = ({
+  attributes,
+  className,
+  children,
+  editor,
+}: FootnoteProps) => {
+  const { ref: DONT_USE, ...htmlAttributes } = attributes;
+  const { handleFootnoteChange, handleFootnoteDelete } =
+    React.useContext(EditorContext);
+  const [open, setOpen] = React.useState(false);
+  const id = React.useRef<string>(
+    Math.round(Math.random() * 100000000).toString(36)
+  ).current;
+  const text: string = children[0]?.props?.text?.text ?? "";
+
+  React.useEffect(() => {
+    if (text === "") handleFootnoteDelete(id);
+    else handleFootnoteChange(id, text);
+  }, [text, id]);
+
+  const toggleOpen = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (open) {
+      handleClose();
+    } else {
+      setOpen(true);
+    }
+  };
+
+  const ref = useOnClickOutside(
+    () => {
+      setOpen(false);
+    },
+    {
+      disabled: !open,
+    }
+  );
+
+  const handleClose = (event?: React.KeyboardEvent) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    setOpen(false);
+  };
+
+  useHotkeys(
+    "backspace",
+    ((event: React.KeyboardEvent) => {
+      const currNode = findNode(editor, {
+        match: {
+          type: ELEMENT_FOOTNOTE,
+        },
+        at: editor.selection,
+      });
+      if (!currNode || open || text !== "") {
+        return;
+      }
+      removeNodes(editor, {
+        at: currNode![1],
+      });
+    }) as any,
+    {
+      enabled: true,
+      enableOnContentEditable: true,
+      enableOnTags: ["INPUT"],
+    },
+    []
+  );
+
+  useHotkeys(
+    "enter",
+    ((event: React.KeyboardEvent) => {
+      if (event.key === "Enter" && open) handleClose(event);
+    }) as any,
+    {
+      enabled: true,
+      enableOnContentEditable: true,
+      enableOnTags: ["INPUT"],
+    },
+    []
+  );
+
+  useHotkeys(
+    "*",
+    ((event: React.KeyboardEvent) => {
+      const currNode = findNode(editor, {
+        match: {
+          type: ELEMENT_FOOTNOTE,
+        },
+        at: editor.selection,
+      });
+      if (
+        children[0].props.text.text === "" &&
+        currNode &&
+        open &&
+        (event.key === "Backspace" || event.key === "Delete")
+      ) {
+        removeNodes(editor, {
+          at: currNode![1],
+        });
+        handleFootnoteDelete(id);
+      }
+    }) as any,
+    {
+      enabled: true,
+      enableOnContentEditable: true,
+      enableOnTags: ["INPUT"],
+    },
+    []
+  );
+
+  return (
+    <sup
+      className={`${styles.inline} ${className}`}
+      tabIndex={0}
+      ref={useComposedRef(ref)}
+    >
+      <span onClick={toggleOpen} contentEditable={false}>
+        {" "}
+      </span>
+      <div className={styles.floating} style={open ? {} : { display: "none" }}>
+        <FootnoteIcon fill="var(--color-grey-3)" iconSize={18} size={36} />
+        <p onKeyDown={handleClose}>{children}</p>
+        <CloseThin
+          fill="var(--color-grey-3)"
+          iconSize={12}
+          size={36}
+          onClick={() => setOpen(false)}
+        />
+      </div>
+    </sup>
+  );
+};
+
+export const createFootnotePlugin = createPluginFactory({
+  key: ELEMENT_FOOTNOTE,
+  type: ELEMENT_FOOTNOTE,
+  isElement: true,
+  isInline: true,
+  component: Footnote,
+  options: {
+    rangeBeforeOptions: {
+      matchString: " ",
+      skipInvalid: true,
+      afterMatch: true,
+    },
+  },
+  renderAfterEditable: () => {
+    const { footnotes } = React.useContext(EditorContext);
+    return (
+      <div className={styles.footnotesWrapper}>
+        {footnotes.map((footnote) => (
+          <p key={footnote.id}>
+            <span> </span>
+            <span>{footnote.text}</span>
+          </p>
+        ))}
+      </div>
+    );
+  },
+  then: (editor) => ({
+    inject: {
+      props: {
+        classNames: ["footnote"],
+      },
+    },
+  }),
+});

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

@@ -0,0 +1,14 @@
+export { Button, createButtonsPlugin } from "./buttons";
+export { ExampleElement, createExamplePlugin, } from "./example";
+export {
+  Footnote,
+  createFootnotePlugin,
+} from "./footnote";
+export { Paywall, createPaywallPlugin } from "./paywall";
+export { QA, createQAPlugin } from "./qa";
+export { Video, createVideoPlugin } from "./video";
+
+export { exitBreakPlugin } from "./exitBreak";
+export { resetBlockTypePlugin } from "./resetBlockType";
+export { selectOnBackspace } from "./selectOnBackspace";
+export { softBreakPlugin } from "./softBreak";

package/dist/src/editor/plugins/custom/paywall.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import {
+  createPluginFactory,
+  getAboveNode,
+  isEditorReadOnly,
+  setNodes,
+} from "@udecode/plate";
+import {
+  COLORS,
+  ELEMENT_PAYWALL,
+  ELEMENT_H1,
+  ELEMENT_H2,
+  ELEMENT_H3,
+  ELEMENT_H4,
+  ELEMENT_H5,
+  ELEMENT_H6,
+  ELEMENT_PARAGRAPH,
+} from "../../common";
+
+import { Button } from "../../../actions";
+import { EditorContext } from "../../Editor";
+
+import styles from "./styles/Paywall.module.scss";
+
+type PaywallProps = any;
+
+export const Paywall = ({
+  attributes,
+  className,
+  children,
+  editor,
+  element,
+}: PaywallProps) => {
+  const { user } = React.useContext(EditorContext);
+  const [state, setState] = React.useState("");
+  const { ref: DONT_USE, ...htmlAttributes } = attributes;
+  const { additionalText, color } = element;
+
+  const _children = React.Children.toArray(children);
+  const mainChildren = _children.filter(
+    (child) => React.isValidElement(child) && !child.props.text?.buttonText
+  );
+
+  let currAboveNode = getAboveNode(editor, {
+    at: editor.selection,
+    match: {
+      type: ELEMENT_PAYWALL,
+    },
+  });
+
+  const editable = !isEditorReadOnly(editor);
+
+  const handleColorChange = (color: string) => {
+    if (currAboveNode) {
+      setNodes(
+        editor,
+        {
+          color,
+        },
+        {
+          at: currAboveNode ? currAboveNode[1] : undefined,
+        }
+      );
+    }
+  };
+
+  const ColorMenu = () =>
+    !currAboveNode?.[1] ? 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,
+                "--option-color-dark": color
+                  ? color.replace("5", "1")
+                  : "var(--color-blue-1)",
+              } as React.CSSProperties
+            }
+          />
+        ))}
+      </div>
+    );
+
+  return (
+    <div
+      className={styles.wrapper}
+      style={
+        {
+          "--highlight-color": color ?? "var(--color-blue-5)",
+          "--bg-color": color ? color.replace("5", "1") : "var(--color-blue-1)",
+        } as React.CSSProperties
+      }
+    >
+      <ColorMenu />
+      <div className={styles.paywall}>
+        {user?.firstName && (
+          <p
+            contentEditable={false}
+            style={{ pointerEvents: "none", color: "#FFFFFF" }}
+          >
+            Hi {user.firstName},
+          </p>
+        )}
+        {mainChildren}
+        <p className={styles.switch} contentEditable={false}>
+          Already a subscriber? <a href="/logout">Switch accounts</a>
+        </p>
+      </div>
+      {editable && (
+        <div contentEditable={false} className={styles.below}>
+          <div contentEditable={false} className={styles.line} />
+          <Button
+            buttonType="secondary"
+            contentEditable={false}
+            disabled={true}
+            shape="rectangular"
+          >
+            Paid content below this line
+          </Button>
+          <div className={styles.line} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const createPaywallPlugin = createPluginFactory({
+  key: ELEMENT_PAYWALL,
+  type: ELEMENT_PAYWALL,
+  isElement: true,
+  component: Paywall,
+  then: (editor) => ({
+    inject: {
+      props: {
+        classNames: undefined,
+        validTypes: [
+          ELEMENT_PARAGRAPH,
+          ELEMENT_H1,
+          ELEMENT_H2,
+          ELEMENT_H3,
+          ELEMENT_H4,
+          ELEMENT_H5,
+          ELEMENT_H6,
+        ],
+      },
+    },
+  }),
+});