@pie-lib/editable-html-tip-tap 0.1.0

package/dist/components/respArea/DragInTheBlank/choice.js

@@ -0,0 +1,156 @@
+import { GripIcon as e } from "../../icons/RespArea.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { styled as i } from "@mui/material/styles";
+import a from "prop-types";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useDraggable as c, useDroppable as l } from "@dnd-kit/core";
+import { color as u } from "@pie-lib/render-ui";
+import { renderMath as d } from "@pie-element/shared-math-rendering-mathjax";
+import f from "classnames";
+//#region src/components/respArea/DragInTheBlank/choice.tsx
+var p = i("span")(({ theme: e }) => ({
+	border: `solid 0px ${e.palette.primary.main}`,
+	"& mjx-frac": { fontSize: "120% !important" }
+}));
+function m({ n: i, children: a, isDragging: c, isOver: l, dragItem: f, value: p, selected: m }) {
+	let [h, g] = r(null), _ = n(null), v = (e) => {
+		_.current && (_.current.contains(e.target) ? _.current.classList.add("selected") : _.current.classList.remove("selected"));
+	};
+	t(() => (document.addEventListener("click", v), () => {
+		document.removeEventListener("click", v);
+	}), []), t(() => {
+		_.current && typeof d == "function" && d(_.current);
+	}, [
+		p?.value,
+		l,
+		f?.value?.value
+	]), t(() => {
+		if (l && _.current && !h) {
+			let e = _.current;
+			g({
+				width: e.offsetWidth,
+				height: e.offsetHeight
+			});
+		} else !l && h && g(null);
+	}, [l, h]);
+	let y = f && l ? f.value.value : p.value || "\xA0", b = c ? "\xA0" : y, x = b !== "\xA0", S = f && l, C = m ? `2px solid ${u.primaryDark()}` : S ? `1px solid ${u.defaults.BORDER_DARK}` : `1px solid ${u.defaults.BORDER_LIGHT}`;
+	return /* @__PURE__ */ s("div", {
+		ref: _,
+		className: m ? "selected" : void 0,
+		style: {
+			display: "inline-flex",
+			minWidth: "178px",
+			minHeight: "36px",
+			background: S ? `${u.defaults.BORDER_LIGHT}` : `${u.defaults.WHITE}`,
+			border: C,
+			boxSizing: "border-box",
+			borderRadius: "3px",
+			overflow: "hidden",
+			position: "relative",
+			padding: "8px 8px 8px 35px",
+			width: h ? h.width : void 0,
+			height: h ? h.height : void 0,
+			touchAction: "none"
+		},
+		"data-key": i.index,
+		contentEditable: !1,
+		children: [
+			x && /* @__PURE__ */ o(e, {
+				style: {
+					position: "absolute",
+					top: "6px",
+					left: "15px",
+					color: "#9B9B9B"
+				},
+				contentEditable: !1
+			}),
+			/* @__PURE__ */ o("span", { dangerouslySetInnerHTML: { __html: b } }),
+			a
+		]
+	});
+}
+m.propTypes = {
+	n: a.object,
+	children: a.node,
+	isDragging: a.bool,
+	isOver: a.bool,
+	dragItem: a.object,
+	value: a.object,
+	selected: a.bool
+};
+function h({ value: e, disabled: t, instanceId: n, children: r, n: i, onChange: a, removeResponse: s, duplicates: u, pos: d, selected: h }) {
+	let { attributes: g, listeners: _, setNodeRef: v, isDragging: y } = c({
+		id: `drag-${i.index}`,
+		disabled: t || !e?.value,
+		data: {
+			id: `drag-${i.index}`,
+			value: e,
+			instanceId: n,
+			n: i,
+			pos: d,
+			opts: { duplicates: u },
+			type: "drag-in-the-blank-placed-choice",
+			fromChoice: !e,
+			onRemove: (e) => s(e),
+			onDrop: (e, t) => {
+				t?.type === "drag-in-the-blank-drop-choice" && (a(e), !u && e.fromChoice && s(e));
+			}
+		}
+	}), { setNodeRef: b, isOver: x, active: S } = l({
+		id: `drop-${i.index}`,
+		data: {
+			type: "drag-in-the-blank-drop-choice",
+			accepts: ["drag-in-the-blank-choice", "drag-in-the-blank-placed-choice"],
+			instanceId: n,
+			value: e,
+			id: `drop-${i.index}`,
+			pos: d,
+			n: i,
+			opts: { duplicates: u },
+			onDrop: (e, t) => {
+				if (t?.type === "drag-in-the-blank-drop-choice" && e.value.id !== t.value.id) {
+					if (e.type === "drag-in-the-blank-choice") {
+						a(e), !u && e.fromChoice && s(e);
+						return;
+					}
+					e.type === "drag-in-the-blank-placed-choice" && (s(t), a(e), setTimeout(() => s(e), 10));
+				}
+			}
+		}
+	}), C = (e) => {
+		v(e), b(e);
+	}, w = /* @__PURE__ */ o(m, {
+		n: i,
+		isDragging: y,
+		isOver: x,
+		dragItem: S?.data?.current,
+		value: e,
+		selected: h,
+		children: r
+	}), T = e ? /* @__PURE__ */ o("span", {
+		ref: C,
+		...g,
+		..._,
+		children: w
+	}) : /* @__PURE__ */ o("span", {
+		ref: b,
+		children: w
+	});
+	return /* @__PURE__ */ o(p, {
+		className: f(x && "over"),
+		children: T
+	});
+}
+h.propTypes = {
+	value: a.object,
+	disabled: a.bool,
+	instanceId: a.string,
+	children: a.node,
+	n: a.object.isRequired,
+	onChange: a.func.isRequired,
+	removeResponse: a.func.isRequired,
+	duplicates: a.bool,
+	selected: a.bool
+};
+//#endregion
+export { h as default };

package/dist/components/respArea/ExplicitConstructedResponse.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/ExplicitConstructedResponse.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+declare const ExplicitConstructedResponse: {
+    (props: any): JSX.Element;
+    propTypes: {
+        attributes: PropTypes.Requireable<object>;
+        error: PropTypes.Requireable<any>;
+        value: PropTypes.Requireable<string>;
+        isFocused: PropTypes.Requireable<boolean>;
+    };
+};
+export default ExplicitConstructedResponse;
+//# sourceMappingURL=ExplicitConstructedResponse.d.ts.map

package/dist/components/respArea/ExplicitConstructedResponse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExplicitConstructedResponse.d.ts","sourceRoot":"","sources":["../../../src/components/respArea/ExplicitConstructedResponse.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAIH,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,2BAA2B;;;;;;;;CAkGhC,CAAC;AASF,eAAe,2BAA2B,CAAC"}

package/dist/components/respArea/ExplicitConstructedResponse.js

@@ -0,0 +1,67 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { NodeViewWrapper as r } from "@tiptap/react";
+import i from "prop-types";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/respArea/ExplicitConstructedResponse.tsx
+var s = (i) => {
+	let { editor: s, node: c, getPos: l, options: u, selected: d } = i, { attrs: f } = c, { value: p } = f, { respAreaToolbar: m, error: h } = u, g = l(), [_, v] = n(!1), y = m([c, g], s, () => {}), b = t(null), x;
+	if (h) {
+		let e = h(), t = parseInt(f.index, 10);
+		x = !!e?.[t]?.[0];
+	}
+	return e(() => {
+		let { selection: e } = s.state, t = e.from + c.nodeSize === e.to;
+		d ? t && v(d) : v(d);
+	}, [
+		s,
+		c,
+		d
+	]), e(() => {
+		let e = (e) => {
+			b.current && !b.current.contains(e.target) && !e.target.closest("[data-inline-node]") && v(!1);
+		};
+		return _ ? document.addEventListener("mousedown", e) : document.removeEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [_]), /* @__PURE__ */ o(r, {
+		className: "drag-in-the-blank",
+		"data-selected": d,
+		style: {
+			display: "inline-flex",
+			minHeight: "55px",
+			position: "relative",
+			cursor: "pointer"
+		},
+		children: [/* @__PURE__ */ a("div", {
+			...f,
+			style: {
+				display: "inline-flex",
+				width: "100%",
+				minHeight: "46px",
+				height: "46px",
+				backgroundColor: "#FFF",
+				border: `1px solid ${x ? "red" : "#C0C3CF"}`,
+				boxSizing: "border-box",
+				borderRadius: "4px",
+				overflow: "hidden",
+				padding: "12px 21px",
+				margin: "0 4px",
+				minWidth: "178px",
+				visibility: _ ? "hidden" : "visible"
+			},
+			onClick: () => v(!0),
+			dangerouslySetInnerHTML: { __html: p || "<div>&nbsp;</div>" }
+		}), _ && /* @__PURE__ */ a("div", {
+			ref: b,
+			className: "absolute z-50 bg-white shadow-lg rounded p-2",
+			style: { zIndex: 1 },
+			children: /* @__PURE__ */ a(y, {})
+		})]
+	});
+};
+s.propTypes = {
+	attributes: i.object,
+	error: i.any,
+	value: i.string,
+	isFocused: i.bool
+};
+//#endregion
+export { s as default };

package/dist/components/respArea/InlineDropdown.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+declare const InlineDropdown: {
+    (props: any): JSX.Element;
+    propTypes: {
+        attributes: PropTypes.Requireable<object>;
+        selectedItem: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+    };
+};
+export default InlineDropdown;
+//# sourceMappingURL=InlineDropdown.d.ts.map

package/dist/components/respArea/InlineDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/respArea/InlineDropdown.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,QAAA,MAAM,cAAc;;;;;;CAgInB,CAAC;AAOF,eAAe,cAAc,CAAC"}

package/dist/components/respArea/InlineDropdown.js

@@ -0,0 +1,91 @@
+import { Chevron as e } from "../icons/RespArea.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { NodeViewWrapper as i } from "@tiptap/react";
+import a from "prop-types";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "react-dom";
+//#region src/components/respArea/InlineDropdown.tsx
+var l = (a) => {
+	let { editor: l, node: u, getPos: d, options: f, selected: p } = a, { attrs: m } = u, { value: h, error: g } = m, _ = h || "<div>&nbsp</div>", v = d(), y = n(null), b = n(null), [x, S] = r(!1), [C, w] = r({
+		top: 0,
+		left: 0
+	}), T = f.respAreaToolbar([u, v], l, () => {});
+	return t(() => {
+		let { selection: e } = l.state, t = e.from + u.nodeSize === e.to;
+		p ? t && S(p) : S(p);
+	}, [
+		l,
+		u,
+		p
+	]), t(() => {
+		let e = document.body.getBoundingClientRect(), { from: t } = l.state.selection, n = l.view.coordsAtPos(t);
+		w({
+			top: n.top + Math.abs(e.top) + 40,
+			left: n.left
+		});
+		let r = (e) => {
+			let t = e.target.closest("[data-toolbar-for]");
+			(!t || t.dataset.toolbarFor !== b.current.instanceId) && !l._toolbarOpened && y.current && !y.current.contains(e.target) && !e.target.closest("[data-inline-node]") && S(!1);
+		};
+		return x ? document.addEventListener("mousedown", r) : document.removeEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+	}, [x]), /* @__PURE__ */ s(i, {
+		className: "inline-dropdown",
+		"data-selected": p,
+		style: {
+			display: "inline-flex",
+			height: "50px",
+			margin: "0 5px",
+			cursor: "pointer"
+		},
+		children: [/* @__PURE__ */ s("div", {
+			style: {
+				display: "inline-flex",
+				minWidth: "178px",
+				height: "36px",
+				background: "#FFF",
+				border: "1px solid #C0C3CF",
+				boxSizing: "border-box",
+				borderRadius: "3px",
+				margin: "0 4px",
+				position: "relative",
+				alignItems: "center"
+			},
+			onClick: () => S(!0),
+			children: [/* @__PURE__ */ o("div", {
+				style: {
+					flex: 1,
+					overflow: "hidden",
+					padding: "0 25px 0 8px",
+					whiteSpace: "nowrap",
+					textOverflow: "ellipsis"
+				},
+				children: /* @__PURE__ */ o("span", {
+					style: {
+						display: "inline-block",
+						verticalAlign: "middle"
+					},
+					dangerouslySetInnerHTML: { __html: _ }
+				})
+			}), /* @__PURE__ */ o(e, {
+				direction: "down",
+				style: {
+					position: "absolute",
+					top: "5px",
+					right: "5px"
+				}
+			})]
+		}), x && c.createPortal(/* @__PURE__ */ o("div", {
+			ref: y,
+			style: { zIndex: 1 },
+			children: /* @__PURE__ */ o(T, { editorCallback: (e) => {
+				b.current = e;
+			} })
+		}), document.body)]
+	});
+};
+l.propTypes = {
+	attributes: a.object,
+	selectedItem: a.oneOfType([a.string, a.object])
+};
+//#endregion
+export { l as default };

package/dist/components/respArea/MathTemplated.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/MathTemplated.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+declare const MathTemplated: {
+    (props: any): JSX.Element;
+    propTypes: {
+        attributes: PropTypes.Requireable<object>;
+        value: PropTypes.Requireable<string>;
+        keyToDisplay: PropTypes.Requireable<string>;
+    };
+};
+export default MathTemplated;
+//# sourceMappingURL=MathTemplated.d.ts.map

package/dist/components/respArea/MathTemplated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MathTemplated.d.ts","sourceRoot":"","sources":["../../../src/components/respArea/MathTemplated.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,SAAS,MAAM,YAAY,CAAC;AAsFnC,QAAA,MAAM,aAAa;;;;;;;CA4BlB,CAAC;AAQF,eAAe,aAAa,CAAC"}

package/dist/components/respArea/MathTemplated.js

@@ -0,0 +1,97 @@
+import "react";
+import { NodeViewWrapper as e } from "@tiptap/react";
+import { styled as t } from "@mui/material/styles";
+import n from "prop-types";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { mq as a } from "@pie-lib/math-input";
+//#region src/components/respArea/MathTemplated.tsx
+var o = t("span")(() => ({
+	display: "inline-flex",
+	border: "1px solid #C0C3CF",
+	margin: "1px 5px",
+	cursor: "pointer",
+	alignItems: "center",
+	justifyContent: "center",
+	minWidth: "50px",
+	minHeight: "36px",
+	height: "fit-content"
+})), s = t("div")(({ theme: e }) => ({
+	background: e.palette.grey.A100,
+	color: e.palette.grey.A700,
+	display: "inline-flex",
+	borderRight: "2px solid #C0C3CF",
+	boxSizing: "border-box",
+	overflow: "hidden",
+	fontSize: "12px",
+	minHeight: "36px",
+	height: "100%",
+	alignItems: "center",
+	fontFamily: "Symbola, Times New Roman, serif",
+	padding: "0 2px"
+})), c = t("div")(() => ({
+	flex: 8,
+	color: "var(--pie-text, black)",
+	padding: "4px !important",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	backgroundColor: "var(--pie-background, rgba(255, 255, 255, 0))",
+	"& > .mq-math-mode sup.mq-nthroot": {
+		fontSize: "70% !important",
+		verticalAlign: "1em !important"
+	},
+	"& > .mq-math-mode .mq-sqrt-stem": {
+		borderTop: "0.07em solid",
+		marginLeft: "-1.5px",
+		marginTop: "-2px !important",
+		paddingTop: "5px !important"
+	},
+	"& .mq-overarrow-inner": {
+		paddingTop: "0 !important",
+		border: "none !important"
+	},
+	"& .mq-overarrow.mq-arrow-both": {
+		marginTop: "0px",
+		minWidth: "1.23em",
+		"& *": { lineHeight: "1 !important" },
+		"&:before": {
+			top: "-0.4em",
+			left: "-1px"
+		},
+		"&:after": {
+			top: "0px !important",
+			position: "absolute !important",
+			right: "-2px"
+		},
+		"&.mq-empty:after": { top: "-0.45em" }
+	},
+	"& .mq-overarrow.mq-arrow-right": { "&:before": {
+		top: "-0.4em",
+		right: "-1px"
+	} },
+	"& .mq-overarrow-inner-right": { display: "none !important" },
+	"& .mq-overarrow-inner-left": { display: "none !important" }
+})), l = (t) => {
+	let { node: n, options: l, selected: u } = t, { attrs: d } = n, { value: f, index: p } = d, m = `R ${parseInt(p) + 1}`;
+	return /* @__PURE__ */ r(e, {
+		className: "math-templated",
+		"data-selected": u,
+		style: {
+			display: "inline-flex",
+			minHeight: "36px",
+			minWidth: "50px",
+			cursor: "pointer"
+		},
+		children: /* @__PURE__ */ i(o, {
+			...d,
+			children: [/* @__PURE__ */ r(s, { children: m }), /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(a.Static, { latex: f }) })]
+		})
+	});
+};
+l.propTypes = {
+	attributes: n.object,
+	value: n.string,
+	keyToDisplay: n.string
+};
+//#endregion
+export { l as default };

package/dist/components/respArea/ToolbarIcon.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/ToolbarIcon.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const Chevron: (props: any) => JSX.Element;
+export declare const GripIcon: ({ style }: {
+    style: any;
+}) => JSX.Element;
+export declare const ToolbarIcon: () => JSX.Element;
+//# sourceMappingURL=ToolbarIcon.d.ts.map

package/dist/components/respArea/ToolbarIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarIcon.d.ts","sourceRoot":"","sources":["../../../src/components/respArea/ToolbarIcon.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAKH,eAAO,MAAM,OAAO,GAAI,UAAK,gBA6B5B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI;;CAAS,gBAiBjC,CAAC;AAcF,eAAO,MAAM,WAAW,mBAA+D,CAAC"}

package/dist/components/respArea/ToolbarIcon.js

@@ -0,0 +1,17 @@
+import "react";
+import { styled as e } from "@mui/material/styles";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/respArea/ToolbarIcon.tsx
+var n = e("div")(({ theme: e }) => ({
+	fontFamily: "Cerebri Sans !important",
+	fontSize: e.typography.fontSize,
+	fontWeight: "bold",
+	lineHeight: "14px",
+	position: "relative",
+	top: "7px",
+	width: "110px",
+	height: "28px",
+	whiteSpace: "nowrap"
+})), r = () => /* @__PURE__ */ t(n, { children: "+ Response Area" });
+//#endregion
+export { r as ToolbarIcon };

package/dist/constants.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/constants.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const PIE_TOOLBAR__CLASS = "pie-toolbar";
+declare const _default: {
+    PIE_TOOLBAR__CLASS: string;
+};
+export default _default;
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,eAAO,MAAM,kBAAkB,gBAAgB,CAAC;;;;AAEhD,wBAEE"}

package/dist/constants.js

@@ -0,0 +1,4 @@
+//#region src/constants.ts
+var e = "pie-toolbar";
+//#endregion
+export { e as PIE_TOOLBAR__CLASS };

package/dist/extensions/css.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/css.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import { Mark } from '@tiptap/core';
+export declare const removeDialogs: () => void;
+export declare const CSSMark: Mark<any, any>;
+//# sourceMappingURL=css.d.ts.map

package/dist/extensions/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/extensions/css.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAIH,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAIrD,eAAO,MAAM,aAAa,YAIzB,CAAC;AA0IF,eAAO,MAAM,OAAO,gBAuElB,CAAC"}

package/dist/extensions/css.js

@@ -0,0 +1,115 @@
+import "react";
+import { Mark as e, mergeAttributes as t } from "@tiptap/core";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "react-dom";
+import a from "@mui/material/List";
+import o from "@mui/material/ListItem";
+//#region src/extensions/css.tsx
+var s = () => {
+	document.querySelectorAll(".insert-css-dialog").forEach((e) => e.remove());
+}, c = ({ editor: e, callback: t, opts: c, selectedText: l, parentNode: u }) => {
+	let d = e.options.element, f = document.createElement("div"), { selection: p } = e.state;
+	s(), f.className = "insert-css-dialog";
+	let m = !1, h = (e) => {
+		if (m) {
+			let t = f.contains(e.target) || void 0, n = d.contains(e.target);
+			t || n || g();
+		} else m = !0;
+	}, g = () => {
+		t(void 0, !0), f.remove(), document.body.removeEventListener("click", h);
+	}, _ = (e) => {
+		t(e, !0), f.remove(), document.body.removeEventListener("click", h);
+	}, v = u?.attrs.class, y = (e) => {
+		let t = `<span class="${e}">${l}</span>`;
+		if (u) {
+			let e = "span";
+			u?.object === "inline" && (e = "span"), u?.object === "block" && (e = "div"), t = `<${e} class="${v}">${u.text.slice(0, p.$anchor.textOffset)}${t}${u.text.slice(p.$head.textOffset)}</${e}>`;
+		}
+		return t;
+	}, b = /* @__PURE__ */ r("div", {
+		style: {
+			background: "white",
+			height: 500,
+			padding: 20,
+			overflow: "hidden",
+			display: "flex",
+			flexFlow: "column"
+		},
+		children: [
+			/* @__PURE__ */ n("h2", { children: "Please choose a css class" }),
+			v && /* @__PURE__ */ r("div", { children: ["The current parent has this class ", v] }),
+			/* @__PURE__ */ n(a, {
+				component: "nav",
+				style: { overflow: "scroll" },
+				children: c.names.map((e, t) => /* @__PURE__ */ r(o, {
+					button: !0,
+					onClick: () => _(e),
+					children: [/* @__PURE__ */ n("div", {
+						style: { marginRight: 20 },
+						children: e
+					}), /* @__PURE__ */ n("div", { dangerouslySetInnerHTML: { __html: y(e) } })]
+				}, `rule-${t}`))
+			})
+		]
+	});
+	i.render(b, f, () => {
+		let t = e.view.nodeDOM(e.state.selection.from)?.parentNode;
+		if (t) {
+			let e = d.parentElement.parentElement.parentElement.getBoundingClientRect(), n = t.getBoundingClientRect();
+			d.parentElement.parentElement.parentElement.appendChild(f), f.style.maxWidth = "500px", f.style.position = "absolute", f.style.top = 0, f.style.zIndex = 99999;
+			let r = `${n.left + Math.abs(e.left) + t.offsetWidth + 10}px`, i = `${n.x}px`;
+			f.style.left = r;
+			let a = f.offsetWidth;
+			f.style.left = "unset", f.style.right = i;
+			let o = f.offsetWidth;
+			f.style.left = "unset", f.style.right = "unset", a >= o ? f.style.left = r : f.style.right = i, document.body.addEventListener("click", h);
+		}
+	});
+}, l = e.create({
+	name: "cssmark",
+	addOptions() {
+		return { classes: [] };
+	},
+	addAttributes() {
+		return { class: {
+			default: null,
+			parseHTML: (e) => e.getAttribute("class"),
+			renderHTML: (e) => e.class ? { class: e.class } : {}
+		} };
+	},
+	parseHTML() {
+		return [{
+			tag: "span[class]",
+			getAttrs: (e) => {
+				let t = e.getAttribute("class") || "", n = this.options.classes.find((e) => t.includes(e));
+				return n ? { class: n } : !1;
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return [
+			"span",
+			t(e),
+			0
+		];
+	},
+	addCommands() {
+		return {
+			setCSSClass: (e) => ({ commands: t }) => t.setMark(this.name, { class: e }),
+			unsetCSSClass: () => ({ commands: e }) => e.unsetMark(this.name),
+			openCSSClassDialog: () => ({ editor: e }) => {
+				c({
+					editor: e,
+					selectedText: e.state.doc.textBetween(e.state.selection.from, e.state.selection.to),
+					parentNode: e.state.selection.$from.nodeAfter,
+					opts: this.options.extraCSSRules,
+					callback: (t) => {
+						t && e.chain().focus().setCSSClass(t).run();
+					}
+				});
+			}
+		};
+	}
+});
+//#endregion
+export { l as CSSMark };