@wiris/mathtype-viewer 8.9.1 → 8.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -4
- package/babel.config.js +3 -2
- package/dist/WIRISplugins.js +1 -1
- package/dist/WIRISplugins.js.LICENSE.txt +1 -1
- package/dist/app.d.ts +1 -1
- package/dist/app.d.ts.map +1 -1
- package/dist/latex.d.ts +1 -1
- package/dist/latex.d.ts.map +1 -1
- package/dist/mathml.d.ts +1 -0
- package/dist/mathml.d.ts.map +1 -1
- package/dist/properties.d.ts +18 -17
- package/dist/properties.d.ts.map +1 -1
- package/dist/services.d.ts +1 -1
- package/dist/services.d.ts.map +1 -1
- package/docs/spec.md +25 -25
- package/index.html +19 -21
- package/jest.config.js +4 -0
- package/package.json +7 -2
- package/project.json +4 -12
- package/src/app.ts +11 -12
- package/src/latex.ts +19 -24
- package/src/mathml.spec.ts +189 -0
- package/src/mathml.ts +90 -43
- package/src/properties.ts +116 -89
- package/src/retro.ts +49 -44
- package/src/services.ts +65 -48
- package/tsconfig.json +26 -22
- package/typings/module-name.d.ts +1 -1
- package/webpack.config.js +10 -10
- package/dist/utils.d.ts +0 -3
- package/dist/utils.d.ts.map +0 -1
- package/src/utils.ts +0 -45
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! @license DOMPurify 3.1.
|
|
1
|
+
/*! @license DOMPurify 3.1.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.5/LICENSE */
|
package/dist/app.d.ts
CHANGED
package/dist/app.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,EAAE;YACN,UAAU,EAAE,UAAU,CAAC;YACvB,QAAQ,EAAE,OAAO,CAAC;YAClB,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,EAAE;YACN,UAAU,EAAE,UAAU,CAAC;YACvB,QAAQ,EAAE,OAAO,CAAC;YAClB,OAAO,EAAE,MAAM,CAAC;SACjB,CAAC;KACH;CACF"}
|
package/dist/latex.d.ts
CHANGED
package/dist/latex.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"latex.d.ts","sourceRoot":"","sources":["../src/latex.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAY1C,wBAAsB,WAAW,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"latex.d.ts","sourceRoot":"","sources":["../src/latex.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAY1C,wBAAsB,WAAW,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,iBAS1E"}
|
package/dist/mathml.d.ts
CHANGED
package/dist/mathml.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mathml.d.ts","sourceRoot":"","sources":["../src/mathml.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"mathml.d.ts","sourceRoot":"","sources":["../src/mathml.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAuD1C,wBAAsB,YAAY,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAsC3F;AAgED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAIvD"}
|
package/dist/properties.d.ts
CHANGED
|
@@ -1,26 +1,27 @@
|
|
|
1
|
-
type Viewer =
|
|
2
|
-
type Wirispluginperformance =
|
|
3
|
-
export
|
|
4
|
-
editorServicesRoot
|
|
5
|
-
editorServicesExtension
|
|
6
|
-
backendConfig
|
|
7
|
-
wirispluginperformance
|
|
8
|
-
wiriseditormathmlattribute
|
|
9
|
-
wiriscustomheaders
|
|
1
|
+
type Viewer = "none" | "image" | "mathml" | "latex";
|
|
2
|
+
type Wirispluginperformance = "true" | "false";
|
|
3
|
+
export interface Config {
|
|
4
|
+
editorServicesRoot: string;
|
|
5
|
+
editorServicesExtension: string;
|
|
6
|
+
backendConfig: {
|
|
7
|
+
wirispluginperformance: Wirispluginperformance;
|
|
8
|
+
wiriseditormathmlattribute: string;
|
|
9
|
+
wiriscustomheaders: object;
|
|
10
10
|
};
|
|
11
|
-
dpi
|
|
12
|
-
element
|
|
13
|
-
lang
|
|
14
|
-
viewer
|
|
15
|
-
zoom
|
|
16
|
-
}
|
|
11
|
+
dpi: number;
|
|
12
|
+
element: string;
|
|
13
|
+
lang: string;
|
|
14
|
+
viewer: Viewer;
|
|
15
|
+
zoom: number;
|
|
16
|
+
}
|
|
17
17
|
export declare class Properties {
|
|
18
18
|
private static instance;
|
|
19
19
|
render: () => Promise<void>;
|
|
20
20
|
config: Config;
|
|
21
|
-
private
|
|
22
|
-
static getInstance(): Properties
|
|
21
|
+
private constructor();
|
|
22
|
+
static getInstance(): Promise<Properties>;
|
|
23
23
|
private initialize;
|
|
24
|
+
private setProperties;
|
|
24
25
|
private checkServices;
|
|
25
26
|
get editorServicesRoot(): string;
|
|
26
27
|
set editorServicesRoot(editorServicesRoot: string);
|
package/dist/properties.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"properties.d.ts","sourceRoot":"","sources":["../src/properties.ts"],"names":[],"mappings":"AAIA,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACpD,KAAK,sBAAsB,GAAG,MAAM,GAAG,OAAO,CAAC;AAK/C,MAAM,
|
|
1
|
+
{"version":3,"file":"properties.d.ts","sourceRoot":"","sources":["../src/properties.ts"],"names":[],"mappings":"AAIA,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACpD,KAAK,sBAAsB,GAAG,MAAM,GAAG,OAAO,CAAC;AAK/C,MAAM,WAAW,MAAM;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,uBAAuB,EAAE,MAAM,CAAC;IAChC,aAAa,EAAE;QACb,sBAAsB,EAAE,sBAAsB,CAAC;QAC/C,0BAA0B,EAAE,MAAM,CAAC;QACnC,kBAAkB,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAuBD,qBAAa,UAAU;IACrB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA2B;IAElD,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAkB;IAG7C,MAAM,EAAE,MAAM,CAAiB;IAM/B,OAAO;WAEM,WAAW,IAAI,OAAO,CAAC,UAAU,CAAC;YAWjC,UAAU;IA6CxB,OAAO,CAAC,aAAa;YAmCP,aAAa;IAwB3B,IAAI,kBAAkB,IAAI,MAAM,CAE/B;IAED,IAAI,kBAAkB,CAAC,kBAAkB,EAAE,MAAM,EAGhD;IAED,IAAI,uBAAuB,IAAI,MAAM,CAEpC;IAED,IAAI,uBAAuB,CAAC,uBAAuB,EAAE,MAAM,EAG1D;IAWD,IAAI,IAAI,IAAI,MAAM,CAGjB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,EAGpB;IAQD,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,EAGxB;IAQD,IAAI,GAAG,IAAI,MAAM,CAEhB;IAED,IAAI,GAAG,CAAC,GAAG,EAAE,MAAM,EAGlB;IAQD,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,EAGpB;IAQD,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAC,OAAO,EAAE,MAAM,EAG1B;IAQD,IAAI,sBAAsB,IAAI,sBAAsB,CAEnD;IAED,IAAI,sBAAsB,CAAC,sBAAsB,EAAE,sBAAsB,EAGxE;IAQD,IAAI,0BAA0B,IAAI,MAAM,CAIvC;IAED,IAAI,0BAA0B,CAAC,0BAA0B,EAAE,MAAM,EAGhE;CACF"}
|
package/dist/services.d.ts
CHANGED
|
@@ -11,6 +11,6 @@ export declare function mathml2accessible(mml: string, lang: string, url: string
|
|
|
11
11
|
export declare function showImage(mml: string, lang: string, url: string, extension: string): Promise<any>;
|
|
12
12
|
export declare function createImage(mml: string, lang: string, url: string, extension: string): Promise<any>;
|
|
13
13
|
export declare function latexToMathml(latex: string, url: string, extension: string): Promise<any>;
|
|
14
|
-
export declare function configurationJson(variablekeys: string[], url: string, extension: string): Promise<any>;
|
|
14
|
+
export declare function configurationJson(variablekeys: string[], url: string, extension: string, check: boolean): Promise<any>;
|
|
15
15
|
export {};
|
|
16
16
|
//# sourceMappingURL=services.d.ts.map
|
package/dist/services.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"services.d.ts","sourceRoot":"","sources":["../src/services.ts"],"names":[],"mappings":"AAGA,aAAK,UAAU;IACb,IAAI,SAAS;IACb,GAAG,QAAQ;CACZ;AAKD,qBAAa,WAAY,SAAQ,KAAK;gBACxB,OAAO,KAAA;CAIpB;AAUD,wBAAsB,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAanF;AAUD,wBAAsB,WAAW,
|
|
1
|
+
{"version":3,"file":"services.d.ts","sourceRoot":"","sources":["../src/services.ts"],"names":[],"mappings":"AAGA,aAAK,UAAU;IACb,IAAI,SAAS;IACb,GAAG,QAAQ;CACZ;AAKD,qBAAa,WAAY,SAAQ,KAAK;gBACxB,OAAO,KAAA;CAIpB;AAUD,wBAAsB,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAanF;AAUD,wBAAsB,WAAW,CAC/B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,GAAG,CAAC,CA+Bd;AAUD,wBAAsB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAa/G;AAUD,wBAAsB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAwBvG;AAUD,wBAAsB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAWzG;AASD,wBAAsB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAQ/F;AAQD,wBAAsB,iBAAiB,CACrC,YAAY,EAAE,MAAM,EAAE,EACtB,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,OAAO,GACb,OAAO,CAAC,GAAG,CAAC,CAad"}
|
package/docs/spec.md
CHANGED
|
@@ -2,15 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
## Object
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
_What is the object being specified?_
|
|
6
6
|
|
|
7
7
|
The viewer consists of a single minified JavaScript file ready to be included in a website.
|
|
8
8
|
The file has been historically called WIRISplugins.js.
|
|
9
9
|
|
|
10
|
-
|
|
11
10
|
## Distribution
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
_How can this object be obtained and used by our customers?_
|
|
14
13
|
|
|
15
14
|
The customers can include the JavaScript file using a `<script>` tag.
|
|
16
15
|
They have multiple options as to where this file resides.
|
|
@@ -23,17 +22,15 @@ They have multiple options as to where this file resides.
|
|
|
23
22
|
- As an npm package. The file is distributed, together with its source code, as an npm package.
|
|
24
23
|
The publishing system can be the same as the one used for the rest of our npm packages that live in the html-integrations monorepo.
|
|
25
24
|
|
|
26
|
-
|
|
27
25
|
## Behavior
|
|
28
26
|
|
|
29
|
-
|
|
27
|
+
_What should this object do and how should it do it?_
|
|
30
28
|
|
|
31
29
|
When included in a web page and configured properly, the script will transform certain mathematical formulas into rendered images.
|
|
32
30
|
Only the formulas inside the HTML element specified by the `element` property should be transformed.
|
|
33
31
|
Whether it transforms them into PNG or SVG images is determined by the property `wirisimageformat`.
|
|
34
32
|
Depending on the value of the property `viewer`, just MathML formulas (`<math>` elements), or just LaTeX formulas (LaTeX-like formulas surrounded by `$$`), or both will be transformed.
|
|
35
33
|
|
|
36
|
-
|
|
37
34
|
### Architecture
|
|
38
35
|
|
|
39
36
|
The rendering process involves three pieces:
|
|
@@ -49,7 +46,6 @@ The rendering process involves three pieces:
|
|
|
49
46
|
The viewer only ever calls the endpoints of the integration services, which in turn call the editor services.
|
|
50
47
|
Thus, throughout this document, all backend endpoints mentioned are part of the integration services.
|
|
51
48
|
|
|
52
|
-
|
|
53
49
|
### Rendering algorithm
|
|
54
50
|
|
|
55
51
|
The algorithm for obtaining the rendered images depends on the `wirispluginperformance` property.
|
|
@@ -59,12 +55,12 @@ If set to `false`, every request to render an image will make a call directly to
|
|
|
59
55
|
Otherwise, the algorithm goes throught two cache steps.
|
|
60
56
|
|
|
61
57
|
1. First, an MD5 hash of the formula is created.
|
|
62
|
-
|
|
63
|
-
|
|
58
|
+
Then, the MD5 is used to call the showimage service from the integration services.
|
|
59
|
+
The request formula's hash is included as URL parameters, so that the browser can use its cache to spare one call to the integration services.
|
|
64
60
|
|
|
65
61
|
2. If the browser cache misses, then the browser does actually perform the call to showimage.
|
|
66
|
-
|
|
67
|
-
|
|
62
|
+
This might either return the image, if it is in the backend cache; or return a warning message, in which case the viewer will then call showimage again passing the whole formula via POST.
|
|
63
|
+
Finally, the response should contain the image.
|
|
68
64
|
|
|
69
65
|
Once the viewer has obtained the image data, it creates the HTML `<img>` element, adding the following properties:
|
|
70
66
|
|
|
@@ -76,7 +72,6 @@ Once the viewer has obtained the image data, it creates the HTML `<img>` element
|
|
|
76
72
|
|
|
77
73
|
Finally, the viewer replaces the original formula with this new image object.
|
|
78
74
|
|
|
79
|
-
|
|
80
75
|
### Properties
|
|
81
76
|
|
|
82
77
|
This section contains a reference of all the properties that affect the viewer's behavior.
|
|
@@ -87,12 +82,13 @@ The place depends on each specific property.
|
|
|
87
82
|
Set in the configuration.ini file of the customer.
|
|
88
83
|
- Frontend.
|
|
89
84
|
There are two ways to set these properties.
|
|
85
|
+
|
|
90
86
|
- Either by modifying the `Properties` object via JavaScript:
|
|
91
87
|
|
|
92
88
|
```html
|
|
93
89
|
<script src="dist/WIRISplugins.js" defer></script>
|
|
94
90
|
<script>
|
|
95
|
-
window.document.addEventListener(
|
|
91
|
+
window.document.addEventListener("viewerLoaded", () => {
|
|
96
92
|
window.viewer.Properties.key1 = value1;
|
|
97
93
|
window.viewer.Properties.key2 = value2;
|
|
98
94
|
// ...
|
|
@@ -105,18 +101,17 @@ The place depends on each specific property.
|
|
|
105
101
|
|
|
106
102
|
The following table contains a specification of each of the properties.
|
|
107
103
|
|
|
108
|
-
| Name | Description
|
|
109
|
-
|
|
110
|
-
| wiriseditormathmlattribute | The name of the HTML element attribute that will be used in the rendered img elements in order to store the original MathML. According to the HTML spec, it must begin with “data-” [ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* ].
|
|
111
|
-
| wirispluginperformance | Whether to use the browser cache to render formulas.
|
|
112
|
-
| wirisimageformat | Whether to return PNG or SVG formulas.
|
|
113
|
-
| editorServicesRoot | The URL base for the
|
|
114
|
-
| viewer | What should the viewer render exactly. none: do nothing image: render both MathML and LaTeX formulas mathml: render only MathML latex: render only LaTeX
|
|
115
|
-
| element | A querySelector string that identifies the element in which the viewer should act.
|
|
116
|
-
| lang | The language for the alt text.
|
|
117
|
-
| dpi | Resolution in dots per inch of the generated image. This feature scales the formula with a factor of dpi/96.
|
|
118
|
-
| zoom | The scale of the generated image.
|
|
119
|
-
|
|
104
|
+
| Name | Description | Place | Possible values | Default value |
|
|
105
|
+
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------- | --------------------------------------- |
|
|
106
|
+
| wiriseditormathmlattribute | The name of the HTML element attribute that will be used in the rendered img elements in order to store the original MathML. According to the HTML spec, it must begin with “data-” [ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* ]. | Backend | data-\* | data-mathml |
|
|
107
|
+
| wirispluginperformance | Whether to use the browser cache to render formulas. | Backend | true, false | true |
|
|
108
|
+
| wirisimageformat | Whether to return PNG or SVG formulas. | Backend | svg, png | svg |
|
|
109
|
+
| editorServicesRoot | The URL base for the showimage and createimage integration services. If distributed together with the backend services, this URL is determined by the backend technology. If distributed with npm, it takes as a default value the integration services from wiris.net. In any case, this parameter can be set manually in the frontend. | Frontend | URL | https://www.wiris.net/demo/plugins/app/ |
|
|
110
|
+
| viewer | What should the viewer render exactly. none: do nothing image: render both MathML and LaTeX formulas mathml: render only MathML latex: render only LaTeX | Frontend | none, image, mathml, latex (mod capitalization) | none |
|
|
111
|
+
| element | A querySelector string that identifies the element in which the viewer should act. | Frontend | | document |
|
|
112
|
+
| lang | The language for the alt text. | Frontend | | en |
|
|
113
|
+
| dpi | Resolution in dots per inch of the generated image. This feature scales the formula with a factor of dpi/96. | Frontend | Positive integer | 96 |
|
|
114
|
+
| zoom | The scale of the generated image. | Frontend | Positive floating point number | 1 |
|
|
120
115
|
|
|
121
116
|
## API
|
|
122
117
|
|
|
@@ -133,6 +128,7 @@ All of the following methods are exposed inside of `window.com.wiris.js.JsPlugin
|
|
|
133
128
|
Please consider using {@link renderLatex} or {@link renderMathML}.
|
|
134
129
|
|
|
135
130
|
Parameters:
|
|
131
|
+
|
|
136
132
|
- {`HTMLElement`} `element` - Element wherein to render SafeMathML formulas.
|
|
137
133
|
- `asynchronously` - Currently ignored, only included for retrocompatibility purposes.
|
|
138
134
|
- `callbackFunc` - Currently ignored, only included for retrocompatibility purposes.
|
|
@@ -146,6 +142,7 @@ All of the following methods are exposed inside of `window.com.wiris.js.JsPlugin
|
|
|
146
142
|
Please consider using `renderMathML`.
|
|
147
143
|
|
|
148
144
|
Parameters:
|
|
145
|
+
|
|
149
146
|
- `asynchronously` - Currently ignored, only included for retrocompatibility purposes.
|
|
150
147
|
- `callbackFunc` - Currently ignored, only included for retrocompatibility purposes.
|
|
151
148
|
- `safeXml` - Currently ignored, only included for retrocompatibility purposes.
|
|
@@ -159,6 +156,7 @@ All of the following methods are exposed inside of `window.com.wiris.js.JsPlugin
|
|
|
159
156
|
Please consider using `renderMathML`.
|
|
160
157
|
|
|
161
158
|
Parameters:
|
|
159
|
+
|
|
162
160
|
- {`HTMLElement`} `element` - Element wherein to render formulas.
|
|
163
161
|
- `asynchronously` - Currently ignored, only included for retrocompatibility purposes.
|
|
164
162
|
- `callbackFunc` - Currently ignored, only included for retrocompatibility purposes.
|
|
@@ -172,6 +170,7 @@ All of the following methods are exposed inside of `window.com.wiris.js.JsPlugin
|
|
|
172
170
|
Please consider using `renderLatex`.
|
|
173
171
|
|
|
174
172
|
Parameters:
|
|
173
|
+
|
|
175
174
|
- `asynchronously` - Currently ignored, only included for retrocompatibility purposes.
|
|
176
175
|
- `callbackFunc` - Currently ignored, only included for retrocompatibility purposes.
|
|
177
176
|
|
|
@@ -184,6 +183,7 @@ All of the following methods are exposed inside of `window.com.wiris.js.JsPlugin
|
|
|
184
183
|
Please consider using `renderLatex`.
|
|
185
184
|
|
|
186
185
|
Parameters:
|
|
186
|
+
|
|
187
187
|
- {`HTMLElement`} `element` - Element wherein to convert formulas.
|
|
188
188
|
- `asynchronously` - Currently ignored, only included for retrocompatibility purposes.
|
|
189
189
|
- `callbackFunc` - Currently ignored, only included for retrocompatibility purposes.
|
package/index.html
CHANGED
|
@@ -1,23 +1,21 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</head>
|
|
15
|
-
<body>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
</p>
|
|
22
|
-
</body>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Testing Viewer MathML</title>
|
|
5
|
+
<meta charset="utf-8" />
|
|
6
|
+
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
|
|
7
|
+
<script src="dist/WIRISplugins.js?viewer=image" defer></script>
|
|
8
|
+
<script>
|
|
9
|
+
window.document.addEventListener("viewerLoaded", () => {
|
|
10
|
+
// window.viewer.properties can be modified here
|
|
11
|
+
// Changes are reflected live
|
|
12
|
+
});
|
|
13
|
+
</script>
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<p>
|
|
17
|
+
<math xmlns="http://www.w3.org/1998/Math/MathML"><mn>2</mn><mo>+</mo><mn>2</mn><mo>=</mo><mn>4</mn></math>
|
|
18
|
+
</p>
|
|
19
|
+
<p>$$4 - 2 = 2$$</p>
|
|
20
|
+
</body>
|
|
23
21
|
</html>
|
package/jest.config.js
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wiris/mathtype-viewer",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.10.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "app.js",
|
|
6
6
|
"scripts": {
|
|
@@ -16,10 +16,15 @@
|
|
|
16
16
|
"author": "Integrations",
|
|
17
17
|
"license": "ISC",
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@wiris/mathtype-html-integration-devkit": "1.17.
|
|
19
|
+
"@wiris/mathtype-html-integration-devkit": "1.17.3"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
+
"@babel/preset-typescript": "^7.24.1",
|
|
23
|
+
"@types/jest": "^29.5.12",
|
|
24
|
+
"babel-jest": "^29.7.0",
|
|
22
25
|
"babel-loader": "^9.1.3",
|
|
26
|
+
"jest": "^29.7.0",
|
|
27
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
23
28
|
"lite-server": "^2.5.4",
|
|
24
29
|
"ts-loader": "^9.4.2",
|
|
25
30
|
"webpack": "^5.75.0",
|
package/project.json
CHANGED
|
@@ -9,9 +9,7 @@
|
|
|
9
9
|
"script": "build",
|
|
10
10
|
"outputPath": "packages/viewer/dist"
|
|
11
11
|
},
|
|
12
|
-
"outputs": [
|
|
13
|
-
"{options.outputPath}"
|
|
14
|
-
]
|
|
12
|
+
"outputs": ["{options.outputPath}"]
|
|
15
13
|
},
|
|
16
14
|
"build-dev": {
|
|
17
15
|
"executor": "nx:run-script",
|
|
@@ -19,21 +17,15 @@
|
|
|
19
17
|
"script": "build-dev",
|
|
20
18
|
"outputPath": "packages/viewer/dist"
|
|
21
19
|
},
|
|
22
|
-
"outputs": [
|
|
23
|
-
"{options.outputPath}"
|
|
24
|
-
]
|
|
20
|
+
"outputs": ["{options.outputPath}"]
|
|
25
21
|
},
|
|
26
22
|
"lint": {
|
|
27
23
|
"executor": "@nx/linter:eslint",
|
|
28
24
|
"options": {
|
|
29
25
|
"eslintConfig": "./.eslintrc.js",
|
|
30
|
-
"lintFilePatterns": [
|
|
31
|
-
"demos/html/viewer/**/*.{ts,tsx,js,jsx}"
|
|
32
|
-
]
|
|
26
|
+
"lintFilePatterns": ["demos/html/viewer/**/*.{ts,tsx,js,jsx}"]
|
|
33
27
|
},
|
|
34
|
-
"outputs": [
|
|
35
|
-
"{options.outputFile}"
|
|
36
|
-
]
|
|
28
|
+
"outputs": ["{options.outputFile}"]
|
|
37
29
|
}
|
|
38
30
|
}
|
|
39
31
|
}
|
package/src/app.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { Properties } from
|
|
2
|
-
import { renderLatex } from
|
|
3
|
-
import { renderMathML } from
|
|
4
|
-
import { bypassEncapsulation } from
|
|
5
|
-
import packageInformation from
|
|
1
|
+
import { Properties } from "./properties";
|
|
2
|
+
import { renderLatex } from "./latex";
|
|
3
|
+
import { renderMathML } from "./mathml";
|
|
4
|
+
import { bypassEncapsulation } from "./retro";
|
|
5
|
+
import packageInformation from "../../../node_modules/@wiris/mathtype-viewer/package.json";
|
|
6
6
|
|
|
7
7
|
declare global {
|
|
8
8
|
interface Window {
|
|
9
9
|
viewer: {
|
|
10
|
-
properties: Properties
|
|
11
|
-
isLoaded: boolean
|
|
12
|
-
version: string
|
|
10
|
+
properties: Properties;
|
|
11
|
+
isLoaded: boolean;
|
|
12
|
+
version: string;
|
|
13
13
|
};
|
|
14
14
|
}
|
|
15
15
|
}
|
|
@@ -24,7 +24,6 @@ main(window);
|
|
|
24
24
|
* @param {Window} w - The window instance of the browser.
|
|
25
25
|
*/
|
|
26
26
|
async function main(w: Window): Promise<void> {
|
|
27
|
-
|
|
28
27
|
const properties: Properties = await Properties.getInstance();
|
|
29
28
|
|
|
30
29
|
// Expose the globals to the browser
|
|
@@ -32,7 +31,7 @@ async function main(w: Window): Promise<void> {
|
|
|
32
31
|
w.viewer = {
|
|
33
32
|
properties,
|
|
34
33
|
isLoaded: false,
|
|
35
|
-
version: packageInformation.version
|
|
34
|
+
version: packageInformation.version,
|
|
36
35
|
};
|
|
37
36
|
} else {
|
|
38
37
|
w.viewer.properties = properties;
|
|
@@ -49,7 +48,7 @@ async function main(w: Window): Promise<void> {
|
|
|
49
48
|
* @param {MutationObserver} observer - Mutation observer to activate or reactivate every time the rendering root changes.
|
|
50
49
|
*/
|
|
51
50
|
properties.render = async () => {
|
|
52
|
-
const element: HTMLElement = document.querySelector(properties.element);
|
|
51
|
+
const element: HTMLElement | null = document.querySelector(properties.element);
|
|
53
52
|
if (element) {
|
|
54
53
|
await renderLatex(properties, element);
|
|
55
54
|
await renderMathML(properties, element);
|
|
@@ -100,5 +99,5 @@ async function main(w: Window): Promise<void> {
|
|
|
100
99
|
bypassEncapsulation(properties, w);
|
|
101
100
|
|
|
102
101
|
// Dispatch an event notifying that the viewer has been loaded
|
|
103
|
-
document.dispatchEvent(new Event(
|
|
102
|
+
document.dispatchEvent(new Event("viewerLoaded"));
|
|
104
103
|
}
|
package/src/latex.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { latexToMathml } from
|
|
2
|
-
import { Properties } from
|
|
1
|
+
import { latexToMathml } from "./services";
|
|
2
|
+
import { Properties } from "./properties";
|
|
3
3
|
|
|
4
4
|
interface LatexPosition {
|
|
5
|
-
start: number
|
|
6
|
-
end: number
|
|
5
|
+
start: number;
|
|
6
|
+
end: number;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
/**
|
|
@@ -12,11 +12,9 @@ interface LatexPosition {
|
|
|
12
12
|
* @param {HTMLElement} root - Any DOM element that can contain MathML.
|
|
13
13
|
*/
|
|
14
14
|
export async function renderLatex(properties: Properties, root: HTMLElement) {
|
|
15
|
-
|
|
16
|
-
if (properties.viewer !== 'image' && properties.viewer !== 'latex') {
|
|
15
|
+
if (properties.viewer !== "image" && properties.viewer !== "latex") {
|
|
17
16
|
return;
|
|
18
17
|
}
|
|
19
|
-
|
|
20
18
|
const latexNodes = findLatexTextNodes(root);
|
|
21
19
|
|
|
22
20
|
for (const latexNode of latexNodes) {
|
|
@@ -30,21 +28,21 @@ export async function renderLatex(properties: Properties, root: HTMLElement) {
|
|
|
30
28
|
* @param {Node} node - Text node in which to search and replace LaTeX instances.
|
|
31
29
|
*/
|
|
32
30
|
async function replaceLatexInTextNode(properties: Properties, node: Node) {
|
|
33
|
-
const textContent: string = node.textContent
|
|
31
|
+
const textContent: string = node.textContent ?? "";
|
|
34
32
|
let pos: number = 0;
|
|
35
33
|
|
|
36
34
|
while (pos < textContent.length) {
|
|
37
|
-
const nextLatexPosition
|
|
35
|
+
const nextLatexPosition = getNextLatexPos(pos, textContent);
|
|
38
36
|
if (nextLatexPosition) {
|
|
39
37
|
// Get left non LaTeX text.
|
|
40
38
|
const leftText: string = textContent.substring(pos, nextLatexPosition.start);
|
|
41
39
|
const leftTextNode = document.createTextNode(leftText);
|
|
42
40
|
// Create a node with left text.
|
|
43
41
|
node.parentNode?.insertBefore(leftTextNode, node);
|
|
44
|
-
node.nodeValue = node.nodeValue
|
|
42
|
+
node.nodeValue = node.nodeValue?.substring(pos, nextLatexPosition.start) ?? "";
|
|
45
43
|
|
|
46
44
|
// Get LaTeX text.
|
|
47
|
-
const latex = textContent.substring(nextLatexPosition.start +
|
|
45
|
+
const latex = textContent.substring(nextLatexPosition.start + "$$".length, nextLatexPosition.end);
|
|
48
46
|
// Convert LaTeX to mathml.
|
|
49
47
|
const response = await latexToMathml(latex, properties.editorServicesRoot, properties.editorServicesExtension);
|
|
50
48
|
// Insert mathml node.
|
|
@@ -53,13 +51,13 @@ async function replaceLatexInTextNode(properties: Properties, node: Node) {
|
|
|
53
51
|
node.parentNode?.insertBefore(fragment, node);
|
|
54
52
|
node.nodeValue = node.nodeValue.substring(nextLatexPosition.start, nextLatexPosition.end);
|
|
55
53
|
|
|
56
|
-
pos = nextLatexPosition.end +
|
|
54
|
+
pos = nextLatexPosition.end + "$$".length;
|
|
57
55
|
} else {
|
|
58
56
|
// No more LaTeX node found.
|
|
59
57
|
const text = textContent.substring(pos);
|
|
60
58
|
const textNode = document.createTextNode(text);
|
|
61
59
|
node.parentNode?.insertBefore(textNode, node);
|
|
62
|
-
node.nodeValue =
|
|
60
|
+
node.nodeValue = "";
|
|
63
61
|
pos = textContent.length;
|
|
64
62
|
}
|
|
65
63
|
}
|
|
@@ -68,22 +66,19 @@ async function replaceLatexInTextNode(properties: Properties, node: Node) {
|
|
|
68
66
|
node.parentNode?.removeChild(node);
|
|
69
67
|
}
|
|
70
68
|
|
|
71
|
-
|
|
72
69
|
/**
|
|
73
70
|
* Returns an array with all HTML LaTeX nodes.
|
|
74
71
|
* @param {HTMLElement} root - Any DOM element that can contain LaTeX.
|
|
75
72
|
* @returns {Node[]} Array with all HTML LaTeX nodes inside root.
|
|
76
73
|
*/
|
|
77
74
|
function findLatexTextNodes(root: any): Node[] {
|
|
78
|
-
const nodeIterator: NodeIterator = document.createNodeIterator(
|
|
79
|
-
|
|
80
|
-
NodeFilter.SHOW_TEXT,
|
|
81
|
-
node => /(\$\$)(.*)(\$\$)/.test(node.nodeValue || '') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
|
|
75
|
+
const nodeIterator: NodeIterator = document.createNodeIterator(root, NodeFilter.SHOW_TEXT, (node) =>
|
|
76
|
+
/(\$\$)(.*)(\$\$)/.test(node.nodeValue || "") ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT,
|
|
82
77
|
);
|
|
83
|
-
const latexNodes
|
|
78
|
+
const latexNodes: Node[] = [];
|
|
84
79
|
|
|
85
80
|
let currentNode: Node | null;
|
|
86
|
-
while (currentNode = nodeIterator.nextNode()) {
|
|
81
|
+
while ((currentNode = nodeIterator.nextNode())) {
|
|
87
82
|
latexNodes.push(currentNode);
|
|
88
83
|
}
|
|
89
84
|
|
|
@@ -96,8 +91,8 @@ function findLatexTextNodes(root: any): Node[] {
|
|
|
96
91
|
* @param {string} text - Text where the next latex it will be searched.
|
|
97
92
|
* @
|
|
98
93
|
*/
|
|
99
|
-
function getNextLatexPos(pos: number, text: string): LatexPosition {
|
|
100
|
-
const firstLatexTags = text.indexOf(
|
|
101
|
-
const secondLatexTags = firstLatexTags == -1 ? -1 : text.indexOf(
|
|
102
|
-
return firstLatexTags != -1 && secondLatexTags != -1 ? {
|
|
94
|
+
function getNextLatexPos(pos: number, text: string): LatexPosition | null {
|
|
95
|
+
const firstLatexTags = text.indexOf("$$", pos);
|
|
96
|
+
const secondLatexTags = firstLatexTags == -1 ? -1 : text.indexOf("$$", firstLatexTags + "$$".length);
|
|
97
|
+
return firstLatexTags != -1 && secondLatexTags != -1 ? { start: firstLatexTags, end: secondLatexTags } : null;
|
|
103
98
|
}
|