refactor: actions icon migration (#8219)

* chore: gitignore updated * chore: check icon added to propel package * feat: search icon migration * chore: check icon migration * chore: plus icon added to propel package * chore: code refactor * chore: plus icon migration and code refactor * chore: trash icon added to propel package * chore: code refactor * chore: trash icon migration * chore: edit icon added to propel package * chore: new tab icon added to propel package * chore: edit icon migration * chore: newtab icon migration * chore: lock icon added to propel package * chore: lock icon migration * chore: globe icon added to propel package * chore: globe icon migration * chore: copy icon added to propel package * chore: copy icon migration * chore: link icon added to propel package * chore: link icon migration * chore: link icon migration * chore: info icon added to propel package * chore: code refactor * chore: code refactor * chore: code refactor * chore: code refactor
2025-12-26 17:19:15 +05:30 · 2025-12-26 17:19:15 +05:30 · 2980c2d76b
commit 2980c2d76b
parent 92ac28fcb8
215 changed files with 932 additions and 729 deletions
--- a/packages/editor/src/core/components/links/link-preview.tsx
+++ b/packages/editor/src/core/components/links/link-preview.tsx
@ -1,4 +1,5 @@
-import { Copy, GlobeIcon, Link2Off, PencilIcon } from "lucide-react";
+import { Link2Off } from "lucide-react";
+import { CopyIcon, GlobeIcon, EditIcon } from "@plane/propel/icons";
 // components
 import type { LinkViewProps, LinkViews } from "@/components/links";

@ -29,11 +30,11 @@ export function LinkPreview({
      }}
    >
      <div className="shadow-md items-center rounded-sm p-2 flex gap-3 bg-layer-1 border-subtle border-2 text-tertiary text-11">
-        <GlobeIcon size={14} className="inline-block" />
+        <GlobeIcon width={14} height={14} className="inline-block" />
        <p>{url?.length > 40 ? url.slice(0, 40) + "..." : url}</p>
        <div className="flex gap-2">
          <button onClick={copyLinkToClipboard} className="cursor-pointer hover:text-primary transition-colors">
-            <Copy size={14} className="inline-block" />
+            <CopyIcon width={14} height={14} className="inline-block" />
          </button>
          {editor.isEditable && (
            <>
@ -41,7 +42,7 @@ export function LinkPreview({
                onClick={() => switchView("LinkEditView")}
                className="cursor-pointer hover:text-primary transition-colors"
              >
-                <PencilIcon size={14} className="inline-block" />
+                <EditIcon width={14} height={14} className="inline-block" />
              </button>
              <button onClick={removeLink} className="cursor-pointer hover:text-primary transition-colors">
                <Link2Off size={14} className="inline-block" />
--- a/packages/editor/src/core/components/menus/block-menu.tsx
+++ b/packages/editor/src/core/components/menus/block-menu.tsx
@ -10,8 +10,8 @@ import {
 } from "@floating-ui/react";
 import type { Editor } from "@tiptap/react";
 import type { LucideIcon } from "lucide-react";
-import { Copy, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { CopyIcon, TrashIcon } from "@plane/propel/icons";
 import type { ISvgIcons } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // constants
@ -144,7 +144,7 @@ export function BlockMenu(props: Props) {

  const MENU_ITEMS: BlockMenuOption[] = [
    {
-      icon: Trash2,
+      icon: TrashIcon,
      key: "delete",
      label: "Delete",
      onClick: (_e) => {
@ -153,7 +153,7 @@ export function BlockMenu(props: Props) {
      },
    },
    {
-      icon: Copy,
+      icon: CopyIcon,
      key: "duplicate",
      label: "Duplicate",
      isDisabled:
--- a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
@ -1,7 +1,8 @@
 import type { Editor } from "@tiptap/core";
-import { Check, Link, Trash2 } from "lucide-react";
+
 import type { FC } from "react";
 import { useCallback, useRef, useState } from "react";
+import { LinkIcon, TrashIcon, CheckIcon } from "@plane/propel/icons";
 // plane imports
 import { cn } from "@plane/utils";
 // constants
@ -58,7 +59,7 @@ export function BubbleMenuLinkSelector(props: Props) {
      menuButton={
        <>
          Link
-          <Link className="shrink-0 size-3" />
+          <LinkIcon className="shrink-0 size-3" />
        </>
      }
      options={options}
@ -96,7 +97,7 @@ export function BubbleMenuLinkSelector(props: Props) {
                context.onOpenChange(false);
              }}
            >
-              <Trash2 className="size-4" />
+              <TrashIcon className="size-4" />
            </button>
          ) : (
            <button
@ -107,7 +108,7 @@ export function BubbleMenuLinkSelector(props: Props) {
                handleLinkSubmit();
              }}
            >
-              <Check className="size-4" />
+              <CheckIcon className="size-4" />
            </button>
          )}
        </div>
--- a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
@ -1,7 +1,7 @@
 import type { Editor } from "@tiptap/react";
-import { Check } from "lucide-react";
+
 import type { FC } from "react";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
 // plane utils
 import { cn } from "@plane/utils";
 // components
@ -96,7 +96,7 @@ export function BubbleMenuNodeSelector(props: Props) {
              <item.icon className="size-3 flex-shrink-0" />
              <span>{item.name}</span>
            </div>
-            {activeItem.name === item.name && <Check className="size-3 text-tertiary flex-shrink-0" />}
+            {activeItem.name === item.name && <CheckIcon className="size-3 text-tertiary flex-shrink-0" />}
          </button>
        ))}
      </section>
--- a/packages/editor/src/core/components/menus/menu-items.ts
+++ b/packages/editor/src/core/components/menus/menu-items.ts
@ -21,9 +21,9 @@ import {
  MinusSquare,
  Palette,
  AlignCenter,
-  LinkIcon,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
+import { LinkIcon } from "@plane/propel/icons";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // helpers
@ -50,7 +50,7 @@ import {
 } from "@/helpers/editor-commands";
 // types
 import type { TCommandWithProps, TEditorCommands } from "@/types";
-
+import type { ISvgIcons } from "@plane/propel/icons";
 type isActiveFunction<T extends TEditorCommands> = (params?: TCommandWithProps<T>) => boolean;
 type commandFunction<T extends TEditorCommands> = (params?: TCommandWithProps<T>) => void;

@ -58,7 +58,7 @@ export type EditorMenuItem<T extends TEditorCommands> = {
  key: T;
  name: string;
  command: commandFunction<T>;
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
  isActive: isActiveFunction<T>;
 };

--- a/packages/editor/src/core/extensions/code/code-block-node-view.tsx
+++ b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
@ -2,8 +2,9 @@ import type { 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";
+import { CheckIcon } from "lucide-react";
 import { useState } from "react";
+import { CopyIcon } from "@plane/propel/icons";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
 // plane utils
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@ -1,7 +1,7 @@
-import { Download, ExternalLink, Minus, Plus } from "lucide-react";
+import { Download, Minus } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { CloseIcon } from "@plane/propel/icons";
+import { NewTabIcon, PlusIcon, CloseIcon } from "@plane/propel/icons";
 // plane imports
 import { cn } from "@plane/utils";

@ -262,7 +262,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
              disabled={magnification >= MAX_ZOOM}
              aria-label="Zoom in"
            >
-              <Plus className="size-4" />
+              <PlusIcon className="size-4" />
            </button>
          </div>
          {!isTouchDevice && (
@ -282,7 +282,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
              className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
              aria-label="Open image in new tab"
            >
-              <ExternalLink className="size-4" />
+              <NewTabIcon className="size-4" />
            </button>
          )}
        </div>
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
@ -1,10 +1,10 @@
 import type { Editor } from "@tiptap/core";
 import { TableMap } from "@tiptap/pm/tables";
-import { ArrowLeft, ArrowRight, Copy, ToggleRight, Trash2 } from "lucide-react";
+import { ArrowLeft, ArrowRight, ToggleRight } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 // extensions
 import type { ISvgIcons } from "@plane/propel/icons";
-import { CloseIcon } from "@plane/propel/icons";
+import { CopyIcon, TrashIcon, CloseIcon } from "@plane/propel/icons";
 import { findTable, getSelectedColumns } from "@/extensions/table/table/utilities/helpers";
 // local imports
 import { duplicateColumns } from "../actions";
@ -31,7 +31,7 @@ const DROPDOWN_ITEMS: {
  {
    key: "duplicate",
    label: "Duplicate",
-    icon: Copy,
+    icon: CopyIcon,
    action: (editor) => {
      const table = findTable(editor.state.selection);
      if (!table) return;
@ -52,7 +52,7 @@ const DROPDOWN_ITEMS: {
  {
    key: "delete",
    label: "Delete",
-    icon: Trash2,
+    icon: TrashIcon,
    action: (editor) => editor.chain().focus().deleteColumn().run(),
  },
 ];
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
@ -1,10 +1,10 @@
 import type { Editor } from "@tiptap/core";
 import { TableMap } from "@tiptap/pm/tables";
-import { ArrowDown, ArrowUp, Copy, ToggleRight, Trash2 } from "lucide-react";
+import { ArrowDown, ArrowUp, ToggleRight } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 // extensions
 import type { ISvgIcons } from "@plane/propel/icons";
-import { CloseIcon } from "@plane/propel/icons";
+import { CopyIcon, TrashIcon, CloseIcon } from "@plane/propel/icons";
 import { findTable, getSelectedRows } from "@/extensions/table/table/utilities/helpers";
 // local imports
 import { duplicateRows } from "../actions";
@ -31,7 +31,7 @@ const DROPDOWN_ITEMS: {
  {
    key: "duplicate",
    label: "Duplicate",
-    icon: Copy,
+    icon: CopyIcon,
    action: (editor) => {
      const table = findTable(editor.state.selection);
      if (!table) return;
@ -52,7 +52,7 @@ const DROPDOWN_ITEMS: {
  {
    key: "delete",
    label: "Delete",
-    icon: Trash2,
+    icon: TrashIcon,
    action: (editor) => editor.chain().focus().deleteRow().run(),
  },
 ];