A method and system for reusing a master editor based on snapshot caching and context switching.

Abstract

This invention relates to a method and system for reusing master and child editors based on snapshot caching and context switching, applied to a low-code page building platform. The method maintains a master editor instance and a child editor instance within the same host page, and maintains a snapshot cache mapping table using the composite component identifier as the key through a child editor manager. When a child editor is opened, a historical editing snapshot or default layout is loaded based on the cache hit result, and session isolation processing is performed on the child editor history manager. A keep-alive hiding process is applied only to the master editor container through a UI overlay controller, allowing the independently mounted child editor overlay to cover and take over the interaction. The currently active editor is switched using a context pointer switcher, and undo or redo operations are routed to the corresponding history manager through an active editor router. After confirming the edit, a child editor snapshot is collected, written to the cache mapping table, and written to the data carrier of the corresponding component of the master editor as a system-level commit transaction. This reduces the overhead of repeated initialization, avoids history stack pollution, and ensures the integrity of the parent-child editing data lineage.

Description

[Technical Field] This invention relates to the field of web visual editor technology, and in particular to a method and system for reusing master and child editors based on snapshot caching and context switching. [Background Technology] With the development of low-code page building platforms, users can typically complete page building, component layout, attribute configuration, style setting, and page saving through visual drag-and-drop. For ordinary page components, users can edit them in the main editor canvas; for composite components such as pop-ups, side drawers, and nested page blocks, which usually need to contain images, buttons, product displays, text, layout containers, and other nested components, independent and complete page building capabilities are required.

[0001] In existing technologies, the following technical approaches are typically used for editing the internal content of composite components: The first type is the pop-up configuration panel mode. Represented by systems like Shopify theme editors and Wix Editor, when a user clicks on a composite component that needs independent editing, the system pops up a settings panel, containing limited form controls such as text boxes, color pickers, and image upload controls. This mode is simple to implement, but the settings panel only carries limited configuration items and cannot provide the composite component with drag-and-drop, layout, nested component, and history operation capabilities equivalent to those in the main editor.

[0002] The second method is the page navigation mode. Represented by some low-code platforms such as OutSystems and Mendix, when a user edits a subpage or pop-up window, the system navigates to a separate subpage editing route, and returns to the parent page only after editing is complete. This method provides relatively complete subpage editing capabilities, but each time a subpage is accessed, a complete editor instantiation process is usually required, including DOM mounting, plugin registration, material loading, and project data loading. When returning to the parent page, the sub-editor instance may be destroyed, resulting in high overhead from repeated initialization. Furthermore, users cannot simultaneously perceive the spatial relationship between the parent and subpages within a single view.

[0003] The third method is switching within the same instance. Some platforms use a method of loading different datasets on the same editor instance, switching the data managed by the current editor through the project data loading interface. While this method avoids creating multiple editor instances, the editor state corresponding to the old data is easily discarded during the switching between main page data and subpage data. This includes interactive states such as currently selected components, zoom level, scroll position, style calculation cache, and undo / redo history stack.

[0004] The aforementioned prior art has at least the following drawbacks: First, interactive state is lost. During switching between instances, the editing contexts of the main editor and the child editor are difficult to maintain separately. When the user returns to the main editor from the child editor, the selected state, scroll position, zoom state, and history stack of the main editor may not be restored.

[0005] Second, repeated initialization incurs high overhead. In page navigation mode, each entry into a sub-editor typically requires executing a complete process of editor instantiation, DOM mounting, plugin registration, material loading, and project data retrieval. When the same pop-up component is opened multiple times, the schema data generated in the previous editing session cannot be quickly reused locally.

[0006] Third, there is insufficient isolation between parent and child states. If the page structure data, style data, and multilingual translation data generated in the child editor only exist in the independent child page editing process, it is difficult to form a unified data lineage with the main editor component tree during the main page saving stage, resulting in abnormal translation aggregation, style serialization, and page data saving processes.

[0007] Fourth, undo and redo cross-instance routing is inaccurate. In scenarios with multiple editor instances coexisting or multiple datasets switching, if the system cannot identify the currently active editor instance, when the user triggers an Undo or Redo operation, the operation may be incorrectly applied to the history manager of inactive editors, causing cross-contamination of the history stacks of the main and child editors.

[0008] Fifth, when a single child editor instance is reused across multiple composite components, the issue of history stack inheritance between editing sessions of different composite components may arise. For example, the history of the child editor of the previous pop-up component may be misused by the subsequent pop-up component, causing the undo operation to revert to the editing state of a non-current composite component. [Summary of the Invention] To overcome the above problems, this invention proposes a master-child editor reuse method and system based on snapshot caching and context switching that can effectively solve the above problems.

[0009] The present invention provides a technical solution to the above-mentioned technical problems by offering a master-child editor reuse method based on snapshot caching and context switching. This method maintains a master editor instance and a child editor instance in parallel within the same host page. The master editor instance is used to edit the main page component tree, and the child editor instance is used to edit the internal page content of composite components within the main page component tree. The master editor instance and the child editor instance each have independent component models, style rule sets, history managers, and editing contexts.

[0010] This invention establishes a sub-editor manager. The sub-editor manager coordinates the opening, loading, cache querying, snapshot capture, snapshot writing, data write-back, session history isolation, and context restoration between the main editor instance and sub-editor instances. The sub-editor manager can be SubEditorManagerImpl.

[0011] The sub-editor manager internally maintains a cache mapping table. This cache mapping table is a key-value mapping structure, where the key is the composite component identifier and the value is a historical editing snapshot of the corresponding composite component. The composite component identifier can be a modalId. Taking a pop-up component as an example, the modalId can be atc_modal.

[0012] Historical edit snapshots include at least schema, translation, and source. schema stores page structure data and style rule data for the sub-editor. translation stores multilingual translation entries for components within the sub-editor. source stores the source identifier, which can be sub_editor_v1, used for subsequent translation aggregation filtering and data source identification.

[0013] When a user triggers the editing entry point of a composite component, the sub-editor manager receives an activation signal via the open interface, which carries the modalId. The sub-editor manager then queries the cache mapping table based on the modalId.

[0014] If the cache mapping table lookup matches, the sub-editor manager reads the corresponding cached data, such as cache[modalId].schema, and controls the sub-editor instance to execute the loadProjectData interface to load the corresponding schema into the sub-editor instance, forming a hot-start branch. Simultaneously, the sub-editor manager synchronizes the translation data from the cached data to the translation data storage area associated with the sub-editor instance, retaining the source field so that it can continue to participate in translation aggregation and source filtering during subsequent confirmation and saving stages.

[0015] If the cache mapping table lookup fails, the child editor manager controls the child editor instance to execute the `resetWithDefaultLayout` interface and load the default layout based on the composite component type. For example, when the composite component type is `lightbox`, the default pop-up layout template is loaded, forming a cold start branch.

[0016] After a warm or cold start, the child editor manager performs session isolation processing on the history manager of the child editor instance. This session isolation processing may include clearing, resetting, or re-baselining the child editor history manager, ensuring that historical records prior to loading historical edit snapshots or the default layout are not involved in the Undo and Redo operations of the current composite component's editing session. Therefore, even if the same child editor instance is reused by multiple different composite components, the problem of the previous composite component's history being mistakenly undone by the current composite component will not occur.

[0017] In another implementation, session isolation processing may also include saving or restoring the history state of sub-editors according to the composite component identifier. For example, the sub-editor manager can save the history state of sub-editors corresponding to different modalIds separately, restore the corresponding history state when the same modalId is opened again, and switch to another history state or initialize the history state when another modalId is opened. This can achieve history isolation between different composite components while maintaining the undo and redo experience within the composite component.

[0018] After a warm or cold start and session isolation are completed, the child editor manager sends an activation signal to the UI overlay controller. The UI overlay controller implements the Stack Layout mechanism, managing the visual presentation of the main editor and child editors through physical stacking rather than destruction and reconstruction.

[0019] When a child editor is active, the UI overlay controller only applies keep-alive hiding directives to the main editor container. These directives include the visual hiding directive `visibility:hidden` and the interaction-disabling directive `pointer-events:none`. Through this process, the main editor is hidden from the user's view and no longer receives user pointer interaction. However, its DOM structure, component state, currently selected component, scroll position, zoom state, style calculation cache, and history manager instance remain in memory, without triggering destruction or unloading lifecycle events.

[0020] The UI overlay controller also displays child editor overlays. Child editor overlays can be sub-editor-overlays. To prevent the main editor container's `visibility:hidden` from affecting child editor overlays, the child editor overlay is mounted to the root node of the host page's overlays, or at the same DOM level as the main editor container. The `visibility:hidden` and `pointer-events:none` properties only apply to the main editor container, not to the child editor overlay or its parent container.

[0021] The child editor overlay is absolutely positioned on top of the main editor container and its z-index is set to be higher than the main editor container. The child editor overlay takes over the user's focus, ensuring that the user can only interact with the child editor instance while the child editor is active.

[0022] The child editor manager also sends a switching activation signal to the context pointer switcher. The context pointer switcher can be implemented based on the React Context mechanism and maintains three state variables: mainEditor, editor, and isSubEditorActive. Here, mainEditor is a reference to the main editor instance, editor is a reference to the currently active editor instance, and isSubEditorActive is the child editor activation flag.

[0023] Initially, `editor` equals `mainEditor`, and `isSubEditorActive` is false. When a sub-editor is activated, the context pointer switcher switches `editor` to the sub-editor instance and sets `isSubEditorActive` to true. Since the settings panel, Header toolbar, save service, and history manager all read the `editor` variable through the context, downstream modules automatically switch the target editor instance to the sub-editor instance after this state switch.

[0024] This invention also includes an active editor router. The active editor router can be deployed within the Header toolbar component to receive user-initiated Undo and Redo operations and determine the corresponding history manager based on the currently active editor instance pointed to by the editor. When the editor points to a child editor instance, Undo and Redo operations only apply to the history manager of the child editor instance; when the editor points to the main editor instance, Undo and Redo operations only apply to the history manager of the main editor instance.

[0025] When a user finishes editing in a child editor instance and triggers a confirmation action, the child editor manager receives the user's confirmation signal through the apply interface. The child editor manager then calls the snapshot capture unit. The snapshot capture unit executes the collectEditorSnapshot procedure to extract the current editing snapshot from the child editor instance.

[0026] The current editing snapshot includes schema, translation, and source. schema is the project data, containing the component tree and style rules; translation is the multilingual translation entries for components within the sub-editor; and source is the source identifier, fixed or preset to sub_editor_v1.

[0027] The child editor manager writes the current editing snapshot to the cache map, for example, by executing cache.set(modalId,snapshot) to update the hot-start cache.

[0028] The child editor manager also synchronously writes the current editing snapshot to the data carrier of the corresponding composite component in the main editor instance. This data carrier can be the _subEditorData field. For example, setting the _subEditorData of the lightbox_001 component in the main editor to snapshot will attach the data generated by the child editor to the main editor component tree, forming a parent-child data lineage.

[0029] The writing of the _subEditorData field is executed as a system-level commit transaction during the sub-editor's confirmation phase, and is isolated from the user's drag-and-drop and layout operation history in the main editor instance or sub-editor instance. This prevents the system's write action from being mistakenly identified as an internal editing operation in the sub-editor, and also prevents it from polluting the normal operation history of the main editor.

[0030] In implementations requiring the child editor's confirmation action to be undone, the child editor manager records the writing of the _subEditorData field as a single compound transaction record in the main editor's history manager. This single compound transaction represents only the "confirm child editor editing result" commit action, without writing each of the multiple drag-and-drop, layout, and style adjustment operations within the child editor to the main editor's history manager. This allows users to undo a single confirmation commit while maintaining clear boundaries between the main and child editor history stacks.

[0031] After the writing is complete, the UI overlay controller closes the child editor overlay and removes the keep-alive hiding directives such as visibility:hidden and pointer-events:none from the main editor container, allowing the main editor to take over user interaction again.

[0032] The context pointer switcher performs a state rollback, restoring the editor to the primary editor instance and setting isSubEditorActive to false. The active editor router then restores the routing targets for Undo and Redo operations to the primary editor instance's history manager.

[0033] When a user triggers the sub-editor cancellation signal, the sub-editor manager does not capture the current editing snapshot, write the current editing content to the cache mapping table, or update the `_subEditorData` field of the corresponding composite component in the main editor. At this point, only the UI overlay controller closes the sub-editor overlay, and the context pointer switcher restores the editor to the main editor instance. This ensures that unconfirmed sub-editor edits do not pollute the confirmed cache and the main page component tree.

[0034] During system operation, when a composite component is deleted from the main page component tree, the sub-editor manager deletes the historical editing snapshot corresponding to the deleted composite component's identifier from the cache mapping table to prevent invalid cache from persisting. When a composite component is copied, the sub-editor manager generates a new composite component identifier for the copied composite component and copies, clears, or rebuilds the corresponding historical editing snapshot according to a preset copying strategy to prevent two composite components from sharing the same modalId, which could lead to data misuse in the sub-editor.

[0035] Furthermore, during the system initialization phase, the sub-editor manager can scan the main editor component tree, traversing all components with type=lightbox_001. If the corresponding component carries a _subEditorData field, it reads the historical schema or historical editing snapshot saved in that field and writes it to the cache mapping table to complete cache preheating. Through cache preheating, when a user opens a previously saved pop-up component for the first time, they can directly enter the hot start branch.

[0036] The present invention also provides a master-child editor reuse system based on snapshot caching and context switching, including a master editor instance, a child editor instance, a child editor manager, a cache mapping table, a snapshot acquisition unit, a UI overlay controller, a context pointer switcher, and an active editor router.

[0037] The main editor instance is used to edit the main page component tree. Child editor instances are used to edit the internal page content of composite components. The child editor manager is used to perform cache lookups, snapshot writing, child editor opening, session history isolation, confirming rollback, canceling rollback, and cache synchronization when components are deleted or copied. The cache map is used to store historical editing snapshots with modalId as the key. The snapshot capture unit is used to capture structured snapshots of child editor instances. The UI overlay controller is used to keep the main editor hidden and show the child editor overlay. The context pointer switcher is used to switch the reference to the currently active editor instance. The active editor router is used to route Undo and Redo operations to the history manager of the currently active editor instance.

[0038] Compared with the prior art, the master-child editor reuse method and system based on snapshot caching and context switching of the present invention have the following beneficial effects: 1. Reduce redundant initialization overhead. Sub-editor instances can be created and retained during system initialization. When the same composite component is opened a second time, the historical editing snapshot is directly hit through the cache mapping table. The previous editing state can be restored by calling the project data loading interface. There is no need to repeat the complete editor instantiation, DOM mounting, plugin registration and material loading process. The latency of opening a second time can be reduced to the millisecond level.

[0039] II. Achieve zero-state loss switching between the main editor and the sub-editor. While the sub-editor is active, the main editor uses a keep-alive hidden method to exit the user's visual and interactive focus, but its DOM structure, component states, history manager, selected state, zoom state, scroll position, and style calculation cache are all retained in memory. After the sub-editor is closed, the main editor can seamlessly restore the context it had before entering the sub-editor.

[0040] 3. Implement precise routing for Undo and Redo. The active editor router determines the history manager target based on the currently active editor instance reference, ensuring that undo and redo during the child editor's activity only affect the child editor's history stack, and undo and redo during the main editor's activity only affect the main editor's history stack. The two history stacks are independent of each other, avoiding cross-contamination.

[0041] IV. Implementing session isolation for sub-editors between different composite components. By performing clear, reset, re-baseline, or save and restore operations based on composite component identifiers on the history manager of sub-editor instances, history stack cross-utilization can be avoided when a single sub-editor instance is reused in multiple composite components.

[0042] 5. Achieve zero-intrusion context broadcasting. The settings panel, header toolbar, save service, and history manager call modules uniformly read the editor variable from the context pointer switcher, eliminating the need for each module to implement independent subscription switching logic. This helps reduce system modification costs and improve scalability.

[0043] VI. Ensure Data Lineage Integrity. After the sub-editor is confirmed, the current editing snapshot is simultaneously written to the cache mapping table and the _subEditorData field of the corresponding composite component in the main editor. This ensures that the schema, translation, and source generated by the sub-editor are saved uniformly along with the main editor component tree, which is beneficial for translation aggregation, style serialization, and page data persistence.

[0044] 7. Improve the reliability of child editor overlay display. Since the child editor overlay is mounted independently or set at the same level as the main editor container, the main editor container's `visibility:hidden` will not affect the display of the child editor overlay, thus avoiding the implementation risk that the child editor will also be hidden when the main editor is hidden.

[0045] 8. Enhance the editing capabilities of composite components. Compared with the traditional settings panel mode, the sub-editor instance can provide composite components such as pop-ups, drawer side drawers, and nested page blocks with the same or basically the same drag-and-drop, layout, component nesting, and history operation capabilities as the main editor. [Attached Image Description] Figure 1 This is a flowchart of the master-child editor reuse method based on snapshot caching and context switching according to the present invention; Figure 2 This is a flowchart illustrating the opening of a sub-editor in the master-sub-editor reuse method based on snapshot caching and context switching according to the present invention; Figure 3 This is an architecture diagram of the master-child editor reuse system based on snapshot caching and context switching, as presented in this invention.

Detailed Implementation Methods

[0046] It should be noted that in the embodiments of the present invention, all directional indications (such as up, down, left, right, front, back, etc.) are limited to relative positions on the specified view, rather than absolute positions.

[0047] Furthermore, in this invention, descriptions involving "first," "second," etc., are for descriptive purposes only and should not be construed as indicating or implying their relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this invention, "a plurality of" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0048] Please see Figures 1 to 3 The master-child editor reuse method based on snapshot caching and context switching of the present invention is applied to a low-code page building platform and includes the following steps: Initialize a main editor instance and a child editor instance within the same host page. The main editor instance is used to edit the main page component tree, and the child editor instance is used to edit the internal page content of the composite components in the main page component tree. The main editor instance and the child editor instance each have an independent history manager. A sub-editor manager is established, and a cache mapping table is maintained in the sub-editor manager. The cache mapping table uses the composite component identifier as the key and the historical editing snapshot of the corresponding composite component as the value. In response to the sub-editor activation signal of the composite component, the sub-editor manager receives the composite component identifier through the open interface and queries the cache mapping table based on the composite component identifier; If the cache mapping table query is successful, the historical editing snapshot corresponding to the composite component identifier is read, and the sub-editor instance is controlled to load the page structure data, style rule data and related business data in the historical editing snapshot to perform a hot start; If the cache mapping table lookup fails, the sub-editor instance is controlled to load the default layout corresponding to the type of the composite component in order to perform a cold start; After the child editor instance loads the historical editing snapshot or the default layout, the child editor manager performs session isolation processing on the history manager of the child editor instance, so that the child editor session of the current composite component is isolated from the child editor session of the previous composite component in the undo / redo history. By applying keep-alive and hiding processing only to the main editor container where the main editor instance is located through the UI overlay controller, the main editor container is visually hidden and prevented from receiving user interaction. At the same time, the DOM structure, component state, history manager instance, selected state, zoom state, scroll position and style calculation cache of the main editor instance are kept in memory. The sub-editor overlay is displayed through the UI overlay controller, so that the sub-editor overlay covers the main editor container in a way that is not affected by the keep-alive and hiding process of the main editor container and takes over the user interaction focus; The context pointer switcher switches the reference of the currently active editor instance from the main editor instance to the child editor instance, thereby switching downstream modules that depend on the reference of the currently active editor instance to the child editor instance. The active editor router reads the reference of the currently active editor instance and routes the undo or redo operation initiated by the user to the history manager corresponding to the currently active editor instance. In response to the sub-editor confirmation signal, the sub-editor manager calls the snapshot acquisition unit through the application interface to acquire the current editing snapshot from the sub-editor instance; The current edit snapshot is written to the cache mapping table and synchronously written to the sub-editor data carrier of the corresponding composite component in the main editor instance in the manner of system-level commit transaction or single composite transaction; The sub-editor overlay is closed, the keep-alive hiding process of the main editor container is removed, and the reference of the currently active editor instance is restored to the main editor instance through the context pointer switcher.

[0049] The composite component includes a pop-up component, a lightbox component, a drawer side drawer component, a nested page block component, a floating layer component, or a partial page fragment component. The composite component identifier is a unique identifier for the composite component in the main page component tree.

[0050] Both the historical edit snapshot and the current edit snapshot include at least schema, translation, and source; wherein, schema is used to store page structure data and style rule data, translation is used to store multilingual translation entries of components inside the sub-editor, and source is used to store source identifiers.

[0051] During a hot start, the sub-editor manager not only loads the schema into the sub-editor instance, but also synchronizes the translation to the translation data storage area associated with the sub-editor instance, and retains the source, so that the historical editing snapshot can continue to participate in translation aggregation and source filtering in the subsequent confirmation and saving stages.

[0052] The sub-editor manager is SubEditorManagerImpl, the open interface is the open interface, and the application interface is the apply interface. When the cache is hit, the sub-editor manager controls the sub-editor instance to execute the project data loading interface; when the cache is not hit, the sub-editor manager controls the sub-editor instance to execute the default layout reset interface.

[0053] The project data loading interface includes the loadProjectData interface, the default layout reset interface includes the resetWithDefaultLayout interface, and the snapshot collection unit collects the current editing snapshot from the sub-editor instance through the collectEditorSnapshot process.

[0054] After initializing the main editor instance and child editor instances, a cache warm-up step is also included: The sub-editor manager scans the component tree of the main editor instance; Iterate through pop-up components of type lightbox_001; Determine whether the pop-up component carries the _subEditorData field; If the _subEditorData field is included, the historical editing snapshots in the _subEditorData field are read and written to the cache mapping table according to the corresponding composite component identifier.

[0055] The keep-alive hiding process includes applying a visual hiding instruction and an interaction disabling instruction to the main editor container. The visual hiding instruction includes `visibility:hidden`, and the interaction disabling instruction includes `pointer-events:none`.

[0056] The sub-editor overlay is a sub-editor-overlay, which is mounted on the root node of the overlay of the host page, or at the same DOM level as the main editor container; the keep-alive hiding process only applies to the main editor container, and not to the sub-editor overlay or its parent container.

[0057] The sub-editor overlay is set using absolute positioning and configured with z-index to be a higher display layer than the main editor container.

[0058] The session isolation process includes: after the child editor instance loads the historical editing snapshot or default layout, performing clear, reset or re-baseline processing on the history manager of the child editor instance, so that the child editor history before the loading action does not participate in the undo / redo operation of the current composite component editing session.

[0059] The session isolation process includes: saving or restoring the history state of the sub-editor corresponding to the composite component identifier according to the composite component identifier, so that the undo and redo history of the sub-editors of different composite components are independent of each other.

[0060] The context pointer switcher is implemented based on the React Context mechanism and maintains three state variables: mainEditor, editor, and isSubEditorActive. MainEditor is a reference to the main editor instance, editor is a reference to the currently active editor instance, and isSubEditorActive is the sub-editor activation flag.

[0061] When the sub-editor instance is activated, the context pointer switcher switches the editor to the sub-editor instance and sets isSubEditorActive to true; when the sub-editor instance is closed, the context pointer switcher restores the editor to the main editor instance and sets isSubEditorActive to false.

[0062] The downstream module includes at least one of the following: settings panel, Header toolbar, history manager call module, and save service. The downstream module determines its operation object by reading the reference of the currently active editor instance.

[0063] The active editor router is deployed within the Header toolbar component; when the currently active editor instance references the child editor instance, the active editor router routes the undo or redo operation to the history manager of the child editor instance; when the currently active editor instance references the main editor instance, the active editor router routes the undo or redo operation to the history manager of the main editor instance.

[0064] The sub-editor data carrier is an extended field of the corresponding composite component in the main page component tree. The extended field is used to save the current editing snapshot, so that the page structure data, style rule data and multilingual translation data generated by the sub-editor are attached to the main page component tree.

[0065] The sub-editor data carrier is the _subEditorData field; when writing to the _subEditorData field, the writing is performed as a system-level commit transaction in the sub-editor confirmation phase, and is isolated from the user's drag-and-drop and layout operation history in the main editor instance or the sub-editor instance.

[0066] When it is necessary to make the sub-editor's confirmation action undone, the write to the _subEditorData field is recorded as a single composite transaction record in the history manager of the main editor instance, instead of writing multiple editing operations within the sub-editor instance to the history manager of the main editor instance one by one.

[0067] If a user triggers a sub-editor cancellation / closing signal, the sub-editor manager will not collect the current editing snapshot, write to the cache mapping table, or update the sub-editor data carrier. It will also control the UI overlay controller to close the sub-editor overlay and control the context pointer switcher to restore the reference of the currently active editor instance to the main editor instance.

[0068] When a composite component in the main page component tree is deleted, the sub-editor manager deletes the historical editing snapshot corresponding to the composite component identifier of the deleted composite component in the cache mapping table.

[0069] When a composite component in the main page component tree is copied, the sub-editor manager generates a new composite component identifier for the copied composite component, and copies, clears, or rebuilds the historical editing snapshot corresponding to the copied composite component according to a preset copying strategy.

[0070] When a child editor is activated, the UI overlay controller first applies a keep-alive hiding process to the main editor container, and then the context pointer switcher switches the reference of the currently active editor instance to the child editor instance to prevent user operations from being sent to the wrong editor instance.

[0071] When the child editor confirms the return, the child editor manager first captures and writes the current editing snapshot, then the UI overlay controller closes the child editor overlay, and the context pointer switcher restores the reference of the currently active editor instance to the main editor instance.

[0072] Both the main editor instance and the child editor instance are GrapesJS Editor instances. The page structure data in the current editing snapshot is GrapesJS project data, which includes the component tree and style rules.

[0073] This invention also provides a master-child editor reuse system based on snapshot caching and context switching, comprising: The main editor instance is used to edit the main page component tree in the low-code page building platform; A sub-editor instance, used to edit the internal page content of the composite component in the main page component tree; The child editor manager is used to respond to the child editor activation signal of the composite component, query the cache mapping table according to the composite component identifier, and control the child editor instance to load historical editing snapshots or default layouts according to the query results; A cache mapping table is used to store historical edit snapshots of the corresponding composite components, with the composite component identifier as the key. A snapshot acquisition unit is used to acquire a current editing snapshot from the sub-editor instance when the sub-editor is confirmed; A UI overlay controller is used to keep only the main editor container containing the main editor instance alive and hidden when the child editor instance is activated, and to display the child editor overlay that is not affected by the hidden state of the main editor container. A context pointer switcher is used to switch the reference to the currently active editor instance between the main editor instance and the child editor instance; The active editor router is used to route undo or redo operations to the history manager corresponding to the currently active editor instance.

[0074] The sub-editor manager is also used to write the current editing snapshot to the cache mapping table when the sub-editor is confirmed, and synchronously write it to the _subEditorData field of the corresponding composite component in the main editor instance as a system-level commit transaction or a single composite transaction.

[0075] The sub-editor manager is also used to perform at least one of the following processes on the history manager of the sub-editor instance after the sub-editor instance loads a history edit snapshot or default layout: clear, reset, rebase, save by composite component identifier, or restore by composite component identifier.

[0076] Specifically, this implementation method is applied to an e-commerce page building platform. This platform allows users to build pages containing pop-up lightboxes, side drawer drawers, and nested page blocks via a visual drag-and-drop interface. The pop-up component not only requires simple text or image configurations but also needs to support dragging and dropping images, buttons, product display components, text components, and layout containers within the pop-up.

[0077] In this implementation, Web represents a web application environment running on a browser; UI represents a user interface; CSS represents Cascading Style Sheets; DOM represents a Document Object Model; Schema represents structured page data used to describe the page component tree, component attributes, and style rules; Undo represents an undo operation; Redo represents a redo operation; Context represents a context state passing mechanism; and GrapesJS Editor represents a web visual editor instance.

[0078] The system in this embodiment includes a main editor instance, a sub-editor instance, a sub-editor manager, a cache mapping table, a snapshot capture unit, a UI overlay controller, a context pointer switcher, and an active editor router.

[0079] The main editor instance is used to edit the main page component tree. The main page component tree contains regular components and composite components. Composite components can be pop-up components, lightbox components, drawer side drawer components, or nested page block components.

[0080] Child editor instances are used to edit the internal page content of composite components. Child editor instances have independent editing contexts from the main editor instance, and each has its own component tree, style rule set, history manager, and plugin state.

[0081] The sub-editor manager can be SubEditorManagerImpl. The sub-editor manager is responsible for the creation and management of sub-editor instances, cache lookup, snapshot writing, instance access, open flow control, confirm / return flow control, cancel / return flow control, sub-editor history manager session isolation, and cache synchronization when deleting or copying composite components.

[0082] The cache mapping table is maintained by the sub-editor manager. The cache mapping table uses a key-value mapping structure. The key is `modalId`, which is a unique identifier for the pop-up component or other composite component. The value is the historical edit snapshot corresponding to that composite component. The historical edit snapshot is structured data, including at least `schema`, `translation`, and `source`.

[0083] `schema` is used to store GrapesJS project data, including the component tree and style rules. `translation` is used to store multilingual translation entries for components within the sub-editor instance. `source` is used to store the source identifier, which can be set to `sub_editor_v1` in this implementation.

[0084] The snapshot acquisition unit executes the collectEditorSnapshot process, extracting the current editing snapshot from the child editor instance. The field structure of the current editing snapshot is consistent with that of historical editing snapshots, so that it can be written to the cache mapping table and the main editor component tree.

[0085] The UI overlay controller is used to implement Stack Layout. Stack Layout means that the main editor container and child editor overlays are located in a stacked manner on the same host page. When a child editor overlay is active, it covers the main editor container, and the main editor container is not destroyed.

[0086] To avoid the keep-alive hiding directive affecting the child editor overlay, the child editor overlay is mounted on the overlay's root node or at the same DOM level as the main editor container. The overlay's root node is not a child node of the main editor container. Therefore, when the main editor container is set to `visibility:hidden`, the child editor overlay remains visible.

[0087] The context pointer switcher is implemented based on the React Context mechanism. The context pointer switcher maintains three key state variables: mainEditor, editor, and isSubEditorActive. mainEditor is a reference to the main editor instance, editor is a reference to the currently active editor instance, and isSubEditorActive is a boolean flag indicating the activation of the sub-editor.

[0088] The active editor router is deployed within the Header toolbar component. It is responsible for receiving Undo and Redo operations triggered by the user in the toolbar and routing them to the history manager corresponding to the editor instance currently pointed to by the editor.

[0089] During system initialization, builder.tsx executes the initialization process. First, it creates a main editor instance. The main editor instance can be a GrapesJS Editor instance, and it configures the material library, plugins, main editor history manager, and style manager. The history manager's maximumStackLength can be set to 500, or it can be set to other appropriate values ​​according to the platform configuration.

[0090] Next, create a child editor instance. The child editor instance has the same or nearly the same editing capabilities as the main editor instance, supporting drag-and-drop, layout, nested components, style settings, and history operations. The child editor instance has its own independent child editor history manager.

[0091] Next, instantiate the child editor manager and inject references to the main editor instance and the child editor instance into the child editor manager.

[0092] Subsequently, the sub-editor manager scans the component tree of the main editor instance, traversing all components with type=lightbox_001. If a lightbox_001 component carries a _subEditorData field, the sub-editor manager reads the historical schema or historical editing snapshot from that field and writes it to the cache mapping table using the modalId corresponding to that component as the key, thus completing cache preheating.

[0093] The context pointer switcher initializes the `editor` variable with the main editor instance, meaning `editor` is initially equal to `mainEditor`, and sets `isSubEditorActive` to `false`. The UI overlay controller initializes the child editor overlay to a hidden state, allowing the main editor container to be displayed normally and receive user interactions.

[0094] When a user clicks on the edit pop-up entry point of a pop-up component on the page, the open interface of the sub-editor manager is called, and it receives the modalId. For example, the modalId is atc_modal.

[0095] The child editor manager queries the cache mapping table. If cache["atc_modal"] exists in the cache mapping table, it enters the hot restart branch. The child editor manager reads cache["atc_modal"].schema and controls the child editor instance to call the loadProjectData interface to load the schema, restoring the child editor instance to the editing state after the last confirmation.

[0096] In the hot start branch, the child editor manager also reads cache["atc_modal"].translation and synchronizes it to the translation data storage area associated with the child editor instance; at the same time, it retains cache["atc_modal"].source for source identification and translation aggregation filtering in subsequent confirmation or saving stages.

[0097] If `cache["atc_modal"]` does not exist in the cache mapping table, the cold start branch is entered. The child editor manager controls the child editor instance to call the `resetWithDefaultLayout` interface and pass in the composite component type, such as `lightbox`, so that the child editor instance loads the default pop-up layout template.

[0098] After a child editor instance completes `loadProjectData` or `resetWithDefaultLayout`, the child editor manager performs session isolation on the child editor history manager. In one implementation, the child editor manager clears or resets the child editor history manager, causing the child editor instance to use the currently loaded content as its new history baseline.

[0099] Through the session isolation mechanism described above, if a user edits pop-up A first and then edits pop-up B, the Undo and Redo functions of pop-up B will not access the history of pop-up A. This avoids the cross-referencing of undo history when a single child editor instance is reused in multiple composite components.

[0100] In another implementation, the child editor manager can save the history state of the child editor according to its modalId. When the user opens the same modalId again, the corresponding history state is restored; when the user opens a different modalId, the history state corresponding to that modalId is switched to or a new history state is initialized. This approach is suitable for scenarios where undo / redo history needs to be continuously retained within the same composite component.

[0101] After a warm or cold start and session isolation are completed, the UI overlay controller applies keep-alive hiding directives to the main editor container. These directives include `visibility:hidden` and `pointer-events:none`. `visibility:hidden` visually hides the main editor container, while `pointer-events:none` prevents the main editor container from receiving user pointer events.

[0102] After applying the keep-alive hiding directive, the main editor instance remains fully preserved in memory, without triggering destruction, unloading, or rebuilding lifecycles. The main editor instance's component tree, selected state, zoom level, scroll position, style calculation cache, and main editor history manager are all retained.

[0103] The UI overlay controller displays the child editor overlay. The child editor overlay can be named `sub-editor-overlay`. It uses absolute positioning and sets its z-index to be higher than the main editor container's display hierarchy, thus overlaying the main editor container and taking over user focus.

[0104] Because the child editor overlay is mounted on the root node of the overlay, or is at the same DOM level as the main editor container, the `visibility:hidden` property of the main editor container will not propagate to affect the child editor overlay. This structure ensures that the child editor overlay remains visible and interactive even when the main editor container is hidden.

[0105] Subsequently, the context pointer switcher performs a state transition, setting `editor` as the child editor instance and setting `isSubEditorActive` to `true`. Since the settings panel, header toolbar, save service, and history manager all call modules that read the `editor` variable through the React Context, these downstream modules automatically switch their target to the child editor instance.

[0106] The active editor router updates its routing target based on the editor's current pointer. When the editor points to a child editor instance, the activeEditor is the child editor instance, and the UndoManager is the child editor's history manager. Therefore, when a user performs drag-and-drop, configuration, and style adjustments within a child editor instance, their operation history is written to the child editor's history manager, while the main editor's history manager remains unaffected.

[0107] After the user finishes editing the content within the pop-up window, they click the confirmation button. The child editor manager's apply interface is then called, for example, apply("atc_modal").

[0108] The child editor manager issues a capture command to the snapshot capture unit. The snapshot capture unit executes `collectEditorSnapshot`, using the child editor instance as the capture object, to capture the current editing snapshot.

[0109] The current edit snapshot includes schema, translation, and source. schema is GrapesJS project data, storing the component tree and style rules in JSON format. translation contains the multilingual translation entries for components within the sub-editor instance. source is the source identifier, fixed or preset to sub_editor_v1 in this implementation, used for subsequent translation aggregation filtering.

[0110] The child editor manager writes the current editing snapshot to the cache mapping table. For example, executing `cache.set("atc_modal", snapshot)` updates the hot-reload cache for the pop-up corresponding to `atc_modal`.

[0111] The sub-editor manager also synchronously writes the sub-editor data carrier to the corresponding lightbox_001 component in the main editor instance. In this implementation, the sub-editor data carrier is the _subEditorData field, which means that the _subEditorData of the lightbox_001 component is set to snapshot. Thus, the schema, translation, and source generated by the sub-editor instance are attached to the component tree of the main editor instance.

[0112] The aforementioned `_subEditorData` field is written as a system-level commit transaction. This system-level commit transaction is not treated as drag-and-drop, layout, or style adjustment operations performed by the user within the child editor instance, nor is it directly mixed into the child editor's history manager. This avoids confusion between the editing history within the child editor and the main editor component tree write-back actions.

[0113] In one implementation, system-level commit transactions are not written to the main editor's history manager, but are instead updated as persistent data after confirmation. This approach is suitable for scenarios where the confirmation button is considered to save the content of the child editor.

[0114] In another implementation, system-level commit transactions can be recorded as a single compound transaction in the main editor's history manager. This single compound transaction represents only the overall action of "confirming the sub-editor's editing results and writing them to _subEditorData". When the user returns to the main editor instance and executes Undo, the confirmation commit can be undone all at once, but multiple drag-and-drop and layout operations within the sub-editor will not be replayed or undone item by item.

[0115] After the snapshot is written, the UI overlay controller closes the child editor overlay and removes `visibility:hidden` and `pointer-events:none` from the main editor container. The main editor container becomes visible again and resumes receiving user interactions.

[0116] The context pointer switcher performs a state rollback, restoring the editor to the main editor instance and setting isSubEditorActive to false. The active editor router, following the editor change, restores the activeEditor to the main editor instance, and Undo and Redo operations are rerouted to the main editor history manager.

[0117] During the above process, the main editor instance is not destroyed while the child editor instance is active, therefore its history stack is not cleared. Even if the user performs a large number of editing operations within the child editor instance, upon returning to the main editor instance, Undo and Redo operations can still be performed on the sequence of operations performed by the main editor instance before entering the child editor.

[0118] When a user clicks Cancel, Close, or Back in a sub-editor instance without confirmation, the sub-editor manager enters the Cancel / Close path. In this path, the sub-editor manager does not call the snapshot capture unit to capture the current editing snapshot, does not execute `cache.set`, and does not update the `_subEditorData` field of the corresponding composite component in the main editor instance.

[0119] In the cancel-close path, the UI overlay controller closes the child editor overlay and removes the keep-alive hidden directive from the main editor container. The context pointer switcher restores the editor to the main editor instance and sets isSubEditorActive to false. The active editor router restores the Undo and Redo operation routes to the main editor history manager. Thus, unconfirmed child editor edits do not pollute the cache map or the main page component tree.

[0120] The process of opening a child editor includes: the user sends an activation signal carrying a modalId; the child editor manager calls the open interface; the cache mapping table is queried; if the cache is hit, the cache schema is loaded and the translation and source are synchronized; if the cache is not hit, the default layout is reset and a cold start is initiated; then, session isolation is performed on the child editor history manager; the UI overlay controller activates the child editor overlay; the context pointer switcher switches the editor to the child editor instance; and the active editor router routes Undo and Redo operations to the child editor history manager.

[0121] The snapshot data in the cache mapping table corresponds to the child editor data carrier in the main editor instance. The cache mapping table is used for hot-start reading when the child editor is opened again, and the child editor data carrier is used for saving and serializing along with the main editor component tree. Together, they ensure that the child editor data can be quickly reused while still belonging to the main editor component tree.

[0122] The sub-editor closing paths include a confirm branch and a cancel branch. In the confirm branch, the sub-editor manager takes a snapshot of the current edit, writes it to the cache map table, and writes it to the _subEditorData field as a system-level commit transaction or a single compound transaction. In the cancel branch, the sub-editor manager does not write to the cache map table or update the _subEditorData field; it only performs a UI rollback and a context rollback.

[0123] When a composite component is deleted, the sub-editor manager removes the corresponding historical editing snapshot from the cache mapping table based on the modalId of the deleted composite component. When a composite component is copied, the sub-editor manager generates a new modalId for the copied composite component and processes the corresponding snapshot according to a preset copying strategy. The preset copying strategy can be copying the original snapshot, clearing the snapshot, or generating a new snapshot based on the original snapshot.

[0124] In this implementation, the master and child editors have a collaborative relationship with the cache mapping table. The cache mapping table acts as a data bridge between the master editor instance and the child editor instance. Its content is collected by the snapshot acquisition unit and written by the child editor manager. It is read when the user opens the composite component and written when the user confirms the child editor's edit content. This separation of read and write timing ensures the integrity and consistency of the cached data.

[0125] The UI overlay controller and the context pointer switcher work in tandem. When a child editor is active, the UI overlay controller first blocks user interaction with the main editor instance at the DOM interaction layer, and then the context pointer switcher switches the editor at the logic layer. This ensures that the user can only interact with the currently active editor instance at any given time, avoiding inconsistencies between user focus and logical context.

[0126] The active editor router and the keep-alive hiding mechanism are coordinated. Because the history stack of the main editor instance is not cleared while in keep-alive state, and the active editor router routes Undo and Redo operations during the child editor's activation only to the child editor's history manager, the main editor's history stack and the child editor's history stack are isolated from each other and do not interfere with each other.

[0127] The child editor history manager works in tandem with session isolation. By performing history manager clearing, resetting, rebaselining, or restoration by modalId after loadProjectData or resetWithDefaultLayout, child editor instances can be reused by multiple composite components without polluting the histories of different composite components.

[0128] During the page saving phase, the saving service traverses the component tree of the main editor instance. When it reaches the lightbox_001 component or other composite components carrying the _subEditorData field, the saving service serializes and commits the schema, translation, and source from _subEditorData along with the main page data. In this way, the page structure, style rules, and multilingual translation entries within the sub-editor can all be included in the main page saving process.

[0129] The composite component in this embodiment is not limited to a pop-up component; it can also be a drawer side drawer component, a nested page block component, a floating layer component, a partial page fragment component, or other components that require independent page editing capabilities. The composite component identifier is not limited to modalId; it can also use a unique component ID, component path, shortcut key, or other data that can uniquely identify the composite component.

[0130] In this embodiment, both the main editor instance and the child editor instance can be GrapesJS Editor instances, or they can be other web visual editor instances that support component trees, style rules, history managers, and project data loading capabilities.

[0131] The context pointer switcher in this embodiment can be implemented based on the React Context mechanism, or it can be implemented based on other state management containers, event buses, or dependency injection containers. As long as a unified reference to the currently active editor instance can be provided to the settings panel, Header toolbar, save service, and history manager calling modules, the context switching function of this invention can be implemented.

[0132] The keep-alive hiding method in this implementation is not limited to the combination of `visibility:hidden` and `pointer-events:none`. Equivalent visual hiding and interaction blocking methods can also be used, provided that the DOM structure containing the main editor instance is not destroyed, the main editor state is not cleared, and the user cannot interact with the main editor instance.

[0133] In this embodiment, the sub-editor overlay is not limited to being implemented through absolute positioning; it can also be implemented through fixed positioning or other stacking layout methods. As long as the sub-editor overlay is not affected by the hiding of the main editor container and can cover the main editor container and take over the user's interactive focus during the activation of the sub-editor, the overlay control function of this invention can be realized.

[0134] In this embodiment, the sub-editor instance can be a single globally reused instance, or multiple sub-editor instances can be configured according to the composite component type, or multiple sub-editor instances can be managed through a sub-editor instance pool. As long as the sub-editor manager can query the cache mapping table through the composite component identifier and determine the currently active editor instance through the context pointer switcher and the active editor router, it belongs to an implementable variation of the present invention.

[0135] The core of this invention does not lie in using caching, CSS hiding, React Context, or UndoManager alone, but in integrating snapshot caching, main editor keep-alive hiding, independent overlay display of child editors, context pointer switching, routing of active Undo and Redo instances, isolation of child editor session history, and child editor snapshot writing back to the main component tree as a continuous and collaborative control chain. This control chain simultaneously solves the problems of repeated initialization of child editors, loss of main editor state, history stack pollution, broken parent-child data lineage, and cross-use of histories from different composite components.

[0136] The above embodiments illustrate the main technical concept of the present invention. Equivalent substitutions made by those skilled in the art, without departing from the core solution of the present invention, for interface names, field names, editor frameworks, component types, state variable names, UI layering implementation methods, history manager isolation methods, and history manager invocation methods, should all fall within the protection scope of the present invention.

Claims

1. A master-child editor reuse method based on snapshot caching and context switching, applied to a low-code page building platform, characterized by: Includes the following steps: Initialize a main editor instance and a child editor instance within the same host page. The main editor instance is used to edit the main page component tree, and the child editor instance is used to edit the internal page content of the composite components in the main page component tree. The main editor instance and the child editor instance each have an independent history manager. A sub-editor manager is established, and a cache mapping table is maintained in the sub-editor manager. The cache mapping table uses the composite component identifier as the key and the historical editing snapshot of the corresponding composite component as the value. In response to the sub-editor activation signal of the composite component, the sub-editor manager receives the composite component identifier through the open interface and queries the cache mapping table based on the composite component identifier; If the cache mapping table query is successful, the historical editing snapshot corresponding to the composite component identifier is read, and the sub-editor instance is controlled to load the page structure data, style rule data and related business data in the historical editing snapshot to perform a hot start; If the cache mapping table lookup fails, the sub-editor instance is controlled to load the default layout corresponding to the type of the composite component in order to perform a cold start; After the child editor instance loads the historical editing snapshot or the default layout, the child editor manager performs session isolation processing on the history manager of the child editor instance, so that the child editor session of the current composite component is isolated from the child editor session of the previous composite component in the undo / redo history. By applying keep-alive and hiding processing only to the main editor container where the main editor instance is located through the UI overlay controller, the main editor container is visually hidden and prevented from receiving user interaction. At the same time, the DOM structure, component state, history manager instance, selected state, zoom state, scroll position and style calculation cache of the main editor instance are kept in memory. The sub-editor overlay is displayed through the UI overlay controller, so that the sub-editor overlay covers the main editor container in a way that is not affected by the keep-alive and hiding process of the main editor container and takes over the user interaction focus; The context pointer switcher switches the reference of the currently active editor instance from the main editor instance to the child editor instance, thereby switching downstream modules that depend on the reference of the currently active editor instance to the child editor instance. The active editor router reads the reference of the currently active editor instance and routes the undo or redo operation initiated by the user to the history manager corresponding to the currently active editor instance. In response to the sub-editor confirmation signal, the sub-editor manager calls the snapshot acquisition unit through the application interface to acquire the current editing snapshot from the sub-editor instance; The current edit snapshot is written to the cache mapping table and synchronously written to the sub-editor data carrier of the corresponding composite component in the main editor instance in the manner of system-level commit transaction or single composite transaction; The sub-editor overlay is closed, the keep-alive hiding process of the main editor container is removed, and the reference of the currently active editor instance is restored to the main editor instance through the context pointer switcher.

2. The master-child editor reuse method based on snapshot caching and context switching as described in claim 1, characterized in that, The composite component includes a pop-up component, a lightbox component, a drawer side drawer component, a nested page block component, a floating layer component, or a partial page fragment component. The composite component identifier is a unique identifier for the composite component in the main page component tree. Both the historical editing snapshot and the current editing snapshot include at least a schema, translation, and source. The schema is used to store page structure data and style rule data, the translation is used to store multilingual translation entries of the components inside the sub-editor, and the source is used to store the source identifier. When performing a hot start, the sub-editor manager not only loads the schema into the sub-editor instance, but also synchronizes the translation to the translation data storage area associated with the sub-editor instance, and retains the source, so that the historical editing snapshot can continue to participate in translation aggregation and source filtering in the subsequent confirmation and saving stages.

3. The master-child editor reuse method and system based on snapshot caching and context switching as described in claim 1, characterized in that, The sub-editor manager is SubEditorManagerImpl, the open interface is the open interface, and the apply interface is the apply interface. When the cache is hit, the sub-editor manager controls the sub-editor instance to execute the project data loading interface. When the cache is not hit, the sub-editor manager controls the sub-editor instance to execute the default layout reset interface. The project data loading interface includes the loadProjectData interface, and the default layout reset interface includes the resetWithDefaultLayout interface. The snapshot collection unit collects the current editing snapshot from the sub-editor instance through the collectEditorSnapshot process.

4. The master-child editor reuse method based on snapshot caching and context switching as described in claim 1, characterized in that, After initializing the main editor instance and child editor instances, a cache warm-up step is also included: The sub-editor manager scans the component tree of the main editor instance; Iterate through pop-up components of type lightbox_001; Determine whether the pop-up component carries the _subEditorData field; If the _subEditorData field is included, the historical editing snapshots in the _subEditorData field are read and written to the cache mapping table according to the corresponding composite component identifier.

5. The master-child editor reuse method based on snapshot caching and context switching as described in claim 1, characterized in that, The keep-alive hiding process includes applying a visual hiding instruction and an interaction disabling instruction to the main editor container. The visual hiding instruction includes `visibility:hidden`, and the interaction disabling instruction includes `pointer-events:none`.

6. The master-child editor reuse method based on snapshot caching and context switching as described in claim 1, characterized in that, The sub-editor overlay is a sub-editor-overlay, which is mounted on the root node of the overlay of the host page, or at the same DOM level as the main editor container. The keep-alive hiding process only applies to the main editor container, not to the sub-editor overlay or its parent container. The sub-editor overlay is set using absolute positioning and configured with z-index to be higher than the display level of the main editor container.

7. The master-child editor reuse method based on snapshot caching and context switching as described in claim 1, characterized in that, The session isolation process includes: after the child editor instance loads the historical editing snapshot or default layout, performing clear, reset or re-baseline processing on the history manager of the child editor instance, so that the child editor history before the loading action does not participate in the undo / redo operation of the current composite component editing session.

8. The master-child editor reuse method based on snapshot caching and context switching as described in claim 1, characterized in that, The context pointer switcher is implemented based on the React Context mechanism and maintains three state variables: mainEditor, editor, and isSubEditorActive. mainEditor is a reference to the main editor instance, editor is a reference to the currently active editor instance, and isSubEditorActive is a flag indicating the activation of a sub-editor. When a sub-editor instance is activated, the context pointer switcher switches the editor to the sub-editor instance and sets isSubEditorActive to true. When the sub-editor instance is closed, the context pointer switcher restores the editor to the main editor instance and sets isSubEditorActive to false.

9. A master-child editor reuse system based on snapshot caching and context switching, characterized in that, include: The main editor instance is used to edit the main page component tree in the low-code page building platform; A sub-editor instance, used to edit the internal page content of the composite component in the main page component tree; The child editor manager is used to respond to the child editor activation signal of the composite component, query the cache mapping table according to the composite component identifier, and control the child editor instance to load historical editing snapshots or default layouts according to the query results; A cache mapping table is used to store historical edit snapshots of the corresponding composite components, with the composite component identifier as the key. A snapshot acquisition unit is used to acquire a current editing snapshot from the sub-editor instance when the sub-editor is confirmed; A UI overlay controller is used to keep only the main editor container containing the main editor instance alive and hidden when the child editor instance is activated, and to display the child editor overlay that is not affected by the hidden state of the main editor container. A context pointer switcher is used to switch the reference to the currently active editor instance between the main editor instance and the child editor instance; The active editor router is used to route undo or redo operations to the history manager corresponding to the currently active editor instance.

10. The master-child editor reuse system based on snapshot caching and context switching as described in claim 9, characterized in that, The sub-editor manager is also used to write the current editing snapshot to the cache mapping table when the sub-editor is confirmed, and synchronously write it to the _subEditorData field of the corresponding composite component in the main editor instance as a system-level commit transaction or a single composite transaction.

Images