fix: added import order rules to the editor package (#4946)

* fix: added import order rules to the editor package

* chore: remove headless ui rule

packages/editor/.eslintrc.js

@@ -1,4 +1,38 @@
 module.exports = {
   root: true,
   extends: ["custom"],
+  rules: {
+    "import/order": [
+      "error",
+      {
+        groups: ["builtin", "external", "internal", "parent", "sibling"],
+        pathGroups: [
+          {
+            pattern: "react",
+            group: "external",
+            position: "before",
+          },
+          {
+            pattern: "lucide-react",
+            group: "external",
+            position: "after",
+          },
+          {
+            pattern: "@plane/**",
+            group: "external",
+            position: "after",
+          },
+          {
+            pattern: "@/**",
+            group: "internal",
+          },
+        ],
+        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
+  },
 };

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

@@ -1,6 +1,7 @@
-import { Editor, EditorContent } from "@tiptap/react";
 import { FC, ReactNode } from "react";
-import { ImageResizer } from "src/core/extensions/image/image-resize";
+import { Editor, EditorContent } from "@tiptap/react";
+// extensions
+import { ImageResizer } from "@/extensions/image";
 
 interface EditorContentProps {
   editor: Editor | null;

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from "react";
-import { Copy, LucideIcon, Trash2 } from "lucide-react";
-import tippy, { Instance } from "tippy.js";
 import { Editor } from "@tiptap/react";
+import tippy, { Instance } from "tippy.js";
+import { Copy, LucideIcon, Trash2 } from "lucide-react";
 
 interface BlockMenuProps {
   editor: Editor;

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

@@ -1,11 +1,11 @@
 "use client";
 
 import { useState } from "react";
-import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
-import { common, createLowlight } from "lowlight";
-import ts from "highlight.js/lib/languages/typescript";
-import { CopyIcon, CheckIcon } from "lucide-react";
 import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
+import ts from "highlight.js/lib/languages/typescript";
+import { common, createLowlight } from "lowlight";
+import { CopyIcon, CheckIcon } from "lucide-react";
 // ui
 import { Tooltip } from "@plane/ui";
 // helpers

packages/editor/src/core/extensions/code/index.tsx

@@ -1,14 +1,14 @@
-import { common, createLowlight } from "lowlight";
+import { Selection } from "@tiptap/pm/state";
+import { ReactNodeViewRenderer } from "@tiptap/react";
 import ts from "highlight.js/lib/languages/typescript";
+import { common, createLowlight } from "lowlight";
+// components
+import { CodeBlockLowlight } from "./code-block-lowlight";
+import { CodeBlockComponent } from "./code-block-node-view";
 
 const lowlight = createLowlight(common);
 lowlight.register("ts", ts);
 
-import { Selection } from "@tiptap/pm/state";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-import { CodeBlockComponent } from "./code-block-node-view";
-import { CodeBlockLowlight } from "./code-block-lowlight";
-
 export const CustomCodeBlockExtension = CodeBlockLowlight.extend({
   addNodeView() {
     return ReactNodeViewRenderer(CodeBlockComponent);

packages/editor/src/core/extensions/core-without-props.tsx

@@ -1,10 +1,10 @@
+import Placeholder from "@tiptap/extension-placeholder";
 import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
 import TextStyle from "@tiptap/extension-text-style";
 import TiptapUnderline from "@tiptap/extension-underline";
-import Placeholder from "@tiptap/extension-placeholder";
-import { Markdown } from "tiptap-markdown";
 import StarterKit from "@tiptap/starter-kit";
+import { Markdown } from "tiptap-markdown";
 // extensions
 import {
   CustomCodeBlockExtension,

packages/editor/src/core/extensions/custom-list-keymap/list-helpers.ts

@@ -1,6 +1,6 @@
-import { EditorState } from "@tiptap/pm/state";
 import { Editor, getNodeType, getNodeAtPosition, isAtEndOfNode, isAtStartOfNode, isNodeActive } from "@tiptap/core";
 import { Node, NodeType } from "@tiptap/pm/model";
+import { EditorState } from "@tiptap/pm/state";
 
 const findListItemPos = (typeOrName: string | NodeType, state: EditorState) => {
   const { $from } = state.selection;

packages/editor/src/core/extensions/custom-list-keymap/list-keymap.ts

@@ -1,6 +1,6 @@
 import { Extension } from "@tiptap/core";
-
-import { handleBackspace, handleDelete } from "src/core/extensions/custom-list-keymap/list-helpers";
+// extensions
+import { handleBackspace, handleDelete } from "@/extensions/custom-list-keymap/list-helpers";
 
 export type ListKeymapOptions = {
   listTypes: Array<{

packages/editor/src/core/extensions/extensions.tsx

@@ -1,8 +1,8 @@
+import Placeholder from "@tiptap/extension-placeholder";
 import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
 import TextStyle from "@tiptap/extension-text-style";
 import TiptapUnderline from "@tiptap/extension-underline";
-import Placeholder from "@tiptap/extension-placeholder";
 import StarterKit from "@tiptap/starter-kit";
 import { Markdown } from "tiptap-markdown";
 // extensions

packages/editor/src/core/extensions/image/extension.tsx

@@ -1,12 +1,17 @@
-import { UploadImagesPlugin } from "src/core/plugins/image/upload-image";
 import ImageExt from "@tiptap/extension-image";
-import { TrackImageDeletionPlugin } from "src/core/plugins/image/delete-image";
+// plugins
+import {
+  IMAGE_NODE_TYPE,
+  ImageExtensionStorage,
+  TrackImageDeletionPlugin,
+  TrackImageRestorationPlugin,
+  UploadImagesPlugin,
+} from "@/plugins/image";
+// types
 import { DeleteImage, RestoreImage } from "@/types";
-import { insertLineBelowImageAction } from "./utilities/insert-line-below-image";
+// helpers
 import { insertLineAboveImageAction } from "./utilities/insert-line-above-image";
-import { TrackImageRestorationPlugin } from "src/core/plugins/image/restore-image";
-import { IMAGE_NODE_TYPE } from "src/core/plugins/image/constants";
-import { ImageExtensionStorage } from "src/core/plugins/image/types/image-node";
+import { insertLineBelowImageAction } from "./utilities/insert-line-below-image";
 
 export const ImageExtension = (deleteImage: DeleteImage, restoreImage: RestoreImage, cancelUploadImage?: () => void) =>
   ImageExt.extend<any, ImageExtensionStorage>({

packages/editor/src/core/extensions/image/image-extension-without-props.tsx

@@ -1,6 +1,7 @@
 import ImageExt from "@tiptap/extension-image";
-import { insertLineBelowImageAction } from "./utilities/insert-line-below-image";
+// helpers
 import { insertLineAboveImageAction } from "./utilities/insert-line-above-image";
+import { insertLineBelowImageAction } from "./utilities/insert-line-below-image";
 
 export const ImageExtensionWithoutProps = () =>
   ImageExt.extend({

packages/editor/src/core/extensions/image/image-resize.tsx

@@ -1,5 +1,5 @@
-import { Editor } from "@tiptap/react";
 import { useState } from "react";
+import { Editor } from "@tiptap/react";
 import Moveable from "react-moveable";
 
 export const ImageResizer = ({ editor }: { editor: Editor }) => {

packages/editor/src/core/extensions/image/utilities/insert-line-above-image.ts

@@ -1,5 +1,5 @@
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { KeyboardShortcutCommand } from "@tiptap/core";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
 
 export const insertLineAboveImageAction: KeyboardShortcutCommand = ({ editor }) => {
   try {

packages/editor/src/core/extensions/image/utilities/insert-line-below-image.ts

@@ -1,5 +1,5 @@
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { KeyboardShortcutCommand } from "@tiptap/core";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
 
 export const insertLineBelowImageAction: KeyboardShortcutCommand = ({ editor }) => {
   try {

packages/editor/src/core/extensions/keymap.tsx

@@ -1,7 +1,7 @@
 import { Extension } from "@tiptap/core";
+import { NodeType } from "@tiptap/pm/model";
 import { Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
 import { canJoin } from "@tiptap/pm/transform";
-import { NodeType } from "@tiptap/pm/model";
 
 declare module "@tiptap/core" {
   // eslint-disable-next-line no-unused-vars

packages/editor/src/core/extensions/mentions/extension.tsx

@@ -1,6 +1,6 @@
+import { Editor, mergeAttributes } from "@tiptap/core";
 import Mention, { MentionOptions } from "@tiptap/extension-mention";
 import { ReactNodeViewRenderer, ReactRenderer } from "@tiptap/react";
-import { Editor, mergeAttributes } from "@tiptap/core";
 import tippy from "tippy.js";
 // extensions
 import { MentionList, MentionNodeView } from "@/extensions";

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

@@ -1,3 +1,5 @@
+// TODO: fix all warnings
+
 /* eslint-disable react/display-name */
 // @ts-nocheck
 import { useEffect, useState } from "react";

packages/editor/src/core/extensions/mentions/mentions-without-props.tsx

@@ -1,6 +1,6 @@
+import { mergeAttributes } from "@tiptap/core";
 import Mention from "@tiptap/extension-mention";
 import { ReactNodeViewRenderer } from "@tiptap/react";
-import { mergeAttributes } from "@tiptap/core";
 // extensions
 import { CustomMentionOptions, MentionNodeView } from "@/extensions";
 

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

@@ -1,11 +1,9 @@
-import StarterKit from "@tiptap/starter-kit";
-import TiptapUnderline from "@tiptap/extension-underline";
-import TextStyle from "@tiptap/extension-text-style";
 import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
+import TextStyle from "@tiptap/extension-text-style";
+import TiptapUnderline from "@tiptap/extension-underline";
+import StarterKit from "@tiptap/starter-kit";
 import { Markdown } from "tiptap-markdown";
-// helpers
-import { isValidHttpUrl } from "@/helpers/common";
 // extensions
 import {
   CustomQuoteExtension,
@@ -21,6 +19,8 @@ import {
   Table,
   CustomMention,
 } from "@/extensions";
+// helpers
+import { isValidHttpUrl } from "@/helpers/common";
 // types
 import { IMentionHighlight } from "@/types";
 

packages/editor/src/core/extensions/slash-commands.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, ReactNode, useRef, useLayoutEffect } from "react";
 import { Editor, Range, Extension } from "@tiptap/core";
-import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
+import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
 import tippy from "tippy.js";
 import {
   CaseSensitive,

packages/editor/src/core/extensions/table/table/table-controls.ts

@@ -1,5 +1,5 @@
-import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { findParentNode } from "@tiptap/core";
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { DecorationSet, Decoration } from "@tiptap/pm/view";
 
 const key = new PluginKey("tableControls");

packages/editor/src/core/extensions/table/table/table.ts

@@ -1,6 +1,5 @@
-import { TextSelection } from "@tiptap/pm/state";
-
 import { callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
 import {
   addColumnAfter,
   addColumnBefore,
@@ -21,12 +20,12 @@ import {
   toggleHeaderCell,
 } from "@tiptap/pm/tables";
 
-import { tableControls } from "src/core/extensions/table/table/table-controls";
-import { TableView } from "src/core/extensions/table/table/table-view";
-import { createTable } from "src/core/extensions/table/table/utilities/create-table";
-import { deleteTableWhenAllCellsSelected } from "src/core/extensions/table/table/utilities/delete-table-when-all-cells-selected";
-import { insertLineBelowTableAction } from "./utilities/insert-line-below-table-action";
+import { tableControls } from "@/extensions/table/table/table-controls";
+import { TableView } from "@/extensions/table/table/table-view";
+import { createTable } from "@/extensions/table/table/utilities/create-table";
+import { deleteTableWhenAllCellsSelected } from "@/extensions/table/table/utilities/delete-table-when-all-cells-selected";
 import { insertLineAboveTableAction } from "./utilities/insert-line-above-table-action";
+import { insertLineBelowTableAction } from "./utilities/insert-line-below-table-action";
 
 export interface TableOptions {
   HTMLAttributes: Record<string, any>;

packages/editor/src/core/extensions/table/table/utilities/create-table.ts

@@ -1,7 +1,7 @@
 import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model";
-
-import { createCell } from "src/core/extensions/table/table/utilities/create-cell";
-import { getTableNodeTypes } from "src/core/extensions/table/table/utilities/get-table-node-types";
+// extensions
+import { createCell } from "@/extensions/table/table/utilities/create-cell";
+import { getTableNodeTypes } from "@/extensions/table/table/utilities/get-table-node-types";
 
 export function createTable(
   schema: Schema,

packages/editor/src/core/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts

@@ -1,6 +1,6 @@
 import { findParentNodeClosestToPos, KeyboardShortcutCommand } from "@tiptap/core";
-
-import { isCellSelection } from "src/core/extensions/table/table/utilities/is-cell-selection";
+// extensions
+import { isCellSelection } from "@/extensions/table/table/utilities/is-cell-selection";
 
 export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({ editor }) => {
   const { selection } = editor.state;

packages/editor/src/core/extensions/typography/index.ts

@@ -20,7 +20,7 @@ import {
   oneQuarter,
   threeQuarters,
   impliesArrowRight,
-} from "src/core/extensions/typography/inputRules";
+} from "./inputRules";
 
 export const CustomTypographyExtension = Extension.create<TypographyOptions>({
   name: "typography",

packages/editor/src/core/helpers/editor-commands.ts

@@ -1,8 +1,11 @@
 import { Editor, Range } from "@tiptap/core";
-import { startImageUpload } from "src/core/plugins/image/image-upload-handler";
-import { findTableAncestor } from "@/helpers/common";
 import { Selection } from "@tiptap/pm/state";
+// extensions
 import { replaceCodeWithText } from "@/extensions/code/utils/replace-code-block-with-text";
+// helpers
+import { findTableAncestor } from "@/helpers/common";
+// plugins
+import { startImageUpload } from "@/plugins/image";
 // types
 import { UploadImage } from "@/types";
 

packages/editor/src/core/helpers/insert-content-at-cursor-position.ts

@@ -1,6 +1,6 @@
+import { MutableRefObject } from "react";
 import { Selection } from "@tiptap/pm/state";
 import { Editor } from "@tiptap/react";
-import { MutableRefObject } from "react";
 
 export const insertContentAtSavedSelection = (
   editorRef: MutableRefObject<Editor | null>,

packages/editor/src/core/hooks/use-editor.ts

@@ -1,7 +1,7 @@
-import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
 import { useImperativeHandle, useRef, MutableRefObject, useState, useEffect } from "react";
-import { EditorProps } from "@tiptap/pm/view";
 import { Selection } from "@tiptap/pm/state";
+import { EditorProps } from "@tiptap/pm/view";
+import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
 // components
 import { EditorMenuItemNames, getEditorMenuItems } from "@/components/menus";
 // extensions
@@ -9,11 +9,12 @@ import { CoreEditorExtensions } from "@/extensions";
 // helpers
 import { insertContentAtSavedSelection } from "@/helpers/insert-content-at-cursor-position";
 import { IMarking, scrollSummary } from "@/helpers/scroll-to-node";
+// plane editor providers
+import { CollaborationProvider } from "@/plane-editor/providers";
 // props
 import { CoreEditorProps } from "@/props";
 // types
 import { DeleteImage, EditorRefApi, IMentionHighlight, IMentionSuggestion, RestoreImage, UploadImage } from "@/types";
-import { CollaborationProvider } from "@/plane-editor/providers";
 
 export type TFileHandler = {
   cancel: () => void;

packages/editor/src/core/plugins/image/utils/placeholder.ts

@@ -1,7 +1,8 @@
 import { Editor } from "@tiptap/core";
 import { EditorState } from "@tiptap/pm/state";
 import { DecorationSet, EditorView } from "@tiptap/pm/view";
-import { uploadKey } from "src/core/plugins/image/constants";
+// plugins
+import { uploadKey } from "@/plugins/image";
 
 export function findPlaceholder(state: EditorState, id: string): number | null {
   const decos = uploadKey.getState(state) as DecorationSet;

packages/editor/src/core/types/editor.ts

@@ -1,7 +1,10 @@
-// types
+// components
 import { EditorMenuItemNames } from "@/components/menus";
+// helpers
 import { IMarking } from "@/helpers/scroll-to-node";
+// hooks
 import { TFileHandler } from "@/hooks/use-editor";
+// types
 import { IMentionHighlight, IMentionSuggestion } from "@/types";
 
 export type EditorReadOnlyRefApi = {