@formulaxjs/editor 0.1.1 → 0.2.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 +11 -22
- package/dist/index.cjs +19 -443
- package/dist/index.cjs.map +1 -1
- package/dist/index.global.js +55 -590
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +17 -445
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.global.js
CHANGED
|
@@ -4919,28 +4919,30 @@ var FormulaX = (() => {
|
|
|
4919
4919
|
|
|
4920
4920
|
// ../kity-runtime/src/vendor/legacy-ui-utils.ts
|
|
4921
4921
|
function createLegacyUiUtils() {
|
|
4922
|
-
return
|
|
4923
|
-
ele: createElement,
|
|
4924
|
-
getRectBox,
|
|
4925
|
-
on(target, type, fn) {
|
|
4926
|
-
addEvent(target, type, fn);
|
|
4927
|
-
return this;
|
|
4928
|
-
},
|
|
4929
|
-
delegate(target, selector, type, fn) {
|
|
4930
|
-
delegateEvent(target, selector, type, fn);
|
|
4931
|
-
return this;
|
|
4932
|
-
},
|
|
4933
|
-
publish(topic, ...args) {
|
|
4934
|
-
publish(topic, ...args);
|
|
4935
|
-
},
|
|
4936
|
-
subscribe,
|
|
4937
|
-
getClassList
|
|
4938
|
-
};
|
|
4922
|
+
return legacyUiUtils;
|
|
4939
4923
|
}
|
|
4924
|
+
var legacyUiUtils;
|
|
4940
4925
|
var init_legacy_ui_utils = __esm({
|
|
4941
4926
|
"../kity-runtime/src/vendor/legacy-ui-utils.ts"() {
|
|
4942
4927
|
"use strict";
|
|
4943
4928
|
init_dom_utils();
|
|
4929
|
+
legacyUiUtils = {
|
|
4930
|
+
ele: createElement,
|
|
4931
|
+
getRectBox,
|
|
4932
|
+
on(target, type, fn) {
|
|
4933
|
+
addEvent(target, type, fn);
|
|
4934
|
+
return this;
|
|
4935
|
+
},
|
|
4936
|
+
delegate(target, selector, type, fn) {
|
|
4937
|
+
delegateEvent(target, selector, type, fn);
|
|
4938
|
+
return this;
|
|
4939
|
+
},
|
|
4940
|
+
publish(topic, ...args) {
|
|
4941
|
+
publish(topic, ...args);
|
|
4942
|
+
},
|
|
4943
|
+
subscribe,
|
|
4944
|
+
getClassList
|
|
4945
|
+
};
|
|
4944
4946
|
}
|
|
4945
4947
|
});
|
|
4946
4948
|
|
|
@@ -7357,18 +7359,18 @@ var FormulaX = (() => {
|
|
|
7357
7359
|
this.addPoint(p0[0], p0[1]);
|
|
7358
7360
|
this.addPoint(p3[0], p3[1]);
|
|
7359
7361
|
for (i = 0; i <= 1; i++) {
|
|
7360
|
-
let f = function(
|
|
7361
|
-
return Math.pow(1 -
|
|
7362
|
+
let f = function(t) {
|
|
7363
|
+
return Math.pow(1 - t, 3) * p0[i] + 3 * Math.pow(1 - t, 2) * t * p1[i] + 3 * (1 - t) * Math.pow(t, 2) * p2[i] + Math.pow(t, 3) * p3[i];
|
|
7362
7364
|
};
|
|
7363
7365
|
let b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
|
|
7364
7366
|
let a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
|
|
7365
7367
|
let c = 3 * p1[i] - 3 * p0[i];
|
|
7366
7368
|
if (a == 0) {
|
|
7367
7369
|
if (b == 0) continue;
|
|
7368
|
-
let
|
|
7369
|
-
if (0 <
|
|
7370
|
-
if (i == 0) this.addX(f(
|
|
7371
|
-
if (i == 1) this.addY(f(
|
|
7370
|
+
let t = -c / b;
|
|
7371
|
+
if (0 < t && t < 1) {
|
|
7372
|
+
if (i == 0) this.addX(f(t));
|
|
7373
|
+
if (i == 1) this.addY(f(t));
|
|
7372
7374
|
}
|
|
7373
7375
|
continue;
|
|
7374
7376
|
}
|
|
@@ -14197,16 +14199,16 @@ var FormulaX = (() => {
|
|
|
14197
14199
|
};
|
|
14198
14200
|
_p[5] = {
|
|
14199
14201
|
value: function() {
|
|
14200
|
-
let
|
|
14202
|
+
let t = true;
|
|
14201
14203
|
return {
|
|
14202
|
-
".":
|
|
14203
|
-
"{":
|
|
14204
|
-
"}":
|
|
14205
|
-
"[":
|
|
14206
|
-
"]":
|
|
14207
|
-
"(":
|
|
14208
|
-
")":
|
|
14209
|
-
"|":
|
|
14204
|
+
".": t,
|
|
14205
|
+
"{": t,
|
|
14206
|
+
"}": t,
|
|
14207
|
+
"[": t,
|
|
14208
|
+
"]": t,
|
|
14209
|
+
"(": t,
|
|
14210
|
+
")": t,
|
|
14211
|
+
"|": t
|
|
14210
14212
|
};
|
|
14211
14213
|
}
|
|
14212
14214
|
};
|
|
@@ -19969,85 +19971,24 @@ var FormulaX = (() => {
|
|
|
19969
19971
|
DEFAULT_FORMULA_ATTRIBUTE: () => DEFAULT_FORMULA_ATTRIBUTE,
|
|
19970
19972
|
DEFAULT_FORMULA_CLASS: () => DEFAULT_FORMULA_CLASS,
|
|
19971
19973
|
FORMULA_FLAG_ATTRIBUTE: () => FORMULA_FLAG_ATTRIBUTE,
|
|
19972
|
-
|
|
19974
|
+
FormulaXEditor: () => FormulaXEditor,
|
|
19973
19975
|
createFormulaElement: () => createFormulaElement,
|
|
19974
19976
|
createFormulaMarkup: () => createFormulaMarkup,
|
|
19975
|
-
|
|
19977
|
+
createKityEditor: () => createKityEditor,
|
|
19976
19978
|
ensureFormulaXModalStyles: () => ensureFormulaXModalStyles,
|
|
19979
|
+
ensureKityRuntime: () => ensureKityRuntime,
|
|
19977
19980
|
escapeAttribute: () => escapeAttribute,
|
|
19978
19981
|
escapeHtml: () => escapeHtml,
|
|
19979
19982
|
findFormulaElement: () => findFormulaElement,
|
|
19980
19983
|
formulaXModalStyles: () => formulaXModalStyles,
|
|
19981
19984
|
getFormulaLatexFromElement: () => getFormulaLatexFromElement,
|
|
19982
19985
|
isFormulaElement: () => isFormulaElement,
|
|
19983
|
-
|
|
19984
|
-
|
|
19986
|
+
mountFormulaXEditor: () => mountFormulaXEditor,
|
|
19987
|
+
mountKityEditor: () => mountKityEditor,
|
|
19985
19988
|
replaceFormulaElement: () => replaceFormulaElement,
|
|
19986
|
-
serializeSvgForInsertion: () => serializeSvgForInsertion
|
|
19987
|
-
t: () => t,
|
|
19988
|
-
translations: () => translations
|
|
19989
|
+
serializeSvgForInsertion: () => serializeSvgForInsertion
|
|
19989
19990
|
});
|
|
19990
19991
|
|
|
19991
|
-
// src/dom-renderer.ts
|
|
19992
|
-
var joinPath = (path) => path.join(".");
|
|
19993
|
-
var renderInteractiveHtml = (doc2, activePath) => `
|
|
19994
|
-
<div class="fx-editor-surface" data-role="surface">
|
|
19995
|
-
${renderChildren(doc2.body, [], activePath)}
|
|
19996
|
-
</div>
|
|
19997
|
-
`;
|
|
19998
|
-
var renderChildren = (nodes, basePath, activePath) => {
|
|
19999
|
-
const html = [];
|
|
20000
|
-
for (let index = 0; index <= nodes.length; index += 1) {
|
|
20001
|
-
const path = joinPath([...basePath, index]);
|
|
20002
|
-
const isActive = path === joinPath(activePath);
|
|
20003
|
-
html.push(
|
|
20004
|
-
`<button class="fx-slot${isActive ? " is-active" : ""}" data-path="${path}" type="button" title="${path}"></button>`
|
|
20005
|
-
);
|
|
20006
|
-
if (index < nodes.length) {
|
|
20007
|
-
html.push(renderNode(nodes[index], [...basePath, index], activePath));
|
|
20008
|
-
}
|
|
20009
|
-
}
|
|
20010
|
-
return html.join("");
|
|
20011
|
-
};
|
|
20012
|
-
var renderNode = (node, path, activePath) => {
|
|
20013
|
-
const pathValue = joinPath(path);
|
|
20014
|
-
const isActive = (p) => joinPath(p) === joinPath(activePath);
|
|
20015
|
-
switch (node.type) {
|
|
20016
|
-
case "text":
|
|
20017
|
-
return `<span class="fx-node fx-text" data-node-path="${pathValue}">${node.value}</span>`;
|
|
20018
|
-
case "group":
|
|
20019
|
-
return `<span class="fx-node fx-group" data-node-path="${pathValue}">${renderChildren(node.body, [...path, 0], activePath)}</span>`;
|
|
20020
|
-
case "frac":
|
|
20021
|
-
return `<span class="fx-node fx-frac" data-node-path="${pathValue}">
|
|
20022
|
-
<span class="fx-frac-num${isActive([...path, 0]) ? " is-active" : ""}" data-path="${joinPath([...path, 0])}">${renderChildren(node.numerator, [...path, 0], activePath)}</span>
|
|
20023
|
-
<span class="fx-frac-line"></span>
|
|
20024
|
-
<span class="fx-frac-den${isActive([...path, 1]) ? " is-active" : ""}" data-path="${joinPath([...path, 1])}">${renderChildren(node.denominator, [...path, 1], activePath)}</span>
|
|
20025
|
-
</span>`;
|
|
20026
|
-
case "supsub":
|
|
20027
|
-
return `<span class="fx-node fx-supsub" data-node-path="${pathValue}">
|
|
20028
|
-
<span class="fx-supsub-base">${renderChildren(node.base, [...path, 0], activePath)}</span>
|
|
20029
|
-
<span class="fx-supsub-stack">
|
|
20030
|
-
<span class="fx-sup${isActive([...path, 1]) ? " is-active" : ""}" data-path="${joinPath([...path, 1])}">${renderChildren(node.sup ?? [], [...path, 1], activePath)}</span>
|
|
20031
|
-
<span class="fx-sub${isActive([...path, 2]) ? " is-active" : ""}" data-path="${joinPath([...path, 2])}">${renderChildren(node.sub ?? [], [...path, 2], activePath)}</span>
|
|
20032
|
-
</span>
|
|
20033
|
-
</span>`;
|
|
20034
|
-
case "sqrt":
|
|
20035
|
-
return `<span class="fx-node fx-sqrt" data-node-path="${pathValue}">
|
|
20036
|
-
<span class="fx-sqrt-symbol">\u221A</span>
|
|
20037
|
-
<span class="fx-sqrt-body${isActive([...path, 0]) ? " is-active" : ""}" data-path="${joinPath([...path, 0])}">${renderChildren(node.value, [...path, 0], activePath)}</span>
|
|
20038
|
-
</span>`;
|
|
20039
|
-
case "fenced":
|
|
20040
|
-
return `<span class="fx-node fx-fenced" data-node-path="${pathValue}">
|
|
20041
|
-
<span class="fx-fence">${node.left}</span>
|
|
20042
|
-
<span class="fx-fenced-body${isActive([...path, 0]) ? " is-active" : ""}" data-path="${joinPath([...path, 0])}">${renderChildren(node.body, [...path, 0], activePath)}</span>
|
|
20043
|
-
<span class="fx-fence">${node.right}</span>
|
|
20044
|
-
</span>`;
|
|
20045
|
-
case "doc":
|
|
20046
|
-
return renderChildren(node.body, [0], activePath);
|
|
20047
|
-
}
|
|
20048
|
-
throw new Error(`Unsupported node type: ${String(node.type)}`);
|
|
20049
|
-
};
|
|
20050
|
-
|
|
20051
19992
|
// ../core/src/ast.ts
|
|
20052
19993
|
var text = (value) => ({ type: "text", value });
|
|
20053
19994
|
var group = (body = []) => ({ type: "group", body });
|
|
@@ -20071,125 +20012,11 @@ var FormulaX = (() => {
|
|
|
20071
20012
|
body
|
|
20072
20013
|
});
|
|
20073
20014
|
|
|
20074
|
-
// ../core/src/traversal.ts
|
|
20075
|
-
var resolveContainer = (node, branch) => {
|
|
20076
|
-
switch (node.type) {
|
|
20077
|
-
case "doc":
|
|
20078
|
-
case "group":
|
|
20079
|
-
if (branch !== 0) throw new Error("Invalid branch");
|
|
20080
|
-
return node.body;
|
|
20081
|
-
case "frac":
|
|
20082
|
-
if (branch === 0) return node.numerator;
|
|
20083
|
-
if (branch === 1) return node.denominator;
|
|
20084
|
-
break;
|
|
20085
|
-
case "supsub":
|
|
20086
|
-
if (branch === 0) return node.base;
|
|
20087
|
-
if (branch === 1) return node.sup ?? (node.sup = []);
|
|
20088
|
-
if (branch === 2) return node.sub ?? (node.sub = []);
|
|
20089
|
-
break;
|
|
20090
|
-
case "sqrt":
|
|
20091
|
-
if (branch !== 0) throw new Error("Invalid branch");
|
|
20092
|
-
return node.value;
|
|
20093
|
-
case "fenced":
|
|
20094
|
-
if (branch !== 0) throw new Error("Invalid branch");
|
|
20095
|
-
return node.body;
|
|
20096
|
-
default:
|
|
20097
|
-
break;
|
|
20098
|
-
}
|
|
20099
|
-
throw new Error("Invalid branch");
|
|
20100
|
-
};
|
|
20101
|
-
var cloneDoc = (node) => structuredClone(node);
|
|
20102
|
-
var resolveParent = (root2, path) => {
|
|
20103
|
-
if (path.length === 0) {
|
|
20104
|
-
return { container: root2.body, index: root2.body.length };
|
|
20105
|
-
}
|
|
20106
|
-
if (path.length === 1) {
|
|
20107
|
-
return { container: root2.body, index: path[0] };
|
|
20108
|
-
}
|
|
20109
|
-
let current = root2.body[path[0]];
|
|
20110
|
-
if (!current) {
|
|
20111
|
-
return { container: root2.body, index: path[0] };
|
|
20112
|
-
}
|
|
20113
|
-
let container = root2.body;
|
|
20114
|
-
for (let i2 = 1; i2 < path.length - 2; i2 += 2) {
|
|
20115
|
-
const branch = path[i2];
|
|
20116
|
-
const index = path[i2 + 1];
|
|
20117
|
-
container = resolveContainer(current, branch);
|
|
20118
|
-
current = container[index];
|
|
20119
|
-
}
|
|
20120
|
-
container = resolveContainer(current, path[path.length - 2]);
|
|
20121
|
-
return {
|
|
20122
|
-
container,
|
|
20123
|
-
index: path[path.length - 1] ?? container.length
|
|
20124
|
-
};
|
|
20125
|
-
};
|
|
20126
|
-
var insertAtPath = (root2, path, node) => {
|
|
20127
|
-
const next = cloneDoc(root2);
|
|
20128
|
-
const { container, index } = resolveParent(next, path);
|
|
20129
|
-
container.splice(index, 0, node);
|
|
20130
|
-
return next;
|
|
20131
|
-
};
|
|
20132
|
-
var removeAtPath = (root2, path) => {
|
|
20133
|
-
const next = cloneDoc(root2);
|
|
20134
|
-
const { container, index } = resolveParent(next, path);
|
|
20135
|
-
if (index > 0) {
|
|
20136
|
-
container.splice(index - 1, 1);
|
|
20137
|
-
}
|
|
20138
|
-
return next;
|
|
20139
|
-
};
|
|
20140
|
-
|
|
20141
|
-
// ../core/src/transaction.ts
|
|
20142
|
-
var FormulaTransaction = class {
|
|
20143
|
-
doc;
|
|
20144
|
-
selection;
|
|
20145
|
-
constructor(state) {
|
|
20146
|
-
this.doc = structuredClone(state.doc);
|
|
20147
|
-
this.selection = structuredClone(state.selection);
|
|
20148
|
-
}
|
|
20149
|
-
insert(node) {
|
|
20150
|
-
this.doc = insertAtPath(this.doc, this.selection.focus, node);
|
|
20151
|
-
this.selection = {
|
|
20152
|
-
anchor: [...this.selection.focus],
|
|
20153
|
-
focus: [...this.selection.focus.slice(0, -1), (this.selection.focus.at(-1) ?? 0) + 1]
|
|
20154
|
-
};
|
|
20155
|
-
return this;
|
|
20156
|
-
}
|
|
20157
|
-
deleteBackward() {
|
|
20158
|
-
this.doc = removeAtPath(this.doc, this.selection.focus);
|
|
20159
|
-
this.selection = {
|
|
20160
|
-
anchor: [...this.selection.focus.slice(0, -1), Math.max((this.selection.focus.at(-1) ?? 0) - 1, 0)],
|
|
20161
|
-
focus: [...this.selection.focus.slice(0, -1), Math.max((this.selection.focus.at(-1) ?? 0) - 1, 0)]
|
|
20162
|
-
};
|
|
20163
|
-
return this;
|
|
20164
|
-
}
|
|
20165
|
-
moveFocus(nextFocus) {
|
|
20166
|
-
this.selection = {
|
|
20167
|
-
anchor: [...nextFocus],
|
|
20168
|
-
focus: [...nextFocus]
|
|
20169
|
-
};
|
|
20170
|
-
return this;
|
|
20171
|
-
}
|
|
20172
|
-
apply() {
|
|
20173
|
-
return {
|
|
20174
|
-
doc: this.doc,
|
|
20175
|
-
selection: this.selection
|
|
20176
|
-
};
|
|
20177
|
-
}
|
|
20178
|
-
};
|
|
20179
|
-
|
|
20180
20015
|
// ../core/src/commands.ts
|
|
20181
|
-
var insertText = (value) => (state) => new FormulaTransaction(state).insert(text(value)).apply();
|
|
20182
|
-
var insertFraction = () => (state) => new FormulaTransaction(state).insert(frac([], [])).apply();
|
|
20183
|
-
var insertSuperscript = () => (state) => new FormulaTransaction(state).insert(supsub([text("x")], [text("2")])).apply();
|
|
20184
|
-
var insertSubscript = () => (state) => new FormulaTransaction(state).insert(supsub([text("x")], void 0, [text("i")])).apply();
|
|
20185
|
-
var insertSqrt = () => (state) => new FormulaTransaction(state).insert(sqrt([])).apply();
|
|
20186
|
-
var insertFenced = (left = "(", right = ")") => (state) => new FormulaTransaction(state).insert(fenced(left, right, [])).apply();
|
|
20187
|
-
var backspace = () => (state) => new FormulaTransaction(state).deleteBackward().apply();
|
|
20188
20016
|
var createEmptyState = () => ({
|
|
20189
20017
|
doc: { type: "doc", body: [] },
|
|
20190
20018
|
selection: { anchor: [0], focus: [0] }
|
|
20191
20019
|
});
|
|
20192
|
-
var applyCommand = (state, command) => command(state);
|
|
20193
20020
|
|
|
20194
20021
|
// ../core/src/latex.ts
|
|
20195
20022
|
var isAlpha = (char) => /[a-zA-Z]/.test(char);
|
|
@@ -20447,291 +20274,6 @@ var FormulaX = (() => {
|
|
|
20447
20274
|
};
|
|
20448
20275
|
var parseLatex = (input) => new LatexParser(input).parse();
|
|
20449
20276
|
|
|
20450
|
-
// src/styles.ts
|
|
20451
|
-
var editorStyles = `
|
|
20452
|
-
@keyframes fx-blink {
|
|
20453
|
-
0%, 50% { opacity: 1; }
|
|
20454
|
-
51%, 100% { opacity: 0; }
|
|
20455
|
-
}
|
|
20456
|
-
.fx-editor {
|
|
20457
|
-
border: 1px solid #d8d4c7;
|
|
20458
|
-
border-radius: 2px;
|
|
20459
|
-
background: #fffefb;
|
|
20460
|
-
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
|
|
20461
|
-
padding: 24px 28px;
|
|
20462
|
-
font-family: Cambria, 'Times New Roman', serif;
|
|
20463
|
-
font-size: 25px;
|
|
20464
|
-
line-height: 1.7;
|
|
20465
|
-
min-height: 120px;
|
|
20466
|
-
position: relative;
|
|
20467
|
-
}
|
|
20468
|
-
.fx-editor:focus-within {
|
|
20469
|
-
border-color: #7bbb59;
|
|
20470
|
-
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 3px rgba(123, 187, 89, 0.18);
|
|
20471
|
-
}
|
|
20472
|
-
.fx-editor-surface {
|
|
20473
|
-
display: flex;
|
|
20474
|
-
flex-wrap: wrap;
|
|
20475
|
-
align-items: baseline;
|
|
20476
|
-
gap: 3px;
|
|
20477
|
-
cursor: text;
|
|
20478
|
-
}
|
|
20479
|
-
.fx-node {
|
|
20480
|
-
position: relative;
|
|
20481
|
-
display: inline-flex;
|
|
20482
|
-
align-items: center;
|
|
20483
|
-
padding: 2px 3px;
|
|
20484
|
-
border-radius: 2px;
|
|
20485
|
-
transition: background 0.12s ease;
|
|
20486
|
-
}
|
|
20487
|
-
.fx-node:hover {
|
|
20488
|
-
background: rgba(122, 186, 89, 0.12);
|
|
20489
|
-
}
|
|
20490
|
-
.fx-text {
|
|
20491
|
-
color: #2b2925;
|
|
20492
|
-
}
|
|
20493
|
-
.fx-group {
|
|
20494
|
-
background: rgba(243, 241, 230, 0.82);
|
|
20495
|
-
border: 1px dashed #c8c0a8;
|
|
20496
|
-
}
|
|
20497
|
-
.fx-frac {
|
|
20498
|
-
display: inline-flex;
|
|
20499
|
-
flex-direction: column;
|
|
20500
|
-
align-items: center;
|
|
20501
|
-
vertical-align: middle;
|
|
20502
|
-
padding: 0 5px;
|
|
20503
|
-
}
|
|
20504
|
-
.fx-frac-num, .fx-frac-den {
|
|
20505
|
-
display: flex;
|
|
20506
|
-
flex-wrap: wrap;
|
|
20507
|
-
align-items: center;
|
|
20508
|
-
justify-content: center;
|
|
20509
|
-
padding: 3px 8px;
|
|
20510
|
-
min-width: 24px;
|
|
20511
|
-
min-height: 28px;
|
|
20512
|
-
border-radius: 2px;
|
|
20513
|
-
transition: all 0.15s ease;
|
|
20514
|
-
}
|
|
20515
|
-
.fx-frac-num {
|
|
20516
|
-
border-bottom: 2px solid #2e2c29;
|
|
20517
|
-
padding-bottom: 6px;
|
|
20518
|
-
}
|
|
20519
|
-
.fx-frac-den {
|
|
20520
|
-
border-top: 2px solid #2e2c29;
|
|
20521
|
-
padding-top: 6px;
|
|
20522
|
-
}
|
|
20523
|
-
.fx-frac-num:hover, .fx-frac-den:hover {
|
|
20524
|
-
background: rgba(122, 186, 89, 0.1);
|
|
20525
|
-
}
|
|
20526
|
-
.fx-frac-num.is-active, .fx-frac-den.is-active {
|
|
20527
|
-
background: rgba(122, 186, 89, 0.16);
|
|
20528
|
-
box-shadow: inset 0 0 0 1px rgba(83, 184, 86, 0.5);
|
|
20529
|
-
}
|
|
20530
|
-
.fx-supsub {
|
|
20531
|
-
display: inline-flex;
|
|
20532
|
-
align-items: baseline;
|
|
20533
|
-
gap: 0;
|
|
20534
|
-
}
|
|
20535
|
-
.fx-supsub-base {
|
|
20536
|
-
display: inline-flex;
|
|
20537
|
-
align-items: center;
|
|
20538
|
-
padding: 0 2px;
|
|
20539
|
-
}
|
|
20540
|
-
.fx-supsub-stack {
|
|
20541
|
-
display: inline-flex;
|
|
20542
|
-
flex-direction: column;
|
|
20543
|
-
align-items: flex-start;
|
|
20544
|
-
font-size: 0.65em;
|
|
20545
|
-
margin-left: 2px;
|
|
20546
|
-
}
|
|
20547
|
-
.fx-sup, .fx-sub {
|
|
20548
|
-
display: flex;
|
|
20549
|
-
align-items: center;
|
|
20550
|
-
min-width: 16px;
|
|
20551
|
-
min-height: 20px;
|
|
20552
|
-
padding: 0 4px;
|
|
20553
|
-
border-radius: 2px;
|
|
20554
|
-
transition: all 0.15s ease;
|
|
20555
|
-
}
|
|
20556
|
-
.fx-sup {
|
|
20557
|
-
vertical-align: super;
|
|
20558
|
-
}
|
|
20559
|
-
.fx-sub {
|
|
20560
|
-
vertical-align: sub;
|
|
20561
|
-
}
|
|
20562
|
-
.fx-sup:hover, .fx-sub:hover {
|
|
20563
|
-
background: rgba(122, 186, 89, 0.1);
|
|
20564
|
-
}
|
|
20565
|
-
.fx-sup.is-active, .fx-sub.is-active {
|
|
20566
|
-
background: rgba(122, 186, 89, 0.16);
|
|
20567
|
-
box-shadow: inset 0 0 0 1px rgba(83, 184, 86, 0.5);
|
|
20568
|
-
}
|
|
20569
|
-
.fx-sqrt {
|
|
20570
|
-
display: inline-flex;
|
|
20571
|
-
align-items: baseline;
|
|
20572
|
-
}
|
|
20573
|
-
.fx-sqrt-symbol {
|
|
20574
|
-
font-size: 1.1em;
|
|
20575
|
-
color: #2e2c29;
|
|
20576
|
-
margin-right: 2px;
|
|
20577
|
-
}
|
|
20578
|
-
.fx-sqrt-body {
|
|
20579
|
-
display: inline-flex;
|
|
20580
|
-
align-items: center;
|
|
20581
|
-
border-top: 2px solid #2e2c29;
|
|
20582
|
-
padding: 4px 6px 0;
|
|
20583
|
-
margin-left: 2px;
|
|
20584
|
-
}
|
|
20585
|
-
.fx-sqrt-body:hover {
|
|
20586
|
-
background: rgba(122, 186, 89, 0.1);
|
|
20587
|
-
}
|
|
20588
|
-
.fx-sqrt-body.is-active {
|
|
20589
|
-
background: rgba(122, 186, 89, 0.16);
|
|
20590
|
-
}
|
|
20591
|
-
.fx-fenced {
|
|
20592
|
-
display: inline-flex;
|
|
20593
|
-
align-items: center;
|
|
20594
|
-
background: rgba(243, 241, 230, 0.78);
|
|
20595
|
-
border-radius: 3px;
|
|
20596
|
-
padding: 0 4px;
|
|
20597
|
-
}
|
|
20598
|
-
.fx-fence {
|
|
20599
|
-
color: #59554d;
|
|
20600
|
-
font-size: 1.2em;
|
|
20601
|
-
padding: 0 2px;
|
|
20602
|
-
}
|
|
20603
|
-
.fx-fenced-body {
|
|
20604
|
-
display: inline-flex;
|
|
20605
|
-
align-items: center;
|
|
20606
|
-
padding: 0 6px;
|
|
20607
|
-
}
|
|
20608
|
-
.fx-fenced-body:hover {
|
|
20609
|
-
background: rgba(122, 186, 89, 0.1);
|
|
20610
|
-
border-radius: 2px;
|
|
20611
|
-
}
|
|
20612
|
-
.fx-fenced-body.is-active {
|
|
20613
|
-
background: rgba(122, 186, 89, 0.16);
|
|
20614
|
-
border-radius: 2px;
|
|
20615
|
-
}
|
|
20616
|
-
.fx-slot {
|
|
20617
|
-
width: 3px;
|
|
20618
|
-
height: 1.2em;
|
|
20619
|
-
border: none;
|
|
20620
|
-
background: #53b856;
|
|
20621
|
-
padding: 0;
|
|
20622
|
-
margin: 0 1px;
|
|
20623
|
-
cursor: text;
|
|
20624
|
-
border-radius: 1px;
|
|
20625
|
-
vertical-align: middle;
|
|
20626
|
-
}
|
|
20627
|
-
.fx-slot.is-active {
|
|
20628
|
-
animation: fx-blink 1s infinite;
|
|
20629
|
-
}
|
|
20630
|
-
.fx-slot:hover {
|
|
20631
|
-
background: #77c75b;
|
|
20632
|
-
}
|
|
20633
|
-
`;
|
|
20634
|
-
|
|
20635
|
-
// src/editor.ts
|
|
20636
|
-
var FormulaEditor = class {
|
|
20637
|
-
state;
|
|
20638
|
-
root;
|
|
20639
|
-
onChange;
|
|
20640
|
-
locale;
|
|
20641
|
-
constructor(options) {
|
|
20642
|
-
this.root = options.root;
|
|
20643
|
-
this.state = options.initialState ?? createEmptyState();
|
|
20644
|
-
this.onChange = options.onChange;
|
|
20645
|
-
this.locale = options.locale ?? "en";
|
|
20646
|
-
this.root.classList.add("fx-editor");
|
|
20647
|
-
this.root.tabIndex = 0;
|
|
20648
|
-
this.ensureStyles();
|
|
20649
|
-
this.bindEvents();
|
|
20650
|
-
this.render();
|
|
20651
|
-
}
|
|
20652
|
-
getState() {
|
|
20653
|
-
return structuredClone(this.state);
|
|
20654
|
-
}
|
|
20655
|
-
getLocale() {
|
|
20656
|
-
return this.locale;
|
|
20657
|
-
}
|
|
20658
|
-
setState(state) {
|
|
20659
|
-
this.state = structuredClone(state);
|
|
20660
|
-
this.render();
|
|
20661
|
-
}
|
|
20662
|
-
dispatch(command) {
|
|
20663
|
-
this.state = applyCommand(this.state, command);
|
|
20664
|
-
this.render();
|
|
20665
|
-
this.onChange?.(this.getState());
|
|
20666
|
-
}
|
|
20667
|
-
ensureStyles() {
|
|
20668
|
-
if (document.getElementById("fx-editor-styles")) return;
|
|
20669
|
-
const style = document.createElement("style");
|
|
20670
|
-
style.id = "fx-editor-styles";
|
|
20671
|
-
style.textContent = editorStyles;
|
|
20672
|
-
document.head.appendChild(style);
|
|
20673
|
-
}
|
|
20674
|
-
bindEvents() {
|
|
20675
|
-
this.root.addEventListener("click", (event2) => {
|
|
20676
|
-
const target = event2.target;
|
|
20677
|
-
const pathValue = target.dataset.path;
|
|
20678
|
-
if (pathValue === void 0) return;
|
|
20679
|
-
const path = pathValue === "" ? [] : pathValue.split(".").map(Number);
|
|
20680
|
-
this.moveSelection(path);
|
|
20681
|
-
});
|
|
20682
|
-
this.root.addEventListener("keydown", (event2) => {
|
|
20683
|
-
if (event2.key === "Backspace") {
|
|
20684
|
-
event2.preventDefault();
|
|
20685
|
-
this.dispatch(backspace());
|
|
20686
|
-
return;
|
|
20687
|
-
}
|
|
20688
|
-
if (event2.key === "/") {
|
|
20689
|
-
event2.preventDefault();
|
|
20690
|
-
this.dispatch(insertFraction());
|
|
20691
|
-
return;
|
|
20692
|
-
}
|
|
20693
|
-
if (event2.key === "^") {
|
|
20694
|
-
event2.preventDefault();
|
|
20695
|
-
this.dispatch(insertSuperscript());
|
|
20696
|
-
return;
|
|
20697
|
-
}
|
|
20698
|
-
if (event2.key === "_") {
|
|
20699
|
-
event2.preventDefault();
|
|
20700
|
-
this.dispatch(insertSubscript());
|
|
20701
|
-
return;
|
|
20702
|
-
}
|
|
20703
|
-
if (event2.key === "r" && event2.ctrlKey) {
|
|
20704
|
-
event2.preventDefault();
|
|
20705
|
-
this.dispatch(insertSqrt());
|
|
20706
|
-
return;
|
|
20707
|
-
}
|
|
20708
|
-
if (event2.key === "(") {
|
|
20709
|
-
event2.preventDefault();
|
|
20710
|
-
this.dispatch(insertFenced("(", ")"));
|
|
20711
|
-
return;
|
|
20712
|
-
}
|
|
20713
|
-
if (event2.key.length === 1 && !event2.ctrlKey && !event2.metaKey) {
|
|
20714
|
-
event2.preventDefault();
|
|
20715
|
-
this.dispatch(insertText(event2.key));
|
|
20716
|
-
}
|
|
20717
|
-
});
|
|
20718
|
-
}
|
|
20719
|
-
moveSelection(path) {
|
|
20720
|
-
this.state = {
|
|
20721
|
-
...this.state,
|
|
20722
|
-
selection: {
|
|
20723
|
-
anchor: [...path],
|
|
20724
|
-
focus: [...path]
|
|
20725
|
-
}
|
|
20726
|
-
};
|
|
20727
|
-
this.render();
|
|
20728
|
-
this.onChange?.(this.getState());
|
|
20729
|
-
}
|
|
20730
|
-
render() {
|
|
20731
|
-
this.root.innerHTML = renderInteractiveHtml(this.state.doc, this.state.selection.focus);
|
|
20732
|
-
}
|
|
20733
|
-
};
|
|
20734
|
-
|
|
20735
20277
|
// ../kity-runtime/public/assets/images/toolbar/btn.png
|
|
20736
20278
|
var btn_default = "./btn-5DANP6JY.png";
|
|
20737
20279
|
|
|
@@ -23270,19 +22812,19 @@ var FormulaX = (() => {
|
|
|
23270
22812
|
return this;
|
|
23271
22813
|
},
|
|
23272
22814
|
_applyTransform() {
|
|
23273
|
-
const
|
|
22815
|
+
const t = this.transform;
|
|
23274
22816
|
const result = [];
|
|
23275
|
-
if (
|
|
23276
|
-
result.push(["translate(",
|
|
22817
|
+
if (t.translate) {
|
|
22818
|
+
result.push(["translate(", t.translate, ")"]);
|
|
23277
22819
|
}
|
|
23278
|
-
if (
|
|
23279
|
-
result.push(["rotate(",
|
|
22820
|
+
if (t.rotate) {
|
|
22821
|
+
result.push(["rotate(", t.rotate, ")"]);
|
|
23280
22822
|
}
|
|
23281
|
-
if (
|
|
23282
|
-
result.push(["scale(",
|
|
22823
|
+
if (t.scale) {
|
|
22824
|
+
result.push(["scale(", t.scale, ")"]);
|
|
23283
22825
|
}
|
|
23284
|
-
if (
|
|
23285
|
-
result.push(["matrix(",
|
|
22826
|
+
if (t.matrix) {
|
|
22827
|
+
result.push(["matrix(", t.matrix, ")"]);
|
|
23286
22828
|
}
|
|
23287
22829
|
this.node.setAttribute("transform", utils_default.flatten(result).join(" "));
|
|
23288
22830
|
return this;
|
|
@@ -23291,8 +22833,8 @@ var FormulaX = (() => {
|
|
|
23291
22833
|
this.transform.matrix = m;
|
|
23292
22834
|
return this._applyTransform();
|
|
23293
22835
|
},
|
|
23294
|
-
setTranslate(
|
|
23295
|
-
this.transform.translate =
|
|
22836
|
+
setTranslate(t) {
|
|
22837
|
+
this.transform.translate = t !== null && [].slice.call(arguments) || null;
|
|
23296
22838
|
return this._applyTransform();
|
|
23297
22839
|
},
|
|
23298
22840
|
setRotate(r) {
|
|
@@ -24186,7 +23728,7 @@ var FormulaX = (() => {
|
|
|
24186
23728
|
var DEFAULT_EDITOR_HEIGHT = "auto";
|
|
24187
23729
|
var KITY_STYLE_ID = "formulax-kity-editor-styles";
|
|
24188
23730
|
var runtimePromise = null;
|
|
24189
|
-
function
|
|
23731
|
+
function resolveContainer(el) {
|
|
24190
23732
|
if (typeof el === "string") {
|
|
24191
23733
|
const element = document.querySelector(el);
|
|
24192
23734
|
if (!(element instanceof HTMLElement)) {
|
|
@@ -24274,7 +23816,7 @@ var FormulaX = (() => {
|
|
|
24274
23816
|
kity: runtimeWindow.kity,
|
|
24275
23817
|
otherPosition: legacyOtherPosition,
|
|
24276
23818
|
uiDef: legacyUiDef,
|
|
24277
|
-
uiUtils:
|
|
23819
|
+
uiUtils: legacyUiUtils
|
|
24278
23820
|
};
|
|
24279
23821
|
}
|
|
24280
23822
|
async function ensureKityRuntime() {
|
|
@@ -24359,7 +23901,7 @@ var FormulaX = (() => {
|
|
|
24359
23901
|
handlePromise;
|
|
24360
23902
|
constructor(options) {
|
|
24361
23903
|
const { el, ...editorOptions } = options;
|
|
24362
|
-
this.container =
|
|
23904
|
+
this.container = resolveContainer(el);
|
|
24363
23905
|
this.options = editorOptions;
|
|
24364
23906
|
this.handlePromise = mountKityEditor(this.container, this.options);
|
|
24365
23907
|
}
|
|
@@ -24737,7 +24279,7 @@ var FormulaX = (() => {
|
|
|
24737
24279
|
style.textContent = formulaXModalStyles;
|
|
24738
24280
|
doc2.head.appendChild(style);
|
|
24739
24281
|
}
|
|
24740
|
-
function
|
|
24282
|
+
function mountFormulaXEditor(root2, options = {}) {
|
|
24741
24283
|
let destroyed = false;
|
|
24742
24284
|
let latestLatex = options.initialLatex ?? "";
|
|
24743
24285
|
let handle = null;
|
|
@@ -25146,83 +24688,6 @@ var FormulaX = (() => {
|
|
|
25146
24688
|
function mergeInlineStyles2(...values) {
|
|
25147
24689
|
return values.flatMap((value) => value?.split(";") ?? []).map((value) => value.trim()).filter(Boolean).join("; ");
|
|
25148
24690
|
}
|
|
25149
|
-
|
|
25150
|
-
// src/i18n.ts
|
|
25151
|
-
var translations = {
|
|
25152
|
-
en: {
|
|
25153
|
-
equation: "Equation",
|
|
25154
|
-
structures: "Structures",
|
|
25155
|
-
symbols: "Symbols",
|
|
25156
|
-
matrices: "Matrices",
|
|
25157
|
-
templates: "Templates",
|
|
25158
|
-
insert: "Insert",
|
|
25159
|
-
greek: "Greek",
|
|
25160
|
-
operators: "Operators",
|
|
25161
|
-
relations: "Relations",
|
|
25162
|
-
fraction: "Fraction",
|
|
25163
|
-
superscript: "Superscript",
|
|
25164
|
-
subscript: "Subscript",
|
|
25165
|
-
squareRoot: "Square Root",
|
|
25166
|
-
parentheses: "Parentheses",
|
|
25167
|
-
plusMinus: "Plus Minus",
|
|
25168
|
-
multiply: "Multiply",
|
|
25169
|
-
divide: "Divide",
|
|
25170
|
-
dot: "Dot",
|
|
25171
|
-
union: "Union",
|
|
25172
|
-
intersect: "Intersection",
|
|
25173
|
-
lessOrEqual: "Less or Equal",
|
|
25174
|
-
greaterOrEqual: "Greater or Equal",
|
|
25175
|
-
notEqual: "Not Equal",
|
|
25176
|
-
approximate: "Approximate",
|
|
25177
|
-
infinity: "Infinity",
|
|
25178
|
-
arrow: "Arrow",
|
|
25179
|
-
limit: "Limit",
|
|
25180
|
-
sine: "Sine",
|
|
25181
|
-
logarithm: "Logarithm",
|
|
25182
|
-
matrix: "Matrix",
|
|
25183
|
-
summation: "Summation",
|
|
25184
|
-
integral: "Integral",
|
|
25185
|
-
placeholder: "WPS-inspired ribbon layout. Some tiles are placeholders for future SDK features."
|
|
25186
|
-
},
|
|
25187
|
-
zh: {
|
|
25188
|
-
equation: "\u516C\u5F0F",
|
|
25189
|
-
structures: "\u7ED3\u6784",
|
|
25190
|
-
symbols: "\u7B26\u53F7",
|
|
25191
|
-
matrices: "\u77E9\u9635",
|
|
25192
|
-
templates: "\u6A21\u677F",
|
|
25193
|
-
insert: "\u63D2\u5165",
|
|
25194
|
-
greek: "\u5E0C\u814A\u5B57\u6BCD",
|
|
25195
|
-
operators: "\u8FD0\u7B97\u7B26",
|
|
25196
|
-
relations: "\u5173\u7CFB",
|
|
25197
|
-
fraction: "\u5206\u6570",
|
|
25198
|
-
superscript: "\u4E0A\u6807",
|
|
25199
|
-
subscript: "\u4E0B\u6807",
|
|
25200
|
-
squareRoot: "\u5E73\u65B9\u6839",
|
|
25201
|
-
parentheses: "\u62EC\u53F7",
|
|
25202
|
-
plusMinus: "\u52A0\u51CF",
|
|
25203
|
-
multiply: "\u4E58",
|
|
25204
|
-
divide: "\u9664",
|
|
25205
|
-
dot: "\u70B9\u4E58",
|
|
25206
|
-
union: "\u5E76\u96C6",
|
|
25207
|
-
intersect: "\u4EA4\u96C6",
|
|
25208
|
-
lessOrEqual: "\u5C0F\u4E8E\u7B49\u4E8E",
|
|
25209
|
-
greaterOrEqual: "\u5927\u4E8E\u7B49\u4E8E",
|
|
25210
|
-
notEqual: "\u4E0D\u7B49\u4E8E",
|
|
25211
|
-
approximate: "\u7EA6\u7B49\u4E8E",
|
|
25212
|
-
infinity: "\u65E0\u7A77",
|
|
25213
|
-
arrow: "\u7BAD\u5934",
|
|
25214
|
-
limit: "\u6781\u9650",
|
|
25215
|
-
sine: "\u6B63\u5F26",
|
|
25216
|
-
logarithm: "\u5BF9\u6570",
|
|
25217
|
-
matrix: "\u77E9\u9635",
|
|
25218
|
-
summation: "\u6C42\u548C",
|
|
25219
|
-
integral: "\u79EF\u5206",
|
|
25220
|
-
placeholder: "WPS \u98CE\u683C\u7684\u5DE5\u5177\u680F\u5E03\u5C40\u3002\u90E8\u5206\u6309\u94AE\u4ECD\u662F\u672A\u6765 SDK \u529F\u80FD\u7684\u5360\u4F4D\u9879\u3002"
|
|
25221
|
-
}
|
|
25222
|
-
};
|
|
25223
|
-
function t(locale, key) {
|
|
25224
|
-
return translations[locale][key] ?? translations.en[key];
|
|
25225
|
-
}
|
|
25226
24691
|
return __toCommonJS(index_exports);
|
|
25227
24692
|
})();
|
|
25228
24693
|
/*!
|