@bigbinary/neeto-editor-frontend 0.0.0-stage → 2.0.1

package/package.json

@@ -1,6 +1,324 @@
 {
   "name": "@bigbinary/neeto-editor-frontend",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "2.0.1",
+  "description": "neetoEditor is the library that drives the rich text experience in all neeto products built at BigBinary",
+  "keywords": [
+    "ui",
+    "rich-text-editor",
+    "editor",
+    "react"
+  ],
+  "license": "MIT",
+  "author": "BigBinary",
+  "bugs": {
+    "url": "https://github.com/neetozone/neeto-editor-nano/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/neetozone/neeto-editor-nano.git"
+  },
+  "files": [
+    "dist",
+    "types.d.ts",
+    "formik.d.ts",
+    "app/javascript/src/translations"
+  ],
+  "types": "./types.d.ts",
+  "engines": {
+    "node": ">=22.13",
+    "npm": ">=9",
+    "yarn": "1.22.x"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./types.d.ts"
+    },
+    "./*": {
+      "import": "./dist/*.js",
+      "require": "./dist/cjs/*.js",
+      "types": "./types.d.ts"
+    },
+    "./v2": {
+      "import": "./dist/v2/index.js",
+      "require": "./dist/cjs/v2/index.js",
+      "types": "./types.d.ts"
+    },
+    "./v2/*": {
+      "import": "./dist/v2/*.js",
+      "require": "./dist/cjs/v2/*.js",
+      "types": "./types.d.ts"
+    },
+    "./v2/styles": "./dist/v2/styles.css",
+    "./v2/styles.css": "./dist/v2/styles.css"
+  },
+  "scripts": {
+    "build": "NODE_ENV=production rollup --bundleConfigAsCjs -c rollup.config.js",
+    "build-storybook": "storybook build",
+    "prepare": "husky install",
+    "release": "yarn build && yalc push --sig",
+    "serve": "node .storybook/express",
+    "storybook": "storybook dev -p 6006",
+    "test:safe-split-block": "node --test test/javascript/safeSplitBlock.test.mjs",
+    "upload": "node .scripts/publish --env production"
+  },
+  "lint-staged": {
+    "./**/*.rb": [
+      "bundle exec rubocop -a --force-exclusion --format quiet"
+    ],
+    "{Gemfile,Rakefile}": [
+      "bundle exec rubocop -a --force-exclusion --format quiet"
+    ],
+    "./**/app/views/**/*.html.erb": [
+      "bundle exec erblint --lint-all --format compact -a"
+    ],
+    "{app/javascript,stories,.storybook}/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "eslint --cache --fix --no-warn-ignored"
+    ],
+    "{package.json,.prettierrc.js}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "babel-plugin-transform-imports": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.23.2",
+    "@babel/eslint-parser": "^7.25.9",
+    "@babel/plugin-transform-runtime": "7.23.2",
+    "@babel/preset-env": "7.23.2",
+    "@babel/preset-react": "7.22.15",
+    "@babel/preset-typescript": "7.23.2",
+    "@babel/runtime": "7.23.2",
+    "@bigbinary/babel-preset-neeto": "^1.0.7",
+    "@bigbinary/eslint-plugin-neeto": "1.9.0",
+    "@bigbinary/neeto-atoms": "1.0.144",
+    "@bigbinary/neeto-audit-frontend": "2.6.0",
+    "@bigbinary/neeto-cist": "1.0.9",
+    "@bigbinary/neeto-commons-frontend": "4.13.160",
+    "@bigbinary/neeto-filters-frontend": "3.3.1",
+    "@bigbinary/neeto-hotkeys": "1.0.4",
+    "@bigbinary/neeto-icons": "1.20.71",
+    "@bigbinary/neeto-image-uploader-frontend": "4.0.5",
+    "@bigbinary/neeto-molecules": "5.5.2",
+    "@bigbinary/neeto-team-members-frontend": "5.1.6",
+    "@bigbinary/neeto-time-zones": "^0.8.25",
+    "@bigbinary/neetoui": "7.0.1",
+    "@bigbinary/s3-uploader": "https://github.com/bigbinary/s3-uploader",
+    "@eslint/eslintrc": "^3.3.5",
+    "@faker-js/faker": "8.2.0",
+    "@floating-ui/dom": "^1.6.0",
+    "@fontsource-variable/geist": "^5.2.8",
+    "@hocuspocus/provider": "^2.13.5",
+    "@honeybadger-io/js": "6.5.3",
+    "@honeybadger-io/react": "6.1.9",
+    "@rails/actioncable": "7.2.100",
+    "@rails/activestorage": "7.0.8-3",
+    "@rollup/plugin-alias": "5.0.1",
+    "@rollup/plugin-babel": "6.0.4",
+    "@rollup/plugin-commonjs": "25.0.7",
+    "@rollup/plugin-json": "6.0.1",
+    "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-replace": "5.0.4",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
+    "@svgr/rollup": "8.1.0",
+    "@svgr/webpack": "^6.5.1",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/postcss": "^4.2.2",
+    "@tanstack/react-query": "5.59.20",
+    "@tanstack/react-query-devtools": "5.59.20",
+    "@tippyjs/react": "4.2.6",
+    "@tiptap/extension-bubble-menu": "3.31.3",
+    "@tiptap/extension-code": "3.31.3",
+    "@tiptap/extension-code-block-lowlight": "3.31.3",
+    "@tiptap/extension-collaboration": "3.31.3",
+    "@tiptap/extension-collaboration-caret": "3.31.3",
+    "@tiptap/extension-document": "3.31.3",
+    "@tiptap/extension-highlight": "3.31.3",
+    "@tiptap/extension-image": "3.31.3",
+    "@tiptap/extension-italic": "3.31.3",
+    "@tiptap/extension-link": "3.31.3",
+    "@tiptap/extension-list": "3.31.3",
+    "@tiptap/extension-mention": "3.31.3",
+    "@tiptap/extension-table": "3.31.3",
+    "@tiptap/extension-text-style": "3.31.3",
+    "@tiptap/extension-underline": "3.31.3",
+    "@tiptap/extensions": "3.31.3",
+    "@tiptap/pm": "3.31.3",
+    "@tiptap/react": "3.31.3",
+    "@tiptap/starter-kit": "3.31.3",
+    "@tiptap/suggestion": "3.31.3",
+    "@tiptap/y-tiptap": "3.0.7",
+    "@wojtekmaj/react-timerange-picker": "5.5.0",
+    "antd": "5.10.2",
+    "autoprefixer": "10.4.16",
+    "avvvatars-react": "0.4.2",
+    "axios": "1.15.0",
+    "babel-loader": "9.1.3",
+    "babel-plugin-istanbul": "6.1.1",
+    "babel-plugin-js-logger": "1.0.17",
+    "babel-plugin-macros": "3.1.0",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-plugin-preval": "^5.1.0",
+    "babel-plugin-transform-imports": "^2.0.0",
+    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
+    "babel-preset-react": "6.24.1",
+    "babel-preset-typescript": "7.0.0-alpha.19",
+    "classnames": "2.3.2",
+    "crypto-js": "4.2.0",
+    "css-loader": "6.7.1",
+    "dompurify": "2.5.9",
+    "emoji-mart": "5.2.2",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-cypress": "2.15.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jam3": "^0.2.3",
+    "eslint-plugin-json": "^4.0.1",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-security": "^3.0.1",
+    "eslint-plugin-sonarjs": "^3.0.2",
+    "eslint-plugin-storybook": "^10.3.6",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "eslint-plugin-xss": "0.1.12",
+    "express": "^4.18.2",
+    "formik": "2.4.5",
+    "globals": "^17.6.0",
+    "globby": "^14.1.0",
+    "husky": "8.0.3",
+    "i18next": "23.6.0",
+    "js-logger": "1.6.1",
+    "linkify-react": "^4.1.3",
+    "lint-staged": "15.0.2",
+    "lowlight": "2.7.0",
+    "lucide-react": "^0.577.0",
+    "postcss": "8.4.38",
+    "postcss-css-variables": "^0.19.0",
+    "postcss-import": "15.1.0",
+    "postcss-loader": "7.3.3",
+    "postcss-preset-env": "9.2.0",
+    "prettier": "^3",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "qs": "6.11.2",
+    "ramda": "0.29.1",
+    "re-resizable": "6.9.9",
+    "react": "18.3.1",
+    "react-colorful": "5.6.1",
+    "react-doc-viewer": "0.1.16",
+    "react-dom": "18.3.1",
+    "react-drag-listview": "2.0.0",
+    "react-dropzone": "14.3.8",
+    "react-file-icon": "^1.3.0",
+    "react-helmet": "6.1.0",
+    "react-hotkeys-hook": "3.4.7",
+    "react-i18next": "13.3.1",
+    "react-masonry-infinite": "1.2.2",
+    "react-popper": "2.3.0",
+    "react-resizable": "3.0.4",
+    "react-router-dom": "5.3.4",
+    "react-toastify": "8.2.0",
+    "remark-gfm": "4.0.0",
+    "rollup": "^4.59.0",
+    "rollup-plugin-analyzer": "4.0.0",
+    "rollup-plugin-cleaner": "1.0.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-styles": "4.0.0",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "1.69.5",
+    "sass-loader": "13.0.2",
+    "shadcn": "^4.1.0",
+    "storybook": "^7.5.3",
+    "storybook-addon-live-examples": "2.0.3",
+    "storybook-dark-mode": "^3.0.1",
+    "style-loader": "3.3.1",
+    "tailwindcss": "^4.2.1",
+    "tippy.js": "6.3.7",
+    "ts-api-utils": "^2.5.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript-eslint": "^8.59.2",
+    "ua-parser-js": "^2.0.3",
+    "util": "0.12.5",
+    "webpack": "5.104.1",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.9.3",
+    "y-prosemirror": "^1.2.12",
+    "y-protocols": "^1.0.6",
+    "yjs": "^13.6.18",
+    "yup": "1.3.2",
+    "zustand": "4.3.2"
+  },
+  "peerDependencies": {
+    "@babel/runtime": "7.23.2",
+    "@bigbinary/babel-preset-neeto": "*",
+    "@bigbinary/neeto-atoms": "1.0.144",
+    "@bigbinary/neeto-cist": "*",
+    "@bigbinary/neeto-commons-frontend": ">=4.13.160",
+    "@bigbinary/neeto-filters-frontend": "3.3.1",
+    "@bigbinary/neeto-hotkeys": "1.0.4",
+    "@bigbinary/neeto-icons": "*",
+    "@bigbinary/neeto-image-uploader-frontend": "4.0.5",
+    "@bigbinary/neeto-molecules": "5.5.2",
+    "@bigbinary/neeto-team-members-frontend": "5.1.6",
+    "@bigbinary/neeto-time-zones": "*",
+    "@bigbinary/neetoui": "*",
+    "@honeybadger-io/js": "^6.5.3",
+    "@honeybadger-io/react": "^6.1.9",
+    "@rails/actioncable": "7.2.100",
+    "@rails/activestorage": "7.0.8-3",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tanstack/react-query": "5.59.20",
+    "@tippyjs/react": "4.2.6",
+    "@wojtekmaj/react-timerange-picker": "5.5.0",
+    "antd": "4.24.3",
+    "autoprefixer": "10.4.16",
+    "avvvatars-react": "0.4.2",
+    "axios": "1.15.0",
+    "classnames": "^2.3.2",
+    "dompurify": "^2.4.0",
+    "emoji-mart": "5.2.2",
+    "formik": "^2.4.5",
+    "i18next": "^23.6.0",
+    "js-logger": "^1.6.1",
+    "linkify-react": "^4.1.3",
+    "lucide-react": "^0.577.0",
+    "qs": "6.11.2",
+    "ramda": "^0.29.1",
+    "react": "^18.2.0",
+    "react-colorful": "5.6.1",
+    "react-dom": "^18.2.0",
+    "react-drag-listview": "2.0.0",
+    "react-dropzone": "14.3.8",
+    "react-helmet": "^6.1.0",
+    "react-i18next": "^13.3.1",
+    "react-resizable": "3.0.4",
+    "react-router-dom": "^5.3.4",
+    "react-toastify": "^8.2.0",
+    "tippy.js": "6.3.7",
+    "ua-parser-js": "^2.0.3",
+    "util": "0.12.5",
+    "yjs": "^13.6.18",
+    "yup": "^0.32.11",
+    "zustand": "4.3.2"
+  },
+  "resolutions": {
+    "canvas": "npm:empty-npm-package@1.0.0",
+    "jackspeak": "2.1.1",
+    "wrap-ansi": "7.0.0",
+    "string-width": "4.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  }
+}

package/types.d.ts

@@ -0,0 +1,199 @@
+import { ReactNode } from "react";
+import {
+  Editor as TiptapEditor,
+  Extension,
+  Node,
+} from "@tiptap/core/dist/packages/core/src";
+import { Range } from "@tiptap/core/dist/packages/core/src/types";
+import { Transaction } from "prosemirror-state";
+import { CodeOptions } from "@tiptap/extension-code";
+import { UnderlineOptions } from "@tiptap/extension-underline";
+import { HighlightOptions } from "lowlight/lib/core";
+import { CodeBlockLowlightOptions } from "@tiptap/extension-code-block-lowlight";
+import { StarterKitOptions } from "@tiptap/starter-kit";
+import { PlaceholderOptions } from "@tiptap/extension-placeholder";
+import { CharacterCountOptions } from "@tiptap/extension-character-count";
+import Variables from "components/Editor/CustomExtensions/Variable/index";
+import { EDITOR_OPTIONS as EDITOR_OPTIONS_VALUES } from "common/constants";
+
+interface Command {
+  label: string;
+  icon: Function;
+  description?: string;
+  optionName: string;
+  active?: ({ editor: TiptapEditor }) => boolean;
+  command?: (props: { editor: TiptapEditor; range: Range }) => void;
+  items?: Command[];
+}
+
+interface Variable {
+  label?: string;
+  key: string;
+  value?: any;
+}
+
+interface VariableCategory {
+  category_key: string;
+  category_label?: string;
+  variables?: Variable[];
+}
+
+interface Mention {
+  key?: string;
+  name: string;
+  imageUrl?: string;
+}
+
+type KeyboardShortcuts = {
+  [shortcut: string]: (props: { editor: TiptapEditor }) => boolean | void;
+};
+
+type EditorFocus = (props: {
+  editor: TiptapEditor;
+  event: FocusEvent;
+  transaction: Transaction;
+}) => void;
+
+interface tooltip {
+  label: string;
+  keys: string[];
+}
+
+interface tooltips {
+  [key: string]: tooltip;
+}
+
+interface MenuProps {
+  tooltips?: tooltips;
+  editor: TiptapEditor | null;
+  menuType?: "fixed" | "bubble" | "headless" | "none";
+  defaults?: string[];
+  addons?: string[];
+  mentions?: Mention[];
+  editorSecrets?: Array<{ unsplash?: string }>;
+  variables?: (VariableCategory | Variable)[];
+  addonCommands?: Command[];
+  isIndependant?: boolean;
+  className?: string;
+}
+interface attachment {
+  filename?: string;
+  signedId?: string;
+  url?: string;
+  [otherProps: string]: any;
+}
+
+interface attachmentsConfig {
+  maxFileSize?: number;
+  maxNumberOfFiles?: number;
+  allowedFileTypes?: string[];
+}
+
+interface EditorProps {
+  attachmentsConfig?: attachmentsConfig;
+  isMenuIndependent?: boolean;
+  isMenuCollapsible?: boolean;
+  menuClassName?: string;
+  attachmentsClassName?: string;
+  errorWrapperClassName?: string;
+  tooltips?: tooltips;
+  initialValue?: string;
+  menuType?: "fixed" | "bubble" | "headless" | "none";
+  label?: string;
+  required?: boolean;
+  autoFocus?: boolean;
+  hideSlashCommands?: boolean;
+  appendSuggestionsToBody?: boolean;
+  defaults?: string[];
+  addons?: string[];
+  addonCommands?: Command[];
+  className?: string;
+  contentClassName?: string;
+  contentWrapperClassName?: string;
+  contentAttributes?: { [key: string]: string };
+  disableTrimOnBlur?: boolean;
+  onChange?: (htmlContent: string) => void;
+  onFocus?: EditorFocus;
+  onBlur?: EditorFocus;
+  onSubmit?: (htmlContent: string) => void;
+  variables?: (VariableCategory | Variable)[];
+  mentions?: Mention[];
+  placeholder?: string;
+  extensions?: Array<Node | Extension>;
+  editorSecrets?: Array<{ unsplash?: string }>;
+  rows?: number;
+  isCharacterCountActive?: boolean;
+  keyboardShortcuts?: KeyboardShortcuts;
+  error?: string;
+  attachments?: Array<attachment>;
+  onChangeAttachments?: (attachments: attachment[]) => void;
+  children?: ReactNode;
+  openImageInNewTab?: boolean;
+  openLinkInNewTab?: boolean;
+  enableReactNodeViewOptimization?: boolean;
+  size?: "large" | "medium" | "small";
+  [otherProps: string]: any;
+}
+
+interface FormikEditorProps extends EditorProps {
+  name: string;
+  shouldUpdate?: (nextProps: EditorProps, prevProps: EditorProps) => boolean;
+}
+interface AttachmentsProps {
+  config?: attachmentsConfig;
+  endpoint?: string;
+  attachments?: Array<attachment>;
+  dragDropRef?: React.RefObject<HTMLDivElement>;
+  onChange?: (attachments: attachment[]) => void;
+  isIndependent?: boolean;
+  disabled?: boolean;
+  className?: string;
+  showToastr?: boolean;
+  allowDelete?: boolean;
+  allowOpenInNewTab?: boolean;
+}
+
+type EditorContentConfigType = {
+  enableHeaderLinks?: boolean;
+}
+
+export function Editor(props: EditorProps): JSX.Element;
+
+export function FormikEditor(props: FormikEditorProps): JSX.Element;
+
+export function Attachments(props: AttachmentsProps): JSX.Element;
+
+export function EditorContent(props: {
+  content?: string;
+  className?: string;
+  variables?: (VariableCategory | Variable)[];
+  size?: "large" | "medium" | "small";
+  configuration?: EditorContentConfigType;
+  onChange?: (htmlContent: string) => void;
+  [otherProps: string]: any;
+}): JSX.Element;
+
+export function Menu(props: MenuProps): JSX.Element;
+
+export function removeEmptyTags(html: string): string;
+
+export function isEditorEmpty(htmlContent: string | null | undefined): boolean;
+
+export function isEditorContentWithinLimit(
+  htmlContent: string | null | undefined,
+  maxLength: number
+): boolean;
+
+export function isEditorOverlaysActive(): boolean;
+
+export function isEmojiSuggestionsMenuActive(): boolean;
+
+export function transformEditorContent(content: string): string;
+
+export function substituteVariables(
+  highlightedContent: string,
+  variables: (VariableCategory | Variable)[]
+): string;
+
+export const DEFAULT_EDITOR_OPTIONS: string[];
+export const EDITOR_OPTIONS: typeof EDITOR_OPTIONS_VALUES;