@bigbinary/neeto-editor 0.2.1 → 0.2.2

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

@@ -1,20 +0,0 @@
-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: "commands",
-
-  defaultOptions: {},
-
-  addProseMirrorPlugins() {
-    return [
-      Suggestion({
-        editor: this.editor,
-        ...this.options.suggestion,
-      }),
-    ];
-  },
-});

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

@@ -1,109 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-
-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 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(index)}
-          />
-        ))}
-      </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 ease-in-out editor-command-list--item cursor-pointer rounded",
-        {
-          selected_item: index === selectedIndex,
-        }
-      )}
-      onClick={() => selectItem(index)}
-    >
-      {Icon && (
-        <div className="p-1 text-gray-100 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;

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

@@ -1,209 +0,0 @@
-import { Extension } from "@tiptap/core";
-import CommandsList from "./CommandsList";
-import { PluginKey } from "prosemirror-state";
-import Suggestion from "@tiptap/suggestion";
-import tippy from "tippy.js";
-import { ReactRenderer } from "@tiptap/react";
-import {
-  Paragraph,
-  TextH1,
-  TextH2,
-  ListDot,
-  ListNumber,
-  Blockquote,
-  Image,
-  Video,
-  Code,
-} from "@bigbinary/neeto-icons";
-
-export const CommandsPluginKey = new PluginKey("commands");
-
-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 });
-            },
-
-            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;
-
-              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",
-                    arrow: false,
-                  });
-                },
-                onUpdate(props) {
-                  reactRenderer.updateProps(props);
-
-                  popup[0].setProps({
-                    getReferenceClientRect: props.clientRect,
-                  });
-                },
-                onKeyDown(props) {
-                  return reactRenderer.ref?.onKeyDown(props);
-                },
-                onExit() {
-                  popup[0].destroy();
-                  reactRenderer.destroy();
-                },
-              };
-            },
-          },
-        };
-      },
-
-      addProseMirrorPlugins() {
-        return [
-          Suggestion({
-            editor: this.editor,
-            ...this.options.suggestion,
-          }),
-        ];
-      },
-    }),
-};

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

@@ -1,208 +0,0 @@
-import tippy from "tippy.js";
-import Suggestion from "@tiptap/suggestion";
-import { Node, mergeAttributes } from "@tiptap/core";
-import { ReactRenderer } from "@tiptap/react";
-import { PluginKey } from "prosemirror-state";
-
-import VariableSuggestion from "./VariableSuggestion";
-
-export const VariablePluginKey = new PluginKey("variables");
-
-const Variable = Node.create({
-  name: "variable",
-
-  addOptions() {
-    return {
-      HTMLAttributes: { class: "variable__text" },
-      charOpen: "{{",
-      charClose: "}}",
-      renderLabel({ options, node }) {
-        return `${options.charOpen}${node.attrs.label || node.attrs.id}${
-          options.charClose
-        }`;
-      },
-      suggestion: {},
-    };
-  },
-
-  group: "inline",
-
-  inline: true,
-
-  selectable: false,
-
-  atom: true,
-
-  addAttributes() {
-    return {
-      id: {
-        default: null,
-        parseHTML: (element) => element.getAttribute("data-id"),
-        renderHTML: (attributes) => {
-          if (!attributes.id) {
-            return {};
-          }
-
-          return {
-            "data-id": attributes.id,
-          };
-        },
-      },
-
-      label: {
-        default: null,
-        parseHTML: (element) => element.getAttribute("data-label"),
-        renderHTML: (attributes) => {
-          if (!attributes.label) {
-            return {};
-          }
-
-          return {
-            "data-label": attributes.label,
-          };
-        },
-      },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: "span[data-variable]",
-      },
-    ];
-  },
-
-  renderHTML({ node, HTMLAttributes }) {
-    return [
-      "span",
-      mergeAttributes(
-        { "data-variable": "" },
-        this.options.HTMLAttributes,
-        HTMLAttributes
-      ),
-      this.options.renderLabel({
-        options: this.options,
-        node,
-      }),
-    ];
-  },
-
-  renderText({ node }) {
-    return this.options.renderLabel({
-      options: this.options,
-      node,
-    });
-  },
-
-  addCommands() {
-    return {
-      setVariable:
-        (attributes) =>
-        ({ chain }) => {
-          chain()
-            .focus()
-            .insertContent([
-              {
-                type: this.name,
-                attrs: attributes,
-              },
-              {
-                type: "text",
-                text: " ",
-              },
-            ])
-            .run();
-        },
-    };
-  },
-
-  addKeyboardShortcuts() {
-    return {
-      Backspace: () =>
-        this.editor.commands.command(({ tr, state }) => {
-          let isVariable = false;
-          const { selection } = state;
-          const { empty, anchor } = selection;
-
-          if (!empty) {
-            return false;
-          }
-
-          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
-            if (node.type.name === this.name) {
-              isVariable = true;
-              tr.insertText("", pos, pos + node.nodeSize);
-
-              return false;
-            }
-          });
-
-          return isVariable;
-        }),
-    };
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      Suggestion({
-        editor: this.editor,
-        ...this.options.suggestion,
-      }),
-    ];
-  },
-});
-
-const suggestionConfig = {
-  char: "{{",
-  startOfLine: false,
-  pluginKey: VariablePluginKey,
-  command: ({ editor, range, props }) => {
-    editor.chain().focus().deleteRange(range).setVariable(props).run();
-  },
-
-  items: () => [],
-  render: () => {
-    let reactRenderer;
-    let popup;
-
-    return {
-      onStart: (props) => {
-        reactRenderer = new ReactRenderer(VariableSuggestion, {
-          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,
-        });
-      },
-
-      onExit() {
-        popup[0].destroy();
-        reactRenderer.destroy();
-      },
-    };
-  },
-};
-
-export default {
-  configure: ({ suggestion = {} }) => {
-    return Variable.configure({
-      suggestion: { ...suggestionConfig, ...suggestion },
-    });
-  },
-};

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

@@ -1,45 +0,0 @@
-import React from "react";
-
-import { parseVariables } from "./helpers";
-
-const VariableList = ({ onClickVariable, variables }) => {
-  const parsedVariables = parseVariables(variables);
-
-  if (!(variables && variables.length)) {
-    return null;
-  }
-
-  return (
-    <div className="p-3 bg-white">
-      {parsedVariables.map(({ label, variables }) => (
-        <VariableCategory
-          key={label}
-          title={label}
-          variables={variables}
-          onClickItem={onClickVariable}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default VariableList;
-
-const VariableCategory = ({ title, variables, onClickItem }) => {
-  return (
-    <div className="my-3">
-      {title ? <p className="text-xs font-semibold">{title}</p> : null}
-      <div className="mt-1 space-x-2">
-        {variables.map((item) => (
-          <button
-            onClick={() => onClickItem(item)}
-            key={`${item.label}--${item.value}`}
-            className="px-2 py-1 text-xs text-white bg-blue-400 rounded-sm"
-          >
-            {item.label}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};

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

@@ -1,20 +0,0 @@
-import React from "react";
-
-import VariableList from "./VariableList";
-
-const VariableSuggestion = ({ items, command }) => {
-  return (
-    <div className="shadow-md">
-      <VariableList
-        variables={items}
-        onClickVariable={(variable) => {
-          const { category_key, key } = variable;
-          const variableName = category_key ? `${category_key}.${key}` : key;
-          command({ label: variableName, id: variableName });
-        }}
-      />
-    </div>
-  );
-};
-
-export default VariableSuggestion;

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

@@ -1,31 +0,0 @@
-/*  Helper function that accepts an array of variables and injects category to each item in the group
-    And also performs grouping of indvidual variables under common category as 'Others'. */
-
-export const parseVariables = (variableArr = []) => {
-  const uncategorized = [];
-  const groupedVariables = [];
-  variableArr.forEach((variable) => {
-    const { category_key, category_label, variables } = variable;
-    if (category_key && variables) {
-      const parsedVariables = variables.map((categoryVariable) => ({
-        ...categoryVariable,
-        category_key,
-      }));
-      groupedVariables.push({
-        label: category_label,
-        variables: parsedVariables,
-      });
-    } else uncategorized.push(variable);
-  });
-
-  /* If there are other categorised variables already present, group all uncategorized variables under title 'Others'.
-   otherwise, if all available variables are uncategorised, do not render 'Others' title */
-
-  if (uncategorized.length) {
-    groupedVariables.push({
-      label: groupedVariables.length ? "Others" : null,
-      variables: uncategorized,
-    });
-  }
-  return groupedVariables;
-};

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

@@ -1,35 +0,0 @@
-import React from "react";
-
-import VariableList from "./VariableList";
-import Dropdown from "common/Dropdown";
-import { HashtagFilled } from "common/Icons";
-
-import { MENU_ICON_SIZE } from "../FixedMenu/constants";
-
-const Variables = ({ editor, variables }) => {
-  const handleClickItem = (item) => {
-    const { category_key, key } = item;
-    const variableName = category_key ? `${category_key}.${key}` : key;
-    editor.chain().focus().setVariable({ label: variableName }).run();
-  };
-
-  if (!(variables && variables.length)) {
-    return null;
-  }
-
-  return (
-    <Dropdown
-      customTarget={() => (
-        <button className="relative h-full p-3 editor-fixed-menu--item variable-selection-popup">
-          <HashtagFilled size={MENU_ICON_SIZE} />
-        </button>
-      )}
-    >
-      <div className="items-container">
-        <VariableList onClickVariable={handleClickItem} variables={variables} />
-      </div>
-    </Dropdown>
-  );
-};
-
-export default Variables;