@bigbinary/neeto-editor 0.2.1 → 0.2.2

package/src/Editor/CustomExtensions/useCustomExtensions.js

@@ -1,88 +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,
-  setImageUploadVisible,
-}) {
-  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.configure({ setImageUploadVisible }));
-  }
-
-  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,104 +0,0 @@
-import React, { useState } 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 [isImageUploadVisible, setImageUploadVisible] = useState(false);
-
-  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,
-    setImageUploadVisible,
-  });
-
-  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 (
-    <div>
-      {isFixedMenuActive ? (
-        <FixedMenu
-          editor={editor}
-          variables={variables}
-          setImageUploadVisible={setImageUploadVisible}
-        />
-      ) : null}
-      {isBubbleMenuActive ? (
-        <BubbleMenu editor={editor} formatterOptions={formatterOptions} />
-      ) : null}
-      <ImageUploader
-        isVisible={isImageUploadVisible}
-        setIsVisible={setImageUploadVisible}
-        editor={editor}
-        imageUploadUrl={uploadEndpoint}
-      />
-      <EditorContent editor={editor} {...otherProps} />
-    </div>
-  );
-};
-
-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/constants/regexp.js

@@ -1 +0,0 @@
-export const UrlRegExp = /(http)?s?:?(\/\/[^"']*)/;

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 = { heading: '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} />
-      <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.
-      </Description>
-      <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>
-
-      <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/hooks/useTabBar.js

@@ -1,9 +0,0 @@
-import { useState } from "react";
-
-const useTabBar = (options) => {
-  const [activeTab, setActiveTab] = useState(options[0]?.key);
-
-  return [activeTab, (option) => setActiveTab(option.key)];
-};
-
-export default useTabBar;

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,46 +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";
-@import "./styles/components/image-uploader";
-@import "./styles/components/tab";
-@import "./styles/components/button";
-@import "./styles/components/tooltip";
-@import "./styles/components/input";
-
-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;
-  }
-}