@pie-element/inline-dropdown 10.1.2-next.4 → 10.1.2-next.6

package/dist/author/index.d.ts

@@ -39,5 +39,6 @@ export default class InlineDropdown extends HTMLElement {
     insertSound(handler: any): void;
     onDeleteSound(src: any, done: any): void;
     _render(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/dist/author/index.js

@@ -1,4 +1,4 @@
-import e from "./main.js";
+import { Main as e } from "./main.js";
 import t from "./defaults.js";
 import { createSlateMarkup as n, processMarkup as r } from "./markupUtils.js";
 import i from "react";
@@ -75,8 +75,11 @@ var p = f("multiple-choice:configure"), m = class f extends HTMLElement {
 		});
 		this._root ||= a(this), this._root.render(t);
 	}
+	connectedCallback() {
+		this._render();
+	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion

package/dist/author/inline-dropdown-toolbar.d.ts

@@ -39,6 +39,7 @@ declare class RespAreaToolbar extends React.Component {
     onSelectChoice: any;
     onRemoveChoice: any;
     onEditChoice: any;
+    finishEditing: any;
     onKeyDown: any;
     onBlur: any;
     onClickInside: any;

package/dist/author/inline-dropdown-toolbar.js

@@ -14,12 +14,12 @@ import m from "@mui/icons-material/Close";
 import h from "@mui/icons-material/Edit";
 import g from "@mui/material/IconButton";
 //#region src/author/inline-dropdown-toolbar.tsx
-var _ = u("div")(({ theme: e }) => ({
+var _ = u("div")(() => ({
 	display: "flex",
 	alignItems: "flex-start",
 	position: "relative",
-	background: e.palette.common.white,
-	borderBottom: `1px solid ${e.palette.grey[400]}`,
+	background: s.white(),
+	borderBottom: `1px solid ${s.border()}`,
 	"&:last-child": { borderRadius: "0 0 4px 4px" }
 })), v = u("div")(({ theme: e }) => ({
 	display: "flex",
@@ -138,11 +138,11 @@ var _ = u("div")(({ theme: e }) => ({
 	componentDidMount() {
 		let { editor: e } = this.props, t = e.view.nodeDOM(e.state.selection.from);
 		if (t?.nodeType === 1) {
-			let e = t.getBoundingClientRect(), n = t.closest(".tiptap").getBoundingClientRect(), r = e.top - e.height, i = e.left - n.left;
+			let e = t.getBoundingClientRect(), n = t.closest(".tiptap").getBoundingClientRect(), r = e.top - n.top, i = e.left - n.left;
 			this.setState({ toolbarStyle: {
 				position: "absolute",
-				top: `${r + e.height + 40}px`,
-				left: `${i + 25}px`
+				top: `${r + e.height + 25}px`,
+				left: `${i}px`
 			} });
 		}
 	}
@@ -183,13 +183,11 @@ var _ = u("div")(({ theme: e }) => ({
 		}
 		this.onRespAreaChange(e), this.setState({ editedChoiceIndex: t });
 	};
-	onKeyDown = (e) => {
-		if (e.key === "Enter") {
-			let e = this.editorRef.getHTML() || "";
-			return this.onDone(e), this.preventDone = !0, !0;
-		}
-		return !1;
+	finishEditing = () => {
+		let e = this.editorRef.getHTML() || "";
+		this.onDone(e), this.preventDone = !0;
 	};
+	onKeyDown = (e) => e.key === "Enter" ? (this.finishEditing(), !0) : !1;
 	onBlur = () => {
 		if (this.clickedInside) {
 			this.clickedInside = !1;
@@ -206,13 +204,13 @@ var _ = u("div")(({ theme: e }) => ({
 		this.clickedInside = !0;
 	};
 	render() {
-		let { choices: t, spellCheck: n, uploadSoundSupport: r, mathMlOptions: i = {}, baseInputConfiguration: a = {}, responseAreaInputConfiguration: o = {} } = this.props, { respAreaMarkup: s, toolbarStyle: u } = this.state;
-		return u ? /* @__PURE__ */ l(w, {
+		let { choices: t, spellCheck: n, uploadSoundSupport: r, mathMlOptions: i = {}, baseInputConfiguration: a = {}, responseAreaInputConfiguration: o = {} } = this.props, { respAreaMarkup: u, toolbarStyle: d, editedChoiceIndex: m } = this.state;
+		return d ? /* @__PURE__ */ l(w, {
 			"data-inline-dropdown-toolbar": "",
 			style: {
-				...u,
-				backgroundColor: "#E0E1E6",
-				zIndex: 1
+				...d,
+				backgroundColor: s.dropdownBackground(),
+				zIndex: 999
 			},
 			onMouseDown: this.onClickInside,
 			children: [/* @__PURE__ */ l(O, { children: [/* @__PURE__ */ c(T, {
@@ -227,7 +225,7 @@ var _ = u("div")(({ theme: e }) => ({
 					showDone: !1,
 					doneOn: "blur"
 				},
-				markup: s,
+				markup: u,
 				onKeyDown: this.onKeyDown,
 				languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 				onChange: (e) => {
@@ -250,10 +248,10 @@ var _ = u("div")(({ theme: e }) => ({
 				uploadSoundSupport: r,
 				mathMlOptions: i
 			}), /* @__PURE__ */ c(E, {
-				onClick: () => this.onAddChoice(),
+				onClick: () => m >= 0 ? this.finishEditing() : this.onAddChoice(),
 				size: "small",
 				"aria-label": "Add",
-				children: /* @__PURE__ */ c(f, { fontSize: "inherit" })
+				children: c(m >= 0 ? p : f, { fontSize: "inherit" })
 			})] }), t && /* @__PURE__ */ c(D, { children: t.map(({ label: e, correct: t }, n) => /* @__PURE__ */ c(S, {
 				onClick: () => this.onSelectChoice(e, n),
 				onRemoveChoice: () => this.onRemoveChoice(e, n),

package/dist/author/main.js

@@ -376,4 +376,4 @@ var { toggle: D, Panel: ie, dropdown: ae } = x, O = g(b)(({ theme: e }) => ({
 	}
 };
 //#endregion
-export { I as default };
+export { I as Main, I as default };

package/dist/author/markupUtils.js

@@ -20,4 +20,4 @@ var t = "imes|riangle|an|heta|herefore", n = "throot|parallel|cong|approx|eq|e|s
 	return r.replace(s, (e, t) => a(t));
 };
 //#endregion
-export { c as createSlateMarkup, o as processMarkup };
+export { a as createElementFromHTML, c as createSlateMarkup, o as processMarkup, i as removeUnwantedCharacters };