(self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([[32692],{

/***/ 33043:
/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {


    (window.__NEXT_P = window.__NEXT_P || []).push([
      "/blog/post/this-is-univer.en-US",
      function () {
        return __webpack_require__(85063);
      }
    ]);
    if(false) {}
  

/***/ }),

/***/ 65852:
/***/ (function(__unused_webpack_module, __webpack_exports__) {

"use strict";
/* harmony default export */ __webpack_exports__.Z = ({"src":"/_next/static/media/cover.57912a7b.png","height":806,"width":1777,"blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAADFBMVEX4+Pj////t7e3h4eHcAp2mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIElEQVR4nGNgZGRgYGBkZGRgZGBiZmKCMJiYGEAMqBQAAlsAINJyzCYAAAAASUVORK5CYII=","blurWidth":8,"blurHeight":4});

/***/ }),

/***/ 85063:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  __toc: function() { return /* binding */ this_is_univer_en_US_toc; },
  "default": function() { return /* binding */ post_this_is_univer_en_US; }
});

// EXTERNAL MODULE: ./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js
var jsx_runtime = __webpack_require__(52676);
// EXTERNAL MODULE: ./node_modules/.pnpm/nextra@2.13.4_next@14.2.13_react-dom@18.3.1_react@18.3.1__react@18.3.1__react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/nextra/dist/setup-page.js + 6 modules
var setup_page = __webpack_require__(45715);
// EXTERNAL MODULE: ./node_modules/.pnpm/nextra@2.13.4_next@14.2.13_react-dom@18.3.1_react@18.3.1__react@18.3.1__react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/nextra/dist/mdx.js + 1 modules
var mdx = __webpack_require__(25674);
// EXTERNAL MODULE: ./src/docs/blog/post/this-is-univer/cover.png
var cover = __webpack_require__(65852);
;// CONCATENATED MODULE: ./src/docs/blog/post/this-is-univer.en-US.mdx
/*@jsxRuntime automatic @jsxImportSource react*/ 


const __toc = [
    {
        depth: 2,
        value: "Chapter Zero: Introduction",
        id: "chapter-zero-introduction"
    },
    {
        depth: 2,
        value: "Chapter One: Understanding the Code Architecture",
        id: "chapter-one-understanding-the-code-architecture"
    },
    {
        depth: 3,
        value: "Module Separation and Dependency Relationships in Univer",
        id: "module-separation-and-dependency-relationships-in-univer"
    },
    {
        depth: 4,
        value: "Principle of No Dependency Cycles",
        id: "principle-of-no-dependency-cycles"
    },
    {
        depth: 4,
        value: "Dependency Inversion",
        id: "dependency-inversion"
    },
    {
        depth: 3,
        value: "A Brief Discussion on the MVC Architecture in Univer",
        id: "a-brief-discussion-on-the-mvc-architecture-in-univer"
    },
    {
        depth: 4,
        value: "Model Layer (Model)",
        id: "model-layer-model"
    },
    {
        depth: 4,
        value: "Responsibilities of Controllers",
        id: "responsibilities-of-controllers"
    },
    {
        depth: 4,
        value: "View Layer (View)",
        id: "view-layer-view"
    },
    {
        depth: 2,
        value: "Chapter Two: Univer Sheet Data Structure",
        id: "chapter-two-univer-sheet-data-structure"
    },
    {
        depth: 2,
        value: "Chapter Three: Application Initialization to Rendering Process",
        id: "chapter-three-application-initialization-to-rendering-process"
    },
    {
        depth: 3,
        value: "Application Lifecycle",
        id: "application-lifecycle"
    },
    {
        depth: 3,
        value: "The Entire Process from Startup to Rendering",
        id: "the-entire-process-from-startup-to-rendering"
    },
    {
        depth: 2,
        value: "Chapter Four. How does the interface respond to user actions?",
        id: "chapter-four-how-does-the-interface-respond-to-user-actions"
    },
    {
        depth: 2,
        value: "5. Further Reading",
        id: "5-further-reading"
    }
];
function _createMdxContent(props) {
    const _components = Object.assign({
        h1: "h1",
        h2: "h2",
        p: "p",
        blockquote: "blockquote",
        h3: "h3",
        h4: "h4",
        img: "img",
        strong: "strong",
        pre: "pre",
        code: "code",
        span: "span",
        a: "a",
        ol: "ol",
        li: "li",
        ul: "ul"
    }, (0,mdx/* useMDXComponents */.a)(), props.components);
    return /*#__PURE__*/ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
        children: [
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h1, {
                children: "This is Univer"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h2, {
                id: "chapter-zero-introduction",
                children: "Chapter Zero: Introduction"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: 'This article aims to assist newcomers in swiftly acquainting themselves with the architecture and code of the open-source project "univer." It also encapsulates my learning and synthesis from my recent involvement in the development of "univer." There may be instances of inaccuracy or misconceptions, and I welcome comments and corrections from the community.'
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: 'Chapter One will delve into my comprehension of the architecture of "univer", discussing how "univer" modularizes and establishes dependencies among its modules. Subsequently, we will integrate "univer" into the MVC architectural pattern, dissecting the boundaries and responsibilities of its model layer, view layer, and controllers.'
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: 'In Chapter Two, we will initially explore the data structure design of the model layer in the "univer sheet", distinguishing between entities such as workbooks, sheets, rows, columns, and styles. Understanding their hierarchical relationships will facilitate a deeper comprehension of the code.'
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: 'Chapters Three and Four will analyze the codebase of "univer" through two control chains. One chain entails the process of initializing and rendering "univer," progressing from the model layer to the view layer. The other chain involves "univer" responding to user events, triggering data changes in the model layer, and subsequently re-rendering the page, moving from the view layer to the model layer. These sections will involve extensive source code analysis, focusing on the core logic while excluding edge cases. Additionally, each code block will be prefaced with the corresponding TypeScript file, enhancing the readability of the source code.'
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h2, {
                id: "chapter-one-understanding-the-code-architecture",
                children: "Chapter One: Understanding the Code Architecture"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.blockquote, {
                children: [
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                        children: "External beauty may please the eyes, but inner beauty can touch the soul. —Voltaire"
                    }),
                    "\n"
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h3, {
                id: "module-separation-and-dependency-relationships-in-univer",
                children: "Module Separation and Dependency Relationships in Univer"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h4, {
                id: "principle-of-no-dependency-cycles",
                children: "Principle of No Dependency Cycles"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "The rules of software architecture essentially revolve around arranging and combining code blocks. Software architecture organizes project code based on the business domain, breaking it down into different modules. Each module focuses on separation of concerns, with clear dependencies among them forming a directed acyclic graph, known as the Principle of Dependency Graphs. As illustrated below, system-level and application-level business logic constitute the core and most stable parts of the project, positioned at the innermost layer of the architecture. Components such as user interfaces, rendering engines, front-end frameworks, and persistent databases, which are subject to potential replacements during architectural evolution, depend on the central business entity, positioned in the outer layers."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.img, {
                    alt: "Univer Module Dependencies",
                    placeholder: "blur",
                    src: cover/* default */.Z
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: '(Note: core, sheet, engine-render, ui, sheet-ui correspond to different directories under the "packages" folder in the repository)'
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "In the architectural design of Univer, efforts are made to ensure that the core module contains only the most essential business logic. Additional functionalities built upon this core business logic are provided through a plugin-based approach, embodying the concept of a ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "microkernel architecture"
                    }),
                    ". In the diagram above, modules like engine-render, ui, sheet are all plugin-based, offering supplementary capabilities to the core. For instance, the sheet module enhances sheet-related functionalities, the engine-render (canvas rendering engine) provides canvas rendering capabilities, and the formula engine offers computation and parsing of formulas."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h4, {
                id: "dependency-inversion",
                children: "Dependency Inversion"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "At first glance, one might assume that the core module in Univer depends on the engine-render module for canvas rendering and on the ui module for rendering the page framework and styling menus. However, this setup poses a challenge: the core module relies on other modules, which are often unstable. For instance, styling menus may frequently change in position or appearance, potentially destabilizing the core module. In Univer, the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Dependency Inversion"
                    }),
                    " principle is employed to address this issue. As depicted in the diagram above, all outer layers depend on the inner layers, while the inner layers remain independent of the outer layers. In Univer, ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Dependency Injection (DI)"
                    }),
                    " is introduced to invert dependencies, avoiding direct dependencies from the core layer to the outer layer. The following code example clarifies this concept further:"
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "Without dependency injection, one might write code like this:"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "class"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "SheetPlugin"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "private"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " _commandService "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "new"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "CommandService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "()"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "In the code above, the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SheetPlugin"
                    }),
                    " class depends on the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "CommandService"
                    }),
                    " class. Changes in the methods of the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "CommandService"
                    }),
                    " class directly impact ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SheetPlugin"
                    }),
                    ", potentially requiring modifications and destabilizing ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SheetPlugin"
                    }),
                    "."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.img, {
                    src: "https://github.com/Jocs/jocs.github.io/assets/9712830/39f2bbbd-1bc7-432f-a666-50bb049b9ec5",
                    alt: ""
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "Through dependency injection, the code is structured as follows:"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "class"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "SheetPlugin"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "constructor"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    @ICommandService "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "private"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "readonly"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " _commandService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "ICommandService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  )"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "otherMethod"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(){"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_commandService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".registerCommand"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(SomeCommand);"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "In the code above, the _commandService property is declared to possess the ICommandService interface. Through relevant dependency bindings, methods defined in the ICommandService interface can be invoked within SheetPlugin's methods. This way, SheetPlugin depends on the ICommandService interface, while the CommandService class implements this interface. This decouples the direct dependency relationship between SheetPlugin and CommandService, as illustrated below:"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.img, {
                    src: "https://github.com/Jocs/jocs.github.io/assets/9712830/d5eaaf25-8ad8-423b-8437-fc06551e8a92",
                    alt: ""
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "Through the ICommandService interface, dependency inversion is achieved. Without the ICommandService interface, SheetPlugin would directly depend on CommandService, potentially destabilizing the core business logic (SheetPlugin). By introducing the ICommandService interface and employing dependency injection, if we consider the dashed box as a whole, with the CommandService class pointing to (implementing) the dashed box, we ultimately achieve dependency inversion, ensuring the stability of the core business logic."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h3, {
                id: "a-brief-discussion-on-the-mvc-architecture-in-univer",
                children: "A Brief Discussion on the MVC Architecture in Univer"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.img, {
                    src: "https://github.com/Jocs/jocs.github.io/assets/9712830/f4c3a675-c836-48fd-b606-55a44cf318f7",
                    alt: ""
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "MVC has a history of over 50 years in the entire GUI programming domain, yet it has never had a precise definition. The diagram above illustrates two typical variants of MVC. In ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.a, {
                        href: "http://asp.net/",
                        children: "MVC with ASP.NET"
                    }),
                    ", the controller is responsible for managing the view and model. When the controller modifies data in the model layer, the view layer directly reads data from the model layer through some subscription mechanism and updates the view. In ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "MVC with Rails"
                    }),
                    ", the view layer does not directly interact with the model layer. Instead, it acts as an intermediary through the controller. The view layer needs to fetch data from the model layer via the controller for rendering. This approach decouples the view layer from the model layer entirely, leading to clearer control flow."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "Upon examining the Univer project codebase, one can observe numerous files named with the suffixes ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "controller"
                    }),
                    ", ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "view"
                    }),
                    ", and ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "model"
                    }),
                    ", indicating the adoption of a traditional MVC architectural pattern. In Univer, the MVC architecture more closely resembles MVC with Rails, as the view layer does not directly read data from the model layer or subscribe to changes in the model layer (which will be discussed further below, as it subscribes to Mutations), instead employing a layer of data caching (similar to a ViewModel), as seen in the SheetSkeleton class."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "Initially delving into the project code raised several questions:"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.ol, {
                children: [
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "How does Univer organize and manage the model layer?"
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "What are the responsibilities of controllers in Univer, and how is the clarity of controller code architecture ensured?"
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "How is the view layer in Univer organized and managed?"
                    }),
                    "\n"
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "By examining the source code, let's explore how Univer addresses these questions from an architectural perspective."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h4, {
                id: "model-layer-model",
                children: "Model Layer (Model)"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "The model layer in Univer tends to be relatively thin. Taking Univer sheet as an example, in the core module, the Workbook and Worksheet classes are utilized to manage sheet-related model data, providing the necessary data storage and management functionalities. For instance, in the Worksheet class, there are row-manager, column-manager, and related classes and methods to manage each sheet's model data. For instance, regarding the row-manager, we can retrieve information and data about table rows:"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "getRowData"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(): ObjectArray"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "<"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "IRowData"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ">"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ";"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "getRowHeight"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(rowPos: number): number;"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "getRowOrCreate"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(rowPos: number): IRowData;"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// ..."
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: 'It is essential to understand that the data we render cannot directly use underlying model data; it often requires some calculations to generate a "model layer" suitable for direct view rendering. For example, during rendering, we need to calculate the total height of rows and columns. By analyzing the content of each row, we can determine the minimum row height required to accommodate the data. Through a series of calculations, the layout of the sheet page is ultimately determined for final rendering. These calculations are primarily housed in the view layer\'s SheetSkeleton class.'
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h4, {
                id: "responsibilities-of-controllers",
                children: "Responsibilities of Controllers"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.img, {
                    src: "https://github.com/Jocs/jocs.github.io/assets/9712830/b8651083-0af7-47dd-874a-5970e02a43de",
                    alt: ""
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "In traditional MVC architecture, the roles of the view and model layers are usually more distinct, with the controller assuming the primary business logic responsibilities and managing tasks related to the view and model layers. Controllers often tend to become cumbersome, so how does Univer prevent bloated controllers? In Univer, the controller (in the MVC sense) is further broken down into ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Controllers"
                    }),
                    " (narrow sense controllers in Univer), ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Commands"
                    }),
                    ", and ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Services"
                    }),
                    ". Additionally, almost all of Univer's business logic is encapsulated within the controllers, each fulfilling specific roles to ensure the smooth operation of the Univer application."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                    children: "Responsibilities of Controllers"
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.ul, {
                children: [
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Initializing rendering logic and event listeners, such as in the SheetRenderController class, executed during the application's Rendered lifecycle. It initializes page data refresh (_initialRenderRefresh), listens for Command executions, involves Mutations to modify the model layer, and triggers page rendering logic."
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Interacting with the view layer to obtain certain data information. For instance, in the AutoHeightController class, automatic row height for the sheet is computed based on Commands' requirements."
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Binding UI events, as seen in the HeaderResizeController class, executed during the application's Rendered lifecycle. During initialization, it binds hover events for spreadsheetRowHeader and spreadsheetColumnHeader to show and hide resize headers (for adjusting row and column heights). It also binds pointer down/move/up events to the resize header, allowing it to respond to drag movements, handle user interactions, and ultimately reflect changes in the model layer and updates in the view layer."
                    }),
                    "\n"
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                    children: "Responsibilities of Commands"
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "Commands can be viewed as individual user interaction operations, such as merging cells, clearing selections, inserting rows/columns, setting cell styles, etc., which modify the model layer and trigger view layer rendering. ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "Commands"
                    }),
                    " come in three types: ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "COMMAND"
                    }),
                    ", ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "MUTATION"
                    }),
                    ", ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "OPERATION"
                    }),
                    "."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.ul, {
                children: [
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.li, {
                        children: [
                            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                                children: "COMMAND"
                            }),
                            " represents a user's single interaction operation triggered by user actions. It can spawn another COMMAND, such as clicking the text wrap menu item in the menu triggering the SetTextWrapCommand, which then spawns the SetStyleCommand to handle all style changes. A COMMAND can spawn another COMMAND but cannot fork, as we need to handle undo/redo operations within COMMAND (undo/redo might be moved to the data layer later). However, a COMMAND can spawn multiple MUTATIONS and OPERATIONS."
                        ]
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.li, {
                        children: [
                            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                                children: "MUTATION"
                            }),
                            " can be understood as atomic operations on model layer data, like SetRangeValuesMutation modifying cell styles and values within the selected range, or SetWorksheetRowHeightMutation altering row heights within the selected range. Executing a MUTATION not only modifies model data but also triggers view re-rendering. Data modifications in MUTATION need to be coordinated and conflict resolved."
                        ]
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.li, {
                        children: [
                            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                                children: "OPERATION"
                            }),
                            " pertains to changes in application state, representing a temporary state of the application, such as page scroll position, user cursor position, current selection, etc., without involving coordination or conflict resolution, primarily used for future functionalities like live share (similar to Feishu's magic share)."
                        ]
                    }),
                    "\n"
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                    children: "Responsibilities of Services"
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "Services provide various services to the entire Univer application, embodying the concept of Separation of Concerns in the Univer project architecture."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.ul, {
                children: [
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Managing application lifecycle, as seen in the LifecycleService class, which stores the status values of the application lifecycle and provides the subscribeWithPrevious method for other modules to subscribe to changes in application lifecycle status values and execute responsive tasks like dependency initialization."
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Handling application history operations and storing historical operations, enabling users to undo/redo previous actions. In the LocalUndoRedoService class, undo/redo information is pushed onto a stack through the pushUndoRedo method, and the updateStatus method triggers undo/redo operations."
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Managing network IO and WebSocket connections."
                    }),
                    "\n"
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "In summary, Controllers, Commands, and Services collectively referred to as controllers in MVC, carry out a significant amount of business logic in Univer. The main responsibilities include (further detailed analysis on how controllers operate will be provided in subsequent sections):"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.ol, {
                children: [
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Managing the entire application's lifecycle"
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Binding and responding to UI events, such as double-clicks, cursor movements, etc."
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Controlling view rendering and triggering rendering logic"
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Communicating with the view layer to retrieve computed page layout information"
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Modifying the model layer through Command/Mutation to trigger interface rendering"
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Handling undo/redo-related tasks"
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "Managing collaboration and network IO"
                    }),
                    "\n"
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h4, {
                id: "view-layer-view",
                children: "View Layer (View)"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "In Univer, there are two rendering methods: canvas rendering engine and React rendering through the DOM. The canvas rendering engine primarily renders the main components of the sheet: row headers, column headers, sheet cells, selections, cell editors, etc. React is mainly used to render the top menu bar, context menu bar, pop-ups, etc."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "Canvas rendering is utilized for rendering the main body of the sheet, ensuring an optimal performance experience for table rendering with large datasets and smooth animation effects. On the other hand, menus require responsiveness to user events, where DOM often holds an advantage over Canvas."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "Components and services required for Canvas rendering are located in the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "base-render"
                    }),
                    " folder, encompassing sheet rendering-related components such as Spreadsheet, SpreadsheetRowHeader, SpreadsheetColumnHeader, etc. Additionally, a set of event response mechanisms is defined on Canvas components to ensure that each component can independently respond to events but does not handle these events in the view layer. These events need to be managed in the Controllers."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "The ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "Base-ui/Components"
                    }),
                    " folder code is responsible for rendering basic menu components and publishing user events. The base-ui module is also responsible for rendering the entire application framework. For instance, in the DesktopUIController class, bootstrapWorkbench initiates the rendering of the entire application framework and mounts the Canvas element."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h2, {
                id: "chapter-two-univer-sheet-data-structure",
                children: "Chapter Two: Univer Sheet Data Structure"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "Understanding a project often begins with delving into its data structures."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "The definitions of data types related to the Univer sheet are housed in the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.a, {
                        href: "https://github.com/dream-num/univer/tree/dev/packages/core/src/sheets",
                        children: "Interfaces"
                    }),
                    " directory. The hierarchical relationships are illustrated below:"
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.img, {
                    src: "https://github.com/Jocs/jocs.github.io/assets/9712830/51109cec-c76f-46c1-be53-d26add7fbdd6",
                    alt: ""
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "The overall data type definitions for Univer sheets are depicted in the above diagram. A workbook encompasses multiple sheets, with the styles referenced by sheets defined at the top-level workbook. This design choice ensures style reusability, reducing memory overhead, aligning with Excel's structure. Within the IWorksheetConfig interface, the cellData field is defined as a two-dimensional matrix, persisting cell information, as specified in the ICellData type. Notably, the p field denotes rich text, referencing the interface type IDocumentData, essentially representing a Univer document. This unique feature underscores Univer's distinctive design aspect, where each cell in a Univer sheet can transform into a Univer document. The s field predominantly consists of a string id, pointing to the styles field in IWorkbookConfig, facilitating the retrieval of style information for the respective cell."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "While the diagram does not encompass all fields defined within each interface, for a comprehensive understanding, it is recommended to directly explore the aforementioned ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.a, {
                        href: "https://github.com/dream-num/univer/blob/9a505ec3ba9de96677b9caaa821e287e71ebe0cf/packages/core/src/Types/Interfaces/IWorkbookData.ts#L12",
                        children: "type definition file"
                    }),
                    ", which also includes relevant annotations for further clarity."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h2, {
                id: "chapter-three-application-initialization-to-rendering-process",
                children: "Chapter Three: Application Initialization to Rendering Process"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "Understanding how Univer renders its pages essentially encompasses the entire process of Univer application startup, also representing the transition from the model layer to the view layer. Before delving into page rendering, let's first grasp the lifecycle of Univer, which was briefly mentioned in the Services section."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h3, {
                id: "application-lifecycle",
                children: "Application Lifecycle"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "export"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "enum"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "LifecycleStages"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "/**"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "   * Register plugins to Univer."
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "   */"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  Starting"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "/**"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "   * Univer business instances (UniverDoc / UniverSheet / UniverSlide) are created and services or controllers provided by"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "   * plugins get initialized. The application is ready to do the first-time rendering."
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "   */"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  Ready"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "/**"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "   * First-time rendering is completed."
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "   */"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  Rendered"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "/**"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "   * All lazy tasks are completed. The application is fully ready to provide features to users."
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "   */"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  Steady"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "The Univer lifecycle comprises four stages: ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "Starting"
                    }),
                    ", ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "Ready"
                    }),
                    ", ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "Rendered"
                    }),
                    ", and ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "Steady"
                    }),
                    ". During the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "Starting"
                    }),
                    " stage, plugins are registered in Univer. Upon entering the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "Ready"
                    }),
                    " stage, Univer business instances (UniverDoc / UniverSheet / UniverSlide) are created, and services or controllers provided by plugins are initialized. The application is then prepared for the initial rendering. Subsequently, the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "Rendered"
                    }),
                    " stage signifies the completion of the first rendering, while the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "Steady"
                    }),
                    " stage indicates that all deferred tasks are finished, and the application is fully operational for user interaction."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "When are the various lifecycle stages triggered?"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Starting Stage"
                    }),
                    ": In the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "_tryStart"
                    }),
                    " method, the LifecycleService class is instantiated, marking the application's entry into the Starting stage. During this phase, plugins' ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "onStarting"
                    }),
                    " hooks are executed."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Ready Stage"
                    }),
                    ": After instantiating UniverSheet, in the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "_tryProgressToReady"
                    }),
                    " method, the LifecycleService stage value is set to Ready. At this point, plugins' ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "onReady"
                    }),
                    " hooks are executed."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Rendered Stage"
                    }),
                    ": In the DesktopUIController, after bootstrapping the entire application, the LifecycleService stage value is set to Rendered."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Steady Stage"
                    }),
                    ": Following the Rendered stage, the Steady stage is triggered after a delay of 3000 milliseconds."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "Through the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "@OnLifecycle"
                    }),
                    " annotation, precise control over when a class is instantiated during a specific lifecycle stage can be achieved, as demonstrated below:"
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "@"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "OnLifecycle"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "LifecycleStages"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".Rendered"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " SheetRenderController)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "export"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "class"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "SheetRenderController"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "extends"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "Disposable"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "In the above code snippet, SheetRenderController is instantiated during the Rendered stage."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h3, {
                id: "the-entire-process-from-startup-to-rendering",
                children: "The Entire Process from Startup to Rendering"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.img, {
                    src: "https://github.com/Jocs/jocs.github.io/assets/9712830/cc814af5-6706-4552-9d03-1657708ef911",
                    alt: "The Entire Process from Startup to Rendering"
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Step One"
                    }),
                    ": Creating the Univer instance, registering necessary plugins for sheets, and creating the Univer sheet instance."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "The registered plugins and their functionalities include:"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.ul, {
                children: [
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "base-docs: Used for cell and formula editing."
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "base-render: Canvas rendering engine, containing essential components for sheet, document, and slide rendering."
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "base-sheets: Manages sheet canvas-related rendering such as row headers, column headers, cells, and handles a significant amount of sheet-related business logic."
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "base-ui: Manages basic React DOM rendering components for menus and the entire Univer sheet page framework rendering. It also handles user interaction operations like keyboard shortcuts registration, copy-paste functionalities, etc."
                    }),
                    "\n",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.li, {
                        children: "ui-plugin-sheets: Responsible for rendering basic UI elements and business logic related to right-click menus and rich text editing in cells."
                    }),
                    "\n"
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "Upon completing plugin registration, the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "createUniverSheet"
                    }),
                    " method creates the Univer sheet instance."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "/**"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: " * Create a univer sheet instance with internal dependency injection."
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: " */"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "createUniverSheet"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(config: Partial"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "<"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "IWorkbookConfig"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ">"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "): Workbook {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "let"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " workbook"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "Workbook"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ";"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "addSheet"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " () "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    workbook "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "._univerSheet"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "!"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".createSheet"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(config);"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_currentUniverService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".addSheet"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(workbook);"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  };"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "if"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " ("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "!"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "._univerSheet) {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "._univerSheet "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_rootInjector"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".createInstance"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(UniverSheet);"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "._univerPluginRegistry"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".getRegisterPlugins"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "PluginType"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".Sheet)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".forEach"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "((p) "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "._univerSheet"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "!"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".addPlugin"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "p"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".plugin "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "as"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "unknown"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "as"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "PluginCtor"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "<"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "any"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ">"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "p"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".options));"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "._tryStart"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "();"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_univerSheet"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".init"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "();"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "addSheet"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "();"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "._tryProgressToReady"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "();"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  } "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "else"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "addSheet"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "();"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "return"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " workbook"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "!"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ";"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "Through the above code, we can see that Univer re-registers the plugins of type PluginType.Sheet from the registered plugins mentioned above to the UniverSheet instance. Then, by using _tryStart, the application enters the Starting stage, initializes, and instantiates a Workbook through addSheet, completing the initialization of the model layer. At this point, the model data preparation is complete, and Univer transitions to the Ready stage."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Step Two"
                    }),
                    ": Initializing the page framework and rendering the page framework."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "During the Univer application lifecycle, plugins execute specific actions at different stages. In this step, the focus is on the base-ui plugin."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// base-ui-plugin.ts"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "override "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "onStarting"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(_injector: Injector): "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "void"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "._initDependencies"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(_injector);"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "override "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "onReady"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(): "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "void"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "his"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "._initUI"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "();"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "In the above code, the base-ui plugin declares and adds dependencies in the onStarting stage and initializes the rendering of the entire page framework in the onReady stage, mounting the View interface onto the container."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// ui-desktop.controller.tsx"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "bootstrapWorkbench"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(options: IWorkbenchOptions): "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "void"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".disposeWithMe"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "bootStrap"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "._injector"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " options"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " (canvasElement"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " containerElement) "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "._initializeEngine"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(canvasElement);"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_lifecycleService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".stage "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "LifecycleStages"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".Rendered;"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_focusService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".setContainerElement"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(containerElement);"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "setTimeout"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(() "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " ("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_lifecycleService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".stage "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "LifecycleStages"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".Steady)"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "STEADY_TIMEOUT"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ");"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "    })"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  );"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// ..."
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "function"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "bootStrap"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  injector"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "Injector"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  options"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "IWorkbenchOptions"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "callback"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " (canvasEl"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "HTMLElement"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " containerElement"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "HTMLElement"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ") "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "void"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ")"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "IDisposable"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "let"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " mountContainer"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "HTMLElement"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ";"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "root"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "createRoot"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(mountContainer);"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "ConnectedApp"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "connectInjector"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(App"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " injector);"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "desktopUIController"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "injector"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".get"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(IUIController) "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "as"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "IDesktopUIController"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ";"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "onRendered"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " (canvasElement"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "HTMLElement"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ") "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "callback"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(canvasElement"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " mountContainer);"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "function"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "render"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "() {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "headerComponents"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "desktopUIController"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".getHeaderComponents"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "();"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "contentComponents"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "desktopUIController"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".getContentComponents"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "();"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "footerComponents"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "desktopUIController"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".getFooterComponents"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "();"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "sidebarComponents"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "desktopUIController"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".getSidebarComponents"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "();"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "root"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".render"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "<"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "ConnectedApp"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        {"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "..."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "options}"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        headerComponents"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "{headerComponents}"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        contentComponents"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "{contentComponents}"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        onRendered"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "{onRendered}"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        footerComponents"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "{footerComponents}"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        sidebarComponents"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "{sidebarComponents}"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "/>"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "    );"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "render"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "();"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "In the above code snippet, after mounting and rendering the page framework, the canvas rendering engine container is mounted and the canvas size is adjusted, and the application enters the Rendered stage."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Step Three"
                    }),
                    ": Render the canvas interface, completing the entire rendering process."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "This process actually began in the Ready stage, where the initialization and assembly of components for the sheet canvas were started."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// sheet-canvas-view.ts"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "@"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "OnLifecycle"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "LifecycleStages"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".Ready"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " SheetCanvasView)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "export"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "class"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "SheetCanvasView"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "constructor"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  ) {"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_currentUniverService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "currentSheet$"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".subscribe"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "((workbook) "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "unitId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "workbook"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".getUnitId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "()"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "if"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " ("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "!"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_loadedMap"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".has"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(unitId)) {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "._currentWorkbook "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " workbook"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "._addNewRender"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "()"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_loadedMap"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".add"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(unitId)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "      }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "    })"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "private"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "_addNewRender"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "() {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "if"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " (currentRender "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "!="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "null"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ") {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "._addComponent"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(currentRender)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "    }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "should"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "workbook"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".getShouldRenderLoopImmediately"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "()"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "if"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " (should "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "&&"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "!"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "isAddedToExistedScene) {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "engine"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".runRenderLoop"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(() "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "scene"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".render"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "()"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "      })"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "    }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "private"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "_addComponent"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(currentRender"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "IRender"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ") {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "currentRender"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".mainComponent "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " spreadsheet"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "currentRender"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "components"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".set"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "SHEET_VIEW_KEY"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "MAIN"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " spreadsheet)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "currentRender"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "components"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".set"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "SHEET_VIEW_KEY"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "ROW"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " spreadsheetRowHeader)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "currentRender"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "components"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".set"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "SHEET_VIEW_KEY"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "COLUMN"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " spreadsheetColumnHeader)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "currentRender"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "components"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".set"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "SHEET_VIEW_KEY"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "LEFT_TOP"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " SpreadsheetLeftTopPlaceholder)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_sheetSkeletonManagerService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".setCurrent"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "({ sheetId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " unitId })"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "private"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "_addViewport"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(worksheet"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "Worksheet"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ") {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "    scene"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".addViewport"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        viewMain"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        viewColumnLeft"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        viewColumnRight"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        viewRowTop"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        viewRowBottom"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        viewLeftTop"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        viewMainLeftTop"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        viewMainLeft"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "        viewMainTop"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "      )"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".attachControl"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "()"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "The above code actually represents the entire process of rendering the sheet canvas. It first subscribes to ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "currentSheet"
                    }),
                    ". If the sheet has not been rendered before, the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "_addNewRender"
                    }),
                    " method is called to add the necessary canvas rendering components for the sheet, add a viewport, and then add the scene's rendering to the rendering loop of the rendering engine (",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "runRenderLoop"
                    }),
                    ")."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "In the above process, the assembly of the necessary canvas components for the sheet and the addition of the viewport are completed. So, where does the initial rendering of the canvas occur? And in which lifecycle stage? The rendering of the sheet canvas is managed by the SheetRenderController class, which handles the initialization rendering of the sheet canvas, listens for mutations, and then selectively renders the canvas interface."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// sheet-render.controller.ts"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "@"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "OnLifecycle"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "LifecycleStages"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".Rendered"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " SheetRenderController)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "export"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "class"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "SheetRenderController"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "extends"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "Disposable"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {}"
                                })
                            ]
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "In the above code, we can see that the rendering of the sheet canvas occurs during the entire application's Rendered stage. This is quite understandable because at this stage, the page framework has been mounted on the container, and the sheet canvas has completed its initialization work. During the Rendered stage, it subscribes to changes in ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "currentSkeleton$"
                    }),
                    ", then updates the skeleton to complete the initial rendering of the page."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "private "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "_commandExecutedListener"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "() {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".disposeWithMe"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_commandService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".onCommandExecuted"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "((command"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "ICommandInfo"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ") "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "if"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " ("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "COMMAND_LISTENER_SKELETON_CHANGE"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".includes"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "command"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id)) {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "          "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "          "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "if"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " ("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "command"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "!=="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "SetWorksheetActivateMutation"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id) {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "            "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_sheetSkeletonManagerService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".makeDirty"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "              {"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "                unitId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "                sheetId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "                commandId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "command"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "              }"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "              "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "true"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "            );"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "          }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "          "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_sheetSkeletonManagerService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".setCurrent"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "({"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "            unitId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "            sheetId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "            commandId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "command"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "          });"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "      }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_renderManagerService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".getRenderById"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(unitId)?."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "mainComponent"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "?.makeDirty"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(); "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// refresh spreadsheet"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "    })"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  );"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "The above code occurs in the SheetRenderController class. In the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "_commandExecutedListener"
                    }),
                    " method, it listens for Command executions. If it is within the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "COMMAND_LISTENER_SKELETON_CHANGE"
                    }),
                    " list, it marks the current skeleton and mainComponent as dirty. This way, the Canvas rendering engine will re-render the page in the next rendering loop."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Step Four"
                    }),
                    ": Initialize the cell editors."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "In fact, by the third step, the rendering of the entire sheet interface is essentially complete. Let's now focus on the initialization process of the cell editors. During the application's Rendered stage, Univer will initialize two Doc instances—one for cell editing and the other for formula input box editing."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// initialize-editor.controller.ts"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "private "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "_initialize"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "() {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_currentUniverService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".createDoc"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "({"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    id"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "DOCS_NORMAL_EDITOR_UNIT_ID_KEY"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    documentStyle"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {}"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  });"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// create univer doc formula bar editor instance"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_currentUniverService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".createDoc"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "({"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    id"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    documentStyle"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {}"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  });"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "Also, during the Rendered stage, when the EditorBridgeController class is instantiated, it initializes related event listeners, such as double-clicking on a cell to enter edit mode. However, it is not until the Steady stage that the StartEditController class is fully instantiated, allowing for full interactivity in cell editing."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h2, {
                id: "chapter-four-how-does-the-interface-respond-to-user-actions",
                children: "Chapter Four. How does the interface respond to user actions?"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "The following sequence diagram describes the entire process from event response to interface rendering when a user clicks on the text wrap menu item in Univer:"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.img, {
                    src: "https://github.com/Jocs/jocs.github.io/assets/9712830/1132e411-217b-43cd-a157-c3d27c0fa924",
                    alt: ""
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Step 1"
                    }),
                    ': The user clicks on the "text wrap" menu item in the menu.'
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "tsx",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "tsx",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// menu.ts"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "export"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "function"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "WrapTextMenuItemFactory"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(accessor"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "IAccessor"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ")"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "IMenuSelectorItem"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "<"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "WrapStrategy"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "> {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "return"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    id"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "SetTextWrapCommand"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// ToolbarItem.tsx"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  <"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "Select"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "onClick"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "{(value) "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "commandId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " id"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "commandService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".executeCommand"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(commandId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " value)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "    }}"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  />"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    'Above is the Select component for the "text wrap" menu item in the menu bar. It can be seen that a click event handler is bound to it. When clicked, the ',
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "commandService"
                    }),
                    " will execute the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "commandId"
                    }),
                    ", which is the id value configured in ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "WrapTextMenuItemFactory"
                    }),
                    ": ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SetTextWrapCommand"
                    }),
                    "'s id."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Step 2"
                    }),
                    ": In ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SetTextWrapCommand"
                    }),
                    ", the parameters are wrapped, and then a Command for setting styles uniformly, ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SetStyleCommand"
                    }),
                    ", is executed."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "export"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "SetTextWrapCommand"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "ICommand"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "<"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "ISetTextWrapCommandParams"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "> "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  type"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "CommandType"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "COMMAND"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  id"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-string-expression)"
                                    },
                                    children: "'sheet.command.set-text-wrap'"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "handler"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "async"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " (accessor"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " params) "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "commandService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "accessor"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".get"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(ICommandService)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "setStyleParams"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "ISetStyleParams"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "<"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "WrapStrategy"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "> "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      style"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        type"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-string-expression)"
                                    },
                                    children: "'tb'"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        value"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "params"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".value"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      }"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "    }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "return"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "commandService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".executeCommand"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "SetStyleCommand"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " setStyleParams)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  }"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Step 3"
                    }),
                    ": In ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SetStyleCommand"
                    }),
                    ", as the style values within the selection are changed, the parameters for ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SetRangeValuesMutation"
                    }),
                    " need to be assembled. For example, setting the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "tb"
                    }),
                    " of all cells in the selection to ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "WrapStrategy.WRAP"
                    }),
                    ". Due to the change in text wrap within the selection, and since the row height is automatically adjusted, the calculation of an ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "autoHeight"
                    }),
                    " for that row is required. Before calculating the auto row height, ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SetRangeValuesMutation"
                    }),
                    " needs to be executed because the autoHeight calculation depends on the updated view data. The value of ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "autoHeight"
                    }),
                    " is obtained through the interceptor registered in ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SheetInterceptorService"
                    }),
                    " (in ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "redos"
                    }),
                    ")."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// set-style.command.ts"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " { "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "undos"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "redos"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " } "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "accessor"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".get"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(SheetInterceptorService)"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".onCommandExecute"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "({"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  id"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "SetStyleCommand"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  params"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "})"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Step 4"
                    }),
                    ": The ability to obtain the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "autoHeight"
                    }),
                    " value as mentioned above is primarily attributed to the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "AutoHeightController"
                    }),
                    " class. This class is instantiated in the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "LifecycleStages.Ready"
                    }),
                    " stage and adds interception for all Commands that affect row auto height, such as intercepting ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SetStyleCommand"
                    }),
                    "."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// auto-height.controller.ts"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// for intercept set style command."
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "sheetInterceptorService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".interceptCommand"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "({"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "getMutations"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " (command"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " { id"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "string"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " params"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "ISetStyleParams"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "<"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "number"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "> }) "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "if"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " ("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "command"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "!=="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "SetStyleCommand"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id) {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "return"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        redos"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " []"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        undos"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " []"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "      }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "    }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "selections"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "selectionManagerService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".getSelectionRanges"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "()"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: " "
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "return"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "._getUndoRedoParamsOfAutoHeight"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(selections)"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  }"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "})"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Step 5"
                    }),
                    ": Since calculating the auto row height requires the document model and related calculations of cell layout, all related calculations are placed in the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SheetSkeleton"
                    }),
                    " class that manages the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "Spreadsheet"
                    }),
                    " (view layer). The ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "calculateAutoHeightInRange"
                    }),
                    " method in this class ultimately calculates the auto row height."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// auto-height.controller.ts"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "private "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "_getUndoRedoParamsOfAutoHeight"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(ranges: IRange[]) {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " { "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "skeleton"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " } "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "sheetSkeletonService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".getCurrent"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "()"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "!"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ";"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "const"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "rowsAutoHeightInfo"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "skeleton"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".calculateAutoHeightInRange"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(ranges);"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.strong, {
                        children: "Step 6"
                    }),
                    ": Once the data for ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "autoHeight"
                    }),
                    " is obtained, it triggers the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SetWorksheetRowHeightMutation"
                    }),
                    ". Whether triggered by ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SetRangeValuesMutation"
                    }),
                    " or ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "SetWorksheetRowHeightMutation,"
                    }),
                    " both will modify the model layer and mark ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "sheetSkeleton"
                    }),
                    " and ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "mainComponent"
                    }),
                    " as dirty. The ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.code, {
                        children: "sheetSkeleton"
                    }),
                    " will recalculate layout and other rendering information as needed, and then render the page."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.pre, {
                "data-language": "typescript",
                "data-theme": "default",
                children: /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.code, {
                    "data-language": "typescript",
                    "data-theme": "default",
                    children: [
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-token-comment)"
                                },
                                children: "// sheet-render.controller.ts"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "private "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "_commandExecutedListener"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "() {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "  "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".disposeWithMe"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "    "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_commandService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".onCommandExecuted"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "((command"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "ICommandInfo"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ") "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "=>"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "if"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " ("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "COMMAND_LISTENER_SKELETON_CHANGE"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".includes"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "command"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id)) {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "if"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " ("
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "command"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: "!=="
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "SetWorksheetActivateMutation"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id) {"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "          "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_sheetSkeletonManagerService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".makeDirty"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "("
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "            {"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "              unitId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "              sheetId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "              commandId"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-keyword)"
                                    },
                                    children: ":"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: " "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "command"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: ".id"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "            }"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-punctuation)"
                                    },
                                    children: ","
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "            "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "true"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "          );"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "        }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "        "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// ..."
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "      }"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.span, {
                            className: "line",
                            children: [
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "      "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "this"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "_renderManagerService"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: ".getRenderById"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(unitId)?."
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-constant)"
                                    },
                                    children: "mainComponent"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-function)"
                                    },
                                    children: "?.makeDirty"
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-color-text)"
                                    },
                                    children: "(); "
                                }),
                                /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                    style: {
                                        color: "var(--shiki-token-comment)"
                                    },
                                    children: "// refresh spreadsheet"
                                })
                            ]
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "    })"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "  );"
                            })
                        }),
                        "\n",
                        /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                            className: "line",
                            children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.span, {
                                style: {
                                    color: "var(--shiki-color-text)"
                                },
                                children: "}"
                            })
                        })
                    ]
                })
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.p, {
                children: "The above completes the entire process from event triggering to modifying the model layer, and subsequently updating the view layer."
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.h2, {
                id: "5-further-reading",
                children: "5. Further Reading"
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)(_components.p, {
                children: [
                    "If you wish to have an overall understanding of the architecture, I recommend reading ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.a, {
                        href: "/guides/sheet/architecture/univer",
                        children: "Univer Architecture"
                    }),
                    ". If you are unfamiliar with the DI system, I suggest reading the DI framework ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.a, {
                        href: "https://redi.wendell.fun/zh-CN/docs/introduction",
                        children: "redi"
                    }),
                    " used in the Univer project. The project uses Rxjs as an observer pattern, and reading the ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.a, {
                        href: "https://rxjs.tech/guide/overview",
                        children: "Rxjs documentation"
                    }),
                    " is a quick way to become familiar with Rxjs."
                ]
            }),
            "\n",
            /*#__PURE__*/ (0,jsx_runtime.jsxs)("p", {
                className: "text-gray-500 text-sm mt-8",
                children: [
                    "Author: ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.a, {
                        href: "https://github.com/Jocs",
                        children: "Jocs"
                    }),
                    ", Creator of ",
                    /*#__PURE__*/ (0,jsx_runtime.jsx)(_components.a, {
                        href: "https://github.com/marktext/marktext",
                        children: "MarkText"
                    }),
                    ", Core Developer at Univer, responsible for Univer Doc architecture and development."
                ]
            })
        ]
    });
}
function MDXContent() {
    let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
    const { wrapper: MDXLayout } = Object.assign({}, (0,mdx/* useMDXComponents */.a)(), props.components);
    return MDXLayout ? /*#__PURE__*/ (0,jsx_runtime.jsx)(MDXLayout, {
        ...props,
        children: /*#__PURE__*/ (0,jsx_runtime.jsx)(_createMdxContent, {
            ...props
        })
    }) : _createMdxContent(props);
}
/* harmony default export */ var this_is_univer_en_US = (MDXContent);

;// CONCATENATED MODULE: ./src/pages/blog/post/this-is-univer.en-US.mdx


/*@jsxRuntime automatic @jsxImportSource react*/ 

const this_is_univer_en_US_toc = [
    ...__toc
];
function this_is_univer_en_US_createMdxContent(props) {
    return /*#__PURE__*/ (0,jsx_runtime.jsx)(this_is_univer_en_US, {});
}
function this_is_univer_en_US_MDXContent() {
    let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
    const { wrapper: MDXLayout } = Object.assign({}, (0,mdx/* useMDXComponents */.a)(), props.components);
    return MDXLayout ? /*#__PURE__*/ (0,jsx_runtime.jsx)(MDXLayout, {
        ...props,
        children: /*#__PURE__*/ (0,jsx_runtime.jsx)(this_is_univer_en_US_createMdxContent, {
            ...props
        })
    }) : this_is_univer_en_US_createMdxContent(props);
}
const __nextraPageOptions = {
    MDXContent: this_is_univer_en_US_MDXContent,
    pageOpts: {
        "filePath": "src/pages/blog/post/this-is-univer.en-US.mdx",
        "route": "/blog/post/this-is-univer",
        "timestamp": 1730210723000,
        "title": "This Is Univer",
        headings: this_is_univer_en_US_toc
    },
    pageNextRoute: "/blog/post/this-is-univer.en-US"
};
if (false) {}
if (false) {}
/* harmony default export */ var post_this_is_univer_en_US = ((0,setup_page/* setupNextraPage */.j)(__nextraPageOptions));


/***/ })

},
/******/ function(__webpack_require__) { // webpackRuntimeModules
/******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }
/******/ __webpack_require__.O(0, [45715,92888,49774,40179], function() { return __webpack_exec__(33043); });
/******/ var __webpack_exports__ = __webpack_require__.O();
/******/ _N_E = __webpack_exports__;
/******/ }
]);