@bigbinary/neeto-editor 0.2.1 → 0.2.5

package/src/Common/Input.js

@@ -1,70 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,92 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { BubbleMenu } from "@tiptap/react";
-import {
-  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) {
-    return null;
-  }
-  const options = [
-    {
-      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: TextCross,
-      command: () => editor.chain().focus().toggleStrike().run(),
-      active: editor.isActive("strike"),
-      optionName: "strike",
-    },
-    {
-      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: Code,
-      command: () => editor.chain().focus().toggleCode().run(),
-      active: editor.isActive("code"),
-      optionName: "code",
-    },
-    {
-      Icon: Highlight,
-      command: () => editor.chain().focus().toggleHighlight().run(),
-      active: editor.isActive("highlight"),
-      optionName: "highlight",
-    },
-  ];
-  return (
-    <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 editor-command-list--item transition-colors",
-      {
-        "text-gray-400": !active,
-        "text-white": active,
-      }
-    )}
-    onClick={command}
-  >
-    <Icon size={iconSize || 24} />
-  </div>
-);

package/src/Editor/CustomExtensions/CodeBlock/CodeBlockComponent.js

@@ -1,12 +0,0 @@
-import React from "react";
-import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
-
-export default function index() {
-  return (
-    <NodeViewWrapper>
-      <pre>
-        <NodeViewContent as="code" />
-      </pre>
-    </NodeViewWrapper>
-  );
-}

package/src/Editor/CustomExtensions/CodeBlock/ExtensionConfig.js

@@ -1,10 +0,0 @@
-import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-import CodeBlockComponent from "./CodeBlockComponent";
-import lowlight from "lowlight";
-
-export default CodeBlockLowlight.extend({
-  addNodeView() {
-    return new ReactNodeViewRenderer(CodeBlockComponent);
-  },
-}).configure({ lowlight });

package/src/Editor/CustomExtensions/Embeds.js

@@ -1,72 +0,0 @@
-import { Node, mergeAttributes } from "@tiptap/core";
-
-export default Node.create({
-  name: "external-video",
-
-  addOptions() {
-    return {
-      inline: false,
-      HTMLAttributes: {},
-    };
-  },
-
-  inline() {
-    return this.options.inline;
-  },
-
-  group() {
-    return this.options.inline ? "inline" : "block";
-  },
-
-  draggable: true,
-
-  addAttributes() {
-    return {
-      src: {
-        default: null,
-      },
-      title: {
-        default: null,
-      },
-      frameborder: {
-        default: "0",
-      },
-      allow: {
-        default:
-          "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-      },
-      allowfullscreen: {
-        default: "allowfullscreen",
-      },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: "iframe[src]",
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "div",
-      { class: "video-wrapper" },
-      ["iframe", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)],
-    ];
-  },
-
-  addCommands() {
-    return {
-      setExternalVideo:
-        (options) =>
-        ({ commands }) => {
-          return commands.insertContent({
-            type: this.name,
-            attrs: options,
-          });
-        },
-    };
-  },
-});

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

@@ -1,32 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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