Enable eslint rule to improve imports (#2105)

* Enable eslint rule to force import type

* Clear duplicated imports

.eslintrc.js

@@ -22,9 +22,15 @@ module.exports = {
         project: 'tsconfig.json',
         sourceType: 'module',
     },
-    plugins: ['eslint-plugin-react', '@typescript-eslint', '@typescript-eslint/tslint'],
+    plugins: [
+        'eslint-plugin-react',
+        '@typescript-eslint',
+        '@typescript-eslint/tslint',
+        'eslint-plugin-import',
+    ],
     root: true,
     rules: {
+        '@typescript-eslint/consistent-type-imports': ['error', { disallowTypeAnnotations: false }],
         '@typescript-eslint/dot-notation': 'error',
         '@typescript-eslint/explicit-function-return-type': 'off',
         '@typescript-eslint/explicit-module-boundary-types': 'off',
@@ -139,5 +145,6 @@ module.exports = {
                 },
             },
         ],
+        'import/no-duplicates': 'error',
     },
 };

package.json

@@ -57,6 +57,7 @@
         "dompurify": "2.3.0",
         "eslint": "^8.50.0",
         "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-import": "2.28.1",
         "glob": "7.1.6",
         "husky": "^4.2.5",
         "jasmine-core": "3.5.0",

packages-content-model/roosterjs-content-model-dom/lib/config/defaultContentModelFormatMap.ts

@@ -1,4 +1,4 @@
-import { DefaultImplicitFormatMap } from 'roosterjs-content-model-types';
+import type { DefaultImplicitFormatMap } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/config/defaultHTMLStyleMap.ts

@@ -1,4 +1,4 @@
-import { DefaultStyleMap } from 'roosterjs-content-model-types';
+import type { DefaultStyleMap } from 'roosterjs-content-model-types';
 
 const blockElement: Partial<CSSStyleDeclaration> = {
     display: 'block',

packages-content-model/roosterjs-content-model-dom/lib/domToModel/context/createDomToModelContext.ts

@@ -4,7 +4,7 @@ import {
     defaultFormatKeysPerCategory,
     defaultFormatParsers,
 } from '../../formatHandlers/defaultFormatHandlers';
-import {
+import type {
     ContentModelBlockFormat,
     DomToModelContext,
     DomToModelDecoratorContext,

packages-content-model/roosterjs-content-model-dom/lib/domToModel/context/defaultProcessors.ts

@@ -3,7 +3,6 @@ import { childProcessor } from '../processors/childProcessor';
 import { codeProcessor } from '../processors/codeProcessor';
 import { delimiterProcessor } from '../processors/delimiterProcessor';
 import { elementProcessor } from '../processors/elementProcessor';
-import { ElementProcessorMap } from 'roosterjs-content-model-types';
 import { entityProcessor } from '../processors/entityProcessor';
 import { fontProcessor } from '../processors/fontProcessor';
 import { formatContainerProcessor } from '../processors/formatContainerProcessor';
@@ -18,6 +17,7 @@ import { listProcessor } from '../processors/listProcessor';
 import { pProcessor } from '../processors/pProcessor';
 import { tableProcessor } from '../processors/tableProcessor';
 import { textProcessor } from '../processors/textProcessor';
+import type { ElementProcessorMap } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/domToContentModel.ts

@@ -1,7 +1,7 @@
-import { ContentModelDocument, DomToModelContext } from 'roosterjs-content-model-types';
 import { createContentModelDocument } from '../modelApi/creators/createContentModelDocument';
 import { normalizeContentModel } from '../modelApi/common/normalizeContentModel';
-import { SelectionRangeEx } from 'roosterjs-editor-types';
+import type { ContentModelDocument, DomToModelContext } from 'roosterjs-content-model-types';
+import type { SelectionRangeEx } from 'roosterjs-editor-types';
 
 /**
  * Create Content Model from DOM tree in this editor

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/blockProcessor.ts

@@ -2,7 +2,7 @@ import { addBlock } from '../../modelApi/common/addBlock';
 import { ContextStyles } from './formatContainerProcessor';
 import { createParagraph } from '../../modelApi/creators/createParagraph';
 import { parseFormat } from '../utils/parseFormat';
-import {
+import type {
     ContentModelBlockGroup,
     ContentModelSegmentFormat,
     DomToModelContext,

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/brProcessor.ts

@@ -1,6 +1,6 @@
 import { addSegment } from '../../modelApi/common/addSegment';
 import { createBr } from '../../modelApi/creators/createBr';
-import { ElementProcessor } from 'roosterjs-content-model-types';
+import type { ElementProcessor } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/childProcessor.ts

@@ -2,7 +2,7 @@ import { addSelectionMarker } from '../utils/addSelectionMarker';
 import { getRegularSelectionOffsets } from '../utils/getRegularSelectionOffsets';
 import { isNodeOfType } from '../../domUtils/isNodeOfType';
 import { SelectionRangeTypes } from 'roosterjs-editor-types';
-import {
+import type {
     ContentModelBlockGroup,
     DomToModelContext,
     ElementProcessor,

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/codeProcessor.ts

@@ -1,7 +1,7 @@
-import { ElementProcessor } from 'roosterjs-content-model-types';
 import { knownElementProcessor } from './knownElementProcessor';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
+import type { ElementProcessor } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/delimiterProcessor.ts

@@ -1,6 +1,6 @@
-import { ElementProcessor } from 'roosterjs-content-model-types';
 import { getRegularSelectionOffsets } from '../utils/getRegularSelectionOffsets';
 import { handleRegularSelection } from './childProcessor';
+import type { ElementProcessor } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/elementProcessor.ts

@@ -1,5 +1,5 @@
 import { getDelimiterFromElement, getEntityFromElement } from 'roosterjs-editor-dom';
-import {
+import type {
     DomToModelContext,
     ElementProcessor,
     ElementProcessorMap,

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/entityProcessor.ts

@@ -1,10 +1,10 @@
 import { addBlock } from '../../modelApi/common/addBlock';
 import { addSegment } from '../../modelApi/common/addSegment';
 import { createEntity } from '../../modelApi/creators/createEntity';
-import { ElementProcessor } from 'roosterjs-content-model-types';
 import { getEntityFromElement } from 'roosterjs-editor-dom';
 import { isBlockElement } from '../utils/isBlockElement';
 import { stackFormat } from '../utils/stackFormat';
+import type { ElementProcessor } from 'roosterjs-content-model-types';
 
 /**
  * Content Model Element Processor for entity

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/fontProcessor.ts

@@ -1,7 +1,7 @@
-import { ElementProcessor } from 'roosterjs-content-model-types';
 import { isBlockElement } from '../utils/isBlockElement';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
+import type { ElementProcessor } from 'roosterjs-content-model-types';
 
 const FontSizes = ['10px', '13px', '16px', '18px', '24px', '32px', '48px'];
 

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/formatContainerProcessor.ts

@@ -5,7 +5,7 @@ import { getDefaultStyle } from '../utils/getDefaultStyle';
 import { parseFormat } from '../utils/parseFormat';
 import { setParagraphNotImplicit } from '../../modelApi/block/setParagraphNotImplicit';
 import { stackFormat } from '../utils/stackFormat';
-import {
+import type {
     ContentModelFormatContainer,
     ContentModelFormatContainerFormat,
     ContentModelParagraph,

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/generalProcessor.ts

@@ -3,9 +3,9 @@ import { addDecorators } from '../../modelApi/common/addDecorators';
 import { addSegment } from '../../modelApi/common/addSegment';
 import { createGeneralBlock } from '../../modelApi/creators/createGeneralBlock';
 import { createGeneralSegment } from '../../modelApi/creators/createGeneralSegment';
-import { ElementProcessor } from 'roosterjs-content-model-types';
 import { isBlockElement } from '../utils/isBlockElement';
 import { stackFormat } from '../utils/stackFormat';
+import type { ElementProcessor } from 'roosterjs-content-model-types';
 
 const generalBlockProcessor: ElementProcessor<HTMLElement> = (group, element, context) => {
     const block = createGeneralBlock(element);

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/headingProcessor.ts

@@ -1,11 +1,11 @@
 import { addBlock } from '../../modelApi/common/addBlock';
 import { blockProcessor } from './blockProcessor';
-import { ContentModelSegmentFormat, ElementProcessor } from 'roosterjs-content-model-types';
 import { createParagraph } from '../../modelApi/creators/createParagraph';
 import { createParagraphDecorator } from '../../modelApi/creators/createParagraphDecorator';
 import { getObjectKeys } from 'roosterjs-editor-dom';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
+import type { ContentModelSegmentFormat, ElementProcessor } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/hrProcessor.ts

@@ -1,8 +1,8 @@
 import { addBlock } from '../../modelApi/common/addBlock';
 import { createDivider } from '../../modelApi/creators/createDivider';
-import { ElementProcessor } from 'roosterjs-content-model-types';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
+import type { ElementProcessor } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/imageProcessor.ts

@@ -1,10 +1,10 @@
 import { addDecorators } from '../../modelApi/common/addDecorators';
 import { addSegment } from '../../modelApi/common/addSegment';
-import { ContentModelImageFormat, ElementProcessor } from 'roosterjs-content-model-types';
 import { createImage } from '../../modelApi/creators/createImage';
 import { parseFormat } from '../utils/parseFormat';
 import { SelectionRangeTypes } from 'roosterjs-editor-types';
 import { stackFormat } from '../utils/stackFormat';
+import type { ContentModelImageFormat, ElementProcessor } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/knownElementProcessor.ts

@@ -6,7 +6,7 @@ import { getDefaultStyle } from '../utils/getDefaultStyle';
 import { isBlockElement } from '../utils/isBlockElement';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
-import {
+import type {
     ContentModelSegmentFormat,
     DomToModelContext,
     ElementProcessor,

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/linkProcessor.ts

@@ -1,7 +1,7 @@
-import { ElementProcessor } from 'roosterjs-content-model-types';
 import { knownElementProcessor } from './knownElementProcessor';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
+import type { ElementProcessor } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/listItemProcessor.ts

@@ -1,7 +1,7 @@
 import { createListItem } from '../../modelApi/creators/createListItem';
-import { ElementProcessor } from 'roosterjs-content-model-types';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
+import type { ElementProcessor } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/listProcessor.ts

@@ -1,9 +1,9 @@
-import { ContentModelListLevel, ElementProcessor } from 'roosterjs-content-model-types';
 import { createListLevel } from '../../modelApi/creators/createListLevel';
 import { listLevelMetadataFormatHandler } from '../../formatHandlers/list/listLevelMetadataFormatHandler';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
 import { updateListMetadata } from '../../domUtils/metadata/updateListMetadata';
+import type { ContentModelListLevel, ElementProcessor } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/pProcessor.ts

@@ -1,10 +1,10 @@
 import { addBlock } from '../../modelApi/common/addBlock';
 import { blockProcessor } from './blockProcessor';
-import { ContentModelSegmentFormat, ElementProcessor } from 'roosterjs-content-model-types';
 import { createParagraph } from '../../modelApi/creators/createParagraph';
 import { createParagraphDecorator } from '../../modelApi/creators/createParagraphDecorator';
 import { parseFormat } from '../utils/parseFormat';
 import { stackFormat } from '../utils/stackFormat';
+import type { ContentModelSegmentFormat, ElementProcessor } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/tableProcessor.ts

@@ -6,7 +6,7 @@ import { parseFormat } from '../utils/parseFormat';
 import { safeInstanceOf } from 'roosterjs-editor-dom';
 import { SelectionRangeTypes } from 'roosterjs-editor-types';
 import { stackFormat } from '../utils/stackFormat';
-import {
+import type {
     ContentModelTableCellFormat,
     DatasetFormat,
     ElementProcessor,

packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/textProcessor.ts

@@ -5,7 +5,7 @@ import { createText } from '../../modelApi/creators/createText';
 import { ensureParagraph } from '../../modelApi/common/ensureParagraph';
 import { getRegularSelectionOffsets } from '../utils/getRegularSelectionOffsets';
 import { hasSpacesOnly } from '../../modelApi/common/hasSpacesOnly';
-import {
+import type {
     ContentModelBlockGroup,
     ContentModelParagraph,
     ContentModelText,

packages-content-model/roosterjs-content-model-dom/lib/domToModel/utils/addSelectionMarker.ts

@@ -1,7 +1,7 @@
 import { addDecorators } from '../../modelApi/common/addDecorators';
 import { addSegment } from '../../modelApi/common/addSegment';
-import { ContentModelBlockGroup, DomToModelContext } from 'roosterjs-content-model-types';
 import { createSelectionMarker } from '../../modelApi/creators/createSelectionMarker';
+import type { ContentModelBlockGroup, DomToModelContext } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/utils/areSameFormats.ts

@@ -1,5 +1,5 @@
-import { ContentModelFormatBase } from 'roosterjs-content-model-types';
 import { getObjectKeys } from 'roosterjs-editor-dom';
+import type { ContentModelFormatBase } from 'roosterjs-content-model-types';
 
 /**
  * Check if the two given formats object are equal. This is a check to value but not to reference

packages-content-model/roosterjs-content-model-dom/lib/domToModel/utils/getDefaultStyle.ts

@@ -1,5 +1,5 @@
 import { defaultHTMLStyleMap } from '../../config/defaultHTMLStyleMap';
-import { DefaultStyleMap, DomToModelContext } from 'roosterjs-content-model-types';
+import type { DefaultStyleMap, DomToModelContext } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/domToModel/utils/getRegularSelectionOffsets.ts

@@ -1,5 +1,5 @@
-import { DomToModelContext } from 'roosterjs-content-model-types';
 import { SelectionRangeTypes } from 'roosterjs-editor-types';
+import type { DomToModelContext } from 'roosterjs-content-model-types';
 
 /**
  * Get offset numbers of a regular (range based) selection.

packages-content-model/roosterjs-content-model-dom/lib/domToModel/utils/isBlockElement.ts

@@ -1,5 +1,5 @@
-import { DomToModelContext } from 'roosterjs-content-model-types';
 import { getDefaultStyle } from './getDefaultStyle';
+import type { DomToModelContext } from 'roosterjs-content-model-types';
 
 const BLOCK_DISPLAY_STYLES = ['block', 'list-item', 'table', 'table-cell', 'flex'];
 

packages-content-model/roosterjs-content-model-dom/lib/domToModel/utils/parseFormat.ts

@@ -1,5 +1,5 @@
 import { getDefaultStyle } from './getDefaultStyle';
-import {
+import type {
     ContentModelFormatBase,
     DomToModelContext,
     FormatParser,

packages-content-model/roosterjs-content-model-dom/lib/domToModel/utils/stackFormat.ts

@@ -1,5 +1,5 @@
 import { getObjectKeys } from 'roosterjs-editor-dom';
-import {
+import type {
     ContentModelBlockFormat,
     ContentModelCode,
     ContentModelFormatBase,

packages-content-model/roosterjs-content-model-dom/lib/domUtils/metadata/updateListMetadata.ts

@@ -1,7 +1,7 @@
 import { BulletListType, NumberingListType } from 'roosterjs-editor-types';
-import { ContentModelWithDataset, ListMetadataFormat } from 'roosterjs-content-model-types';
 import { createNumberDefinition, createObjectDefinition } from 'roosterjs-editor-dom';
 import { updateMetadata } from './updateMetadata';
+import type { ContentModelWithDataset, ListMetadataFormat } from 'roosterjs-content-model-types';
 
 const ListStyleDefinitionMetadata = createObjectDefinition<ListMetadataFormat>(
     {

packages-content-model/roosterjs-content-model-dom/lib/domUtils/metadata/updateMetadata.ts

@@ -1,6 +1,6 @@
-import { ContentModelWithDataset } from 'roosterjs-content-model-types';
-import { Definition } from 'roosterjs-editor-types';
 import { validate } from 'roosterjs-editor-dom';
+import type { ContentModelWithDataset } from 'roosterjs-content-model-types';
+import type { Definition } from 'roosterjs-editor-types';
 
 const EditingInfoDatasetName = 'editingInfo';
 

packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/FormatHandler.ts

@@ -1,4 +1,8 @@
-import { ContentModelFormatBase, FormatApplier, FormatParser } from 'roosterjs-content-model-types';
+import type {
+    ContentModelFormatBase,
+    FormatApplier,
+    FormatParser,
+} from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/block/directionFormatHandler.ts

@@ -1,5 +1,5 @@
-import { DirectionFormat } from 'roosterjs-content-model-types';
-import { FormatHandler } from '../FormatHandler';
+import type { DirectionFormat } from 'roosterjs-content-model-types';
+import type { FormatHandler } from '../FormatHandler';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/block/displayFormatHandler.ts

@@ -1,5 +1,5 @@
-import { DisplayFormat } from 'roosterjs-content-model-types';
-import { FormatHandler } from '../FormatHandler';
+import type { DisplayFormat } from 'roosterjs-content-model-types';
+import type { FormatHandler } from '../FormatHandler';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/block/htmlAlignFormatHandler.ts

@@ -1,7 +1,11 @@
 import { calcAlign, ResultMap } from '../utils/dir';
-import { DirectionFormat, HtmlAlignFormat, TextAlignFormat } from 'roosterjs-content-model-types';
 import { directionFormatHandler } from './directionFormatHandler';
-import { FormatHandler } from '../FormatHandler';
+import type {
+    DirectionFormat,
+    HtmlAlignFormat,
+    TextAlignFormat,
+} from 'roosterjs-content-model-types';
+import type { FormatHandler } from '../FormatHandler';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/block/lineHeightFormatHandler.ts

@@ -1,5 +1,5 @@
-import { FormatHandler } from '../FormatHandler';
-import { LineHeightFormat } from 'roosterjs-content-model-types';
+import type { FormatHandler } from '../FormatHandler';
+import type { LineHeightFormat } from 'roosterjs-content-model-types';
 
 /**
  * @internal

packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/block/marginFormatHandler.ts

@@ -1,6 +1,6 @@
-import { FormatHandler } from '../FormatHandler';
-import { MarginFormat } from 'roosterjs-content-model-types';
 import { parseValueWithUnit } from '../utils/parseValueWithUnit';
+import type { FormatHandler } from '../FormatHandler';
+import type { MarginFormat } from 'roosterjs-content-model-types';
 
 const MarginKeys: (keyof MarginFormat & keyof CSSStyleDeclaration)[] = [
     'marginTop',