synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
152 lines (151 loc) • 4.32 kB
JavaScript
import { jsxs as w, jsx as n } from "react/jsx-runtime";
import { Tabs as z, Tab as N, IconButton as k, TextField as j, Box as B, Typography as D } from "@mui/material";
import { useState as u, useRef as K, useEffect as C } from "react";
import { commandList as V, MARKDOWN_COMMANDS_DATA as E } from "@sage-bionetworks/synapse-types";
import v from "../IconSvg/IconSvg.js";
import { Markdown as _ } from "./MarkdownSynapse.js";
import { UserMentionModal as O } from "./UserMentionModal.js";
import { startCase as P } from "lodash-es";
const x = ["WRITE", "PREVIEW"];
function X({
placeholder: y,
text: o,
setText: i
}) {
const [g, R] = u(0), [f, m] = u(0), [S, p] = u(!1), [A, b] = u(!1), s = K(null);
C(() => {
const t = s.current;
t && t.setSelectionRange(f, f);
}, [s, f]), C(() => {
s.current?.focus();
}, [S]);
const I = (t) => {
const e = [], r = s.current;
if (r) {
const a = r?.selectionStart, c = o.substring(0, a), l = o.substring(a, o.length);
m(a + t.length), e.push(
c,
`${A ? "" : "@"}${t.replace(/\s/g, "")}`,
l
);
}
i(e.join("")), b(!1);
}, W = (t) => {
const e = s.current && s.current.selectionStart;
e && e > 0 && t.charAt(e - 1) === "@" && (b(!0), p(!0));
}, $ = (t) => {
const e = s.current;
if (e) {
const r = e.selectionStart, a = e.selectionEnd, c = o.substring(r, a), l = o.substring(0, r), T = o.substring(a, o.length), d = E[t].openSyntax, M = E[t].closeSyntax;
switch (t) {
case "code": {
const h = [];
h.push(
l,
d,
c,
M,
T
), i(h.join(`\r
`)), e.focus(), m(r + d.length + 2);
break;
}
case "title":
case "bold":
case "italic":
case "strikethrough":
case "latex":
case "subscript":
case "superscript":
case "link":
case "image": {
const h = `${l}${d}${c}${M}${T}`;
e.focus(), m(r + d.length), i(h);
}
}
}
};
return /* @__PURE__ */ w("div", { className: "MarkdownEditor", children: [
/* @__PURE__ */ w("div", { className: "MarkdownEditorControls", children: [
/* @__PURE__ */ n(
z,
{
textColor: "secondary",
indicatorColor: "secondary",
value: g,
onChange: (t, e) => R(e),
children: x.map((t) => /* @__PURE__ */ n(N, { label: t }, t))
}
),
x[g] === "WRITE" && /* @__PURE__ */ w("div", { className: "MarkdownEditorControlsToolbar", children: [
V.map((t) => /* @__PURE__ */ n(
k,
{
size: "small",
onClick: () => $(t),
sx: { width: "32px", height: "32px" },
children: /* @__PURE__ */ n(
v,
{
sx: { fontSize: "inherit" },
icon: t,
label: P(t)
}
)
},
t
)),
/* @__PURE__ */ n(
k,
{
size: "small",
onClick: () => p(!0),
sx: { width: "32px", height: "32px" },
children: /* @__PURE__ */ n(
v,
{
sx: { fontSize: "inherit" },
icon: "tag",
label: "Mention"
}
)
}
)
] })
] }),
/* @__PURE__ */ n("div", { children: x[g] === "WRITE" ? /* @__PURE__ */ n(
j,
{
inputProps: {
"aria-label": "markdown"
},
onChange: (t) => {
i(t.target.value), W(t.target.value);
},
style: { width: "100%" },
multiline: !0,
minRows: 6,
value: o,
inputRef: s,
placeholder: y,
sx: {
textarea: {
resize: "vertical"
}
}
}
) : /* @__PURE__ */ n(B, { sx: { mx: 1, my: 2 }, children: o ? /* @__PURE__ */ n(_, { markdown: o }) : /* @__PURE__ */ n(D, { children: "Nothing to preview" }) }) }),
/* @__PURE__ */ n(
O,
{
show: S,
onClose: () => p(!1),
handleUserTag: I
}
)
] });
}
export {
X as MarkdownEditor
};
//# sourceMappingURL=MarkdownEditor.js.map