@bigbinary/neeto-editor 0.1.17 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-editor",
-  "version": "0.1.17",
+  "version": "0.2.0",
   "main": "./index.js",
   "description": "Neeto Editor is the library that drives the rich text experience in all Neeto products built at BigBinary",
   "keywords": [
@@ -12,16 +12,22 @@
   "author": "BigBinary",
   "license": "MIT",
   "dependencies": {
+    "@bigbinary/neeto-icons": "^1.8.6",
     "@risingstack/react-easy-state": "^6.3.0",
     "@tailwindcss/typography": "^0.4.0",
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.18",
     "@tiptap/extension-code-block-lowlight": "^2.0.0-beta.24",
+    "@tiptap/extension-color": "^2.0.0-beta.3",
+    "@tiptap/extension-document": "^2.0.0-beta.15",
     "@tiptap/extension-dropcursor": "^2.0.0-beta.13",
     "@tiptap/extension-highlight": "^2.0.0-beta.13",
     "@tiptap/extension-image": "^2.0.0-beta.13",
     "@tiptap/extension-link": "^2.0.0-beta.18",
+    "@tiptap/extension-mention": "^2.0.0-beta.80",
     "@tiptap/extension-placeholder": "^2.0.0-beta.18",
+    "@tiptap/extension-text-style": "^2.0.0-beta.17",
     "@tiptap/extension-typography": "^2.0.0-beta.11",
+    "@tiptap/extension-underline": "^2.0.0-beta.21",
     "@tiptap/react": "^2.0.0-beta.37",
     "@tiptap/starter-kit": "^2.0.0-beta.57",
     "@tiptap/suggestion": "^2.0.0-beta.55",
@@ -29,9 +35,14 @@
     "@uppy/react": "^1.11.8",
     "@uppy/xhr-upload": "^1.7.2",
     "classnames": "^2.3.1",
+    "lodash.isempty": "^4.4.0",
+    "lodash.isplainobject": "^4.0.6",
     "lowlight": "^1.20.0",
     "peer-deps-externals-webpack-plugin": "1.0.4",
+    "react-hotkeys-hook": "^3.4.4",
     "react-icons": "^4.2.0",
+    "react-outside-click-handler": "^1.3.0",
+    "react-popper": "^2.2.5",
     "tippy.js": "^6.3.1"
   },
   "devDependencies": {

package/src/App.js

@@ -1,31 +1,8 @@
-import React, { Component } from "react";
-import Editor from "./Editor/index";
-import "./index.scss";
-
-export default class App extends Component {
-  ref = React.createRef();
+import React from "react";
 
-  getHTML = () => {
-    return this.ref.current.editor.getHTML();
-  };
+import Example from "./examples";
+import "./index.scss";
 
-  render() {
-    return (
-      <div style={{ width: 720, margin: "48px auto" }}>
-        <div className="flex justify-end">
-          <button
-            className="px-3 py-1 text-sm font-medium border border-gray-200 rounded shadow-sm"
-            onClick={() => {
-              // eslint-disable-next-line no-console
-              console.log(this.getHTML());
-            }}
-          >
-            Print output to console
-          </button>
-        </div>
-        <hr className="my-2 border-gray-100" />
-        <Editor ref={this.ref} />
-      </div>
-    );
-  }
+export default function App() {
+  return <Example />;
 }

package/src/Common/Avatar.js

@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+const SIZE = {
+  small: 24,
+  medium: 32,
+  large: 40,
+  xlarge: 64,
+};
+
+const STATUS = {
+  online: "online",
+  idle: "idle",
+  offline: "offline",
+};
+
+const COLORS = [
+  "#E5E7EB",
+  "#FECACA",
+  "#FDE68A",
+  "#A7F3D0",
+  "#BFDBFE",
+  "#C7D2FE",
+  "#DDD6FE",
+  "#FBCFE8",
+];
+
+function Avatar({
+  size,
+  user,
+  isSquare,
+  status,
+  onClick,
+  className,
+  ...otherProps
+}) {
+  const [loaded, setLoaded] = useState(false);
+
+  const { name = "", imageUrl } = user;
+
+  const isMedium = size === "medium";
+  const isLarge = size === "large";
+  const isXLarge = size === "xlarge";
+
+  const getInitials = (fullName) => {
+    const allNames = fullName.trim().split(" ");
+    const initials = allNames.reduce((acc, curr, index) => {
+      if (index === 0 || index === allNames.length - 1) {
+        acc = `${acc}${curr.charAt(0).toUpperCase()}`;
+      }
+      return acc;
+    }, "");
+    return initials;
+  };
+
+  const avatarString = getInitials(name);
+
+  const getRandomBackgroundColor = () => {
+    const charCode =
+      (avatarString.charCodeAt(0) || 0) + (avatarString.charCodeAt(1) || 0);
+    const bgColor = COLORS[(charCode % 65) % COLORS.length] || COLORS[0];
+    return bgColor;
+  };
+
+  const imageContainerStyle = {
+    height: SIZE[size],
+    width: SIZE[size],
+    backgroundColor: getRandomBackgroundColor(),
+  };
+
+  const imageClasses = classNames("neeto-ui-avatar", {
+    "neeto-ui-avatar--medium": isMedium,
+    "neeto-ui-avatar--large": isLarge,
+    "neeto-ui-avatar--xlarge": isXLarge,
+    "neeto-ui-avatar--round": !isSquare,
+    hidden: !loaded,
+  });
+
+  const placeholderClasses = classNames("neeto-ui-avatar__text", {
+    "neeto-ui-avatar__text-medium": isMedium,
+    "neeto-ui-avatar__text-large": isLarge,
+    "neeto-ui-avatar__text-xlarge": isXLarge,
+  });
+
+  // TODO: Remove 'v2' prefix.
+  const statusClasses = classNames("neeto-ui-avatar__status", `${status}`, {
+    "neeto-ui-avatar__status-medium": isMedium,
+    "neeto-ui-avatar__status-large": isLarge,
+    "neeto-ui-avatar__status-xlarge": isXLarge,
+    "neeto-ui-avatar__status-square": isSquare,
+  });
+
+  const Indicator = () =>
+    status === undefined || status === null ? (
+      React.Fragment
+    ) : (
+      <span className={statusClasses} />
+    );
+
+  const ImagePlaceholder = () => (
+    <span className={placeholderClasses}>{avatarString}</span>
+  );
+
+  const shouldDisplayInitials = avatarString && !imageUrl && !loaded;
+
+  return (
+    <div
+      onClick={onClick}
+      style={imageContainerStyle}
+      className={classNames(
+        "neeto-ui-avatar--container",
+        {
+          "neeto-ui-avatar--container-round": !isSquare,
+        },
+        className
+      )}
+      {...otherProps}
+    >
+      <Indicator />
+      {shouldDisplayInitials ? (
+        <ImagePlaceholder />
+      ) : (
+        <img
+          className={imageClasses}
+          onLoad={() => setLoaded(true)}
+          onError={() => setLoaded(false)}
+          src={imageUrl}
+          alt={`avatar-${avatarString}`}
+        />
+      )}
+    </div>
+  );
+}
+
+Avatar.defaultProps = {
+  size: "medium",
+  user: {
+    imageUrl: "",
+    name: "",
+  },
+  isSquare: false,
+  onClick: () => {},
+  status: null,
+};
+
+Avatar.propTypes = {
+  /**
+   * Specify the dimension for avatar component.
+   */
+  size: PropTypes.oneOf(Object.keys(SIZE)),
+  user: PropTypes.shape({
+    imageUrl: PropTypes.string,
+    name: PropTypes.string,
+  }),
+  isSquare: PropTypes.bool,
+  onClick: PropTypes.func,
+  /**
+   * Specify the status of the user if needed in avatar component.
+   */
+  status: PropTypes.oneOf(Object.keys(STATUS)),
+  /**
+   * Specify custom className to be applied on the Avatar Container
+   */
+  className: PropTypes.string,
+};
+
+export default Avatar;

package/src/Common/CodeBlock.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const CodeBlock = ({ children }) => {
+  return (
+    <div className="flex-1 p-3 mx-3 my-2 codeblock__container">
+      <pre>{children}</pre>
+    </div>
+  );
+};
+
+export default CodeBlock;

package/src/Common/Description.js

@@ -0,0 +1,12 @@
+import React from "react";
+import classNames from "classnames";
+
+const Description = ({ children, className }) => {
+  return (
+    <p className={classNames("font-serif", { [className]: className })}>
+      {children}
+    </p>
+  );
+};
+
+export default Description;

package/src/Common/Dropdown/index.js

@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
+import { usePopper } from "react-popper";
+import { Down } from "@bigbinary/neeto-icons";
+import { useHotkeys } from "react-hotkeys-hook";
+import OutsideClickHandler from "react-outside-click-handler";
+
+import { hyphenize } from "../../utils/common";
+
+const noop = () => {};
+
+const Dropdown = ({
+  icon,
+  label,
+  isOpen,
+  onClose = noop,
+  ulProps,
+  position,
+  children,
+  autoWidth,
+  className,
+  buttonStyle = "primary",
+  buttonProps,
+  customTarget,
+  disabled = false,
+  closeOnEsc = true,
+  closeOnSelect = true,
+  closeOnOutsideClick = true,
+  dropdownModifiers = [],
+  ...otherProps
+}) => {
+  const Target = customTarget;
+  const isControlled = !(isOpen === undefined || isOpen === null);
+
+  const [visible, setVisibility] = useState(false);
+  const [reference, setReference] = useState(null);
+  const [popper, setPopper] = useState(null);
+
+  const { styles, attributes } = usePopper(reference, popper, {
+    placement: position || "bottom-end",
+    modifiers: dropdownModifiers,
+  });
+
+  const onPopupClose = () => {
+    if (!isControlled) setVisibility(false);
+    onClose();
+  };
+
+  const handlePopperClick = () => {
+    closeOnSelect && onPopupClose();
+  };
+
+  const handleButtonClick = () => {
+    setVisibility(!visible);
+  };
+
+  closeOnEsc && useHotkeys("esc", onPopupClose);
+
+  if (!isControlled) {
+    buttonProps = {
+      ...buttonProps,
+      onClick: () => {
+        handleButtonClick();
+      },
+    };
+  }
+
+  useEffect(() => {
+    isControlled && setVisibility(isOpen);
+  }, [isOpen]);
+
+  return (
+    <OutsideClickHandler
+      useCapture={true}
+      onOutsideClick={() => {
+        closeOnOutsideClick && onPopupClose();
+      }}
+    >
+      <div
+        className={classnames("neeto-ui-dropdown__wrapper", {
+          "neeto-ui-dropdown__wrapper--auto-width": autoWidth,
+          [className]: className,
+        })}
+        {...otherProps}
+      >
+        {customTarget ? (
+          <div ref={setReference} onClick={handleButtonClick}>
+            <Target />
+          </div>
+        ) : (
+          <div>
+            {label}
+            <Down />
+          </div>
+        )}
+        {visible && (
+          <ul
+            className="neeto-ui-dropdown__popup"
+            ref={setPopper}
+            onClick={handlePopperClick}
+            data-cy={`${hyphenize(label)}-dropdown-container`}
+            {...ulProps}
+            style={{
+              display: "block",
+              ...styles.offset,
+              ...styles.popper,
+            }}
+            {...attributes.popper}
+          >
+            {children}
+          </ul>
+        )}
+      </div>
+    </OutsideClickHandler>
+  );
+};
+
+export default Dropdown;

package/src/Common/Heading.js

@@ -0,0 +1,13 @@
+import React from "react";
+import classNames from "classnames";
+
+const Heading = ({ children, type = "main" }) => {
+  const className = classNames({
+    "mb-3 mt-14 text-3xl font-extrabold": type === "main",
+    "mb-1 mt-8 text-xl font-bold": type === "sub",
+  });
+
+  return <h1 className={className}>{children}</h1>;
+};
+
+export default Heading;

package/src/Common/HighlightText.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const HighlightText = ({ children }) => (
+  <span className="px-1 font-mono bg-gray-100">{children}</span>
+);
+
+export default HighlightText;

package/src/Common/Icons/HashtagFilled.js

@@ -0,0 +1,59 @@
+/** Icons generated by create-react-icons. Don't edit this file directly. **/
+import React from "react";
+import PropTypes from "prop-types";
+
+export function HashtagFilled(props) {
+  const { size, color, bgColor, ...other } = props;
+  return (
+    <svg viewBox="0 0 24 24" fill="none" height={size} width={size} {...other}>
+      <path
+        d="M21 7V17C21 19.209 19.209 21 17 21H7C4.791 21 3 19.209 3 17V7C3 4.791 4.791 3 7 3H17C19.209 3 21 4.791 21 7Z"
+        fill={bgColor}
+        stroke={bgColor}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 8V16"
+        stroke={color}
+        strokeWidth="1.389"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14 8V16"
+        stroke={color}
+        strokeWidth="1.389"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 14H16"
+        stroke={color}
+        strokeWidth="1.389"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 10H16"
+        stroke={color}
+        strokeWidth="1.389"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+HashtagFilled.defaultProps = {
+  color: "white",
+  bgColor: "#68737D",
+  size: 24,
+};
+
+HashtagFilled.propTypes = {
+  color: PropTypes.string,
+  bgColor: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

package/src/Common/Icons/TextColor.js

@@ -0,0 +1,35 @@
+/** Icons generated by create-react-icons. Don't edit this file directly. **/
+import React from "react";
+import PropTypes from "prop-types";
+
+export function TextColor(props) {
+  const { size, color, underlineColor, ...other } = props;
+  return (
+    <svg viewBox="0 0 24 24" fill="none" height={size} width={size} {...other}>
+      <path
+        d="M21 20H3"
+        stroke={underlineColor || color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.3125 15L12.1562 4L7 15M8.03125 12.8H16.2812"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+TextColor.defaultProps = {
+  color: "currentColor",
+  size: 24,
+};
+
+TextColor.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

package/src/Common/Icons/index.js

@@ -0,0 +1,2 @@
+export * from "./TextColor";
+export * from "./HashtagFilled";

package/src/Common/ListItems.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+const ListItems = ({ items, ordered }) => {
+  const itemElements = items.map((item, index) => (
+    <li key={item.key || index}>{item}</li>
+  ));
+
+  const className = "font-serif text-lg list-inside";
+
+  return ordered ? (
+    <ol className={`${className} list-decimal`}>{itemElements}</ol>
+  ) : (
+    <ul className={`${className} list-disc`}>{itemElements}</ul>
+  );
+};
+
+export default ListItems;

package/src/Editor/CustomExtensions/BubbleMenu/index.js

@@ -2,13 +2,15 @@ import React from "react";
 import classnames from "classnames";
 import { BubbleMenu } from "@tiptap/react";
 import {
-  FaBold,
-  FaItalic,
-  FaStrikethrough,
-  FaHighlighter,
-  FaCode,
-  FaLink,
-} from "react-icons/fa";
+  TextBold,
+  TextItalic,
+  TextCross,
+  Link,
+  Code,
+  Highlight,
+} from "@bigbinary/neeto-icons";
+import { roundArrow } from "tippy.js";
+import "tippy.js/dist/svg-arrow.css";
 
 export default function index({ editor, formatterOptions }) {
   if (!editor) {
@@ -16,25 +18,25 @@ export default function index({ editor, formatterOptions }) {
   }
   const options = [
     {
-      Icon: FaBold,
+      Icon: TextBold,
       command: () => editor.chain().focus().toggleBold().run(),
       active: editor.isActive("bold"),
       optionName: "bold",
     },
     {
-      Icon: FaItalic,
+      Icon: TextItalic,
       command: () => editor.chain().focus().toggleItalic().run(),
       active: editor.isActive("italic"),
       optionName: "italic",
     },
     {
-      Icon: FaStrikethrough,
+      Icon: TextCross,
       command: () => editor.chain().focus().toggleStrike().run(),
       active: editor.isActive("strike"),
       optionName: "strike",
     },
     {
-      Icon: FaLink,
+      Icon: Link,
       command: () => {
         if (editor.isActive("link")) {
           editor.chain().focus().unsetLink().run();
@@ -47,39 +49,44 @@ export default function index({ editor, formatterOptions }) {
       optionName: "link",
     },
     {
-      Icon: FaCode,
+      Icon: Code,
       command: () => editor.chain().focus().toggleCode().run(),
       active: editor.isActive("code"),
       optionName: "code",
     },
     {
-      Icon: FaHighlighter,
+      Icon: Highlight,
       command: () => editor.chain().focus().toggleHighlight().run(),
       active: editor.isActive("highlight"),
       optionName: "highlight",
     },
   ];
   return (
-    <BubbleMenu editor={editor}>
-      <div className="relative flex items-center overflow-hidden bg-gray-900 rounded shadow">
-        {options
-          .filter(({ optionName }) => formatterOptions.includes(optionName))
-          .map((option) => (
-            <Option {...option} key={option.optionName} />
-          ))}
-      </div>
+    <BubbleMenu
+      editor={editor}
+      tippyOptions={{ arrow: roundArrow }}
+      className="relative flex rounded shadow editor-command-list--root"
+    >
+      {options
+        .filter(({ optionName }) => formatterOptions.includes(optionName))
+        .map((option) => (
+          <Option {...option} key={option.optionName} />
+        ))}
     </BubbleMenu>
   );
 }
 
 const Option = ({ Icon, command, active, iconSize }) => (
   <div
-    className={classnames("p-3 cursor-pointer hover:bg-gray-800", {
-      "text-gray-400": !active,
-      "text-white": active,
-    })}
+    className={classnames(
+      "p-3 cursor-pointer editor-command-list--item transition-colors rounded",
+      {
+        "text-gray-400": !active,
+        "text-white": active,
+      }
+    )}
     onClick={command}
   >
-    <Icon size={iconSize || 15} />
+    <Icon size={iconSize || 24} />
   </div>
 );

package/src/Editor/CustomExtensions/Embeds.js

@@ -3,9 +3,11 @@ import { Node, mergeAttributes } from "@tiptap/core";
 export default Node.create({
   name: "external-video",
 
-  defaultOptions: {
-    inline: false,
-    HTMLAttributes: {},
+  addOptions() {
+    return {
+      inline: false,
+      HTMLAttributes: {},
+    };
   },
 
   inline() {