@soul-refiner/design-system 0.0.5 → 0.0.6

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

@@ -1,185 +0,0 @@
-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/src/editor/plugins/custom/index.ts

@@ -1,14 +0,0 @@
-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/src/editor/plugins/custom/paywall.tsx

@@ -1,156 +0,0 @@
-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,
-        ],
-      },
-    },
-  }),
-});