@pie-lib/mask-markup 0.1.0

package/dist/serialization.js

@@ -0,0 +1,132 @@
+import { require_to_style as e } from "./node_modules/.bun/to-style@1.3.3/node_modules/to-style/index.js";
+import t from "debug";
+//#region src/serialization.ts
+var n = e(), r = t("@pie-lib:mask-markup:serialization"), i = ["span"], a = [
+	"em",
+	"strong",
+	"u"
+], o = 3, s = 8, c = 1, l = (e) => {
+	if (!e.attributes || e.attributes.length <= 0) return;
+	let t = {}, n;
+	for (n = 0; n < e.attributes.length; n++) {
+		let r = e.attributes[n];
+		t[r.name] = r.value;
+	}
+	return t;
+}, u = (e) => i.includes(e) ? "inline" : a.includes(e) ? "mark" : "block", d = (e) => {
+	let t = /([\w-]*)\s*:\s*([^;]*)/g, n, r = {};
+	for (; n = t.exec(e);) r[n[1]] = n[2].trim();
+	return r;
+}, f = (e) => (0, n.object)(e, {
+	camelize: !0,
+	addUnits: !1
+}), p = (e, t) => f(d(e.getAttribute(t))), m = (e, t, n) => {
+	let r = e.getAttribute(n);
+	return delete t.class, r;
+}, h = (e) => (t, n) => {
+	if (!e.getAttribute) return t;
+	if (e.getAttribute(n)) switch (n) {
+		case "style":
+			t.style = p(e, n);
+			break;
+		case "class":
+			t.className = m(e, t, n);
+			break;
+		default:
+			t[n] = e.getAttribute(n);
+			break;
+	}
+	return t;
+}, g = [
+	"border",
+	"class",
+	"style"
+], _ = {
+	b: "bold",
+	em: "italic",
+	u: "underline",
+	s: "strikethrough",
+	code: "code",
+	strong: "strong"
+}, v = (e, t = []) => {
+	if (e.nodeType === s) return null;
+	if (e.nodeType === o) {
+		let n = { text: e.textContent };
+		return t.length > 0 && (n.marks = t.map((e) => ({
+			type: e,
+			data: void 0
+		}))), {
+			object: "text",
+			leaves: [n]
+		};
+	}
+	if (e.nodeType === c) {
+		let n = e.tagName.toLowerCase(), i = _[n];
+		if (i) return r("[deserialize] mark: ", i), {
+			_flatten: !0,
+			nodes: y(e.childNodes, [...t, i])
+		};
+		if (n === "math") return {
+			isMath: !0,
+			nodes: [e]
+		};
+		let a = l(e) || {};
+		n === "audio" && a.controls === "" && (a.controls = !0);
+		let o = g.reduce(h(e), { ...a }), s = u(n), c = y(e.childNodes, t);
+		return {
+			object: s,
+			type: n,
+			data: {
+				dataset: { ...e.dataset },
+				attributes: { ...o }
+			},
+			nodes: c
+		};
+	}
+	return null;
+}, y = (e, t = []) => {
+	let n = [];
+	for (let r = 0; r < e.length; r++) {
+		let i = v(e[r], t);
+		i !== null && (i._flatten && i.nodes ? n.push(...i.nodes) : n.push(i));
+	}
+	return n;
+}, b = (e) => {
+	if (!e || !e.trim()) return {
+		object: "value",
+		document: {
+			object: "document",
+			data: {},
+			nodes: [{
+				object: "block",
+				type: "span",
+				data: {},
+				isVoid: !1,
+				nodes: []
+			}]
+		}
+	};
+	let t = y(new DOMParser().parseFromString(e, "text/html").body.childNodes);
+	return !t.some((e) => e.object === "block" || e.object === "inline") && t.length > 0 && (t = [{
+		object: "block",
+		type: "span",
+		data: {},
+		isVoid: !1,
+		nodes: t
+	}]), t.length === 0 && (t = [{
+		object: "block",
+		type: "span",
+		data: {},
+		isVoid: !1,
+		nodes: []
+	}]), {
+		object: "value",
+		document: {
+			object: "document",
+			data: {},
+			nodes: t
+		}
+	};
+};
+//#endregion
+export { _ as MARK_TAGS, b as deserialize };

package/dist/with-mask.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @synced-from pie-lib/packages/mask-markup/src/with-mask.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';
+export declare const buildLayoutFromMarkup: (markup: any, type: any) => {
+    object: string;
+    data: {};
+    nodes: any;
+};
+export declare const withMask: (type: any, renderChildren: any) => {
+    new (props: any): {
+        componentDidUpdate(prevProps: any): void;
+        render(): JSX.Element;
+    };
+    propTypes: {
+        /**
+         * At the start we'll probably work with markup
+         */
+        markup: PropTypes.Requireable<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.Requireable<object>;
+        value: PropTypes.Requireable<object>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        customMarkMarkupComponent: PropTypes.Requireable<(...args: any[]) => any>;
+        elementType: PropTypes.Requireable<string>;
+    };
+};
+//# sourceMappingURL=with-mask.d.ts.map

package/dist/with-mask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-mask.d.ts","sourceRoot":"","sources":["../src/with-mask.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,eAAO,MAAM,qBAAqB,GAAI,WAAM,EAAE,SAAI;;;;CAIjD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,SAAI,EAAE,mBAAc;;;;;;QAGvC;;WAEG;;QAEH;;WAEG;;;;;;;CAqDR,CAAC"}

package/dist/with-mask.js

@@ -0,0 +1,45 @@
+import { deserialize as e } from "./serialization.js";
+import t from "./mask.js";
+import n from "./componentize.js";
+import r from "react";
+import i from "prop-types";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/with-mask.tsx
+var o = (t, r) => {
+	let { markup: i } = n(t, r);
+	return e(i).document;
+}, s = (e, n) => class extends r.Component {
+	static propTypes = {
+		markup: i.string,
+		layout: i.object,
+		value: i.object,
+		onChange: i.func,
+		customMarkMarkupComponent: i.func,
+		elementType: i.string
+	};
+	constructor(e) {
+		super(e), this.containerRef = r.createRef();
+	}
+	componentDidUpdate(e) {
+		if (this.props.markup !== e.markup) {
+			let e = this.containerRef.current;
+			(e && e.querySelectorAll("[data-latex][data-math-handled=\"true\"]") || []).forEach((e) => {
+				let t = e.querySelector("mjx-container");
+				t && e.removeChild(t), e.innerHTML = e.getAttribute("data-raw"), e.removeAttribute("data-math-handled");
+			});
+		}
+	}
+	render() {
+		let { markup: r, layout: i, value: s, onChange: c, elementType: l } = this.props, u = i || o(r, e);
+		return /* @__PURE__ */ a(t, {
+			containerRef: this.containerRef,
+			elementType: l,
+			layout: u,
+			value: s,
+			onChange: c,
+			renderChildren: n(this.props)
+		});
+	}
+};
+//#endregion
+export { o as buildLayoutFromMarkup, s as withMask };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@pie-lib/mask-markup",
+  "version": "0.1.0",
+  "description": "",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/drag": "0.1.0",
+    "@pie-lib/editable-html-tip-tap": "0.1.0",
+    "@pie-lib/math-rendering": "0.1.0",
+    "@pie-lib/render-ui": "0.1.0",
+    "classnames": "^2.2.6",
+    "debug": "^4.1.1",
+    "lodash-es": "^4.17.23",
+    "prop-types": "^15.7.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "to-style": "^1.3.3",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.0",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/utilities": "3.2.2"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bun x vite build && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "test": "bun x vitest run"
+  }
+}

package/src/choices/choice.tsx

@@ -0,0 +1,107 @@
+// @ts-nocheck
+/**
+ * @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, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useDraggable } from '@dnd-kit/core';
+import { styled } from '@mui/material/styles';
+import Chip from '@mui/material/Chip';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+import { color } from '@pie-lib/render-ui';
+
+export const DRAG_TYPE = 'MaskBlank';
+
+const StyledChoice: any = styled('span')(({ theme, disabled }) => ({
+  border: `solid 0px ${theme.palette.primary.main}`,
+  borderRadius: theme.spacing(2),
+  margin: theme.spacing(0.5),
+  transform: 'translate(0, 0)',
+  display: 'inline-flex',
+  ...(disabled && {}),
+}));
+
+const StyledChip: any = styled(Chip)(() => ({
+  backgroundColor: color.white(),
+  border: `1px solid ${color.text()}`,
+  color: color.text(),
+  alignItems: 'center',
+  display: 'inline-flex',
+  height: 'initial',
+  minHeight: '32px',
+  fontSize: 'inherit',
+  whiteSpace: 'pre-wrap',
+  maxWidth: '374px',
+  // Added for touch devices, for image content.
+  // This will prevent the context menu from appearing and not allowing other interactions with the image.
+  // If interactions with the image in the token will be requested we should handle only the context Menu.
+  pointerEvents: 'none',
+  borderRadius: '3px',
+  paddingTop: '12px',
+  paddingBottom: '12px',
+
+  '&.Mui-disabled': {
+    opacity: 1,
+  },
+}));
+
+const StyledChipLabel: any = styled('span')(() => ({
+  whiteSpace: 'normal',
+  '& img': {
+    display: 'block',
+    padding: '2px 0',
+  },
+  '& mjx-frac': {
+    fontSize: '120% !important',
+  },
+}));
+
+export default function Choice({ choice, disabled, instanceId }) {
+  const rootRef = useRef(null);
+
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `choice-${choice.id}`,
+    data: { choice, instanceId, fromChoice: true, type: DRAG_TYPE },
+    disabled,
+  });
+
+  useEffect(() => {
+    renderMath(rootRef.current);
+  }, [choice.value]);
+
+  return (
+    <StyledChoice
+      ref={setNodeRef}
+      style={
+        isDragging
+          ? {
+              width: rootRef.current?.offsetWidth,
+              height: rootRef.current?.offsetHeight,
+            }
+          : {}
+      }
+      disabled={disabled}
+      {...listeners}
+      {...attributes}
+    >
+      <StyledChip
+        clickable={false}
+        disabled={disabled}
+        ref={rootRef}
+        label={<StyledChipLabel dangerouslySetInnerHTML={{ __html: choice.value }} />}
+      />
+    </StyledChoice>
+  );
+}
+
+Choice.propTypes = {
+  choice: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  instanceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

package/src/choices/index.tsx

@@ -0,0 +1,74 @@
+// @ts-nocheck
+/**
+ * @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';
+import { findKey } from 'lodash-es';
+import Choice from './choice.js';
+import { DragDroppablePlaceholder } from '@pie-lib/drag';
+
+export default class Choices extends React.Component {
+  static propTypes = {
+    disabled: PropTypes.bool,
+    duplicates: PropTypes.bool,
+    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
+    value: PropTypes.object,
+    choicePosition: PropTypes.string.isRequired,
+    instanceId: PropTypes.string, // Added for drag isolation
+  };
+
+  getStyleForWrapper: any = () => {
+    const { choicePosition } = this.props;
+
+    switch (choicePosition) {
+      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() {
+    const { disabled, duplicates, choices, value, instanceId } = this.props;
+    const filteredChoices = choices.filter((c) => {
+      if (duplicates === true) {
+        return true;
+      }
+      const foundChoice = findKey(value, (v) => v === c.id);
+      return foundChoice === undefined;
+    });
+    const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };
+
+    return (
+      <div style={elementStyle}>
+        <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>
+          {filteredChoices.map((c, index) => (
+            <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} instanceId={instanceId} />
+          ))}
+        </DragDroppablePlaceholder>
+      </div>
+    );
+  }
+}

package/src/componentize.tsx

@@ -0,0 +1,23 @@
+// @ts-nocheck
+/**
+ * @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.
+ */
+
+const REGEX = /\{\{(\d+)\}\}/g;
+
+export default (s, t) => {
+  if (!s) {
+    return { markup: '' };
+  }
+
+  const markup = s.replace(REGEX, (match, g) => {
+    return `<span data-component="${t}" data-id="${g}"></span>`;
+  });
+
+  return { markup };
+};