formula-editor-plus
Version:
> 注意：本项目利用了mathquill.js 实现可视化编辑功能，该库必须要jquery支持，并采用Mathjax3以上版本版本渲染
772 lines (771 loc) • 33.5 kB
JavaScript
import { defineComponent as J, ref as p, computed as D, openBlock as i, createElementBlock as g, mergeProps as fe, toHandlerKey as pe, createElementVNode as l, renderSlot as W, createVNode as ee, Transition as we, withCtx as N, normalizeClass as E, normalizeStyle as Ae, Fragment as C, renderList as L, withModifiers as O, createCommentVNode as R, createBlock as te, Teleport as Te, pushScopeId as ne, popScopeId as le, onMounted as Qe, toDisplayString as X, withDirectives as H, vModelText as G, vModelCheckbox as ke, nextTick as q } from "vue";
const be = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAipJREFUSEutlT2IE1EUhc+dSbEI2UILRUEFQQu1yHvPwPiDaWzUNBaiiJ2NqVRYtFECaylraSEINrqdhdqISBRRh7w7RFnTqCAWimCjkSBDnKsTkjDG/M0mp52Z77zz7s8QZiytdQnAJWbeHKNplnxjzDkRuU5Ez6y1B2dqYIw5ISJ34kOLyLEgCO7NzCCXy3mu6z4RkTkAdWbeDSCaiYHneZvCMLQANrSBRCettcvdq5+qBoVCYa7RaDwFkO8AXxeLRVUul9unnzqB1vomgDNdmOM4h6rV6uNk46w6gdY6BscGXT1k5qP9XbkqA6WUdhzneaeoMfMXgF3M/GFqA8/z1oZhyAC2JmBXmHlx0EylTeBore8DONwrItHbZrOp6vV6OLWBMea8iCwl4L+jKNofBMGrYRth4gRa6zUAvgCYT8CuMfPCqHWTxmAbgPcJ2Eo2m91TqVTiAg/VxAYxQSl11XGcswA+tVqt47Va7d0o+KhBI631ZSIq/b3zeSJ6EUXRxSAI4u5JpYEJOpvxbh/pp4jsC4LgTRqHgQZa6wcAjvw3NEQvrbV7pzYwxqyIyM4hoI3MHHfTRBqW4COALYMImUxmu+/7Y4vbm5V+SD6fXxdF0VcRcQcYfCsWi+uT63hcjP4EZIy5LSKnh3xYYuYb46DJ5z0DpdQBAItE1P5Z9+k7EV2w1t5KA/9nDpRSp4hogYh2iIgD4DMRxX3/yHXdZd/3f6SFx+//Ab3QxBl9eSYZAAAAAElFTkSuQmCC", ae = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAKNJREFUGFdjTE1NTWBkZJzPgAcwMjIeZszNzWX/8ePHLEZGxjgcal8xMDDYM4Iks7KyZH///r2IkZHRAU3xTwYGhmApKantYIUNDQ1Mz58/N/////8CBgYGNSTFhdzc3DP7+/u/gxWCQGhoKLOwsHDov3//pjEwMAgyMDBMZWJiapoxYwbIaga4QhDH09OTXUZGJpeRkdHy79+/9XPnzr0CMwgAMJIt2n/WSXsAAAAASUVORK5CYII=", _e = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAAAXNSR0IArs4c6QAAA2dJREFUSEudlFtoXFUUhr91ZjoxwShaa/BSMdoHGRLiyT6DMikShRYvGESYB9s+1IpRiq1gq9aah6kXUCOFIrYqFhHxglFEX/JgKRIlNcw5M5JIUIxhVHywGg1GhpmIezk7TErSZDrR/Xj2Wd/+11r/WkKDk0qlrrHWHlTVK4BD+Xz+y3OFSCNgEAT3qOphYAPw5MzMzJFisViuF3dOoO/7G2Kx2AFVfaQG+FhEBsIw/Pp/AY0xm4EXgRtqgN+stQ8WCoUP/zMwmUwmWlpa7lXVl4BfaoAr3QNNTU2Do6Ojp1eD1k25u7t7k4gcAraJyCvAn6q6W1W/AfbUa05doDFmK/CGU6GqDvyDiDwLXC8i/bOzs29PTU1Vzla5KrCzs/OiRCLxEPAUcNJa+7gDxmKxw6q6A3jX87yBXC43vSagMaazapOXgbSqHmtra9s/PDxcMcbsAxxcPc/L5HK5kYZAY8w6z/PutNa+B/zkVEZR9KYLrHV9ELjR2adSqRydmJj4Yyl0Rcq+71/ueV4WuB/4FNgbRZFrhAO2AMeAHao6JiK7Fu8WoSuAxphu4BPgYlV9ta+vb182m7WLAcaY3cATwGUicreqDkdR9PeqwGQyeX5zc/Mu4AjwbW0qPliaku/7XSJyVETSInI8kUgcXOrJZQqNMVfVrHJLNeWfReSkqv6+rEYinqreDlwLnI7H4zePjY1NrlCYyWRixWJxs7X2BBBvtDSW3O8FjkdRVHLfzig0xlzo1hPwMFCqFvxH4J96YFV1Y3iBiHw+Pz+fGR8fXxjFM8COjo6NiUTilIisB94Pw3CniGg9YBAEj6nqfmB9tTQ3hWF4CrALQOc9EXF7z/mtKCKPhmG4rBlng40x17mHATcEboEccGkvAHt6elrL5fIQsEVEviiVSndMTk7+1aiOQRC8rqrbgDlrbUehUPjVAaWrqysZj8e/chtFRJ4Pw/CFRjB3n0qlbrXWvlZtysZqZjujKHpLXHenp6efcZKB74Dboij6fi3A/v7+dfl8/oSq9gAjra2tW6W3t/e8ubk5B7pEVd/J5/P3rQW2+I/v+3s8z3saaBWRpBhj7gI+cib1PG97LpdzPlzzSafTl5bLZTfXV4vIoARBkFXVAREZaW9v3zI0NFTXe/VeMcY8BzwAfPYvLnVPH3yJjxkAAAAASUVORK5CYII=";
class Ce {
constructor(d, x) {
if (!d || !x)
throw Error("Latex输入框、覆盖内容输入框必填");
this.inputEl = document.querySelector(`${d}`), this.coverEl = document.querySelector(`${x}`), this.init();
}
init() {
this.inputEl.addEventListener("scroll", () => {
this.asyncScroll();
}), this.textareaToDiv();
}
textareaToDiv() {
let d = this.inputEl.value;
d = d.replace(
/(\+|-|\*|\/|=|>|<|!|\^|\(|\)|%)/g,
'<span style="color: SeaGreen;" class="hl">$1</span>'
).replace(/(\\{2})/g, '<span style="color: orange;" class="hl">$1</span>').replace(
/(\\[a-zA-Z]+)/g,
'<span style="color: #008de9;" class="hl">$1</span>'
).replace(
/<span style="color: #008de9;" class="hl">(\\begin|\\end)<\/span>/g,
'<span style="color:orange;" class="hl">$1</span>'
).replace(/([{}])/g, '<span style="color: #608b4e;" class="hl">$1</span>').replace(
/(\\\s{1})/g,
'<span style="color: greenyellow;background-color: transparent" class="hl">\\ </span>'
), this.coverEl.innerHTML = d, this.asyncScroll();
}
asyncScroll() {
this.coverEl.scrollLeft = this.inputEl.scrollLeft, this.coverEl.scrollTop = this.inputEl.scrollTop;
}
}
const ye = (c) => (ne("data-v-3861d2e8"), c = c(), le(), c), Me = { class: "fx" }, Ee = /* @__PURE__ */ ye(() => /* @__PURE__ */ l("img", {
class: "arrow-down",
src: ae,
alt: ""
}, null, -1)), Le = ["onClick"], Se = ["innerHTML"], Be = ["onClick"], He = ["innerHTML"], Xe = /* @__PURE__ */ J({
name: "SelectTitle",
__name: "SelectTitle",
props: {
column: { default: 1 },
trigger: { default: "click" },
data: { default: void 0 }
},
emits: ["change"],
setup(c, { emit: d }) {
const x = c, k = d, A = p(!1), v = D(() => x.column == 1 ? "108px" : `${x.column * 34}px`), m = D(() => x.trigger == "click" ? "click" : "mouseenter"), T = () => {
A.value = !0;
}, u = () => {
A.value = !1;
}, M = (f) => {
k("change", f), u();
};
return (f, S) => (i(), g("div", fe({ class: "tool-title" }, { [pe(m.value)]: T }), [
l("div", Me, [
W(f.$slots, "title", {}, void 0, !0),
Ee
]),
ee(we, { name: "fade" }, {
default: N(() => [
A.value ? (i(), g("div", {
key: 0,
class: E(["popover", f.column > 1 ? "popover-column" : ""]),
style: Ae({ width: v.value })
}, [
f.data && f.data.length > 0 ? (i(), g(C, { key: 0 }, [
f.column > 1 ? (i(!0), g(C, { key: 0 }, L(f.data, (w) => (i(), g("div", {
class: "popover-column-item",
key: w.id,
onClick: O((b) => M(w), ["stop"])
}, [
l("span", {
innerHTML: w.text
}, null, 8, Se)
], 8, Le))), 128)) : (i(!0), g(C, { key: 1 }, L(f.data, (w) => (i(), g("div", {
class: E(["popover-item", "font" + w.id]),
key: w.id,
onClick: O((b) => M(w), ["stop"])
}, [
l("span", {
innerHTML: w.text
}, null, 8, He)
], 10, Be))), 128))
], 64)) : W(f.$slots, "default", { key: 1 }, void 0, !0)
], 6)) : R("", !0)
]),
_: 3
}),
A.value ? (i(), te(Te, {
key: 0,
to: "body"
}, [
l("div", {
class: "mq-select-modal",
onClick: u
})
])) : R("", !0)
], 16));
}
}), U = (c, d) => {
const x = c.__vccOpts || c;
for (const [k, A] of d)
x[k] = A;
return x;
}, K = /* @__PURE__ */ U(Xe, [["__scopeId", "data-v-3861d2e8"]]), Re = [
{
id: "1",
latex: "\\pi",
text: `<svg xmlns="http://www.w3.org/2000/svg" width="1.29ex" height="2.262ex" role="img" focusable="false"
viewBox="0 -750 570 1000" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
style="vertical-align: -0.566ex;">
<defs>
<path id="MJX-5-TEX-I-1D70B"
d="M132 -11Q98 -11 98 22V33L111 61Q186 219 220 334L228 358H196Q158 358 142 355T103 336Q92 329 81 318T62 297T53 285Q51 284 38 284Q19 284 19 294Q19 300 38 329T93 391T164 429Q171 431 389 431Q549 431 553 430Q573 423 573 402Q573 371 541 360Q535 358 472 358H408L405 341Q393 269 393 222Q393 170 402 129T421 65T431 37Q431 20 417 5T381 -10Q370 -10 363 -7T347 17T331 77Q330 86 330 121Q330 170 339 226T357 318T367 358H269L268 354Q268 351 249 275T206 114T175 17Q164 -11 132 -11Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)">
<g data-mml-node="math">
<g data-mml-node="mtable">
<g data-mml-node="mtr">
<g data-mml-node="mtd">
<g data-mml-node="mi">
<use data-c="1D70B" xlink:href="#MJX-5-TEX-I-1D70B"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`
},
{
id: "2",
latex: "\\times",
text: `<svg xmlns="http://www.w3.org/2000/svg" width="1.76ex" height="2.262ex" role="img" focusable="false"
viewBox="0 -750 778 1000" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
style="vertical-align: -0.566ex;">
<defs>
<path stroke-width="20" id="MJX-6-TEX-N-D7"
d="M630 29Q630 9 609 9Q604 9 587 25T493 118L389 222L284 117Q178 13 175 11Q171 9 168 9Q160 9 154 15T147 29Q147 36 161 51T255 146L359 250L255 354Q174 435 161 449T147 471Q147 480 153 485T168 490Q173 490 175 489Q178 487 284 383L389 278L493 382Q570 459 587 475T609 491Q630 491 630 471Q630 464 620 453T522 355L418 250L522 145Q606 61 618 48T630 29Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)">
<g data-mml-node="math">
<g data-mml-node="mtable">
<g data-mml-node="mtr">
<g data-mml-node="mtd">
<g data-mml-node="mo">
<use data-c="D7" xlink:href="#MJX-6-TEX-N-D7"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`
},
{
id: "3",
latex: "\\div",
text: `<svg xmlns="http://www.w3.org/2000/svg" width="1.76ex" height="2.262ex" role="img" focusable="false"
viewBox="0 -750 778 1000" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
style="vertical-align: -0.566ex;">
<defs>
<path stroke-width="20" id="MJX-7-TEX-N-F7"
d="M318 466Q318 500 339 518T386 537Q418 537 438 517T458 466Q458 438 440 417T388 396Q355 396 337 417T318 466ZM56 237T56 250T70 270H706Q721 262 721 250T706 230H70Q56 237 56 250ZM318 34Q318 68 339 86T386 105Q418 105 438 85T458 34Q458 6 440 -15T388 -36Q355 -36 337 -15T318 34Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)">
<g data-mml-node="math">
<g data-mml-node="mtable">
<g data-mml-node="mtr">
<g data-mml-node="mtd">
<g data-mml-node="mo">
<use data-c="F7" xlink:href="#MJX-7-TEX-N-F7"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`
},
{
id: "4",
latex: "\\in",
text: `<svg xmlns="http://www.w3.org/2000/svg" width="1.509ex" height="2.262ex" role="img" focusable="false"
viewBox="0 -750 667 1000" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
style="vertical-align: -0.566ex;">
<defs>
<path id="MJX-17-TEX-N-2208"
d="M84 250Q84 372 166 450T360 539Q361 539 377 539T419 540T469 540H568Q583 532 583 520Q583 511 570 501L466 500Q355 499 329 494Q280 482 242 458T183 409T147 354T129 306T124 272V270H568Q583 262 583 250T568 230H124V228Q124 207 134 177T167 112T231 48T328 7Q355 1 466 0H570Q583 -10 583 -20Q583 -32 568 -40H471Q464 -40 446 -40T417 -41Q262 -41 172 45Q84 127 84 250Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="20" transform="scale(1,-1)">
<g data-mml-node="math">
<g data-mml-node="mtable">
<g data-mml-node="mtr">
<g data-mml-node="mtd">
<g data-mml-node="mo">
<use data-c="2208" xlink:href="#MJX-17-TEX-N-2208"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`
},
{
id: "5",
latex: "\\pm",
text: `<svg xmlns="http://www.w3.org/2000/svg" width="1.66ex" height="2.262ex" role="img" focusable="false"
viewBox="0 -750 778 1000" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
style="vertical-align: -0.566ex;">
<defs>
<path stroke-width="20" id="MJX-19-TEX-N-B1"
d="M56 320T56 333T70 353H369V502Q369 651 371 655Q376 666 388 666Q402 666 405 654T409 596V500V353H707Q722 345 722 333Q722 320 707 313H409V40H707Q722 32 722 20T707 0H70Q56 7 56 20T70 40H369V313H70Q56 320 56 333Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)">
<g data-mml-node="math">
<g data-mml-node="mtable">
<g data-mml-node="mtr">
<g data-mml-node="mtd">
<g data-mml-node="mo">
<use data-c="B1" xlink:href="#MJX-19-TEX-N-B1"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`
},
{
id: "6",
latex: "\\le",
text: `<svg xmlns="http://www.w3.org/2000/svg" width="1.46ex" height="2.262ex" role="img" focusable="false"
viewBox="0 -750 778 1000" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
style="vertical-align: -0.566ex;">
<defs>
<path stroke-width="20" id="MJX-23-TEX-N-2264"
d="M674 636Q682 636 688 630T694 615T687 601Q686 600 417 472L151 346L399 228Q687 92 691 87Q694 81 694 76Q694 58 676 56H670L382 192Q92 329 90 331Q83 336 83 348Q84 359 96 365Q104 369 382 500T665 634Q669 636 674 636ZM84 -118Q84 -108 99 -98H678Q694 -104 694 -118Q694 -130 679 -138H98Q84 -131 84 -118Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)">
<g data-mml-node="math">
<g data-mml-node="mtable">
<g data-mml-node="mtr">
<g data-mml-node="mtd">
<g data-mml-node="mo">
<use data-c="2264" xlink:href="#MJX-23-TEX-N-2264"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`
},
{
id: "7",
latex: "\\ge",
text: `<svg xmlns="http://www.w3.org/2000/svg" width="1.46ex" height="2.262ex" role="img" focusable="false"
viewBox="0 -750 778 1000" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
style="vertical-align: -0.566ex;">
<defs>
<path stroke-width="20" id="MJX-21-TEX-N-2265"
d="M83 616Q83 624 89 630T99 636Q107 636 253 568T543 431T687 361Q694 356 694 346T687 331Q685 329 395 192L107 56H101Q83 58 83 76Q83 77 83 79Q82 86 98 95Q117 105 248 167Q326 204 378 228L626 346L360 472Q291 505 200 548Q112 589 98 597T83 616ZM84 -118Q84 -108 99 -98H678Q694 -104 694 -118Q694 -130 679 -138H98Q84 -131 84 -118Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)">
<g data-mml-node="math">
<g data-mml-node="mtable">
<g data-mml-node="mtr">
<g data-mml-node="mtd">
<g data-mml-node="mo">
<use data-c="2265" xlink:href="#MJX-21-TEX-N-2265"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`
},
{
id: "8",
latex: "\\ne",
text: `<svg xmlns="http://www.w3.org/2000/svg" width="1.56ex" height="2.262ex" role="img" focusable="false"
viewBox="0 -750 778 1000" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
style="vertical-align: -0.566ex;">
<defs>
<path stroke-width="20" id="MJX-25-TEX-N-2260"
d="M166 -215T159 -215T147 -212T141 -204T139 -197Q139 -190 144 -183L306 133H70Q56 140 56 153Q56 168 72 173H327L406 327H72Q56 332 56 347Q56 360 70 367H426Q597 702 602 707Q605 716 618 716Q625 716 630 712T636 703T638 696Q638 692 471 367H707Q722 359 722 347Q722 336 708 328L451 327L371 173H708Q722 163 722 153Q722 140 707 133H351Q175 -210 170 -212Q166 -215 159 -215Z"></path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)">
<g data-mml-node="math">
<g data-mml-node="mtable">
<g data-mml-node="mtr">
<g data-mml-node="mtd">
<g data-mml-node="mo">
<use data-c="2260" xlink:href="#MJX-25-TEX-N-2260"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`
}
], Ie = [
{
id: "1",
latex: "\\left(x-1\\right)\\left(x+3\\right) ",
text: ""
},
{
id: "2",
latex: "\\frac{a}{b}\\pm \\frac{c}{d}= \\frac{ad \\pm bc}{bd} ",
text: ""
},
{
id: "16",
latex: "S=\\pi r^{2}",
text: ""
},
{
id: "3",
latex: "x ={-b \\pm \\sqrt{b^2-4ac}\\over 2a} ",
text: ""
},
{
id: "4",
latex: `\\left\\{\\begin{matrix}
x=a + r\\text{cos}\\theta \\\\
y=b + r\\text{sin}\\theta
\\end{matrix}\\right. `,
text: ""
},
{
id: "6",
latex: "\\left | a-b \\right | \\geqslant \\left | a \\right | -\\left | b \\right | ",
text: ""
},
{
id: "7",
latex: "\\int \\frac{1}{x}\\mathrm{d}x= \\ln \\left| x \\right| +C ",
text: ""
},
{
id: "9",
latex: "\\sum_{i=1}^{n}{(X_i - \\overline{X})^2} ",
text: ""
},
{
id: "10",
latex: "\\frac{1}{n^{2}-1}= \\frac{1}{2}\\left( \\frac{1}{n-1}-\\frac{1}{n+1}\\right) ",
text: ""
},
{
id: "12",
latex: "\\underset{x\\rightarrow\\infty}{\\lim}\\left( 1+\\dfrac{1}{x}\\right)^{x}=\\text{e} ",
text: ""
},
{
id: "13",
latex: "a^{2}=b^{2}+c^{2}-2bc\\cos A ",
text: ""
},
{
id: "5",
latex: `\\left.\\begin{matrix}
a \\subset \\beta ,b \\subset \\beta ,a \\cap b=P \\\\
a \\parallel \\partial ,b \\parallel \\partial
\\end{matrix}\\right\\}\\Rightarrow \\beta \\parallel \\alpha `,
text: ""
},
{
id: "8",
latex: "\\sin \\alpha + \\sin \\beta =2 \\sin \\frac{\\alpha + \\beta}{2}\\cos \\frac{\\alpha - \\beta}{2} ",
text: ""
},
{
id: "11",
latex: "\\overline{x}=\\dfrac{x_{1}p_{1}+x_{2}p_{2}+\\cdots \\cdots +x_{n}p_{n}}{n} ",
text: ""
},
{
id: "14",
latex: "\\text{A}_{n}^{m}=n\\left( n-1\\right)\\cdots \\left( n-m+1\\right)=\\dfrac{n!}{\\left( n-m\\right)!} ",
text: ""
},
{
id: "15",
latex: "s^{2}=\\dfrac{1}{n}[(x_{1}-\\overline{x})^{2}+(x_{2}-\\overline{x})^{2}+\\cdots+(x_{n}-\\overline{x})^{2}]",
text: ""
}
], y = (c) => (ne("data-v-13f19adf"), c = c(), le(), c), Ve = { class: "formula-main" }, qe = { class: "input-main" }, De = { class: "title-tools" }, Ne = { class: "title" }, Je = { class: "math-main" }, Ue = { class: "formula-l" }, ze = { class: "input-board" }, Fe = { class: "input-tool" }, Ye = { class: "tool-item" }, Ze = /* @__PURE__ */ y(() => /* @__PURE__ */ l("div", { class: "fx" }, [
/* @__PURE__ */ l("img", {
class: "color",
src: be,
alt: ""
}),
/* @__PURE__ */ l("img", {
class: "arrow-down",
src: ae,
alt: ""
})
], -1)), Pe = /* @__PURE__ */ y(() => /* @__PURE__ */ l("img", {
class: "font-icon",
src: _e,
alt: ""
}, null, -1)), je = {
key: 0,
class: "use-latex"
}, $e = ["innerHTML", "onClick"], We = { class: "r-switch" }, Oe = { class: "switch-box" }, Ge = ["disabled"], Ke = { class: "input-area" }, et = /* @__PURE__ */ y(() => /* @__PURE__ */ l("div", { class: "temp-ui" }, null, -1)), tt = {
key: 0,
class: "input-ui"
}, nt = {
key: 1,
class: "input-latex"
}, lt = /* @__PURE__ */ y(() => /* @__PURE__ */ l("div", {
id: "latex-cover",
class: "public-s"
}, null, -1)), at = { class: "preview-footer" }, ot = /* @__PURE__ */ y(() => /* @__PURE__ */ l("div", { class: "preview-title" }, "预览公式", -1)), st = ["textContent"], rt = { class: "math-render" }, it = /* @__PURE__ */ y(() => /* @__PURE__ */ l("div", { class: "title" }, " 常用公式 ", -1)), dt = { class: "math-body" }, ct = ["onClick"], ut = /* @__PURE__ */ J({
name: "FormulaEditor",
__name: "index",
props: {
latex: { default: "" },
commonMath: { default: Ie },
toolsData: { default: [] },
titleTools: { default: Re }
},
setup(c, { expose: d }) {
const x = c, k = [
{
text: "ABC 常规",
latex: "mathrm",
id: "1"
},
{
text: "ABC 斜体",
latex: "mathit",
id: "2"
},
{
text: "ABC 加粗",
latex: "mathbf",
id: "3"
},
{
text: "ABC 斜粗",
latex: "boldsymbol",
id: "4"
},
{
text: "ABC 下划线",
latex: "underline",
id: "5"
}
], A = p(!0), v = p(!1), m = p("\\color{#333333}"), T = p(null), u = p(null), M = p(null), f = p(null), S = p("#333333"), w = p(null), b = p(!0), I = p(!1), se = {
created: (e) => {
P(e);
},
updated: (e) => {
P(e);
}
}, z = D(() => window.MathJax ? F(m.value || "") : ""), F = (e) => `$$\\begin{array}{l}${e}\\end{array}$$`;
Qe(() => {
x.latex && (m.value = x.latex);
const e = /* @__PURE__ */ Object.assign({ "../mathquill/mathquill.js": () => import("./mathquill-nnNS63Lg.js") });
for (const t in e)
e[t]().then(() => {
console.log("init formula.js completed!"), Y(), w.value = window.MathQuill.getInterface(2).MathField(
document.querySelector(".temp-ui")
);
});
});
const Y = () => {
var e, t;
u.value = window.MathQuill.getInterface(2).MathField(
M.value,
{
handlers: {
edit: () => {
var n;
m.value = (n = u.value) == null ? void 0 : n.latex();
}
}
}
), (e = u.value) == null || e.latex(m.value), (t = u.value) == null || t.focus(), re();
}, re = () => {
var e;
(e = u.value) == null || e.__controller.container.on("keydown", (t) => {
var n;
t.key === "Enter" && t.shiftKey && ((n = u.value) == null || n.write("\\\\"));
});
}, ie = () => {
var s, a;
let e = $(), t = "", n = "";
if (e) {
if (t = ue(S.value), n = Z(e, "color"), !v.value) {
(s = u.value) == null || s.write(`\\color{${t}}{${n}}`), (a = u.value) == null || a.__controller.selectLeft();
return;
}
V(`\\color{${t}}{${n}}`);
}
}, de = (e) => {
ce(e.latex);
}, ce = (e) => {
var s, a;
let t = $();
if (!t)
return;
let n = Z(t, "weight");
if (!v.value) {
(s = u.value) == null || s.write(`\\${e}{${n}}`), (a = u.value) == null || a.__controller.selectLeft();
return;
}
V(`\\${e}{${n}}`);
}, B = (e) => {
var t, n;
if (!v.value) {
(t = u.value) == null || t.write(`${e.latex}`), (n = u.value) == null || n.focus();
return;
}
V(`${e.latex}`);
}, ue = (e) => {
let t = e, n = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
if (/^(rgb|RGB)/.test(t)) {
for (var s = t.replace(/(?:\(|\)|rgba|RGBA|rgb|RGB)*/g, "").split(","), a = "#", r = 0; r < s.length; r++) {
let o = Number(s[r]).toString(16);
r === 3 ? (o = Math.round(255 * Number(s[r])).toString(16), o = o.length === 1 ? "0" + o : o) : o.length < 2 && (o = "0" + o), a += o;
}
return a.length !== 7 && a.length !== 9 && (a = t), a;
}
if (n.test(t)) {
let o = t.replace(/#/, "").split("");
if (o.length === 6) return t;
if (o.length === 3) {
let h = "#";
for (let Q = 0; Q < o.length; Q += 1) h += o[Q] + o[Q];
return h;
}
}
return t;
}, Z = (e, t) => {
let n;
t == "color" ? n = /(\\color\{[^{}]*\})/g : t == "weight" && (n = /(\\boldsymbol|\\mathrm|\\mathbf\\mathit\\underline)/g);
const s = e.match(n);
return s == null || s.forEach((a) => {
let r = e.split(a)[1], o = 0;
if (r.charAt(0) == "{") {
for (let h = 0; h < r.length; h++)
if (r.charAt(h) == "{" ? o++ : r.charAt(h) == "}" && o--, o == 0) {
let Q = r.substring(0, h + 1);
r = r.substring(1, h), e = e.replace(a + Q, r);
break;
}
}
}), e;
}, P = (e) => {
A.value && (e.style.color = "transparent"), q(() => {
window.MathJax.startup.promise.then(() => {
window.MathJax.typesetPromise([e]).then(() => {
A.value && (e.style.color = "inherit", A.value = !1);
});
});
});
}, ge = () => window.MathJax.tex2svg(z.value, { em: 12, ex: 6, display: !1 }).firstChild.outerHTML, me = () => m.value, he = () => {
var r;
let e = (r = document.querySelector(".latex-viewer>.MathJax")) == null ? void 0 : r.firstChild;
if (!e)
throw new Error("dom not fount");
const t = new XMLSerializer().serializeToString(e), n = new Blob([t], { type: "image/svg+xml" }), s = URL.createObjectURL(n), a = document.createElement("a");
a.href = s, a.download = "math.svg", document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(s);
}, xe = () => {
var h;
const e = (h = document.querySelector(".latex-viewer>.MathJax")) == null ? void 0 : h.firstChild;
if (!e)
throw new Error("dom not fount");
const t = document.createElement("canvas");
t.width = e.clientWidth, t.height = e.clientHeight;
const n = t.getContext("2d"), s = new XMLSerializer().serializeToString(e), a = new Blob([s], { type: "image/svg+xml;charset=utf-8" }), r = URL.createObjectURL(a), o = new Image();
o.onload = function() {
n == null || n.drawImage(o, 0, 0), URL.revokeObjectURL(r);
const Q = t.toDataURL("image/png"), _ = document.createElement("a");
_.href = Q, _.download = "math.png", _.click();
}, o.src = r;
}, ve = () => {
var e;
b.value && (v.value && (m.value = (e = u.value) == null ? void 0 : e.latex(), u.value = null), q(() => {
var t;
v.value ? ((t = T.value) == null || t.focus(), f.value = new Ce(
".latex-el",
"#latex-cover"
)) : (T.value = null, Y());
}));
}, j = () => {
var e, t, n;
if ((e = f.value) == null || e.textareaToDiv(), (t = w.value) == null || t.latex(m.value), !((n = w.value) != null && n.latex()) && v.value && m.value) {
b.value = !1;
return;
}
b.value = !0;
}, $ = () => {
var t, n, s;
if (v.value) {
const a = ((t = T.value) == null ? void 0 : t.selectionStart) || 0, r = ((n = T.value) == null ? void 0 : n.selectionEnd) || 0;
return m.value.substring(a, r);
}
const e = (s = u.value) == null ? void 0 : s.__controller.cursor.selection;
return e ? e.join("latex") : "";
}, V = (e) => {
var o, h;
const t = ((o = T.value) == null ? void 0 : o.selectionStart) || 0, n = ((h = T.value) == null ? void 0 : h.selectionEnd) || 0, s = m.value.substring(0, t), a = m.value.substring(n), r = s + e + a;
m.value = r, q(() => {
var Q, _;
(Q = T.value) == null || Q.focus(), (_ = T.value) == null || _.setSelectionRange(t + e.length, t + e.length), j();
});
};
return d({
latexText: me,
svgHtml: ge,
exportSvg: he,
svgToImage: xe,
insertLatex: B
}), (e, t) => (i(), g("div", Ve, [
l("div", qe, [
l("div", De, [
(i(!0), g(C, null, L(e.toolsData, (n) => (i(), te(K, {
column: 6,
data: n.data,
onChange: B,
key: n.id
}, {
title: N(() => [
l("span", Ne, X(n.title), 1)
]),
_: 2
}, 1032, ["data"]))), 128))
]),
l("div", Je, [
l("div", Ue, [
l("div", ze, [
l("div", Fe, [
l("div", Ye, [
Ze,
H(l("input", {
type: "color",
onInput: ie,
"onUpdate:modelValue": t[0] || (t[0] = (n) => S.value = n)
}, null, 544), [
[G, S.value]
])
]),
ee(K, {
data: k,
onChange: de
}, {
title: N(() => [
Pe
]),
_: 1
}),
e.titleTools && e.titleTools.length > 0 ? (i(), g("div", je, [
(i(!0), g(C, null, L(e.titleTools, (n) => (i(), g("div", {
class: "latex-item",
key: n.id,
innerHTML: n.text,
onClick: (s) => B(n)
}, null, 8, $e))), 128))
])) : R("", !0),
l("div", We, [
l("div", Oe, [
H(l("input", {
disabled: !b.value,
"onUpdate:modelValue": t[1] || (t[1] = (n) => v.value = n),
onChange: ve,
id: "switchButton",
type: "checkbox",
class: "switch"
}, null, 40, Ge), [
[ke, v.value]
]),
l("label", {
for: "switchButton",
class: E({ disabled: !b.value })
}, null, 2)
]),
l("span", {
class: E({ "latex-active": v.value })
}, "Latex", 2)
])
]),
l("div", Ke, [
et,
v.value ? (i(), g("div", nt, [
H(l("textarea", {
ref_key: "latexEl",
ref: T,
class: "latex-el public-s",
"onUpdate:modelValue": t[2] || (t[2] = (n) => m.value = n),
type: "textarea",
onInput: j,
placeholder: "请输入有效的Latex公式"
}, null, 544), [
[G, m.value]
]),
lt
])) : (i(), g("div", tt, [
l("div", {
id: "quill-el",
ref_key: "mathQuillEl",
ref: M
}, null, 512)
]))
])
]),
l("div", at, [
ot,
H(l("div", {
class: "latex-viewer",
textContent: X(z.value)
}, null, 8, st), [
[se]
])
])
]),
e.commonMath && e.commonMath.length > 0 ? (i(), g("div", {
key: 0,
class: E({ "common-r": !0, expand: I.value })
}, [
l("div", {
class: "bar",
onClick: t[3] || (t[3] = (n) => I.value = !I.value)
}),
l("div", rt, [
it,
l("div", dt, [
(i(!0), g(C, null, L(e.commonMath, (n) => (i(), g("p", {
onClick: (s) => B(n),
key: n.id
}, X(F(n.latex)), 9, ct))), 128))
])
])
], 2)) : R("", !0)
])
])
]));
}
}), gt = /* @__PURE__ */ U(ut, [["__scopeId", "data-v-13f19adf"]]), mt = /* @__PURE__ */ J({
name: "ZfButton",
__name: "index",
setup(c) {
const d = p(0);
return (x, k) => (i(), g("div", {
class: "red",
onClick: k[0] || (k[0] = (A) => d.value++)
}, "这是按钮" + X(d.value), 1));
}
}), ht = /* @__PURE__ */ U(mt, [["__scopeId", "data-v-6914b94d"]]), xt = [gt, ht], oe = function(c) {
xt.forEach((d) => {
c.component(d.name || d.__name, d);
});
};
typeof window < "u" && window.Vue && oe(window.Vue);
const ft = {
install: oe
};
export {
gt as FormulaEditor,
ht as ZfButton,
ft as default
};