@bigbinary/neeto-editor 0.2.0 → 0.2.4

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

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

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

@@ -1,18 +0,0 @@
-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,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,205 +0,0 @@
-import sharedState from "../../sharedState";
-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 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 }) => {
-                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();
-              },
-            },
-          ];
-        },
-
-        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",
-              });
-            },
-            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>
-  );
-};