@bigbinary/neeto-editor 0.1.15 → 0.2.1

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;

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

@@ -0,0 +1,34 @@
+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,40 +1,81 @@
-import React from "react";
+import React, { useState, useMemo } from "react";
 import { view } from "@risingstack/react-easy-state";
 import Uppy from "@uppy/core";
-import { DashboardModal } from "@uppy/react";
 import XHRUpload from "@uppy/xhr-upload";
-import "@uppy/core/dist/style.css";
-import "@uppy/dashboard/dist/style.css";
-import sharedState from "../../sharedState";
-
-const ImageUpload = ({ editor }) => {
-  const uppy = new Uppy({
-    allowMultipleUploads: false,
-    autoProceed: true,
-    debug: true,
-  });
-
-  uppy.use(XHRUpload, {
-    endpoint: "/api/v1/direct_uploads",
-    formData: true,
-    fieldName: "blob",
-  });
-
-  uppy.on("upload-success", (file, response) => {
-    const url = response.body.imageURL;
+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 (
-    <div>
-      <DashboardModal
-        uppy={uppy}
-        proudlyDisplayPoweredByUppy={false}
-        closeModalOnClickOutside
-        open={sharedState.showImageUpload}
-        onRequestClose={() => (sharedState.showImageUpload = false)}
-      />
-    </div>
+    <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>
   );
 };
 

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+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 "";
+};

package/src/Editor/CustomExtensions/SlashCommands/Commands.js

@@ -1,18 +1,13 @@
 import { Extension } from "@tiptap/core";
+import { PluginKey } from "prosemirror-state";
 import Suggestion from "@tiptap/suggestion";
 
+export const CommandsPluginKey = new PluginKey("commands");
+
 export default Extension.create({
-  name: "mention",
+  name: "commands",
 
-  defaultOptions: {
-    suggestion: {
-      char: "/",
-      startOfLine: false,
-      command: ({ editor, range, props }) => {
-        props.command({ editor, range });
-      },
-    },
-  },
+  defaultOptions: {},
 
   addProseMirrorPlugins() {
     return [

package/src/Editor/CustomExtensions/SlashCommands/CommandsList.js

@@ -1,6 +1,5 @@
 import React from "react";
 import classnames from "classnames";
-import "../../styles/CommandsList.scss";
 
 class CommandsList extends React.Component {
   constructor(props) {
@@ -19,7 +18,7 @@ class CommandsList extends React.Component {
     }
   }
 
-  onKeyDown({ event }) {
+  onKeyDown = ({ event }) => {
     if (event.key === "ArrowUp") {
       this.upHandler();
       return true;
@@ -36,45 +35,45 @@ class CommandsList extends React.Component {
     }
 
     return false;
-  }
+  };
 
-  upHandler() {
+  upHandler = () => {
     this.setState({
       selectedIndex:
         (this.state.selectedIndex + this.props.items.length - 1) %
         this.props.items.length,
     });
-  }
+  };
 
-  downHandler() {
+  downHandler = () => {
     this.setState({
       selectedIndex: (this.state.selectedIndex + 1) % this.props.items.length,
     });
-  }
+  };
 
-  enterHandler() {
+  enterHandler = () => {
     this.selectItem(this.state.selectedIndex);
-  }
+  };
 
-  selectItem(index) {
+  selectItem = (index) => {
     const item = this.props.items[index];
 
     if (item) {
       const { editor, range } = this.props;
       item.command({ editor, range });
     }
-  }
+  };
 
   render() {
     return (
-      <div className="relative py-2 overflow-hidden bg-gray-900 rounded shadow">
+      <div className="relative p-3 space-y-2 overflow-hidden rounded shadow editor-command-list--root">
         {this.props.items.map((item, index) => (
           <Item
             key={item.title}
             item={item}
             index={index}
             selectedIndex={this.state.selectedIndex}
-            selectItem={this.selectItem}
+            selectItem={() => this.selectItem(index)}
           />
         ))}
       </div>
@@ -87,15 +86,15 @@ const Item = ({ item, selectedIndex, index, selectItem }) => {
   return (
     <div
       className={classnames(
-        "flex items-center w-full px-4 py-2 space-x-4  transition-all duration-100",
+        "flex items-center w-full px-4 py-2 space-x-4 transition-all duration-100 ease-in-out editor-command-list--item cursor-pointer rounded",
         {
-          "bg-gray-800": index === selectedIndex,
+          selected_item: index === selectedIndex,
         }
       )}
       onClick={() => selectItem(index)}
     >
       {Icon && (
-        <div className="p-1 text-gray-100 bg-gray-800 rounded-sm">
+        <div className="p-1 text-gray-100 rounded-sm">
           <Icon size={18} />
         </div>
       )}