@atlaskit/help-article 6.0.24 → 6.0.26

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/help-article
 
+## 6.0.26
+
+### Patch Changes
+
+- [`6a82d7964a37b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a82d7964a37b) -
+  Icon entrypoint migration
+- Updated dependencies
+
+## 6.0.25
+
+### Patch Changes
+
+- [`a7e68749821fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a7e68749821fe) -
+  [ux] fix issue where link inside article was opening within an iframe
+
 ## 6.0.24
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -5,7 +5,8 @@
 		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__help-article",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/afm-jira/tsconfig.json

@@ -3,9 +3,10 @@
 	"compilerOptions": {
 		"declaration": true,
 		"target": "es5",
-		"outDir": "../../../../../tsDist/@atlaskit__help-article/app",
+		"outDir": "../../../../../jira/tsDist/@atlaskit__help-article/app",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/afm-products/tsconfig.json

@@ -5,7 +5,8 @@
 		"target": "es5",
 		"outDir": "../../../../../tsDist/@atlaskit__help-article/app",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/dist/cjs/components/ArticleBody/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ArticleBody = void 0;
+exports.processLinksForNewTab = exports.default = exports.ArticleBody = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -18,6 +18,40 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 var IFRAME_CONTAINER_ID = 'help-iframe-container';
 var IFRAME_ID = 'help-iframe';
+
+/**
+ * Processes HTML content to ensure all links open in a new tab
+ * @param htmlContent - The HTML string to process
+ * @returns The processed HTML with target="_blank" added to all links
+ */
+var processLinksForNewTab = exports.processLinksForNewTab = function processLinksForNewTab(htmlContent) {
+  // Create a temporary DOM element to parse the HTML
+  var tempDiv = document.createElement('div');
+  tempDiv.innerHTML = htmlContent;
+
+  // Find all anchor tags
+  var links = tempDiv.querySelectorAll('a[href]');
+
+  // Process each link
+  links.forEach(function (link) {
+    // Add target="_blank" if no target is specified or if target is not already "_blank"
+    if (!link.hasAttribute('target') || link.getAttribute('target') !== '_blank') {
+      link.setAttribute('target', '_blank');
+    }
+
+    // Always add security attributes for all external links
+    var existingRel = link.getAttribute('rel');
+    var relValues = existingRel ? existingRel.split(' ') : [];
+    if (!relValues.includes('noopener')) {
+      relValues.push('noopener');
+    }
+    if (!relValues.includes('noreferrer')) {
+      relValues.push('noreferrer');
+    }
+    link.setAttribute('rel', relValues.join(' '));
+  });
+  return tempDiv.innerHTML;
+};
 var ArticleBody = exports.ArticleBody = function ArticleBody(props) {
   /**
    * Set article height
@@ -96,7 +130,9 @@ var ArticleBody = exports.ArticleBody = function ArticleBody(props) {
             if (newIframe !== null) {
               var iframeDocument = newIframe.document;
               iframeDocument.open();
-              iframeDocument.write("<div>".concat(body, "</div>"));
+              // Process the HTML to ensure all links open in new tabs
+              var processedBody = processLinksForNewTab(body);
+              iframeDocument.write("<div>".concat(processedBody, "</div>"));
               iframeDocument.close();
               var head = iframeDocument.head || iframeDocument.getElementsByTagName('head')[0];
               var style = iframeDocument.createElement('style');

package/dist/cjs/components/HelpArticle.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _linkExternalShortcut = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-external--shortcut"));
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _HelpArticle = require("../model/HelpArticle");
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -26,7 +26,7 @@ var HelpArticle = function HelpArticle(props) {
     target: "_blank"
   }, /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "large"
-  }, title, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, " "), /*#__PURE__*/_react.default.createElement(_linkExternalShortcut.default, {
+  }, title, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, " "), /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
     color: "currentColor",
     label: "link icon",
     LEGACY_size: "small"

package/dist/cjs/index.js

@@ -16,5 +16,12 @@ Object.defineProperty(exports, "default", {
     return _HelpArticle.default;
   }
 });
+Object.defineProperty(exports, "processLinksForNewTab", {
+  enumerable: true,
+  get: function get() {
+    return _ArticleBody.processLinksForNewTab;
+  }
+});
 var _HelpArticle = _interopRequireDefault(require("./components/HelpArticle"));
-var _HelpArticle2 = require("./model/HelpArticle");
+var _HelpArticle2 = require("./model/HelpArticle");
+var _ArticleBody = require("./components/ArticleBody");

package/dist/es2019/components/ArticleBody/index.js

@@ -9,6 +9,40 @@ import resetCSS from './resetCss';
 import { ArticleFrame } from './styled';
 const IFRAME_CONTAINER_ID = 'help-iframe-container';
 const IFRAME_ID = 'help-iframe';
+
+/**
+ * Processes HTML content to ensure all links open in a new tab
+ * @param htmlContent - The HTML string to process
+ * @returns The processed HTML with target="_blank" added to all links
+ */
+export const processLinksForNewTab = htmlContent => {
+  // Create a temporary DOM element to parse the HTML
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = htmlContent;
+
+  // Find all anchor tags
+  const links = tempDiv.querySelectorAll('a[href]');
+
+  // Process each link
+  links.forEach(link => {
+    // Add target="_blank" if no target is specified or if target is not already "_blank"
+    if (!link.hasAttribute('target') || link.getAttribute('target') !== '_blank') {
+      link.setAttribute('target', '_blank');
+    }
+
+    // Always add security attributes for all external links
+    const existingRel = link.getAttribute('rel');
+    const relValues = existingRel ? existingRel.split(' ') : [];
+    if (!relValues.includes('noopener')) {
+      relValues.push('noopener');
+    }
+    if (!relValues.includes('noreferrer')) {
+      relValues.push('noreferrer');
+    }
+    link.setAttribute('rel', relValues.join(' '));
+  });
+  return tempDiv.innerHTML;
+};
 export const ArticleBody = props => {
   /**
    * Set article height
@@ -85,7 +119,9 @@ export const ArticleBody = props => {
             if (newIframe !== null) {
               const iframeDocument = newIframe.document;
               iframeDocument.open();
-              iframeDocument.write(`<div>${body}</div>`);
+              // Process the HTML to ensure all links open in new tabs
+              const processedBody = processLinksForNewTab(body);
+              iframeDocument.write(`<div>${processedBody}</div>`);
               iframeDocument.close();
               const head = iframeDocument.head || iframeDocument.getElementsByTagName('head')[0];
               const style = iframeDocument.createElement('style');

package/dist/es2019/components/HelpArticle.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import Heading from '@atlaskit/heading';
 import { BODY_FORMAT_TYPES } from '../model/HelpArticle';
 import { Text } from '@atlaskit/primitives/compiled';

package/dist/es2019/index.js

@@ -1,2 +1,3 @@
 export { default } from './components/HelpArticle';
-export { BODY_FORMAT_TYPES } from './model/HelpArticle';
+export { BODY_FORMAT_TYPES } from './model/HelpArticle';
+export { processLinksForNewTab } from './components/ArticleBody';

package/dist/esm/components/ArticleBody/index.js

@@ -9,6 +9,40 @@ import resetCSS from './resetCss';
 import { ArticleFrame } from './styled';
 var IFRAME_CONTAINER_ID = 'help-iframe-container';
 var IFRAME_ID = 'help-iframe';
+
+/**
+ * Processes HTML content to ensure all links open in a new tab
+ * @param htmlContent - The HTML string to process
+ * @returns The processed HTML with target="_blank" added to all links
+ */
+export var processLinksForNewTab = function processLinksForNewTab(htmlContent) {
+  // Create a temporary DOM element to parse the HTML
+  var tempDiv = document.createElement('div');
+  tempDiv.innerHTML = htmlContent;
+
+  // Find all anchor tags
+  var links = tempDiv.querySelectorAll('a[href]');
+
+  // Process each link
+  links.forEach(function (link) {
+    // Add target="_blank" if no target is specified or if target is not already "_blank"
+    if (!link.hasAttribute('target') || link.getAttribute('target') !== '_blank') {
+      link.setAttribute('target', '_blank');
+    }
+
+    // Always add security attributes for all external links
+    var existingRel = link.getAttribute('rel');
+    var relValues = existingRel ? existingRel.split(' ') : [];
+    if (!relValues.includes('noopener')) {
+      relValues.push('noopener');
+    }
+    if (!relValues.includes('noreferrer')) {
+      relValues.push('noreferrer');
+    }
+    link.setAttribute('rel', relValues.join(' '));
+  });
+  return tempDiv.innerHTML;
+};
 export var ArticleBody = function ArticleBody(props) {
   /**
    * Set article height
@@ -87,7 +121,9 @@ export var ArticleBody = function ArticleBody(props) {
             if (newIframe !== null) {
               var iframeDocument = newIframe.document;
               iframeDocument.open();
-              iframeDocument.write("<div>".concat(body, "</div>"));
+              // Process the HTML to ensure all links open in new tabs
+              var processedBody = processLinksForNewTab(body);
+              iframeDocument.write("<div>".concat(processedBody, "</div>"));
               iframeDocument.close();
               var head = iframeDocument.head || iframeDocument.getElementsByTagName('head')[0];
               var style = iframeDocument.createElement('style');

package/dist/esm/components/HelpArticle.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import Heading from '@atlaskit/heading';
 import { BODY_FORMAT_TYPES } from '../model/HelpArticle';
 import { Text } from '@atlaskit/primitives/compiled';

package/dist/esm/index.js

@@ -1,2 +1,3 @@
 export { default } from './components/HelpArticle';
-export { BODY_FORMAT_TYPES } from './model/HelpArticle';
+export { BODY_FORMAT_TYPES } from './model/HelpArticle';
+export { processLinksForNewTab } from './components/ArticleBody';

package/dist/types/components/ArticleBody/index.d.ts

@@ -7,5 +7,11 @@ export interface Props {
     onArticleRenderBegin?(): void;
     onArticleRenderDone?(): void;
 }
+/**
+ * Processes HTML content to ensure all links open in a new tab
+ * @param htmlContent - The HTML string to process
+ * @returns The processed HTML with target="_blank" added to all links
+ */
+export declare const processLinksForNewTab: (htmlContent: string) => string;
 export declare const ArticleBody: (props: Props) => React.JSX.Element | null;
 export default ArticleBody;

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './components/HelpArticle';
 export { BODY_FORMAT_TYPES } from './model/HelpArticle';
 export type { HelpArticle, AdfDoc } from './model/HelpArticle';
+export { processLinksForNewTab } from './components/ArticleBody';

package/dist/types-ts4.5/components/ArticleBody/index.d.ts

@@ -7,5 +7,11 @@ export interface Props {
     onArticleRenderBegin?(): void;
     onArticleRenderDone?(): void;
 }
+/**
+ * Processes HTML content to ensure all links open in a new tab
+ * @param htmlContent - The HTML string to process
+ * @returns The processed HTML with target="_blank" added to all links
+ */
+export declare const processLinksForNewTab: (htmlContent: string) => string;
 export declare const ArticleBody: (props: Props) => React.JSX.Element | null;
 export default ArticleBody;

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './components/HelpArticle';
 export { BODY_FORMAT_TYPES } from './model/HelpArticle';
 export type { HelpArticle, AdfDoc } from './model/HelpArticle';
+export { processLinksForNewTab } from './components/ArticleBody';

package/docs/0-intro.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { md, code, Example, Props, AtlassianInternalWarning } from '@atlaskit/docs';
 
-const _default_1: any = md`
+const intro: React.ReactElement = md`
   ${(<AtlassianInternalWarning />)}
 
   ## Usage
@@ -34,4 +34,4 @@ const _default_1: any = md`
 
   ${(<Props props={require('!!extract-react-types-loader!../src/components/HelpArticle')} />)}
 `;
-export default _default_1;
+export default intro;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/help-article",
-	"version": "6.0.24",
+	"version": "6.0.26",
 	"description": "A cross-product help-article component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,10 +33,10 @@
 	"dependencies": {
 		"@atlaskit/css-reset": "^7.3.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^29.0.0",
-		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/renderer": "^124.12.0",
-		"@atlaskit/tokens": "^8.0.0",
+		"@atlaskit/icon": "^29.3.0",
+		"@atlaskit/primitives": "^17.0.0",
+		"@atlaskit/renderer": "^124.22.0",
+		"@atlaskit/tokens": "^9.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
 		"lodash": "^4.17.21"