eat-js-sdk 2.2.5 → 2.2.7

package/dist/interaction-builder.mjs

@@ -10240,15 +10240,14 @@ create_custom_element(
 );
 var root_1$d = /* @__PURE__ */ from_html(`<p class="p2 text-red-400 mb-3">Student's answer</p>`);
 var root_3$9 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
-var root_2$7 = /* @__PURE__ */ from_html(`<div class="relative"><textarea id="answerText" data-testid="input-long-txa" autocomplete="off" rows="3"></textarea> <!></div>`);
+var root_2$7 = /* @__PURE__ */ from_html(`<div class="relative"><textarea id="answerText" data-testid="input-long-txa" placeholder="Type your answer here" autocomplete="off" rows="3"></textarea> <!></div>`);
 var root_5$3 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
-var root_4$1 = /* @__PURE__ */ from_html(`<div class="relative"><input data-testid="input-short-txb" autocomplete="off"/> <!></div>`);
+var root_4$1 = /* @__PURE__ */ from_html(`<div class="relative"><input data-testid="input-short-txb" autocomplete="off" placeholder="Type your answer here"/> <!></div>`);
 var root$b = /* @__PURE__ */ from_html(`<div class="relative"><!> <!></div>`);
 function TypeInTextField($$anchor, $$props) {
   push($$props, true);
   let value = prop($$props, "value", 15), variant = prop($$props, "variant", 7), readonly = prop($$props, "readonly", 7, false), disabled = prop($$props, "disabled", 7, false), showStatus = prop($$props, "showStatus", 7, false), isCorrect = prop($$props, "isCorrect", 7, null), isSkipped = prop($$props, "isSkipped", 7, false), onBlur = prop($$props, "onBlur", 7);
   let ariaLabel = /* @__PURE__ */ user_derived(() => showStatus() && isCorrect() !== null ? `Submitted response is ${isCorrect() ? "correct" : "incorrect"}` : !value() ? "Answer input: Please type your response" : "Your response is");
-  let typeinPlaceholder = /* @__PURE__ */ user_derived(() => isSkipped() ? "No answer provided" : "Type your answer here");
   const focusHandlers = useTextInputFocus();
   const handleFocus = (e2) => {
     focusHandlers.handleFocus(e2);
@@ -10334,7 +10333,7 @@ function TypeInTextField($$anchor, $$props) {
       append($$anchor2, p);
     };
     if_block(node, ($$render) => {
-      if (showStatus() && isCorrect() === false || isSkipped()) $$render(consequent);
+      if (showStatus() && !isSkipped() && isCorrect() === false) $$render(consequent);
     });
   }
   var node_1 = sibling(node, 2);
@@ -10352,8 +10351,8 @@ function TypeInTextField($$anchor, $$props) {
           var span = root_3$9();
           var node_3 = child(span);
           {
-            let $0 = /* @__PURE__ */ user_derived(() => isSkipped() ? false : Boolean(isCorrect()));
-            let $1 = /* @__PURE__ */ user_derived(() => !isSkipped() && Boolean(isCorrect()) ? "text-green-700" : "text-red-850");
+            let $0 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()));
+            let $1 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()) ? "text-green-700" : "text-red-850");
             ResultIcon(node_3, {
               get isCorrect() {
                 return get$1($0);
@@ -10367,7 +10366,7 @@ function TypeInTextField($$anchor, $$props) {
           append($$anchor3, span);
         };
         if_block(node_2, ($$render) => {
-          if (showStatus() && value() && value().trim() && isCorrect() !== null || isSkipped()) $$render(consequent_1);
+          if (showStatus() && value() && value().trim() && isCorrect() !== null) $$render(consequent_1);
         });
       }
       reset(div_1);
@@ -10376,14 +10375,13 @@ function TypeInTextField($$anchor, $$props) {
           set_class(textarea, 1, `input-long-txa typein-textbox h-32 resize-none
           ${$0 ?? ""} 
           ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} 
-          ${showStatus() && isCorrect() === false || isSkipped() ? "border-2 border-red-850" : ""}`);
+          ${showStatus() && !isSkipped() && isCorrect() === false ? "border-2 border-red-850" : ""}`);
           set_attribute(textarea, "aria-label", get$1(ariaLabel));
           textarea.readOnly = readonly();
           textarea.disabled = disabled();
-          set_attribute(textarea, "placeholder", get$1(typeinPlaceholder));
         },
         [
-          () => showStatus() && value() && value().trim() && isCorrect() !== null || isSkipped() ? "pr-10" : ""
+          () => showStatus() && value() && value().trim() && isCorrect() !== null ? "pr-10" : ""
         ]
       );
       event("focus", textarea, handleFocus);
@@ -10404,8 +10402,8 @@ function TypeInTextField($$anchor, $$props) {
           var span_1 = root_5$3();
           var node_5 = child(span_1);
           {
-            let $0 = /* @__PURE__ */ user_derived(() => isSkipped() ? false : Boolean(isCorrect()));
-            let $1 = /* @__PURE__ */ user_derived(() => !isSkipped() && Boolean(isCorrect()) ? "text-green-700" : "text-red-850");
+            let $0 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()));
+            let $1 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()) ? "text-green-700" : "text-red-850");
             ResultIcon(node_5, {
               get isCorrect() {
                 return get$1($0);
@@ -10419,16 +10417,15 @@ function TypeInTextField($$anchor, $$props) {
           append($$anchor3, span_1);
         };
         if_block(node_4, ($$render) => {
-          if (showStatus() && value() && value().trim() && isCorrect() !== null || isSkipped()) $$render(consequent_3);
+          if (showStatus() && value() && value().trim() && isCorrect() !== null) $$render(consequent_3);
         });
       }
       reset(div_2);
       template_effect(() => {
-        set_class(input, 1, `input-short-txb typein-textbox typein-input ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} ${showStatus() && isCorrect() === false || isSkipped() ? "border-2 border-red-850" : ""}`);
+        set_class(input, 1, `input-short-txb typein-textbox typein-input ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} ${showStatus() && !isSkipped() && isCorrect() === false ? "border-2 border-red-850" : ""}`);
         set_attribute(input, "aria-label", get$1(ariaLabel));
         input.readOnly = readonly();
         input.disabled = disabled();
-        set_attribute(input, "placeholder", get$1(typeinPlaceholder));
       });
       event("focus", input, handleFocus);
       event("blur", input, handleBlur);
@@ -11026,7 +11023,7 @@ function TypeInFeedback($$anchor, $$props) {
     }
     return false;
   })());
-  const showHasMultipleAnswers = /* @__PURE__ */ user_derived(() => get$1(hasMultipleAnswers) && config().variant !== "inline" && (feedbackState().isSkipped || feedbackState().showStatusLine));
+  const showHasMultipleAnswers = /* @__PURE__ */ user_derived(() => feedbackState().showStatusLine && get$1(hasMultipleAnswers) && (config().variant === "short" || config().variant === "long"));
   const showFeedbackAlert = /* @__PURE__ */ user_derived(() => feedbackState().isFeedbackShown && !feedbackState().isSkipped && config().variant === "inline" && !!feedbackState().resultFeedback?.trim());
   const showInlineComparisonTable = /* @__PURE__ */ user_derived(() => feedbackState().showComparisonTable && config().variant === "inline");
   const feedbackIconType = /* @__PURE__ */ user_derived(() => isInteractiveMode2() && config().variant === "inline" ? "info" : "result");
@@ -19100,27 +19097,38 @@ registerInteraction("dropdown", createDropdownInteraction, DropdownComponent);
 const decodeNbsp = (text) => text.replace(/&amp;nbsp;/g, " ").replace(/&nbsp;/g, " ");
 const stripTags = (s) => s.replace(/<[^>]+>/g, "");
 const hasHtmlTags = (s) => /<[^>]/.test(s);
+const getTagName = (tag) => tag.replace(/^<\/?([^\s>]+).*$/, "$1").toLowerCase();
 const extractHtmlWords = (htmlText) => {
-  const re = /(<\/[^>]+>)|(<[^>]+>)|(\S+)/g;
-  const result = [];
-  let openPending = "";
+  const re = /(<\/[^>]+>)|(<[^>]+>)|([^\s<>]+)/g;
+  const tokens = [];
   let m;
   while ((m = re.exec(htmlText)) !== null) {
-    if (m[3]) {
-      result.push(openPending + m[3]);
-      openPending = "";
-    } else if (m[2]) {
-      openPending += m[2];
-    } else if (m[1]) {
-      if (result.length > 0) {
-        result[result.length - 1] += m[1];
+    if (m[1]) tokens.push({ type: "close", value: m[1] });
+    else if (m[2]) tokens.push({ type: "open", value: m[2] });
+    else tokens.push({ type: "word", value: m[3] });
+  }
+  const words = [];
+  const openStack = [];
+  for (const tok of tokens) {
+    if (tok.type === "open") {
+      openStack.push(tok.value);
+    } else if (tok.type === "close") {
+      const closingName = getTagName(tok.value);
+      for (let i = openStack.length - 1; i >= 0; i--) {
+        if (getTagName(openStack[i]) === closingName) {
+          openStack.splice(i, 1);
+          break;
+        }
       }
+    } else {
+      words.push({ value: tok.value, openStack: [...openStack] });
     }
   }
-  if (openPending && result.length > 0) {
-    result[result.length - 1] += openPending;
-  }
-  return result;
+  return words.map(({ value, openStack: openStack2 }) => {
+    const open = openStack2.join("");
+    const close = [...openStack2].reverse().map((t2) => `</${getTagName(t2)}>`).join("");
+    return open + value + close;
+  });
 };
 const splitParagraphs = (rawText) => rawText.split(/<\/p>/i).map((p) => p.replace(/^<p>/i, "").trim()).filter(Boolean);
 const parseSentences = (rawText, correctAnswers = []) => {
@@ -19169,13 +19177,10 @@ const parseWords = (rawText, correctAnswers = []) => {
     const decoded = para.replace(/&lt;eat-contentful&gt;/g, "<eat-contentful>").replace(/&lt;\/eat-contentful&gt;/g, "</eat-contentful>");
     tokenRegex.lastIndex = 0;
     let match;
-    let pendingOpenTags = "";
-    const trailingOpenTagsRe = /((?:<(?!\/?eat-)[^>]+>)+\s*)$/;
     while ((match = tokenRegex.exec(decoded)) !== null) {
       if (match[2] !== void 0) {
-        const outerOpen = pendingOpenTags + (match[1] ?? "");
+        const outerOpen = match[1] ?? "";
         const outerClose = match[3] ?? "";
-        pendingOpenTags = "";
         const rawContent = match[2].trim();
         const displayText = decodeNbsp(rawContent);
         if (displayText) {
@@ -19191,10 +19196,7 @@ const parseWords = (rawText, correctAnswers = []) => {
         }
       } else if (match[4] !== void 0) {
         const rawChunk = match[4];
-        const trailingTagMatch = rawChunk.match(trailingOpenTagsRe);
-        pendingOpenTags = trailingTagMatch ? trailingTagMatch[1].trimEnd() : "";
-        const chunk = trailingTagMatch ? rawChunk.slice(0, -trailingTagMatch[1].length) : rawChunk;
-        const words = hasHtmlTags(chunk) ? extractHtmlWords(chunk) : chunk.split(/\s+/).filter(Boolean);
+        const words = hasHtmlTags(rawChunk) ? extractHtmlWords(rawChunk) : rawChunk.split(/\s+/).filter(Boolean);
         for (const word of words) {
           const visibleWord = hasHtmlTags(word) ? stripTags(word) : word;
           if (purePunctRe.test(visibleWord)) {
@@ -19209,7 +19211,15 @@ const parseWords = (rawText, correctAnswers = []) => {
           } else {
             while (correctAnswerIdSet.has(`${globalIndex}`)) globalIndex++;
             if (hasHtmlTags(word)) {
-              segments.push({ id: `${globalIndex}`, text: decodeNbsp(word) });
+              const innerVisible = stripTags(word);
+              const punctMatch = innerVisible.match(trailingPunctRe);
+              if (punctMatch) {
+                const punc = punctMatch[1];
+                const rebuilt = word.replace(new RegExp(punc.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "(</)"), "$1");
+                segments.push({ id: `${globalIndex}`, text: decodeNbsp(rebuilt), trailingPunctuation: punc });
+              } else {
+                segments.push({ id: `${globalIndex}`, text: decodeNbsp(word) });
+              }
             } else {
               const punctMatch = word.match(trailingPunctRe);
               const text = decodeNbsp(punctMatch ? word.slice(0, -punctMatch[1].length) : word);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eat-js-sdk",
-  "version": "2.2.5",
+  "version": "2.2.7",
   "change version": "2.2.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [