@bigbinary/neeto-editor 0.2.0 → 0.2.1

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, imageUploadUrl }) => {
-  const uppy = new Uppy({
-    allowMultipleUploads: false,
-    autoProceed: true,
-    debug: true,
-  });
-
-  uppy.use(XHRUpload, {
-    endpoint: imageUploadUrl || "/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

@@ -13,7 +13,6 @@ const suggestion = {
 
     return {
       onStart: (props) => {
-        console.log({ props });
         reactRenderer = new ReactRenderer(MentionList, {
           props,
           editor: props.editor,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 
-import Avatar from "../../../Common/Avatar";
+import Avatar from "common/Avatar";
 
 export class MentionList extends React.Component {
   state = { selectedIndex: 0 };

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

@@ -1,4 +1,3 @@
-import sharedState from "../../sharedState";
 import { Extension } from "@tiptap/core";
 import CommandsList from "./CommandsList";
 import { PluginKey } from "prosemirror-state";
@@ -19,187 +18,192 @@ import {
 
 export const CommandsPluginKey = new PluginKey("commands");
 
-export default Extension.create({
-  addOptions() {
-    return {
-      HTMLAttributes: {
-        class: "commands",
-      },
-      suggestion: {
-        char: "/",
-        startOfLine: false,
-        pluginKey: CommandsPluginKey,
-        command: ({ editor, range, props }) => {
-          props.command({ editor, range });
-        },
-
-        items: () => {
-          return [
-            {
-              title: "Paragraph",
-              description: "Add a plain text block",
-              Icon: Paragraph,
-              command: ({ editor, range }) => {
-                editor
-                  .chain()
-                  .focus()
-                  .deleteRange(range)
-                  .setNode("paragraph")
-                  .run();
-              },
-            },
-            {
-              title: "H1",
-              description: "Add a big heading",
-              Icon: TextH1,
-              command: ({ editor, range }) => {
-                editor
-                  .chain()
-                  .focus()
-                  .deleteRange(range)
-                  .setNode("heading", { level: 1 })
-                  .run();
-              },
-            },
-            {
-              title: "H2",
-              description: "Add a sub-heading",
-              Icon: TextH2,
-              command: ({ editor, range }) => {
-                editor
-                  .chain()
-                  .focus()
-                  .deleteRange(range)
-                  .setNode("heading", { level: 2 })
-                  .run();
-              },
-            },
-            {
-              title: "Numbered list",
-              description: "Add a list with numbering",
-              Icon: ListNumber,
-              command: ({ editor, range }) => {
-                editor
-                  .chain()
-                  .focus()
-                  .deleteRange(range)
-                  .toggleOrderedList()
-                  .run();
-              },
-            },
-            {
-              title: "Bulleted list",
-              description: "Add an list bullets",
-              Icon: ListDot,
-              command: ({ editor, range }) => {
-                editor
-                  .chain()
-                  .focus()
-                  .deleteRange(range)
-                  .toggleBulletList()
-                  .run();
-              },
-            },
-            {
-              title: "Blockquote",
-              description: "Add a quote",
-              Icon: Blockquote,
-              command: ({ editor, range }) => {
-                editor
-                  .chain()
-                  .focus()
-                  .deleteRange(range)
-                  .toggleBlockquote()
-                  .run();
-              },
+export default {
+  configure: ({ setImageUploadVisible }) =>
+    Extension.create({
+      addOptions() {
+        return {
+          HTMLAttributes: {
+            class: "commands",
+          },
+          suggestion: {
+            char: "/",
+            startOfLine: false,
+            pluginKey: CommandsPluginKey,
+            command: ({ editor, range, props }) => {
+              props.command({ editor, range });
             },
-            {
-              title: "Image",
-              description: "Add an image",
-              Icon: Image,
-              command: ({ editor, range }) => {
-                sharedState.showImageUpload = true;
-                sharedState.range = range;
-                editor.chain().focus().deleteRange(range).run();
-              },
-            },
-            {
-              title: "Youtube/Vimeo",
-              description: "Embed a video from major services",
-              Icon: Video,
-              command: ({ editor, range }) => {
-                const embedURL = prompt("Please enter Youtube/Vimeo embed URL");
-                editor
-                  .chain()
-                  .focus()
-                  .deleteRange(range)
-                  .setExternalVideo({ src: embedURL })
-                  .run();
-              },
-            },
-            {
-              title: "Code block",
-              description: "Add a code block with syntax highlighting",
-              Icon: Code,
-              command: ({ editor, range }) => {
-                editor
-                  .chain()
-                  .focus()
-                  .deleteRange(range)
-                  .toggleCodeBlock()
-                  .run();
-              },
+
+            items: () => {
+              return [
+                {
+                  title: "Paragraph",
+                  description: "Add a plain text block",
+                  Icon: Paragraph,
+                  command: ({ editor, range }) => {
+                    editor
+                      .chain()
+                      .focus()
+                      .deleteRange(range)
+                      .setNode("paragraph")
+                      .run();
+                  },
+                },
+                {
+                  title: "H1",
+                  description: "Add a big heading",
+                  Icon: TextH1,
+                  command: ({ editor, range }) => {
+                    editor
+                      .chain()
+                      .focus()
+                      .deleteRange(range)
+                      .setNode("heading", { level: 1 })
+                      .run();
+                  },
+                },
+                {
+                  title: "H2",
+                  description: "Add a sub-heading",
+                  Icon: TextH2,
+                  command: ({ editor, range }) => {
+                    editor
+                      .chain()
+                      .focus()
+                      .deleteRange(range)
+                      .setNode("heading", { level: 2 })
+                      .run();
+                  },
+                },
+                {
+                  title: "Numbered list",
+                  description: "Add a list with numbering",
+                  Icon: ListNumber,
+                  command: ({ editor, range }) => {
+                    editor
+                      .chain()
+                      .focus()
+                      .deleteRange(range)
+                      .toggleOrderedList()
+                      .run();
+                  },
+                },
+                {
+                  title: "Bulleted list",
+                  description: "Add an list bullets",
+                  Icon: ListDot,
+                  command: ({ editor, range }) => {
+                    editor
+                      .chain()
+                      .focus()
+                      .deleteRange(range)
+                      .toggleBulletList()
+                      .run();
+                  },
+                },
+                {
+                  title: "Blockquote",
+                  description: "Add a quote",
+                  Icon: Blockquote,
+                  command: ({ editor, range }) => {
+                    editor
+                      .chain()
+                      .focus()
+                      .deleteRange(range)
+                      .toggleBlockquote()
+                      .run();
+                  },
+                },
+                {
+                  title: "Image",
+                  description: "Add an image",
+                  Icon: Image,
+                  command: ({ editor, range }) => {
+                    setImageUploadVisible(true);
+                    editor.chain().focus().deleteRange(range).run();
+                  },
+                },
+                {
+                  title: "Youtube/Vimeo",
+                  description: "Embed a video from major services",
+                  Icon: Video,
+                  command: ({ editor, range }) => {
+                    const embedURL = prompt(
+                      "Please enter Youtube/Vimeo embed URL"
+                    );
+                    editor
+                      .chain()
+                      .focus()
+                      .deleteRange(range)
+                      .setExternalVideo({ src: embedURL })
+                      .run();
+                  },
+                },
+                {
+                  title: "Code block",
+                  description: "Add a code block with syntax highlighting",
+                  Icon: Code,
+                  command: ({ editor, range }) => {
+                    editor
+                      .chain()
+                      .focus()
+                      .deleteRange(range)
+                      .toggleCodeBlock()
+                      .run();
+                  },
+                },
+              ];
             },
-          ];
-        },
 
-        render: () => {
-          let reactRenderer;
-          let popup;
+            render: () => {
+              let reactRenderer;
+              let popup;
 
-          return {
-            onStart: (props) => {
-              reactRenderer = new ReactRenderer(CommandsList, {
-                props,
-                editor: props.editor,
-              });
+              return {
+                onStart: (props) => {
+                  reactRenderer = new ReactRenderer(CommandsList, {
+                    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 = tippy("body", {
+                    getReferenceClientRect: props.clientRect,
+                    appendTo: () => document.body,
+                    content: reactRenderer.element,
+                    showOnCreate: true,
+                    interactive: true,
+                    trigger: "manual",
+                    placement: "bottom-start",
+                    arrow: false,
+                  });
+                },
+                onUpdate(props) {
+                  reactRenderer.updateProps(props);
 
-              popup[0].setProps({
-                getReferenceClientRect: props.clientRect,
-              });
+                  popup[0].setProps({
+                    getReferenceClientRect: props.clientRect,
+                  });
+                },
+                onKeyDown(props) {
+                  return reactRenderer.ref?.onKeyDown(props);
+                },
+                onExit() {
+                  popup[0].destroy();
+                  reactRenderer.destroy();
+                },
+              };
             },
-            onKeyDown(props) {
-              return reactRenderer.ref?.onKeyDown(props);
-            },
-            onExit() {
-              popup[0].destroy();
-              reactRenderer.destroy();
-            },
-          };
-        },
+          },
+        };
       },
-    };
-  },
 
-  addProseMirrorPlugins() {
-    return [
-      Suggestion({
-        editor: this.editor,
-        ...this.options.suggestion,
-      }),
-    ];
-  },
-});
+      addProseMirrorPlugins() {
+        return [
+          Suggestion({
+            editor: this.editor,
+            ...this.options.suggestion,
+          }),
+        ];
+      },
+    }),
+};

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

@@ -1,8 +1,8 @@
 import React from "react";
 
 import VariableList from "./VariableList";
-import Dropdown from "../../../Common/Dropdown";
-import { HashtagFilled } from "../../../Common/Icons";
+import Dropdown from "common/Dropdown";
+import { HashtagFilled } from "common/Icons";
 
 import { MENU_ICON_SIZE } from "../FixedMenu/constants";
 
@@ -20,7 +20,7 @@ const Variables = ({ editor, variables }) => {
   return (
     <Dropdown
       customTarget={() => (
-        <button className="relative p-3 editor-fixed-menu--item variable-selection-popup">
+        <button className="relative h-full p-3 editor-fixed-menu--item variable-selection-popup">
           <HashtagFilled size={MENU_ICON_SIZE} />
         </button>
       )}

package/src/Editor/CustomExtensions/useCustomExtensions.js

@@ -27,6 +27,7 @@ export default function useCustomExtensions({
   variables,
   isSlashCommandsActive,
   showImageInMention,
+  setImageUploadVisible,
 }) {
   let customExtensions;
 
@@ -62,7 +63,7 @@ export default function useCustomExtensions({
   }
 
   if (isSlashCommandsActive) {
-    customExtensions.push(SlashCommands);
+    customExtensions.push(SlashCommands.configure({ setImageUploadVisible }));
   }
 
   if (!isEmpty(mentions)) {

package/src/Editor/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import classNames from "classnames";
 import { useEditor, EditorContent } from "@tiptap/react";
 
@@ -34,6 +34,8 @@ const Tiptap = (
   },
   ref
 ) => {
+  const [isImageUploadVisible, setImageUploadVisible] = useState(false);
+
   const isFixedMenuActive = menuType === "fixed";
   const isBubbleMenuActive = menuType === "bubble";
   const isSlashCommandsActive = !hideSlashCommands;
@@ -47,6 +49,7 @@ const Tiptap = (
     variables,
     isSlashCommandsActive,
     showImageInMention,
+    setImageUploadVisible,
   });
 
   const editor = useEditor({
@@ -76,16 +79,25 @@ const Tiptap = (
   }));
 
   return (
-    <>
+    <div>
       {isFixedMenuActive ? (
-        <FixedMenu editor={editor} variables={variables} />
+        <FixedMenu
+          editor={editor}
+          variables={variables}
+          setImageUploadVisible={setImageUploadVisible}
+        />
       ) : null}
       {isBubbleMenuActive ? (
         <BubbleMenu editor={editor} formatterOptions={formatterOptions} />
       ) : null}
-      <ImageUploader editor={editor} imageUploadUrl={uploadEndpoint} />
+      <ImageUploader
+        isVisible={isImageUploadVisible}
+        setIsVisible={setImageUploadVisible}
+        editor={editor}
+        imageUploadUrl={uploadEndpoint}
+      />
       <EditorContent editor={editor} {...otherProps} />
-    </>
+    </div>
   );
 };
 

package/src/constants/regexp.js

@@ -0,0 +1 @@
+export const UrlRegExp = /(http)?s?:?(\/\/[^"']*)/;

package/src/examples/constants.js

@@ -89,7 +89,7 @@ export const STRINGS = {
   <Editor placeholder="Input text here" />`,
 
   forceTitleSampleCode: `
-  const placeholder = { header: 'Input title here' };
+  const placeholder = { heading: 'Input title here' };
  
   <Editor placeholder={placeholder} forceTitle />`,
 };