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

package/dist/extensions/css.js

@@ -0,0 +1,120 @@
+import "react";
+import { Mark as e, mergeAttributes as t } from "@tiptap/core";
+import n from "react-dom";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "@mui/material/List";
+import o from "@mui/material/ListItem";
+//#region src/extensions/css.tsx
+var s = () => {
+	document.querySelectorAll(".insert-css-dialog").forEach((e) => e.remove());
+}, c = ({ editor: e, callback: t, opts: c, selectedText: l, parentNode: u }) => {
+	let d = e.options.element, f = document.createElement("div"), { selection: p } = e.state;
+	s(), f.className = "insert-css-dialog";
+	let m = !1, h = (e) => {
+		if (m) {
+			let t = f.contains(e.target) || void 0, n = d.contains(e.target);
+			t || n || g();
+		} else m = !0;
+	}, g = () => {
+		t(void 0, !0), f.remove(), document.body.removeEventListener("click", h);
+	}, _ = (e) => {
+		t(e, !0), f.remove(), document.body.removeEventListener("click", h);
+	}, v = u?.attrs.class, y = (e) => {
+		let t = `<span class="${e}">${l}</span>`;
+		if (u) {
+			let e = "span";
+			u?.object === "inline" && (e = "span"), u?.object === "block" && (e = "div"), t = `<${e} class="${v}">${u.text.slice(0, p.$anchor.textOffset)}${t}${u.text.slice(p.$head.textOffset)}</${e}>`;
+		}
+		return t;
+	}, b = /* @__PURE__ */ i("div", {
+		style: {
+			background: "white",
+			height: 500,
+			padding: 20,
+			overflow: "hidden",
+			display: "flex",
+			flexFlow: "column"
+		},
+		children: [
+			/* @__PURE__ */ r("h2", { children: "Please choose a css class" }),
+			v && /* @__PURE__ */ i("div", { children: ["The current parent has this class ", v] }),
+			/* @__PURE__ */ r(a, {
+				component: "nav",
+				style: { overflow: "scroll" },
+				children: c.names.map((e, t) => /* @__PURE__ */ i(o, {
+					button: !0,
+					onClick: () => _(e),
+					children: [/* @__PURE__ */ r("div", {
+						style: { marginRight: 20 },
+						children: e
+					}), /* @__PURE__ */ r("div", { dangerouslySetInnerHTML: { __html: y(e) } })]
+				}, `rule-${t}`))
+			})
+		]
+	});
+	n.render(b, f, () => {
+		let t = e.view.nodeDOM(e.state.selection.from)?.parentNode;
+		if (t) {
+			let e = d.parentElement.parentElement.parentElement.getBoundingClientRect(), n = t.getBoundingClientRect();
+			d.parentElement.parentElement.parentElement.appendChild(f), f.style.maxWidth = "500px", f.style.position = "absolute", f.style.top = 0, f.style.zIndex = 99999;
+			let r = `${n.left + Math.abs(e.left) + t.offsetWidth + 10}px`, i = `${n.x}px`;
+			f.style.left = r;
+			let a = f.offsetWidth;
+			f.style.left = "unset", f.style.right = i;
+			let o = f.offsetWidth;
+			f.style.left = "unset", f.style.right = "unset", a >= o ? f.style.left = r : f.style.right = i, document.body.addEventListener("click", h);
+		}
+	});
+}, l = e.create({
+	name: "cssmark",
+	addOptions() {
+		return { classes: [] };
+	},
+	addAttributes() {
+		return { class: {
+			default: null,
+			parseHTML: (e) => e.getAttribute("class"),
+			renderHTML: (e) => e.class ? { class: e.class } : {}
+		} };
+	},
+	parseHTML() {
+		return [{
+			tag: "span[class]",
+			getAttrs: (e) => {
+				let t = e.getAttribute("class") || "";
+				if (!t) return !1;
+				if ((this.options && this.options.classes || []).length > 0) {
+					let e = this.options.classes.find((e) => t.includes(e));
+					return e ? { class: e } : !1;
+				}
+				return { class: t };
+			}
+		}];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return [
+			"span",
+			t(e),
+			0
+		];
+	},
+	addCommands() {
+		return {
+			setCSSClass: (e) => ({ commands: t }) => t.setMark(this.name, { class: e }),
+			unsetCSSClass: () => ({ commands: e }) => e.unsetMark(this.name),
+			openCSSClassDialog: () => ({ editor: e }) => {
+				c({
+					editor: e,
+					selectedText: e.state.doc.textBetween(e.state.selection.from, e.state.selection.to),
+					parentNode: e.state.selection.$from.nodeAfter,
+					opts: this.options.extraCSSRules,
+					callback: (t) => {
+						t && e.chain().focus().setCSSClass(t).run();
+					}
+				});
+			}
+		};
+	}
+});
+//#endregion
+export { l as CSSMark, s as removeDialogs };

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.
+ */
+import React from 'react';
+declare function CustomToolbarWrapper(props: any): React.JSX.Element;
+export default CustomToolbarWrapper;

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

@@ -0,0 +1,61 @@
+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 r from "@mui/material/IconButton";
+import i from "@mui/icons-material/Delete";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#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(r)({
+	width: "28px",
+	height: "28px",
+	padding: "4px",
+	verticalAlign: "top"
+}), l = n("div")({ display: "flex" });
+function u(n) {
+	let { children: r, deletable: u, toolbarOpts: d, autoWidth: f, isFocused: p, doneButtonRef: m, onDelete: h, showDone: g, onDone: _, style: v } = n, y = d.minWidth === void 0 ? {} : { minWidth: d.minWidth };
+	return /* @__PURE__ */ o(s, {
+		className: e,
+		showDone: g,
+		toolbarAlignment: d.alignment,
+		isFocused: d.alwaysVisible || p,
+		autoWidth: f,
+		isHidden: d.isHidden === !0,
+		style: {
+			...y,
+			...v
+		},
+		children: [r, /* @__PURE__ */ o(l, { children: [u && /* @__PURE__ */ a(c, {
+			"aria-label": "Delete",
+			onMouseDown: (e) => h?.(e),
+			children: /* @__PURE__ */ a(i, {})
+		}), g && /* @__PURE__ */ a(t, {
+			doneButtonRef: m,
+			onClick: _
+		})] })]
+	});
+}
+//#endregion
+export { u as default };

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

@@ -0,0 +1,10 @@
+/**
+ * @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>;

package/dist/extensions/div-node.js

@@ -0,0 +1,42 @@
+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() {
+		let e = (e) => {
+			for (let t = e.depth; t >= 0; --t) if (e.node(t).type.name === "listItem") return !0;
+			return !1;
+		};
+		return {
+			Enter: () => {
+				let { state: t } = this.editor, { $from: n } = t.selection;
+				return n.parent.type.name !== "div" || e(n) ? !1 : this.editor.chain().focus().setNode("paragraph").splitBlock().run();
+			},
+			Backspace: () => {
+				let { state: e } = this.editor, { $from: t, empty: n } = e.selection;
+				if (t.parent.type.name !== "div" || !n) return !1;
+				let r = t.parent.textContent;
+				if (r.length === 0) return e.doc.childCount === 1;
+				if (r.length === 1 && t.parentOffset === 1) {
+					let { tr: n } = e;
+					return n.delete(t.pos - 1, t.pos), this.editor.view.dispatch(n), !0;
+				}
+				return !1;
+			}
+		};
+	}
+});
+//#endregion
+export { t as DivNode };

package/dist/extensions/ensure-empty-root-div.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/ensure-empty-root-div.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 { Extension } from '@tiptap/core';
+/**
+ * After ProseMirror repairs an empty document, it often inserts a `paragraph`.
+ * We want a lone empty top-level block to be `div` (DivNode) so typing stays `<div>A</div>`.
+ */
+export declare const EnsureEmptyRootIsDiv: Extension<any, any>;

package/dist/extensions/ensure-empty-root-div.js

@@ -0,0 +1,24 @@
+import { Extension as e } from "@tiptap/core";
+import { Plugin as t, PluginKey as n } from "@tiptap/pm/state";
+//#region src/extensions/ensure-empty-root-div.tsx
+var r = e.create({
+	name: "ensureEmptyRootIsDiv",
+	addProseMirrorPlugins() {
+		return [new t({
+			key: new n(this.name),
+			appendTransaction(e, t, n) {
+				if (!e.some((e) => e.docChanged)) return null;
+				let { doc: r } = n;
+				if (r.childCount !== 1) return null;
+				let i = r.firstChild;
+				if (i.type.name !== "paragraph" || i.content.size > 0) return null;
+				let a = n.schema.nodes.div;
+				if (!a) return null;
+				let o = i.nodeSize;
+				return n.tr.replaceWith(0, o, a.create());
+			}
+		})];
+	}
+});
+//#endregion
+export { r as EnsureEmptyRootIsDiv };

package/dist/extensions/ensure-list-item-content-is-div.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/ensure-list-item-content-is-div.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 { Extension } from '@tiptap/core';
+/**
+ * Some list operations preserve/create `paragraph` children in `listItem`.
+ * Normalize direct `listItem > paragraph` children into `div` so list content
+ * stays consistent with DivNode-based editing.
+ */
+export declare const EnsureListItemContentIsDiv: Extension<any, any>;

package/dist/extensions/ensure-list-item-content-is-div.js

@@ -0,0 +1,31 @@
+import { Extension as e } from "@tiptap/core";
+import { Plugin as t, PluginKey as n } from "@tiptap/pm/state";
+//#region src/extensions/ensure-list-item-content-is-div.ts
+var r = e.create({
+	name: "ensureListItemContentIsDiv",
+	addProseMirrorPlugins() {
+		return [new t({
+			key: new n(this.name),
+			appendTransaction(e, t, n) {
+				if (!e.some((e) => e.docChanged)) return null;
+				let { doc: r, schema: i } = n, a = i.nodes.div;
+				if (!a) return null;
+				let o = [];
+				if (r.descendants((e, t) => {
+					if (e.type.name !== "listItem") return;
+					let n = 1;
+					e.forEach((e) => {
+						e.type.name === "paragraph" && o.push({
+							pos: t + n,
+							attrs: e.attrs
+						}), n += e.nodeSize;
+					});
+				}), o.length === 0) return null;
+				let s = n.tr;
+				return o.sort((e, t) => t.pos - e.pos).forEach(({ pos: e, attrs: t }) => s.setNodeMarkup(e, a, t)), s;
+			}
+		})];
+	}
+});
+//#endregion
+export { r as EnsureListItemContentIsDiv };

package/dist/extensions/extended-list-item.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/extended-list-item.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.
+ */
+/**
+ * Default list items use `paragraph block*`, so empty/new items become `<p>`.
+ * Prefer `div` first to keep consistency with DivNode at root and table cells.
+ */
+export declare const ExtendedListItem: import("@tiptap/core").Node<import("@tiptap/extension-list").ListItemOptions, any>;

package/dist/extensions/extended-list-item.js

@@ -0,0 +1,5 @@
+import { ListItem as e } from "@tiptap/extension-list-item";
+//#region src/extensions/extended-list-item.tsx
+var t = e.extend({ content: "(div | paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule | image | imageUploadNode)+" });
+//#endregion
+export { t as ExtendedListItem };

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

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/extended-table-cell.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 ExtendedTableCell: import("@tiptap/core").Node<import("@tiptap/extension-table").TableCellOptions, any>;
+export declare const ExtendedTableHeader: import("@tiptap/core").Node<import("@tiptap/extension-table").TableHeaderOptions, any>;

package/dist/extensions/extended-table-cell.js

@@ -0,0 +1,6 @@
+import { TableCell as e } from "@tiptap/extension-table-cell";
+import { TableHeader as t } from "@tiptap/extension-table-header";
+//#region src/extensions/extended-table-cell.ts
+var n = "(div | paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule | image | imageUploadNode)+", r = e.extend({ content: n }), i = t.extend({ content: n });
+//#endregion
+export { r as ExtendedTableCell, i as ExtendedTableHeader };

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

@@ -0,0 +1,17 @@
+/**
+ * @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.
+ */
+import { TableView } from '@tiptap/extension-table';
+declare const applyPresentationToTableElement: (table: any, attrs: any) => void;
+declare class ExtendedTableView extends TableView {
+    constructor(node: any, cellMinWidth: any, view: any);
+    update(node: any): boolean;
+}
+declare const ExtendedTable: import("@tiptap/core").Node<import("@tiptap/extension-table").TableOptions, any>;
+export { applyPresentationToTableElement, ExtendedTableView };
+export default ExtendedTable;

package/dist/extensions/extended-table.js

@@ -0,0 +1,34 @@
+import { Table as e, TableView as t } from "@tiptap/extension-table";
+//#region src/extensions/extended-table.tsx
+var n = (e, t) => {
+	let n = t?.border != null && t.border !== "" ? t.border : "1";
+	e.setAttribute("border", n), e.style.setProperty("color", "var(--pie-text, black)"), e.style.setProperty("background-color", "var(--pie-background, rgba(255, 255, 255))");
+}, r = class extends t {
+	constructor(e, t, r) {
+		super(e, t, r), n(this.table, e.attrs);
+	}
+	update(e) {
+		let t = super.update(e);
+		return t && n(this.table, e.attrs), t;
+	}
+}, i = e.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			resizable: !0,
+			handleWidth: 0,
+			View: r
+		};
+	},
+	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 { r as ExtendedTableView, n as applyPresentationToTableElement, i as default };

package/dist/extensions/heading-paragraph.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/heading-paragraph.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';
+/**
+ * HeadingParagraph extension
+ *
+ * Renders as <p data-heading="heading1"> in the HTML output instead of <h3>.
+ * This provides semantic heading styling without using a native heading element,
+ * as required by PIE's accessibility conventions.
+ */
+export declare const HeadingParagraph: Node<any, any>;

package/dist/extensions/heading-paragraph.js

@@ -0,0 +1,30 @@
+import { Node as e, mergeAttributes as t } from "@tiptap/core";
+//#region src/extensions/heading-paragraph.tsx
+var n = e.create({
+	name: "headingParagraph",
+	group: "block",
+	content: "inline*",
+	defining: !0,
+	addAttributes() {
+		return { "data-heading": {
+			default: "heading1",
+			parseHTML: (e) => e.getAttribute("data-heading"),
+			renderHTML: (e) => ({ "data-heading": e["data-heading"] })
+		} };
+	},
+	parseHTML() {
+		return [{ tag: "p[data-heading]" }];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return [
+			"p",
+			t(e),
+			0
+		];
+	},
+	addCommands() {
+		return { toggleHeadingParagraph: () => ({ commands: e, editor: t }) => t.isActive("headingParagraph") ? e.setNode("paragraph") : e.setNode("headingParagraph", { "data-heading": "heading1" }) };
+	}
+});
+//#endregion
+export { n as HeadingParagraph };

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 React from 'react';
+import PropTypes from 'prop-types';
+declare function ImageComponent(props: any): React.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;