@bigbinary/neeto-editor 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-editor",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "./index.js",
   "description": "Neeto Editor is the library that drives the rich text experience in all Neeto products built at BigBinary",
   "keywords": [
@@ -15,6 +15,7 @@
     "@bigbinary/neeto-icons": "^1.8.6",
     "@risingstack/react-easy-state": "^6.3.0",
     "@tailwindcss/typography": "^0.4.0",
+    "@tippyjs/react": "^4.2.6",
     "@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",
@@ -31,9 +32,10 @@
     "@tiptap/react": "^2.0.0-beta.37",
     "@tiptap/starter-kit": "^2.0.0-beta.57",
     "@tiptap/suggestion": "^2.0.0-beta.55",
-    "@uppy/core": "^1.18.1",
-    "@uppy/react": "^1.11.8",
-    "@uppy/xhr-upload": "^1.7.2",
+    "@uppy/core": "^2.1.2",
+    "@uppy/react": "^2.1.1",
+    "@uppy/url": "^2.0.4",
+    "@uppy/xhr-upload": "^2.0.5",
     "classnames": "^2.3.1",
     "lodash.isempty": "^4.4.0",
     "lodash.isplainobject": "^4.0.6",
@@ -43,6 +45,7 @@
     "react-icons": "^4.2.0",
     "react-outside-click-handler": "^1.3.0",
     "react-popper": "^2.2.5",
+    "react-router-dom": "^6.0.2",
     "tippy.js": "^6.3.1"
   },
   "devDependencies": {

package/src/Common/Button.js

@@ -0,0 +1,95 @@
+import React from "react";
+import classnames from "classnames";
+import { Link } from "react-router-dom";
+import ToolTip from "common/ToolTip";
+
+const noop = () => {};
+const BUTTON_STYLES = {
+  primary: "primary",
+  secondary: "secondary",
+  danger: "danger",
+  text: "text",
+  link: "link",
+};
+const BUTTON_SIZES = { large: "large", default: "default" };
+const ICON_POSITIONS = { left: "left", right: "right" };
+
+const Button = React.forwardRef((props, ref) => {
+  let {
+    icon = null,
+    iconPosition = "right",
+    iconSize = 16,
+    label = "",
+    loading = false,
+    onClick = noop,
+    to = null,
+    type = "button",
+    style = "primary",
+    fullWidth = false,
+    className = "",
+    disabled = false,
+    size = null,
+    href = null,
+    tooltipProps = null,
+    ...otherProps
+  } = props;
+
+  const handleClick = (e) => {
+    if (!loading && !disabled) {
+      onClick(e);
+    }
+  };
+
+  let Parent, elementSpecificProps;
+  if (to) {
+    Parent = Link;
+    elementSpecificProps = { to };
+  } else if (href) {
+    Parent = "a";
+    elementSpecificProps = { href };
+  } else {
+    Parent = "button";
+    elementSpecificProps = {
+      type,
+    };
+  }
+
+  let Icon =
+    typeof icon == "string"
+      ? () => <i className={classnames("neeto-ui-btn__icon", [icon])} />
+      : icon || React.Fragment;
+
+  const spinnerMarginSide =
+    iconPosition == "left" ? "marginRight" : "marginLeft";
+
+  return (
+    <ToolTip {...tooltipProps} disabled={!tooltipProps}>
+      <Parent
+        ref={ref}
+        onClick={handleClick}
+        className={classnames("neeto-ui-btn", [className], {
+          "neeto-ui-btn--style-primary": style === BUTTON_STYLES.primary,
+          "neeto-ui-btn--style-secondary": style === BUTTON_STYLES.secondary,
+          "neeto-ui-btn--style-danger": style === BUTTON_STYLES.danger,
+          "neeto-ui-btn--style-text": style === BUTTON_STYLES.text,
+          "neeto-ui-btn--style-link": style === BUTTON_STYLES.link,
+          "neeto-ui-btn--size-large": size === BUTTON_SIZES.large,
+          "neeto-ui-btn--width-full": fullWidth,
+          "neeto-ui-btn--icon-left": iconPosition == ICON_POSITIONS.left,
+          "neeto-ui-btn--icon-only": !label,
+          disabled: disabled,
+        })}
+        disabled={disabled}
+        {...elementSpecificProps}
+        {...otherProps}
+      >
+        {label && <span>{label}</span>}
+        {icon ? (
+          <Icon key="2" size={iconSize} className="neeto-ui-btn__icon" />
+        ) : null}
+      </Parent>
+    </ToolTip>
+  );
+});
+
+export default Button;

package/src/Common/Description.js

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

package/src/Common/Dropdown/index.js

@@ -77,14 +77,18 @@ const Dropdown = ({
       }}
     >
       <div
-        className={classnames("neeto-ui-dropdown__wrapper", {
+        className={classnames("neeto-ui-dropdown__wrapper h-full", {
           "neeto-ui-dropdown__wrapper--auto-width": autoWidth,
           [className]: className,
         })}
         {...otherProps}
       >
         {customTarget ? (
-          <div ref={setReference} onClick={handleButtonClick}>
+          <div
+            ref={setReference}
+            onClick={handleButtonClick}
+            className="h-full"
+          >
             <Target />
           </div>
         ) : (

package/src/Common/Input.js

@@ -0,0 +1,70 @@
+import React from "react";
+import classnames from "classnames";
+
+import Label from "./Label";
+import { hyphenize } from "../utils/common";
+
+const Input = React.forwardRef((props, ref) => {
+  const {
+    id,
+    size = "small",
+    type = "text",
+    label,
+    error = null,
+    suffix = null,
+    prefix = null,
+    disabled = false,
+    helpText = "",
+    className = "",
+    nakedInput = false,
+    contentSize = null,
+    required = false,
+    ...otherProps
+  } = props;
+
+  return (
+    <div className={classnames(["neeto-ui-input__wrapper", className])}>
+      {label && (
+        <Label
+          required={required}
+          data-cy={`${hyphenize(label)}-input-label`}
+          htmlFor={id}
+        >
+          {label}
+        </Label>
+      )}
+      <div
+        className={classnames("neeto-ui-input", {
+          "neeto-ui-input--naked": !!nakedInput,
+          "neeto-ui-input--error": !!error,
+          "neeto-ui-input--disabled": !!disabled,
+          "neeto-ui-input--small": size === "small",
+        })}
+      >
+        {prefix && <div className="neeto-ui-input__prefix">{prefix}</div>}
+        <input
+          ref={ref}
+          type={type}
+          disabled={disabled}
+          size={contentSize}
+          required={required}
+          aria-invalid={!!error}
+          data-cy={"input-field"}
+          {...otherProps}
+        />
+        {suffix && <div className="neeto-ui-input__suffix">{suffix}</div>}
+      </div>
+      {!!error && (
+        <p
+          data-cy={`${hyphenize(label)}-input-error`}
+          className="neeto-ui-input__error"
+        >
+          {error}
+        </p>
+      )}
+      {helpText && <p className="neeto-ui-input__help-text">{helpText}</p>}
+    </div>
+  );
+});
+
+export default Input;

package/src/Common/Label.js

@@ -0,0 +1,45 @@
+import React from "react";
+import classnames from "classnames";
+import { Info } from "@bigbinary/neeto-icons";
+
+import Tooltip from "common/ToolTip";
+
+const Label = ({
+  children,
+  className = "",
+  required = false,
+  helpIconProps = null,
+  ...otherProps
+}) => {
+  const {
+    onClick,
+    icon,
+    tooltipProps,
+    className: helpIconClassName,
+    ...otherHelpIconProps
+  } = helpIconProps || {};
+  const HelpIcon = icon || Info;
+  return (
+    <label
+      className={classnames("neeto-ui-label flex items-center", className)}
+      {...otherProps}
+    >
+      {children}
+      {required && <span aria-hidden>*</span>}
+      {helpIconProps && (
+        <Tooltip {...tooltipProps} disabled={!tooltipProps}>
+          <span
+            className={classnames("ml-1", {
+              [helpIconClassName]: helpIconClassName,
+            })}
+            onClick={onClick}
+          >
+            <HelpIcon size={16} {...otherHelpIconProps} />
+          </span>
+        </Tooltip>
+      )}
+    </label>
+  );
+};
+
+export default Label;

package/src/Common/Modal.js

@@ -0,0 +1,91 @@
+import React from "react";
+
+const Modal = ({
+  isVisible,
+  onClose,
+  title,
+  buttonTextPrimary,
+  buttonTextSecondary,
+  content,
+  children = null,
+}) => {
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-10 overflow-y-auto"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+        onClick={onClose}
+      >
+        <div
+          className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-50"
+          aria-hidden="true"
+        ></div>
+
+        <span
+          className="hidden sm:inline-block sm:align-middle sm:h-screen"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+
+        <div
+          className="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded shadow-xl sm:my-8 sm:align-middle sm:max-w-lg"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {title || content ? (
+            <div className="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
+              <div className="sm:flex sm:items-start">
+                <div className="mt-3 text-center sm:mt-0 sm:text-left">
+                  {title ? (
+                    <h3
+                      className="text-lg font-medium leading-6 text-gray-900"
+                      id="modal-title"
+                    >
+                      {title}
+                    </h3>
+                  ) : null}
+                  {content ? (
+                    <div className="mt-2">
+                      <p className="text-sm text-gray-500">{content}</p>
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+          ) : null}
+          {children}
+          {buttonTextPrimary || buttonTextSecondary ? (
+            <div className="px-4 py-3 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse">
+              {buttonTextPrimary ? (
+                <button
+                  type="button"
+                  className="inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
+                >
+                  {buttonTextPrimary}
+                </button>
+              ) : null}
+              {buttonTextSecondary ? (
+                <button
+                  type="button"
+                  className="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                >
+                  {buttonTextSecondary}
+                </button>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

package/src/Common/Tab.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import classnames from "classnames";
+
+const noop = () => {};
+
+const TAB_SIZES = { large: "large", default: "default" };
+
+const Tab = ({
+  children,
+  size,
+  noUnderline,
+  className = "",
+  ...otherProps
+}) => {
+  return (
+    <div
+      className={classnames(
+        {
+          "neeto-ui-tab__wrapper flex": true,
+        },
+        {
+          "neeto-ui-tab__wrapper--size-large": size === TAB_SIZES.large,
+        },
+        {
+          "neeto-ui-tab__wrapper--underline-none": noUnderline,
+        },
+        [className]
+      )}
+      data-cy="tab-container"
+      {...otherProps}
+    >
+      {children}
+    </div>
+  );
+};
+
+const Item = ({
+  active,
+  className = "",
+  children,
+  icon = null,
+  onClick = noop,
+  activeClassName = "",
+  ...otherProps
+}) => {
+  let Parent = "button";
+  let Icon =
+    typeof icon == "string"
+      ? () => <i className={icon} data-cy="tab-item-icon" />
+      : icon || React.Fragment;
+
+  if (activeClassName) {
+    Parent = NavLink;
+  }
+  return (
+    <Parent
+      className={classnames(
+        [
+          "neeto-ui-tab flex items-center justify-center select-none",
+          className,
+        ],
+        {
+          active: active,
+        }
+      )}
+      onClick={onClick}
+      data-cy="tab-item"
+      {...otherProps}
+    >
+      {icon && <Icon className="neeto-ui-tab__icon" />}
+      {children}
+    </Parent>
+  );
+};
+
+Tab.Item = Item;
+
+export default Tab;

package/src/Common/ToolTip.js

@@ -0,0 +1,37 @@
+import React from "react";
+import Tippy from "@tippyjs/react";
+import { followCursor } from "tippy.js";
+
+const Tooltip = ({
+  content,
+  children,
+  theme = "dark",
+  disabled = false,
+  placement, // Remove this prop once this prop is migrated to position in all neeto products
+  position = "auto",
+  interactive = false,
+  ...otherProps
+}) => {
+  return (
+    <Tippy
+      role="tooltip"
+      theme={theme}
+      content={content}
+      arrow={
+        "<svg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10 5H0.926697L3.95208 1.63847C4.74227 0.760478 6.11722 0.754951 6.91445 1.62656L10 5Z' /></svg>"
+      }
+      disabled={disabled}
+      animation={"scale-subtle"}
+      placement={placement || position}
+      plugins={[followCursor]}
+      interactive={interactive}
+      duration={[100, 200]}
+      zIndex={100001}
+      {...otherProps}
+    >
+      {children}
+    </Tippy>
+  );
+};
+
+export default Tooltip;

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

@@ -65,7 +65,7 @@ export default function index({ editor, formatterOptions }) {
     <BubbleMenu
       editor={editor}
       tippyOptions={{ arrow: roundArrow }}
-      className="relative flex rounded shadow editor-command-list--root"
+      className="relative flex overflow-hidden rounded shadow editor-command-list--root"
     >
       {options
         .filter(({ optionName }) => formatterOptions.includes(optionName))
@@ -79,7 +79,7 @@ export default function index({ editor, formatterOptions }) {
 const Option = ({ Icon, command, active, iconSize }) => (
   <div
     className={classnames(
-      "p-3 cursor-pointer editor-command-list--item transition-colors rounded",
+      "p-3 cursor-pointer editor-command-list--item transition-colors",
       {
         "text-gray-400": !active,
         "text-white": active,

package/src/Editor/CustomExtensions/FixedMenu/FontSizeOption.js

@@ -3,7 +3,7 @@ import React from "react";
 import { TextSize } from "@bigbinary/neeto-icons";
 
 import { ICON_COLOR_ACTIVE, MENU_ICON_SIZE } from "./constants";
-import Dropdown from "../../../Common/Dropdown";
+import Dropdown from "common/Dropdown";
 
 const FontSizeOption = ({ onChange }) => {
   const options = [
@@ -15,13 +15,13 @@ const FontSizeOption = ({ onChange }) => {
   return (
     <Dropdown
       customTarget={() => (
-        <button className="p-3 transition-colors editor-fixed-menu--item">
+        <button className="h-full p-3 transition-colors editor-fixed-menu--item">
           <TextSize size={MENU_ICON_SIZE} color={ICON_COLOR_ACTIVE} />
         </button>
       )}
     >
       {options.map(({ label, className, value }) => (
-        <li className={className} onClick={() => onChange(value)}>
+        <li className={className} onClick={() => onChange(value)} key={value}>
           {label}
         </li>
       ))}

package/src/Editor/CustomExtensions/FixedMenu/TextColorOption.js

@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 
-import { TextColor } from "../../../Common/Icons";
+import { TextColor } from "common/Icons";
 import { ICON_COLOR_ACTIVE, MENU_ICON_SIZE } from "./constants";
 
 const TextColorOption = ({ color = "#000", onChange }) => {

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

@@ -18,10 +18,9 @@ import TextColorOption from "./TextColorOption";
 import FontSizeOption from "./FontSizeOption";
 
 import { ICON_COLOR_ACTIVE, ICON_COLOR_INACTIVE } from "./constants";
-import sharedState from "../../sharedState";
 import Variables from "../Variable";
 
-const FixedMenu = ({ editor, variables }) => {
+const FixedMenu = ({ editor, variables, setImageUploadVisible }) => {
   if (!editor) {
     return null;
   }
@@ -82,11 +81,7 @@ const FixedMenu = ({ editor, variables }) => {
     },
     {
       Icon: Image,
-      command: ({ editor, range }) => {
-        sharedState.showImageUpload = true;
-        sharedState.range = range;
-        editor.chain().focus().deleteRange(range).run();
-      },
+      command: () => setImageUploadVisible(true),
       optionName: "image-upload",
     },
   ];
@@ -162,7 +157,7 @@ const FixedMenu = ({ editor, variables }) => {
   );
 
   return (
-    <div className="flex items-center space-x-6 border-t border-l border-r editor-fixed-menu--root">
+    <div className="flex space-x-6 border-t border-l border-r editor-fixed-menu--root">
       <div className="flex">
         <TextColorOption
           color={editor.getAttributes("textStyle").color}
@@ -172,8 +167,10 @@ const FixedMenu = ({ editor, variables }) => {
         {fontStyleOptions.map(renderOptionButton)}
       </div>
       {[blockStyleOptions, listStyleOptions, editorOptions].map(
-        (optionGroup) => (
-          <div className="flex">{optionGroup.map(renderOptionButton)}</div>
+        (optionGroup, index) => (
+          <div className="flex" key={index}>
+            {optionGroup.map(renderOptionButton)}
+          </div>
         )
       )}
       <div className="flex justify-end flex-1">

package/src/Editor/CustomExtensions/Image/LinkUploader/URLForm.js

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+
+import Input from "common/Input";
+import Button from "common/Button";
+
+import { UrlRegExp } from "../../../../constants/regexp";
+
+const URLField = ({ onSubmit }) => {
+  const [urlString, setUrlString] = useState("");
+  const [error, setError] = useState("");
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (UrlRegExp.test(urlString)) {
+          onSubmit(urlString);
+        } else {
+          setError("Please provide a valid image url");
+        }
+      }}
+      className="flex flex-col items-center justify-center flex-1 mx-10"
+    >
+      <div className="flex-row w-full mb-4">
+        <Input
+          name="url"
+          value={urlString}
+          placeholder="Paste the image link"
+          onFocus={() => setError("")}
+          error={error}
+          onChange={({ target: { value } }) => setUrlString(value)}
+        />
+      </div>
+      <Button type="submit" label="Upload Image" />
+    </form>
+  );
+};
+
+export default URLField;

package/src/Editor/CustomExtensions/Image/LocalUploader.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { DragDrop } from "@uppy/react";
+
+const LocalUploader = ({ uppy }) => {
+  return (
+    <DragDrop
+      note="Max. File Size: 5MB"
+      uppy={uppy}
+      locale={{
+        strings: {
+          dropHereOr: "Drop your file(s) here or %{browse}",
+          browse: "Browse",
+        },
+      }}
+      className="local-upload__root"
+    />
+  );
+};
+
+export default LocalUploader;