@bigbinary/neeto-editor 0.1.16 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-editor",
-  "version": "0.1.16",
+  "version": "0.2.2",
   "main": "./index.js",
   "description": "Neeto Editor is the library that drives the rich text experience in all Neeto products built at BigBinary",
   "keywords": [
@@ -12,26 +12,40 @@
   "author": "BigBinary",
   "license": "MIT",
   "dependencies": {
+    "@bigbinary/neeto-icons": "^1.8.6",
     "@risingstack/react-easy-state": "^6.3.0",
     "@tailwindcss/typography": "^0.4.0",
+    "@tippyjs/react": "^4.2.6",
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.18",
     "@tiptap/extension-code-block-lowlight": "^2.0.0-beta.24",
+    "@tiptap/extension-color": "^2.0.0-beta.3",
+    "@tiptap/extension-document": "^2.0.0-beta.15",
     "@tiptap/extension-dropcursor": "^2.0.0-beta.13",
     "@tiptap/extension-highlight": "^2.0.0-beta.13",
     "@tiptap/extension-image": "^2.0.0-beta.13",
     "@tiptap/extension-link": "^2.0.0-beta.18",
+    "@tiptap/extension-mention": "^2.0.0-beta.80",
     "@tiptap/extension-placeholder": "^2.0.0-beta.18",
+    "@tiptap/extension-text-style": "^2.0.0-beta.17",
     "@tiptap/extension-typography": "^2.0.0-beta.11",
+    "@tiptap/extension-underline": "^2.0.0-beta.21",
     "@tiptap/react": "^2.0.0-beta.37",
     "@tiptap/starter-kit": "^2.0.0-beta.57",
     "@tiptap/suggestion": "^2.0.0-beta.55",
-    "@uppy/core": "^1.18.1",
-    "@uppy/react": "^1.11.8",
-    "@uppy/xhr-upload": "^1.7.2",
+    "@uppy/core": "^2.1.2",
+    "@uppy/react": "^2.1.1",
+    "@uppy/url": "^2.0.4",
+    "@uppy/xhr-upload": "^2.0.5",
     "classnames": "^2.3.1",
+    "lodash.isempty": "^4.4.0",
+    "lodash.isplainobject": "^4.0.6",
     "lowlight": "^1.20.0",
     "peer-deps-externals-webpack-plugin": "1.0.4",
+    "react-hotkeys-hook": "^3.4.4",
     "react-icons": "^4.2.0",
+    "react-outside-click-handler": "^1.3.0",
+    "react-popper": "^2.2.5",
+    "react-router-dom": "^6.0.2",
     "tippy.js": "^6.3.1"
   },
   "devDependencies": {

package/webpack.config.js

@@ -1,7 +1,8 @@
 const PeerDepsExternalsPlugin = require("peer-deps-externals-webpack-plugin");
+const path = require("path");
 
 module.exports = {
-  entry: "./src/Editor/index.js",
+  entry: "./lib/index.js",
   module: {
     rules: [
       {
@@ -40,4 +41,11 @@ module.exports = {
     libraryTarget: "umd",
   },
   plugins: [new PeerDepsExternalsPlugin()],
+  resolve: {
+    alias: {
+      common: path.resolve(__dirname, "/lib/components/Common"),
+      hooks: path.resolve(__dirname, "/lib/hooks"),
+      constants: path.resolve(__dirname, "/lib/constants"),
+    },
+  },
 };

package/webpack.dev.config.js

@@ -1,7 +1,8 @@
 const HtmlWebPackPlugin = require("html-webpack-plugin");
+const path = require("path");
 
 module.exports = {
-  entry: "./src/index.js",
+  entry: "./example/index.js",
   devtool:
     process.env.NODE_ENV === "production"
       ? "source-map"
@@ -58,4 +59,11 @@ module.exports = {
       filename: "./index.html",
     }),
   ],
+  resolve: {
+    alias: {
+      common: path.resolve(__dirname, "/lib/components/Common"),
+      hooks: path.resolve(__dirname, "/lib/hooks"),
+      constants: path.resolve(__dirname, "/lib/constants"),
+    },
+  },
 };

package/src/App.js

@@ -1,31 +0,0 @@
-import React, { Component } from "react";
-import Editor from "./Editor/index";
-import "./index.scss";
-
-export default class App extends Component {
-  ref = React.createRef();
-
-  getHTML = () => {
-    return this.ref.current.editor.getHTML();
-  };
-
-  render() {
-    return (
-      <div style={{ width: 720, margin: "48px auto" }}>
-        <div className="flex justify-end">
-          <button
-            className="px-3 py-1 text-sm font-medium border border-gray-200 rounded shadow-sm"
-            onClick={() => {
-              // eslint-disable-next-line no-console
-              console.log(this.getHTML());
-            }}
-          >
-            Print output to console
-          </button>
-        </div>
-        <hr className="my-2 border-gray-100" />
-        <Editor ref={this.ref} />
-      </div>
-    );
-  }
-}

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

@@ -1,85 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import { BubbleMenu } from "@tiptap/react";
-import {
-  FaBold,
-  FaItalic,
-  FaStrikethrough,
-  FaHighlighter,
-  FaCode,
-  FaLink,
-} from "react-icons/fa";
-
-export default function index({ editor, formatterOptions }) {
-  if (!editor) {
-    return null;
-  }
-  const options = [
-    {
-      Icon: FaBold,
-      command: () => editor.chain().focus().toggleBold().run(),
-      active: editor.isActive("bold"),
-      optionName: "bold",
-    },
-    {
-      Icon: FaItalic,
-      command: () => editor.chain().focus().toggleItalic().run(),
-      active: editor.isActive("italic"),
-      optionName: "italic",
-    },
-    {
-      Icon: FaStrikethrough,
-      command: () => editor.chain().focus().toggleStrike().run(),
-      active: editor.isActive("strike"),
-      optionName: "strike",
-    },
-    {
-      Icon: FaLink,
-      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: FaCode,
-      command: () => editor.chain().focus().toggleCode().run(),
-      active: editor.isActive("code"),
-      optionName: "code",
-    },
-    {
-      Icon: FaHighlighter,
-      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>
-  );
-}
-
-const Option = ({ Icon, command, active, iconSize }) => (
-  <div
-    className={classnames("p-3 cursor-pointer hover:bg-gray-800", {
-      "text-gray-400": !active,
-      "text-white": active,
-    })}
-    onClick={command}
-  >
-    <Icon size={iconSize || 15} />
-  </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,70 +0,0 @@
-import { Node, mergeAttributes } from "@tiptap/core";
-
-export default Node.create({
-  name: "external-video",
-
-  defaultOptions: {
-    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/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/Uploader.js

@@ -1,41 +0,0 @@
-import React 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;
-    editor.chain().focus().setImage({ src: url }).run();
-  });
-
-  return (
-    <div>
-      <DashboardModal
-        uppy={uppy}
-        proudlyDisplayPoweredByUppy={false}
-        closeModalOnClickOutside
-        open={sharedState.showImageUpload}
-        onRequestClose={() => (sharedState.showImageUpload = false)}
-      />
-    </div>
-  );
-};
-
-export default view(ImageUpload);

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

@@ -1,25 +0,0 @@
-import { Extension } from "@tiptap/core";
-import Suggestion from "@tiptap/suggestion";
-
-export default Extension.create({
-  name: "mention",
-
-  defaultOptions: {
-    suggestion: {
-      char: "/",
-      startOfLine: false,
-      command: ({ editor, range, props }) => {
-        props.command({ editor, range });
-      },
-    },
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      Suggestion({
-        editor: this.editor,
-        ...this.options.suggestion,
-      }),
-    ];
-  },
-});

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

@@ -1,110 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import "../../styles/CommandsList.scss";
-
-class CommandsList extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selectedIndex: 0,
-    };
-  }
-
-  componentDidUpdate(oldProps) {
-    if (this.props.items !== oldProps.items) {
-      this.setState({
-        selectedIndex: 0,
-      });
-    }
-  }
-
-  onKeyDown({ event }) {
-    if (event.key === "ArrowUp") {
-      this.upHandler();
-      return true;
-    }
-
-    if (event.key === "ArrowDown") {
-      this.downHandler();
-      return true;
-    }
-
-    if (event.key === "Enter") {
-      this.enterHandler();
-      return true;
-    }
-
-    return false;
-  }
-
-  upHandler() {
-    this.setState({
-      selectedIndex:
-        (this.state.selectedIndex + this.props.items.length - 1) %
-        this.props.items.length,
-    });
-  }
-
-  downHandler() {
-    this.setState({
-      selectedIndex: (this.state.selectedIndex + 1) % this.props.items.length,
-    });
-  }
-
-  enterHandler() {
-    this.selectItem(this.state.selectedIndex);
-  }
-
-  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">
-        {this.props.items.map((item, index) => (
-          <Item
-            key={item.title}
-            item={item}
-            index={index}
-            selectedIndex={this.state.selectedIndex}
-            selectItem={this.selectItem}
-          />
-        ))}
-      </div>
-    );
-  }
-}
-
-const Item = ({ item, selectedIndex, index, selectItem }) => {
-  const Icon = item.Icon;
-  return (
-    <div
-      className={classnames(
-        "flex items-center w-full px-4 py-2 space-x-4  transition-all duration-100",
-        {
-          "bg-gray-800": index === selectedIndex,
-        }
-      )}
-      onClick={() => selectItem(index)}
-    >
-      {Icon && (
-        <div className="p-1 text-gray-100 bg-gray-800 rounded-sm">
-          <Icon size={18} />
-        </div>
-      )}
-      <div className="flex flex-col text-gray-100">
-        <span className="text-sm font-semibold">{item.title}</span>
-        <span className="text-xs text-gray-300">{item.description}</span>
-      </div>
-    </div>
-  );
-};
-
-export default CommandsList;