[WIKI-578] refactor: editor types structure

packages/editor/src/core/components/editors/document/editor.tsx

@@ -30,6 +30,7 @@ const DocumentEditor = (props: IDocumentEditorProps) => {
     flaggedExtensions,
     forwardedRef,
     id,
+    isTouchDevice,
     handleEditorReady,
     mentionHandler,
     onChange,
@@ -96,6 +97,7 @@ const DocumentEditor = (props: IDocumentEditorProps) => {
       editor={editor}
       editorContainerClassName={cn(editorContainerClassName, "document-editor")}
       id={id}
+      isTouchDevice={!!isTouchDevice}
     />
   );
 };

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

@@ -1,14 +1,14 @@
-import { Editor, EditorContent } from "@tiptap/react";
+import { type Editor, EditorContent } from "@tiptap/react";
 import { FC, ReactNode } from "react";
 
-interface EditorContentProps {
+type Props = {
   children?: ReactNode;
   editor: Editor | null;
   id: string;
   tabIndex?: number;
-}
+};
 
-export const EditorContentWrapper: FC<EditorContentProps> = (props) => {
+export const EditorContentWrapper: FC<Props> = (props) => {
   const { editor, children, tabIndex, id } = props;
 
   return (

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

@@ -4,12 +4,12 @@ import { FC, useCallback, useEffect, useRef, useState } from "react";
 // components
 import { LinkView, LinkViewProps } from "@/components/links";
 
-interface LinkViewContainerProps {
+type Props = {
   editor: Editor;
   containerRef: React.RefObject<HTMLDivElement>;
-}
+};
 
-export const LinkViewContainer: FC<LinkViewContainerProps> = ({ editor, containerRef }) => {
+export const LinkViewContainer: FC<Props> = ({ editor, containerRef }) => {
   const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
   const [isOpen, setIsOpen] = useState(false);
   const [virtualElement, setVirtualElement] = useState<Element | null>(null);

packages/editor/src/core/components/links/link-edit-view.tsx

@@ -6,13 +6,13 @@ import { LinkViewProps, LinkViews } from "@/components/links";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
 
-interface InputViewProps {
+type InputViewProps = {
   label: string;
   value: string;
   placeholder: string;
   onChange: (value: string) => void;
   autoFocus?: boolean;
-}
+};
 
 const InputView = ({ label, value, placeholder, onChange, autoFocus }: InputViewProps) => (
   <div className="flex flex-col gap-1">
@@ -28,10 +28,10 @@ const InputView = ({ label, value, placeholder, onChange, autoFocus }: InputView
   </div>
 );
 
-interface LinkEditViewProps {
+type LinkEditViewProps = {
   viewProps: LinkViewProps;
   switchView: (view: LinkViews) => void;
-}
+};
 
 export const LinkEditView = ({ viewProps }: LinkEditViewProps) => {
   const { editor, from, to, url: initialUrl, text: initialText, closeLinkView } = viewProps;

packages/editor/src/core/components/links/link-view.tsx

@@ -5,15 +5,15 @@ import { LinkEditView, LinkPreview } from "@/components/links";
 
 export type LinkViews = "LinkPreview" | "LinkEditView";
 
-export interface LinkViewProps {
+export type LinkViewProps = {
   view?: LinkViews;
   editor: Editor;
   from: number;
   to: number;
   url: string;
   text?: string;
   closeLinkView: () => void;
-}
+};
 
 export const LinkView = (props: LinkViewProps & { style: CSSProperties }) => {
   const [currentView, setCurrentView] = useState<LinkViews>(props.view ?? "LinkPreview");

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

@@ -1,15 +1,15 @@
-import { Editor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
 import { Copy, LucideIcon, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useRef } from "react";
 import tippy, { Instance } from "tippy.js";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 
-interface BlockMenuProps {
+type Props = {
   editor: Editor;
-}
+};
 
-export const BlockMenu = (props: BlockMenuProps) => {
+export const BlockMenu = (props: Props) => {
   const { editor } = props;
   const menuRef = useRef<HTMLDivElement>(null);
   const popup = useRef<Instance | null>(null);

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

@@ -29,7 +29,7 @@ import { TextAlignmentSelector } from "./alignment-selector";
 
 type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
 
-export interface EditorStateType {
+export type EditorStateType = {
   code: boolean;
   bold: boolean;
   italic: boolean;
@@ -47,7 +47,7 @@ export interface EditorStateType {
         backgroundColor: string;
       }
     | undefined;
-}
+};
 
 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: { editor: Editor }) => {
   const menuRef = useRef<HTMLDivElement>(null);

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

@@ -2,9 +2,9 @@ import { Mark, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/cor
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 
-export interface CodeOptions {
-  HTMLAttributes: Record<string, any>;
-}
+type InlineCodeOptions = {
+  HTMLAttributes: Record<string, unknown>;
+};
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -28,7 +28,7 @@ declare module "@tiptap/core" {
 export const inputRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))$/;
 const pasteRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))/g;
 
-export const CustomCodeInlineExtension = Mark.create<CodeOptions>({
+export const CustomCodeInlineExtension = Mark.create<InlineCodeOptions>({
   name: CORE_EXTENSIONS.CODE_INLINE,
 
   addOptions() {

packages/editor/src/core/extensions/code/code-block-lowlight.ts

@@ -3,10 +3,10 @@
 import { CodeBlockOptions, CodeBlock } from "./code-block";
 import { LowlightPlugin } from "./lowlight-plugin";
 
-export interface CodeBlockLowlightOptions extends CodeBlockOptions {
+type CodeBlockLowlightOptions = CodeBlockOptions & {
   lowlight: any;
   defaultLanguage: string | null | undefined;
-}
+};
 
 export const CodeBlockLowlight = CodeBlock.extend<CodeBlockLowlightOptions>({
   addOptions() {

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+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";
@@ -15,11 +15,11 @@ import { cn } from "@plane/utils";
 const lowlight = createLowlight(common);
 lowlight.register("ts", ts);
 
-interface CodeBlockComponentProps {
+type Props = {
   node: ProseMirrorNode;
-}
+};
 
-export const CodeBlockComponent: React.FC<CodeBlockComponentProps> = ({ node }) => {
+export const CodeBlockComponent: React.FC<Props> = ({ node }) => {
   const [copied, setCopied] = useState(false);
 
   const copyToClipboard = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {

packages/editor/src/core/extensions/code/code-block.ts

@@ -3,7 +3,7 @@ import { Plugin, PluginKey } from "@tiptap/pm/state";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 
-export interface CodeBlockOptions {
+export type CodeBlockOptions = {
   /**
    * Adds a prefix to language classes that are applied to code tags.
    * Defaults to `'language-'`.
@@ -22,8 +22,8 @@ export interface CodeBlockOptions {
   /**
    * Custom HTML attributes that should be added to the rendered HTML tag.
    */
-  HTMLAttributes: Record<string, any>;
-}
+  HTMLAttributes: Record<string, unknown>;
+};
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {

packages/editor/src/core/extensions/custom-link/extension.tsx

@@ -10,12 +10,12 @@ import { autolink } from "./helpers/autolink";
 import { clickHandler } from "./helpers/clickHandler";
 import { pasteHandler } from "./helpers/pasteHandler";
 
-export interface LinkProtocolOptions {
+type LinkProtocolOptions = {
   scheme: string;
   optionalSlashes?: boolean;
-}
+};
 
-export interface LinkOptions {
+type LinkOptions = {
   /**
    * If enabled, it adds links as you type.
    */
@@ -40,14 +40,14 @@ export interface LinkOptions {
   /**
    * A list of HTML attributes to be rendered.
    */
-  HTMLAttributes: Record<string, any>;
+  HTMLAttributes: Record<string, unknown>;
   /**
    * A validation function that modifies link verification for the auto linker.
    * @param url - The url to be validated.
    * @returns - True if the url is valid, false otherwise.
    */
   validate?: (url: string) => boolean;
-}
+};
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {

packages/editor/src/core/extensions/emoji/components/emojis-list.tsx

@@ -1,28 +1,17 @@
 import { computePosition, flip, shift } from "@floating-ui/dom";
-import { Editor, posToDOMRect } from "@tiptap/react";
+import { type Editor, posToDOMRect } from "@tiptap/react";
 import { SuggestionKeyDownProps } from "@tiptap/suggestion";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 
-export interface EmojiItem {
+export type EmojiItem = {
   name: string;
   emoji: string;
   shortcodes: string[];
   tags: string[];
   fallbackImage?: string;
-}
-
-export interface EmojiListProps {
-  items: EmojiItem[];
-  command: (item: { name: string }) => void;
-  editor: Editor;
-  query: string;
-}
-
-export interface EmojiListRef {
-  onKeyDown: (props: SuggestionKeyDownProps) => boolean;
-}
+};
 
 const updatePosition = (editor: Editor, element: HTMLElement) => {
   const virtualElement = {
@@ -43,7 +32,18 @@ const updatePosition = (editor: Editor, element: HTMLElement) => {
   });
 };
 
-export const EmojiList = forwardRef<EmojiListRef, EmojiListProps>((props, ref) => {
+export type EmojiListRef = {
+  onKeyDown: (props: SuggestionKeyDownProps) => boolean;
+};
+
+type Props = {
+  items: EmojiItem[];
+  command: (item: { name: string }) => void;
+  editor: Editor;
+  query: string;
+};
+
+export const EmojiList = forwardRef<EmojiListRef, Props>((props, ref) => {
   const { items, command, editor, query } = props;
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
   const [isVisible, setIsVisible] = useState(false);

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

@@ -65,11 +65,11 @@ export type EmojiItem = {
   /**
    * Store some custom data
    */
-  [key: string]: any;
+  [key: string]: unknown;
 };
 
 export type EmojiOptions = {
-  HTMLAttributes: Record<string, any>;
+  HTMLAttributes: Record<string, unknown>;
   emojis: EmojiItem[];
   enableEmoticons: boolean;
   forceFallbackImages: boolean;

packages/editor/src/core/extensions/headings-list.ts

@@ -2,13 +2,8 @@ import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
-
-export interface IMarking {
-  type: "heading";
-  level: number;
-  text: string;
-  sequence: number;
-}
+// types
+import type { IMarking } from "@/types";
 
 export type HeadingExtensionStorage = {
   headings: IMarking[];

packages/editor/src/core/extensions/horizontal-rule.ts

@@ -3,9 +3,9 @@ import { NodeSelection, TextSelection } from "@tiptap/pm/state";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 
-export interface HorizontalRuleOptions {
-  HTMLAttributes: Record<string, any>;
-}
+type HorizontalRuleOptions = {
+  HTMLAttributes: Record<string, unknown>;
+};
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {

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

@@ -9,9 +9,9 @@ import { TableCellSelectionOutlinePlugin } from "./plugins/selection-outline/plu
 import { DEFAULT_COLUMN_WIDTH } from "./table";
 import { isCellSelection } from "./table/utilities/helpers";
 
-export interface TableCellOptions {
-  HTMLAttributes: Record<string, any>;
-}
+type TableCellOptions = {
+  HTMLAttributes: Record<string, unknown>;
+};
 
 export const TableCell = Node.create<TableCellOptions>({
   name: CORE_EXTENSIONS.TABLE_CELL,

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

@@ -4,9 +4,9 @@ import { CORE_EXTENSIONS } from "@/constants/extension";
 // local imports
 import { DEFAULT_COLUMN_WIDTH } from "./table";
 
-export interface TableHeaderOptions {
-  HTMLAttributes: Record<string, any>;
-}
+type TableHeaderOptions = {
+  HTMLAttributes: Record<string, unknown>;
+};
 
 export const TableHeader = Node.create<TableHeaderOptions>({
   name: CORE_EXTENSIONS.TABLE_HEADER,

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

@@ -2,9 +2,9 @@ import { mergeAttributes, Node } from "@tiptap/core";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 
-export interface TableRowOptions {
-  HTMLAttributes: Record<string, any>;
-}
+type TableRowOptions = {
+  HTMLAttributes: Record<string, unknown>;
+};
 
 export const TableRow = Node.create<TableRowOptions>({
   name: CORE_EXTENSIONS.TABLE_ROW,

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

@@ -32,14 +32,14 @@ import { insertLineAboveTableAction } from "./utilities/insert-line-above-table-
 import { insertLineBelowTableAction } from "./utilities/insert-line-below-table-action";
 import { DEFAULT_COLUMN_WIDTH } from ".";
 
-export interface TableOptions {
-  HTMLAttributes: Record<string, any>;
+type TableOptions = {
+  HTMLAttributes: Record<string, unknown>;
   resizable: boolean;
   handleWidth: number;
   cellMinWidth: number;
   lastColumnResizable: boolean;
   allowTableNodeSelection: boolean;
-}
+};
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {