refactor: remove cn helper function from the editor package (#6217)

packages/editor/package.json

@@ -57,7 +57,6 @@
     "@tiptap/starter-kit": "^2.1.13",
     "@tiptap/suggestion": "^2.0.13",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^1.2.1",
     "highlight.js": "^11.8.0",
     "jsx-dom-cjs": "^8.0.3",
     "linkifyjs": "^4.1.3",
@@ -66,7 +65,6 @@
     "prosemirror-codemark": "^0.4.2",
     "prosemirror-utils": "^1.2.2",
     "react-moveable": "^0.54.2",
-    "tailwind-merge": "^1.14.0",
     "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.8.9",
     "uuid": "^10.0.0",

packages/editor/src/core/components/editors/editor-container.tsx

@@ -1,9 +1,9 @@
 import { FC, ReactNode } from "react";
 import { Editor } from "@tiptap/react";
+// plane utils
+import { cn } from "@plane/utils";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
-// helpers
-import { cn } from "@/helpers/common";
 // types
 import { TDisplayConfig } from "@/types";
 

packages/editor/src/core/components/menus/ai-menu.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import tippy, { Instance } from "tippy.js";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // types
 import { TAIHandler } from "@/types";
 

packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx

@@ -1,9 +1,9 @@
 import { Editor } from "@tiptap/core";
 import { AlignCenter, AlignLeft, AlignRight, LucideIcon } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { TextAlignItem } from "@/components/menus";
-// helpers
-import { cn } from "@/helpers/common";
 // types
 import { TEditorCommands } from "@/types";
 

packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx

@@ -1,10 +1,11 @@
 import { Dispatch, FC, SetStateAction } from "react";
 import { Editor } from "@tiptap/react";
 import { ALargeSmall, Ban } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // constants
 import { COLORS_LIST } from "@/constants/common";
 // helpers
-import { cn } from "@/helpers/common";
 import { BackgroundColorItem, TextColorItem } from "../menu-items";
 
 type Props = {

packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx

@@ -1,8 +1,10 @@
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
 import { Editor } from "@tiptap/core";
 import { Check, Link, Trash } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // helpers
-import { cn, isValidHttpUrl } from "@/helpers/common";
+import { isValidHttpUrl } from "@/helpers/common";
 import { setLinkEditor, unsetLinkEditor } from "@/helpers/editor-commands";
 
 type Props = {

packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx

@@ -1,6 +1,8 @@
 import { Dispatch, FC, SetStateAction } from "react";
 import { Editor } from "@tiptap/react";
 import { Check, ChevronDown } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import {
   BulletListItem,
@@ -17,8 +19,6 @@ import {
   HeadingSixItem,
   EditorMenuItem,
 } from "@/components/menus";
-// helpers
-import { cn } from "@/helpers/common";
 // types
 import { TEditorCommands } from "@/types";
 

packages/editor/src/core/components/menus/bubble-menu/root.tsx

@@ -1,5 +1,7 @@
 import { FC, useEffect, useState } from "react";
 import { BubbleMenu, BubbleMenuProps, Editor, isNodeSelection } from "@tiptap/react";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import {
   BoldItem,
@@ -13,8 +15,6 @@ import {
 } from "@/components/menus";
 // extensions
 import { isCellSelection } from "@/extensions/table/table/utilities/is-cell-selection";
-// helpers
-import { cn } from "@/helpers/common";
 // local components
 import { TextAlignmentSelector } from "./alignment-selector";
 

packages/editor/src/core/extensions/callout/color-selector.tsx

@@ -1,8 +1,8 @@
 import { Ban, ChevronDown } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // constants
 import { COLORS_LIST } from "@/constants/common";
-// helpers
-import { cn } from "@/helpers/common";
 
 type Props = {
   disabled: boolean;

packages/editor/src/core/extensions/callout/logo-selector.tsx

@@ -2,8 +2,8 @@
 import { convertHexEmojiToDecimal } from "@plane/utils";
 // plane ui
 import { EmojiIconPicker, EmojiIconPickerTypes, Logo, TEmojiLogoProps } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // types
 import { TCalloutBlockAttributes } from "./types";
 // utils

packages/editor/src/core/extensions/code/code-block-node-view.tsx

@@ -8,8 +8,8 @@ import { common, createLowlight } from "lowlight";
 import { CopyIcon, CheckIcon } from "lucide-react";
 // ui
 import { Tooltip } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 
 // we just have ts support for now
 const lowlight = createLowlight(common);

packages/editor/src/core/extensions/custom-image/components/image-block.tsx

@@ -1,9 +1,9 @@
 import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
 import { NodeSelection } from "@tiptap/pm/state";
+// plane utils
+import { cn } from "@plane/utils";
 // extensions
 import { CustoBaseImageNodeViewProps, ImageToolbarRoot } from "@/extensions/custom-image";
-// helpers
-import { cn } from "@/helpers/common";
 
 const MIN_SIZE = 100;
 

packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, useCallback, useEffect, useMemo, useRef } from "react";
 import { ImageIcon } from "lucide-react";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // hooks
 import { useUploader, useDropZone, uploadFirstImageAndInsertRemaining } from "@/hooks/use-file-upload";
 // extensions

packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ExternalLink, Maximize, Minus, Plus, X } from "lucide-react";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 
 type Props = {
   image: {

packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { ImageFullScreenAction } from "./full-screen";
 

packages/editor/src/core/extensions/mentions/mention-node-view.tsx

@@ -5,8 +5,8 @@
 // @ts-nocheck
 import { useEffect, useState } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // types
 import { IMentionHighlight } from "@/types";
 

packages/editor/src/core/extensions/mentions/mentions-list.tsx

@@ -5,8 +5,8 @@ import { Editor } from "@tiptap/react";
 import { v4 as uuidv4 } from "uuid";
 // ui
 import { Avatar } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // types
 import { IMentionSuggestion } from "@/types";
 

packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx

@@ -1,5 +1,5 @@
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // types
 import { ISlashCommandItem } from "@/types";
 

packages/editor/src/core/helpers/common.ts

@@ -1,6 +1,6 @@
 import { EditorState, Selection } from "@tiptap/pm/state";
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+// plane utils
+import { cn } from "@plane/utils";
 
 interface EditorClassNames {
   noBorder?: boolean;
@@ -18,10 +18,6 @@ export const getEditorClassNames = ({ noBorder, borderOnFocus, containerClassNam
     containerClassName
   );
 
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
 // Helper function to find the parent node of a specific type
 export function findParentNodeOfType(selection: Selection, typeName: string) {
   let depth = selection.$anchor.depth;

packages/editor/src/core/props/props.tsx

@@ -1,6 +1,6 @@
 import { EditorProps } from "@tiptap/pm/view";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 
 export type TCoreEditorProps = {
   editorClassName: string;

packages/editor/src/core/props/read-only.tsx

@@ -1,6 +1,6 @@
 import { EditorProps } from "@tiptap/pm/view";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // props
 import { TCoreEditorProps } from "@/props";
 

packages/utils/package.json

@@ -15,8 +15,10 @@
     "lint:errors": "eslint src --ext .ts,.tsx --quiet"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "isomorphic-dompurify": "^2.16.0",
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "tailwind-merge": "^2.5.5"
   },
   "devDependencies": {
     "@plane/eslint-config": "*",

packages/utils/src/common.ts

@@ -0,0 +1,4 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

packages/utils/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./color";
+export * from "./common";
 export * from "./emoji";
 export * from "./string";