Formula real-time editing and rendering method, system and equipment of rich text editor and medium

Abstract

The invention provides a formula real-time editing and rendering method of a rich text editor, which specifically comprises the following steps of: acquiring an input formula code of a user, performing incremental rendering, identifying a formula structure through an incremental analysis algorithm based on an abstract syntax tree (AST), and generating intermediate representation data; integrating text paragraphs and formula nodes into a single data stream, wherein each formula node stores the input formula code, the AST, the intermediate representation data and a rendering vector graph; and according to the difference comparison result of the AST, a GPU acceleration interface is called to carry out local redrawing on the change part, and the rendering result is updated and inserted into the cursor position of the rich text editor, so that the real-time editing and rendering method is simple in process and good in editing and rendering effect. The invention further provides a formula real-time editing and rendering system of the multi-platform adaptive rich text editor, computer equipment and a readable storage medium.

Description

Technical Field

[0001] The present invention relates to the technical field of browser rich text editors, and more specifically, to a method, system, computer device and readable storage medium for real-time editing and rendering of formulas in a rich text editor. Background Art

[0002] With the advancement of science and technology, the internet is becoming increasingly widely used. Computer data processing is a key technology, and rich text editors have become a particularly important tool for browser data processing. They enable users to create and edit rich content containing text, mathematical formulas, and other media elements. However, existing rich text editors have limitations. For example, they require complex code to be entered to fit a specific formula editor before rendering, which doesn't allow for real-time editing and rendering of formulas. Alternatively, they rely on plug-ins, which often rely on third-party tools with limited functionality and can't achieve real-time editing and rendering of complex formulas. Technical solutions for improvement are needed. Summary of the Invention

[0003] In view of the above, the present invention aims to solve at least one of the technical problems existing in the prior art. To this end, the present invention proposes a method, system, computer device and readable storage medium for real-time editing and rendering of formulas in a rich text editor. By collecting the user's input formula code and performing incremental parsing based on the abstract syntax tree (AST), the text paragraphs and formula nodes are integrated into a single data stream, the AST is compared and partially redrawn, and the rendering results are updated and inserted to achieve real-time editing and rendering of formulas. The processing method is simple and efficient.

[0004] To this end, in a first aspect, an embodiment of the present invention provides a method for real-time editing and rendering of formulas in a rich text editor, the method specifically comprising:

[0005] Collect user input formula code and perform incremental rendering, identify the formula structure through an incremental parsing algorithm based on the Abstract Syntax Tree (AST), and generate intermediate representation data;

[0006] Integrate text paragraphs and formula nodes into a single data stream, each formula node storing the input formula code, the AST, the intermediate representation data, and rendered vector graphics; and

[0007] The GPU acceleration interface is called according to the difference comparison result of the AST to partially redraw the changed part, and the rendering result is updated and inserted into the cursor position of the rich text editor.

[0008] Preferably, the method of collecting the user's input formula code and performing incremental rendering, identifying the formula structure through an incremental parsing algorithm based on AST, and generating intermediate representation data specifically includes: collecting and parsing the user's input formula code, constructing AST according to the input formula code, performing incremental parsing according to the AST to identify the formula structure, and generating corresponding intermediate representation data.

[0009] Preferably, the input formula code includes a formula code in MathType format or LaTeX format; and / or, collecting the user's input formula code and performing incremental rendering specifically includes: collecting the user's input formula code and converting it into predetermined format data, and performing incremental parsing on the predetermined format data.

[0010] Preferably, calling the GPU acceleration interface according to the difference comparison result of the AST to locally redraw the changed part, and updating the rendering result and inserting it into the cursor position of the rich text editor specifically includes: determining the AST difference information according to the AST before and after input, calling the GPU interface according to the AST difference area information to locally redraw the changed part, and updating the rendering result and inserting it into the cursor position of the rich text editor.

[0011] Preferably, the method further comprises creating a virtual anchor point to map the coordinate relationship between the input formula code and the rendered vector graphics.

[0012] Preferably, the creation of a virtual anchor point mapping the coordinate relationship between the input formula code and the rendered vector graphic specifically includes creating a virtual anchor point mapping the coordinate relationship between the original code and the rendered graphic, so that when the rich text is in the editing state or the rendered formula is clicked, the cursor position is automatically aligned to the corresponding input formula code area and the rendered vector graphic area.

[0013] In a second aspect, an embodiment of the present invention further provides a real-time editing and rendering system for formulas in a rich text editor, the system specifically comprising:

[0014] The dynamic parsing module is used to incrementally parse the user's input formula code, identify the formula structure through an AST-based incremental parsing algorithm, and generate intermediate representation data;

[0015] A data integration module, configured to integrate text paragraphs and formula nodes into a single data stream, wherein each formula node stores the input formula code, the AST, the intermediate representation data, and the rendered vector graphics; and

[0016] The incremental rendering module is used to call the GPU acceleration interface to locally redraw the changed part according to the difference comparison result of the AST, and update the rendering result to the cursor position of the rich text editor.

[0017] Preferably, the dynamic parsing module is specifically used to collect and parse the user's input formula code, build an AST based on the input formula code, perform incremental parsing based on the AST to identify the formula structure, and generate corresponding intermediate representation data; and / or,

[0018] The dynamic parsing module is specifically used to collect and parse input formula codes in MathType format or LaTeX format; and / or,

[0019] The dynamic parsing module is specifically used to collect the user's input formula code and convert it into a predetermined format data, and perform incremental parsing on the predetermined format data; and / or

[0020] The incremental rendering module is specifically configured to determine AST difference dirty area information based on the AST before and after input, call the GPU interface to partially redraw the changed part based on the AST difference dirty area information, and update the rendering result to the cursor position of the rich text editor; and / or,

[0021] It also includes a cursor synchronization module for creating a virtual anchor point mapping the coordinate relationship between the input formula code and the rendered vector graphic, so that when the rich text is in the editing state or the rendered formula is clicked, the cursor position is automatically aligned to the corresponding input formula code area and the rendered vector graphic area.

[0022] In a third aspect, an embodiment of the present invention further provides a computer device comprising: a memory and a processor and a computer program stored in the memory. When the computer program is executed on the processor, the real-time editing and rendering method of formulas in the rich text editor as described in the first aspect is implemented.

[0023] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the method for real-time editing and rendering of formulas in a rich text editor as described in the first aspect is implemented.

[0024] The real-time editing and rendering method for formulas in a rich text editor provided by an embodiment of the present invention realizes fast parsing and real-time rendering through syntax tree optimization and incremental rendering technology, integrates text paragraphs and formula codes into a single data stream, realizes seamless interactive editing, solves the compatibility problem of separating text and pictures, realizes synchronous editing and real-time updating of text and formulas, utilizes GPU acceleration interface to improve the rendering smoothness of complex formulas, designs an intermediate layer converter, automatically converts MathType and LaTeX codes, and realizes unified rendering effect for inputs in different formats. The real-time editing and rendering method has a simple process and good editing and rendering effect, giving users a good user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1 A flowchart of a method for real-time editing and rendering formulas in a rich text editor provided by an embodiment of the present invention;

[0026] Figure 2 A schematic diagram of intermediate representation data in a method for real-time editing and rendering formulas in a rich text editor provided by an embodiment of the present invention;

[0027] Figure 3 A schematic diagram of the framework structure of a real-time formula editing and rendering system for a rich text editor provided by an embodiment of the present invention;

[0028] Figure 4 A schematic diagram of the framework structure of a computer device provided in an embodiment of the present invention;

[0029] Figure 5 A schematic diagram of a user interface of a rich text editor provided in an embodiment of the present invention;

[0030] Figure 6 A schematic diagram of the rendering results of the rich text editor provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0031] The following describes embodiments of the present invention in detail, examples of which are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are intended to be used to explain the present invention, and are not to be construed as limiting the present invention.

[0032] The disclosure below provides many different embodiments or examples for realizing different structures of the present invention. In order to simplify the disclosure of the present invention, the components and settings of specific examples are described below. Of course, they are merely examples and are not intended to limit the present invention. In addition, the present invention may repeat reference numbers and / or letters in different examples. This repetition is for the purpose of simplicity and clarity and does not in itself indicate the relationship between the various embodiments and / or settings discussed. In addition, the present invention provides examples of various specific processes and materials, but those skilled in the art will appreciate the applicability of other processes and / or the use of other materials.

[0033] Please refer to Figure 1 The present invention aims to provide a method for real-time editing and rendering of formulas in a rich text editor, the method specifically comprising:

[0034] S10: Collect the user's input formula code and perform incremental rendering, identify the formula structure through the AST-based incremental parsing algorithm, and generate intermediate representation data;

[0035] S20, integrating the text paragraphs and formula nodes into a single data stream, wherein each formula node stores the input formula code, the AST, the intermediate representation data, and the rendered vector graphics; and

[0036] S30: Calling a GPU acceleration interface to partially redraw the changed part according to the AST difference comparison result, and updating the rendering result to insert it into the cursor position of the rich text editor.

[0037] It can be understood that when the user enters editing content in the rich text editor, it can specifically be text content or formula code. When entering text content, regular editing and display are performed. When mathematical formula codes such as numbers, operators, etc. are detected, the above-mentioned formula real-time editing and rendering method is implemented.

[0038] Specifically, the formula structure is identified through an AST-based incremental parsing algorithm, and intermediate representation data is generated. For the intermediate representation data format, please refer to Figure 2 , starting from the bottom of the data, the formula structure can be analyzed.

[0039] For example, after the user enters the first formula and it is parsed, if the formula is modified, the specific branch will be modified on the original AST. For example, if a+b*c in the figure above is changed to a*d+b*c, only the left branch will be modified. The system will only render the modified branch on the right and call the GPU to accelerate redrawing.

[0040] Furthermore, the step S10 collects the user's input formula code and performs incremental rendering, identifies the formula structure through an incremental parsing algorithm based on AST, and generates intermediate representation data, specifically including: collecting and parsing the user's input formula code, constructing AST according to the input formula code, performing incremental parsing according to the AST to identify the formula structure, and generating corresponding intermediate representation data.

[0041] The input formula code includes a formula code in MathType format or LaTeX format.

[0042] In the step S10, the collecting of the user's input formula code and performing incremental rendering specifically includes: collecting the user's input formula code and converting it into data in a predetermined format, and performing incremental parsing on the data in the predetermined format.

[0043] Furthermore, the step S30 calls the GPU acceleration interface to locally redraw the changed part according to the AST difference comparison result, and updates the rendering result and inserts it into the cursor position of the rich text editor, specifically including: determining the AST difference information according to the AST before and after input, calling the GPU interface to locally redraw the changed part according to the AST difference information, and updating the rendering result and inserting it into the cursor position of the rich text editor.

[0044] Furthermore, the method further includes step S40, creating a virtual anchor point to map the coordinate relationship between the input formula code and the rendered vector graphic.

[0045] Furthermore, the step S40 creates a virtual anchor point mapping the coordinate relationship between the input formula code and the rendered vector graphic, specifically including creating a virtual anchor point mapping the coordinate relationship between the original code and the rendered graphic, so that when the rich text is in the editing state or the rendered formula is clicked, the cursor position is automatically aligned to the corresponding input formula code area and the rendered vector graphic area.

[0046] Please refer to Figure 3 In a second aspect, an embodiment of the present invention further provides a real-time formula editing and rendering system 100 for a rich text editor, the system specifically comprising:

[0047] Dynamic parsing module 10, used to perform incremental parsing on the user's input formula code and generate AST and intermediate representation data;

[0048] A data integration module 20 is used to integrate text paragraphs and formula nodes into a single data stream, each of which stores the input formula code, the AST, the intermediate representation data, and the rendered vector graphics; and

[0049] The incremental rendering module 30 is used to call the GPU acceleration interface to locally redraw the changed part according to the difference comparison result of the AST, and update the rendering result to the cursor position of the rich text editor.

[0050] Furthermore, the dynamic parsing module 10 is specifically used to collect and parse the user's input formula code, construct an AST based on the input formula code, perform incremental parsing based on the AST to identify the formula structure, and generate corresponding intermediate representation data.

[0051] Furthermore, the dynamic parsing module 10 is specifically used to collect and parse input formula codes in MathType format or LaTeX format.

[0052] Furthermore, the dynamic parsing module 10 is specifically used to collect the user's input formula code and convert it into predetermined format data, and perform incremental parsing on the predetermined format data.

[0053] Furthermore, the incremental rendering module 30 is specifically used to determine AST difference information based on the AST before and after input, call the GPU interface to locally redraw the changed part based on the AST difference information, and update the rendering result to the cursor position of the rich text editor.

[0054] Furthermore, the system also includes a cursor synchronization module 40, which is used to create a virtual anchor point to map the coordinate relationship between the input formula code and the rendered vector graphic, so that when the rich text is in the editing state or the rendered formula is clicked, the cursor position is automatically aligned to the corresponding input formula code area and the rendered vector graphic area.

[0055] Please refer to Figure 4 In a third aspect, an embodiment of the present invention further provides a computer device 200, comprising: a memory 201 and a processor 202 and a computer program 203 stored on the memory 201. When the computer program 203 is executed on the processor 202, the real-time editing and rendering method of formulas of the rich text editor as described in the first aspect is implemented.

[0056] The computer device 200 may be a desktop computer, a notebook computer, a PDA, a cloud server, or other computing devices. The computer device 200 may include, but is not limited to, a processor 202 and a memory 201. Those skilled in the art will appreciate that Figure 3 This is merely an example of the computer device 200 and does not constitute a limitation on the computer device 200 . The computer device 200 may include more or fewer components than shown in the figure, or a combination of certain components, or different components. For example, the computer device 200 may also include input and output devices, network access devices, etc.

[0057] In some embodiments, the memory 201 may be an internal storage unit of the computer device 200, such as a hard disk or memory of the computer device 3. In other embodiments, the memory 201 may also be an external storage device of the computer device 200, such as a plug-in hard disk, a smart memory card (SmartMedia Card, SMC), a secure digital (Secure Digital, SD) card, a flash card, etc. equipped on the computer device 200. Furthermore, the memory 201 may also include both an internal storage unit of the computer device 200 and an external storage device. The memory 201 is used to store an operating system, application programs, a boot loader (Boot Loader), data, and other programs, such as the program code of the computer program. The memory 201 may also be used to temporarily store data that has been output or is about to be output.

[0058] The processor 202 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. A general-purpose processor may be a microprocessor or any conventional processor.

[0059] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the method for real-time editing and rendering of formulas in a rich text editor as described in the first aspect is implemented.

[0060] In this embodiment, if the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the process of the above-mentioned method embodiment by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium. When the computer program is executed by a processor, it can implement the steps of each of the above-mentioned method embodiments. The computer program includes computer program code, which can be in source code form, object code form, executable file, or some intermediate form. The computer-readable medium can at least include: any entity or device capable of carrying computer program code to the camera / terminal device, recording medium, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal, and software distribution medium. For example, a USB flash drive, mobile hard drive, magnetic disk, or optical disk. In some jurisdictions, based on legislation and patent practice, computer-readable media cannot be electric carrier signals or telecommunication signals.

[0061] The real-time editing and rendering method for formulas in a rich text editor provided by an embodiment of the present invention realizes fast parsing and real-time rendering through syntax tree optimization and incremental rendering technology, integrates text paragraphs and formula codes into a single data stream, realizes seamless interactive editing, solves the compatibility problem of separating text and pictures, realizes synchronous editing and real-time updating of text and formulas, utilizes GPU acceleration interface to improve the rendering smoothness of complex formulas, designs an intermediate layer converter, automatically converts MathType and LaTeX codes, and realizes unified rendering effect for inputs in different formats. The real-time editing and rendering method has a simple process and good editing and rendering effect, giving users a good user experience.

[0062] Please refer to Figure 5 , a schematic diagram of the user interface of the rich text editor of an embodiment of the present invention provides a rich text input box that supports free switching between ordinary text and formula code; and provides function buttons such as "render", "undo", "preview", etc. to facilitate user operation.

[0063] Please refer to Figure 6 , a schematic diagram of the rendering result of the rich text editor of the embodiment of the present invention, the input MathType or LaTeX code is parsed in real time; the rendering engine dynamically inserts the formula into the specified position of the text box.

[0064] Example 1

[0065] After the user enters the formula code E=mc^2: the parsing engine generates an AST (the root node is "equation", the left child node is the variable "E", and the right child node is the "power" structure); when the user changes it to E=\gamma mc^2, the incremental algorithm detects the newly added "\gamma" node and generates SVG path data only for this part; the GPU rendering module inserts the updated SVG portion into the editor, avoiding redrawing the entire text (measured delay <50ms, traditional solution >300ms).

[0066] Example 2

[0067] In the mixed content "Set Energy Formula to [Formula Rendering Area]": When the user clicks the rendered "γ" symbol, the cursor automatically jumps to the starting position of the LaTeX code "\gamma"; if new characters are inserted in the code area, the rendered graphic position is adjusted in real time to maintain text flow alignment (solving the problem of image and text misalignment in D1).

[0068] The real-time formula editing and rendering system 100 for a rich text editor according to an embodiment of the present invention was tested for parsing efficiency. In a document containing 500 formulas, this solution took 3.2 seconds to parse, compared to 8.7 seconds for a regular expression solution (testing tool: Chrome DevTools Performance panel).

[0069] Test the corresponding GPU acceleration effect: rendering 1000 integral formulas at 4K resolution, the frame rate is increased from 22fps for pure CPU rendering to 58fps for RTX 3060 GPU rendering.

[0070] In the description of this specification, the reference terms "one embodiment", "some embodiments", "examples", "specific examples", or "some examples" mean that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic expressions of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described can be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art can combine and combine different embodiments or examples described in this specification and features of different embodiments or examples without contradiction.

[0071] While embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions, and variations may be made to the embodiments without departing from the principles and spirit of the invention, and that the scope of the invention is defined by the claims and their equivalents.

Claims

1. A method for real-time editing and rendering of formulas in a rich text editor, characterized in that: The method specifically includes: Collect user input formula code and perform incremental rendering, identify the formula structure through an incremental parsing algorithm based on the Abstract Syntax Tree (AST), and generate intermediate representation data; Integrate text paragraphs and formula nodes into a single data stream, each formula node storing the input formula code, the AST, the intermediate representation data, and rendered vector graphics; and The GPU acceleration interface is called according to the difference comparison result of the AST to partially redraw the changed part, and the rendering result is updated and inserted into the cursor position of the rich text editor.

2. The method for real-time editing and rendering of formulas in a rich text editor according to claim 1, characterized in that: The method collects the user's input formula code and performs incremental rendering, identifies the formula structure through the incremental parsing algorithm of AST, and generates intermediate representation data, specifically including: collecting and parsing the user's input formula code, building AST according to the input formula code, performing incremental parsing according to the AST to identify the formula structure, and generating corresponding intermediate representation data.

3. The method for real-time editing and rendering of formulas in a rich text editor according to claim 1 or 2, characterized in that: The input formula code includes a formula code in MathType format or LaTeX format; And / or, the collecting of the user's input formula code and performing incremental rendering specifically includes: collecting the user's input formula code and converting it into data in a predetermined format, and performing incremental parsing on the data in the predetermined format.

4. The method for real-time editing and rendering of formulas in a rich text editor according to claim 1, characterized in that: The method of calling the GPU acceleration interface according to the AST difference comparison result to locally redraw the changed part, and updating the rendering result and inserting it into the cursor position of the rich text editor specifically includes: determining the AST difference information according to the AST before and after input, calling the GPU interface according to the AST difference information to locally redraw the changed part, and updating the rendering result and inserting it into the cursor position of the rich text editor.

5. The method for real-time editing and rendering of formulas in a rich text editor according to claim 1, characterized in that: The method also includes creating a virtual anchor point to map the coordinate relationship between the input formula code and the rendered vector graphics.

6. The method for real-time editing and rendering of formulas in a rich text editor according to claim 5, characterized in that: The creation of a virtual anchor point mapping the coordinate relationship between the input formula code and the rendered vector graphic specifically includes creating a virtual anchor point mapping the coordinate relationship between the original code and the rendered graphic, so that when the rich text is in the editing state or the rendered formula is clicked, the cursor position is automatically aligned to the corresponding input formula code area and the rendered vector graphic area.

7. A real-time editing and rendering system for formulas in a rich text editor, characterized in that: The system specifically includes: The dynamic parsing module is used to incrementally parse the user's input formula code, identify the formula structure through an incremental parsing algorithm based on the abstract syntax tree (AST), and generate intermediate representation data; A data integration module, configured to integrate text paragraphs and formula nodes into a single data stream, wherein each formula node stores the input formula code, the AST, the intermediate representation data, and the rendered vector graphics; and The incremental rendering module is used to call the GPU acceleration interface to locally redraw the changed part according to the difference comparison result of the AST, and update the rendering result to the cursor position of the rich text editor.

8. The real-time formula editing and rendering system for a rich text editor according to claim 7, characterized in that: The dynamic parsing module is specifically used to collect and parse the user's input formula code, build an AST based on the input formula code, perform incremental parsing based on the AST to identify the formula structure, and generate corresponding intermediate representation data; and / or, The dynamic parsing module is specifically used to collect and parse input formula codes in MathType format or LaTeX format; and / or, The dynamic parsing module is specifically used to collect the user's input formula code and convert it into a predetermined format data, and perform incremental parsing on the predetermined format data; and / or, The incremental rendering module is specifically configured to determine AST difference information based on the ASTs before and after input, call the GPU interface to partially redraw the changed part based on the AST difference area information, and update the rendering result to the cursor position of the rich text editor; and / or, It also includes a cursor synchronization module for creating a virtual anchor point mapping the coordinate relationship between the input formula code and the rendered vector graphic, so that when the rich text is in the editing state or the rendered formula is clicked, the cursor position is automatically aligned to the corresponding input formula code area and the rendered vector graphic area.

9. A computer device, characterized in that: include: A memory, a processor, and a computer program stored in the memory, which, when executed on the processor, implements the real-time editing and rendering method for formulas in a rich text editor as described in any one of claims 1 to 6.

10. A computer-readable storage medium, characterized in that A computer program is stored thereon, and when the computer program is executed by a processor, the method for real-time editing and rendering of formulas in a rich text editor as claimed in any one of claims 1 to 6 is implemented.

Images