@bigbinary/neeto-editor 0.1.17 → 0.2.0

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

@@ -1,164 +1,205 @@
 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();
-          },
+export const CommandsPluginKey = new PluginKey("commands");
+
+export default Extension.create({
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: "commands",
+      },
+      suggestion: {
+        char: "/",
+        startOfLine: false,
+        pluginKey: CommandsPluginKey,
+        command: ({ editor, range, props }) => {
+          props.command({ editor, range });
         },
-        {
-          title: "Code block",
-          description: "Add a code block with syntax highlighting",
-          Icon: BsCodeSlash,
-          command: ({ editor, range }) => {
-            editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
-          },
+
+        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 }) => {
+                sharedState.showImageUpload = true;
+                sharedState.range = range;
+                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();
+              },
+            },
+          ];
         },
-      ]
-        .filter((item) =>
-          item.title.toLowerCase().startsWith(query.toLowerCase())
-        )
-        .slice(0, 10);
-    },
-    render: () => {
-      let reactRenderer;
-      let popup;
 
-      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[0].setProps({
-            getReferenceClientRect: props.clientRect,
-          });
-        },
-        onKeyDown(props) {
-          return reactRenderer.ref?.onKeyDown(props);
-        },
-        onExit() {
-          popup[0].destroy();
-          reactRenderer.destroy();
+              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) {
+              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 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;