@pie-element/simple-cloze 0.1.4-next.7 → 0.1.4-next.9

package/dist/author/index.d.ts

@@ -2,15 +2,17 @@ declare const SvelteElementClass: any;
 declare class SimpleClozeAuthor extends SvelteElementClass {
     private _model;
     private _onChange;
+    onModelChange: (update: any) => void;
+    /**
+     * The component reports each edit through its `onModelChange` prop, assigned
+     * here through the accessor Svelte generates for it. The host keeps the
+     * edited model, renders from it, and announces it as `model.updated`, which
+     * bubbles to the listener an authoring player registers at its root.
+     */
+    constructor();
     set model(m: any);
     get model(): any;
     set onChange(fn: (model: any) => void);
     get onChange(): (model: any) => void;
-    /**
-     * The component reports each edit here. The host keeps the edited model,
-     * renders from it, and announces it as `model.updated`, which bubbles to
-     * the listener an authoring player registers at its root.
-     */
-    onModelChange: (update: any) => void;
 }
 export default SimpleClozeAuthor;

package/dist/author/index.js

@@ -1,10 +1,10 @@
 //#region ../../shared/configure-events/dist/index.js
-var _e$1;
-var _e2$1;
+var _e;
+var _e2;
 var _e3;
 var _e4;
 var _e5;
-var e = (_e$1 = class e extends CustomEvent {
+var e = (_e = class e extends CustomEvent {
 	constructor(t, n = !1) {
 		super(e.TYPE, {
 			bubbles: !0,
@@ -14,8 +14,8 @@ var e = (_e$1 = class e extends CustomEvent {
 			}
 		}), this.update = t, this.reset = n;
 	}
-}, _e$1.TYPE = "model.updated", _e$1);
-_e2$1 = class e extends CustomEvent {
+}, _e.TYPE = "model.updated", _e);
+_e2 = class e extends CustomEvent {
 	constructor(t, n) {
 		super(e.TYPE, {
 			bubbles: !0,
@@ -25,7 +25,7 @@ _e2$1 = class e extends CustomEvent {
 			}
 		}), this.src = t, this.done = n;
 	}
-}, _e2$1.TYPE = "delete.image";
+}, _e2.TYPE = "delete.image";
 _e3 = class e extends CustomEvent {
 	constructor(t) {
 		super(e.TYPE, {
@@ -4795,54 +4795,6 @@ function create_custom_element(Component, props_definition, slots, exports, shad
 	return Class;
 }
 //#endregion
-//#region ../../shared/player-events/dist/index.js
-var _e;
-var _e2;
-_e = class e extends CustomEvent {
-	constructor(t, n, r) {
-		super(e.TYPE, {
-			bubbles: !0,
-			composed: !0,
-			detail: {
-				complete: n,
-				component: t,
-				hasModel: r
-			}
-		}), this.component = t, this.complete = n;
-	}
-}, _e.TYPE = "model-set";
-_e2 = class e extends CustomEvent {
-	constructor(t, n) {
-		super(e.TYPE, {
-			bubbles: !0,
-			composed: !0,
-			detail: {
-				complete: n,
-				component: t
-			}
-		}), this.component = t, this.complete = n;
-	}
-}, _e2.TYPE = "session-changed";
-//#endregion
-//#region ../../lib-svelte/delivery-events/dist/index2.js
-var t = (e) => {
-	let t = e;
-	return t ? typeof t.onSessionChange == "function" || typeof t.onAudioStarted == "function" || typeof t.onAudioEnded == "function" : !1;
-};
-function n(e) {
-	if (e.parentElement) return e.parentElement;
-	let t = e.getRootNode();
-	return t instanceof ShadowRoot ? t.host : null;
-}
-function r(e, r = {}) {
-	let i = r.hostPredicate ?? t, a = e;
-	for (; a;) {
-		if (i(a)) return a;
-		a = n(a);
-	}
-	return null;
-}
-//#endregion
 //#region ../../../node_modules/.bun/@tiptap+core@3.31.3+ef29727eaaf819d3/node_modules/@tiptap/core/dist/rolldown-runtime-D7D4PA-g.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
@@ -31299,8 +31251,15 @@ function EditableHtml$1($$anchor, $$props) {
 	let markup = prop($$props, "markup", 3, ""), placeholder = prop($$props, "placeholder", 3, "Enter text here..."), showToolbar = prop($$props, "showToolbar", 3, true), disabled = prop($$props, "disabled", 3, false);
 	let editorElement;
 	let editor = /* @__PURE__ */ state(null);
-	let isFocused = /* @__PURE__ */ state(false);
+	let hasFocus = /* @__PURE__ */ state(false);
 	let showAlignMenu = /* @__PURE__ */ state(false);
+	function editorAttributes() {
+		return {
+			role: "textbox",
+			"aria-multiline": "true",
+			...$$props.ariaLabel ? { "aria-label": $$props.ariaLabel } : {}
+		};
+	}
 	let editorState = /* @__PURE__ */ state(proxy({
 		isBold: false,
 		canBold: false,
@@ -31392,6 +31351,7 @@ function EditableHtml$1($$anchor, $$props) {
 			content: markup() || "",
 			editable: !disabled(),
 			autofocus: false,
+			editorProps: { attributes: editorAttributes() },
 			onUpdate: ({ editor }) => {
 				const html = editor.getHTML();
 				if ($$props.onChange) $$props.onChange(html);
@@ -31401,12 +31361,7 @@ function EditableHtml$1($$anchor, $$props) {
 				updateEditorState();
 			},
 			onFocus: () => {
-				set(isFocused, true);
 				updateEditorState();
-			},
-			onBlur: () => {
-				set(isFocused, false);
-				set(showAlignMenu, false);
 			}
 		}), true);
 		updateEditorState();
@@ -31421,6 +31376,19 @@ function EditableHtml$1($$anchor, $$props) {
 		const editable = !disabled();
 		if (get(editor) && get(editor).isEditable !== editable) get(editor).setEditable(editable, false);
 	});
+	user_effect(() => {
+		const attributes = editorAttributes();
+		if (get(editor) && get(editor).view.dom.getAttribute("aria-label") !== (attributes["aria-label"] ?? null)) get(editor).setOptions({ editorProps: { attributes } });
+	});
+	function handleFocusIn() {
+		set(hasFocus, true);
+	}
+	function handleFocusOut(e) {
+		if (!e.currentTarget.contains(e.relatedTarget)) {
+			set(hasFocus, false);
+			set(showAlignMenu, false);
+		}
+	}
 	function toggleBold() {
 		get(editor)?.chain().focus().toggleBold().run();
 	}
@@ -31725,7 +31693,10 @@ function EditableHtml$1($$anchor, $$props) {
 		reset$1(button_24);
 		reset$1(div_5);
 		reset$1(div_4);
-		template_effect(() => classes_1 = set_class(div_4, 1, "toolbar", null, classes_1, { focused: get(isFocused) }));
+		template_effect(() => {
+			classes_1 = set_class(div_4, 1, "toolbar", null, classes_1, { focused: get(hasFocus) });
+			div_4.inert = !get(hasFocus);
+		});
 		delegated("mousedown", div_4, handleMouseDown);
 		delegated("click", button_24, handleDoneClick);
 		append($$anchor, div_4);
@@ -31735,27 +31706,32 @@ function EditableHtml$1($$anchor, $$props) {
 	});
 	reset$1(div);
 	template_effect(() => classes = set_class(div_1, 1, "editor-holder", null, classes, { disabled: disabled() }));
+	delegated("focusin", div, handleFocusIn);
+	delegated("focusout", div, handleFocusOut);
 	append($$anchor, div);
 	pop();
 }
-delegate(["mousedown", "click"]);
+delegate([
+	"focusin",
+	"focusout",
+	"mousedown",
+	"click"
+]);
 //#endregion
 //#region ../../lib-svelte/editable-html-tiptap-svelte/dist/index.js
 var EditableHtml = EditableHtml$1;
 //#endregion
 //#region src/author/Author.svelte
-var root = /* @__PURE__ */ from_html(`<div class="simple-cloze-author svelte-13ppn6m"><div class="input-container svelte-13ppn6m"><span class="input-label svelte-13ppn6m">Prompt</span> <!></div> <div class="mb-6"><label class="block text-sm text-gray-600 mb-2">Correct Answer</label> <input type="text" class="input input-bordered w-full" placeholder="Enter the correct answer"/></div></div>`);
+var root = /* @__PURE__ */ from_html(`<div class="simple-cloze-author svelte-13ppn6m"><div class="input-container svelte-13ppn6m"><span class="input-label svelte-13ppn6m">Prompt</span> <!></div> <div class="answer-container svelte-13ppn6m"><label class="answer-label svelte-13ppn6m">Correct Answer</label> <input type="text" class="answer-input svelte-13ppn6m" placeholder="Enter the correct answer"/></div></div>`);
 var $$css = {
 	hash: "svelte-13ppn6m",
-	code: ".simple-cloze-author.svelte-13ppn6m {max-width:56rem;margin:0 auto;padding:24px;}.input-container.svelte-13ppn6m {position:relative;padding-top:16px;margin-bottom:24px;width:100%;}.input-label.svelte-13ppn6m {position:absolute;top:0;left:0;transform-origin:top left;transform:scale(0.75) translate(0, -0.75em);color:var(--pie-text, rgba(0, 0, 0, 0.6));pointer-events:none;}.simple-cloze-author .editor-container {border-color:var(--pie-border-light, #ccc);border-radius:4px;}.simple-cloze-author .editor-holder {min-height:140px;}"
+	code: ".simple-cloze-author.svelte-13ppn6m {max-width:56rem;margin:0 auto;padding:24px;}.input-container.svelte-13ppn6m {position:relative;padding-top:16px;margin-bottom:24px;width:100%;}.input-label.svelte-13ppn6m {position:absolute;top:0;left:0;transform-origin:top left;transform:scale(0.75) translate(0, -0.75em);color:var(--pie-text, rgba(0, 0, 0, 0.6));pointer-events:none;}.answer-container.svelte-13ppn6m {margin-bottom:24px;}.answer-label.svelte-13ppn6m {display:block;margin-bottom:8px;font-size:0.875rem;color:var(--pie-text, rgba(0, 0, 0, 0.6));}.answer-input.svelte-13ppn6m {box-sizing:border-box;width:100%;height:2.5rem;padding:0 12px;border:1px solid var(--pie-border-light, #ccc);border-radius:4px;font:inherit;}.simple-cloze-author .editor-container {border-color:var(--pie-border-light, #ccc);border-radius:4px;}.simple-cloze-author .editor-holder {min-height:140px;}"
 };
 function Author($$anchor, $$props) {
 	push($$props, true);
 	append_styles($$anchor, $$css);
-	let model = prop($$props, "model", 15), onChange = prop($$props, "onChange", 7);
-	let rootEl = /* @__PURE__ */ state(null);
+	let model = prop($$props, "model", 15), onChange = prop($$props, "onChange", 7), onModelChange = prop($$props, "onModelChange", 7);
 	const answerInputId = `simple-cloze-correct-answer-${Math.random().toString(36).slice(2, 10)}`;
-	const isAuthorHost = (node) => typeof node?.onModelChange === "function";
 	/**
 	* The wrapper owns the model and announces the edit; `onChange` serves a
 	* component mounted without one. The update spreads the whole model, so fields
@@ -31766,8 +31742,7 @@ function Author($$anchor, $$props) {
 			...model() || {},
 			...patch
 		};
-		const host = r(get(rootEl), { hostPredicate: isAuthorHost });
-		if (host) host.onModelChange(nextModel);
+		if (onModelChange()) onModelChange()(nextModel);
 		else {
 			model(nextModel);
 			onChange()?.(nextModel);
@@ -31793,19 +31768,27 @@ function Author($$anchor, $$props) {
 		set onChange($$value) {
 			onChange($$value);
 			flushSync();
+		},
+		get onModelChange() {
+			return onModelChange();
+		},
+		set onModelChange($$value) {
+			onModelChange($$value);
+			flushSync();
 		}
 	};
 	var div = root();
 	var div_1 = child(div);
-	var node_1 = sibling(child(div_1), 2);
+	var node = sibling(child(div_1), 2);
 	{
 		let $0 = /* @__PURE__ */ user_derived(() => model()?.prompt || "");
-		EditableHtml(node_1, {
+		EditableHtml(node, {
 			get markup() {
 				return get($0);
 			},
 			onChange: handlePromptChange,
-			placeholder: "Enter your question here..."
+			placeholder: "Enter your question here...",
+			ariaLabel: "Prompt"
 		});
 	}
 	reset$1(div_1);
@@ -31815,7 +31798,6 @@ function Author($$anchor, $$props) {
 	remove_input_defaults(input);
 	reset$1(div_2);
 	reset$1(div);
-	bind_this(div, ($$value) => set(rootEl, $$value), () => get(rootEl));
 	template_effect(() => {
 		set_attribute(label, "for", answerInputId);
 		set_attribute(input, "id", answerInputId);
@@ -31828,31 +31810,29 @@ function Author($$anchor, $$props) {
 delegate(["input"]);
 create_custom_element(Author, {
 	model: { type: "Object" },
+	onModelChange: {},
 	onChange: {}
 }, [], []);
 //#endregion
 //#region src/author/index.ts
 var SvelteElementClass = Author.element;
 var SimpleClozeAuthor = class extends SvelteElementClass {
-	constructor(..._args) {
-		super(..._args);
+	/**
+	* The component reports each edit through its `onModelChange` prop, assigned
+	* here through the accessor Svelte generates for it. The host keeps the
+	* edited model, renders from it, and announces it as `model.updated`, which
+	* bubbles to the listener an authoring player registers at its root.
+	*/
+	constructor() {
+		super();
 		_defineProperty(this, "_model", null);
 		_defineProperty(this, "_onChange", null);
-		_defineProperty(
-			this,
-			/**
-			* The component reports each edit here. The host keeps the edited model,
-			* renders from it, and announces it as `model.updated`, which bubbles to
-			* the listener an authoring player registers at its root.
-			*/
-			"onModelChange",
-			(update) => {
-				this._model = update;
-				super.model = update;
-				this._onChange?.(update);
-				this.dispatchEvent(new e(update, false));
-			}
-		);
+		this.onModelChange = (update) => {
+			this._model = update;
+			super.model = update;
+			this._onChange?.(update);
+			this.dispatchEvent(new e(update, false));
+		};
 	}
 	set model(m) {
 		this._model = m;