@bigbinary/neeto-editor 0.1.17 → 0.2.0

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

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

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

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

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

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

@@ -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>
       )}