eat-js-sdk 2.3.6 → 2.3.8

package/dist/interaction-builder.mjs

@@ -19285,6 +19285,11 @@ const isSuperSubTag = (tag) => {
   const name = getTagName(tag);
   return name === "sup" || name === "sub";
 };
+const trailingPunctuationPattern = /([.,!?;:)\]}"'\u201D\u2019»…\u2014\u2013]+)$/;
+const leadingPunctuationPattern = /^([([{'""\u201C\u2018]+)/;
+const openingCharsAtWordEndPattern = /([(\[{\u201C\u2018]+)$/;
+const wordContainsOnlyPunctuationPattern = /^[^\w\u00C0-\u024F]+$/;
+const TOKEN_PATTERN = /((?:<(?!\/?eat-)[^>]+>)*)<eat-contentful>(.*?)<\/eat-contentful>((?:<\/[^>]+>)*)|((?:<(?!\/?eat-)[^>]*>|[^<>])+)/;
 const extractHtmlWords = (htmlText) => {
   const re = /(\s+)|(<\/[^>]+>)|(<[^>]+>)|([^\s<>]+)/g;
   const tokens = [];
@@ -19386,13 +19391,115 @@ const extractHtmlWords = (htmlText) => {
   });
 };
 const splitParagraphs = (rawText) => rawText.split(/<\/p>/i).map((p) => p.replace(/^<p>/i, "").trim()).filter(Boolean);
+const decodeAuthored = (para) => para.replace(/&lt;eat-contentful&gt;/g, "<eat-contentful>").replace(/&lt;\/eat-contentful&gt;/g, "</eat-contentful>").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&apos;/g, "'");
+const flushLeadingPunct = (text, state2) => {
+  const m = text.match(leadingPunctuationPattern);
+  const extractedLeading = m ? m[1] : "";
+  const lp = state2.pendingLeadingPunct + extractedLeading;
+  const leadingPunctuation = lp.length ? lp : void 0;
+  state2.pendingLeadingPunct = "";
+  return { leadingPunctuation, extractedLeading };
+};
+const appendTrailingOrPush = (text, state2) => {
+  const prev = state2.segments[state2.segments.length - 1];
+  if (prev && !prev.isPunctuation && !prev.isLineBreak) {
+    prev.trailingPunctuation = (prev.trailingPunctuation ?? "") + text;
+  } else {
+    state2.segments.push({ id: `${state2.globalIndex}`, text, isPunctuation: true });
+    state2.globalIndex++;
+  }
+};
+const processPurePunctWord = (visibleWord, state2) => {
+  const isDoubleQuote = visibleWord === '"';
+  const isSingleQuote = visibleWord === "'";
+  const quoteDepth = isDoubleQuote ? state2.openDoubleQuoteDepth : isSingleQuote ? state2.openSingleQuoteDepth : -1;
+  if ((isDoubleQuote || isSingleQuote) && quoteDepth > 0) {
+    appendTrailingOrPush(visibleWord, state2);
+    if (isDoubleQuote) state2.openDoubleQuoteDepth--;
+    else state2.openSingleQuoteDepth--;
+  } else if (leadingPunctuationPattern.test(visibleWord)) {
+    state2.pendingLeadingPunct += visibleWord;
+    if (isDoubleQuote) state2.openDoubleQuoteDepth++;
+    else if (isSingleQuote) state2.openSingleQuoteDepth++;
+  } else {
+    appendTrailingOrPush(visibleWord, state2);
+  }
+};
+const processHtmlWord = (word, state2) => {
+  const innerVisible = decodeHtmlEntities(stripTags(word));
+  const outerOpenTags = word.match(/^((?:<[^>]+>)+)/)?.[1] ?? "";
+  const outerCloseTags = word.match(/((?:<\/[^>]+>)+)$/)?.[1] ?? "";
+  const wrapInTags = (s) => outerOpenTags ? outerOpenTags + s + outerCloseTags : s;
+  const leadingMatch = innerVisible.match(leadingPunctuationPattern);
+  const extractedLeading = leadingMatch ? leadingMatch[1] : "";
+  const lp = state2.pendingLeadingPunct + (extractedLeading ? wrapInTags(extractedLeading) : "");
+  const leadingPunctuation = lp.length ? lp : void 0;
+  state2.pendingLeadingPunct = "";
+  let wordForTrailing = word;
+  if (extractedLeading) {
+    wordForTrailing = word.replace(new RegExp("^((?:<[^>]+>)*)" + escapeRegExp(extractedLeading)), "$1");
+  }
+  const visibleAfterLeading = extractedLeading ? innerVisible.slice(extractedLeading.length) : innerVisible;
+  const punctMatch = visibleAfterLeading.match(trailingPunctuationPattern);
+  if (punctMatch) {
+    const punc = punctMatch[1];
+    const rebuilt = wordForTrailing.replace(new RegExp(escapeRegExp(punc) + "(</)"), "$1");
+    state2.segments.push({
+      id: `${state2.globalIndex}`,
+      text: decodeNbsp(rebuilt),
+      leadingPunctuation,
+      trailingPunctuation: wrapInTags(punc)
+    });
+  } else {
+    state2.segments.push({ id: `${state2.globalIndex}`, text: decodeNbsp(wordForTrailing), leadingPunctuation });
+  }
+  state2.globalIndex++;
+};
+const processPlainWord = (visibleWord, state2) => {
+  const { leadingPunctuation, extractedLeading } = flushLeadingPunct(visibleWord, state2);
+  let wordAfterLeading = extractedLeading ? visibleWord.slice(extractedLeading.length) : visibleWord;
+  const openingCharsAtEnd = wordAfterLeading.match(openingCharsAtWordEndPattern);
+  if (openingCharsAtEnd) {
+    state2.pendingLeadingPunct += openingCharsAtEnd[1];
+    wordAfterLeading = wordAfterLeading.slice(0, -openingCharsAtEnd[1].length);
+  }
+  if (!wordAfterLeading.length) return;
+  const punctMatch = wordAfterLeading.match(trailingPunctuationPattern);
+  const text = decodeNbsp(punctMatch ? wordAfterLeading.slice(0, -punctMatch[1].length) : wordAfterLeading);
+  const trailingPunctuation = punctMatch ? punctMatch[1] : void 0;
+  state2.segments.push({ id: `${state2.globalIndex}`, text, leadingPunctuation, trailingPunctuation });
+  state2.globalIndex++;
+};
+const processContentfulToken = (match, state2) => {
+  const outerOpen = match[1] ?? "";
+  const outerClose = match[3] ?? "";
+  const rawContent = match[2].trim();
+  const displayText = decodeNbsp(rawContent);
+  if (!displayText) return;
+  const { leadingPunctuation, extractedLeading } = flushLeadingPunct(displayText, state2);
+  const textAfterLeading = extractedLeading ? displayText.slice(extractedLeading.length) : displayText;
+  const rawAfterLeading = extractedLeading ? rawContent.slice(extractedLeading.length) : rawContent;
+  const punctMatch = textAfterLeading.match(trailingPunctuationPattern);
+  const rawText = punctMatch ? rawAfterLeading.slice(0, -punctMatch[1].length) : rawAfterLeading;
+  const trailingPunctuation = punctMatch ? punctMatch[1] : void 0;
+  const innerText = punctMatch ? textAfterLeading.slice(0, -punctMatch[1].length) : textAfterLeading;
+  const text = outerOpen + innerText + outerClose;
+  state2.segments.push({
+    id: `${state2.globalIndex}`,
+    text,
+    rawText,
+    leadingPunctuation,
+    trailingPunctuation,
+    isContentful: true
+  });
+  state2.globalIndex++;
+};
 const parseSentences = (rawText) => {
   const paragraphs = splitParagraphs(rawText);
   const segments = [];
   let posIndex = 0;
   for (let pIdx = 0; pIdx < paragraphs.length; pIdx++) {
-    const para = paragraphs[pIdx];
-    const decoded = para.replace(/&lt;eat-contentful&gt;/g, "<eat-contentful>").replace(/&lt;\/eat-contentful&gt;/g, "</eat-contentful>").replace(/&lt;eat-sentence&gt;/g, "<eat-sentence>");
+    const decoded = decodeAuthored(paragraphs[pIdx]).replace(/&lt;eat-sentence&gt;/g, "<eat-sentence>");
     const chunks = decoded.split("<eat-sentence>");
     for (const chunk of chunks) {
       const contentfulMatch = chunk.match(/((?:<(?!\/?eat-)[^>]+>)*)<eat-contentful>(.*?)<\/eat-contentful>([\s\S]*)/);
@@ -19402,10 +19509,8 @@ const parseSentences = (rawText) => {
       const displayText = decodeNbsp(rawChunk);
       if (displayText) {
         const text = contentfulMatch ? outerOpen + displayText + outerClose : displayText;
-        const id = String(posIndex);
         const rawText2 = contentfulMatch ? rawChunk : void 0;
-        const isContentful = !!contentfulMatch;
-        segments.push({ id, text, rawText: rawText2, isContentful: isContentful || void 0 });
+        segments.push({ id: String(posIndex), text, rawText: rawText2, isContentful: contentfulMatch ? true : void 0 });
         posIndex++;
       }
     }
@@ -19417,113 +19522,50 @@ const parseSentences = (rawText) => {
 };
 const parseWords = (rawText) => {
   const paragraphs = splitParagraphs(rawText);
-  const segments = [];
-  let globalIndex = 0;
-  const tokenRegex = /((?:<(?!\/?eat-)[^>]+>)*)<eat-contentful>(.*?)<\/eat-contentful>((?:<\/[^>]+>)*)|((?:<(?!\/?eat-)[^>]*>|[^<>])+)/g;
-  const trailingPunctRe = /([.,!?;:)\]}"'\u201D\u2019»…\u2014\u2013]+)$/;
-  const leadingPunctRe = /^([([{'""\u201C\u2018]+)/;
-  const purePunctRe = /^[^\w\u00C0-\u024F]+$/;
+  const state2 = {
+    segments: [],
+    globalIndex: 0,
+    pendingLeadingPunct: "",
+    openDoubleQuoteDepth: 0,
+    openSingleQuoteDepth: 0
+  };
   for (let pIdx = 0; pIdx < paragraphs.length; pIdx++) {
-    const para = paragraphs[pIdx];
-    const decoded = para.replace(/&lt;eat-contentful&gt;/g, "<eat-contentful>").replace(/&lt;\/eat-contentful&gt;/g, "</eat-contentful>");
-    tokenRegex.lastIndex = 0;
+    const decoded = decodeAuthored(paragraphs[pIdx]);
+    const tokenRegex = new RegExp(TOKEN_PATTERN, "g");
+    state2.pendingLeadingPunct = "";
+    state2.openDoubleQuoteDepth = 0;
+    state2.openSingleQuoteDepth = 0;
     let match;
-    let pendingLeadingPunct = "";
-    const flushLeadingPunct = (text) => {
-      const m = text.match(leadingPunctRe);
-      const extractedLeading = m ? m[1] : "";
-      const lp = pendingLeadingPunct + extractedLeading;
-      const leadingPunctuation = lp.length ? lp : void 0;
-      pendingLeadingPunct = "";
-      return { leadingPunctuation, extractedLeading };
-    };
     while ((match = tokenRegex.exec(decoded)) !== null) {
       if (match[2] !== void 0) {
-        const outerOpen = match[1] ?? "";
-        const outerClose = match[3] ?? "";
-        const rawContent = match[2].trim();
-        const displayText = decodeNbsp(rawContent);
-        if (displayText) {
-          const { leadingPunctuation, extractedLeading } = flushLeadingPunct(displayText);
-          const textAfterLeading = extractedLeading ? displayText.slice(extractedLeading.length) : displayText;
-          const rawAfterLeading = extractedLeading ? rawContent.slice(extractedLeading.length) : rawContent;
-          const punctMatch = textAfterLeading.match(trailingPunctRe);
-          const rawText2 = punctMatch ? rawAfterLeading.slice(0, -punctMatch[1].length) : rawAfterLeading;
-          const trailingPunctuation = punctMatch ? punctMatch[1] : void 0;
-          const innerText = punctMatch ? textAfterLeading.slice(0, -punctMatch[1].length) : textAfterLeading;
-          const text = outerOpen + innerText + outerClose;
-          const id = `${globalIndex}`;
-          segments.push({ id, text, rawText: rawText2, leadingPunctuation, trailingPunctuation, isContentful: true });
-          globalIndex++;
-        }
+        processContentfulToken(match, state2);
       } else if (match[4] !== void 0) {
         const rawChunk = match[4];
         const words = hasHtmlTags(rawChunk) ? extractHtmlWords(rawChunk) : rawChunk.split(/\s+/).filter(Boolean);
         for (const word of words) {
-          const visibleWord = hasHtmlTags(word) ? stripTags(word) : decodeHtmlEntities(word);
-          if (purePunctRe.test(visibleWord)) {
-            if (leadingPunctRe.test(visibleWord)) {
-              pendingLeadingPunct += visibleWord;
-            } else {
-              const prev = segments[segments.length - 1];
-              if (prev && !prev.isPunctuation && !prev.isLineBreak) {
-                prev.trailingPunctuation = (prev.trailingPunctuation ?? "") + visibleWord;
-              } else {
-                segments.push({ id: `${globalIndex}`, text: visibleWord, isPunctuation: true });
-                globalIndex++;
-              }
-            }
+          const visibleWord = hasHtmlTags(word) ? decodeHtmlEntities(stripTags(word)) : decodeHtmlEntities(word);
+          if (wordContainsOnlyPunctuationPattern.test(visibleWord)) {
+            processPurePunctWord(visibleWord, state2);
+          } else if (hasHtmlTags(word)) {
+            processHtmlWord(word, state2);
           } else {
-            if (hasHtmlTags(word)) {
-              const innerVisible = stripTags(word);
-              const { leadingPunctuation, extractedLeading } = flushLeadingPunct(innerVisible);
-              let wordForTrailing = word;
-              if (extractedLeading) {
-                wordForTrailing = word.replace(new RegExp("^((?:<[^>]+>)*)" + escapeRegExp(extractedLeading)), "$1");
-              }
-              const visibleAfterLeading = extractedLeading ? innerVisible.slice(extractedLeading.length) : innerVisible;
-              const punctMatch = visibleAfterLeading.match(trailingPunctRe);
-              if (punctMatch) {
-                const punc = punctMatch[1];
-                const rebuilt = wordForTrailing.replace(new RegExp(escapeRegExp(punc) + "(</)"), "$1");
-                segments.push({
-                  id: `${globalIndex}`,
-                  text: decodeNbsp(rebuilt),
-                  leadingPunctuation,
-                  trailingPunctuation: punc
-                });
-              } else {
-                segments.push({ id: `${globalIndex}`, text: decodeNbsp(wordForTrailing), leadingPunctuation });
-              }
-            } else {
-              const { leadingPunctuation, extractedLeading } = flushLeadingPunct(visibleWord);
-              const wordAfterLeading = extractedLeading ? visibleWord.slice(extractedLeading.length) : visibleWord;
-              const punctMatch = wordAfterLeading.match(trailingPunctRe);
-              const text = decodeNbsp(punctMatch ? wordAfterLeading.slice(0, -punctMatch[1].length) : wordAfterLeading);
-              const trailingPunctuation = punctMatch ? punctMatch[1] : void 0;
-              segments.push({ id: `${globalIndex}`, text, leadingPunctuation, trailingPunctuation });
-            }
-            globalIndex++;
+            processPlainWord(visibleWord, state2);
           }
         }
       }
     }
-    if (pendingLeadingPunct) {
-      segments.push({ id: `${globalIndex}`, text: pendingLeadingPunct, isPunctuation: true });
-      globalIndex++;
+    if (state2.pendingLeadingPunct) {
+      state2.segments.push({ id: `${state2.globalIndex}`, text: state2.pendingLeadingPunct, isPunctuation: true });
+      state2.globalIndex++;
+      state2.pendingLeadingPunct = "";
     }
     if (pIdx < paragraphs.length - 1) {
-      segments.push({ id: `br-${pIdx}`, text: "", isLineBreak: true });
+      state2.segments.push({ id: `br-${pIdx}`, text: "", isLineBreak: true });
     }
   }
-  return segments;
-};
-const parseSelectableText = (text, selectableType) => {
-  if (selectableType === "Sentence") {
-    return parseSentences(text);
-  }
-  return parseWords(text);
+  return state2.segments;
 };
+const parseSelectableText = (text, selectableType) => selectableType === "Sentence" ? parseSentences(text) : parseWords(text);
 function getSegmentState(segmentId, selectedIds, correctAnswerIds, isPreviewMode2, isValidating) {
   const isSegmentSelected = selectedIds.includes(segmentId);
   const isInCorrectAnswers = correctAnswerIds.includes(segmentId);
@@ -19708,14 +19750,14 @@ init_fn = function() {
 let SvelteSet = _SvelteSet;
 var root_3$1 = /* @__PURE__ */ from_html(`<br/>`);
 var root_5 = /* @__PURE__ */ from_html(`<span class="segment-punctuation" aria-hidden="true"><!></span>`);
-var root_8 = /* @__PURE__ */ from_html(`<span class="segment-leading-punct" aria-hidden="true"> </span>`);
+var root_8 = /* @__PURE__ */ from_html(`<span class="segment-leading-punct" aria-hidden="true"><!></span>`);
 var root_9 = /* @__PURE__ */ from_html(`<span class="selectable-segment-missing-badge" aria-hidden="true" data-testid="select-mis-ans-tt">Missing answer</span>`);
 var root_10 = /* @__PURE__ */ from_html(`<span aria-hidden="true" class="selectable-segment-deselect-icon" data-testid="select-close-icon"><!></span>`);
 var root_12 = /* @__PURE__ */ from_html(`<span aria-hidden="true" class="selectable-segment-status-icon"><!></span>`);
 var root_13 = /* @__PURE__ */ from_html(`<span class="sr-only">Correct answer</span>`);
 var root_14 = /* @__PURE__ */ from_html(`<span class="sr-only">Incorrect answer</span>`);
 var root_15 = /* @__PURE__ */ from_html(`<span class="sr-only">Missing answer</span>`);
-var root_16 = /* @__PURE__ */ from_html(`<span class="segment-trailing-punct" aria-hidden="true"> </span>`);
+var root_16 = /* @__PURE__ */ from_html(`<span class="segment-trailing-punct" aria-hidden="true"><!></span>`);
 var root_7 = /* @__PURE__ */ from_html(`<span class="segment-word-group"><!><span role="button"><!><span class="selectable-segment-text"><!><!></span><!><!><!></span><!></span>`);
 var root_18 = /* @__PURE__ */ from_html(`<span class="selectable-segment-missing-badge" aria-hidden="true" data-testid="select-mis-ans-tt">Missing answer</span>`);
 var root_19 = /* @__PURE__ */ from_html(`<span aria-hidden="true" class="selectable-segment-deselect-icon" data-testid="select-close-icon"><!></span>`);
@@ -19736,7 +19778,7 @@ var root_37 = /* @__PURE__ */ from_html(`<!><!>`, 1);
 var root_41 = /* @__PURE__ */ from_html(`<span class="sr-only">Correct answer</span>`);
 var root_42 = /* @__PURE__ */ from_html(`<span class="sr-only">Incorrect answer</span>`);
 var root_43 = /* @__PURE__ */ from_html(`<span class="sr-only">Missing answer</span>`);
-var root_44 = /* @__PURE__ */ from_html(`<span class="segment-trailing-punct" aria-hidden="true"> </span>`);
+var root_44 = /* @__PURE__ */ from_html(`<span class="segment-trailing-punct" aria-hidden="true"><!></span>`);
 var root_31 = /* @__PURE__ */ from_html(`<span role="button"><!><span class="selectable-segment-text"><!></span><!><!><!></span><!>`, 1);
 var root_28 = /* @__PURE__ */ from_html(`<span></span>`);
 var root = /* @__PURE__ */ from_html(`<main class="selectable-text-passage" aria-describedby="passage-reader" data-testid="select-passage-ctr"><span id="passage-reader" class="sr-only"> </span> <div><!></div></main>`);
@@ -19755,7 +19797,7 @@ function SelectableTextInteractionContent($$anchor, $$props) {
   const { stripTags: stripTags2, decodeHtmlEntities: decodeHtmlEntities2 } = htmlUtils;
   let passagePlainText = /* @__PURE__ */ user_derived(() => segments.map((s) => {
     if (s.isLineBreak) return " ";
-    return (s.leadingPunctuation ?? "") + decodeHtmlEntities2(stripTags2(s.text)) + (s.trailingPunctuation ?? "");
+    return stripTags2(s.leadingPunctuation ?? "") + decodeHtmlEntities2(stripTags2(s.text)) + stripTags2(s.trailingPunctuation ?? "");
   }).join(" ").replace(/\s+/g, " ").trim());
   const getSegmentAriaLabel = (segment, seg, segmentId) => {
     const text = stripTags2(segment.text);
@@ -20032,9 +20074,9 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                     {
                       var consequent_2 = ($$anchor7) => {
                         var span_3 = root_8();
-                        var text_2 = child(span_3, true);
+                        var node_7 = child(span_3);
+                        html(node_7, () => get$1(segment).leadingPunctuation);
                         reset(span_3);
-                        template_effect(() => set_text(text_2, get$1(segment).leadingPunctuation));
                         append($$anchor7, span_3);
                       };
                       if_block(node_6, ($$render) => {
@@ -20044,39 +20086,39 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                     var span_4 = sibling(node_6);
                     span_4.__click = () => handleSegmentClick(get$1(segment).id);
                     span_4.__keydown = (e2) => handleSegmentKeydown(e2, get$1(segment).id);
-                    var node_7 = child(span_4);
+                    var node_8 = child(span_4);
                     {
                       var consequent_3 = ($$anchor7) => {
                         var span_5 = root_9();
                         append($$anchor7, span_5);
                       };
-                      if_block(node_7, ($$render) => {
+                      if_block(node_8, ($$render) => {
                         if (get$1(computed_const).seg.isMissing) $$render(consequent_3);
                       });
                     }
-                    var span_6 = sibling(node_7);
-                    var node_8 = child(span_6);
-                    html(node_8, () => get$1(segment).text);
-                    var node_9 = sibling(node_8);
+                    var span_6 = sibling(node_8);
+                    var node_9 = child(span_6);
+                    html(node_9, () => get$1(segment).text);
+                    var node_10 = sibling(node_9);
                     {
                       var consequent_4 = ($$anchor7) => {
                         var span_7 = root_10();
-                        var node_10 = child(span_7);
-                        SvgLoader(node_10, { svgName: "crossIcon", className: "deselect-icon" });
+                        var node_11 = child(span_7);
+                        SvgLoader(node_11, { svgName: "crossIcon", className: "deselect-icon" });
                         reset(span_7);
                         append($$anchor7, span_7);
                       };
                       var alternate = ($$anchor7) => {
                         var fragment_4 = comment();
-                        var node_11 = first_child(fragment_4);
+                        var node_12 = first_child(fragment_4);
                         {
                           var consequent_5 = ($$anchor8) => {
                             var span_8 = root_12();
-                            var node_12 = child(span_8);
+                            var node_13 = child(span_8);
                             {
                               let $0 = /* @__PURE__ */ user_derived(() => get$1(computed_const).seg.isCorrect ? "successSolid" : "errorSolid");
                               let $1 = /* @__PURE__ */ user_derived(() => get$1(computed_const).seg.isCorrect ? "correct-icon" : "incorrect-icon");
-                              SvgLoader(node_12, {
+                              SvgLoader(node_13, {
                                 get svgName() {
                                   return get$1($0);
                                 },
@@ -20090,7 +20132,7 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                             append($$anchor8, span_8);
                           };
                           if_block(
-                            node_11,
+                            node_12,
                             ($$render) => {
                               if (get$1(computed_const).seg.isCorrect || get$1(computed_const).seg.isIncorrect) $$render(consequent_5);
                             },
@@ -20099,53 +20141,53 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                         }
                         append($$anchor7, fragment_4);
                       };
-                      if_block(node_9, ($$render) => {
+                      if_block(node_10, ($$render) => {
                         if (get$1(computed_const).seg.isSegmentSelected && !get$1(sharedState).isValidating && !get$1(sharedState).isPreviewMode) $$render(consequent_4);
                         else $$render(alternate, false);
                       });
                     }
                     reset(span_6);
-                    var node_13 = sibling(span_6);
+                    var node_14 = sibling(span_6);
                     {
                       var consequent_6 = ($$anchor7) => {
                         var span_9 = root_13();
                         append($$anchor7, span_9);
                       };
-                      if_block(node_13, ($$render) => {
+                      if_block(node_14, ($$render) => {
                         if (get$1(computed_const).seg.isCorrect) $$render(consequent_6);
                       });
                     }
-                    var node_14 = sibling(node_13);
+                    var node_15 = sibling(node_14);
                     {
                       var consequent_7 = ($$anchor7) => {
                         var span_10 = root_14();
                         append($$anchor7, span_10);
                       };
-                      if_block(node_14, ($$render) => {
+                      if_block(node_15, ($$render) => {
                         if (get$1(computed_const).seg.isIncorrect) $$render(consequent_7);
                       });
                     }
-                    var node_15 = sibling(node_14);
+                    var node_16 = sibling(node_15);
                     {
                       var consequent_8 = ($$anchor7) => {
                         var span_11 = root_15();
                         append($$anchor7, span_11);
                       };
-                      if_block(node_15, ($$render) => {
+                      if_block(node_16, ($$render) => {
                         if (get$1(computed_const).seg.isMissing) $$render(consequent_8);
                       });
                     }
                     reset(span_4);
-                    var node_16 = sibling(span_4);
+                    var node_17 = sibling(span_4);
                     {
                       var consequent_9 = ($$anchor7) => {
                         var span_12 = root_16();
-                        var text_3 = child(span_12, true);
+                        var node_18 = child(span_12);
+                        html(node_18, () => get$1(segment).trailingPunctuation);
                         reset(span_12);
-                        template_effect(() => set_text(text_3, get$1(segment).trailingPunctuation));
                         append($$anchor7, span_12);
                       };
-                      if_block(node_16, ($$render) => {
+                      if_block(node_17, ($$render) => {
                         if (get$1(segment).trailingPunctuation) $$render(consequent_9);
                       });
                     }
@@ -20174,39 +20216,39 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                     var span_13 = root_17();
                     span_13.__click = () => handleSegmentClick(get$1(segment).id);
                     span_13.__keydown = (e2) => handleSegmentKeydown(e2, get$1(segment).id);
-                    var node_17 = child(span_13);
+                    var node_19 = child(span_13);
                     {
                       var consequent_11 = ($$anchor7) => {
                         var span_14 = root_18();
                         append($$anchor7, span_14);
                       };
-                      if_block(node_17, ($$render) => {
+                      if_block(node_19, ($$render) => {
                         if (get$1(computed_const).seg.isMissing) $$render(consequent_11);
                       });
                     }
-                    var span_15 = sibling(node_17);
-                    var node_18 = child(span_15);
-                    html(node_18, () => get$1(segment).text);
-                    var node_19 = sibling(node_18);
+                    var span_15 = sibling(node_19);
+                    var node_20 = child(span_15);
+                    html(node_20, () => get$1(segment).text);
+                    var node_21 = sibling(node_20);
                     {
                       var consequent_12 = ($$anchor7) => {
                         var span_16 = root_19();
-                        var node_20 = child(span_16);
-                        SvgLoader(node_20, { svgName: "crossIcon", className: "deselect-icon" });
+                        var node_22 = child(span_16);
+                        SvgLoader(node_22, { svgName: "crossIcon", className: "deselect-icon" });
                         reset(span_16);
                         append($$anchor7, span_16);
                       };
                       var alternate_1 = ($$anchor7) => {
                         var fragment_5 = comment();
-                        var node_21 = first_child(fragment_5);
+                        var node_23 = first_child(fragment_5);
                         {
                           var consequent_13 = ($$anchor8) => {
                             var span_17 = root_21();
-                            var node_22 = child(span_17);
+                            var node_24 = child(span_17);
                             {
                               let $0 = /* @__PURE__ */ user_derived(() => get$1(computed_const).seg.isCorrect ? "successSolid" : "errorSolid");
                               let $1 = /* @__PURE__ */ user_derived(() => get$1(computed_const).seg.isCorrect ? "correct-icon" : "incorrect-icon");
-                              SvgLoader(node_22, {
+                              SvgLoader(node_24, {
                                 get svgName() {
                                   return get$1($0);
                                 },
@@ -20220,7 +20262,7 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                             append($$anchor8, span_17);
                           };
                           if_block(
-                            node_21,
+                            node_23,
                             ($$render) => {
                               if (get$1(computed_const).seg.isCorrect || get$1(computed_const).seg.isIncorrect) $$render(consequent_13);
                             },
@@ -20229,39 +20271,39 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                         }
                         append($$anchor7, fragment_5);
                       };
-                      if_block(node_19, ($$render) => {
+                      if_block(node_21, ($$render) => {
                         if (get$1(computed_const).seg.isSegmentSelected && !get$1(sharedState).isValidating && !get$1(sharedState).isPreviewMode) $$render(consequent_12);
                         else $$render(alternate_1, false);
                       });
                     }
                     reset(span_15);
-                    var node_23 = sibling(span_15);
+                    var node_25 = sibling(span_15);
                     {
                       var consequent_14 = ($$anchor7) => {
                         var span_18 = root_22();
                         append($$anchor7, span_18);
                       };
-                      if_block(node_23, ($$render) => {
+                      if_block(node_25, ($$render) => {
                         if (get$1(computed_const).seg.isCorrect) $$render(consequent_14);
                       });
                     }
-                    var node_24 = sibling(node_23);
+                    var node_26 = sibling(node_25);
                     {
                       var consequent_15 = ($$anchor7) => {
                         var span_19 = root_23();
                         append($$anchor7, span_19);
                       };
-                      if_block(node_24, ($$render) => {
+                      if_block(node_26, ($$render) => {
                         if (get$1(computed_const).seg.isIncorrect) $$render(consequent_15);
                       });
                     }
-                    var node_25 = sibling(node_24);
+                    var node_27 = sibling(node_26);
                     {
                       var consequent_16 = ($$anchor7) => {
                         var span_20 = root_24();
                         append($$anchor7, span_20);
                       };
-                      if_block(node_25, ($$render) => {
+                      if_block(node_27, ($$render) => {
                         if (get$1(computed_const).seg.isMissing) $$render(consequent_16);
                       });
                     }
@@ -20315,10 +20357,10 @@ function SelectableTextInteractionContent($$anchor, $$props) {
     };
     var alternate_10 = ($$anchor2) => {
       var fragment_6 = comment();
-      var node_26 = first_child(fragment_6);
-      each(node_26, 19, () => sentenceDisplayRows, (row, rowIdx) => Array.isArray(row) ? segments[row[0]].id : `break-${rowIdx}`, ($$anchor3, row) => {
+      var node_28 = first_child(fragment_6);
+      each(node_28, 19, () => sentenceDisplayRows, (row, rowIdx) => Array.isArray(row) ? segments[row[0]].id : `break-${rowIdx}`, ($$anchor3, row) => {
         var fragment_7 = comment();
-        var node_27 = first_child(fragment_7);
+        var node_29 = first_child(fragment_7);
         {
           var consequent_18 = ($$anchor4) => {
             var br_1 = root_27();
@@ -20334,12 +20376,12 @@ function SelectableTextInteractionContent($$anchor, $$props) {
               });
               const isSessionLocked = /* @__PURE__ */ user_derived(() => get$1(sharedState).isSessionMode && get$1(sharedState).isValidating && !get$1(computed_const_1).seg.isMissing);
               var fragment_8 = comment();
-              var node_28 = first_child(fragment_8);
+              var node_30 = first_child(fragment_8);
               {
                 var consequent_19 = ($$anchor6) => {
                   var span_22 = root_30();
-                  var node_29 = child(span_22);
-                  html(node_29, () => get$1(segment).text);
+                  var node_31 = child(span_22);
+                  html(node_31, () => get$1(segment).text);
                   reset(span_22);
                   append($$anchor6, span_22);
                 };
@@ -20348,18 +20390,18 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                   var span_23 = first_child(fragment_9);
                   span_23.__click = () => handleSegmentClick(get$1(segment).id);
                   span_23.__keydown = (e2) => handleSegmentKeydown(e2, get$1(segment).id);
-                  var node_30 = child(span_23);
+                  var node_32 = child(span_23);
                   {
                     var consequent_20 = ($$anchor7) => {
                       var span_24 = root_32();
                       append($$anchor7, span_24);
                     };
-                    if_block(node_30, ($$render) => {
+                    if_block(node_32, ($$render) => {
                       if (get$1(computed_const_1).seg.isMissing) $$render(consequent_20);
                     });
                   }
-                  var span_25 = sibling(node_30);
-                  var node_31 = child(span_25);
+                  var span_25 = sibling(node_32);
+                  var node_33 = child(span_25);
                   {
                     var consequent_23 = ($$anchor7) => {
                       const computed_const_2 = /* @__PURE__ */ user_derived(() => {
@@ -20367,31 +20409,31 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                         return { bodyText, lastWord };
                       });
                       var fragment_10 = root_33();
-                      var node_32 = first_child(fragment_10);
-                      html(node_32, () => get$1(computed_const_2).bodyText);
-                      var span_26 = sibling(node_32);
-                      var node_33 = child(span_26);
-                      html(node_33, () => get$1(computed_const_2).lastWord);
-                      var node_34 = sibling(node_33);
+                      var node_34 = first_child(fragment_10);
+                      html(node_34, () => get$1(computed_const_2).bodyText);
+                      var span_26 = sibling(node_34);
+                      var node_35 = child(span_26);
+                      html(node_35, () => get$1(computed_const_2).lastWord);
+                      var node_36 = sibling(node_35);
                       {
                         var consequent_21 = ($$anchor8) => {
                           var span_27 = root_34();
-                          var node_35 = child(span_27);
-                          SvgLoader(node_35, { svgName: "crossIcon", className: "deselect-icon" });
+                          var node_37 = child(span_27);
+                          SvgLoader(node_37, { svgName: "crossIcon", className: "deselect-icon" });
                           reset(span_27);
                           append($$anchor8, span_27);
                         };
                         var alternate_5 = ($$anchor8) => {
                           var fragment_11 = comment();
-                          var node_36 = first_child(fragment_11);
+                          var node_38 = first_child(fragment_11);
                           {
                             var consequent_22 = ($$anchor9) => {
                               var span_28 = root_36();
-                              var node_37 = child(span_28);
+                              var node_39 = child(span_28);
                               {
                                 let $0 = /* @__PURE__ */ user_derived(() => get$1(computed_const_1).seg.isCorrect ? "successSolid" : "errorSolid");
                                 let $1 = /* @__PURE__ */ user_derived(() => get$1(computed_const_1).seg.isCorrect ? "correct-icon" : "incorrect-icon");
-                                SvgLoader(node_37, {
+                                SvgLoader(node_39, {
                                   get svgName() {
                                     return get$1($0);
                                   },
@@ -20405,7 +20447,7 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                               append($$anchor9, span_28);
                             };
                             if_block(
-                              node_36,
+                              node_38,
                               ($$render) => {
                                 if (get$1(computed_const_1).seg.isCorrect || get$1(computed_const_1).seg.isIncorrect) $$render(consequent_22);
                               },
@@ -20414,7 +20456,7 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                           }
                           append($$anchor8, fragment_11);
                         };
-                        if_block(node_34, ($$render) => {
+                        if_block(node_36, ($$render) => {
                           if (get$1(computed_const_1).seg.isSegmentSelected && !get$1(sharedState).isValidating && !get$1(sharedState).isPreviewMode) $$render(consequent_21);
                           else $$render(alternate_5, false);
                         });
@@ -20424,28 +20466,28 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                     };
                     var alternate_7 = ($$anchor7) => {
                       var fragment_12 = root_37();
-                      var node_38 = first_child(fragment_12);
-                      html(node_38, () => get$1(segment).text);
-                      var node_39 = sibling(node_38);
+                      var node_40 = first_child(fragment_12);
+                      html(node_40, () => get$1(segment).text);
+                      var node_41 = sibling(node_40);
                       {
                         var consequent_24 = ($$anchor8) => {
                           var span_29 = root_38();
-                          var node_40 = child(span_29);
-                          SvgLoader(node_40, { svgName: "crossIcon", className: "deselect-icon" });
+                          var node_42 = child(span_29);
+                          SvgLoader(node_42, { svgName: "crossIcon", className: "deselect-icon" });
                           reset(span_29);
                           append($$anchor8, span_29);
                         };
                         var alternate_6 = ($$anchor8) => {
                           var fragment_13 = comment();
-                          var node_41 = first_child(fragment_13);
+                          var node_43 = first_child(fragment_13);
                           {
                             var consequent_25 = ($$anchor9) => {
                               var span_30 = root_40();
-                              var node_42 = child(span_30);
+                              var node_44 = child(span_30);
                               {
                                 let $0 = /* @__PURE__ */ user_derived(() => get$1(computed_const_1).seg.isCorrect ? "successSolid" : "errorSolid");
                                 let $1 = /* @__PURE__ */ user_derived(() => get$1(computed_const_1).seg.isCorrect ? "correct-icon" : "incorrect-icon");
-                                SvgLoader(node_42, {
+                                SvgLoader(node_44, {
                                   get svgName() {
                                     return get$1($0);
                                   },
@@ -20459,7 +20501,7 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                               append($$anchor9, span_30);
                             };
                             if_block(
-                              node_41,
+                              node_43,
                               ($$render) => {
                                 if (get$1(computed_const_1).seg.isCorrect || get$1(computed_const_1).seg.isIncorrect) $$render(consequent_25);
                               },
@@ -20468,60 +20510,60 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                           }
                           append($$anchor8, fragment_13);
                         };
-                        if_block(node_39, ($$render) => {
+                        if_block(node_41, ($$render) => {
                           if (get$1(computed_const_1).seg.isSegmentSelected && !get$1(sharedState).isValidating && !get$1(sharedState).isPreviewMode) $$render(consequent_24);
                           else $$render(alternate_6, false);
                         });
                       }
                       append($$anchor7, fragment_12);
                     };
-                    if_block(node_31, ($$render) => {
+                    if_block(node_33, ($$render) => {
                       if (!isWord) $$render(consequent_23);
                       else $$render(alternate_7, false);
                     });
                   }
                   reset(span_25);
-                  var node_43 = sibling(span_25);
+                  var node_45 = sibling(span_25);
                   {
                     var consequent_26 = ($$anchor7) => {
                       var span_31 = root_41();
                       append($$anchor7, span_31);
                     };
-                    if_block(node_43, ($$render) => {
+                    if_block(node_45, ($$render) => {
                       if (get$1(computed_const_1).seg.isCorrect) $$render(consequent_26);
                     });
                   }
-                  var node_44 = sibling(node_43);
+                  var node_46 = sibling(node_45);
                   {
                     var consequent_27 = ($$anchor7) => {
                       var span_32 = root_42();
                       append($$anchor7, span_32);
                     };
-                    if_block(node_44, ($$render) => {
+                    if_block(node_46, ($$render) => {
                       if (get$1(computed_const_1).seg.isIncorrect) $$render(consequent_27);
                     });
                   }
-                  var node_45 = sibling(node_44);
+                  var node_47 = sibling(node_46);
                   {
                     var consequent_28 = ($$anchor7) => {
                       var span_33 = root_43();
                       append($$anchor7, span_33);
                     };
-                    if_block(node_45, ($$render) => {
+                    if_block(node_47, ($$render) => {
                       if (get$1(computed_const_1).seg.isMissing) $$render(consequent_28);
                     });
                   }
                   reset(span_23);
-                  var node_46 = sibling(span_23);
+                  var node_48 = sibling(span_23);
                   {
                     var consequent_29 = ($$anchor7) => {
                       var span_34 = root_44();
-                      var text_4 = child(span_34, true);
+                      var node_49 = child(span_34);
+                      html(node_49, () => get$1(segment).trailingPunctuation);
                       reset(span_34);
-                      template_effect(() => set_text(text_4, get$1(segment).trailingPunctuation));
                       append($$anchor7, span_34);
                     };
-                    if_block(node_46, ($$render) => {
+                    if_block(node_48, ($$render) => {
                       if (get$1(segment).trailingPunctuation) $$render(consequent_29);
                     });
                   }
@@ -20545,7 +20587,7 @@ function SelectableTextInteractionContent($$anchor, $$props) {
                   event("focus", span_23, () => handleSegmentFocus(get$1(segment).id));
                   append($$anchor6, fragment_9);
                 };
-                if_block(node_28, ($$render) => {
+                if_block(node_30, ($$render) => {
                   if (get$1(segment).isPunctuation) $$render(consequent_19);
                   else $$render(alternate_8, false);
                 });
@@ -20555,7 +20597,7 @@ function SelectableTextInteractionContent($$anchor, $$props) {
             reset(span_21);
             append($$anchor4, span_21);
           };
-          if_block(node_27, ($$render) => {
+          if_block(node_29, ($$render) => {
             if (get$1(row) === "break") $$render(consequent_18);
             else $$render(alternate_9, false);
           });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eat-js-sdk",
-  "version": "2.3.6",
+  "version": "2.3.8",
   "change version": "2.3.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [