@bigbinary/neeto-editor 0.1.15 → 0.2.1

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/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/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

@@ -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 overflow-hidden 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",
+      {
+        "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() {

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

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { TextSize } from "@bigbinary/neeto-icons";
+
+import { ICON_COLOR_ACTIVE, MENU_ICON_SIZE } from "./constants";
+import Dropdown from "common/Dropdown";
+
+const FontSizeOption = ({ onChange }) => {
+  const options = [
+    { label: <h2 className="text-xl font-medium">Large</h2>, value: "large" },
+    { label: <h3 className="text-lg">Medium</h3>, value: "medium" },
+    { label: <span className="text-sm">Normal</span>, value: "normal" },
+  ];
+
+  return (
+    <Dropdown
+      customTarget={() => (
+        <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)} key={value}>
+          {label}
+        </li>
+      ))}
+    </Dropdown>
+  );
+};
+
+export default FontSizeOption;

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

@@ -0,0 +1,29 @@
+import React, { useRef } from "react";
+
+import { TextColor } from "common/Icons";
+import { ICON_COLOR_ACTIVE, MENU_ICON_SIZE } from "./constants";
+
+const TextColorOption = ({ color = "#000", onChange }) => {
+  const colorInputRef = useRef();
+
+  return (
+    <div
+      onClick={() => colorInputRef.current?.click()}
+      className="flex items-center justify-center p-3 transition-colors cursor-pointer editor-fixed-menu--item"
+    >
+      <TextColor
+        size={MENU_ICON_SIZE}
+        underlineColor={color}
+        color={ICON_COLOR_ACTIVE}
+      />
+      <input
+        ref={colorInputRef}
+        type="color"
+        className="invisible w-0 h-0"
+        onChange={(event) => onChange && onChange(event.target.value)}
+      />
+    </div>
+  );
+};
+
+export default TextColorOption;

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

@@ -0,0 +1,3 @@
+export const MENU_ICON_SIZE = 24;
+export const ICON_COLOR_ACTIVE = "#2F3941";
+export const ICON_COLOR_INACTIVE = "#87929D";

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

@@ -0,0 +1,183 @@
+import React from "react";
+import {
+  TextBold,
+  TextItalic,
+  Underline,
+  TextCross,
+  Link,
+  Code,
+  ListDot,
+  ListNumber,
+  Image,
+  Quote,
+  Undo,
+  Redo,
+} from "@bigbinary/neeto-icons";
+
+import TextColorOption from "./TextColorOption";
+import FontSizeOption from "./FontSizeOption";
+
+import { ICON_COLOR_ACTIVE, ICON_COLOR_INACTIVE } from "./constants";
+import Variables from "../Variable";
+
+const FixedMenu = ({ editor, variables, setImageUploadVisible }) => {
+  if (!editor) {
+    return null;
+  }
+
+  const fontStyleOptions = [
+    {
+      Icon: TextBold,
+      command: () => editor.chain().focus().toggleBold().run(),
+      active: editor.isActive("bold"),
+      optionName: "bold",
+    },
+    {
+      Icon: TextItalic,
+      command: () => editor.chain().focus().toggleItalic().run(),
+      active: editor.isActive("italic"),
+      optionName: "italic",
+    },
+    {
+      Icon: Underline,
+      command: () => editor.chain().focus().toggleUnderline().run(),
+      active: editor.isActive("underline"),
+      optionName: "underline",
+      size: 27,
+    },
+    {
+      Icon: TextCross,
+      command: () => editor.chain().focus().toggleStrike().run(),
+      active: editor.isActive("strike"),
+      optionName: "strike",
+    },
+  ];
+
+  const blockStyleOptions = [
+    {
+      Icon: Link,
+      command: () => {
+        if (editor.isActive("link")) {
+          editor.chain().focus().unsetLink().run();
+        } else {
+          const url = window.prompt("Please enter your URL");
+          editor.chain().focus().setLink({ href: url }).run();
+        }
+      },
+      active: editor.isActive("link"),
+      optionName: "link",
+    },
+    {
+      Icon: Quote,
+      command: () => editor.chain().focus().toggleBlockquote().run(),
+      active: editor.isActive("blockquote"),
+      optionName: "block-quote",
+    },
+    {
+      Icon: Code,
+      command: () => editor.chain().focus().toggleCode().run(),
+      active: editor.isActive("code"),
+      optionName: "code",
+    },
+    {
+      Icon: Image,
+      command: () => setImageUploadVisible(true),
+      optionName: "image-upload",
+    },
+  ];
+
+  const listStyleOptions = [
+    {
+      Icon: ListDot,
+      command: () => editor.chain().focus().toggleBulletList().run(),
+      active: editor.isActive("bulletList"),
+      optionName: "bullet-list",
+    },
+    {
+      Icon: ListNumber,
+      command: () => editor.chain().focus().toggleOrderedList().run(),
+      active: editor.isActive("orderedList"),
+      optionName: "ordered-list",
+    },
+  ];
+
+  const editorOptions = [
+    {
+      Icon: Undo,
+      command: () => editor.chain().focus().undo().run(),
+      optionName: "undo",
+      disabled: !editor.can().undo(),
+      active: editor.can().undo(),
+    },
+    {
+      Icon: Redo,
+      command: () => editor.chain().focus().redo().run(),
+      optionName: "redo",
+      disabled: !editor.can().redo(),
+      active: editor.can().redo(),
+    },
+  ];
+
+  const handleTextSizeChange = (value) => {
+    switch (value) {
+      case "large": {
+        editor.chain().focus().setHeading({ level: 2 }).run();
+        break;
+      }
+      case "medium": {
+        editor.chain().focus().setHeading({ level: 3 }).run();
+        break;
+      }
+      case "normal": {
+        editor.chain().focus().setParagraph().run();
+        break;
+      }
+    }
+  };
+
+  const renderOptionButton = ({
+    Icon,
+    command,
+    active,
+    optionName,
+    disabled,
+    ...rest
+  }) => (
+    <button
+      disabled={disabled}
+      onClick={command}
+      key={optionName}
+      className="p-3 transition-colors cursor-pointer editor-fixed-menu--item"
+    >
+      <Icon
+        color={active ? ICON_COLOR_ACTIVE : ICON_COLOR_INACTIVE}
+        {...rest}
+      />
+    </button>
+  );
+
+  return (
+    <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}
+          onChange={(color) => editor.chain().focus().setColor(color).run()}
+        />
+        <FontSizeOption onChange={handleTextSizeChange} />
+        {fontStyleOptions.map(renderOptionButton)}
+      </div>
+      {[blockStyleOptions, listStyleOptions, editorOptions].map(
+        (optionGroup, index) => (
+          <div className="flex" key={index}>
+            {optionGroup.map(renderOptionButton)}
+          </div>
+        )
+      )}
+      <div className="flex justify-end flex-1">
+        <Variables editor={editor} variables={variables} />
+      </div>
+    </div>
+  );
+};
+
+export default FixedMenu;

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;