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

package/dist/extensions/custom-toolbar-wrapper.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/custom-toolbar-wrapper.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.
+ */
+declare function CustomToolbarWrapper(props: any): JSX.Element;
+export default CustomToolbarWrapper;
+//# sourceMappingURL=custom-toolbar-wrapper.d.ts.map

package/dist/extensions/custom-toolbar-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-toolbar-wrapper.d.ts","sourceRoot":"","sources":["../../src/extensions/custom-toolbar-wrapper.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAmDH,iBAAS,oBAAoB,CAAC,KAAK,KAAA,eA0BlC;AAED,eAAe,oBAAoB,CAAC"}

package/dist/extensions/custom-toolbar-wrapper.js

@@ -0,0 +1,58 @@
+import { PIE_TOOLBAR__CLASS as e } from "../constants.js";
+import { DoneButton as t } from "../components/common/done-button.js";
+import "react";
+import { styled as n } from "@mui/material/styles";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "@mui/material/IconButton";
+import o from "@mui/icons-material/Delete";
+//#region src/extensions/custom-toolbar-wrapper.tsx
+var s = n("div", { shouldForwardProp: (e) => ![
+	"showDone",
+	"toolbarAlignment",
+	"isFocused",
+	"autoWidth",
+	"isHidden"
+].includes(e) })(({ showDone: e, toolbarAlignment: t, isFocused: n, autoWidth: r, isHidden: i }) => ({
+	position: "absolute",
+	zIndex: 10,
+	cursor: "pointer",
+	justifyContent: "space-between",
+	background: "var(--editable-html-toolbar-bg, #efefef)",
+	minWidth: e ? "280px" : "265px",
+	margin: "5px 0 0 0",
+	padding: "2px",
+	boxShadow: "0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)",
+	boxSizing: "border-box",
+	display: "flex",
+	opacity: 1,
+	...t === "right" && { right: 0 },
+	...r ? { width: "auto" } : { width: "100%" },
+	...i && { visibility: "hidden" }
+})), c = n(a)({
+	width: "28px",
+	height: "28px",
+	padding: "4px",
+	verticalAlign: "top"
+}), l = n("div")({ display: "flex" });
+function u(n) {
+	let { children: a, deletable: u, toolbarOpts: d, autoWidth: f, isFocused: p, doneButtonRef: m, onDelete: h, showDone: g, onDone: _ } = n, v = d.minWidth === void 0 ? {} : { minWidth: d.minWidth };
+	return /* @__PURE__ */ i(s, {
+		className: e,
+		showDone: g,
+		toolbarAlignment: d.alignment,
+		isFocused: d.alwaysVisible || p,
+		autoWidth: f,
+		isHidden: d.isHidden === !0,
+		style: { ...v },
+		children: [a, /* @__PURE__ */ i(l, { children: [u && /* @__PURE__ */ r(c, {
+			"aria-label": "Delete",
+			onMouseDown: (e) => h?.(e),
+			children: /* @__PURE__ */ r(o, {})
+		}), g && /* @__PURE__ */ r(t, {
+			doneButtonRef: m,
+			onClick: _
+		})] })]
+	});
+}
+//#endregion
+export { u as default };

package/dist/extensions/div-node.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/div-node.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 { Node } from '@tiptap/core';
+export declare const DivNode: Node<any, any>;
+//# sourceMappingURL=div-node.d.ts.map

package/dist/extensions/div-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"div-node.d.ts","sourceRoot":"","sources":["../../src/extensions/div-node.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,OAAO,gBAgClB,CAAC"}

package/dist/extensions/div-node.js

@@ -0,0 +1,25 @@
+import { Node as e } from "@tiptap/core";
+//#region src/extensions/div-node.tsx
+var t = e.create({
+	name: "div",
+	group: "block",
+	content: "inline*",
+	parseHTML() {
+		return [{ tag: "div" }];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return [
+			"div",
+			e,
+			0
+		];
+	},
+	addKeyboardShortcuts() {
+		return { Enter: () => {
+			let { state: e } = this.editor, { $from: t } = e.selection;
+			return t.parent.type.name === "div" ? this.editor.chain().focus().setNode("paragraph").splitBlock().run() : !1;
+		} };
+	}
+});
+//#endregion
+export { t as DivNode };

package/dist/extensions/extended-table.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/extended-table.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 ExtendedTable: import("@tiptap/core").Node<import("@tiptap/extension-table").TableOptions, any>;
+export default ExtendedTable;
+//# sourceMappingURL=extended-table.d.ts.map

package/dist/extensions/extended-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extended-table.d.ts","sourceRoot":"","sources":["../../src/extensions/extended-table.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAIH,QAAA,MAAM,aAAa,kFAmBjB,CAAC;AAEH,eAAe,aAAa,CAAC"}

package/dist/extensions/extended-table.js

@@ -0,0 +1,15 @@
+import { Table as e } from "@tiptap/extension-table";
+//#region src/extensions/extended-table.ts
+var t = e.extend({
+	addAttributes() {
+		return { border: { default: "1" } };
+	},
+	renderHTML(e) {
+		let t = this.parent(e), { border: n } = e.HTMLAttributes, r = `${t[1].style}${t[1].style.match(/.*; */) ? "" : ";"}`;
+		return t[1].style = `${r}
+    color: var(--pie-text, black);
+    background-color: var(--pie-background, rgba(255, 255, 255))`, t[1].border = n || "1", t;
+	}
+});
+//#endregion
+export { t as default };

package/dist/extensions/image-component.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/image-component.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 function ImageComponent(props: any): JSX.Element;
+declare namespace ImageComponent {
+    var propTypes: {
+        node: PropTypes.Validator<object>;
+        editor: PropTypes.Validator<object>;
+        attributes: PropTypes.Requireable<object>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        maxImageWidth: PropTypes.Requireable<number>;
+        maxImageHeight: PropTypes.Requireable<number>;
+    };
+}
+export default ImageComponent;
+//# sourceMappingURL=image-component.d.ts.map

package/dist/extensions/image-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-component.d.ts","sourceRoot":"","sources":["../../src/extensions/image-component.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,SAAS,MAAM,YAAY,CAAC;AA+DnC,iBAAS,cAAc,CAAC,KAAK,KAAA,eAyN5B;kBAzNQ,cAAc;;;;;;;;;;AAoOvB,eAAe,cAAc,CAAC"}

package/dist/extensions/image-component.js

@@ -0,0 +1,200 @@
+import e from "../components/image/InsertImageHandler.js";
+import t from "../components/image/ImageToolbar.js";
+import n from "./custom-toolbar-wrapper.js";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { NodeViewWrapper as s } from "@tiptap/react";
+import { styled as c } from "@mui/material/styles";
+import l from "prop-types";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import f from "lodash-es/isEqual.js";
+import p from "debug";
+import m from "@mui/material/LinearProgress";
+//#region src/extensions/image-component.tsx
+p("@pie-lib:editable-html:plugins:image:component");
+var h = c(m, { shouldForwardProp: (e) => e !== "hideProgress" })(({ hideProgress: e }) => ({
+	position: "absolute",
+	left: "0",
+	width: "fit-content",
+	top: "0%",
+	transition: "opacity 200ms linear",
+	...e && { opacity: 0 }
+})), g = c("div", { shouldForwardProp: (e) => ![
+	"active",
+	"loading",
+	"pendingDelete"
+].includes(e) })(({ theme: e, active: t, loading: n, pendingDelete: r }) => ({
+	position: "relative",
+	border: t ? `solid 1px ${e.palette.primary.main}` : `solid 1px ${e.palette.common.white}`,
+	display: "flex",
+	transition: "opacity 200ms linear",
+	...n && { opacity: .3 },
+	...r && { opacity: .3 }
+})), _ = c("div")(({ theme: e }) => ({
+	position: "relative",
+	width: "fit-content",
+	display: "flex",
+	alignItems: "center",
+	"&&:hover > .resize": { display: "block" }
+})), v = c("div")(({ theme: e }) => ({
+	backgroundColor: e.palette.primary.main,
+	cursor: "col-resize",
+	height: "35px",
+	width: "5px",
+	borderRadius: 8,
+	marginLeft: "5px",
+	marginRight: "10px",
+	display: "none"
+})), y = (e) => e ? `${e}px` : "calc(20px)";
+function b(c) {
+	let { node: l, editor: p, attributes: m, onFocus: b, selected: x, options: S, maxImageWidth: C = 700, maxImageHeight: w = 900, latex: T, handleChange: E, handleDone: D } = c, { alt: O } = l.attrs, [k, A] = o(!1), j = a(l), M = a(null), N = a(null), P = a(null), F = r((e) => {
+		let t = e / M.current.naturalWidth * 4;
+		return parseInt(t.toFixed(0) * 25, 10);
+	}, []), I = r(() => {
+		if (!l.attrs.width || !M.current) return;
+		let e = {
+			...l.attrs,
+			resizePercent: F(l.attrs.width)
+		};
+		f(e, l.attrs) || p.commands.updateAttributes("imageUploadNode", e);
+	}, [
+		p,
+		l.attrs,
+		F
+	]);
+	i(() => {
+		j.current = l;
+	}, [l]), i(() => {
+		let { selection: e } = p.state, t = e.from + l.nodeSize === e.to;
+		x ? t && A(x) : A(x);
+	}, [
+		p,
+		l,
+		x
+	]), i(() => {
+		S.imageHandling.insertImageRequested(l, (t) => new e(p, l, t)), I();
+		let t = N.current;
+		return t && t.addEventListener("mousedown", H, !1), () => {
+			t && t.removeEventListener("mousedown", H, !1), S.imageHandling.onDelete(j.current);
+		};
+	}, []), i(() => {
+		I();
+	});
+	let L = r(() => {
+		let e = M.current;
+		if (e && (!e.style.width || e.style.width === "calc(20px)")) {
+			let t = Math.min(e.naturalWidth, C), n = Math.min(e.naturalHeight, w);
+			e.style.width = `${t}px`, e.style.height = `${n}px`;
+			let r = {
+				width: t,
+				height: n
+			};
+			f(r, l.attrs) || p.commands.updateAttributes("imageUploadNode", r);
+		}
+	}, [
+		p,
+		l.attrs,
+		C,
+		w
+	]), R = (e, t, n = !0, r) => {
+		if (n) {
+			let n = e.width / e.height;
+			return r === "height" ? {
+				width: t.height * n,
+				height: t.height
+			} : {
+				width: t.width,
+				height: t.width / n
+			};
+		}
+		return t;
+	}, z = r((e) => {
+		let t = M.current;
+		if (!t) return;
+		let n = e.target.getBoundingClientRect(), r = R({
+			width: t.naturalWidth,
+			height: t.naturalHeight
+		}, {
+			width: e.clientX - n.left,
+			height: e.clientY - n.top
+		});
+		if (r.width > 50 && r.height > 50 && r.width <= 700 && r.height <= 900) {
+			t.style.width = `${r.width}px`, t.style.height = `${r.height}px`;
+			let e = {
+				width: r.width,
+				height: r.height
+			};
+			f(e, l.attrs) || p.commands.updateAttributes("imageUploadNode", e);
+		}
+	}, [p, l.attrs]), B = r((e) => {
+		p.commands.updateAttributes("imageUploadNode", e);
+	}, [p]), V = r(() => {
+		window.removeEventListener("mousemove", z), window.removeEventListener("mouseup", V);
+	}, [z]), H = r(() => {
+		window.addEventListener("mousemove", z), window.addEventListener("mouseup", V);
+	}, [z, V]), U = {
+		width: y(l.attrs.width),
+		height: y(l.attrs.height),
+		objectFit: "contain"
+	}, W = {
+		left: "flex-start",
+		center: "center",
+		right: "flex-end"
+	}[l.attrs.alignment] || "flex-start";
+	return /* @__PURE__ */ d(s, { children: [/* @__PURE__ */ d(g, {
+		onFocus: b,
+		active: x,
+		loading: !l.attrs.loaded,
+		pendingDelete: l.attrs.deleteStatus === "pending",
+		style: { justifyContent: W },
+		children: [/* @__PURE__ */ u(h, {
+			mode: "determinate",
+			value: l.attrs.percent || 0,
+			hideProgress: l.attrs.loaded
+		}), /* @__PURE__ */ d(_, { children: [/* @__PURE__ */ u("img", {
+			...m,
+			ref: M,
+			src: l.attrs.src,
+			style: U,
+			onLoad: L,
+			alt: l.attrs.alt
+		}), /* @__PURE__ */ u(v, {
+			ref: N,
+			className: "resize"
+		})] })]
+	}), k && /* @__PURE__ */ u("div", {
+		ref: P,
+		style: {
+			position: "absolute",
+			top: "100%",
+			left: 0,
+			zIndex: 20,
+			background: "var(--editable-html-toolbar-bg, #efefef)",
+			boxShadow: "0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)",
+			width: "100%"
+		},
+		children: /* @__PURE__ */ u(n, {
+			showDone: !0,
+			...S,
+			onDone: () => {
+				A(!1), c.imageHandling?.onDone(), c.editor.commands.focus("end");
+			},
+			children: /* @__PURE__ */ u(t, {
+				disableImageAlignmentButtons: S.disableImageAlignmentButtons,
+				alt: l.attrs.alt,
+				imageLoaded: l.attrs.loaded,
+				alignment: l.attrs.alignment || "left",
+				onChange: B
+			})
+		})
+	})] });
+}
+b.propTypes = {
+	node: l.object.isRequired,
+	editor: l.object.isRequired,
+	attributes: l.object,
+	onFocus: l.func,
+	maxImageWidth: l.number,
+	maxImageHeight: l.number
+};
+//#endregion
+export { b as default };

package/dist/extensions/image.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/image.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 { Node } from '@tiptap/core';
+export declare const ImageUploadNode: Node<any, any>;
+//# sourceMappingURL=image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/extensions/image.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AAKrD,eAAO,MAAM,eAAe,gBAgD1B,CAAC"}

package/dist/extensions/image.js

@@ -0,0 +1,42 @@
+import e from "./image-component.js";
+import "react";
+import { ReactNodeViewRenderer as t } from "@tiptap/react";
+import { Node as n, mergeAttributes as r } from "@tiptap/core";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/extensions/image.tsx
+var a = n.create({
+	name: "imageUploadNode",
+	group: "block",
+	atom: !0,
+	selectable: !0,
+	draggable: !0,
+	addAttributes() {
+		return {
+			loaded: { default: !1 },
+			deleteStatus: { default: null },
+			alignment: { default: null },
+			percent: { default: null },
+			width: { default: null },
+			height: { default: null },
+			src: { default: null },
+			alt: { default: null }
+		};
+	},
+	parseHTML() {
+		return [{ tag: "div[data-type=\"image-upload-node\"]" }];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return ["img", r(e, { "data-type": "image-upload-node" })];
+	},
+	addNodeView() {
+		return t((t) => /* @__PURE__ */ i(e, {
+			...t,
+			options: this.options
+		}));
+	},
+	addCommands() {
+		return { setImageUploadNode: () => ({ commands: e }) => e.insertContent({ type: this.name }) };
+	}
+});
+//#endregion
+export { a as ImageUploadNode };

package/dist/extensions/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/index.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 ALL_PLUGINS: string[];
+export declare const PLUGINS_MAP: {
+    'text-align': string;
+    'bulleted-list': string;
+    'numbered-list': string;
+};
+export declare const DEFAULT_PLUGINS: string[];
+export declare const buildExtensions: (activeExtensions: any, customExtensions: any, opts: any) => any;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/extensions/index.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAOH,eAAO,MAAM,WAAW,UAwBvB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;CAIvB,CAAC;AAEF,eAAO,MAAM,eAAe,UAAqF,CAAC;AAElH,eAAO,MAAM,eAAe,GAAI,qBAAgB,EAAE,qBAAgB,EAAE,SAAI,QAyCvE,CAAC"}

package/dist/extensions/index.js

@@ -0,0 +1,65 @@
+import e from "debug";
+import t from "lodash-es/compact.js";
+import n from "lodash-es/isEmpty.js";
+//#region src/extensions/index.tsx
+var r = e("@pie-lib:editable-html:plugins"), i = [
+	"bold",
+	"html",
+	"extraCSSRules",
+	"italic",
+	"underline",
+	"strikethrough",
+	"bulleted-list",
+	"numbered-list",
+	"image",
+	"math",
+	"languageCharacters",
+	"text-align",
+	"blockquote",
+	"h3",
+	"table",
+	"video",
+	"audio",
+	"responseArea",
+	"redo",
+	"undo",
+	"superscript",
+	"subscript"
+], a = {
+	"text-align": "textAlign",
+	"bulleted-list": "ul_list",
+	"numbered-list": "ol_list"
+}, o = i.filter((e) => ![
+	"responseArea",
+	"h3",
+	"blockquote"
+].includes(e)), s = (e, i, a) => {
+	r("[buildPlugins] opts: ", a), e ||= o;
+	let s = (t, n = !0) => e.includes(t) && n && t, c = a.image && a.image.delete, l = a.math, u = a.responseArea && a.responseArea.type, d = !n(a.extraCSSRules), f = a?.languageCharacters || [];
+	return t([
+		s("table"),
+		s("bold"),
+		s("italic"),
+		s("strikethrough"),
+		s("underline"),
+		s("superscript"),
+		s("subscript"),
+		s("image", !!c),
+		s("video"),
+		s("audio"),
+		s("math", !!l),
+		...f.map((e) => s("languageCharacters", e)),
+		s("text-align"),
+		s("blockquote"),
+		s("h3"),
+		s("bulleted-list"),
+		s("numbered-list"),
+		s("undo"),
+		s("redo"),
+		s("responseArea", !!u),
+		s("css", !!d),
+		s("html", !!a.html)
+	]);
+};
+//#endregion
+export { i as ALL_PLUGINS, o as DEFAULT_PLUGINS, a as PLUGINS_MAP, s as buildExtensions };

package/dist/extensions/math.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/math.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 { Node } from '@tiptap/core';
+import { Plugin } from 'prosemirror-state';
+export declare const EnsureTextAfterMathPlugin: (mathNodeName: any) => Plugin<any>;
+export declare const ZeroWidthSpaceHandlingPlugin: Plugin<any>;
+export declare const MathNode: Node<any, any>;
+export declare const MathNodeView: (props: any) => JSX.Element;
+//# sourceMappingURL=math.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../../src/extensions/math.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAIH,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAiB,MAAM,EAA4B,MAAM,mBAAmB,CAAC;AAMpF,eAAO,MAAM,yBAAyB,GAAI,iBAAY,gBAyBlD,CAAC;AAEL,eAAO,MAAM,4BAA4B,aA4CvC,CAAC;AAEH,eAAO,MAAM,QAAQ,gBAuFnB,CAAC;AAEH,eAAO,MAAM,YAAY,GAAI,UAAK,gBAsGjC,CAAC"}