temml 0.10.34 → 0.11.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.
@@ -1,89 +0,0 @@
1
- # Auto-render extension
2
-
3
- This is a client-side extension to automatically render all of the math inside of the
4
- text of a running HTML document. It searches all of the text nodes in a given element
5
- for the given delimiters, and renders the math in place.
6
-
7
-
8
- This extension isn't part of Temml proper, so the script needs to be included
9
- (via a `<script>` tag) in the page along with Temml itself. For example:
10
-
11
- ```html
12
- <head>
13
- ...
14
- <link rel="stylesheet" href="./Temml-Local.css">
15
- <script src="./temml.min.js"></script>
16
- <script src="./auto-render.min.js"></script>
17
- ...
18
- </head>
19
- <body>
20
- ...
21
- <script>renderMathInElement(document.body);</script>
22
- </body>
23
- ```
24
-
25
- The auto-render extension exposes a single function, `window.renderMathInElement`, with
26
- the following API:
27
-
28
- ```js
29
- function renderMathInElement(elem, options)
30
- ```
31
-
32
- `elem` is an HTML DOM element, typically `document.main`. The function will
33
- recursively search for text nodes inside this element and render the math in them.
34
-
35
- `options` is an optional object argument that can have the same keys as [the
36
- options](https://temml.org/docs/en/administration.html#options) passed to
37
- `temml.render`. In addition, there are five auto-render-specific keys:
38
-
39
- - `delimiters`: This is a list of delimiters to look for math, processed in
40
- the same order as the list. Each delimiter has three properties:
41
-
42
- - `left`: A string which starts the math expression (i.e. the left delimiter).
43
- - `right`: A string which ends the math expression (i.e. the right delimiter).
44
- - `display`: A boolean of whether the math in the expression should be
45
- rendered in display mode or not.
46
-
47
- The default `delimiters` value is:
48
-
49
- ```js
50
- [
51
- { left: "$$", right: "$$", display: true },
52
- { left: "\\(", right: "\\)", display: false },
53
- { left: "\\begin{equation}", right: "\\end{equation}", display: true },
54
- { left: "\\begin{align}", right: "\\end{align}", display: true },
55
- { left: "\\begin{alignat}", right: "\\end{alignat}", display: true },
56
- { left: "\\begin{gather}", right: "\\end{gather}", display: true },
57
- { left: "\\begin{CD}", right: "\\end{CD}", display: true },
58
- { left: "\\begin{multline}", right: "\\end{multline}", display: true },
59
- { left: "\\[", right: "\\]", display: true }
60
- ]
61
- ```
62
-
63
- If you want to add support for inline math via `$…$`, be sure to list it
64
- **after** `$$…$$`. Because rules are processed in order, putting a `$` rule first would
65
- match `$$` and treat as an empty math expression. Here is an example that includes `$…$`:
66
-
67
- ```js
68
- [
69
- {left: "$$", right: "$$", display: true},
70
- // Put $ after $$.
71
- {left: "$", right: "$", display: false},
72
- {left: "\\(", right: "\\)", display: false},
73
- // Put \[ last to avoid conflict with possible future \\[1em] row separator.
74
- {left: "\\[", right: "\\]", display: true}
75
- ]
76
- ```
77
-
78
- - `ignoredTags`: This is a list of DOM node types to ignore when recursing
79
- through. The default value is
80
- `["script", "noscript", "style", "textarea", "pre", "code", "option"]`.
81
-
82
- - `ignoredClasses`: This is a list of DOM node class names to ignore when
83
- recursing through. By default, this value is not set.
84
-
85
- - `errorCallback`: A callback method returning a message and an error stack
86
- in case of an critical error during rendering. The default uses `console.error`.
87
-
88
- - `preProcess`: A callback function, `(math: string) => string`, used to process
89
- math expressions before rendering.
@@ -1,128 +0,0 @@
1
- /* eslint no-console:0 */
2
-
3
- import temml from "temml";
4
- import splitAtDelimiters from "./splitAtDelimiters";
5
-
6
- /* Note: optionsCopy is mutated by this method. If it is ever exposed in the
7
- * API, we should copy it before mutating.
8
- */
9
- const renderMathInText = function(text, optionsCopy) {
10
- const data = splitAtDelimiters(text, optionsCopy.delimiters);
11
- if (data.length === 1 && data[0].type === "text") {
12
- // There is no formula in the text.
13
- // Let's return null which means there is no need to replace
14
- // the current text node with a new one.
15
- return null;
16
- }
17
-
18
- const fragment = document.createDocumentFragment();
19
-
20
- for (let i = 0; i < data.length; i++) {
21
- if (data[i].type === "text") {
22
- fragment.appendChild(document.createTextNode(data[i].data));
23
- } else {
24
- const span = document.createElement("span");
25
- let math = data[i].data;
26
- // Override any display mode defined in the settings with that
27
- // defined by the text itself
28
- optionsCopy.displayMode = data[i].display;
29
- try {
30
- if (optionsCopy.preProcess) {
31
- math = optionsCopy.preProcess(math);
32
- }
33
- temml.render(math, span, optionsCopy);
34
- } catch (e) {
35
- if (!(e instanceof temml.ParseError)) {
36
- throw e;
37
- }
38
- optionsCopy.errorCallback(
39
- "Temml auto-render: Failed to parse `" + data[i].data + "` with ",
40
- e
41
- );
42
- fragment.appendChild(document.createTextNode(data[i].rawData));
43
- continue;
44
- }
45
- fragment.appendChild(span);
46
- }
47
- }
48
-
49
- return fragment;
50
- };
51
-
52
- const renderElem = function(elem, optionsCopy) {
53
- for (let i = 0; i < elem.childNodes.length; i++) {
54
- const childNode = elem.childNodes[i];
55
- if (childNode.nodeType === 3) {
56
- // Text node
57
- const frag = renderMathInText(childNode.textContent, optionsCopy);
58
- if (frag) {
59
- i += frag.childNodes.length - 1;
60
- elem.replaceChild(frag, childNode);
61
- }
62
- } else if (childNode.nodeType === 1) {
63
- // Element node
64
- const className = " " + childNode.className + " ";
65
- const shouldRender =
66
- optionsCopy.ignoredTags.indexOf(childNode.nodeName.toLowerCase()) === -1 &&
67
- optionsCopy.ignoredClasses.every((x) => className.indexOf(" " + x + " ") === -1);
68
-
69
- if (shouldRender) {
70
- renderElem(childNode, optionsCopy);
71
- }
72
- }
73
- // Otherwise, it's something else, and ignore it.
74
- }
75
- };
76
-
77
- const renderMathInElement = function(elem, options) {
78
- if (!elem) {
79
- throw new Error("No element provided to render");
80
- }
81
-
82
- const optionsCopy = {};
83
-
84
- // Object.assign(optionsCopy, option)
85
- for (const option in options) {
86
- if (Object.prototype.hasOwnProperty.call(options, option)) {
87
- optionsCopy[option] = options[option];
88
- }
89
- }
90
-
91
- // default options
92
- optionsCopy.delimiters = optionsCopy.delimiters || [
93
- { left: "$$", right: "$$", display: true },
94
- { left: "\\(", right: "\\)", display: false },
95
- // LaTeX uses $…$, but it ruins the display of normal `$` in text:
96
- // {left: "$", right: "$", display: false},
97
- // $ must come after $$
98
-
99
- // Render AMS environments even if outside $$…$$ delimiters.
100
- { left: "\\begin{equation}", right: "\\end{equation}", display: true },
101
- { left: "\\begin{align}", right: "\\end{align}", display: true },
102
- { left: "\\begin{alignat}", right: "\\end{alignat}", display: true },
103
- { left: "\\begin{gather}", right: "\\end{gather}", display: true },
104
- { left: "\\begin{CD}", right: "\\end{CD}", display: true },
105
-
106
- { left: "\\[", right: "\\]", display: true }
107
- ];
108
- optionsCopy.ignoredTags = optionsCopy.ignoredTags || [
109
- "script",
110
- "noscript",
111
- "style",
112
- "textarea",
113
- "pre",
114
- "code",
115
- "option"
116
- ];
117
- optionsCopy.ignoredClasses = optionsCopy.ignoredClasses || [];
118
- optionsCopy.errorCallback = optionsCopy.errorCallback || console.error;
119
-
120
- // Enable sharing of global macros defined via `\gdef` between different
121
- // math elements within a single call to `renderMathInElement`.
122
- optionsCopy.macros = optionsCopy.macros || {};
123
-
124
- renderElem(elem, optionsCopy);
125
- temml.postProcess(elem);
126
- };
127
-
128
- export default renderMathInElement;
@@ -1,214 +0,0 @@
1
- var renderMathInElement = (function (temml) {
2
- 'use strict';
3
-
4
- /* eslint no-constant-condition:0 */
5
- const findEndOfMath = function(delimiter, text, startIndex) {
6
- // Adapted from
7
- // https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx
8
- let index = startIndex;
9
- let braceLevel = 0;
10
-
11
- const delimLength = delimiter.length;
12
-
13
- while (index < text.length) {
14
- const character = text[index];
15
-
16
- if (braceLevel <= 0 && text.slice(index, index + delimLength) === delimiter) {
17
- return index;
18
- } else if (character === "\\") {
19
- index++;
20
- } else if (character === "{") {
21
- braceLevel++;
22
- } else if (character === "}") {
23
- braceLevel--;
24
- }
25
-
26
- index++;
27
- }
28
-
29
- return -1;
30
- };
31
-
32
- const escapeRegex = function(string) {
33
- return string.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
34
- };
35
-
36
- const amsRegex = /^\\begin{/;
37
-
38
- const splitAtDelimiters = function(text, delimiters) {
39
- let index;
40
- const data = [];
41
-
42
- const regexLeft = new RegExp(
43
- "(" + delimiters.map((x) => escapeRegex(x.left)).join("|") + ")"
44
- );
45
-
46
- while (true) {
47
- index = text.search(regexLeft);
48
- if (index === -1) {
49
- break;
50
- }
51
- if (index > 0) {
52
- data.push({
53
- type: "text",
54
- data: text.slice(0, index)
55
- });
56
- text = text.slice(index); // now text starts with delimiter
57
- }
58
- // ... so this always succeeds:
59
- const i = delimiters.findIndex((delim) => text.startsWith(delim.left));
60
- index = findEndOfMath(delimiters[i].right, text, delimiters[i].left.length);
61
- if (index === -1) {
62
- break;
63
- }
64
- const rawData = text.slice(0, index + delimiters[i].right.length);
65
- const math = amsRegex.test(rawData)
66
- ? rawData
67
- : text.slice(delimiters[i].left.length, index);
68
- data.push({
69
- type: "math",
70
- data: math,
71
- rawData,
72
- display: delimiters[i].display
73
- });
74
- text = text.slice(index + delimiters[i].right.length);
75
- }
76
-
77
- if (text !== "") {
78
- data.push({
79
- type: "text",
80
- data: text
81
- });
82
- }
83
-
84
- return data;
85
- };
86
-
87
- /* eslint no-console:0 */
88
-
89
-
90
- /* Note: optionsCopy is mutated by this method. If it is ever exposed in the
91
- * API, we should copy it before mutating.
92
- */
93
- const renderMathInText = function(text, optionsCopy) {
94
- const data = splitAtDelimiters(text, optionsCopy.delimiters);
95
- if (data.length === 1 && data[0].type === "text") {
96
- // There is no formula in the text.
97
- // Let's return null which means there is no need to replace
98
- // the current text node with a new one.
99
- return null;
100
- }
101
-
102
- const fragment = document.createDocumentFragment();
103
-
104
- for (let i = 0; i < data.length; i++) {
105
- if (data[i].type === "text") {
106
- fragment.appendChild(document.createTextNode(data[i].data));
107
- } else {
108
- const span = document.createElement("span");
109
- let math = data[i].data;
110
- // Override any display mode defined in the settings with that
111
- // defined by the text itself
112
- optionsCopy.displayMode = data[i].display;
113
- try {
114
- if (optionsCopy.preProcess) {
115
- math = optionsCopy.preProcess(math);
116
- }
117
- temml.render(math, span, optionsCopy);
118
- } catch (e) {
119
- if (!(e instanceof temml.ParseError)) {
120
- throw e;
121
- }
122
- optionsCopy.errorCallback(
123
- "Temml auto-render: Failed to parse `" + data[i].data + "` with ",
124
- e
125
- );
126
- fragment.appendChild(document.createTextNode(data[i].rawData));
127
- continue;
128
- }
129
- fragment.appendChild(span);
130
- }
131
- }
132
-
133
- return fragment;
134
- };
135
-
136
- const renderElem = function(elem, optionsCopy) {
137
- for (let i = 0; i < elem.childNodes.length; i++) {
138
- const childNode = elem.childNodes[i];
139
- if (childNode.nodeType === 3) {
140
- // Text node
141
- const frag = renderMathInText(childNode.textContent, optionsCopy);
142
- if (frag) {
143
- i += frag.childNodes.length - 1;
144
- elem.replaceChild(frag, childNode);
145
- }
146
- } else if (childNode.nodeType === 1) {
147
- // Element node
148
- const className = " " + childNode.className + " ";
149
- const shouldRender =
150
- optionsCopy.ignoredTags.indexOf(childNode.nodeName.toLowerCase()) === -1 &&
151
- optionsCopy.ignoredClasses.every((x) => className.indexOf(" " + x + " ") === -1);
152
-
153
- if (shouldRender) {
154
- renderElem(childNode, optionsCopy);
155
- }
156
- }
157
- // Otherwise, it's something else, and ignore it.
158
- }
159
- };
160
-
161
- const renderMathInElement = function(elem, options) {
162
- if (!elem) {
163
- throw new Error("No element provided to render");
164
- }
165
-
166
- const optionsCopy = {};
167
-
168
- // Object.assign(optionsCopy, option)
169
- for (const option in options) {
170
- if (Object.prototype.hasOwnProperty.call(options, option)) {
171
- optionsCopy[option] = options[option];
172
- }
173
- }
174
-
175
- // default options
176
- optionsCopy.delimiters = optionsCopy.delimiters || [
177
- { left: "$$", right: "$$", display: true },
178
- { left: "\\(", right: "\\)", display: false },
179
- // LaTeX uses $…$, but it ruins the display of normal `$` in text:
180
- // {left: "$", right: "$", display: false},
181
- // $ must come after $$
182
-
183
- // Render AMS environments even if outside $$…$$ delimiters.
184
- { left: "\\begin{equation}", right: "\\end{equation}", display: true },
185
- { left: "\\begin{align}", right: "\\end{align}", display: true },
186
- { left: "\\begin{alignat}", right: "\\end{alignat}", display: true },
187
- { left: "\\begin{gather}", right: "\\end{gather}", display: true },
188
- { left: "\\begin{CD}", right: "\\end{CD}", display: true },
189
-
190
- { left: "\\[", right: "\\]", display: true }
191
- ];
192
- optionsCopy.ignoredTags = optionsCopy.ignoredTags || [
193
- "script",
194
- "noscript",
195
- "style",
196
- "textarea",
197
- "pre",
198
- "code",
199
- "option"
200
- ];
201
- optionsCopy.ignoredClasses = optionsCopy.ignoredClasses || [];
202
- optionsCopy.errorCallback = optionsCopy.errorCallback || console.error;
203
-
204
- // Enable sharing of global macros defined via `\gdef` between different
205
- // math elements within a single call to `renderMathInElement`.
206
- optionsCopy.macros = optionsCopy.macros || {};
207
-
208
- renderElem(elem, optionsCopy);
209
- temml.postProcess(elem);
210
- };
211
-
212
- return renderMathInElement;
213
-
214
- })(temml);
@@ -1 +0,0 @@
1
- var renderMathInElement=function(e){"use strict";const t=function(e,t,n){let r=n,i=0;const a=e.length;for(;r<t.length;){const n=t[r];if(i<=0&&t.slice(r,r+a)===e)return r;"\\"===n?r++:"{"===n?i++:"}"===n&&i--,r++}return-1},n=/^\\begin{/,r=function(r,i){const a=function(e,r){let i;const a=[],l=new RegExp("("+r.map((e=>e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"))).join("|")+")");for(;i=e.search(l),-1!==i;){i>0&&(a.push({type:"text",data:e.slice(0,i)}),e=e.slice(i));const l=r.findIndex((t=>e.startsWith(t.left)));if(i=t(r[l].right,e,r[l].left.length),-1===i)break;const s=e.slice(0,i+r[l].right.length),o=n.test(s)?s:e.slice(r[l].left.length,i);a.push({type:"math",data:o,rawData:s,display:r[l].display}),e=e.slice(i+r[l].right.length)}return""!==e&&a.push({type:"text",data:e}),a}(r,i.delimiters);if(1===a.length&&"text"===a[0].type)return null;const l=document.createDocumentFragment();for(let t=0;t<a.length;t++)if("text"===a[t].type)l.appendChild(document.createTextNode(a[t].data));else{const n=document.createElement("span");let r=a[t].data;i.displayMode=a[t].display;try{i.preProcess&&(r=i.preProcess(r)),e.render(r,n,i)}catch(n){if(!(n instanceof e.ParseError))throw n;i.errorCallback("Temml auto-render: Failed to parse `"+a[t].data+"` with ",n),l.appendChild(document.createTextNode(a[t].rawData));continue}l.appendChild(n)}return l},i=function(e,t){for(let n=0;n<e.childNodes.length;n++){const a=e.childNodes[n];if(3===a.nodeType){const i=r(a.textContent,t);i&&(n+=i.childNodes.length-1,e.replaceChild(i,a))}else if(1===a.nodeType){const e=" "+a.className+" ";-1===t.ignoredTags.indexOf(a.nodeName.toLowerCase())&&t.ignoredClasses.every((t=>-1===e.indexOf(" "+t+" ")))&&i(a,t)}}};return function(t,n){if(!t)throw new Error("No element provided to render");const r={};for(const e in n)Object.prototype.hasOwnProperty.call(n,e)&&(r[e]=n[e]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},i(t,r),e.postProcess(t)}}(temml);
@@ -1,84 +0,0 @@
1
- /* eslint no-constant-condition:0 */
2
- const findEndOfMath = function(delimiter, text, startIndex) {
3
- // Adapted from
4
- // https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx
5
- let index = startIndex;
6
- let braceLevel = 0;
7
-
8
- const delimLength = delimiter.length;
9
-
10
- while (index < text.length) {
11
- const character = text[index];
12
-
13
- if (braceLevel <= 0 && text.slice(index, index + delimLength) === delimiter) {
14
- return index;
15
- } else if (character === "\\") {
16
- index++;
17
- } else if (character === "{") {
18
- braceLevel++;
19
- } else if (character === "}") {
20
- braceLevel--;
21
- }
22
-
23
- index++;
24
- }
25
-
26
- return -1;
27
- };
28
-
29
- const escapeRegex = function(string) {
30
- return string.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
31
- };
32
-
33
- const amsRegex = /^\\begin{/;
34
-
35
- const splitAtDelimiters = function(text, delimiters) {
36
- let index;
37
- const data = [];
38
-
39
- const regexLeft = new RegExp(
40
- "(" + delimiters.map((x) => escapeRegex(x.left)).join("|") + ")"
41
- )
42
-
43
- while (true) {
44
- index = text.search(regexLeft);
45
- if (index === -1) {
46
- break;
47
- }
48
- if (index > 0) {
49
- data.push({
50
- type: "text",
51
- data: text.slice(0, index)
52
- });
53
- text = text.slice(index); // now text starts with delimiter
54
- }
55
- // ... so this always succeeds:
56
- const i = delimiters.findIndex((delim) => text.startsWith(delim.left));
57
- index = findEndOfMath(delimiters[i].right, text, delimiters[i].left.length);
58
- if (index === -1) {
59
- break;
60
- }
61
- const rawData = text.slice(0, index + delimiters[i].right.length);
62
- const math = amsRegex.test(rawData)
63
- ? rawData
64
- : text.slice(delimiters[i].left.length, index);
65
- data.push({
66
- type: "math",
67
- data: math,
68
- rawData,
69
- display: delimiters[i].display
70
- });
71
- text = text.slice(index + delimiters[i].right.length);
72
- }
73
-
74
- if (text !== "") {
75
- data.push({
76
- type: "text",
77
- data: text
78
- });
79
- }
80
-
81
- return data;
82
- };
83
-
84
- export default splitAtDelimiters;