@bigbinary/neeto-editor 0.2.0 → 0.2.4

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 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;

package/src/Editor/CustomExtensions/useCustomExtensions.js

@@ -1,87 +0,0 @@
-import StarterKit from "@tiptap/starter-kit";
-import Document from "@tiptap/extension-document";
-import Typography from "@tiptap/extension-typography";
-import Highlight from "@tiptap/extension-highlight";
-import Dropcursor from "@tiptap/extension-dropcursor";
-import Link from "@tiptap/extension-link";
-import Color from "@tiptap/extension-color";
-import TextStyle from "@tiptap/extension-text-style";
-import isEmpty from "lodash.isempty";
-
-import ImageExtension from "./Image/ExtensionConfig";
-import Underline from "@tiptap/extension-underline";
-import SlashCommands from "./SlashCommands/ExtensionConfig";
-import CodeBlock from "./CodeBlock/ExtensionConfig";
-import Variable from "./Variable/ExtensionConfig";
-import Placeholder, {
-  placeholderGenerator,
-} from "./Placeholder/ExtensionConfig";
-import Mention, { createMentionSuggestions } from "./Mention/ExtensionConfig";
-import Embeds from "./Embeds";
-
-export default function useCustomExtensions({
-  forceTitle,
-  placeholder,
-  extensions,
-  mentions,
-  variables,
-  isSlashCommandsActive,
-  showImageInMention,
-}) {
-  let customExtensions;
-
-  if (extensions) {
-    customExtensions = [...extensions];
-  } else {
-    customExtensions = [
-      StarterKit.configure({
-        document: !forceTitle,
-      }),
-      Underline,
-      Typography,
-      TextStyle,
-      Highlight,
-      CodeBlock,
-      ImageExtension,
-      Dropcursor,
-      Embeds,
-      Link,
-      Color,
-      Placeholder.configure({
-        placeholder: placeholderGenerator(placeholder),
-      }),
-    ];
-  }
-
-  if (forceTitle) {
-    customExtensions.unshift(
-      Document.extend({
-        content: "heading block*",
-      })
-    );
-  }
-
-  if (isSlashCommandsActive) {
-    customExtensions.push(SlashCommands);
-  }
-
-  if (!isEmpty(mentions)) {
-    customExtensions.push(
-      Mention.configure({
-        suggestion: {
-          items: createMentionSuggestions(mentions, {
-            showImage: showImageInMention,
-          }),
-        },
-      })
-    );
-  }
-
-  if (!isEmpty(variables)) {
-    customExtensions.push(
-      Variable.configure({ suggestion: { items: () => variables } })
-    );
-  }
-
-  return customExtensions;
-}

package/src/Editor/index.js

@@ -1,92 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { useEditor, EditorContent } from "@tiptap/react";
-
-import BubbleMenu from "./CustomExtensions/BubbleMenu";
-import FixedMenu from "./CustomExtensions/FixedMenu";
-import ImageUploader from "./CustomExtensions/Image/Uploader";
-import useCustomExtensions from "./CustomExtensions/useCustomExtensions";
-
-const Tiptap = (
-  {
-    forceTitle = false,
-    hideSlashCommands = false,
-    hideBubbleMenu = false,
-    formatterOptions = [
-      "bold",
-      "italic",
-      "code",
-      "highlight",
-      "strike",
-      "link",
-    ],
-    className,
-    uploadEndpoint,
-    initialValue = "",
-    onChange = () => {},
-    menuType = "fixed",
-    variables,
-    mentions,
-    showImageInMention = false,
-    placeholder,
-    extensions,
-    ...otherProps
-  },
-  ref
-) => {
-  const isFixedMenuActive = menuType === "fixed";
-  const isBubbleMenuActive = menuType === "bubble";
-  const isSlashCommandsActive = !hideSlashCommands;
-  const showSlashCommandPlaceholder = !placeholder && isSlashCommandsActive;
-
-  const customExtensions = useCustomExtensions({
-    forceTitle,
-    placeholder,
-    extensions,
-    mentions,
-    variables,
-    isSlashCommandsActive,
-    showImageInMention,
-  });
-
-  const editor = useEditor({
-    extensions: customExtensions,
-    content: initialValue,
-    injectCSS: false,
-    editorProps: {
-      attributes: {
-        class:
-          className ||
-          classNames(
-            "prose focus:outline-none whitespace-pre-wrap border p-3",
-            {
-              "slash-active": showSlashCommandPlaceholder,
-              "fixed-menu-active": isFixedMenuActive,
-              "bubble-menu-active": isBubbleMenuActive,
-            }
-          ),
-      },
-    },
-    onUpdate: ({ editor }) => onChange(editor.getHTML()),
-  });
-
-  /* Make editor object available to the parent */
-  React.useImperativeHandle(ref, () => ({
-    editor: editor,
-  }));
-
-  return (
-    <>
-      {isFixedMenuActive ? (
-        <FixedMenu editor={editor} variables={variables} />
-      ) : null}
-      {isBubbleMenuActive ? (
-        <BubbleMenu editor={editor} formatterOptions={formatterOptions} />
-      ) : null}
-      <ImageUploader editor={editor} imageUploadUrl={uploadEndpoint} />
-      <EditorContent editor={editor} {...otherProps} />
-    </>
-  );
-};
-
-export default React.forwardRef(Tiptap);

package/src/Editor/sharedState.js

@@ -1,8 +0,0 @@
-import { store } from "@risingstack/react-easy-state";
-
-const sharedState = store({
-  showImageUpload: false,
-  showURLInput: false,
-});
-
-export default sharedState;

package/src/examples/constants.js

@@ -1,95 +0,0 @@
-export const EDITOR_FEATURES = [
-  "Multiple Menu options such as Fixed, Bubble",
-  "Support for inline styles: Bold, Italic, Underline, StrikeThrough",
-  "Support for diffent font sizes, Blockquote and Code",
-  "Support for font color option",
-  "Support for adding Links and Images",
-  "Ordered and Unordered List Support",
-  "Undo and Redo available",
-  "Inbuilt variable support",
-];
-
-export const SAMPLE_VARIABLES = [
-  {
-    category_key: "ticket",
-    category_label: "Ticket",
-    variables: [
-      { label: "ID", key: "id" },
-      { label: "Number", key: "number" },
-    ],
-  },
-  { label: "Subdomain", key: "subdomain" },
-  {
-    category_key: "organisation",
-    category_label: "Organisation",
-    variables: [
-      { label: "ID", key: "id" },
-      { label: "Name", key: "name" },
-      { label: "Slug", key: "slug" },
-    ],
-  },
-];
-
-export const SAMPLE_MENTIONS = [
-  {
-    label: "Oliver Smith",
-    key: "oliver-smith",
-    imageUrl: "https://via.placeholder.com/150/0000FF/808080",
-  },
-  "Jaden Smith",
-];
-
-export const STRINGS = {
-  fixedMenuSampleCode: `
-  <Editor />`,
-
-  bubbleMenuSampleCode: `
-  <Editor menuType='bubble'/>`,
-
-  hideSlashCommandSampleCode: `
-  <Editor hideSlashCommands />`,
-
-  variableSampleCode: `
-  const variables = [
-    {
-      category_key: "ticket",
-      category_label: "Ticket",
-      variables: [
-        { label: "ID", key: "id" },
-        { label: "Number", key: "number" },
-      ],
-    },
-    { label: "Subdomain", key: "subdomain" },
-    {
-      category_key: "organisation",
-      category_label: "Organisation",
-      variables: [
-        { label: "ID", key: "id" },
-        { label: "Name", key: "name" },
-        { label: "Slug", key: "slug" },
-      ],
-    },
-  ]
-
-  <Editor variables={variables} />`,
-
-  mentionsSampleCode: `
-  const mentions = [
-    { 
-      label: "Oliver Smith",
-      key: "oliver-smith",
-      imageUrl: "https://via.placeholder.com/150/0000FF/808080"
-    },
-    "Jaden Smith",
-  ]
-
-  <Editor mentions={mentions} showImageInMention />`,
-
-  placeholderSampleCode: `
-  <Editor placeholder="Input text here" />`,
-
-  forceTitleSampleCode: `
-  const placeholder = { header: 'Input title here' };
- 
-  <Editor placeholder={placeholder} forceTitle />`,
-};

package/src/examples/index.js

@@ -1,186 +0,0 @@
-import React, { useRef } from "react";
-
-import CodeBlock from "../Common/CodeBlock";
-import Description from "../Common/Description";
-import Heading from "../Common/Heading";
-import HighlightText from "../Common/HighlightText";
-import ListItems from "../Common/ListItems";
-import Editor from "../Editor";
-import {
-  EDITOR_FEATURES,
-  SAMPLE_MENTIONS,
-  SAMPLE_VARIABLES,
-  STRINGS,
-} from "./constants";
-
-const Example = () => {
-  const ref = useRef();
-
-  const getHTML = () => {
-    return ref.current.editor.getHTML();
-  };
-
-  return (
-    <div style={{ margin: "48px 60px" }}>
-      <Heading>Neeto Editor</Heading>
-      <div className="flex justify-end">
-        <button
-          className="px-3 py-1 text-sm font-medium border border-gray-200 rounded shadow-sm"
-          onClick={() => {
-            // eslint-disable-next-line no-console
-            console.log({
-              html: getHTML(),
-            });
-          }}
-        >
-          Print output to console
-        </button>
-      </div>
-      <hr className="my-2 border-gray-100" />
-      <Editor ref={ref} variables={SAMPLE_VARIABLES} />
-      <Heading type="sub">Features</Heading>
-      <ListItems items={EDITOR_FEATURES} ordered />
-
-      <Heading>Installation</Heading>
-      <CodeBlock>yarn add https://github.com/bigbinary/neeto-editor</CodeBlock>
-
-      <Heading>Usage</Heading>
-      <CodeBlock>import Editor from 'bigbinary/neeto-editor'</CodeBlock>
-      <Heading type="sub">Fixed Menu</Heading>
-      <Description>
-        The default Neeto Editor layout comes with a set of always-on-top fixed
-        menu controls to interact with the editor
-      </Description>
-      <div className="flex">
-        <CodeBlock>{STRINGS.fixedMenuSampleCode}</CodeBlock>
-        <SampleEditor />
-      </div>
-
-      <Heading type="sub">Bubble Menu</Heading>
-      <Description>
-        If you would like to use an on-demand menu to interact with the editor
-        rather than an always-on-top fixed menu, Neeto Editor support Bubble
-        Menu option that appears when user selects part of text.
-      </Description>
-      <div className="flex">
-        <CodeBlock>{STRINGS.bubbleMenuSampleCode}</CodeBlock>
-        <SampleEditor menuType="bubble" />
-      </div>
-
-      <Heading type="sub">Slash Commands</Heading>
-      <Description>
-        Slash commands are actions that can be applied to block of text. This
-        menu is enabled by default and appears when user types{" "}
-        <HighlightText>/</HighlightText> at start of new line. Slash commands
-        can be disabled using <HighlightText>hideSlashCommands</HighlightText>{" "}
-        prop.
-      </Description>
-      <div className="flex">
-        <CodeBlock>{STRINGS.hideSlashCommandSampleCode}</CodeBlock>
-        <SampleEditor hideSlashCommands />
-      </div>
-
-      <Heading type="sub">Variable Support</Heading>
-      <Description>
-        Neeto Editor supports variable placement. Pass array of variables as{" "}
-        <HighlightText>variables</HighlightText> prop. Users can choose from
-        available variables from the <HighlightText>{"{}"}</HighlightText> menu.
-        Alternatively, the available variable options can be displayed by typing{" "}
-        <HighlightText>{"{{"}</HighlightText> within the editor.
-      </Description>
-      <div className="flex">
-        <CodeBlock>{STRINGS.variableSampleCode}</CodeBlock>
-        <SampleEditor variables={SAMPLE_VARIABLES} />
-      </div>
-      <Description>
-        Variables that belong to a spefic category can be categorised by passing
-        a <HighlightText>category_key</HighlightText> and{" "}
-        <HighlightText>category_label</HighlightText> attributes. All other
-        variables are shown under 'Others'
-      </Description>
-
-      <Heading type="sub">Support for Mentions</Heading>
-      <Description>
-        Neeto Editor comes with inbuilt support for mentions marking. Editor
-        accepts a list of mention-able values as{" "}
-        <HighlightText>mentions</HighlightText> prop. The list could either be
-        items of shape{" "}
-        <HighlightText>
-          {
-            "{label: 'Mention 1', key: 'mention1', imageUrl: 'optional_image_url.jpg'}"
-          }
-        </HighlightText>{" "}
-        or items can be just plain text like{" "}
-        <HighlightText>'Mention1'</HighlightText>. The available mention
-        suggestions are shown in editor when user types a{" "}
-        <HighlightText>@</HighlightText> character within editor content. The
-        avatar image in the mention suggestion list is enabled by providing
-        truthy value to the <HighlightText>showImageInMention</HighlightText>{" "}
-        prop.
-      </Description>
-      <div className="flex">
-        <CodeBlock>{STRINGS.mentionsSampleCode}</CodeBlock>
-        <SampleEditor mentions={SAMPLE_MENTIONS} showImageInMention />
-      </div>
-
-      <Heading type="sub">Support for placeholder</Heading>
-      <Description>
-        The editor can have placeholder texts for different nodes. These value
-        is accepted as <HighlightText>placeholder</HighlightText> prop.
-        <ul className="list-disc list-inside">
-          <li>
-            Value as object: Each type of node can have corresponding
-            placeholder, in which case the value should be of type{" "}
-            <HighlightText>{"{node_name: placeholder_text}"}</HighlightText>.
-          </li>
-          <li>
-            Value as string: When plain string is provided as value for
-            placeholder, all the nodes will be using the same placeholder text
-            irrespective of their type in which case the value should be of type{" "}
-          </li>
-          <li>
-            Value as function: the <HighlightText>placeholder</HighlightText>{" "}
-            prop can also accepts a function. For each node in the document, the
-            function receives node as argument and return the corresponding
-            placeholder string. eg:{" "}
-            <HighlightText>{"({node}) => placeholder_text"}</HighlightText>
-          </li>
-        </ul>
-      </Description>
-
-      <div className="flex">
-        <CodeBlock>{STRINGS.placeholderSampleCode}</CodeBlock>
-        <SampleEditor placeholder="Input text here" />
-      </div>
-
-      <Heading type="sub">Force a title</Heading>
-      <Description>
-        Neeto editor can be configured to force user to include a document title
-        . This can be achieved by providing a truthy value to the{" "}
-        <HighlightText>forceTitle</HighlightText> prop. Along with that, inorder
-        to show the placeholder text on the title, the{" "}
-        <HighlightText>placeholder</HighlightText> prop should also be provided.
-      </Description>
-      <div className="flex">
-        <CodeBlock>{STRINGS.forceTitleSampleCode}</CodeBlock>
-        <SampleEditor
-          initialValue="Title Text"
-          placeholder={{ heading: "Input title here" }}
-          forceTitle
-        />
-      </div>
-    </div>
-  );
-};
-
-export default Example;
-
-const SampleEditor = (props) => {
-  const ref = useRef();
-
-  return (
-    <div className="flex-1 mx-3 my-2 h-60">
-      <Editor ref={ref} initialValue="Edit Text Content" {...props} />
-    </div>
-  );
-};

package/src/hooks/useOutsideClick.js

@@ -1,19 +0,0 @@
-import { useEffect } from "react";
-
-const useOutsideClick = ({ ref, onClick }) => {
-  useEffect(() => {
-    const listener = ({ target }) => {
-      if (!ref.current || !onClick) return;
-      // Check if event target is inside reference node
-      if (ref.current.contains(target)) return;
-      onClick();
-    };
-
-    document.addEventListener("click", listener);
-    return () => {
-      document.removeEventListener("click", listener);
-    };
-  }, []);
-};
-
-export default useOutsideClick;

package/src/index.js

@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);

package/src/index.scss

@@ -1,41 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@import "./styles/abstracts/mixins";
-@import "./styles/abstracts/variables";
-@import "./styles/abstracts/neeto-ui-variables";
-
-@import "./styles/components/dropdown";
-@import "./styles/components/codeblock";
-@import "./styles/components/editor-variables";
-@import "./styles/components/command-list";
-@import "./styles/components/editor";
-@import "./styles/components/avatar";
-@import "./styles/components/fixed-menu";
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
-
-.ProseMirror {
-  @include scrollbars(4px);
-
-  overflow-y: auto;
-  min-height: 150px;
-  max-height: 500px;
-}
-
-.ProseMirror:focus {
-  outline: none;
-}

package/src/styles/abstracts/_mixins.scss

@@ -1,20 +0,0 @@
-@mixin scrollbars(
-  $size,
-  $foreground-color: $neeto-ui-gray-300,
-  $background-color: "transparent"
-) {
-  // For Google Chrome
-  &::-webkit-scrollbar {
-    width: $size;
-    height: $size;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: $foreground-color;
-    border-radius: 50px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: $background-color;
-  }
-}

package/src/styles/abstracts/_neeto-ui-variables.scss

@@ -1,36 +0,0 @@
-$neeto-ui-white: #ffffff;
-$neeto-ui-black: #1b1f23;
-
-$neeto-ui-gray-800: #2f3941;
-$neeto-ui-gray-700: #49545c;
-$neeto-ui-gray-600: #68737d;
-$neeto-ui-gray-500: #87929d;
-$neeto-ui-gray-300: #d8dcde;
-$neeto-ui-gray-200: #e9ebed;
-$neeto-ui-gray-100: #f8f9f9;
-// states
-$neeto-ui-success: #00ba88;
-$neeto-ui-warning: #f3cd82;
-
-// Font Sizes
-$neeto-ui-text-xxs: 10px;
-$neeto-ui-text-xs: 12px;
-$neeto-ui-text-sm: 14px;
-$neeto-ui-text-lg: 18px;
-$neeto-ui-text-2xl: 24px;
-
-// Shadow
-$box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
-$neeto-ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-  0 2px 4px -1px rgba(0, 0, 0, 0.06);
-
-// Border Radius
-$neeto-ui-rounded-sm: 2px;
-$neeto-ui-rounded-full: 999px;
-
-// Font Weights
-$neeto-ui-font-normal: 400;
-$neeto-ui-font-semibold: 600;
-
-// Transition
-$neeto-ui-transition: all 0.3s ease-in-out;