@formulaxjs/kity-runtime 0.2.0 → 0.3.0

package/dist/index.global.js

@@ -21,6 +21,105 @@ var FormulaX = (() => {
   };
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+  // public/assets/images/toolbar/btn.png
+  var btn_default;
+  var init_btn = __esm({
+    "public/assets/images/toolbar/btn.png"() {
+      btn_default = "./btn-5DANP6JY.png";
+    }
+  });
+
+  // public/assets/images/toolbar/other.png
+  var other_default;
+  var init_other = __esm({
+    "public/assets/images/toolbar/other.png"() {
+      other_default = "./other-OMWJFGL5.png";
+    }
+  });
+
+  // public/assets/styles/editor.css?url
+  var editor_default;
+  var init_editor = __esm({
+    "public/assets/styles/editor.css?url"() {
+      editor_default = "./editor-JT5KLVXX.css?url";
+    }
+  });
+
+  // public/resource/KF_AMS_BB.woff
+  var KF_AMS_BB_default;
+  var init_KF_AMS_BB = __esm({
+    "public/resource/KF_AMS_BB.woff"() {
+      KF_AMS_BB_default = "./KF_AMS_BB-5QF7FUSO.woff";
+    }
+  });
+
+  // public/resource/KF_AMS_CAL.woff
+  var KF_AMS_CAL_default;
+  var init_KF_AMS_CAL = __esm({
+    "public/resource/KF_AMS_CAL.woff"() {
+      KF_AMS_CAL_default = "./KF_AMS_CAL-NXRNLAZN.woff";
+    }
+  });
+
+  // public/resource/KF_AMS_FRAK.woff
+  var KF_AMS_FRAK_default;
+  var init_KF_AMS_FRAK = __esm({
+    "public/resource/KF_AMS_FRAK.woff"() {
+      KF_AMS_FRAK_default = "./KF_AMS_FRAK-CO33WWN4.woff";
+    }
+  });
+
+  // public/resource/KF_AMS_MAIN.woff
+  var KF_AMS_MAIN_default;
+  var init_KF_AMS_MAIN = __esm({
+    "public/resource/KF_AMS_MAIN.woff"() {
+      KF_AMS_MAIN_default = "./KF_AMS_MAIN-25QJVAWY.woff";
+    }
+  });
+
+  // public/resource/KF_AMS_ROMAN.woff
+  var KF_AMS_ROMAN_default;
+  var init_KF_AMS_ROMAN = __esm({
+    "public/resource/KF_AMS_ROMAN.woff"() {
+      KF_AMS_ROMAN_default = "./KF_AMS_ROMAN-243BR7HH.woff";
+    }
+  });
+
+  // src/asset-manifest.ts
+  var kityFontAssets, kityToolbarAssets, kityStyleAssets, kityAssetManifest;
+  var init_asset_manifest = __esm({
+    "src/asset-manifest.ts"() {
+      "use strict";
+      init_btn();
+      init_other();
+      init_editor();
+      init_KF_AMS_BB();
+      init_KF_AMS_CAL();
+      init_KF_AMS_FRAK();
+      init_KF_AMS_MAIN();
+      init_KF_AMS_ROMAN();
+      kityFontAssets = {
+        KF_AMS_BB: KF_AMS_BB_default,
+        KF_AMS_CAL: KF_AMS_CAL_default,
+        KF_AMS_FRAK: KF_AMS_FRAK_default,
+        KF_AMS_MAIN: KF_AMS_MAIN_default,
+        KF_AMS_ROMAN: KF_AMS_ROMAN_default
+      };
+      kityToolbarAssets = {
+        btn: btn_default,
+        other: other_default
+      };
+      kityStyleAssets = {
+        editor: editor_default
+      };
+      kityAssetManifest = {
+        fonts: kityFontAssets,
+        toolbar: kityToolbarAssets,
+        styles: kityStyleAssets
+      };
+    }
+  });
+
   // src/vendor/legacy-box-type.ts
   var legacyBoxType;
   var init_legacy_box_type = __esm({
@@ -4919,28 +5018,30 @@ var FormulaX = (() => {
 
   // src/vendor/legacy-ui-utils.ts
   function createLegacyUiUtils() {
-    return {
-      ele: createElement,
-      getRectBox,
-      on(target, type, fn) {
-        addEvent(target, type, fn);
-        return this;
-      },
-      delegate(target, selector, type, fn) {
-        delegateEvent(target, selector, type, fn);
-        return this;
-      },
-      publish(topic, ...args) {
-        publish(topic, ...args);
-      },
-      subscribe,
-      getClassList
-    };
+    return legacyUiUtils;
   }
+  var legacyUiUtils;
   var init_legacy_ui_utils = __esm({
     "src/vendor/legacy-ui-utils.ts"() {
       "use strict";
       init_dom_utils();
+      legacyUiUtils = {
+        ele: createElement,
+        getRectBox,
+        on(target, type, fn) {
+          addEvent(target, type, fn);
+          return this;
+        },
+        delegate(target, selector, type, fn) {
+          delegateEvent(target, selector, type, fn);
+          return this;
+        },
+        publish(topic, ...args) {
+          publish(topic, ...args);
+        },
+        subscribe,
+        getClassList
+      };
     }
   });
 
@@ -4963,7 +5064,11 @@ var FormulaX = (() => {
   var init_toolbar_assets = __esm({
     "src/toolbar-assets.ts"() {
       "use strict";
-      toolbarAssetFileMap = {};
+      init_asset_manifest();
+      toolbarAssetFileMap = {
+        "btn.png": kityToolbarAssets.btn,
+        "other.png": kityToolbarAssets.other
+      };
     }
   });
 
@@ -5831,13 +5936,15 @@ var FormulaX = (() => {
   });
 
   // src/vendor/kity-formula/font-installer.ts
-  var FontInstallerModule, createFontInstallerClass;
+  var MAIN_FONT_FAMILY, FontInstallerModule, createFontInstallerClass;
   var init_font_installer = __esm({
     "src/vendor/kity-formula/font-installer.ts"() {
       "use strict";
+      MAIN_FONT_FAMILY = "KF AMS MAIN";
       FontInstallerModule = class {
         static create(kity26, FontManager, fontConfig, checkerTemplate) {
           let nodeList = [];
+          let checkerNode = null;
           return kity26.createClass("FontInstaller", {
             constructor: function(doc, resource) {
               const normalized = typeof resource === "string" ? { path: resource } : resource ?? {};
@@ -5847,36 +5954,30 @@ var FormulaX = (() => {
             },
             mount: function(callback) {
               const fontList = FontManager.getFontList();
-              let count = 0;
               kity26.Utils.each(fontList, (fontInfo) => {
-                count += 1;
                 fontInfo.meta.src = resolveFontSource(this.fonts, this.resource, fontInfo.meta.src);
                 this.createFontStyle(fontInfo);
-                preloadFont(this.doc, fontInfo).then(() => {
-                  applyFonts(this.doc, fontInfo);
-                }).catch(() => void 0).finally(() => {
-                  count -= 1;
-                  if (count === 0) {
-                    complete(this.doc, callback);
-                  }
-                });
+                if (fontInfo.meta.fontFamily === MAIN_FONT_FAMILY) {
+                  checkerNode = createFontCheckerNode(this.doc);
+                  return;
+                }
+                applyFonts(this.doc, fontInfo);
               });
+              complete(this.doc, callback);
             },
             createFontStyle: function(fontInfo) {
+              const styleId = createFontStyleId(fontInfo);
+              if (this.doc.getElementById(styleId)) {
+                return;
+              }
               const stylesheet = this.doc.createElement("style");
               const tpl = '@font-face{\nfont-family: "${fontFamily}";\nsrc: url("${src}");\n}';
               stylesheet.setAttribute("type", "text/css");
+              stylesheet.id = styleId;
               stylesheet.innerHTML = tpl.replace("${fontFamily}", fontInfo.meta.fontFamily).replace("${src}", fontInfo.meta.src);
               this.doc.head.appendChild(stylesheet);
             }
           });
-          function preloadFont(doc, fontInfo) {
-            const view = doc.defaultView ?? window;
-            if (view.fetch) {
-              return view.fetch(fontInfo.meta.src, { method: "GET" }).then(() => void 0);
-            }
-            return Promise.resolve();
-          }
           function resolveFontSource(fonts, resourceBase, originalSrc) {
             const directMatch = fonts[originalSrc];
             if (directMatch) {
@@ -5889,34 +5990,29 @@ var FormulaX = (() => {
             }
             return resourceBase + originalSrc;
           }
-          function waitForFontsReady(doc, fontList) {
+          function createFontStyleId(fontInfo) {
+            const raw = `${fontInfo.meta.fontFamily}::${fontInfo.meta.src}`;
+            let hash = 0;
+            for (let index = 0; index < raw.length; index += 1) {
+              hash = (hash << 5) - hash + raw.charCodeAt(index) | 0;
+            }
+            return `formulax-kity-font-${Math.abs(hash).toString(36)}`;
+          }
+          function waitForFontsReady(doc) {
             const view = doc.defaultView ?? window;
             if (view.document.fonts) {
-              const fontLoadPromises = fontList.map((fontInfo) => {
-                return view.document.fonts.load(`50px "${fontInfo.meta.fontFamily}"`);
-              });
-              return Promise.all(fontLoadPromises).then(() => view.document.fonts.ready).then(() => {
-                return new Promise((resolve) => {
-                  requestAnimationFrame(() => {
-                    requestAnimationFrame(() => {
-                      resolve();
-                    });
-                  });
-                });
-              });
+              return view.document.fonts.ready.then(() => void 0);
             }
             return Promise.resolve();
           }
           function complete(doc, callback) {
             const view = doc.defaultView ?? window;
-            const fontList = FontManager.getFontList();
-            const fontArray = Object.values(fontList);
-            waitForFontsReady(doc, fontArray).then(() => {
-              view.setTimeout(() => {
-                initFontSystemInfo(doc);
-                removeTmpNode();
-                callback();
-              }, 100);
+            waitForFontsReady(doc).then(() => {
+              return waitForNextFrames(view, 2);
+            }).then(() => {
+              initFontSystemInfo(doc);
+              removeTmpNode();
+              callback();
             }).catch(() => {
               view.setTimeout(() => {
                 initFontSystemInfo(doc);
@@ -5937,12 +6033,37 @@ var FormulaX = (() => {
             doc.body.appendChild(node);
             nodeList.push(node);
           }
+          function createFontCheckerNode(doc) {
+            if (checkerNode) {
+              return checkerNode;
+            }
+            const node = doc.createElement("div");
+            node.style.cssText = "position: absolute; top: 0; left: -100000px;";
+            node.innerHTML = checkerTemplate.join("");
+            doc.body.appendChild(node);
+            checkerNode = node;
+            return node;
+          }
+          function waitForNextFrames(view, frameCount) {
+            if (typeof view.requestAnimationFrame !== "function") {
+              return Promise.resolve();
+            }
+            return new Promise((resolve) => {
+              const step = (remaining) => {
+                if (remaining <= 0) {
+                  resolve();
+                  return;
+                }
+                view.requestAnimationFrame(() => {
+                  step(remaining - 1);
+                });
+              };
+              step(frameCount);
+            });
+          }
           function initFontSystemInfo(doc) {
-            const tmpNode = doc.createElement("div");
-            tmpNode.style.cssText = "position: absolute; top: 0; left: -100000px;";
-            tmpNode.innerHTML = checkerTemplate.join("");
-            doc.body.appendChild(tmpNode);
-            const rectBox = tmpNode.getElementsByTagName("text")[0].getBBox();
+            const activeCheckerNode = checkerNode ?? createFontCheckerNode(doc);
+            const rectBox = activeCheckerNode.getElementsByTagName("text")[0].getBBox();
             fontConfig.spaceHeight = rectBox.height;
             fontConfig.topSpace = -rectBox.y - fontConfig.baseline;
             fontConfig.bottomSpace = fontConfig.spaceHeight - fontConfig.topSpace - fontConfig.baseHeight;
@@ -5951,7 +6072,8 @@ var FormulaX = (() => {
             fontConfig.meanlinePosition = (fontConfig.topSpace + fontConfig.meanline) / fontConfig.spaceHeight;
             fontConfig.ascenderPosition = fontConfig.topSpace / fontConfig.spaceHeight;
             fontConfig.descenderPosition = (fontConfig.topSpace + fontConfig.baseHeight) / fontConfig.spaceHeight;
-            doc.body.removeChild(tmpNode);
+            activeCheckerNode.parentNode?.removeChild(activeCheckerNode);
+            checkerNode = null;
           }
           function removeTmpNode() {
             kity26.Utils.each(nodeList, (node) => {
@@ -14871,7 +14993,7 @@ var FormulaX = (() => {
     return serviceObject;
   }
   var defaultOptions, components, kity2, kf, KFEditor, editor_default2;
-  var init_editor = __esm({
+  var init_editor2 = __esm({
     "src/legacy/editor.ts"() {
       "use strict";
       init_legacy_utils();
@@ -14991,7 +15113,7 @@ var FormulaX = (() => {
   var init_factory = __esm({
     "src/legacy/factory.ts"() {
       "use strict";
-      init_editor();
+      init_editor2();
       init_runtime_interop();
       EditorWrapper = class {
         callbacks = [];
@@ -19949,7 +20071,7 @@ var FormulaX = (() => {
   var init_start = __esm({
     "src/boot/start.ts"() {
       "use strict";
-      init_editor();
+      init_editor2();
       init_factory();
       init_ui();
       init_parser();
@@ -19993,58 +20115,16 @@ var FormulaX = (() => {
     legacyKfExtDef: () => legacyKfExtDef,
     legacySysconf: () => legacySysconf,
     legacyUiDef: () => legacyUiDef,
+    legacyUiUtils: () => legacyUiUtils,
     mountKityEditor: () => mountKityEditor,
     normalizeMouseEvent: () => normalizeMouseEvent,
     publish: () => publish,
     subscribe: () => subscribe
   });
-
-  // public/assets/images/toolbar/btn.png
-  var btn_default = "./btn-5DANP6JY.png";
-
-  // public/assets/images/toolbar/other.png
-  var other_default = "./other-OMWJFGL5.png";
-
-  // public/assets/styles/editor.css?url
-  var editor_default = "./editor-JT5KLVXX.css?url";
-
-  // public/resource/KF_AMS_BB.woff
-  var KF_AMS_BB_default = "./KF_AMS_BB-5QF7FUSO.woff";
-
-  // public/resource/KF_AMS_CAL.woff
-  var KF_AMS_CAL_default = "./KF_AMS_CAL-NXRNLAZN.woff";
-
-  // public/resource/KF_AMS_FRAK.woff
-  var KF_AMS_FRAK_default = "./KF_AMS_FRAK-CO33WWN4.woff";
-
-  // public/resource/KF_AMS_MAIN.woff
-  var KF_AMS_MAIN_default = "./KF_AMS_MAIN-25QJVAWY.woff";
-
-  // public/resource/KF_AMS_ROMAN.woff
-  var KF_AMS_ROMAN_default = "./KF_AMS_ROMAN-243BR7HH.woff";
-
-  // src/asset-manifest.ts
-  var kityFontAssets = {
-    KF_AMS_BB: KF_AMS_BB_default,
-    KF_AMS_CAL: KF_AMS_CAL_default,
-    KF_AMS_FRAK: KF_AMS_FRAK_default,
-    KF_AMS_MAIN: KF_AMS_MAIN_default,
-    KF_AMS_ROMAN: KF_AMS_ROMAN_default
-  };
-  var kityToolbarAssets = {
-    btn: btn_default,
-    other: other_default
-  };
-  var kityStyleAssets = {
-    editor: editor_default
-  };
-  var kityAssetManifest = {
-    fonts: kityFontAssets,
-    toolbar: kityToolbarAssets,
-    styles: kityStyleAssets
-  };
+  init_asset_manifest();
 
   // src/create-editor.ts
+  init_asset_manifest();
   init_legacy_box_type();
 
   // src/vendor/char-position.ts
@@ -23447,6 +23527,80 @@ var FormulaX = (() => {
     targetWindow.kity = kity;
   }
 
+  // src/perf.ts
+  function getPerfHost() {
+    return globalThis;
+  }
+  function getPerfState() {
+    const host = getPerfHost();
+    host.__FORMULAX_PERF_STATE__ ??= {
+      reportedMeasureCount: 0,
+      reportScheduled: false
+    };
+    return host.__FORMULAX_PERF_STATE__;
+  }
+  function hasPerfSupport() {
+    return typeof performance !== "undefined" && typeof performance.mark === "function" && typeof performance.measure === "function" && typeof performance.getEntriesByType === "function";
+  }
+  function isPerfDebugEnabled() {
+    return getPerfHost().__FORMULAX_PERF__ === true;
+  }
+  function schedulePerfReport() {
+    if (!hasPerfSupport() || !isPerfDebugEnabled()) {
+      return;
+    }
+    const state = getPerfState();
+    if (state.reportScheduled) {
+      return;
+    }
+    state.reportScheduled = true;
+    queueMicrotask(() => {
+      state.reportScheduled = false;
+      const entries = performance.getEntriesByType("measure").filter((entry) => entry.name.startsWith("fx:")).sort((left, right) => left.startTime - right.startTime);
+      const nextEntries = entries.slice(state.reportedMeasureCount);
+      state.reportedMeasureCount = entries.length;
+      if (!nextEntries.length) {
+        return;
+      }
+      console.table(nextEntries.map((entry) => ({
+        name: entry.name,
+        duration: Number(entry.duration.toFixed(2)),
+        startTime: Number(entry.startTime.toFixed(2))
+      })));
+    });
+  }
+  function markFormulaXPerf(name) {
+    if (!hasPerfSupport()) {
+      return null;
+    }
+    const markName = `${name}::${Date.now()}::${Math.random().toString(36).slice(2, 8)}`;
+    performance.mark(markName);
+    return markName;
+  }
+  function measureFormulaXPerf(name, startMark, endMark) {
+    if (!hasPerfSupport() || !startMark) {
+      return null;
+    }
+    const resolvedEndMark = endMark ?? markFormulaXPerf(`${name}:end`);
+    if (!resolvedEndMark) {
+      return null;
+    }
+    performance.measure(name, startMark, resolvedEndMark);
+    schedulePerfReport();
+    return resolvedEndMark;
+  }
+  function clearFormulaXPerfMarks(...marks) {
+    if (!hasPerfSupport()) {
+      return;
+    }
+    for (const mark of marks) {
+      if (!mark) {
+        continue;
+      }
+      performance.clearMarks(mark);
+    }
+  }
+
   // src/create-editor.ts
   init_toolbar_assets();
   var DEFAULT_LATEX = "x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}";
@@ -23487,13 +23641,14 @@ var FormulaX = (() => {
   }
   function ensureKityStylesheet(doc, href) {
     if (doc.getElementById(KITY_STYLE_ID)) {
-      return;
+      return false;
     }
     const link = doc.createElement("link");
     link.id = KITY_STYLE_ID;
     link.rel = "stylesheet";
     link.href = href;
     doc.head.appendChild(link);
+    return true;
   }
   function hydrateLegacyKf(runtimeWindow) {
     const requireFormula = runtimeWindow.__kityFormulaRequire__;
@@ -23541,7 +23696,7 @@ var FormulaX = (() => {
       kity: runtimeWindow.kity,
       otherPosition: legacyOtherPosition,
       uiDef: legacyUiDef,
-      uiUtils: createLegacyUiUtils()
+      uiUtils: legacyUiUtils
     };
   }
   async function ensureKityRuntime() {
@@ -23549,64 +23704,114 @@ var FormulaX = (() => {
       return runtimePromise;
     }
     runtimePromise = (async () => {
+      const runtimeTotalStart = markFormulaXPerf("fx:kity-runtime:total");
       const runtimeWindow = window;
       runtimeWindow.kf = runtimeWindow.kf ?? {};
       installKityRuntime(runtimeWindow);
-      const { installLegacyKityFormulaRuntime: installLegacyKityFormulaRuntime2 } = await Promise.resolve().then(() => (init_install(), install_exports));
-      installLegacyKityFormulaRuntime2(runtimeWindow);
-      hydrateLegacyKf(runtimeWindow);
-      const { installLegacyParserRuntime: installLegacyParserRuntime2 } = await Promise.resolve().then(() => (init_install2(), install_exports2));
-      installLegacyParserRuntime2(runtimeWindow);
-      installLegacyRuntime(runtimeWindow);
-      const { installKityEditorStart: installKityEditorStart2 } = await Promise.resolve().then(() => (init_start(), start_exports));
-      installKityEditorStart2(runtimeWindow);
+      try {
+        const formulaImportStart = markFormulaXPerf("fx:kity-runtime:formula-import");
+        const { installLegacyKityFormulaRuntime: installLegacyKityFormulaRuntime2 } = await Promise.resolve().then(() => (init_install(), install_exports));
+        const formulaImportEnd = markFormulaXPerf("fx:kity-runtime:formula-import:end");
+        measureFormulaXPerf("fx:kity-runtime:formula-import", formulaImportStart, formulaImportEnd);
+        clearFormulaXPerfMarks(formulaImportStart, formulaImportEnd);
+        const formulaInstallStart = markFormulaXPerf("fx:kity-runtime:formula-install");
+        installLegacyKityFormulaRuntime2(runtimeWindow);
+        hydrateLegacyKf(runtimeWindow);
+        const formulaInstallEnd = markFormulaXPerf("fx:kity-runtime:formula-install:end");
+        measureFormulaXPerf("fx:kity-runtime:formula-install", formulaInstallStart, formulaInstallEnd);
+        clearFormulaXPerfMarks(formulaInstallStart, formulaInstallEnd);
+        const parserImportStart = markFormulaXPerf("fx:kity-runtime:parser-import");
+        const { installLegacyParserRuntime: installLegacyParserRuntime2 } = await Promise.resolve().then(() => (init_install2(), install_exports2));
+        const parserImportEnd = markFormulaXPerf("fx:kity-runtime:parser-import:end");
+        measureFormulaXPerf("fx:kity-runtime:parser-import", parserImportStart, parserImportEnd);
+        clearFormulaXPerfMarks(parserImportStart, parserImportEnd);
+        const parserInstallStart = markFormulaXPerf("fx:kity-runtime:parser-install");
+        installLegacyParserRuntime2(runtimeWindow);
+        const parserInstallEnd = markFormulaXPerf("fx:kity-runtime:parser-install:end");
+        measureFormulaXPerf("fx:kity-runtime:parser-install", parserInstallStart, parserInstallEnd);
+        clearFormulaXPerfMarks(parserInstallStart, parserInstallEnd);
+        installLegacyRuntime(runtimeWindow);
+        const bootImportStart = markFormulaXPerf("fx:kity-runtime:boot-import");
+        const { installKityEditorStart: installKityEditorStart2 } = await Promise.resolve().then(() => (init_start(), start_exports));
+        const bootImportEnd = markFormulaXPerf("fx:kity-runtime:boot-import:end");
+        measureFormulaXPerf("fx:kity-runtime:boot-import", bootImportStart, bootImportEnd);
+        clearFormulaXPerfMarks(bootImportStart, bootImportEnd);
+        const bootInstallStart = markFormulaXPerf("fx:kity-runtime:boot-install");
+        installKityEditorStart2(runtimeWindow);
+        const bootInstallEnd = markFormulaXPerf("fx:kity-runtime:boot-install:end");
+        measureFormulaXPerf("fx:kity-runtime:boot-install", bootInstallStart, bootInstallEnd);
+        clearFormulaXPerfMarks(bootInstallStart, bootInstallEnd);
+      } finally {
+        const runtimeTotalEnd = markFormulaXPerf("fx:kity-runtime:total:end");
+        measureFormulaXPerf("fx:kity-runtime:total", runtimeTotalStart, runtimeTotalEnd);
+        clearFormulaXPerfMarks(runtimeTotalStart, runtimeTotalEnd);
+      }
     })();
     return runtimePromise;
   }
   async function createKityEditor(container, options = {}) {
+    const createEditorStart = markFormulaXPerf("fx:create-kity-editor:total");
     const fontsize = options.render?.fontsize ?? 40;
     const editorHeight = normalizeCssSize(options.height, DEFAULT_EDITOR_HEIGHT);
     const assets = resolveEditorAssets(options.assets);
-    ensureKityStylesheet(document, assets.styles.editor);
-    setToolbarAssetUrls(assets.toolbar);
-    await ensureKityRuntime();
-    const runtimeWindow = window;
-    if (!runtimeWindow.kf?.EditorFactory) {
-      throw new Error("Kity editor runtime did not initialize");
-    }
-    container.innerHTML = "";
-    const host = document.createElement("div");
-    host.className = "kf-editor";
-    host.style.width = "100%";
-    host.style.height = editorHeight;
-    container.appendChild(host);
-    const factory2 = runtimeWindow.kf.EditorFactory.create(host, {
-      render: {
-        fontsize
-      },
-      resource: {
-        path: "",
-        fonts: assets.fonts
+    try {
+      const stylesheetInserted = ensureKityStylesheet(document, assets.styles.editor);
+      if (stylesheetInserted) {
+        const stylesheetInsertedMark = markFormulaXPerf("fx:kity-css:link-inserted");
+        measureFormulaXPerf("fx:kity-css:link-inserted", createEditorStart, stylesheetInsertedMark);
+        clearFormulaXPerfMarks(stylesheetInsertedMark);
       }
-    });
-    return {
-      ready: factory2.ready.bind(factory2),
-      execCommand(name, value) {
-        factory2.ready(function execWhenReady() {
-          this.execCommand(name, value);
-        });
-      },
-      focus() {
-        factory2.ready(function focusWhenReady() {
-          this.execCommand("focus");
-        });
-      },
-      destroy() {
-        container.innerHTML = "";
-      },
-      host,
-      raw: factory2
-    };
+      setToolbarAssetUrls(assets.toolbar);
+      await ensureKityRuntime();
+      const runtimeReadyMark = markFormulaXPerf("fx:kity-runtime:ready-for-editor");
+      measureFormulaXPerf("fx:kity-runtime:ready-for-editor", createEditorStart, runtimeReadyMark);
+      clearFormulaXPerfMarks(runtimeReadyMark);
+      const runtimeWindow = window;
+      if (!runtimeWindow.kf?.EditorFactory) {
+        throw new Error("Kity editor runtime did not initialize");
+      }
+      container.innerHTML = "";
+      const host = document.createElement("div");
+      host.className = "kf-editor";
+      host.style.width = "100%";
+      host.style.height = editorHeight;
+      container.appendChild(host);
+      const factoryCreateStart = markFormulaXPerf("fx:kity-editor-factory:create");
+      const factory2 = runtimeWindow.kf.EditorFactory.create(host, {
+        render: {
+          fontsize
+        },
+        resource: {
+          path: "",
+          fonts: assets.fonts
+        }
+      });
+      const factoryCreateEnd = markFormulaXPerf("fx:kity-editor-factory:create:end");
+      measureFormulaXPerf("fx:kity-editor-factory:create", factoryCreateStart, factoryCreateEnd);
+      clearFormulaXPerfMarks(factoryCreateStart, factoryCreateEnd);
+      return {
+        ready: factory2.ready.bind(factory2),
+        execCommand(name, value) {
+          factory2.ready(function execWhenReady() {
+            this.execCommand(name, value);
+          });
+        },
+        focus() {
+          factory2.ready(function focusWhenReady() {
+            this.execCommand("focus");
+          });
+        },
+        destroy() {
+          container.innerHTML = "";
+        },
+        host,
+        raw: factory2
+      };
+    } finally {
+      const createEditorEnd = markFormulaXPerf("fx:create-kity-editor:total:end");
+      measureFormulaXPerf("fx:create-kity-editor:total", createEditorStart, createEditorEnd);
+      clearFormulaXPerfMarks(createEditorStart, createEditorEnd);
+    }
   }
   async function mountKityEditor(container, options = {}) {
     const editor = await createKityEditor(container, options);