Cross-platform application system supporting rich text editing and related method

Abstract

The invention relates to a cross-platform application system supporting rich text editing and a related method. The system comprises a presentation layer, a business layer and a bridging layer, and the presentation layer is constructed based on a declarative user interface framework and used for rendering a native user interface and responding to user interaction; the business layer runs in a webpage view container and is used for bearing and running a rich text editor which is packaged into a local static resource bundle; the bridging layer is respectively in communication connection with the presentation layer and the service layer and is used for realizing bidirectional message communication and data exchange between the presentation layer and the service layer; wherein the presentation layer is configured to convert user operation into a standard command and send the standard command to the business layer through the bridging layer; the business layer is configured to execute a standard command and actively send a state event to the presentation layer through the bridging layer; the system encapsulates the rich text editing capability of the business layer into a rich text editing service capable of being called by the presentation layer through the bridging layer, so that the original experience and rich text editing functions are considered in application mixed development.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a cross-platform application system and related methods that support rich text editing. Background Technology

[0002] Rich text editing, as a core function of mobile applications, has always faced the challenge of balancing development efficiency, feature richness, and native user experience. Especially in cross-platform development scenarios, how to deeply integrate the editing capabilities of web technologies with the interactive experience of native systems has been a long-standing technical challenge in this field.

[0003] In related technologies, development using pure native components requires separate development for different platforms, resulting in high development costs. While pure WebView embedding solutions offer high development efficiency, they suffer from slow startup speeds, high memory consumption, and significant differences in interactive experience compared to native applications. When developing with native components from cross-platform frameworks, significant simplifications or cuts are made to maintain the framework's versatility and performance, making it difficult to meet the rich text editing needs in complex scenarios. These technologies present a dilemma: pursuing a native experience at the expense of functionality and efficiency, or pursuing functionality and efficiency at the expense of a native experience.

[0004] Therefore, there is an urgent need for an application system that integrates the rich editing capabilities enabled by Web technologies with the smooth interactive capabilities provided by native systems. Summary of the Invention

[0005] Therefore, it is necessary to address the aforementioned technical issues by providing a cross-platform application system and related methods that support rich text editing, enabling hybrid application development to balance native user experience with rich text editing functionality.

[0006] To address the aforementioned technical issues, firstly, a cross-platform application system supporting rich text editing is provided, comprising a presentation layer, a business layer, and a bridging layer: The presentation layer is built on a declarative user interface framework and is used to render the native user interface and respond to user interactions. The business layer runs in a web page view container and is used to host and run a rich text editor packaged as a local static resource package. The bridging layer communicates with both the presentation layer and the business layer to enable bidirectional message communication and data exchange between them. Specifically, the presentation layer converts received user operation instructions into standard commands and sends them to the business layer through the bridging layer. The business layer executes the standard commands and actively sends status events to the presentation layer through the bridging layer. The system encapsulates the rich text editing capabilities of the business layer into a rich text editing service that can be called by the presentation layer through the bridging layer.

[0007] To address the aforementioned technical issues, a second aspect provides a method for constructing a cross-platform application system that supports rich text editing. This method includes: Initialize the runtime environment of the target project based on the declarative user interface framework; configure the webpage view container component in the target project to host the business layer; import the rich text editor-related dependency packages and resource files, and package them into a local static resource package that can be loaded by the webpage view container to prepare business layer resources; set up native controls for receiving user operation commands and an editing area container component for hosting the webpage view container to develop the native user interface and user interaction module of the presentation layer; establish a bridge layer connecting the presentation layer and the business layer; configure the bridge layer to implement bidirectional message communication and data exchange between the presentation layer and the business layer. The process involves several steps: First, the presentation layer is configured to convert user actions into standard commands and send them to the business layer via the bridging layer. Second, the business layer is configured to execute standard commands and actively send status events to the presentation layer via the bridging layer. The configuration of the webpage view container component includes: determining the application platform type, which includes a first platform type and a second platform type; third, in response to the application platform type being the first platform type, configuring the first network view corresponding to the first platform and enabling script execution permissions, allowing cross-domain access, and file access; and fourth, in response to the application platform type being the second platform type, configuring the second network view corresponding to the second platform and enabling script execution permissions, setting a caching mode that allows cross-domain access and file access.

[0008] To address the aforementioned technical problems, a third aspect provides a method for implementing rich text editing in a cross-platform application system. Based on any of the aforementioned cross-platform application systems supporting rich text editing, the method includes: In response to the native user interface module and / or user interaction module receiving user operation instructions in the presentation layer, the user operation instructions and / or user interaction instructions are converted into standard commands and sent to the business layer via the bridge layer. In response to the editing operation processing module in the business layer receiving the standard commands, the standard commands are forwarded to the rich text editor core processing module for execution. In response to the rich text editor core processing module executing the standard commands, triggering an internal state change, the editing operation processing module listens for this internal state change and actively sends it as a state event to the presentation layer via the bridge layer. In response to the state management module in the presentation layer receiving the state event, the native user interface module and user interaction module are updated according to the state event. The display state of the block; wherein, in response to the native user interface module of the presentation layer receiving user operation instructions and / or the user interaction module receiving user interaction instructions, the user operation instructions and / or user interaction instructions are converted into standard commands, and the standard commands are sent to the business layer via the bridging layer, including: in response to the native control in the native user interface module receiving user operation instructions, sending the user operation instructions to the state management module; in response to the editing area container component in the user interaction module receiving user interaction instructions, sending the user interaction instructions to the state management module; in response to the state management module receiving user operation instructions and / or user interaction instructions, converting the user operation instructions and / or user interaction instructions into standard commands conforming to a predetermined communication protocol, and sending the standard commands to the business layer via the bridging layer.

[0009] To address the aforementioned technical problems, a fourth aspect provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to perform the following steps: the processor executes the computer program to perform the steps of the methods described in the second and / or third aspects.

[0010] In order to solve the above-mentioned technical problems, in a fifth aspect, this application provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the steps of the methods of the second and / or third aspects described above.

[0011] Unlike existing technologies, this application presents a cross-platform application system supporting rich text editing, comprising a presentation layer, a business layer, and a bridging layer. The presentation layer is built on a declarative user interface framework and is used to render the native user interface and respond to user interactions. The business layer runs in a web page view container and is used to host and run a rich text editor packaged as a local static resource package. The bridging layer communicates with both the presentation layer and the business layer to enable bidirectional message communication and data exchange between them. Specifically, the presentation layer is configured to convert user operations into standard commands and send them to the business layer through the bridging layer; the business layer is configured to execute standard commands and actively send status events to the presentation layer through the bridging layer; the system encapsulates the rich text editing capabilities of the business layer into a rich text editing service that can be called by the presentation layer through the bridging layer.

[0012] Thus, by constructing a three-layer architecture of presentation layer, business layer, and bridging layer, the native interactive interface based on a declarative user interface framework (presentation layer) and the rich text editor packaged as a local static resource package (business layer) are deeply integrated through a standardized communication mechanism (bridging layer), realizing the service-oriented encapsulation of rich text editing capabilities. This enables the system to possess both native-level user experience and performance while maintaining the development efficiency and functional breadth of Web technologies. Ultimately, it solves the technical challenge of balancing feature richness and user experience in hybrid development, achieving a balance between native experience and rich text editing functionality in hybrid application development. Attached Figure Description

[0013] To more clearly illustrate the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0014] Figure 1 This is a schematic diagram of the structure of a cross-platform application system that supports rich text editing in one embodiment; Figure 2 This is a flowchart illustrating a method for constructing a cross-platform application system that supports rich text editing in one embodiment. Figure 3 This is a flowchart illustrating a method for implementing rich text editing in a cross-platform application system in one embodiment; Figure 4 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation

[0015] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0016] Rich text editing, as a core function of mobile applications (such as note-taking, email, and office collaboration software), has always faced the challenge of balancing development efficiency, feature richness, and native user experience. Especially in cross-platform development scenarios, how to deeply integrate the editing capabilities of web technologies with the interactive experience of native systems has long been a technical challenge in this field.

[0017] Currently, all mainstream technological approaches in the industry have inherent limitations: Pure native development solution: Deeply customized based on components such as iOS UITextView or Android EditText. While this solution can achieve an ultimate native interactive experience, it requires double the development resources for different operating systems, resulting in significant drawbacks such as high development costs, long development cycles, and slow feature iteration.

[0018] Pure WebView embedding solution: Directly embed a mature web editor (such as Quill.js, TinyMCE). While this approach can quickly obtain a fully functional editor, the browser kernel of WebView results in slow application startup, high memory consumption, and its interaction logic is incompatible with the native environment, causing a fragmented user experience and sluggish operation feedback, making it difficult to meet the needs of immersive editing.

[0019] Cross-platform framework native component solution: This solution uses community editor components from frameworks such as React Native and Flutter. While attempting a compromise, to ensure framework performance and versatility, its component functionality is highly simplified, resulting in insufficient capabilities for advanced editing scenarios such as complex formatting, tables, and code blocks, making it difficult to support the complex needs of enterprise applications.

[0020] In summary, existing technologies face a dilemma: pursuing a native user experience sacrifices functionality and efficiency, while pursuing functionality and efficiency sacrifices the native user experience. Therefore, the field urgently needs an innovative system architecture that can fundamentally break down the barriers between these technological paths and achieve a deep integration of web-level editing capabilities and native-level interactive experiences.

[0021] Please see Figure 1 , Figure 1 This is a schematic diagram of the structure of a cross-platform application system that supports rich text editing, as described in this application. The system includes a presentation layer, a business layer, and a bridging layer.

[0022] The presentation layer is built on a declarative user interface framework and is used to render native user interfaces and respond to user interactions.

[0023] In traditional hybrid development solutions, the UI layer is often tightly coupled with the web business layer, or the use of web technologies for rendering leads to a poor user experience. How to build a UI layer that provides a pure native user experience while efficiently decoupling from web business logic is a technical challenge in this field. To achieve this, this application constructs an independent presentation layer. This presentation layer is the interface through which the entire system directly interacts with the user. Its core design principle is to utilize a declarative user interface framework to achieve a truly native visual and interactive experience, while separating it from the core editing business logic.

[0024] The presentation layer is built on a cross-platform declarative user interface framework. This declarative user interface framework is a hybrid development framework that converts the declarative UI framework into native UI components for rendering. It provides an interface for bidirectional communication with the web page view container. Developers only need to describe the appearance (UI) that the current user interface should have. When the state changes, the framework will automatically and efficiently update the user interface to that state.

[0025] Cross-platform declarative user interface frameworks can be frameworks like React Native, Flutter (which achieves a similar architecture through plugins such as flutter_inappWebview), and NativeScript, all of which possess equivalent declarative features and native rendering capabilities. These frameworks use a unified programming language (such as JavaScript, Dart, or Kotlin) to write UI logic, but the final rendered UI components are platform-native (such as UIView on iOS or View on Android), rather than web page elements in WebView. This ensures that the application's appearance, gestures, and animations remain highly consistent with other parts of the operating system.

[0026] like Figure 1 As shown, the presentation layer includes a native user interface module, a user interaction module, and a state management module. The native user interface module communicates with the state management module to provide and manage native controls and receive user operation commands on these controls. The user interaction module also communicates with the state management module to provide native view components that carry the webpage view container for the business layer and receive user interaction commands within the native view. The state management module communicates with the bridging layer to convert user operation commands and user interaction commands into standard commands in a preset format and sends these standard commands to the bridging layer. The state management module receives state events transmitted through the bridging layer and updates the display state of the native user interface module and the user interaction module based on these state events.

[0027] Specifically, the native user interface module provides and manages native controls such as toolbar buttons (e.g., bold, italic, insert image), format drop-down menus, title bars, and sidebars. The native user interface module communicates with the state management module to receive user operation instructions on the native controls (e.g., the user clicks the bold button), but does not process the business logic of these instructions. Instead, it immediately sends the instruction event to the state management module.

[0028] The user interaction module hosts and manages the native view components of the core editing area. It provides a native window that displays the rich text editor interface of the web business layer through a built-in web view container. The user interaction module communicates with the state management module. Its main responsibility is to receive and forward user interaction commands within the native view. These commands are typically not directly handled by the web editor in the business layer, or require priority interception by the native layer. For example, it listens for and forwards long-press gestures within the editing area to trigger the native context menu.

[0029] The state management module is responsible for receiving instructions from the native user interface module and the user interaction module, and then converting these instructions into standard commands in a preset format. These standard commands can be structured JSON objects. After obtaining the standard commands, the state management module sends them to the business layer through the bridging layer. The state management module also receives state events transmitted through the bridging layer and parses these events to update the display state of the native user interface module and the user interaction module accordingly.

[0030] The presentation layer is responsible for rendering the native user interface. Specifically, it doesn't draw the interface through WebView or HTML / CSS, but instead generates visual elements composed of native platform UI components by calling the APIs of the aforementioned declarative framework. For example, the bold and italic buttons in the toolbar are native button components rendered by the framework (such as iOS's UIButton and Android's Button). The editing area container is a highly customized native view component that internally hosts a WebView used to display the web business layer. The container itself (including borders, background, etc.) is a native settings panel, preview interface, etc., all constructed from native list, switch, slider, and text label components. This design ensures that all visual elements perceived by the user are identical to those in the mobile operating system's built-in applications, achieving a native-level visual experience.

[0031] The business layer runs in the web page view container and is used to host and run the rich text editor that is packaged as a local static resource package.

[0032] The business layer includes a rich text editor core processing module, a document model management module, and an editing operation processing module. The rich text editor core processing module communicates with the document model management module to load and run the rich text editor, providing core logic processing capabilities for rich text editing. The document model management module communicates with the editing operation processing module to manage local static resource packages and is responsible for the initialization and resource scheduling of the rich text editor. The editing operation processing module communicates with the bridging layer to receive standard commands transmitted through the bridging layer, forward the standard commands to the rich text editor core processing module for execution, and monitor the internal state changes of the rich text editor core processing module, sending the internal state changes as state events to the bridging layer.

[0033] The business layer in this application encapsulates complete rich text editing capabilities. Built on Web technologies, this layer does not access remote servers but runs as an offline engine within a web page view container within the application. The web view container provides the business layer with an isolated and controllable browser runtime environment, enabling it to execute JavaScript and render HTML and CSS files.

[0034] The rich text editor hosted by the business layer is packaged as a local static resource package. This means that all the editor's code (HTML, JavaScript, CSS), icons, and font files are pre-downloaded, built, and packaged into the mobile application's installation package during the application compilation phase. When the application starts, the business layer directly loads the local HTML entry file via a protocol, achieving the core advantages of instant startup and offline editing, completely eliminating network latency and instability.

[0035] By setting up a rich text editor processing core module at the business layer to load and run the rich text editor, the rich text editor library is instantiated. This allows for handling document creation, deletion, and retrieval, as well as the insertion of complex content such as tables and links, by calling the underlying API of the rich text editor processing core module. The rich text editor processing core module establishes a communication connection with the document model management module to obtain initialization configuration and resource support from the document management module, ensuring the editor can be started correctly. In essence, the rich text editor processing core module provides the ability to load and run the rich text editor, while the editor itself is the tool used to perform specific rich text editing operations.

[0036] The document model management module manages local static resource packages and is responsible for the initialization and resource scheduling of the rich text editor, so that the local static resource packages can be correctly found and loaded by the web page view container. It communicates with the editing operation processing module to provide a stable operating environment and the required data model for the editing operation processing module.

[0037] The editing operation processing module serves as both the entry and exit point for communication between the business layer and the external environment (via the bridging layer). It is crucial for enabling bidirectional communication, primarily receiving standard commands transmitted via the bridging layer. Upon receiving a command, it parses and validates it, then forwards the standard command to the rich text editor's core processing module for execution. For example, it converts JSON commands into native editor API calls. The editing operation processing module monitors various event listeners within the rich text editor's core processing module for internal state changes, such as content modifications or cursor selection changes. These internal state changes are then sent as state events to the bridging layer. For instance, when a user inputs text or changes the selection format, this module generates a corresponding event, thus ensuring real-time synchronization between the business layer and the presentation layer.

[0038] The bridging layer communicates with both the presentation layer and the business layer, enabling bidirectional message communication and data exchange between them. Specifically, the presentation layer converts received user operation instructions into standard commands and sends them to the business layer via the bridging layer; the business layer executes the standard commands and proactively sends status events to the presentation layer through the bridging layer; and the system uses the bridging layer to encapsulate the rich text editing capabilities of the business layer into a rich text editing service that can be invoked by the presentation layer.

[0039] The bridging layer comprises a webpage view container, a bidirectional communication protocol module, and a lifecycle management module. The webpage view container communicates with both the presentation layer and the business layer, serving as a communication channel between them. It hosts the business layer and provides a local resource loading environment. The bidirectional communication protocol module, also connected to the presentation and business layers, serializes and encapsulates standard commands received from the presentation layer and status events received from the business layer, forming encapsulated messages conforming to a predefined communication protocol. This module also deserializes and parses the received encapsulated messages to reconstruct the standard commands or status events. The lifecycle management module, connected to the bidirectional communication protocol module, manages the creation, loading, and destruction of the webpage view container and implements data transmission optimization and error retry mechanisms by invoking native capabilities of the operating system's underlying layers.

[0040] This application's bridging layer acts as the sole data channel and translator between the presentation layer and the business layer, completely decoupling native and web technologies, and encapsulating the complex editing capabilities of the business layer into a concise service that can be invoked natively. Its core mission is to achieve efficient, reliable, and bidirectional message communication and data exchange.

[0041] The webpage view container directly loads HTML, JS, and CSS files packaged locally on the application via a protocol, ensuring instant startup and offline operation capabilities for editor resources. The bidirectional communication protocol module serializes and encapsulates standard commands received from the presentation layer, converting native memory objects (such as Java / Objective-C Dictionaries or Maps) into a serializable string (usually a JSON string) conforming to a predefined communication protocol. It also serializes and encapsulates status events received from the business layer, converting JavaScript objects from the web side into the same standard string, ultimately forming a packaged message conforming to the predefined communication protocol. This process ensures the integrity and parsability of messages when crossing the boundary between native and web layers. Furthermore, it deserializes and parses the received packaged messages. Upon receiving a string message from the peer, it reconstructs the memory object corresponding to the standard command or status event for use by the local business logic. Furthermore, a predefined communication protocol is established, which explicitly defines the message format. For example, it must include fields such as id (unique identifier), type (command / event), action (operation type), payload (data body), and timestamp (time stamp) to ensure the orderliness and traceability of communication.

[0042] The lifecycle management module manages the creation, loading, and destruction of webpage view containers. It monitors various container states (such as loading start, loading complete, loading error, memory warning) and allocates and releases resources accordingly to prevent memory leaks. By invoking native capabilities at the operating system's core, it interacts directly with the operating system to gain deeper control. It optimizes data transmission; for example, it implements a chunked transmission mechanism for large documents; for frequent content synchronization, it uses an differential update algorithm to transmit only the changed parts; and it compresses JSON data to reduce data size and improve transmission speed. When the network is unstable or communication fails, it employs intelligent retry strategies such as exponential backoff, records the historical success rate of different message types, and dynamically adjusts retry parameters to ensure the eventual reachability of critical messages, greatly improving the system's robustness in weak network environments.

[0043] Cross-platform application systems supporting rich text editing also include an adaptation module. This module communicates with both the presentation layer and the bridging layer to achieve a native-level interactive experience. The adaptation module includes a touch event optimization module, a virtual keyboard adaptation module, and a cursor following module. The touch event optimization module rewrites the touch event handling logic of the editing area through the presentation layer. The virtual keyboard adaptation module listens for system keyboard events and obtains the keyboard height through the presentation layer, and injects code into the webpage view container through the bridging layer to dynamically adjust the layout of the editing area. The cursor following module obtains cursor position information from the business layer through the bridging layer and adjusts the scroll offset of the webpage view through the presentation layer.

[0044] The adaptation module set up in this application is used to solve various interaction problems caused by the incompatibility between the web editor and the native mobile environment in hybrid development. It does not directly render the UI or directly carry business logic. Instead, it listens for system events, handles interaction conflicts, and coordinates resources from all parties to optimize the user experience.

[0045] Specifically, the touch event optimization module can use a native gesture recognizer on the native container that hosts the WebView in the presentation layer to prioritize the interception and processing of touch events. It can translate complex native gestures (such as two-finger zoom and fast swipe) into behaviors that the web editor can understand, or directly disable unfriendly default behaviors within the WebView (such as double-tap delay). This provides responsiveness and smoothness that is completely consistent with native applications, thus solving the problem of conflicts between touch events (such as touchstart and touchmove) of web pages within the WebView and scrolling gestures of native containers (such as ScrollView), which cause scrolling stutters and slow response, and the inconsistency between long press, double-tap and other gestures in the web environment and the native application experience.

[0046] The virtual keyboard adaptation module listens for native notifications from the operating system at the presentation layer, accurately obtaining the virtual keyboard's height and animation duration from these notifications. It then injects code into the webpage view container via the bridge layer to dynamically adjust the editing area layout. Subsequently, using the bridge layer's `injectJavaScript` function, it injects a script into the business layer's webpage view container. This script dynamically shrinks the editing area's height, ensuring the input box is always visible above the keyboard. This addresses the common user experience flaw in hybrid applications where the pop-up virtual keyboard can encroach on screen space and easily obscure the rich text editor's input area and cursor.

[0047] The cursor following module listens to status events sent by the editing operation processing module in the business layer through a bridge layer. These events contain real-time cursor position information obtained by listening to the web editor's `selectionchange` and `input` events. The presentation layer then adjusts the webpage view's scroll offset. When the module calculates that the cursor is about to be obscured by the keyboard or the bottom of the screen, it immediately instructs the presentation layer. The presentation layer then calls the native WebView component's scroll method to dynamically adjust the scroll offset within the WebView, ensuring the cursor position remains within the visible area, typically with a buffer space above it. This achieves intelligent automatic cursor following, ensuring smooth user input during long document input, which is crucial for improving the user experience. This addresses the issue where, when editing long documents, continuous input causes the cursor to move outside the editing area, the system doesn't automatically scroll, the cursor is obscured by the keyboard or screen edges, requiring manual scrolling and interrupting the input flow, resulting in a poor user experience.

[0048] This application also provides a method for building a cross-platform application system that supports rich text editing, the method including: Step 101: Initialize the runtime environment of the target project based on the declarative user interface framework.

[0049] The target project here can be a mobile application (a mobile application and a development project) developed based on a cross-platform declarative user interface framework, which enables the target project to support the rendering of the user interface using native components and to have the ability to interact with conditional WebView components. In this application, a mobile application is used as an example to describe the target project, but the target project of this application is not limited to a mobile application project. It can also be any software or system project that needs to integrate rich text editing functions, such as a desktop application project, an embedded system project, etc., as long as its runtime environment supports the layered architecture of this application.

[0050] Initializing the target project's runtime environment can specifically involve initializing the target project's framework, programming language environment, native development toolchain, package manager and its configuration (e.g., repository address), and simulator / real device environment.

[0051] Specifically, you can use the command-line tools provided by the framework to create an empty project with a standard directory structure and basic configuration files. In the generated project file, fill in the project's unique identifier, version number, application name, etc., to configure the project's core metadata. Next, you can declare the third-party libraries the project depends on through the package manager's configuration file, and then execute the installation command to download these third-party libraries to the local project. This configures and installs the project's basic dependencies, ensuring the project has the foundation to be successfully built and run. Thus, by creating a foundation that conforms to the framework's conventions and can be correctly identified and built, a foundation is laid for subsequent project development. By introducing the framework's core libraries, the project gains basic cross-platform development capabilities, such as rendering components and accessing devices.

[0052] Step 102: Configure the web page view container component in the target project to host the business layer.

[0053] In the target project, a component that can call and encapsulate the native WebView capabilities of the operating system (iOS / Android) is introduced and configured. Instead of opening a webpage in a web browser, it creates an embedded, highly customizable mini-browser window within the mobile application. This window will be used to host and run a rich text editor (Web business layer).

[0054] Here, the WebView component (web view container component) refers to a component that can embed web page content in a mobile application. Views can be created using the WebView component to achieve customized web pages. Specifically, first, the WebView component library is installed. Then, the WebView component library is imported into the target project. Instances are created using the WebView components from the WebView component library in the target project's code. When these instances run, the native code behind the component library is called, ultimately rendering a native platform (iOS / Android) WebView on the screen.

[0055] The WebView component library is a software development kit that provides a set of predefined rules, interfaces, and methods to create and use WebViews within the target project's code. WebView components are the actual tags / examples used in the target project's code; they are tools for using the WebView component library and are specifically displayed as WebView entities created by the application's UI.

[0056] After integrating the native web view container component, due to the differences in underlying technologies between iOS and Android systems, it is necessary to set the relevant parameters of WebView according to iOS and Android systems.

[0057] In one embodiment, configuring the webpage view container component includes: determining the application platform type, including a first platform type (iOS) and a second platform type (Android); in response to the application platform type being the first platform type, configuring a first network view corresponding to the first platform and enabling script execution permissions, allowing cross-domain access and file access; in response to the application platform type being the second platform type, configuring a second network view corresponding to the second platform and enabling script execution permissions, setting a caching mode that allows cross-domain access and file access.

[0058] Specifically, for iOS systems, two WebView options are provided: UIWebView and WKWebView. The higher-performance WKWebView is preferred, and permissions are granted to inject JavaScript code into the WebView (enabling JavaScript execution permissions) to initialize the rich text editor via JavaScript code properties. A bridge layer is established to support bidirectional communication. DOM storage is enabled, and the rich text editor is configured to support local storage caching. To improve loading speed and support offline editing, caching strategies can be optimized; for example, prioritizing cached storage and using network storage if no cache is available. Cross-domain access is allowed so the rich text editor can load resources from different domains. File access is enabled so the rich text editor can access local files on the device. A WebView delegate object is configured to listen for and handle important events occurring during WebView operation, such as page load, errors, and SSL authentication events.

[0059] For Android systems, configure its native WebView component to achieve equivalent functionality. This requires enabling JavaScript execution permissions and DOM storage; setting an optimized caching mode; configuring cross-domain access and file access with appropriate security policies, etc., to ensure consistency with iOS behavior.

[0060] Thus, the WebView component provides a highly controllable browser environment for the rich text editor to run within the mobile application. This application achieves powerful and smooth rich text editing capabilities in cross-platform mobile applications by establishing a bidirectional communication mechanism through a bridge layer and collaborating with the webpage view container.

[0061] This application integrates a WebView within the mobile application instead of directly redirecting to the system browser, ensuring the user remains within the target application, making it a native feature rather than being thrown into an external browser. This maintains the application's integrity and immersion, while allowing complete control over the WebView's behavior. For example, users can control its zoom, forward / backward navigation, and interaction with the navigation bar. This is impossible in external browsers, achieving deep integration and controllability. Furthermore, the integrated WebView can communicate bidirectionally with the target application (i.e., the native code) via a bridge layer, enabling access to native device functions such as the camera, file system, and GPS. External browsers, for security reasons, cannot achieve this level of deep integration. Additionally, the WebView can load local HTML, JS, and CSS files packaged within the app's installation package, allowing the rich text editor to launch instantly and enabling core editing functions even without a network connection.

[0062] Step 103: Import the rich text editor related dependency packages and resource files, and package the rich text editor related dependency packages and resource files into a local static resource package that can be loaded by the web page view container to prepare business layer resources.

[0063] In one embodiment, packaging the rich text editor's related dependencies and resource files into a local static resource package includes: creating a hypertext markup language file (HTML file) as the entry point for loading the webpage view container; creating a script file (JavaScript file) for initializing the rich text editor instance, mounting global communication functions, and listening for editor events; creating a cascading style sheet file (CSS file) for customizing the editor's mobile style; and using a build tool to merge and compress the hypertext markup language file, script file, and cascading style sheet file with the editor's core code, outputting the result as a local static resource package.

[0064] Specifically, in the target directory of the target project (e.g., Web-editor / ), open a command line and use a package manager such as npm or yarn to install the selected rich text editor. Create several key files in the target directory, including an HTML file for the entry page loaded as the WebView, a JavaScript file for the code bridging communication logic to initialize the editor, and a CSS file for customizing the editor's mobile style (such as adjusting the size of toolbar buttons, spacing of editing areas, etc.).

[0065] The HTML file here serves as the DIV container for the editor, acting as the display area for the rich text editor. Then, the JavaScript file responsible for the editor's logic and interactions is included via the `<script>` tag. This allows you to define or import executable JavaScript code into the HTML page, bringing a customized JavaScript file (containing editor initialization and bridging logic) into the page. When the HTML loads, the code in this file is executed, creating an editor instance and establishing communication bridges. Finally, the CSS file responsible for the editor's appearance is included via the `<link>` tag. The CSS file controls the editor's appearance, such as the toolbar color, the font and spacing in the editing area, and so on.

[0066] The JavaScript file here initializes the editor instance, mounts global functions to receive commands from the target project, listens for internal editor events, and actively sends messages to the target project.

[0067] The aforementioned files and editor code are packaged and merged into one or more local static resource file packages. This results in a completely offline, independently runnable web rich text editor application package (dist output directory). This web rich text editor application package can then be copied to the target project's source code directory. Ultimately, in the target project's WebView component, instead of loading a remote webpage address, this packaged HTML entry file is loaded directly through the path corresponding to the source code directory. This achieves the transformation and packaging of a mature web editor into a self-contained offline resource package that can be loaded by a mobile WebView.

[0068] Step 104: Set up native controls for receiving user operation commands and an editing area container component for hosting the web page view container to develop the native user interface and user interaction module of the presentation layer.

[0069] When building the presentation layer, it's necessary to develop its native user interface and user interaction modules. Specifically, first, native controls for receiving user commands need to be set up. For example, a toolbar can be built using components provided by the framework, such as buttons and dropdown menus. These controls are responsible for capturing the user's intentions for formatting, inserting, and other operations. Simultaneously, an editing area container component needs to be created to hold the webpage view container. This component acts as a native view shell, embedding and managing the webpage view container, and is responsible for receiving user interaction commands such as touch and scrolling within the editing area. Through the setup of these two types of components, the rendering of the presentation layer's native interface and its core capabilities for user interaction are achieved.

[0070] Click events of native controls are bound to the bridging layer's communication protocol, enabling each button action to be converted into a standard JSON message (standard command) and sent to the target project. This decouples the presentation layer from the business layer, allowing the presentation layer's toolbar to avoid understanding the complex APIs of the web editor (business layer); it only needs to send standard commands according to the protocol. This allows the two layers to be developed, tested, and upgraded independently. This is not simply embedding a web editor into a mobile application, but rather service-orientedizing the powerful editing capabilities of the web editor, transforming it into an editing engine that can be precisely invoked and deeply integrated by native applications, achieving compatibility between native-level user experience and web-level development efficiency and functional breadth.

[0071] For example, assuming an image needs to be inserted, instead of directly opening a file selection box when the image button is clicked in the native interaction, this application listens for a custom image button click and does not directly open the file selection box. Instead, it sends a message to the target project through a bridging layer. The target project calls the native photo album or camera, retrieves the image, and returns it to the web client through the bridging layer. The web client then inserts the image into the editor.

[0072] Step 105: Establish a bridge layer connecting the presentation layer and the business layer.

[0073] To achieve efficient communication between the presentation layer and the business layer, a standardized two-way communication mechanism needs to be established. Specifically, a communication protocol based on the target format should be developed, defining a unified structure for message formats including command, event, response, and error types; and a two-way communication channel should be established through the web page view container, connecting the native client to the web page technology client and vice versa.

[0074] The establishment of bidirectional communication channels from the native end to the web technology end and from the web technology end to the native end through the web view container includes: establishing a communication channel from the native end to the web technology end through the script injection function of the web view container; and establishing a communication channel from the web technology end to the native end through the message return interface provided by the web view container.

[0075] By leveraging its script injection capabilities, it enables command delivery from the native client to the web technology client, and its message feedback interface facilitates status reporting from the web technology client to the native client. It transforms complex editor API calls into standard message interactions, allowing both layers to collaborate deeply by focusing solely on protocol agreements.

[0076] To ensure communication stability, the system establishes a layered error handling and retry mechanism: JSON parsing, method call, and timeout errors are captured at the presentation layer, bridging layer, and business layer, respectively; an exponential backoff strategy is used to retry failed messages (e.g., setting a maximum of 3 retries, starting at 1 second), and retry parameters are dynamically adjusted based on historical success rates to balance efficiency and stability; degradation and caching mechanisms are also introduced, falling back to local cache when content retrieval fails, and temporarily storing data in a pending synchronization state when synchronization fails. This ensures system stability even in weak network or network outage scenarios, preventing data loss during editing and improving system robustness and user experience.

[0077] Step 106: Configure the bridging layer to enable bidirectional message communication and data exchange between the presentation layer and the business layer; configure the presentation layer to convert user operations into standard commands and send them to the business layer through the bridging layer; configure the business layer to execute standard commands and actively send status events to the presentation layer through the bridging layer.

[0078] To achieve a native-level interactive experience on mobile devices, this application also includes the development of mobile adaptation features, specifically: rewriting the touch event handling logic of the editing area and optimizing gesture interactions such as long-press menus and double-tap word selection; secondly, establishing a virtual keyboard adaptive mechanism, by listening to keyboard events, dynamically adjusting the height of the editing area, and combining real-time cursor tracking and intelligent scrolling adjustment to ensure that the input content and cursor are always in the visible area; at the same time, it achieves multi-screen size and landscape / portrait screen adaptation, comprehensively solving common problems in mixed applications such as keyboard obstruction, gesture conflicts, and layout disorder, so that the web editor can obtain an interactive experience consistent with native applications.

[0079] After creating the system for this application, it can be tested and optimized. Specifically, functional integrity testing can be performed to verify the correctness of each function of the rich text editor. For example, all editing functions, such as text formatting, insertion, and undo, can be tested to ensure that every instruction communicating between the presentation layer and the business layer can be correctly triggered and responded to. Performance stress testing can be performed, including metrics such as large document processing, memory usage, and response speed. For example, extremely long documents can be loaded to test scrolling smoothness, memory usage, and response speed. Rapid, continuous operations can be performed to test whether the message queue is congested. Compatibility testing can be conducted to verify performance on different devices and system versions. For example, testing can be performed on different system versions to ensure consistency in UI layout, gestures, and keyboard behavior.

[0080] This application constructs a layered and decoupled three-tier system architecture, splitting the rich text editor into independent components such as toolbars and editing areas, thus achieving modular development and functional decoupling. By designing configurable attribute interfaces and standardized APIs, it provides flexible customization capabilities and functional extensibility. Touch event handling and virtual keyboard adaptation are optimized for mobile devices, significantly improving gesture interaction and input experience. A high-efficiency bidirectional communication mechanism based on the JSON protocol enables stable and efficient collaboration between the presentation layer and the business layer. Finally, by combining responsive layout and performance rendering strategies, it comprehensively ensures smooth system operation and a native-level user experience across different devices.

[0081] This application also provides a method for implementing rich text editing in a cross-platform application system, based on the cross-platform application system supporting rich text editing provided in this application. The method specifically includes: Step 201: In response to the native user interface module of the presentation layer receiving user operation instructions and / or the user interaction module receiving user interaction instructions, the user operation instructions and / or user interaction instructions are converted into standard commands and sent to the business layer via the bridging layer.

[0082] Specifically, in response to a user operation command received by a native control in the native user interface module, the user operation command is sent to the state management module; in response to a user interaction command received by an editing area container component in the user interaction module, the user interaction command is sent to the state management module; in response to a user operation command and / or user interaction command received by the state management module, the user operation command and / or user interaction command is converted into a standard command conforming to a predetermined communication protocol, and the standard command is sent to the business layer through the bridging layer.

[0083] Step 202: In response to the business layer's editing operation processing module receiving the standard command, the standard command is forwarded to the rich text editor's core processing module for execution.

[0084] In response to the editing operation processing module receiving a standard command via the bridging layer, the module parses the standard command to determine the editing operation to be executed; the editing operation to be executed is forwarded to the rich text editor core processing module; the rich text editor core processing module receives and executes the editing operation, updating the document model.

[0085] Step 203: In response to the execution of standard commands by the rich text editor core processing module, triggering internal state changes, the editing operation processing module listens for the internal state changes of the rich text editor core processing module and actively sends the internal state changes as state events to the presentation layer through the bridging layer.

[0086] In response to the editing operation processing module detecting a change in the internal state of the rich text editor's core processing module, a corresponding state event is generated. The state event includes at least a content change event or a selection change event. The state event is then actively sent to the state management module in the presentation layer through the bridging layer.

[0087] Step 204: In response to the state management module of the presentation layer receiving a state event, update the display state of the native user interface module and the user interaction module according to the state event.

[0088] In one specific implementation, the method for implementing rich text editing in a cross-platform application system (taking the user clicking the bold button to make the selected text bold and the button state highlighted as an example) is as follows: Initially: The bold button on the presentation layer's toolbar is not highlighted. Text is selected in the business layer's editor, and the selected text is not bold. The bridging layer is in a standby state.

[0089] When a user touches and clicks the native bold button rendered by the native user interface module, the native user interface module detects the click event, generates a bold command (user operation command), and sends the bold command to the state management module. The state management module receives the bold command from the native user interface module, converts it into a pre-formatted bold command (standard command), and sends the pre-formatted bold command to the bidirectional communication protocol module in the bridging layer. The bidirectional communication protocol module serializes and encapsulates the pre-formatted bold command to ensure it conforms to the communication protocol. Then, through the Native-Web channel established by the network view container, the encapsulated message is injected into the web environment of the business layer, so that the pre-formatted bold command crosses the boundary between native and web and reaches the business layer. Here, the web environment of the business layer refers to the JavaScript code running in the WebView within the editing operation processing module. The JavaScript instance is the core processing module of the rich text editor itself. Here, "Native" refers to the functional whole composed of the state management module of the presentation layer, the bidirectional communication protocol module of the bridging layer, and the WebView container, which is used to initiate communication with the web business layer.

[0090] When the editing operation processing module receives a pre-formatted bold command from the bridging layer, it parses the command and identifies the corresponding action. It then sends the command and action to the rich text editor's core processing module. The rich text editor's core processing module calls its own API to execute the bold operation. At this point, the editor's internal document model is updated, and the selected text on the screen immediately becomes bold. The editing operation processing module monitors the rich text editor's core processing module's internal state changes. When the editor successfully modifies its internal data structure (document model), and the editor drives the rendering engine to update the user interface based on the changed data model, the editor triggers an internal state change, indicating that the currently selected format has been updated. This internal state change is treated as a state event and transmitted to the state management module through the bridging layer. The state management module receives and parses the state event, determines that the current selection is in a bold state, updates the state accordingly, and notifies the native user interface module. When the native user interface module receives an update instruction from the state management module, it highlights the bold button in the toolbar. At this point, the user can intuitively see the change in the button's state and confirm that the bolding operation has taken effect.

[0091] It should be understood that, although Figures 2-3 The steps in the flowchart are shown sequentially as indicated by the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order requirement for the execution of these steps; they can be executed in other orders. Furthermore, Figures 2-3 At least some of the steps in the process may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be executed in turn or alternately with other steps or at least some of the sub-steps or stages of other steps.

[0092] Embodiments of this application also provide a computer device, such as... Figure 4 As shown, it includes a memory and a processor, the memory storing a computer program, the processor being configured to run the computer program to perform the steps in any of the above-described methods for constructing a cross-platform application system that supports rich text editing and / or for implementing rich text editing in a cross-platform application.

[0093] Embodiments of this application also provide a computer-readable storage medium storing a computer program, wherein the computer program is configured to execute, at runtime, the steps of any of the methods described above for constructing a cross-platform application system supporting rich text editing and / or for implementing rich text editing in a cross-platform application.

[0094] In one exemplary embodiment, the aforementioned computer-readable storage medium may include, but is not limited to, various media capable of storing computer programs, such as a USB flash drive, read-only memory (ROM), random access memory (RAM), mobile device, magnetic disk, or optical disk.

[0095] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0096] The foregoing has provided a detailed description of a cross-platform application system and related methods supporting rich text editing, as provided in this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the embodiments above are merely for the purpose of helping to understand the methods and core ideas of this application. It should be noted that those skilled in the art can make various improvements and modifications to this application without departing from its principles, and these improvements and modifications also fall within the protection scope of the claims of this application.

Claims

1. A cross-platform application system supporting rich text editing, characterized in that, This includes the presentation layer, business layer, and bridging layer: The presentation layer is built on a declarative user interface framework and is used to render the native user interface and respond to user interactions. The business layer runs in a webpage view container and is used to host and run a rich text editor that is packaged as a local static resource package. The bridging layer is communicatively connected to the presentation layer and the service layer, respectively, and is used to realize bidirectional message communication and data exchange between the presentation layer and the service layer; Specifically, the presentation layer converts received user operation instructions into standard commands and sends them to the business layer through the bridging layer; the business layer executes the standard commands and actively sends status events to the presentation layer through the bridging layer; the system encapsulates the rich text editing capabilities of the business layer into a rich text editing service that can be called by the presentation layer through the bridging layer.

2. The system according to claim 1, characterized in that, The presentation layer includes a native user interface module, a user interaction module, and a state management module: The native user interface module is communicatively connected to the state management module, and is used to provide and manage native controls, and receive user operation instructions on the native controls; The user interaction module is communicatively connected to the state management module and is used to provide native view components that carry the web page view container of the business layer, and to receive user interaction instructions from the user within the native view. The state management module is communicatively connected to the bridging layer and is used to convert user operation instructions and user interaction instructions into standard commands in a preset format and send the standard commands to the bridging layer. The state management module receives the state events transmitted through the bridging layer and updates the display state of the native user interface module and the user interaction module based on the state events.

3. The system according to claim 1, characterized in that, The business layer includes a rich text editor core processing module, a document model management module, and an editing operation processing module: The rich text editor core processing module is communicatively connected to the document model management module and is used to load and run the rich text editor to provide the core logic processing capabilities for rich text editing. The document model management module is communicatively connected to the editing operation processing module, and is used to manage local static resource packages and is responsible for the initialization and resource scheduling of the rich text editor; The editing operation processing module is communicatively connected to the bridging layer, and is used to receive standard commands transmitted through the bridging layer, forward the standard commands to the rich text editor core processing module for execution, and monitor the internal state changes of the rich text editor core processing module, and send the internal state changes as state events to the bridging layer.

4. The system according to claim 1, characterized in that, The bridging layer includes a webpage view container, a two-way communication protocol module, and a lifecycle management module. The webpage view container is communicatively connected to the presentation layer and the business layer, respectively, serving as a communication channel between the presentation layer and the business layer. The webpage view container is used to carry the business layer and provide a local resource loading environment. The bidirectional communication protocol module is communicatively connected to the presentation layer and the service layer, respectively, and is used to serialize and encapsulate the standard command received from the presentation layer and the status event received from the service layer to form an encapsulated message conforming to a predefined communication protocol; the bidirectional communication protocol module is used to deserialize and parse the received encapsulated message to restore the standard command or the status event. The lifecycle management module is connected to the bidirectional communication protocol module and is used to manage the creation, loading, and destruction of the web page view container. It also implements data transmission optimization and error retry mechanisms by calling the native capabilities of the underlying operating system.

5. The system according to claim 1, characterized in that, The system also includes an adaptation module, which is communicatively connected to the presentation layer and the bridging layer to achieve a native-level interactive experience. The adaptation module includes a touch event optimization module, a virtual keyboard adaptation module, and a cursor following module. The touch event optimization module is used to rewrite the touch event handling logic of the editing area through the presentation layer; The virtual keyboard adaptation module is used to listen to system keyboard events and obtain keyboard height through the presentation layer, and inject code into the web page view container through the bridge layer to dynamically adjust the layout of the editing area; The cursor following module is used to obtain cursor position information from the business layer through the bridging layer and adjust the scroll offset of the network view through the presentation layer.

6. A method for constructing a cross-platform application system that supports rich text editing, characterized in that, The construction method includes: Initialize the runtime environment of the target project based on the declarative user interface framework; Configure a webpage view container component in the target project to host the business layer; Import the rich text editor related dependency packages and resource files, and package the rich text editor related dependency packages and resource files into a local static resource package that can be loaded by the web page view container to prepare business layer resources; Set up native controls for receiving user operation instructions and an editing area container component for carrying the web page view container to develop the native user interface and user interaction module of the presentation layer. Establish a bridge layer connecting the presentation layer and the business layer; The bridging layer is configured to enable bidirectional message communication and data exchange between the presentation layer and the service layer; the presentation layer is configured to convert user operations into standard commands and send them to the service layer through the bridging layer; the service layer is configured to execute the standard commands and actively send status events to the presentation layer through the bridging layer. The configuration webpage view container component includes: Determine the application platform type, which includes a first platform type and a second platform type; In response to the application platform type being the first platform type, configure the first network view corresponding to the first platform and enable script execution permissions, allow cross-domain access and file access; In response to the application platform type being the second platform type, configure the second network view corresponding to the second platform and enable script execution permissions, and set a caching mode that allows cross-domain access and file access.

7. The method according to claim 6, characterized in that, The process of packaging the rich text editor-related dependency packages and resource files into a local static resource package that can be loaded by the webpage view container includes: Create a Hypertext Markup Language file that serves as the loading entry point for the webpage view container; Create a script file to initialize the rich text editor instance, mount global communication functions, and listen for editor events; Create a Cascading Style Sheet file to customize the mobile editor's style; The build tool is used to merge and compress the Hypertext Markup Language files, script files, and Cascading Style Sheets files with the editor's core code, and output them as a local static resource package.

8. The method according to claim 6, characterized in that, The establishment of the bridge layer connecting the presentation layer and the business layer includes: Establish a communication protocol based on a target format, wherein the communication protocol definition includes message formats for command, event, response, and error types; The webpage view container establishes a bidirectional communication channel from the native end to the webpage technology end and from the webpage technology end to the native end. The establishment of bidirectional communication channels from the native client to the webpage technology client and from the webpage technology client to the native client through the webpage view container includes: A communication channel is established from the native end to the web technology end through the script injection function of the web page view container; A communication channel is established from the web technology end to the native end through the message return interface provided by the web view container.

9. A method for implementing rich text editing in a cross-platform application system, based on a cross-platform application system supporting rich text editing as described in any one of claims 1-5, characterized in that, The method includes: In response to the native user interface module of the presentation layer receiving a user operation instruction and / or the user interaction module receiving a user interaction instruction, the user operation instruction and / or user interaction instruction is converted into a standard command, and the standard command is sent to the business layer via the bridging layer; Upon receiving the standard command from the business layer's editing operation processing module, the standard command is forwarded to the business layer's rich text editor core processing module for execution; In response to the execution of the standard command by the rich text editor core processing module, an internal state change is triggered. The editing operation processing module listens for the internal state change of the rich text editor core processing module and actively sends the internal state change as a state event to the presentation layer through the bridging layer. In response to the state event received by the state management module of the presentation layer, the display state of the native user interface module and the user interaction module is updated according to the state event; Specifically, the process of responding to the native user interface module of the presentation layer receiving a user operation instruction and / or the user interaction module receiving a user interaction instruction, converting the user operation instruction and / or user interaction instruction into a standard command, and sending the standard command to the business layer via the bridging layer includes: In response to a user operation instruction being received by a native control in the native user interface module, the user operation instruction is sent to the state management module; In response to the user interaction instruction received by the edit area container component in the user interaction module, the user interaction instruction is sent to the state management module; In response to the state management module receiving the user operation instruction and / or user interaction instruction, the user operation instruction and / or user interaction instruction is converted into a standard command conforming to a predetermined communication protocol, and the standard command is sent to the service layer through the bridging layer.

10. The method according to claim 9, characterized in that, The step of the editing operation processing module listening to the internal state changes of the rich text editor's core processing module and actively sending the internal state changes as state events to the presentation layer through the bridging layer includes: In response to the editing operation processing module detecting a change in the internal state of the rich text editor core processing module, a corresponding state event is generated, and the state event includes at least a content change event or a selection area change event. The state event is actively sent to the state management module of the presentation layer through the bridging layer.

Images