@bigbinary/neeto-editor 0.1.15 → 0.2.1

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

@@ -1,164 +1,209 @@
-import sharedState from "../../sharedState";
-import Commands from "./Commands";
+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 {
-  BsCardText,
-  BsTypeH1,
-  BsTypeH2,
-  BsListOl,
-  BsListUl,
-  BsCodeSlash,
-  BsCardImage,
-  BsFillCameraVideoFill,
-  BsBlockquoteLeft,
-} from "react-icons/bs";
+  Paragraph,
+  TextH1,
+  TextH2,
+  ListDot,
+  ListNumber,
+  Blockquote,
+  Image,
+  Video,
+  Code,
+} from "@bigbinary/neeto-icons";
 
-export default Commands.configure({
-  HTMLAttributes: {
-    class: "commands",
-  },
-  suggestion: {
-    items: (query) => {
-      return [
-        {
-          title: "Paragraph",
-          description: "Add a plain text block",
-          Icon: BsCardText,
-          command: ({ editor, range }) => {
-            editor
-              .chain()
-              .focus()
-              .deleteRange(range)
-              .setNode("paragraph")
-              .run();
-          },
-        },
-        {
-          title: "H1",
-          description: "Add a big heading",
-          Icon: BsTypeH1,
-          command: ({ editor, range }) => {
-            editor
-              .chain()
-              .focus()
-              .deleteRange(range)
-              .setNode("heading", { level: 1 })
-              .run();
-          },
-        },
-        {
-          title: "H2",
-          description: "Add a sub-heading",
-          Icon: BsTypeH2,
-          command: ({ editor, range }) => {
-            editor
-              .chain()
-              .focus()
-              .deleteRange(range)
-              .setNode("heading", { level: 2 })
-              .run();
-          },
-        },
-        {
-          title: "Numbered list",
-          description: "Add a list with numbering",
-          Icon: BsListOl,
-          command: ({ editor, range }) => {
-            editor.chain().focus().deleteRange(range).toggleOrderedList().run();
-          },
-        },
-        {
-          title: "Bulleted list",
-          description: "Add an list bullets",
-          Icon: BsListUl,
-          command: ({ editor, range }) => {
-            editor.chain().focus().deleteRange(range).toggleBulletList().run();
-          },
-        },
-        {
-          title: "Blockquote",
-          description: "Add a quote",
-          Icon: BsBlockquoteLeft,
-          command: ({ editor, range }) => {
-            editor.chain().focus().deleteRange(range).toggleBlockquote().run();
-          },
-        },
-        {
-          title: "Image",
-          description: "Add an image",
-          Icon: BsCardImage,
-          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: BsFillCameraVideoFill,
-          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: BsCodeSlash,
-          command: ({ editor, range }) => {
-            editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+export const CommandsPluginKey = new PluginKey("commands");
+
+export default {
+  configure: ({ setImageUploadVisible }) =>
+    Extension.create({
+      addOptions() {
+        return {
+          HTMLAttributes: {
+            class: "commands",
           },
-        },
-      ]
-        .filter((item) =>
-          item.title.toLowerCase().startsWith(query.toLowerCase())
-        )
-        .slice(0, 10);
-    },
-    render: () => {
-      let reactRenderer;
-      let popup;
+          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();
+                  },
+                },
+              ];
+            },
 
-      return {
-        onStart: (props) => {
-          reactRenderer = new ReactRenderer(CommandsList, {
-            props,
-            editor: props.editor,
-          });
+            render: () => {
+              let reactRenderer;
+              let popup;
 
-          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);
+              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();
+                },
+              };
+            },
+          },
+        };
+      },
 
-          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

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

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

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

@@ -0,0 +1,31 @@
+/*  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

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