Split Content Model code (step 1) (#1905)

* Split Content Model

* fix build (in progress)

* fix build

* add comments

* add comment

* fix build and test

* fix build system

* Improve

demo/scripts/controls/ContentModelEditorMainPane.tsx

@@ -14,7 +14,7 @@ import SidePane from './sidePane/SidePane';
 import SnapshotPlugin from './sidePane/snapshot/SnapshotPlugin';
 import TitleBar from './titleBar/TitleBar';
 import { arrayPush } from 'roosterjs-editor-dom';
-import { ContentModelEditor } from 'roosterjs-content-model';
+import { ContentModelEditor } from 'roosterjs-content-model-editor';
 import { ContentModelRibbonPlugin } from './ribbonButtons/contentModel/ContentModelRibbonPlugin';
 import { EditorOptions, EditorPlugin } from 'roosterjs-editor-types';
 import { PartialTheme } from '@fluentui/react/lib/Theme';

demo/scripts/controls/contentModel/components/ContentModelView.tsx

@@ -10,7 +10,7 @@ import {
     ContentModelGeneralBlock,
     ContentModelWithDataset,
     DatasetFormat,
-} from 'roosterjs-content-model';
+} from 'roosterjs-content-model-types';
 
 const styles = require('./ContentModelView.scss');
 const MetadataKey = 'editingInfo';

demo/scripts/controls/contentModel/components/format/BlockFormatView.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BackgroundColorFormatRenderer } from './formatPart/BackgroundColorFormatRenderer';
 import { BorderFormatRenderers } from './formatPart/BorderFormatRenderers';
-import { ContentModelBlockFormat, ContentModelSegmentFormat } from 'roosterjs-content-model';
+import { ContentModelBlockFormat, ContentModelSegmentFormat } from 'roosterjs-content-model-types';
 import { DirectionFormatRenderer } from './formatPart/DirectionFormatRenderer';
 import { FormatRenderer } from './utils/FormatRenderer';
 import { FormatView } from './FormatView';

demo/scripts/controls/contentModel/components/format/LinkFormatView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContentModelHyperLinkFormat, LinkFormat } from 'roosterjs-content-model';
+import { ContentModelHyperLinkFormat, LinkFormat } from 'roosterjs-content-model-types';
 import { createTextFormatRenderer } from './utils/createTextFormatRenderer';
 import { DisplayFormatRenderer } from './formatPart/DisplayFormatRenderer';
 import { FormatRenderer } from './utils/FormatRenderer';

demo/scripts/controls/contentModel/components/format/MetadataView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContentModelWithDataset } from 'roosterjs-content-model';
+import { ContentModelWithDataset } from 'roosterjs-content-model-types';
 import { FormatRenderer } from './utils/FormatRenderer';
 
 const styles = require('./FormatView.scss');

demo/scripts/controls/contentModel/components/format/SegmentFormatView.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BackgroundColorFormatRenderer } from './formatPart/BackgroundColorFormatRenderer';
-import { ContentModelSegmentFormat } from 'roosterjs-content-model';
+import { ContentModelSegmentFormat } from 'roosterjs-content-model-types';
 import { FontFamilyFormatRenderer } from './formatPart/FontFamilyFormatRenderer';
 import { FontSizeFormatRenderer } from './formatPart/FontSizeFormatRenderer';
 import { FormatRenderer } from './utils/FormatRenderer';

demo/scripts/controls/contentModel/components/format/formatPart/BackgroundColorFormatRenderer.ts

@@ -1,4 +1,4 @@
-import { BackgroundColorFormat } from 'roosterjs-content-model';
+import { BackgroundColorFormat } from 'roosterjs-content-model-types';
 import { createColorFormatRenderer } from '../utils/createColorFormatRender';
 import { FormatRenderer } from '../utils/FormatRenderer';
 

demo/scripts/controls/contentModel/components/format/formatPart/BasicFormatRenderers.ts

@@ -7,7 +7,7 @@ import {
     StrikeFormat,
     SuperOrSubScriptFormat,
     UnderlineFormat,
-} from 'roosterjs-content-model';
+} from 'roosterjs-content-model-types';
 
 export const BoldFormatRenderer: FormatRenderer<BoldFormat> = createTextFormatRenderer<BoldFormat>(
     'Bold',

demo/scripts/controls/contentModel/components/format/formatPart/BorderBoxFormatRenderer.ts

@@ -1,4 +1,4 @@
-import { BorderBoxFormat } from 'roosterjs-content-model';
+import { BorderBoxFormat } from 'roosterjs-content-model-types';
 import { createCheckboxFormatRenderer } from '../utils/createCheckboxFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
 

demo/scripts/controls/contentModel/components/format/formatPart/BorderFormatRenderers.ts

@@ -1,7 +1,8 @@
-import { BorderFormat, combineBorderValue, extractBorderValues } from 'roosterjs-content-model';
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
+import { BorderFormat } from 'roosterjs-content-model-types';
+import { combineBorderValue, extractBorderValues } from 'roosterjs-content-model-editor';
 
 type BorderStyle =
     | 'dashed'

demo/scripts/controls/contentModel/components/format/formatPart/DirectionFormatRenderer.ts

@@ -1,5 +1,5 @@
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
-import { DirectionFormat } from 'roosterjs-content-model';
+import { DirectionFormat } from 'roosterjs-content-model-types';
 
 export const DirectionFormatRenderer = createDropDownFormatRenderer<DirectionFormat, 'ltr' | 'rtl'>(
     'Direction',

demo/scripts/controls/contentModel/components/format/formatPart/DisplayFormatRenderer.ts

@@ -1,5 +1,5 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
-import { DisplayFormat } from 'roosterjs-content-model';
+import { DisplayFormat } from 'roosterjs-content-model-types';
 import { FormatRenderer } from '../utils/FormatRenderer';
 
 export const DisplayFormatRenderer: FormatRenderer<DisplayFormat> = createTextFormatRenderer<

demo/scripts/controls/contentModel/components/format/formatPart/FontFamilyFormatRenderer.ts

@@ -1,5 +1,5 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
-import { FontFamilyFormat } from 'roosterjs-content-model';
+import { FontFamilyFormat } from 'roosterjs-content-model-types';
 import { FormatRenderer } from '../utils/FormatRenderer';
 
 export const FontFamilyFormatRenderer: FormatRenderer<FontFamilyFormat> = createTextFormatRenderer<

demo/scripts/controls/contentModel/components/format/formatPart/FontSizeFormatRenderer.ts

@@ -1,5 +1,5 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
-import { FontSizeFormat } from 'roosterjs-content-model';
+import { FontSizeFormat } from 'roosterjs-content-model-types';
 import { FormatRenderer } from '../utils/FormatRenderer';
 
 export const FontSizeFormatRenderer: FormatRenderer<FontSizeFormat> = createTextFormatRenderer<

demo/scripts/controls/contentModel/components/format/formatPart/HtmlAlignFormatRenderer.ts

@@ -1,5 +1,5 @@
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
-import { HtmlAlignFormat } from 'roosterjs-content-model';
+import { HtmlAlignFormat } from 'roosterjs-content-model-types';
 
 export const HtmlAlignFormatRenderer = createDropDownFormatRenderer<
     HtmlAlignFormat,

demo/scripts/controls/contentModel/components/format/formatPart/IdFormatRenderer.ts

@@ -1,6 +1,6 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { IdFormat } from 'roosterjs-content-model';
+import { IdFormat } from 'roosterjs-content-model-types';
 
 export const IdFormatRenderer: FormatRenderer<IdFormat> = createTextFormatRenderer<IdFormat>(
     'Id',

demo/scripts/controls/contentModel/components/format/formatPart/ImageMetadataFormatRenderers.ts

@@ -1,6 +1,6 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { ImageMetadataFormat } from 'roosterjs-content-model';
+import { ImageMetadataFormat } from 'roosterjs-content-model-types';
 
 export const ImageMetadataFormatRenderers: FormatRenderer<ImageMetadataFormat>[] = [
     createTextFormatRenderer<ImageMetadataFormat>(

demo/scripts/controls/contentModel/components/format/formatPart/LetterSpacingFormatRenderer.ts

@@ -1,6 +1,6 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { LetterSpacingFormat } from 'roosterjs-content-model';
+import { LetterSpacingFormat } from 'roosterjs-content-model-types';
 
 export const LetterSpacingFormatRenderer: FormatRenderer<LetterSpacingFormat> = createTextFormatRenderer<
     LetterSpacingFormat

demo/scripts/controls/contentModel/components/format/formatPart/LineHeightFormatRenderer.ts

@@ -1,6 +1,6 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { LineHeightFormat } from 'roosterjs-content-model';
+import { LineHeightFormat } from 'roosterjs-content-model-types';
 
 export const LineHeightFormatRenderer: FormatRenderer<LineHeightFormat> = createTextFormatRenderer<
     LineHeightFormat

demo/scripts/controls/contentModel/components/format/formatPart/ListMetadataFormatRenderers.ts

@@ -1,6 +1,6 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { ListMetadataFormat } from 'roosterjs-content-model';
+import { ListMetadataFormat } from 'roosterjs-content-model-types';
 
 export const ListMetadataFormatRenderers: FormatRenderer<ListMetadataFormat>[] = [
     createTextFormatRenderer(

demo/scripts/controls/contentModel/components/format/formatPart/ListStylePositionFormatRenderer.ts

@@ -1,6 +1,6 @@
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { ListStylePositionFormat } from 'roosterjs-content-model';
+import { ListStylePositionFormat } from 'roosterjs-content-model-types';
 
 export const ListStylePositionFormatRenderer: FormatRenderer<ListStylePositionFormat> = createDropDownFormatRenderer(
     'List Type',

demo/scripts/controls/contentModel/components/format/formatPart/ListThreadFormatRenderer.ts

@@ -1,6 +1,6 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { ListThreadFormat } from 'roosterjs-content-model';
+import { ListThreadFormat } from 'roosterjs-content-model-types';
 
 export const ListThreadFormatRenderers: FormatRenderer<ListThreadFormat>[] = [
     createTextFormatRenderer(

demo/scripts/controls/contentModel/components/format/formatPart/ListTypeFormatRenderer.ts

@@ -1,6 +1,6 @@
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { ListTypeFormat } from 'roosterjs-content-model';
+import { ListTypeFormat } from 'roosterjs-content-model-types';
 
 export const ListTypeFormatRenderer: FormatRenderer<ListTypeFormat> = createDropDownFormatRenderer(
     'List Type',

demo/scripts/controls/contentModel/components/format/formatPart/MarginFormatRenderer.ts

@@ -1,6 +1,6 @@
 import { createTextFormatRendererGroup } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { MarginFormat } from 'roosterjs-content-model';
+import { MarginFormat } from 'roosterjs-content-model-types';
 
 type MarginName = keyof MarginFormat;
 const MarginNames: MarginName[] = ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'];

demo/scripts/controls/contentModel/components/format/formatPart/PaddingFormatRenderer.ts

@@ -1,6 +1,6 @@
 import { createTextFormatRendererGroup } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { PaddingFormat } from 'roosterjs-content-model';
+import { PaddingFormat } from 'roosterjs-content-model-types';
 
 type PaddingName = keyof PaddingFormat;
 const PaddingNames: PaddingName[] = ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'];

demo/scripts/controls/contentModel/components/format/formatPart/SizeFormatRenderers.ts

@@ -1,6 +1,6 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { SizeFormat } from 'roosterjs-content-model';
+import { SizeFormat } from 'roosterjs-content-model-types';
 
 export const SizeFormatRenderers: FormatRenderer<SizeFormat>[] = [
     createTextFormatRenderer<SizeFormat>(

demo/scripts/controls/contentModel/components/format/formatPart/SpacingFormatRenderer.ts

@@ -1,5 +1,5 @@
 import { createCheckboxFormatRenderer } from '../utils/createCheckboxFormatRenderer';
-import { SpacingFormat } from 'roosterjs-content-model';
+import { SpacingFormat } from 'roosterjs-content-model-types';
 
 export const SpacingFormatRenderer = createCheckboxFormatRenderer<SpacingFormat>(
     'BorderCollapsed',

demo/scripts/controls/contentModel/components/format/formatPart/TableLayoutFormatRenderer.ts

@@ -1,6 +1,6 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { TableLayoutFormat } from 'roosterjs-content-model';
+import { TableLayoutFormat } from 'roosterjs-content-model-types';
 
 export const TableLayoutFormatRenderer: FormatRenderer<TableLayoutFormat> = createTextFormatRenderer<
     TableLayoutFormat

demo/scripts/controls/contentModel/components/format/formatPart/TableMetadataFormatRenders.ts

@@ -3,7 +3,7 @@ import { createCheckboxFormatRenderer } from '../utils/createCheckboxFormatRende
 import { createColorFormatRenderer } from '../utils/createColorFormatRender';
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { TableMetadataFormat } from 'roosterjs-content-model';
+import { TableMetadataFormat } from 'roosterjs-content-model-types';
 
 export const TableMetadataFormatRenders: FormatRenderer<TableMetadataFormat>[] = [
     createColorFormatRenderer<TableMetadataFormat>(

demo/scripts/controls/contentModel/components/format/formatPart/TextAlignFormatRenderer.ts

@@ -1,5 +1,5 @@
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
-import { TextAlignFormat } from 'roosterjs-content-model';
+import { TextAlignFormat } from 'roosterjs-content-model-types';
 
 export const TextAlignFormatRenderer = createDropDownFormatRenderer<
     TextAlignFormat,

demo/scripts/controls/contentModel/components/format/formatPart/TextColorFormatRenderer.ts

@@ -1,7 +1,7 @@
 import * as Color from 'color';
 import { createColorFormatRenderer } from '../utils/createColorFormatRender';
 import { FormatRenderer } from '../utils/FormatRenderer';
-import { TextColorFormat } from 'roosterjs-content-model';
+import { TextColorFormat } from 'roosterjs-content-model-types';
 
 export const TextColorFormatRenderer: FormatRenderer<TextColorFormat> = createColorFormatRenderer<
     TextColorFormat

demo/scripts/controls/contentModel/components/format/formatPart/VerticalAlignFormatRenderer.ts

@@ -1,5 +1,5 @@
 import { createDropDownFormatRenderer } from '../utils/createDropDownFormatRenderer';
-import { VerticalAlignFormat } from 'roosterjs-content-model';
+import { VerticalAlignFormat } from 'roosterjs-content-model-types';
 
 export const VerticalAlignFormatRenderer = createDropDownFormatRenderer<
     VerticalAlignFormat,

demo/scripts/controls/contentModel/components/format/formatPart/WhiteSpaceFormatRenderer.ts

@@ -1,5 +1,5 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
-import { WhiteSpaceFormat } from 'roosterjs-content-model';
+import { WhiteSpaceFormat } from 'roosterjs-content-model-types';
 
 export const WhiteSpaceFormatRenderer = createTextFormatRenderer<WhiteSpaceFormat>(
     'White space',

demo/scripts/controls/contentModel/components/format/formatPart/WordBreakFormatRenderer.ts

@@ -1,5 +1,5 @@
 import { createTextFormatRenderer } from '../utils/createTextFormatRenderer';
-import { WordBreakFormat } from 'roosterjs-content-model';
+import { WordBreakFormat } from 'roosterjs-content-model-types';
 
 export const WordBreakFormatRenderer = createTextFormatRenderer<WordBreakFormat>(
     'Word break',

demo/scripts/controls/contentModel/components/model/BlockGroupContentView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContentModelBlockGroup } from 'roosterjs-content-model';
+import { ContentModelBlockGroup } from 'roosterjs-content-model-types';
 import { ContentModelBlockView } from './ContentModelBlockView';
 
 export function BlockGroupContentView(props: { group: ContentModelBlockGroup }) {

demo/scripts/controls/contentModel/components/model/ContentModelBlockGroupView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContentModelBlockGroup } from 'roosterjs-content-model';
+import { ContentModelBlockGroup } from 'roosterjs-content-model-types';
 import { ContentModelDocumentView } from './ContentModelDocumentView';
 import { ContentModelFormatContainerView } from './ContentModelFormatContainerView';
 import { ContentModelGeneralView } from './ContentModelGeneralView';

demo/scripts/controls/contentModel/components/model/ContentModelBlockView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContentModelBlock } from 'roosterjs-content-model';
+import { ContentModelBlock } from 'roosterjs-content-model-types';
 import { ContentModelBlockGroupView } from './ContentModelBlockGroupView';
 import { ContentModelDividerView } from './ContentModelDividerView';
 import { ContentModelEntityView } from './ContentModelEntityView';

demo/scripts/controls/contentModel/components/model/ContentModelBrView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContentModelBr } from 'roosterjs-content-model';
+import { ContentModelBr } from 'roosterjs-content-model-types';
 import { ContentModelView } from '../ContentModelView';
 import { SegmentFormatView } from '../format/SegmentFormatView';
 

demo/scripts/controls/contentModel/components/model/ContentModelCodeView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContentModelCode, ContentModelCodeFormat } from 'roosterjs-content-model';
+import { ContentModelCode, ContentModelCodeFormat } from 'roosterjs-content-model-types';
 import { ContentModelView } from '../ContentModelView';
 import { DisplayFormatRenderer } from '../format/formatPart/DisplayFormatRenderer';
 import { FontFamilyFormatRenderer } from '../format/formatPart/FontFamilyFormatRenderer';

demo/scripts/controls/contentModel/components/model/ContentModelDividerView.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BackgroundColorFormatRenderer } from '../format/formatPart/BackgroundColorFormatRenderer';
 import { BorderFormatRenderers } from '../format/formatPart/BorderFormatRenderers';
-import { ContentModelDivider, ContentModelDividerFormat } from 'roosterjs-content-model';
+import { ContentModelDivider, ContentModelDividerFormat } from 'roosterjs-content-model-types';
 import { ContentModelView } from '../ContentModelView';
 import { DirectionFormatRenderer } from '../format/formatPart/DirectionFormatRenderer';
 import { DisplayFormatRenderer } from '../format/formatPart/DisplayFormatRenderer';

demo/scripts/controls/contentModel/components/model/ContentModelDocumentView.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { BlockGroupContentView } from './BlockGroupContentView';
-import { ContentModelDocument, hasSelectionInBlockGroup } from 'roosterjs-content-model';
+import { ContentModelDocument } from 'roosterjs-content-model-types';
 import { ContentModelView } from '../ContentModelView';
+import { hasSelectionInBlockGroup } from 'roosterjs-content-model-editor';
 
 const styles = require('./ContentModelDocumentView.scss');
 

demo/scripts/controls/contentModel/components/model/ContentModelEntityView.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BlockFormatView } from '../format/BlockFormatView';
-import { ContentModelEntity } from 'roosterjs-content-model';
+import { ContentModelEntity } from 'roosterjs-content-model-types';
 import { ContentModelView } from '../ContentModelView';
 import { SegmentFormatView } from '../format/SegmentFormatView';
 import { useProperty } from '../../hooks/useProperty';

demo/scripts/controls/contentModel/components/model/ContentModelFormatContainerView.tsx

@@ -5,13 +5,13 @@ import { ContentModelView } from '../ContentModelView';
 import { DisplayFormatRenderer } from '../format/formatPart/DisplayFormatRenderer';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
 import { FormatView } from '../format/FormatView';
+import { hasSelectionInBlock } from 'roosterjs-content-model-editor';
 import { SegmentFormatView } from '../format/SegmentFormatView';
 import { SizeFormatRenderers } from '../format/formatPart/SizeFormatRenderers';
 import {
     ContentModelFormatContainer,
     ContentModelFormatContainerFormat,
-    hasSelectionInBlock,
-} from 'roosterjs-content-model';
+} from 'roosterjs-content-model-types';
 
 const styles = require('./ContentModelFormatContainerView.scss');
 

demo/scripts/controls/contentModel/components/model/ContentModelGeneralView.tsx

@@ -3,12 +3,12 @@ import { BlockGroupContentView } from './BlockGroupContentView';
 import { ContentModelCodeView } from './ContentModelCodeView';
 import { ContentModelLinkView } from './ContentModelLinkView';
 import { ContentModelView } from '../ContentModelView';
+import { hasSelectionInBlock } from 'roosterjs-content-model-editor';
 import { SegmentFormatView } from '../format/SegmentFormatView';
 import {
     ContentModelGeneralBlock,
     ContentModelGeneralSegment,
-    hasSelectionInBlock,
-} from 'roosterjs-content-model';
+} from 'roosterjs-content-model-types';
 
 const styles = require('./ContentModelGeneralView.scss');
 

demo/scripts/controls/contentModel/components/model/ContentModelImageView.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ContentModelCodeView } from './ContentModelCodeView';
-import { ContentModelImage, ContentModelImageFormat } from 'roosterjs-content-model';
+import { ContentModelImage, ContentModelImageFormat } from 'roosterjs-content-model-types';
 import { ContentModelLinkView } from './ContentModelLinkView';
 import { ContentModelView } from '../ContentModelView';
 import { FormatRenderer } from '../format/utils/FormatRenderer';
@@ -12,7 +12,7 @@ import { MetadataView } from '../format/MetadataView';
 import { PaddingFormatRenderer } from '../format/formatPart/PaddingFormatRenderer';
 import { SegmentFormatView } from '../format/SegmentFormatView';
 import { SizeFormatRenderers } from '../format/formatPart/SizeFormatRenderers';
-import { updateImageMetadata } from 'roosterjs-content-model';
+import { updateImageMetadata } from 'roosterjs-content-model-editor';
 import { useProperty } from '../../hooks/useProperty';
 
 const styles = require('./ContentModelImageView.scss');

demo/scripts/controls/contentModel/components/model/ContentModelLinkView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContentModelLink } from 'roosterjs-content-model';
+import { ContentModelLink } from 'roosterjs-content-model-types';
 import { ContentModelView } from '../ContentModelView';
 import { LinkFormatView } from '../format/LinkFormatView';