@pie-lib/editable-html-tip-tap 2.2.0-beta.7 → 3.0.0-next.35

package/dist/components/common/toolbar-buttons.js

@@ -0,0 +1,96 @@
+import e from "react";
+import { styled as t } from "@mui/material/styles";
+import n from "prop-types";
+import { jsx as r } from "react/jsx-runtime";
+import { color as i } from "@pie-lib/render-ui";
+import a from "debug";
+//#region src/components/common/toolbar-buttons.tsx
+var o = t("button", { shouldForwardProp: (e) => ![
+	"active",
+	"disabled",
+	"extraStyles"
+].includes(e) })(({ active: e, disabled: t }) => ({
+	color: e ? i.text() : i.disabled(),
+	display: "inline-flex",
+	padding: "2px",
+	background: "none",
+	border: "none",
+	cursor: t ? "not-allowed" : "pointer",
+	"& svg": {
+		width: "24px",
+		height: "24px"
+	},
+	"&:hover": { color: t ? i.disabled() : i.text() },
+	"&:focus": { outline: `2px solid ${i.buttonFocusOutline()}` },
+	...t && { opacity: .7 }
+})), s = a("pie-elements:editable-html:raw-button");
+(class extends e.Component {
+	static propTypes = {
+		onClick: n.func.isRequired,
+		children: n.oneOfType([n.arrayOf(n.node), n.node]).isRequired,
+		active: n.bool,
+		disabled: n.bool,
+		extraStyles: n.object
+	};
+	constructor(e) {
+		super(e);
+	}
+	onClick = (e) => {
+		s("[onClick]"), e.preventDefault();
+		let { onClick: t } = this.props;
+		t(e);
+	};
+	onKeyDown = (e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			s("[onKeyDown]"), e.preventDefault();
+			let { onClick: t } = this.props;
+			t(e);
+		}
+	};
+	render() {
+		let { active: e, children: t, disabled: n, extraStyles: i, ariaLabel: a } = this.props;
+		return /* @__PURE__ */ r(o, {
+			style: i,
+			active: e,
+			disabled: n,
+			onMouseDown: this.onClick,
+			onKeyDown: this.onKeyDown,
+			"aria-label": a,
+			"aria-pressed": e,
+			tabIndex: 0,
+			children: t
+		});
+	}
+});
+var c = class extends e.Component {
+	static propTypes = {
+		onToggle: n.func.isRequired,
+		mark: n.string,
+		label: n.string.isRequired,
+		children: n.oneOfType([n.arrayOf(n.node), n.node]).isRequired,
+		active: n.bool
+	};
+	constructor(e) {
+		super(e);
+	}
+	onToggle = (e) => {
+		e.preventDefault(), this.props.onToggle(this.props.mark);
+	};
+	onKeyDown = (e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.props.onToggle(this.props.mark));
+	};
+	render() {
+		let { children: e, active: t, label: n } = this.props;
+		return /* @__PURE__ */ r(o, {
+			active: t,
+			onMouseDown: this.onToggle,
+			"aria-pressed": t,
+			onKeyDown: this.onKeyDown,
+			"aria-label": n,
+			tabIndex: 0,
+			children: e
+		});
+	}
+}, l = c;
+//#endregion
+export { l as MarkButton, c as RawMarkButton };

package/dist/components/icons/CssIcon.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/icons/CssIcon.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 CssIcon: () => React.JSX.Element;
+export default CssIcon;

package/dist/components/icons/CssIcon.js

@@ -0,0 +1,14 @@
+import "react";
+import { styled as e } from "@mui/material/styles";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/icons/CssIcon.tsx
+var n = e("div")(({ theme: e }) => ({
+	fontFamily: "Cerebri Sans, Arial, sans-serif",
+	fontSize: e.typography.fontSize,
+	fontWeight: "bold",
+	lineHeight: "14px",
+	position: "relative",
+	whiteSpace: "nowrap"
+})), r = () => /* @__PURE__ */ t(n, { children: "CSS" });
+//#endregion
+export { r as default };

package/dist/components/icons/RespArea.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/icons/RespArea.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 Chevron: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        direction: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+    };
+};
+export declare const GripIcon: {
+    ({ style }: {
+        style: any;
+    }): React.JSX.Element;
+    propTypes: {
+        style: PropTypes.Requireable<object>;
+    };
+};
+export declare const ToolbarIcon: () => React.JSX.Element;

package/dist/components/icons/RespArea.js

@@ -0,0 +1,42 @@
+import "react";
+import { styled as e } from "@mui/material/styles";
+import t from "prop-types";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@mui/icons-material/ChevronRight";
+import a from "@mui/icons-material/MoreVert";
+//#region src/components/icons/RespArea.tsx
+var o = (e) => {
+	switch (e) {
+		case "down": return 90;
+		case "up": return -90;
+		case "left": return 180;
+		default: return 0;
+	}
+}, s = (e) => {
+	let { direction: t, style: r } = e;
+	return /* @__PURE__ */ n(i, { style: {
+		transform: `rotate(${o(t)}deg)`,
+		...r
+	} });
+};
+s.propTypes = {
+	direction: t.string,
+	style: t.object
+};
+var c = ({ style: e }) => /* @__PURE__ */ r("span", {
+	style: e,
+	children: [/* @__PURE__ */ n(a, { style: { margin: "0 -16px" } }), /* @__PURE__ */ n(a, {})]
+});
+c.propTypes = { style: t.object }, 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"
+}));
+//#endregion
+export { s as Chevron, c as GripIcon };

package/dist/components/icons/TableIcons.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/icons/TableIcons.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';
+export declare const AddRow: (props: any) => React.JSX.Element;
+export declare const RemoveRow: (props: any) => React.JSX.Element;
+export declare const AddColumn: (props: any) => React.JSX.Element;
+export declare const RemoveColumn: (props: any) => React.JSX.Element;
+export declare const RemoveTable: (props: any) => React.JSX.Element;

package/dist/components/icons/TableIcons.js

@@ -0,0 +1,34 @@
+import "react";
+import { styled as e } from "@mui/material/styles";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/icons/TableIcons.tsx
+var n = e("path")({
+	fill: "grey",
+	"&:hover": { fill: "black" }
+}), r = (e) => (n) => /* @__PURE__ */ t("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	version: "1.1",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ t(e, { ...n })
+}), i = r((e) => /* @__PURE__ */ t(n, {
+	...e,
+	d: "M22,10A2,2 0 0,1 20,12H4A2,2 0 0,1 2,10V3H4V5H8V3H10V5H14V3H16V5H20V3H22V10M4,10H8V7H4V10M10,10H14V7H10V10M20,10V7H16V10H20M11,14H13V17H16V19H13V22H11V19H8V17H11V14Z"
+})), a = r((e) => /* @__PURE__ */ t(n, {
+	...e,
+	d: "M9.41,13L12,15.59L14.59,13L16,14.41L13.41,17L16,19.59L14.59,21L12,18.41L9.41,21L8,19.59L10.59,17L8,14.41L9.41,13M22,9A2,2 0 0,1 20,11H4A2,2 0 0,1 2,9V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V9M4,9H8V6H4V9M10,9H14V6H10V9M16,9H20V6H16V9Z"
+})), o = r((e) => /* @__PURE__ */ t(n, {
+	...e,
+	d: "M11,2A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H2V2H11M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M15,11H18V8H20V11H23V13H20V16H18V13H15V11Z"
+})), s = r((e) => /* @__PURE__ */ t(n, {
+	...e,
+	d: "M4,2H11A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H4A2,2 0 0,1 2,20V4A2,2 0 0,1 4,2M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M17.59,12L15,9.41L16.41,8L19,10.59L21.59,8L23,9.41L20.41,12L23,14.59L21.59,16L19,13.41L16.41,16L15,14.59L17.59,12Z"
+})), c = r((e) => /* @__PURE__ */ t(n, {
+	...e,
+	d: "M15.46,15.88L16.88,14.46L19,16.59L21.12,14.46L22.54,15.88L20.41,18L22.54,20.12L21.12,21.54L19,19.41L16.88,21.54L15.46,20.12L17.59,18L15.46,15.88M4,3H18A2,2 0 0,1 20,5V12.08C18.45,11.82 16.92,12.18 15.68,13H12V17H13.08C12.97,17.68 12.97,18.35 13.08,19H4A2,2 0 0,1 2,17V5A2,2 0 0,1 4,3M4,7V11H10V7H4M12,7V11H18V7H12M4,13V17H10V13H4Z"
+}));
+//#endregion
+export { o as AddColumn, i as AddRow, s as RemoveColumn, a as RemoveRow, c as RemoveTable };

package/dist/components/icons/TextAlign.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/icons/TextAlign.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';
+export declare const AlignLeft: () => React.JSX.Element;
+export declare const AlignRight: () => React.JSX.Element;
+export declare const AlignCenter: () => React.JSX.Element;
+export declare const AlignJustify: () => React.JSX.Element;
+declare const _default: ({ editor, onChange }: {
+    editor: any;
+    onChange: any;
+}) => React.JSX.Element;
+export default _default;

package/dist/components/icons/TextAlign.js

@@ -0,0 +1,143 @@
+import { useState as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@mui/material/List";
+import i from "@mui/material/ListItem";
+import a from "@mui/material/Collapse";
+//#region src/components/icons/TextAlign.tsx
+var o = () => /* @__PURE__ */ t("svg", {
+	width: "20",
+	height: "20",
+	viewBox: "0 0 66 66",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ t("path", {
+		d: "M42.1875 4.75C42.1875 7.38672 39.9902 9.4375 37.5 9.4375H4.6875C2.05078 9.4375 0 7.38672 0 4.75C0 2.25977 2.05078 0.0625 4.6875 0.0625H37.5C39.9902 0.0625 42.1875 2.25977 42.1875 4.75ZM42.1875 42.25C42.1875 44.8867 39.9902 46.9375 37.5 46.9375H4.6875C2.05078 46.9375 0 44.8867 0 42.25C0 39.7598 2.05078 37.5625 4.6875 37.5625H37.5C39.9902 37.5625 42.1875 39.7598 42.1875 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z",
+		fill: "currentColor"
+	})
+}), s = () => /* @__PURE__ */ t("svg", {
+	width: "20",
+	height: "20",
+	viewBox: "0 0 66 66",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ t("path", {
+		d: "M65.625 4.75C65.625 7.38672 63.4277 9.4375 60.9375 9.4375H28.125C25.4883 9.4375 23.4375 7.38672 23.4375 4.75C23.4375 2.25977 25.4883 0.0625 28.125 0.0625H60.9375C63.4277 0.0625 65.625 2.25977 65.625 4.75ZM65.625 42.25C65.625 44.8867 63.4277 46.9375 60.9375 46.9375H28.125C25.4883 46.9375 23.4375 44.8867 23.4375 42.25C23.4375 39.7598 25.4883 37.5625 28.125 37.5625H60.9375C63.4277 37.5625 65.625 39.7598 65.625 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z",
+		fill: "currentColor"
+	})
+}), c = () => /* @__PURE__ */ t("svg", {
+	width: "20",
+	height: "20",
+	viewBox: "0 0 66 66",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ t("path", {
+		d: "M51.5625 4.75C51.5625 7.38672 49.3652 9.4375 46.875 9.4375H18.75C16.1133 9.4375 14.0625 7.38672 14.0625 4.75C14.0625 2.25977 16.1133 0.0625 18.75 0.0625H46.875C49.3652 0.0625 51.5625 2.25977 51.5625 4.75ZM65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5ZM0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61ZM51.5625 42.25C51.5625 44.8867 49.3652 46.9375 46.875 46.9375H18.75C16.1133 46.9375 14.0625 44.8867 14.0625 42.25C14.0625 39.7598 16.1133 37.5625 18.75 37.5625H46.875C49.3652 37.5625 51.5625 39.7598 51.5625 42.25Z",
+		fill: "currentColor"
+	})
+}), l = () => /* @__PURE__ */ t("svg", {
+	width: "20",
+	height: "20",
+	viewBox: "0 0 66 66",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ t("path", {
+		d: "M65.625 4.75C65.625 7.38672 63.4277 9.4375 60.9375 9.4375H4.6875C2.05078 9.4375 0 7.38672 0 4.75C0 2.25977 2.05078 0.0625 4.6875 0.0625H60.9375C63.4277 0.0625 65.625 2.25977 65.625 4.75ZM65.625 42.25C65.625 44.8867 63.4277 46.9375 60.9375 46.9375H4.6875C2.05078 46.9375 0 44.8867 0 42.25C0 39.7598 2.05078 37.5625 4.6875 37.5625H60.9375C63.4277 37.5625 65.625 39.7598 65.625 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z",
+		fill: "currentColor"
+	})
+}), u = ({ editor: u, onChange: d }) => {
+	let [f, p] = e(!1), m;
+	switch (!0) {
+		case u.isActive({ textAlign: "right" }):
+			m = /* @__PURE__ */ t(s, {});
+			break;
+		case u.isActive({ textAlign: "center" }):
+			m = /* @__PURE__ */ t(c, {});
+			break;
+		case u.isActive({ textAlign: "justify" }):
+			m = /* @__PURE__ */ t(l, {});
+			break;
+		default:
+			m = /* @__PURE__ */ t(o, {});
+			break;
+	}
+	let h = (e) => {
+		let t = e.currentTarget?.getAttribute("value");
+		t && u.commands.setTextAlign(t), p(!1);
+	};
+	return /* @__PURE__ */ n("div", { children: [/* @__PURE__ */ n("div", {
+		style: {
+			display: "flex",
+			alignItems: "center"
+		},
+		onClick: (e) => {
+			e.preventDefault(), e.stopPropagation(), p(!f);
+		},
+		children: [m, /* @__PURE__ */ t("span", {
+			style: {
+				marginLeft: "5px",
+				fontSize: "8px"
+			},
+			"aria-hidden": "true",
+			children: "▼"
+		})]
+	}), /* @__PURE__ */ t(a, {
+		in: f,
+		timeout: "auto",
+		unmountOnExit: !0,
+		style: { position: "absolute" },
+		children: /* @__PURE__ */ n(r, {
+			component: "div",
+			disablePadding: !0,
+			style: {
+				background: "#fff",
+				display: "flex",
+				flexDirection: "row",
+				padding: 0
+			},
+			children: [
+				/* @__PURE__ */ t(i, {
+					button: !0,
+					type: "submit",
+					value: "left",
+					"aria-label": "Align text left",
+					onClick: h,
+					children: /* @__PURE__ */ t(o, {})
+				}),
+				/* @__PURE__ */ t(i, {
+					button: !0,
+					type: "submit",
+					value: "center",
+					"aria-label": "Align text center",
+					onClick: h,
+					children: /* @__PURE__ */ t(c, {})
+				}),
+				/* @__PURE__ */ t(i, {
+					button: !0,
+					type: "submit",
+					value: "right",
+					"aria-label": "Align text right",
+					onClick: h,
+					children: /* @__PURE__ */ t(s, {})
+				}),
+				/* @__PURE__ */ t(i, {
+					button: !0,
+					type: "submit",
+					value: "justify",
+					"aria-label": "Justify text",
+					onClick: h,
+					children: /* @__PURE__ */ t(l, {})
+				})
+			]
+		})
+	})] });
+};
+//#endregion
+export { c as AlignCenter, l as AlignJustify, o as AlignLeft, s as AlignRight, u as default };

package/dist/components/image/AltDialog.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/image/AltDialog.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 class AltDialog extends React.Component {
+    static propTypes: {
+        onDone: PropTypes.Validator<(...args: any[]) => any>;
+        alt: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    closeDialog: any;
+    onDone: any;
+    handleOverflow: any;
+    render(): React.JSX.Element;
+}
+export default AltDialog;

package/dist/components/image/AltDialog.js

@@ -0,0 +1,61 @@
+import e from "react";
+import t from "prop-types";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@mui/material/DialogContent";
+import a from "@mui/icons-material/ArrowBackIos";
+import o from "@mui/material/TextField";
+import s from "@mui/material/DialogActions";
+import c from "@mui/material/Button";
+import l from "@mui/material/Dialog";
+//#region src/components/image/AltDialog.tsx
+var u = class extends e.Component {
+	static propTypes = {
+		onDone: t.func.isRequired,
+		alt: t.string
+	};
+	constructor(e) {
+		super(e);
+		let { alt: t } = e;
+		this.state = { value: t };
+	}
+	closeDialog = () => {
+		document.querySelectorAll("#text-dialog").forEach(function(e) {
+			return e.remove();
+		});
+	};
+	onDone = () => {
+		let { onDone: e } = this.props, { value: t } = this.state;
+		e(t), this.closeDialog();
+	};
+	handleOverflow = () => {
+		document.body.style.removeProperty("overflow");
+	};
+	render() {
+		let { value: e } = this.state;
+		return /* @__PURE__ */ r(l, {
+			open: !0,
+			disablePortal: !0,
+			onClose: this.closeDialog,
+			id: "text-dialog",
+			hideBackdrop: !0,
+			disableScrollLock: !0,
+			onEntered: this.handleOverflow,
+			children: [/* @__PURE__ */ n(i, { children: /* @__PURE__ */ r("div", {
+				style: { display: "flex" },
+				children: [/* @__PURE__ */ n(a, { style: { paddingTop: "6px" } }), /* @__PURE__ */ n(o, {
+					multiline: !0,
+					placeholder: "Enter an Alt Text description of this image",
+					helperText: "Users with visual limitations rely on Alt Text, since screen readers cannot otherwise describe the contents of an image.",
+					value: e,
+					onChange: (e) => this.setState({ value: e.target.value }),
+					FormHelperTextProps: { style: { fontSize: 14 } }
+				})]
+			}) }), /* @__PURE__ */ n(s, { children: /* @__PURE__ */ n(c, {
+				onClick: this.onDone,
+				children: "Done"
+			}) })]
+		});
+	}
+};
+//#endregion
+export { u as AltDialog, u as default };

package/dist/components/image/ImageToolbar.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/image/ImageToolbar.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';
+import React from 'react';
+export declare class ImageToolbar extends React.Component {
+    static propTypes: {
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        alignment: PropTypes.Requireable<string>;
+        alt: PropTypes.Requireable<string>;
+        imageLoaded: PropTypes.Requireable<boolean>;
+        disableImageAlignmentButtons: PropTypes.Requireable<boolean>;
+    };
+    onAltTextDone: any;
+    onAlignmentClick: any;
+    renderDialog: any;
+    render(): React.JSX.Element;
+}
+export default ImageToolbar;

package/dist/components/image/ImageToolbar.js

@@ -0,0 +1,80 @@
+import { AltDialog as e } from "./AltDialog.js";
+import { MarkButton as t } from "../common/toolbar-buttons.js";
+import n from "react";
+import { styled as r } from "@mui/material/styles";
+import i from "react-dom";
+import a from "prop-types";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "debug";
+//#region src/components/image/ImageToolbar.tsx
+var u = l("@pie-lib:editable-html:plugins:image:image-toolbar"), d = r("div")(({ theme: e }) => ({
+	paddingLeft: e.spacing.unit,
+	display: "flex",
+	alignItems: "center"
+})), f = r("span", { shouldForwardProp: (e) => !["disabled", "hasAlignmentButtons"].includes(e) })(({ disabled: e, hasAlignmentButtons: t }) => ({
+	...e && { opacity: .5 },
+	...t && {
+		borderLeft: "1px solid grey",
+		paddingLeft: 8,
+		marginLeft: 4
+	}
+})), p = ({ alignment: e, active: n, onClick: r }) => /* @__PURE__ */ s(t, {
+	active: n,
+	onToggle: () => r(e),
+	label: e,
+	children: e
+});
+p.propTypes = {
+	alignment: a.string.isRequired,
+	active: a.bool.isRequired,
+	onClick: a.func.isRequired
+};
+var m = class extends n.Component {
+	static propTypes = {
+		onChange: a.func.isRequired,
+		alignment: a.string,
+		alt: a.string,
+		imageLoaded: a.bool,
+		disableImageAlignmentButtons: a.bool
+	};
+	onAltTextDone = (e) => {
+		u("[onAltTextDone]: alt:", e), this.props.onChange({ alt: e }, !0);
+	};
+	onAlignmentClick = (e) => {
+		u("[onAlignmentClick]: alignment:", e), this.props.onChange({ alignment: e });
+	};
+	renderDialog = () => {
+		let { alt: t } = this.props, n = document.createElement("div"), r = /* @__PURE__ */ s(e, {
+			alt: t,
+			onDone: this.onAltTextDone
+		});
+		i.render(r, n), document.body.appendChild(n);
+	};
+	render() {
+		let { alignment: e, imageLoaded: t, disableImageAlignmentButtons: n } = this.props;
+		return /* @__PURE__ */ c(d, { children: [!n && /* @__PURE__ */ c(o, { children: [
+			/* @__PURE__ */ s(p, {
+				alignment: "left",
+				active: e === "left",
+				onClick: this.onAlignmentClick
+			}),
+			/* @__PURE__ */ s(p, {
+				alignment: "center",
+				active: e === "center",
+				onClick: this.onAlignmentClick
+			}),
+			/* @__PURE__ */ s(p, {
+				alignment: "right",
+				active: e === "right",
+				onClick: this.onAlignmentClick
+			})
+		] }), /* @__PURE__ */ s(f, {
+			disabled: !t,
+			hasAlignmentButtons: !n,
+			onMouseDown: (e) => t && this.renderDialog(e),
+			children: "Alt text"
+		})] });
+	}
+};
+//#endregion
+export { m as ImageToolbar, m as default };

package/dist/components/image/InsertImageHandler.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/image/InsertImageHandler.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.
+ */
+/**
+ * Handles user selection, insertion (or cancellation) of an image into the editor.
+ * @param {Block} placeholderBlock - a block that has been added to the editor as a place holder for the image
+ * @param {Function} onFinish - a function to call if uploading fails or succeeds
+ * @param {Function} getValue - a function to return the value of the editor
+ * @param {Function} onChange - callback to notify changes applied by the handler
+ * @param {Boolean} isPasted - a boolean that keeps track if the file is pasted
+ */
+declare class InsertImageHandler {
+    constructor(editor: any, nodeInfo: any, onFinish: any, isPasted?: boolean);
+    cancel(): void;
+    updateNode(newAttrs: any): void;
+    deleteNode(): void;
+    done(err: any, src: any): void;
+    /**
+     * Notify handler that the user chose a file - will create a change with a preview in the editor.
+     *
+     * @param {File} file - the file that the user chose using a file input.
+     */
+    fileChosen(file: any): void;
+    progress(percent: any, bytes: any, total: any): void;
+    getChosenFile(): any;
+}
+export default InsertImageHandler;