@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/fields/rich-text-editor/presets.mjs

@@ -0,0 +1,123 @@
+//#region src/client/components/fields/rich-text-editor/presets.ts
+/**
+* MINIMAL - Only bubble menu with basic formatting
+*
+* Use case: Inline editing, comments, simple text fields
+* Features: Bold, Italic, Underline, Link
+* UI: No toolbar, only bubble menu on selection
+*/
+const PRESET_MINIMAL = {
+	toolbar: false,
+	bubbleMenu: true,
+	slashCommands: false,
+	history: true,
+	heading: false,
+	bold: true,
+	italic: true,
+	underline: true,
+	strike: false,
+	code: false,
+	codeBlock: false,
+	blockquote: false,
+	bulletList: false,
+	orderedList: false,
+	horizontalRule: false,
+	align: false,
+	link: true,
+	image: false,
+	table: false,
+	tableControls: false,
+	characterCount: false
+};
+/**
+* SIMPLE - Basic rich text without media
+*
+* Use case: Blog posts, articles, descriptions
+* Features: Headings, formatting, lists, quotes, links
+* UI: Compact toolbar with essential controls
+*/
+const PRESET_SIMPLE = {
+	toolbar: true,
+	bubbleMenu: true,
+	slashCommands: true,
+	history: true,
+	heading: true,
+	bold: true,
+	italic: true,
+	underline: true,
+	strike: true,
+	code: true,
+	codeBlock: false,
+	blockquote: true,
+	bulletList: true,
+	orderedList: true,
+	horizontalRule: true,
+	align: false,
+	link: true,
+	image: false,
+	table: false,
+	tableControls: false,
+	characterCount: true
+};
+/**
+* STANDARD - Full-featured editor (default)
+*
+* Use case: General-purpose content editing
+* Features: All formatting, alignment, images, basic tables
+* UI: Full toolbar with all standard controls
+*/
+const PRESET_STANDARD = {
+	toolbar: true,
+	bubbleMenu: true,
+	slashCommands: true,
+	history: true,
+	heading: true,
+	bold: true,
+	italic: true,
+	underline: true,
+	strike: true,
+	code: true,
+	codeBlock: true,
+	blockquote: true,
+	bulletList: true,
+	orderedList: true,
+	horizontalRule: true,
+	align: true,
+	link: true,
+	image: true,
+	table: true,
+	tableControls: true,
+	characterCount: true
+};
+/**
+* ADVANCED - Everything including advanced features
+*
+* Use case: Documentation, technical writing, complex layouts
+* Features: Everything in standard + advanced table controls
+* UI: Full toolbar with all advanced controls
+*/
+const PRESET_ADVANCED = { ...PRESET_STANDARD };
+/**
+* Get preset configuration by name
+*/
+function getPreset(preset) {
+	switch (preset) {
+		case "minimal": return PRESET_MINIMAL;
+		case "simple": return PRESET_SIMPLE;
+		case "standard": return PRESET_STANDARD;
+		case "advanced": return PRESET_ADVANCED;
+		default: return PRESET_STANDARD;
+	}
+}
+/**
+* Merge preset with custom feature overrides
+*/
+function mergePresetFeatures(preset, overrides) {
+	return {
+		...getPreset(preset),
+		...overrides
+	};
+}
+
+//#endregion
+export { mergePresetFeatures };

package/dist/client/components/fields/rich-text-editor/slash-commands.mjs

@@ -0,0 +1,188 @@
+import { cn } from "../../../lib/utils.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ReactRenderer } from "@tiptap/react";
+import { Extension } from "@tiptap/core";
+import Suggestion from "@tiptap/suggestion";
+import tippy from "tippy.js";
+
+//#region src/client/components/fields/rich-text-editor/slash-commands.tsx
+/**
+* Slash Commands Component
+*
+* Provides the "/" command menu for quick insertion of blocks.
+*/
+/**
+* Slash command list component
+*/
+const SlashCommandList = React.forwardRef(function SlashCommandList$1(t0, ref) {
+	const $ = c(19);
+	const { items, command } = t0;
+	const [selectedIndex, setSelectedIndex] = React.useState(0);
+	const safeIndex = Math.min(selectedIndex, Math.max(0, items.length - 1));
+	let t1;
+	if ($[0] !== command || $[1] !== items) {
+		t1 = (index) => {
+			const item = items[index];
+			if (item) command(item);
+		};
+		$[0] = command;
+		$[1] = items;
+		$[2] = t1;
+	} else t1 = $[2];
+	const selectItem = t1;
+	let t2;
+	if ($[3] !== items.length || $[4] !== safeIndex || $[5] !== selectItem) {
+		t2 = () => ({ onKeyDown: (t3$1) => {
+			const { event } = t3$1;
+			if (items.length === 0) return false;
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				setSelectedIndex((prev) => (prev + 1) % items.length);
+				return true;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setSelectedIndex((prev_0) => (prev_0 - 1 + items.length) % items.length);
+				return true;
+			}
+			if (event.key === "Enter") {
+				event.preventDefault();
+				selectItem(safeIndex);
+				return true;
+			}
+			return false;
+		} });
+		$[3] = items.length;
+		$[4] = safeIndex;
+		$[5] = selectItem;
+		$[6] = t2;
+	} else t2 = $[6];
+	React.useImperativeHandle(ref, t2);
+	let t3;
+	if ($[7] !== items.length) {
+		t3 = items.length === 0 && /* @__PURE__ */ jsx("div", {
+			className: "qp-rich-text-editor__slash-empty",
+			children: "No results"
+		});
+		$[7] = items.length;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== items || $[10] !== safeIndex || $[11] !== selectItem) {
+		let t5$1;
+		if ($[13] !== safeIndex || $[14] !== selectItem) {
+			t5$1 = (item_0, index_0) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				tabIndex: -1,
+				className: cn("qp-rich-text-editor__slash-item", index_0 === safeIndex ? "qp-rich-text-editor__slash-item--active" : ""),
+				onMouseDown: _temp,
+				onClick: () => selectItem(index_0),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "qp-rich-text-editor__slash-title",
+					children: item_0.title
+				}), item_0.description && /* @__PURE__ */ jsx("span", {
+					className: "qp-rich-text-editor__slash-description",
+					children: item_0.description
+				})]
+			}, item_0.title);
+			$[13] = safeIndex;
+			$[14] = selectItem;
+			$[15] = t5$1;
+		} else t5$1 = $[15];
+		t4 = items.map(t5$1);
+		$[9] = items;
+		$[10] = safeIndex;
+		$[11] = selectItem;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[16] !== t3 || $[17] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "qp-rich-text-editor__slash",
+			children: [t3, t4]
+		});
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	return t5;
+});
+/**
+* Create slash command extension factory
+*/
+function createSlashCommandExtension(getItems) {
+	return Extension.create({
+		name: "slashCommand",
+		addOptions() {
+			return { suggestion: {
+				char: "/",
+				startOfLine: true,
+				command: ({ editor, range, props }) => {
+					editor.chain().focus().deleteRange(range).run();
+					props.command(editor);
+				},
+				items: ({ query, editor }) => {
+					const items = getItems(editor);
+					if (!query) return items;
+					const search = query.toLowerCase();
+					return items.filter((item) => {
+						return item.title.toLowerCase().includes(search) || item.description?.toLowerCase().includes(search) || item.keywords?.some((keyword) => keyword.toLowerCase().includes(search));
+					});
+				},
+				render: () => {
+					let component = null;
+					let popup = null;
+					return {
+						onStart: (props) => {
+							component = new ReactRenderer(SlashCommandList, {
+								props,
+								editor: props.editor
+							});
+							if (!props.clientRect) return;
+							popup = tippy("body", {
+								getReferenceClientRect: props.clientRect,
+								appendTo: () => document.body,
+								content: component.element,
+								showOnCreate: true,
+								interactive: true,
+								trigger: "manual",
+								placement: "bottom-start",
+								theme: "qp-rich-text-editor"
+							});
+						},
+						onUpdate: (props) => {
+							component?.updateProps(props);
+							if (!props.clientRect) return;
+							popup?.[0].setProps({ getReferenceClientRect: props.clientRect });
+						},
+						onKeyDown: (props) => {
+							if (props.event.key === "Escape") {
+								popup?.[0].hide();
+								return true;
+							}
+							return component?.ref?.onKeyDown(props) ?? false;
+						},
+						onExit: () => {
+							popup?.[0].destroy();
+							component?.destroy();
+						}
+					};
+				}
+			} };
+		},
+		addProseMirrorPlugins() {
+			return [Suggestion({
+				editor: this.editor,
+				...this.options.suggestion
+			})];
+		}
+	});
+}
+function _temp(event_0) {
+	return event_0.preventDefault();
+}
+
+//#endregion
+export { createSlashCommandExtension };