@khanacademy/perseus 19.5.1 → 19.6.1

package/dist/index.js

@@ -24970,22 +24970,19 @@ class Explanation extends React__namespace.Component {
     this.props.trackInteraction();
   };
   render() {
-    const {
-      Link
-    } = this.props.apiOptions.baseElements;
     const {
       isArticle,
       isMobile
     } = this.props.apiOptions;
-    const linkAnchor = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
-    let linkContainer;
+    const promptText = this.state.expanded ? this.props.hidePrompt : this.props.showPrompt;
+    let promptContainer;
 
     // TODO(diedra): This isn't a valid href;
     // change this to a button that looks like a link.
     const href = "javascript:void(0)";
     const onClick = this._onClick;
     if (isMobile) {
-      linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
+      promptContainer = /*#__PURE__*/React__namespace.createElement("div", {
         className: aphrodite.css(styles$o.linkContainer)
       }, /*#__PURE__*/React__namespace.createElement("a", {
         className: aphrodite.css(styles$o.mobileExplanationLink),
@@ -24993,7 +24990,7 @@ class Explanation extends React__namespace.Component {
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
-      }, linkAnchor), this.state.expanded && /*#__PURE__*/React__namespace.createElement("svg", {
+      }, promptText), this.state.expanded && /*#__PURE__*/React__namespace.createElement("svg", {
         className: aphrodite.css(styles$o.disclosureArrow)
       }, /*#__PURE__*/React__namespace.createElement("polygon", {
         style: {
@@ -25002,41 +24999,18 @@ class Explanation extends React__namespace.Component {
         points: `0,${arrowHeight} ` + `${arrowWidth},${arrowHeight} ` + `${arrowWidth / 2},0`
       })));
     } else {
-      if (isArticle) {
-        // NOTE: For articles, the baseElements `Link` may is either be
-        // an anchor tag (if rendered in a modal) or a Wonder Blocks
-        // link component in lesson page, see: `article-page.jsx`.
-        linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-          className: aphrodite.css(styles$o.linkContainer, styles$o.articleLink)
-        }, /*#__PURE__*/React__namespace.createElement(Link, {
-          className: aphrodite.css(styles$o.explanationLink)
-          // HACK(michaelpolyak): WB Link doesn't passthrough
-          // class name.
-          ,
-          style: styles$o.explanationLink,
-          href: href,
-          onClick: onClick,
-          role: "button",
-          "aria-expanded": this.state.expanded
-        }, `[${linkAnchor}]`));
-      } else {
-        // NOTE: For exercises, the baseElements `Link` is an
-        // anchor tag, see: `perseus-api.jsx`.
-        linkContainer = /*#__PURE__*/React__namespace.createElement("div", {
-          className: aphrodite.css(styles$o.linkContainer, styles$o.exerciseLink)
-        }, /*#__PURE__*/React__namespace.createElement(Link, {
-          className: aphrodite.css(styles$o.explanationLink),
-          href: href,
-          onClick: onClick,
-          role: "button",
-          "aria-expanded": this.state.expanded
-        }, `[${linkAnchor}]`));
-      }
+      const viewStyling = isArticle ? [styles$o.explanationLink, styles$o.articleLink] : [styles$o.explanationLink, styles$o.exerciseLink];
+      promptContainer = /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
+        onClick: onClick,
+        "aria-expanded": this.state.expanded
+      }, () => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+        style: viewStyling
+      }, `[${promptText}]`));
     }
     const expandedStyle = isMobile ? styles$o.contentExpandedMobile : styles$o.contentExpanded;
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$o.container)
-    }, linkContainer, this.state.expanded && /*#__PURE__*/React__namespace.createElement("div", {
+    }, promptContainer, this.state.expanded && /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$o.content, isMobile && styles$o.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
@@ -41718,7 +41692,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "19.5.1";
+const libVersion = "19.6.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -41831,7 +41805,25 @@ class ArticleRenderer extends React__namespace.Component {
     }
   };
   _sections = () => {
-    return Array.isArray(this.props.json) ? this.props.json : [this.props.json];
+    const sections = Array.isArray(this.props.json) ? this.props.json : [this.props.json];
+
+    // In JIPT context we split sections to paragraphs in order match the
+    // translatable strings found on Crowdin when rendering articles in
+    // the WYSIWYG mode for translation. This is needed for the jipt.js
+    // integration in order to attribute the rendered strings on Crowdin.
+    if (getDependencies().JIPT.useJIPT) {
+      const paragraphs = [];
+      for (const section of sections) {
+        JiptParagraphs.parseToArray(section.content).forEach(paragraph => {
+          paragraphs.push({
+            ...section,
+            content: paragraph
+          });
+        });
+      }
+      return paragraphs;
+    }
+    return sections;
   };
   render() {
     const apiOptions = {