incorrect initial formatState when using initialModel

[adrienWeiss]

Describe the bug
When creating the editor with initial content (using contentAPI initialModel), getFormatState returns what looks like an incomplete state

{
    "canUndo": false,
    "canRedo": false,
    "isDarkMode": false
}

This is causing a weird side effect on UX:
If the user does not focus the editor but uses a ribbon option (such as fontSize), it will do nothing. But since doing so will then focus the editor, the next try will be fine.

To Reproduce
Steps to reproduce the behavior:
Change the demo with this :

diff --git a/demo/scripts/controlsV2/mainPane/MainPane.tsx b/demo/scripts/controlsV2/mainPane/MainPane.tsx
index 22296506b4d..70d750fffb0 100644
--- a/demo/scripts/controlsV2/mainPane/MainPane.tsx
+++ b/demo/scripts/controlsV2/mainPane/MainPane.tsx
@@ -4,7 +4,7 @@ import SampleEntityPlugin from '../plugins/SampleEntityPlugin';
 import { ApiPlaygroundPlugin } from '../sidePane/apiPlayground/ApiPlaygroundPlugin';
 import { ContentModelPanePlugin } from '../sidePane/contentModel/ContentModelPanePlugin';
 import { darkModeButton } from '../demoButtons/darkModeButton';
-import { Editor } from 'roosterjs-content-model-core';
+import { Editor, createModelFromHtml } from 'roosterjs-content-model-core';
 import { EditorOptionsPlugin } from '../sidePane/editorOptions/EditorOptionsPlugin';
 import { EventViewPlugin } from '../sidePane/eventViewer/EventViewPlugin';
 import { exportContentButton } from '../demoButtons/exportContentButton';
@@ -364,7 +364,11 @@ export class MainPane extends React.Component<{}, MainPaneState> {
                             getDarkColor={getDarkColor}
                             snapshots={this.snapshotPlugin.getSnapshots()}
                             trustedHTMLHandler={trustedHTMLHandler}
-                            initialModel={this.model}
+                            initialModel={createModelFromHtml(
+                                '<span>foo</span>',
+                                {},
+                                trustedHTMLHandler
+                            )}
                             editorCreator={this.state.editorCreator}
                             dir={this.state.isRtl ? 'rtl' : 'ltr'}
                             knownColors={this.knownColors}
@@ -540,3 +544,4 @@ function getAnnouncingString(key: KnownAnnounceStrings) {
 export function mount(parent: HTMLElement) {
     ReactDOM.render(<MainPane />, parent);
 }
+
diff --git a/demo/scripts/controlsV2/sidePane/formatState/FormatStatePlugin.ts b/demo/scripts/controlsV2/sidePane/formatState/FormatStatePlugin.ts
index 172aa4bae4f..da5e210da1a 100644
--- a/demo/scripts/controlsV2/sidePane/formatState/FormatStatePlugin.ts
+++ b/demo/scripts/controlsV2/sidePane/formatState/FormatStatePlugin.ts
@@ -39,6 +39,7 @@ export class FormatStatePlugin extends SidePanePluginImpl<FormatStatePane, Forma
         }
 
         const format = getFormatState(this.editor);
+        console.log('format', format);
         const selection = this.editor?.getDOMSelection();
         let x = 0;
         let y = 0;
@@ -61,3 +62,4 @@ export class FormatStatePlugin extends SidePanePluginImpl<FormatStatePane, Forma
         return { format, x, y };
     }
 }

Expected behavior
First use of tools provided by the ribbon should behave the same regardless of initialModel existence.

Device Information

• Version [9.17.0]

Additional context

⚠ We are still discovering how to migrate contentModel API. There is a good chance that we are using initialModel and createModelFromHtml incorrectly, and if that's the case I apologize.