@bigbinary/neeto-editor 0.2.1 → 0.2.2

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

@@ -1,183 +0,0 @@
-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/ExtensionConfig.js

@@ -1,47 +0,0 @@
-import Image from "@tiptap/extension-image";
-import { mergeAttributes } from "@tiptap/core";
-
-export default Image.extend({
-  name: "image",
-
-  addAttributes() {
-    return {
-      ...Image.config.addAttributes(),
-      size: {
-        default: "small",
-        rendered: false,
-      },
-      float: {
-        default: "none",
-        rendered: false,
-      },
-    };
-  },
-
-  addCommands() {
-    return {
-      setImage:
-        (options) =>
-        ({ tr, commands }) => {
-          if (tr.selection?.node?.type?.name == "image") {
-            return commands.updateAttributes("image", options);
-          } else {
-            return commands.insertContent({
-              type: this.name,
-              attrs: options,
-            });
-          }
-        },
-    };
-  },
-
-  renderHTML({ node, HTMLAttributes }) {
-    HTMLAttributes.class = " image-" + node.attrs.size;
-    HTMLAttributes.class += " image-float-" + node.attrs.float;
-
-    return [
-      "img",
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-    ];
-  },
-});

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

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

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

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

@@ -1,34 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-import { Close } from "@bigbinary/neeto-icons";
-
-const ProgressBar = ({ uppy }) => {
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    uppy.on("progress", setProgress);
-  }, [uppy]);
-
-  const progressPercentage = `${progress}%`;
-
-  return (
-    <div className="progress-bar__root">
-      <div className="flex items-center justify-between">
-        <span className="progress-bar__percent-text">{progressPercentage}</span>
-        <button onClick={uppy.cancelAll}>
-          <Close size={16} />
-        </button>
-      </div>
-      <div className="progress-bar__indicator">
-        <div className="flex h-full">
-          <div
-            style={{ width: progressPercentage }}
-            className="flex flex-col justify-center text-center text-white shadow-none whitespace-nowrap progress-bar__indicator-inner"
-          ></div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ProgressBar;

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

@@ -1,82 +0,0 @@
-import React, { useState, useMemo } from "react";
-import { view } from "@risingstack/react-easy-state";
-import Uppy from "@uppy/core";
-import XHRUpload from "@uppy/xhr-upload";
-import Modal from "common/Modal";
-import Tab from "common/Tab";
-import useTabBar from "hooks/useTabBar";
-
-import LocalUploader from "./LocalUploader";
-import ProgressBar from "./ProgressBar";
-
-import URLForm from "./LinkUploader/URLForm";
-
-import { IMAGE_UPLOAD_OPTIONS } from "./constants";
-
-const ImageUpload = ({ editor, imageUploadUrl, isVisible, setIsVisible }) => {
-  const [isUploading, setIsUploading] = useState(false);
-  const [activeTab, setActiveTab] = useTabBar(IMAGE_UPLOAD_OPTIONS);
-
-  const uppy = useMemo(
-    () =>
-      new Uppy({
-        allowMultipleUploads: false,
-        autoProceed: true,
-        debug: true,
-      })
-        .use(XHRUpload, {
-          endpoint: imageUploadUrl || "/api/v1/direct_uploads",
-          formData: true,
-          fieldName: "blob",
-        })
-        .on("upload", () => setIsUploading(true))
-        .on("upload-success", (file, response) => {
-          const url = response.body.imageURL;
-          editor.chain().focus().setImage({ src: url }).run();
-          setIsVisible(false);
-        })
-        .on("cancel-all", () => setIsUploading(false))
-        .on("complete", () => setIsUploading(false)),
-    [editor]
-  );
-
-  const handleUrlFormSubmit = (url) => {
-    editor.chain().focus().setImage({ src: url }).run();
-    setIsVisible(false);
-  };
-
-  return (
-    <Modal isVisible={isVisible} onClose={() => setIsVisible(false)}>
-      <div className="image-uploader__root">
-        <Tab>
-          {IMAGE_UPLOAD_OPTIONS.map((option) => (
-            <Tab.Item
-              active={activeTab === option.key}
-              onClick={() => setActiveTab(option)}
-            >
-              {option.title}
-            </Tab.Item>
-          ))}
-        </Tab>
-
-        <div className="image-uploader__content">
-          {isUploading ? (
-            <div className="flex flex-col items-center justify-center flex-1 text-center">
-              <span className="label--primary">Uploading...</span>
-              <span className="label--secondary">
-                {uppy.getFiles()[0]?.name}
-              </span>
-              <ProgressBar uppy={uppy} />
-            </div>
-          ) : activeTab === "local" ? (
-            <LocalUploader uppy={uppy} />
-          ) : activeTab === "link" ? (
-            <URLForm onSubmit={handleUrlFormSubmit} />
-          ) : null}
-        </div>
-      </div>
-    </Modal>
-  );
-};
-
-export default view(ImageUpload);

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

@@ -1,5 +0,0 @@
-export const IMAGE_UPLOAD_OPTIONS = [
-  { title: "Upload", key: "local" },
-  { title: "Link", key: "link" },
-  { title: "Unsplash", key: "unsplash" },
-];

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

@@ -1,66 +0,0 @@
-import Mention from "@tiptap/extension-mention";
-import tippy from "tippy.js";
-import { ReactRenderer } from "@tiptap/react";
-
-import { MentionList } from "./MentionList";
-
-import { createMentionSuggestions } from "./helpers";
-
-const suggestion = {
-  render: () => {
-    let reactRenderer;
-    let popup;
-
-    return {
-      onStart: (props) => {
-        reactRenderer = new ReactRenderer(MentionList, {
-          props,
-          editor: props.editor,
-        });
-
-        popup = tippy("body", {
-          getReferenceClientRect: props.clientRect,
-          appendTo: () => document.body,
-          content: reactRenderer.element,
-          showOnCreate: true,
-          interactive: true,
-          trigger: "manual",
-          placement: "bottom-start",
-        });
-      },
-
-      onUpdate(props) {
-        reactRenderer.updateProps(props);
-
-        popup[0].setProps({
-          getReferenceClientRect: props.clientRect,
-        });
-      },
-
-      onKeyDown(props) {
-        if (props.event.key === "Escape") {
-          popup[0].hide();
-
-          return true;
-        }
-
-        return reactRenderer.ref?.onKeyDown(props);
-      },
-
-      onExit() {
-        popup[0].destroy();
-        reactRenderer.destroy();
-      },
-    };
-  },
-};
-
-export default {
-  configure: ({ suggestion: suggestionConfig = {}, ...otherConfig }) =>
-    Mention.configure({
-      ...otherConfig,
-      suggestion: { ...suggestion, ...suggestionConfig },
-    }),
-};
-
-export { createMentionSuggestions };

package/src/Editor/CustomExtensions/Mention/MentionList.js

@@ -1,96 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-
-import Avatar from "common/Avatar";
-
-export class MentionList extends React.Component {
-  state = { selectedIndex: 0 };
-
-  componentDidUpdate(prevProps) {
-    const { items } = this.props;
-    if (items !== prevProps.items) {
-      this.setState({ selectedIndex: 0 });
-    }
-  }
-
-  selectItem = (index) => {
-    const { items, command } = this.props;
-    const item = items[index];
-
-    if (item) {
-      command({ label: item.label, id: item.key });
-    }
-  };
-
-  upHandler = () => {
-    const { items } = this.props;
-    this.setState((prevState) => {
-      const { selectedIndex } = prevState;
-      const nextSelectedIndex =
-        (selectedIndex + items.length - 1) % items.length;
-      return {
-        selectedIndex: nextSelectedIndex,
-      };
-    });
-  };
-
-  downHandler = () => {
-    const { items } = this.props;
-    this.setState((prevState) => {
-      const { selectedIndex } = prevState;
-      const nextSelectedIndex = (selectedIndex + 1) % items.length;
-      return {
-        selectedIndex: nextSelectedIndex,
-      };
-    });
-  };
-
-  enterHandler = () => {
-    const { selectedIndex } = this.state;
-    this.selectItem(selectedIndex);
-  };
-
-  onKeyDown = ({ event }) => {
-    const keyDownHandlers = {
-      ArrowUp: this.upHandler,
-      ArrowDown: this.downHandler,
-      Enter: this.enterHandler,
-    };
-
-    if (keyDownHandlers.hasOwnProperty(event.key)) {
-      keyDownHandlers[event.key]();
-      return true;
-    }
-
-    return false;
-  };
-
-  render() {
-    const { selectedIndex } = this.state;
-    const { items } = this.props;
-
-    const containerClassName =
-      "relative p-2 space-y-1 overflow-hidden rounded shadow editor-command-list--root";
-    const itemClassName =
-      "flex items-center w-full px-4 py-2 transition-all duration-100 ease-in-out cursor-pointer text-xs text-white rounded editor-command-list--item";
-
-    return (
-      <div className={containerClassName}>
-        {items.map(({ label, imageUrl, showImage }, index) => (
-          <button
-            className={classNames(itemClassName, {
-              selected_item: index === selectedIndex,
-            })}
-            key={label}
-            onClick={() => this.selectItem(index)}
-          >
-            {showImage ? (
-              <Avatar user={{ name: label, imageUrl }} className="mr-2" />
-            ) : null}
-            <span>{label}</span>
-          </button>
-        ))}
-      </div>
-    );
-  }
-}

package/src/Editor/CustomExtensions/Mention/helpers.js

@@ -1,23 +0,0 @@
-export const createMentionSuggestions = (
-  items = [],
-  { limit = 5, showImage = false } = {}
-) => {
-  const allSuggestions = items.map((item) => {
-    let suggestionObj;
-    if (typeof item === "string") {
-      suggestionObj = { key: item, label: item };
-    } else if (typeof item === "object") {
-      suggestionObj = { ...item };
-    }
-    suggestionObj.showImage = showImage;
-
-    return suggestionObj;
-  });
-
-  return ({ query }) =>
-    allSuggestions
-      .filter((suggestion) =>
-        suggestion.label.toLowerCase().startsWith(query.toLowerCase())
-      )
-      .slice(0, limit);
-};

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

@@ -1,81 +0,0 @@
-import { Extension } from "@tiptap/core";
-import { Decoration, DecorationSet } from "prosemirror-view";
-import { Plugin } from "prosemirror-state";
-
-import { placeholderGenerator } from "./helpers";
-
-export default Extension.create({
-  name: "placeholder",
-
-  addOptions() {
-    return {
-      excludeNodeTypes: ["variable"],
-      emptyEditorClass: "is-editor-empty",
-      emptyNodeClass: "is-empty",
-      placeholder: "Write something …",
-      showOnlyWhenEditable: true,
-      showOnlyCurrent: true,
-      includeChildren: false,
-    };
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        props: {
-          decorations: ({ doc, selection }) => {
-            const active =
-              this.editor.isEditable || !this.options.showOnlyWhenEditable;
-            const { anchor } = selection;
-            const decorations = [];
-
-            if (!active) {
-              return;
-            }
-
-            doc.descendants((node, pos) => {
-              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
-              const isEmpty = !node.isLeaf && !node.childCount;
-
-              const isExcluded = this.options.excludeNodeTypes.includes(
-                node.type.name
-              );
-
-              if (
-                (hasAnchor || !this.options.showOnlyCurrent) &&
-                !isExcluded &&
-                isEmpty
-              ) {
-                const classes = [this.options.emptyNodeClass];
-
-                if (this.editor.isEmpty) {
-                  classes.push(this.options.emptyEditorClass);
-                }
-
-                const decoration = Decoration.node(pos, pos + node.nodeSize, {
-                  class: classes.join(" "),
-                  "data-placeholder":
-                    typeof this.options.placeholder === "function"
-                      ? this.options.placeholder({
-                          editor: this.editor,
-                          node,
-                          pos,
-                        })
-                      : this.options.placeholder,
-                });
-
-                decorations.push(decoration);
-              }
-
-              return this.options.includeChildren;
-            });
-
-            return DecorationSet.create(doc, decorations);
-          },
-        },
-      }),
-    ];
-  },
-});
-
-export { placeholderGenerator };

package/src/Editor/CustomExtensions/Placeholder/helpers.js

@@ -1,18 +0,0 @@
-import isPlainObject from "lodash.isplainobject";
-
-export const placeholderGenerator = (placeholder) => {
-  const type = typeof placeholder;
-
-  if (type === "string" || type === "funtion") {
-    return placeholder;
-  }
-
-  if (isPlainObject(placeholder)) {
-    return ({ node }) => {
-      const { name } = node.type;
-      return placeholder[name];
-    };
-  }
-
-  return "";
-};