@pie-lib/mask-markup 3.0.4-next.33 → 3.0.4-next.34

package/src/with-mask.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Mask from './mask';
+import componentize from './componentize';
+import { deserialize } from './serialization';
+
+export const buildLayoutFromMarkup = (markup, type) => {
+  const { markup: processed } = componentize(markup, type);
+  const value = deserialize(processed);
+  return value.document;
+};
+
+export const withMask = (type, renderChildren) => {
+  return class WithMask extends React.Component {
+    static propTypes = {
+      /**
+       * At the start we'll probably work with markup
+       */
+      markup: PropTypes.string,
+      /**
+       * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.
+       */
+      layout: PropTypes.object,
+      value: PropTypes.object,
+      onChange: PropTypes.func,
+      customMarkMarkupComponent: PropTypes.func,
+      elementType: PropTypes.string,
+    };
+
+    constructor(props) {
+      super(props);
+      this.containerRef = React.createRef();
+    }
+
+    componentDidUpdate(prevProps) {
+      if (this.props.markup !== prevProps.markup) {
+        const domNode = this.containerRef.current;
+        const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled="true"]');
+
+        // Clean up for fresh MathJax processing
+        (mathElements || []).forEach((el) => {
+          // Remove the MathJax container to allow for clean updates
+          const mjxContainer = el.querySelector('mjx-container');
+
+          if (mjxContainer) {
+            el.removeChild(mjxContainer);
+          }
+
+          // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly
+          const latexCode = el.getAttribute('data-raw');
+          el.innerHTML = latexCode;
+
+          // Remove the attribute to signal that MathJax should reprocess this element
+          el.removeAttribute('data-math-handled');
+        });
+      }
+    }
+
+    render() {
+      const { markup, layout, value, onChange, elementType } = this.props;
+
+      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
+      return (
+        <Mask
+          containerRef={this.containerRef}
+          elementType={elementType}
+          layout={maskLayout}
+          value={value}
+          onChange={onChange}
+          renderChildren={renderChildren(this.props)}
+        />
+      );
+    }
+  };
+};

package/dist/_virtual/_rolldown/runtime.js

@@ -1,4 +0,0 @@
-//#region \0rolldown/runtime.js
-var e = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports);
-//#endregion
-export { e as __commonJSMin };

package/dist/choices/choice.d.ts

@@ -1,24 +0,0 @@
-/**
- * @synced-from pie-lib/packages/mask-markup/src/choices/choice.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 React from 'react';
-import PropTypes from 'prop-types';
-export declare const DRAG_TYPE = "MaskBlank";
-declare function Choice({ choice, disabled, instanceId }: {
-    choice: any;
-    disabled: any;
-    instanceId: any;
-}): React.JSX.Element;
-declare namespace Choice {
-    var propTypes: {
-        choice: PropTypes.Validator<object>;
-        disabled: PropTypes.Requireable<boolean>;
-        instanceId: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-    };
-}
-export default Choice;

package/dist/choices/choice.js

@@ -1,77 +0,0 @@
-import { useEffect as e, useRef as t } from "react";
-import n from "prop-types";
-import { styled as r } from "@mui/material/styles";
-import { renderMath as i } from "@pie-element/shared-math-rendering-mathjax";
-import { jsx as a } from "react/jsx-runtime";
-import { useDraggable as o } from "@dnd-kit/core";
-import s from "@mui/material/Chip";
-import { color as c } from "@pie-lib/render-ui";
-//#region src/choices/choice.tsx
-var l = "MaskBlank", u = r("span")(({ theme: e, disabled: t }) => ({
-	border: `solid 0px ${e.palette.primary.main}`,
-	borderRadius: e.spacing(2),
-	margin: e.spacing(.5),
-	transform: "translate(0, 0)",
-	display: "inline-flex",
-	...t && {}
-})), d = r(s)(() => ({
-	backgroundColor: c.white(),
-	border: `1px solid ${c.text()}`,
-	color: c.text(),
-	alignItems: "center",
-	display: "inline-flex",
-	height: "initial",
-	minHeight: "32px",
-	fontSize: "inherit",
-	whiteSpace: "pre-wrap",
-	maxWidth: "374px",
-	pointerEvents: "none",
-	borderRadius: "3px",
-	paddingTop: "12px",
-	paddingBottom: "12px",
-	"&.Mui-disabled": { opacity: 1 }
-})), f = r("span")(() => ({
-	whiteSpace: "normal",
-	"& img": {
-		display: "block",
-		padding: "2px 0"
-	},
-	"& mjx-frac": { fontSize: "120% !important" }
-}));
-function p({ choice: n, disabled: r, instanceId: s }) {
-	let c = t(null), { attributes: p, listeners: m, setNodeRef: h, isDragging: g } = o({
-		id: `choice-${n.id}`,
-		data: {
-			choice: n,
-			instanceId: s,
-			fromChoice: !0,
-			type: l
-		},
-		disabled: r
-	});
-	return e(() => {
-		i(c.current);
-	}, [n.value]), /* @__PURE__ */ a(u, {
-		ref: h,
-		style: g ? {
-			width: c.current?.offsetWidth,
-			height: c.current?.offsetHeight
-		} : {},
-		disabled: r,
-		...m,
-		...p,
-		children: /* @__PURE__ */ a(d, {
-			clickable: !1,
-			disabled: r,
-			ref: c,
-			label: /* @__PURE__ */ a(f, { dangerouslySetInnerHTML: { __html: n.value } })
-		})
-	});
-}
-p.propTypes = {
-	choice: n.object.isRequired,
-	disabled: n.bool,
-	instanceId: n.oneOfType([n.string, n.number])
-};
-//#endregion
-export { p as default };

package/dist/choices/index.d.ts

@@ -1,25 +0,0 @@
-/**
- * @synced-from pie-lib/packages/mask-markup/src/choices/index.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 React from 'react';
-import PropTypes from 'prop-types';
-export default class Choices extends React.Component {
-    static propTypes: {
-        disabled: PropTypes.Requireable<boolean>;
-        duplicates: PropTypes.Requireable<boolean>;
-        choices: PropTypes.Requireable<(PropTypes.InferProps<{
-            label: PropTypes.Requireable<string>;
-            value: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        value: PropTypes.Requireable<object>;
-        choicePosition: PropTypes.Validator<string>;
-        instanceId: PropTypes.Requireable<string>;
-    };
-    getStyleForWrapper: any;
-    render(): React.JSX.Element;
-}

package/dist/choices/index.js

@@ -1,49 +0,0 @@
-import e from "./choice.js";
-import t from "react";
-import n from "prop-types";
-import { findKey as r } from "@pie-element/shared-lodash";
-import { jsx as i } from "react/jsx-runtime";
-import { DragDroppablePlaceholder as a } from "@pie-lib/drag";
-//#region src/choices/index.tsx
-var o = class extends t.Component {
-	static propTypes = {
-		disabled: n.bool,
-		duplicates: n.bool,
-		choices: n.arrayOf(n.shape({
-			label: n.string,
-			value: n.string
-		})),
-		value: n.object,
-		choicePosition: n.string.isRequired,
-		instanceId: n.string
-	};
-	getStyleForWrapper = () => {
-		let { choicePosition: e } = this.props;
-		switch (e) {
-			case "above": return { margin: "0 0 40px 0" };
-			case "below": return { margin: "40px 0 0 0" };
-			case "right": return { margin: "0 0 0 40px" };
-			default: return { margin: "0 40px 0 0" };
-		}
-	};
-	render() {
-		let { disabled: t, duplicates: n, choices: o, value: s, instanceId: c } = this.props, l = o.filter((e) => n === !0 ? !0 : r(s, (t) => t === e.id) === void 0);
-		return /* @__PURE__ */ i("div", {
-			style: {
-				...this.getStyleForWrapper(),
-				minWidth: "100px"
-			},
-			children: /* @__PURE__ */ i(a, {
-				disabled: t,
-				instanceId: c,
-				children: l.map((n, r) => /* @__PURE__ */ i(e, {
-					disabled: t,
-					choice: n,
-					instanceId: c
-				}, `${n.value}-${r}`))
-			})
-		});
-	}
-};
-//#endregion
-export { o as default };

package/dist/componentize.d.ts

@@ -1,12 +0,0 @@
-/**
- * @synced-from pie-lib/packages/mask-markup/src/componentize.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.
- */
-declare const _default: (s: any, t: any) => {
-    markup: any;
-};
-export default _default;

package/dist/componentize.js

@@ -1,4 +0,0 @@
-//#region src/componentize.tsx
-var e = /\{\{(\d+)\}\}/g, t = (t, n) => t ? { markup: t.replace(e, (e, t) => `<span data-component="${n}" data-id="${t}"></span>`) } : { markup: "" };
-//#endregion
-export { t as default };

package/dist/components/blank.d.ts

@@ -1,39 +0,0 @@
-/**
- * @synced-from pie-lib/packages/mask-markup/src/components/blank.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 React from 'react';
-import PropTypes from 'prop-types';
-declare function DragDropBlank({ id, disabled, duplicates, choice, correct, onChange, emptyResponseAreaWidth, emptyResponseAreaHeight, instanceId, }: {
-    id: any;
-    disabled: any;
-    duplicates: any;
-    choice: any;
-    correct: any;
-    onChange: any;
-    emptyResponseAreaWidth: any;
-    emptyResponseAreaHeight: any;
-    instanceId: any;
-}): React.JSX.Element;
-declare namespace DragDropBlank {
-    var defaultProps: {
-        emptyResponseAreaWidth: number;
-        emptyResponseAreaHeight: number;
-    };
-    var propTypes: {
-        id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        disabled: PropTypes.Requireable<boolean>;
-        duplicates: PropTypes.Requireable<boolean>;
-        choice: PropTypes.Requireable<object>;
-        correct: PropTypes.Requireable<boolean>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        emptyResponseAreaWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        emptyResponseAreaHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        instanceId: PropTypes.Requireable<string>;
-    };
-}
-export default DragDropBlank;

package/dist/components/blank.js

@@ -1,240 +0,0 @@
-import e from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
-import t, { useEffect as n, useRef as r, useState as i } from "react";
-import a from "prop-types";
-import { styled as o } from "@mui/material/styles";
-import { renderMath as s } from "@pie-element/shared-math-rendering-mathjax";
-import c from "debug";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useDraggable as d, useDroppable as f } from "@dnd-kit/core";
-import p from "@mui/material/Chip";
-import { color as m } from "@pie-lib/render-ui";
-import { CSS as h } from "@dnd-kit/utilities";
-import { grey as g } from "@mui/material/colors";
-//#region src/components/blank.tsx
-c("pie-lib:mask-markup:blank");
-var _ = o("span")(({ dragged: e, over: t }) => ({
-	border: `solid 0px ${m.primary()}`,
-	minWidth: "200px",
-	touchAction: "none",
-	overflow: "hidden",
-	whiteSpace: "nowrap",
-	opacity: 1,
-	...t && {
-		whiteSpace: "nowrap",
-		overflow: "hidden"
-	},
-	...e && { opacity: .5 }
-})), v = o(p)(() => ({
-	backgroundColor: m.background(),
-	border: `2px dashed ${m.text()}`,
-	touchAction: "none",
-	color: m.text(),
-	fontSize: "inherit",
-	maxWidth: "374px",
-	position: "relative",
-	borderRadius: "3px",
-	"&.over": {
-		whiteSpace: "nowrap",
-		overflow: "hidden"
-	},
-	"&.parentOver": {
-		border: `1px solid ${g[500]}`,
-		backgroundColor: `${g[300]}`
-	},
-	"&.correct": { border: `solid 1px ${m.correct()}` },
-	"&.incorrect": { border: `solid 1px ${m.incorrect()}` },
-	"&.Mui-disabled": { opacity: 1 }
-})), y = o("span")(() => ({
-	whiteSpace: "normal",
-	pointerEvents: "none",
-	"& img": {
-		display: "block",
-		padding: "2px 0"
-	},
-	"& p": {
-		marginTop: "0",
-		marginBottom: "0"
-	},
-	"& mjx-frac": { fontSize: "120% !important" },
-	"&.over": {
-		whiteSpace: "nowrap",
-		overflow: "hidden"
-	},
-	"&.hidden": {
-		color: "transparent",
-		opacity: 0
-	},
-	"&.dragged": {
-		position: "absolute",
-		left: 16,
-		maxWidth: "60px",
-		top: "50%",
-		transform: "translateY(-50%)"
-	}
-}));
-function b({ disabled: a, choice: o, isOver: c, isDragging: d, dragItem: f, correct: p, emptyResponseAreaWidth: m, emptyResponseAreaHeight: h }) {
-	let g = r(null), _ = r(null), b = r(null), [x, S] = i({
-		height: 0,
-		width: 0
-	}), C = () => {
-		E();
-	}, w = () => {
-		let e = _.current?.querySelector("img");
-		e ? e.onload = C : setTimeout(() => {
-			E();
-		}, 300);
-	}, T = () => _.current ? _.current.querySelector("mjx-container") && _.current.parentElement ? _.current.parentElement : _.current.querySelector("img") || _.current : null, E = () => {
-		if (_.current && g.current) {
-			g.current.style.width = "auto", g.current.style.height = "auto", g.current.offsetHeight;
-			let e = T() || _.current, t = e.getBoundingClientRect(), n = t.width || e.offsetWidth || 0, r = Math.max(t.height || 0, e.offsetHeight || 0, e.scrollHeight || 0, _.current.scrollHeight || 0), i = n + 24, a = r + 24, o = parseFloat(m) || 0, s = parseFloat(h) || 0, c = i <= o ? o : i, l = a <= s ? s : a;
-			S((e) => ({
-				width: c > o ? c : e.width,
-				height: l > s ? l : e.height
-			})), g.current.style.width = `${c}px`, g.current.style.height = `${l}px`;
-		}
-	}, D = () => {
-		let e = isNaN(parseFloat(m)) ? 0 : parseFloat(m), t = isNaN(parseFloat(h)) ? 0 : parseFloat(h);
-		return {
-			height: x.height || t,
-			width: x.width || e,
-			...e ? {} : { minWidth: 90 },
-			...t ? {} : { minHeight: 32 }
-		};
-	};
-	n(() => {
-		w();
-	}, []), n(() => {
-		g.current && s(g.current);
-	}, [
-		p,
-		c,
-		f?.choice?.value
-	]), n(() => {
-		if (!o) {
-			S({
-				height: 0,
-				width: 0
-			});
-			return;
-		}
-		w();
-	}, [o]), n(() => {
-		!c && !d && (b.current = {
-			width: g.current.offsetWidth,
-			height: g.current.offsetHeight
-		});
-	}, [
-		o,
-		c,
-		d
-	]);
-	let O = f && c && f.choice && f.choice.value, k = o && o.value, A = c || d ? {
-		width: b.current?.width,
-		height: b.current?.height
-	} : D();
-	return /* @__PURE__ */ l(v, {
-		clickable: !1,
-		disabled: a,
-		ref: g,
-		component: "span",
-		label: /* @__PURE__ */ u(t.Fragment, { children: [/* @__PURE__ */ l(y, {
-			ref: _,
-			draggable: !0,
-			className: e({
-				over: c,
-				hidden: O
-			}),
-			dangerouslySetInnerHTML: { __html: k || "" }
-		}), O && /* @__PURE__ */ l(y, {
-			draggable: !0,
-			className: e({
-				over: c,
-				dragged: !0
-			}),
-			dangerouslySetInnerHTML: { __html: O || "" }
-		})] }),
-		className: e({
-			over: c,
-			parentOver: c,
-			correct: p !== void 0 && p,
-			incorrect: p !== void 0 && !p
-		}),
-		variant: a ? "outlined" : void 0,
-		style: A
-	});
-}
-b.defaultProps = {
-	emptyResponseAreaWidth: 0,
-	emptyResponseAreaHeight: 0
-}, b.propTypes = {
-	id: a.oneOfType([a.string, a.number]),
-	disabled: a.bool,
-	duplicates: a.bool,
-	choice: a.object,
-	isOver: a.bool,
-	dragItem: a.object,
-	correct: a.bool,
-	onChange: a.func,
-	emptyResponseAreaWidth: a.oneOfType([a.string, a.number]),
-	emptyResponseAreaHeight: a.oneOfType([a.string, a.number]),
-	instanceId: a.string
-};
-function x({ id: e, disabled: t, duplicates: n, choice: r, correct: i, onChange: a, emptyResponseAreaWidth: o, emptyResponseAreaHeight: s, instanceId: c }) {
-	let { attributes: u, listeners: p, setNodeRef: m, transform: g, isDragging: v } = d({
-		id: `mask-blank-drag-${e}`,
-		disabled: t || !r,
-		data: {
-			id: e,
-			choice: r,
-			instanceId: c,
-			fromChoice: !1,
-			type: "MaskBlank"
-		}
-	}), { setNodeRef: y, isOver: x, active: S } = f({
-		id: `mask-blank-drop-${e}`,
-		data: {
-			id: e,
-			accepts: ["MaskBlank"],
-			instanceId: c
-		}
-	});
-	return /* @__PURE__ */ l(_, {
-		ref: (e) => {
-			m(e), y(e);
-		},
-		style: { transform: h.Translate.toString(g) },
-		dragged: v,
-		over: x,
-		...u,
-		...p,
-		children: /* @__PURE__ */ l(b, {
-			id: e,
-			disabled: t,
-			duplicates: n,
-			choice: r,
-			isOver: x,
-			dragItem: S?.data?.current,
-			correct: i,
-			onChange: a,
-			emptyResponseAreaWidth: o,
-			emptyResponseAreaHeight: s,
-			instanceId: c
-		})
-	});
-}
-x.defaultProps = {
-	emptyResponseAreaWidth: 0,
-	emptyResponseAreaHeight: 0
-}, x.propTypes = {
-	id: a.oneOfType([a.string, a.number]),
-	disabled: a.bool,
-	duplicates: a.bool,
-	choice: a.object,
-	correct: a.bool,
-	onChange: a.func,
-	emptyResponseAreaWidth: a.oneOfType([a.string, a.number]),
-	emptyResponseAreaHeight: a.oneOfType([a.string, a.number]),
-	instanceId: a.string
-};
-//#endregion
-export { x as default };

package/dist/components/correct-input.d.ts

@@ -1,11 +0,0 @@
-/**
- * @synced-from pie-lib/packages/mask-markup/src/components/correct-input.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 React from 'react';
-declare const CorrectInput: (props: any) => React.JSX.Element;
-export default CorrectInput;

package/dist/components/dropdown.d.ts

@@ -1,37 +0,0 @@
-/**
- * @synced-from pie-lib/packages/mask-markup/src/components/dropdown.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 React from 'react';
-import PropTypes from 'prop-types';
-declare class Dropdown extends React.Component {
-    static propTypes: {
-        id: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        correct: PropTypes.Requireable<boolean>;
-        choices: PropTypes.Requireable<(PropTypes.InferProps<{
-            value: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        showCorrectAnswer: PropTypes.Requireable<boolean>;
-        singleQuery: PropTypes.Requireable<boolean>;
-        correctValue: PropTypes.Requireable<string>;
-    };
-    constructor(props: any);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: any, prevState: any): void;
-    handleClick: any;
-    handleClose: any;
-    handleHighlight: any;
-    handleSelect: any;
-    handleHover: any;
-    getLabel(choices: any, value: any): any;
-    render(): React.JSX.Element;
-}
-export default Dropdown;