@bigbinary/neeto-editor 0.2.0 → 0.2.4

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 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 rounded",
-      {
-        "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="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)}>
-          {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";

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

@@ -1,186 +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 sharedState from "../../sharedState";
-import Variables from "../Variable";
-
-const FixedMenu = ({ editor, variables }) => {
-  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: ({ editor, range }) => {
-        sharedState.showImageUpload = true;
-        sharedState.range = range;
-        editor.chain().focus().deleteRange(range).run();
-      },
-      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 items-center 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) => (
-          <div className="flex">{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/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/Mention/ExtensionConfig.js

@@ -1,67 +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) => {
-        console.log({ 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>
-    );
-  }
-}