forked from c-w/mathquill4quill
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mathquill4quill.js
117 lines (101 loc) · 3.29 KB
/
mathquill4quill.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
(function(Quill, MathQuill, katex) {
function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function areAllDependenciesMet(quill) {
if (!Quill) {
console.log("Quill.js not loaded");
return false;
}
if (!MathQuill) {
console.log("MathQuill.js not loaded");
return false;
}
if (!katex) {
console.log("katex.js not loaded");
return false;
}
if (!quill.options.modules.formula) {
console.log("Formula module not enabled");
return false;
}
return true;
}
function applyInputStyles(mqInput) {
mqInput.style.border = "1px solid #ccc";
mqInput.style.fontSize = "13px";
mqInput.style.minHeight = "26px";
mqInput.style.margin = "0px";
mqInput.style.padding = "3px 5px";
mqInput.style.width = "170px";
}
function applyButtonStyles(button) {
button.style.margin = "5px";
button.style.width = "50px";
button.style.height = "50px";
button.style.backgroundColor = "#ffffff";
button.style.borderColor = "#000000";
button.style.borderRadius = "7px";
button.style.borderWidth = "2px";
}
function getTooltipElement(quill) {
return quill.container.getElementsByClassName("ql-tooltip")[0];
}
function getTooltipLatexFormulaInput(quill) {
var tooltip = getTooltipElement(quill);
return tooltip.getElementsByTagName("input")[0];
}
function getTooltipSaveButton(quill) {
var tooltip = getTooltipElement(quill);
return tooltip.getElementsByClassName("ql-action")[0];
}
function getOperatorButton(displayOperator, operator, mathquill) {
var button = document.createElement("button");
katex.render(displayOperator, button, {
throwOnError: false
});
button.onclick = function() {
mathquill.cmd(operator);
mathquill.focus();
};
applyButtonStyles(button);
return button;
}
Quill.prototype.enableMathQuillFormulaAuthoring = function(options) {
if (!areAllDependenciesMet(this)) {
return;
}
// replace LaTeX formula input with MathQuill input
var latexInput = getTooltipLatexFormulaInput(this);
var mqInput = document.createElement("span");
applyInputStyles(mqInput);
insertAfter(mqInput, latexInput);
latexInput.setAttribute(
"style",
"visibility:hidden;padding:0px;border:0px;width:0px;"
);
// synchronize MathQuill input and LaTeX formula input
var mqField = MathQuill.getInterface(2).MathField(mqInput, {
handlers: {
edit: function() {
latexInput.value = mqField.latex();
}
}
});
if (options && options.operators) {
latexInput.parentNode.appendChild(document.createElement("br"));
var container = document.createElement("div");
container.setAttribute("style", "display:flex;align-items:center;");
options.operators.forEach(function(element) {
container.appendChild(
getOperatorButton(element[0], element[1], mqField)
);
});
latexInput.parentNode.appendChild(container);
}
// don't show the old math when the tooltip gets opened next time
getTooltipSaveButton(this).addEventListener("click", function() {
mqField.latex("");
});
};
})(window.Quill, window.MathQuill, window.katex);