@khanacademy/perseus 19.5.1 → 19.6.1

package/dist/es/index.js

@@ -24844,22 +24844,19 @@ class Explanation extends React.Component {
     };
   }
   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.createElement("div", {
+      promptContainer = /*#__PURE__*/React.createElement("div", {
         className: css(styles$o.linkContainer)
       }, /*#__PURE__*/React.createElement("a", {
         className: css(styles$o.mobileExplanationLink),
@@ -24867,7 +24864,7 @@ class Explanation extends React.Component {
         onClick: onClick,
         role: "button",
         "aria-expanded": this.state.expanded
-      }, linkAnchor), this.state.expanded && /*#__PURE__*/React.createElement("svg", {
+      }, promptText), this.state.expanded && /*#__PURE__*/React.createElement("svg", {
         className: css(styles$o.disclosureArrow)
       }, /*#__PURE__*/React.createElement("polygon", {
         style: {
@@ -24876,41 +24873,18 @@ class Explanation extends React.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.createElement("div", {
-          className: css(styles$o.linkContainer, styles$o.articleLink)
-        }, /*#__PURE__*/React.createElement(Link, {
-          className: 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.createElement("div", {
-          className: css(styles$o.linkContainer, styles$o.exerciseLink)
-        }, /*#__PURE__*/React.createElement(Link, {
-          className: 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.createElement(Clickable, {
+        onClick: onClick,
+        "aria-expanded": this.state.expanded
+      }, () => /*#__PURE__*/React.createElement(View, {
+        style: viewStyling
+      }, `[${promptText}]`));
     }
     const expandedStyle = isMobile ? styles$o.contentExpandedMobile : styles$o.contentExpanded;
     return /*#__PURE__*/React.createElement("div", {
       className: css(styles$o.container)
-    }, linkContainer, this.state.expanded && /*#__PURE__*/React.createElement("div", {
+    }, promptContainer, this.state.expanded && /*#__PURE__*/React.createElement("div", {
       className: css(styles$o.content, isMobile && styles$o.contentMobile, this.state.expanded && expandedStyle)
       // eslint-disable-next-line react/no-string-refs
       ,
@@ -41580,7 +41554,7 @@ const init = function init(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";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -41682,7 +41656,24 @@ class ArticleRenderer extends React.Component {
       }
     };
     this._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(_extends({}, section, {
+              content: paragraph
+            }));
+          });
+        }
+        return paragraphs;
+      }
+      return sections;
     };
   }
   componentDidMount() {