@pie-lib/editable-html-tip-tap 2.1.2-next.31 → 2.1.2-next.36

package/dist/components/media/MediaDialog.js

@@ -1,389 +0,0 @@
-import e from "react";
-import { styled as t } from "@mui/material/styles";
-import n from "prop-types";
-import r from "@mui/material/IconButton";
-import i from "@mui/icons-material/Delete";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import c from "debug";
-import l from "@mui/material/DialogContent";
-import u from "@mui/material/TextField";
-import d from "@mui/material/DialogActions";
-import f from "@mui/material/Button";
-import p from "@mui/material/Dialog";
-import m from "@mui/material/Tabs";
-import h from "@mui/material/Tab";
-import g from "@mui/material/DialogTitle";
-import _ from "@mui/material/DialogContentText";
-import v from "@mui/material/Typography";
-//#region src/components/media/MediaDialog.tsx
-var y = c("@pie-lib:editable-html:plugins:media:dialog"), b = (e) => {
-	if (!e) return !1;
-	let t = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
-	return e.match(t) ? e.match(t)[1] : !1;
-}, x = (e) => e && /(http|https)?:\/\/(www\.)?(player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(video\/)?(\d+)(?:|\/\?)/.test(e), S = (e) => e && /^https:\/\/drive\.google\.com\/(?:file\/d\/|drive\/(?:u\/\d+\/)?folders\/|uc\?id=)([a-zA-Z0-9_-]+)/.test(e), C = (e) => {
-	if (!e) return !1;
-	let t = /^https?:\/\/(soundcloud\.com|snd\.sc)\/(.*)$/;
-	return e.match(t) && e.match(t)[2];
-}, w = (e) => new Promise((t) => {
-	try {
-		fetch(`https://soundcloud.com/oembed?format=json&url=${e}`).then((e) => e.json()).then((e) => {
-			let n = document.createElement("div");
-			n.innerHTML = e.html, t(n.querySelector("iframe").src);
-		}).catch((e) => {
-			t(""), y(e);
-		});
-	} catch {
-		t("");
-	}
-}), T = {
-	video: "Video",
-	audio: "Audio"
-}, E = {
-	uploadFile: "upload-file",
-	insertUrl: "insert-url"
-}, D = t(p)(({ theme: e }) => ({ "& .MuiDialog-paper": { minWidth: "500px" } })), O = t(l)(({ theme: e }) => ({ padding: 0 })), k = t("div")(({ theme: e }) => ({
-	display: "flex",
-	flexDirection: "space-between"
-})), A = t("div")(({ theme: e }) => ({ marginTop: e.spacing(1.5) })), j = t("input")(({ theme: e }) => ({})), M = t(v)(({ theme: e }) => ({
-	marginTop: e.spacing(1.5),
-	color: e.palette.error.main
-})), N = t(r)(({ theme: e }) => ({ marginLeft: e.spacing(1.5) })), P = class extends e.Component {
-	static propTypes = {
-		open: n.bool,
-		edit: n.bool,
-		disablePortal: n.bool,
-		handleClose: n.func,
-		uploadSoundSupport: n.shape({
-			add: n.func,
-			delete: n.func
-		}),
-		type: n.string,
-		src: n.string,
-		url: n.string,
-		urlToUse: n.string,
-		starts: n.number,
-		ends: n.number,
-		height: n.number,
-		width: n.number
-	};
-	constructor(e) {
-		super(e);
-		let { ends: t, height: n, src: r, starts: i, type: a, uploadSoundSupport: o, url: s, urlToUse: c, width: l } = e, u = o?.add && o?.delete && a !== "video" && !r;
-		this.state = {
-			ends: t || 0,
-			url: s,
-			urlToUse: c,
-			formattedUrl: r,
-			height: n || 315,
-			invalid: !1,
-			starts: i || 0,
-			width: l || 560,
-			tabValue: u ? E.uploadFile : E.insertUrl,
-			fileUpload: {
-				error: null,
-				loading: !1,
-				scheduled: !1,
-				url: "",
-				mimeType: ""
-			}
-		};
-	}
-	componentDidMount() {
-		this.props.url && this.urlChange({ target: { value: this.props.url } });
-	}
-	formatUrl = () => {
-		let { url: e, urlToUse: t, starts: n, ends: r } = this.state, i = b(e), a = x(e), o = t;
-		if ((i || a) && t) {
-			let e = [], s, c;
-			switch (!0) {
-				case a:
-					s = "t", c = "#";
-					break;
-				case i:
-					s = "start", c = "?";
-					break;
-				default: s = "start", c = "?";
-			}
-			n && e.push(`${s}=${n}`), r && e.push(`end=${r}`), o = `${t}${e.length ? c : ""}${e.join("&")}`;
-		}
-		this.setState({
-			formattedUrl: null,
-			updating: !0
-		}, () => this.setState({
-			formattedUrl: o,
-			updating: !1
-		}));
-	};
-	handleStateChange = (e) => this.setState(e, this.formatUrl);
-	checkAudio = (e) => {
-		C(e) && w(e).then((t) => {
-			this.handleStateChange({
-				urlToUse: t,
-				invalid: !t,
-				url: e
-			});
-		}).catch(y);
-	};
-	checkVideo = (e) => {
-		if (b(e)) {
-			let t = `https://youtube.com/embed/${e.match(/^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/)[2]}`;
-			y("is youtube"), this.handleStateChange({
-				urlToUse: t,
-				url: e,
-				invalid: !1
-			});
-		}
-		if (x(e)) {
-			let t = `https://player.vimeo.com/video/${e.replace(/.*vimeo.com\/(.*)/g, "$1")}`;
-			y("is vimeo"), this.handleStateChange({
-				urlToUse: t,
-				url: e,
-				ends: null,
-				invalid: !1
-			});
-		}
-		if (S(e)) {
-			let t = `https://drive.google.com/file/d/${e.replace(/^https:\/\/drive\.google\.com\/(?:file\/d\/|drive\/(?:u\/\d+\/)?folders\/|uc\?id=)([a-zA-Z0-9_-]+)\/.*/, "$1")}/preview`;
-			y("is google drive"), this.handleStateChange({
-				urlToUse: t,
-				url: e,
-				ends: null,
-				invalid: !1
-			});
-		}
-	};
-	urlChange = (e) => {
-		let { value: t } = e.target || {}, { type: n } = this.props;
-		if (n && n === "audio") {
-			this.checkAudio(t);
-			return;
-		} else if (n && n === "video") {
-			this.checkVideo(t);
-			return;
-		}
-		this.handleStateChange({
-			urlToUse: null,
-			url: null,
-			invalid: !0
-		});
-	};
-	changeHandler = (e) => (t) => this.handleStateChange({ [e]: t.target.value });
-	handleDone = (e) => {
-		let { handleClose: t } = this.props, { tabValue: n, fileUpload: r } = this.state, i = n === E.insertUrl;
-		if (!e) {
-			r.url && this.handleRemoveFile(), t(e);
-			return;
-		}
-		if (i) {
-			let { ends: n, height: r, url: i, urlToUse: a, formattedUrl: o, starts: s, width: c } = this.state;
-			t(e, {
-				tag: "iframe",
-				ends: n,
-				height: r,
-				starts: s,
-				width: c,
-				url: i,
-				urlToUse: a,
-				src: o
-			});
-			return;
-		}
-		if (!r.loading) {
-			t(e, {
-				tag: "audio",
-				src: r.url
-			});
-			return;
-		}
-		this.setState({ fileUpload: {
-			...r,
-			scheduled: !0
-		} });
-	};
-	handleUploadFile = async (e) => {
-		e.preventDefault(), this.setState({ fileUpload: {
-			...this.state.fileUpload,
-			error: null,
-			loading: !0
-		} });
-		let t = e.target.files[0], n = new FileReader();
-		n.onload = () => {
-			let e = n.result;
-			this.setState({ fileUpload: {
-				...this.state.fileUpload,
-				url: e,
-				mimeType: t.type
-			} });
-		}, n.readAsDataURL(t), this.props.uploadSoundSupport.add({
-			fileChosen: t,
-			done: (e, t) => {
-				if (y("done: err:", e), e) {
-					console.log(e), this.setState({ fileUpload: {
-						...this.state.fileUpload,
-						scheduled: !1,
-						loading: !1,
-						error: e
-					} });
-					return;
-				}
-				let { fileUpload: n } = this.state, r = n && n.scheduled ? this.handleDone.bind(this, !0) : void 0;
-				this.setState({ fileUpload: {
-					...n,
-					scheduled: !1,
-					loading: !1,
-					url: t
-				} }, r);
-			}
-		});
-	};
-	handleRemoveFile = async () => {
-		this.props.uploadSoundSupport.delete(this.state.fileUpload.url, (e) => {
-			e && (console.log(e), this.setState({ fileUpload: {
-				...this.state.fileUpload,
-				error: e
-			} }));
-		}), this.setState({ fileUpload: {
-			...this.state.fileUpload,
-			loading: !1,
-			url: "",
-			mimeType: ""
-		} });
-	};
-	render() {
-		let { open: t, disablePortal: n, type: r, edit: c, uploadSoundSupport: p } = this.props, { ends: y, height: x, invalid: S, starts: C, width: w, url: P, mimeType: F, formattedUrl: I, updating: L, tabValue: R, fileUpload: z } = this.state, B = b(P), V = R === E.insertUrl, H = R === E.uploadFile, U = V ? S || P == null : !z.url || z.scheduled, W = p?.add && p?.delete && r !== "video";
-		return /* @__PURE__ */ s(D, {
-			disablePortal: n,
-			open: t,
-			onClose: () => this.handleDone(!1),
-			"aria-labelledby": "form-dialog-title",
-			children: [
-				/* @__PURE__ */ s(g, {
-					id: "form-dialog-title",
-					children: ["Insert ", T[r]]
-				}),
-				/* @__PURE__ */ o(l, { children: /* @__PURE__ */ s("div", { children: [
-					/* @__PURE__ */ o(k, { children: /* @__PURE__ */ s(m, {
-						indicatorColor: "primary",
-						value: R,
-						onChange: (e, t) => {
-							this.setState({ tabValue: t });
-						},
-						children: [W ? /* @__PURE__ */ o(h, {
-							value: E.uploadFile,
-							label: "Upload file"
-						}) : null, /* @__PURE__ */ o(h, {
-							value: E.insertUrl,
-							label: r === "video" ? "Insert YouTube, Vimeo, or Google Drive URL" : "Insert SoundCloud URL"
-						})]
-					}) }),
-					V && /* @__PURE__ */ s("div", { children: [
-						/* @__PURE__ */ o(u, {
-							autoFocus: !0,
-							error: S,
-							helperText: S ? "Invalid URL" : "",
-							margin: "dense",
-							id: "name",
-							label: "URL",
-							placeholder: `Paste URL of ${r}...`,
-							type: "text",
-							onChange: this.urlChange,
-							value: P,
-							fullWidth: !0
-						}),
-						r === "video" && /* @__PURE__ */ s(O, { children: [
-							/* @__PURE__ */ o(_, { children: "Video Properties" }),
-							/* @__PURE__ */ o(u, {
-								autoFocus: !0,
-								margin: "dense",
-								id: "width",
-								label: "Width",
-								type: "number",
-								placeholder: "Width",
-								value: w,
-								onChange: this.changeHandler("width")
-							}),
-							/* @__PURE__ */ o(u, {
-								autoFocus: !0,
-								margin: "dense",
-								id: "height",
-								label: "Height",
-								type: "number",
-								placeholder: "Height",
-								value: x,
-								onChange: this.changeHandler("height")
-							})
-						] }),
-						I && /* @__PURE__ */ o("iframe", {
-							width: w,
-							height: x,
-							src: I,
-							frameBorder: "0",
-							allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-							allowFullScreen: !0
-						}),
-						r === "video" && (I || L) && !S && /* @__PURE__ */ o(e.Fragment, { children: /* @__PURE__ */ s(O, { children: [/* @__PURE__ */ o(u, {
-							autoFocus: !0,
-							margin: "dense",
-							id: "starts",
-							label: "Starts",
-							type: "number",
-							placeholder: "Starts",
-							value: C,
-							onChange: this.changeHandler("starts")
-						}), B && /* @__PURE__ */ o(u, {
-							autoFocus: !0,
-							margin: "dense",
-							id: "ends",
-							label: "Ends",
-							type: "number",
-							placeholder: "Ends",
-							value: y,
-							onChange: this.changeHandler("ends")
-						})] }) })
-					] }),
-					H && /* @__PURE__ */ o(A, { children: /* @__PURE__ */ s("div", { children: [z.url ? /* @__PURE__ */ s(a, { children: [
-						/* @__PURE__ */ s(k, { children: [/* @__PURE__ */ o("audio", {
-							controls: "controls",
-							controlsList: "nodownload",
-							children: /* @__PURE__ */ o("source", {
-								type: F,
-								src: z.url
-							})
-						}), /* @__PURE__ */ o(N, {
-							"aria-label": "delete",
-							onClick: this.handleRemoveFile,
-							children: /* @__PURE__ */ o(i, {})
-						})] }),
-						!z.scheduled && z.loading ? /* @__PURE__ */ o(v, {
-							variant: "subheading",
-							children: "Loading..."
-						}) : null,
-						z.scheduled ? /* @__PURE__ */ o(v, {
-							variant: "subheading",
-							children: "Waiting for Upload to finish, then inserting item..."
-						}) : null
-					] }) : z.loading ? null : /* @__PURE__ */ o(j, {
-						accept: "audio/*",
-						onChange: this.handleUploadFile,
-						type: "file"
-					}), !!z.error && /* @__PURE__ */ o(M, {
-						variant: "caption",
-						children: z.error
-					})] }) })
-				] }) }),
-				/* @__PURE__ */ s(d, { children: [/* @__PURE__ */ o(f, {
-					onClick: () => this.handleDone(!1),
-					color: "primary",
-					children: "Cancel"
-				}), /* @__PURE__ */ o(f, {
-					disabled: U,
-					onClick: () => this.handleDone(!0),
-					color: "primary",
-					children: c ? "Update" : "Insert"
-				})] })
-			]
-		});
-	}
-};
-//#endregion
-export { P as default };

package/dist/components/media/MediaToolbar.d.ts

@@ -1,19 +0,0 @@
-/**
- * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/media/MediaToolbar.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 MediaToolbar extends React.Component {
-    static propTypes: {
-        onEdit: PropTypes.Requireable<(...args: any[]) => any>;
-        hideEdit: PropTypes.Requireable<boolean>;
-        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    render(): React.JSX.Element;
-}
-export default MediaToolbar;

package/dist/components/media/MediaToolbar.js

@@ -1,41 +0,0 @@
-import e from "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";
-//#region src/components/media/MediaToolbar.tsx
-var a = t("span")(({ theme: e }) => ({
-	position: "relative",
-	bottom: "5px",
-	left: 0,
-	width: "100%",
-	background: e.palette.common.white,
-	display: "inline-flex",
-	padding: "5px",
-	boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
-})), o = t("span")(({ theme: e }) => ({
-	cursor: "pointer",
-	flex: 3,
-	border: `solid ${e.palette.common.black}`,
-	textAlign: "right",
-	borderWidth: "0 2px 0 0",
-	marginRight: "5px",
-	paddingRight: "5px"
-})), s = t("span")({ cursor: "pointer" }), c = class extends e.Component {
-	static propTypes = {
-		onEdit: n.func,
-		hideEdit: n.bool,
-		onRemove: n.func
-	};
-	render() {
-		let { hideEdit: e, onEdit: t, onRemove: n } = this.props;
-		return /* @__PURE__ */ i(a, { children: [e ? null : /* @__PURE__ */ r(o, {
-			onClick: t,
-			children: "Edit Settings"
-		}), /* @__PURE__ */ r(s, {
-			onClick: n,
-			children: "Remove"
-		})] });
-	}
-};
-//#endregion
-export { c as default };

package/dist/components/media/MediaWrapper.d.ts

@@ -1,19 +0,0 @@
-/**
- * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/media/MediaWrapper.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 MediaWrapper extends React.Component {
-    static propTypes: {
-        children: PropTypes.Requireable<any[]>;
-        editor: PropTypes.Requireable<boolean>;
-        width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-    };
-    render(): React.JSX.Element;
-}
-export default MediaWrapper;

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

@@ -1,23 +0,0 @@
-/**
- * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/DragInTheBlank/DragInTheBlank.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 onValueChange: (editor: any, node: any, pos: any, choice: any) => void;
-export declare const onRemoveResponse: (editor: any, node: any, choice: any) => void;
-declare const DragDrop: {
-    (props: any): React.JSX.Element;
-    propTypes: {
-        attributes: PropTypes.Requireable<object>;
-        data: PropTypes.Requireable<object>;
-        n: PropTypes.Requireable<object>;
-        nodeProps: PropTypes.Requireable<object>;
-        opts: PropTypes.Requireable<object>;
-    };
-};
-export default DragDrop;

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

@@ -1,58 +0,0 @@
-import e from "./choice.js";
-import "react";
-import { omit as t } from "@pie-element/shared-lodash";
-import { NodeViewWrapper as n } from "@tiptap/react";
-import r from "prop-types";
-import { jsx as i } from "react/jsx-runtime";
-//#region src/components/respArea/DragInTheBlank/DragInTheBlank.tsx
-var a = (e, t, n, r) => {
-	let { tr: i } = e.state;
-	i.setNodeMarkup(n, void 0, {
-		...t.attrs,
-		...r.value
-	}), i.isDone = !0, e.view.dispatch(i);
-}, o = (e, n, r) => {
-	let { tr: i } = e.state;
-	i.setNodeMarkup(r.pos, void 0, t(n.attrs, ["value", "id"])), i.isDone = !0, e.view.dispatch(i);
-}, s = (t) => {
-	let { editor: r, node: s, getPos: c, options: l, selected: u } = t, { attrs: d } = s, { inTable: f } = d, p = c();
-	return /* @__PURE__ */ i(n, {
-		className: "drag-in-the-blank",
-		"data-selected": u,
-		style: {
-			display: "inline",
-			whiteSpace: "normal"
-		},
-		children: /* @__PURE__ */ i("span", {
-			...d,
-			style: {
-				display: "inline-flex",
-				minHeight: "50px",
-				minWidth: "178px",
-				position: "relative",
-				margin: f ? "10px" : "0 10px",
-				cursor: "pointer"
-			},
-			children: /* @__PURE__ */ i(e, {
-				n: d,
-				dragKey: d.id,
-				targetId: "0",
-				pos: p,
-				value: d,
-				duplicates: l.duplicates,
-				selected: u,
-				onChange: (e) => a(r, s, p, e),
-				removeResponse: (e) => o(r, s, e)
-			})
-		})
-	});
-};
-s.propTypes = {
-	attributes: r.object,
-	data: r.object,
-	n: r.object,
-	nodeProps: r.object,
-	opts: r.object
-};
-//#endregion
-export { s as default };

package/dist/components/respArea/DragInTheBlank/choice.d.ts

@@ -1,56 +0,0 @@
-/**
- * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/DragInTheBlank/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 function BlankContent({ n, children, isDragging, isOver, dragItem, value, selected }: {
-    n: any;
-    children: any;
-    isDragging: any;
-    isOver: any;
-    dragItem: any;
-    value: any;
-    selected: any;
-}): React.JSX.Element;
-export declare namespace BlankContent {
-    var propTypes: {
-        n: PropTypes.Requireable<object>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        isDragging: PropTypes.Requireable<boolean>;
-        isOver: PropTypes.Requireable<boolean>;
-        dragItem: PropTypes.Requireable<object>;
-        value: PropTypes.Requireable<object>;
-        selected: PropTypes.Requireable<boolean>;
-    };
-}
-declare function DragDropChoice({ value, disabled, instanceId, children, n, onChange, removeResponse, duplicates, pos, selected, }: {
-    value: any;
-    disabled: any;
-    instanceId: any;
-    children: any;
-    n: any;
-    onChange: any;
-    removeResponse: any;
-    duplicates: any;
-    pos: any;
-    selected: any;
-}): React.JSX.Element;
-declare namespace DragDropChoice {
-    var propTypes: {
-        value: PropTypes.Requireable<object>;
-        disabled: PropTypes.Requireable<boolean>;
-        instanceId: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        n: PropTypes.Validator<object>;
-        onChange: PropTypes.Validator<(...args: any[]) => any>;
-        removeResponse: PropTypes.Validator<(...args: any[]) => any>;
-        duplicates: PropTypes.Requireable<boolean>;
-        selected: PropTypes.Requireable<boolean>;
-    };
-}
-export default DragDropChoice;