gwchq-textjam 0.2.31 → 0.2.32

package/dist/index.js

@@ -346790,10 +346790,10 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  Tab: () => (/* reexport */ Tab),
-  TabList: () => (/* reexport */ TabList),
-  TabPanel: () => (/* reexport */ TabPanel),
-  Tabs: () => (/* reexport */ Tabs),
+  Tab: () => (/* reexport */ components_Tab),
+  TabList: () => (/* reexport */ components_TabList),
+  TabPanel: () => (/* reexport */ components_TabPanel),
+  Tabs: () => (/* reexport */ components_Tabs),
   resetIdCounter: () => (/* reexport */ uuid_reset)
 });
 
@@ -346942,13 +346942,6 @@ function count_getTabsCount(children) {
   });
   return tabCount;
 }
-function count_getPanelsCount(children) {
-  var panelCount = 0;
-  childrenDeepMap_deepForEach(children, function (child) {
-    if (elementTypes_isTabPanel(child)) panelCount++;
-  });
-  return panelCount;
-}
 ;// ./node_modules/react-tabs/esm/components/UncontrolledTabs.js
 var _excluded = ["children", "className", "disabledTabClassName", "domRef", "focus", "forceRenderTabPanel", "onSelect", "selectedIndex", "selectedTabClassName", "selectedTabPanelClassName", "environment", "disableUpDownKeys"];
 
@@ -346956,10 +346949,6 @@ function UncontrolledTabs_extends() { UncontrolledTabs_extends = Object.assign |
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 
 
 
@@ -346995,219 +346984,135 @@ function determineCanUseActiveElement(environment) {
     // Refer to the following resources:
     // http://stackoverflow.com/a/10982960/369687
     // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12733599
+    // istanbul ignore next
     canUseActiveElement = false;
   }
 }
 
-var UncontrolledTabs = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(UncontrolledTabs, _Component);
-
-  function UncontrolledTabs() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    _this.tabNodes = [];
-
-    _this.handleKeyDown = function (e) {
-      var _this$props = _this.props,
-          direction = _this$props.direction,
-          disableUpDownKeys = _this$props.disableUpDownKeys;
-
-      if (_this.isTabFromContainer(e.target)) {
-        var index = _this.props.selectedIndex;
-        var preventDefault = false;
-        var useSelectedIndex = false;
-
-        if (e.keyCode === 32 || e.keyCode === 13) {
-          preventDefault = true;
-          useSelectedIndex = false;
-
-          _this.handleClick(e);
-        }
-
-        if (e.keyCode === 37 || !disableUpDownKeys && e.keyCode === 38) {
-          // Select next tab to the left, validate if up arrow is not disabled
-          if (direction === 'rtl') {
-            index = _this.getNextTab(index);
-          } else {
-            index = _this.getPrevTab(index);
-          }
-
-          preventDefault = true;
-          useSelectedIndex = true;
-        } else if (e.keyCode === 39 || !disableUpDownKeys && e.keyCode === 40) {
-          // Select next tab to the right, validate if down arrow is not disabled
-          if (direction === 'rtl') {
-            index = _this.getPrevTab(index);
-          } else {
-            index = _this.getNextTab(index);
-          }
-
-          preventDefault = true;
-          useSelectedIndex = true;
-        } else if (e.keyCode === 35) {
-          // Select last tab (End key)
-          index = _this.getLastTab();
-          preventDefault = true;
-          useSelectedIndex = true;
-        } else if (e.keyCode === 36) {
-          // Select first tab (Home key)
-          index = _this.getFirstTab();
-          preventDefault = true;
-          useSelectedIndex = true;
-        } // This prevents scrollbars from moving around
-
-
-        if (preventDefault) {
-          e.preventDefault();
-        } // Only use the selected index in the state if we're not using the tabbed index
-
-
-        if (useSelectedIndex) {
-          _this.setSelected(index, e);
-        }
-      }
-    };
-
-    _this.handleClick = function (e) {
-      var node = e.target;
-
-      do {
-        if (_this.isTabFromContainer(node)) {
-          if (isTabDisabled(node)) {
-            return;
-          }
-
-          var index = [].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node);
-
-          _this.setSelected(index, e);
-
-          return;
-        }
-      } while ((node = node.parentNode) != null);
-    };
+var defaultProps = {
+  className: 'react-tabs',
+  focus: false
+};
+var propTypes =  false ? 0 : {};
 
-    return _this;
-  }
+var UncontrolledTabs = function UncontrolledTabs(props) {
+  var tabNodes = (0,external_react_.useRef)([]);
+  var tabIds = (0,external_react_.useRef)([]);
+  var panelIds = (0,external_react_.useRef)([]);
 
-  var _proto = UncontrolledTabs.prototype;
+  var _ref = (0,external_react_.useRef)();
 
-  _proto.setSelected = function setSelected(index, event) {
+  function setSelected(index, event) {
     // Check index boundary
-    if (index < 0 || index >= this.getTabsCount()) return;
-    var _this$props2 = this.props,
-        onSelect = _this$props2.onSelect,
-        selectedIndex = _this$props2.selectedIndex; // Call change event handler
+    if (index < 0 || index >= getTabsCount()) return;
+    var onSelect = props.onSelect,
+        selectedIndex = props.selectedIndex; // Call change event handler
 
     onSelect(index, selectedIndex, event);
-  };
+  }
 
-  _proto.getNextTab = function getNextTab(index) {
-    var count = this.getTabsCount(); // Look for non-disabled tab from index to the last tab on the right
+  function getNextTab(index) {
+    var count = getTabsCount(); // Look for non-disabled tab from index to the last tab on the right
 
     for (var i = index + 1; i < count; i++) {
-      if (!isTabDisabled(this.getTab(i))) {
+      if (!isTabDisabled(getTab(i))) {
         return i;
       }
     } // If no tab found, continue searching from first on left to index
 
 
     for (var _i = 0; _i < index; _i++) {
-      if (!isTabDisabled(this.getTab(_i))) {
+      if (!isTabDisabled(getTab(_i))) {
         return _i;
       }
-    } // No tabs are disabled, return index
+    } // All tabs are disabled, return index
+
+    /* istanbul ignore next */
 
 
     return index;
-  };
+  }
 
-  _proto.getPrevTab = function getPrevTab(index) {
+  function getPrevTab(index) {
     var i = index; // Look for non-disabled tab from index to first tab on the left
 
     while (i--) {
-      if (!isTabDisabled(this.getTab(i))) {
+      if (!isTabDisabled(getTab(i))) {
         return i;
       }
     } // If no tab found, continue searching from last tab on right to index
 
 
-    i = this.getTabsCount();
+    i = getTabsCount();
 
     while (i-- > index) {
-      if (!isTabDisabled(this.getTab(i))) {
+      if (!isTabDisabled(getTab(i))) {
         return i;
       }
-    } // No tabs are disabled, return index
+    } // All tabs are disabled, return index
+
+    /* istanbul ignore next */
 
 
     return index;
-  };
+  }
 
-  _proto.getFirstTab = function getFirstTab() {
-    var count = this.getTabsCount(); // Look for non disabled tab from the first tab
+  function getFirstTab() {
+    var count = getTabsCount(); // Look for non disabled tab from the first tab
 
     for (var i = 0; i < count; i++) {
-      if (!isTabDisabled(this.getTab(i))) {
+      if (!isTabDisabled(getTab(i))) {
         return i;
       }
     }
+    /* istanbul ignore next */
+
 
     return null;
-  };
+  }
 
-  _proto.getLastTab = function getLastTab() {
-    var i = this.getTabsCount(); // Look for non disabled tab from the last tab
+  function getLastTab() {
+    var i = getTabsCount(); // Look for non disabled tab from the last tab
 
     while (i--) {
-      if (!isTabDisabled(this.getTab(i))) {
+      if (!isTabDisabled(getTab(i))) {
         return i;
       }
     }
+    /* istanbul ignore next */
+
 
     return null;
-  };
+  }
 
-  _proto.getTabsCount = function getTabsCount() {
-    var children = this.props.children;
+  function getTabsCount() {
+    var children = props.children;
     return count_getTabsCount(children);
-  };
-
-  _proto.getPanelsCount = function getPanelsCount() {
-    var children = this.props.children;
-    return count_getPanelsCount(children);
-  };
-
-  _proto.getTab = function getTab(index) {
-    return this.tabNodes["tabs-" + index];
-  };
+  }
 
-  _proto.getChildren = function getChildren() {
-    var _this2 = this;
+  function getTab(index) {
+    return tabNodes.current["tabs-" + index];
+  }
 
+  function getChildren() {
     var index = 0;
-    var _this$props3 = this.props,
-        children = _this$props3.children,
-        disabledTabClassName = _this$props3.disabledTabClassName,
-        focus = _this$props3.focus,
-        forceRenderTabPanel = _this$props3.forceRenderTabPanel,
-        selectedIndex = _this$props3.selectedIndex,
-        selectedTabClassName = _this$props3.selectedTabClassName,
-        selectedTabPanelClassName = _this$props3.selectedTabPanelClassName,
-        environment = _this$props3.environment;
-    this.tabIds = this.tabIds || [];
-    this.panelIds = this.panelIds || [];
-    var diff = this.tabIds.length - this.getTabsCount(); // Add ids if new tabs have been added
+    var children = props.children,
+        disabledTabClassName = props.disabledTabClassName,
+        focus = props.focus,
+        forceRenderTabPanel = props.forceRenderTabPanel,
+        selectedIndex = props.selectedIndex,
+        selectedTabClassName = props.selectedTabClassName,
+        selectedTabPanelClassName = props.selectedTabPanelClassName,
+        environment = props.environment;
+    tabIds.current = tabIds.current || [];
+    panelIds.current = panelIds.current || [];
+    var diff = tabIds.current.length - getTabsCount(); // Add ids if new tabs have been added
     // Don't bother removing ids, just keep them in case they are added again
     // This is more efficient, and keeps the uuid counter under control
 
     while (diff++ < 0) {
-      this.tabIds.push(uuid());
-      this.panelIds.push(uuid());
+      tabIds.current.push(uuid());
+      panelIds.current.push(uuid());
     } // Map children to dynamically setup refs
 
 
@@ -347224,10 +347129,11 @@ var UncontrolledTabs = /*#__PURE__*/function (_Component) {
           determineCanUseActiveElement(environment);
         }
 
-        if (canUseActiveElement) {
+        var env = environment || (typeof window !== 'undefined' ? window : undefined);
+
+        if (canUseActiveElement && env) {
           wasTabFocused = external_react_["default"].Children.toArray(child.props.children).filter(elementTypes_isTab).some(function (tab, i) {
-            var env = environment || (typeof window !== 'undefined' ? window : undefined);
-            return env && env.document.activeElement === _this2.getTab(i);
+            return env.document.activeElement === getTab(i);
           });
         }
 
@@ -347237,10 +347143,10 @@ var UncontrolledTabs = /*#__PURE__*/function (_Component) {
             var selected = selectedIndex === listIndex;
             var props = {
               tabRef: function tabRef(node) {
-                _this2.tabNodes[key] = node;
+                tabNodes.current[key] = node;
               },
-              id: _this2.tabIds[listIndex],
-              panelId: _this2.panelIds[listIndex],
+              id: tabIds.current[listIndex],
+              panelId: panelIds.current[listIndex],
               selected: selected,
               focus: selected && (focus || wasTabFocused)
             };
@@ -347251,27 +347157,116 @@ var UncontrolledTabs = /*#__PURE__*/function (_Component) {
           })
         });
       } else if (elementTypes_isTabPanel(child)) {
-        var props = {
-          id: _this2.panelIds[index],
-          tabId: _this2.tabIds[index],
+        var _props = {
+          id: panelIds.current[index],
+          tabId: tabIds.current[index],
           selected: selectedIndex === index
         };
-        if (forceRenderTabPanel) props.forceRender = forceRenderTabPanel;
-        if (selectedTabPanelClassName) props.selectedClassName = selectedTabPanelClassName;
+        if (forceRenderTabPanel) _props.forceRender = forceRenderTabPanel;
+        if (selectedTabPanelClassName) _props.selectedClassName = selectedTabPanelClassName;
         index++;
-        result = /*#__PURE__*/(0,external_react_.cloneElement)(child, props);
+        result = /*#__PURE__*/(0,external_react_.cloneElement)(child, _props);
       }
 
       return result;
     });
-  };
+  }
+
+  function handleKeyDown(e) {
+    var direction = props.direction,
+        disableUpDownKeys = props.disableUpDownKeys;
 
+    if (isTabFromContainer(e.target)) {
+      var index = props.selectedIndex;
+      var preventDefault = false;
+      var useSelectedIndex = false;
+
+      if (e.code === 'Space' || e.keyCode === 32
+      /* space */
+      || e.code === 'Enter' || e.keyCode === 13
+      /* enter */
+      ) {
+        preventDefault = true;
+        useSelectedIndex = false;
+        handleClick(e);
+      } // keyCode is deprecated and only used here for IE
+
+
+      if (e.code === 'ArrowLeft' || e.keyCode === 37
+      /* arrow left */
+      || !disableUpDownKeys && (e.keyCode === 38 || e.code === 'ArrowUp')
+      /* arrow up */
+      ) {
+        // Select next tab to the left, validate if up arrow is not disabled
+        if (direction === 'rtl') {
+          index = getNextTab(index);
+        } else {
+          index = getPrevTab(index);
+        }
+
+        preventDefault = true;
+        useSelectedIndex = true;
+      } else if (e.code === 'ArrowRight' || e.keyCode === 39
+      /* arrow right */
+      || !disableUpDownKeys && (e.keyCode === 40 || e.code === 'ArrowDown')
+      /* arrow down */
+      ) {
+        // Select next tab to the right, validate if down arrow is not disabled
+        if (direction === 'rtl') {
+          index = getPrevTab(index);
+        } else {
+          index = getNextTab(index);
+        }
+
+        preventDefault = true;
+        useSelectedIndex = true;
+      } else if (e.keyCode === 35 || e.code === 'End') {
+        // Select last tab (End key)
+        index = getLastTab();
+        preventDefault = true;
+        useSelectedIndex = true;
+      } else if (e.keyCode === 36 || e.code === 'Home') {
+        // Select first tab (Home key)
+        index = getFirstTab();
+        preventDefault = true;
+        useSelectedIndex = true;
+      } // This prevents scrollbars from moving around
+
+
+      if (preventDefault) {
+        e.preventDefault();
+      } // Only use the selected index in the state if we're not using the tabbed index
+
+
+      if (useSelectedIndex) {
+        setSelected(index, e);
+      }
+    }
+  }
+
+  function handleClick(e) {
+    var node = e.target;
+
+    do {
+      if (isTabFromContainer(node)) {
+        if (isTabDisabled(node)) {
+          return;
+        }
+
+        var index = [].slice.call(node.parentNode.children).filter(isTabNode).indexOf(node);
+        setSelected(index, e);
+        return;
+      }
+    } while ((node = node.parentNode) != null);
+  }
   /**
    * Determine if a node from event.target is a Tab element for the current Tabs container.
    * If the clicked element is not a Tab, it returns false.
    * If it finds another Tabs container between the Tab and `this`, it returns false.
    */
-  _proto.isTabFromContainer = function isTabFromContainer(node) {
+
+
+  function isTabFromContainer(node) {
     // return immediately if the clicked element is not a Tab.
     if (!isTabNode(node)) {
       return false;
@@ -347281,62 +347276,45 @@ var UncontrolledTabs = /*#__PURE__*/function (_Component) {
     var nodeAncestor = node.parentElement;
 
     do {
-      if (nodeAncestor === this.node) return true;
+      if (nodeAncestor === _ref.current) return true;
       if (nodeAncestor.getAttribute('data-rttabs')) break;
       nodeAncestor = nodeAncestor.parentElement;
     } while (nodeAncestor);
 
     return false;
-  };
-
-  _proto.render = function render() {
-    var _this3 = this;
-
-    // Delete all known props, so they don't get added to DOM
-    var _this$props4 = this.props,
-        children = _this$props4.children,
-        className = _this$props4.className,
-        disabledTabClassName = _this$props4.disabledTabClassName,
-        domRef = _this$props4.domRef,
-        focus = _this$props4.focus,
-        forceRenderTabPanel = _this$props4.forceRenderTabPanel,
-        onSelect = _this$props4.onSelect,
-        selectedIndex = _this$props4.selectedIndex,
-        selectedTabClassName = _this$props4.selectedTabClassName,
-        selectedTabPanelClassName = _this$props4.selectedTabPanelClassName,
-        environment = _this$props4.environment,
-        disableUpDownKeys = _this$props4.disableUpDownKeys,
-        attributes = _objectWithoutPropertiesLoose(_this$props4, _excluded);
-
-    return /*#__PURE__*/external_react_["default"].createElement("div", UncontrolledTabs_extends({}, attributes, {
-      className: (0,clsx_m/* default */.A)(className),
-      onClick: this.handleClick,
-      onKeyDown: this.handleKeyDown,
-      ref: function ref(node) {
-        _this3.node = node;
-        if (domRef) domRef(node);
-      },
-      "data-rttabs": true
-    }), this.getChildren());
-  };
-
-  return UncontrolledTabs;
-}(external_react_.Component);
+  }
 
-UncontrolledTabs.defaultProps = {
-  className: 'react-tabs',
-  focus: false
+  var children = props.children,
+      className = props.className,
+      disabledTabClassName = props.disabledTabClassName,
+      domRef = props.domRef,
+      focus = props.focus,
+      forceRenderTabPanel = props.forceRenderTabPanel,
+      onSelect = props.onSelect,
+      selectedIndex = props.selectedIndex,
+      selectedTabClassName = props.selectedTabClassName,
+      selectedTabPanelClassName = props.selectedTabPanelClassName,
+      environment = props.environment,
+      disableUpDownKeys = props.disableUpDownKeys,
+      attributes = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/external_react_["default"].createElement("div", UncontrolledTabs_extends({}, attributes, {
+    className: (0,clsx_m/* default */.A)(className),
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ref: function ref(node) {
+      _ref.current = node;
+      if (domRef) domRef(node);
+    },
+    "data-rttabs": true
+  }), getChildren());
 };
 
+UncontrolledTabs.defaultProps = defaultProps;
 UncontrolledTabs.propTypes =  false ? 0 : {};
+/* harmony default export */ const components_UncontrolledTabs = (UncontrolledTabs);
 ;// ./node_modules/react-tabs/esm/components/Tabs.js
-var Tabs_excluded = ["children", "defaultIndex", "defaultFocus"];
-
-function Tabs_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function Tabs_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; Tabs_setPrototypeOf(subClass, superClass); }
-
-function Tabs_setPrototypeOf(o, p) { Tabs_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Tabs_setPrototypeOf(o, p); }
+function Tabs_extends() { Tabs_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Tabs_extends.apply(this, arguments); }
 
 
 
@@ -347345,115 +347323,106 @@ function Tabs_setPrototypeOf(o, p) { Tabs_setPrototypeOf = Object.setPrototypeOf
 
 var MODE_CONTROLLED = 0;
 var MODE_UNCONTROLLED = 1;
+var Tabs_propTypes =  false ? 0 : {};
+var Tabs_defaultProps = {
+  defaultFocus: false,
+  focusTabOnClick: true,
+  forceRenderTabPanel: false,
+  selectedIndex: null,
+  defaultIndex: null,
+  environment: null,
+  disableUpDownKeys: false
+};
 
-var Tabs = /*#__PURE__*/function (_Component) {
-  Tabs_inheritsLoose(Tabs, _Component);
+var getModeFromProps = function getModeFromProps(props) {
+  return props.selectedIndex === null ? MODE_UNCONTROLLED : MODE_CONTROLLED;
+};
 
-  function Tabs(props) {
-    var _this;
+var checkForIllegalModeChange = function checkForIllegalModeChange(props, mode) {
+  if (false) {}
+};
+/**
+ * State:
+ *   mode: Initialized only once from props and never changes
+ *   selectedIndex: null if controlled mode, otherwise initialized with prop defaultIndex, changed on selection of tabs, has effect to ensure it never gets out of bound
+ *   focus: Because we never remove focus from the Tabs this state is only used to indicate that we should focus the current tab.
+ *          It is initialized from the prop defaultFocus, and after the first render it is reset back to false. Later it can become true again when using keys to navigate the tabs.
+ */
 
-    _this = _Component.call(this, props) || this;
 
-    _this.handleSelected = function (index, last, event) {
-      var onSelect = _this.props.onSelect;
-      var mode = _this.state.mode; // Call change event handler
+var Tabs = function Tabs(props) {
+  var children = props.children,
+      defaultFocus = props.defaultFocus,
+      defaultIndex = props.defaultIndex,
+      focusTabOnClick = props.focusTabOnClick,
+      onSelect = props.onSelect;
 
-      if (typeof onSelect === 'function') {
-        // Check if the change event handler cancels the tab change
-        if (onSelect(index, last, event) === false) return;
-      }
+  var _useState = (0,external_react_.useState)(defaultFocus),
+      focus = _useState[0],
+      setFocus = _useState[1];
 
-      var state = {
-        // Set focus if the change was triggered from the keyboard
-        focus: event.type === 'keydown'
-      };
+  var _useState2 = (0,external_react_.useState)(getModeFromProps(props)),
+      mode = _useState2[0];
 
-      if (mode === MODE_UNCONTROLLED) {
-        // Update selected index
-        state.selectedIndex = index;
-      }
+  var _useState3 = (0,external_react_.useState)(mode === MODE_UNCONTROLLED ? defaultIndex || 0 : null),
+      selectedIndex = _useState3[0],
+      setSelectedIndex = _useState3[1];
 
-      _this.setState(state);
-    };
+  (0,external_react_.useEffect)(function () {
+    // Reset focus after initial render, see comment above
+    setFocus(false);
+  }, []);
 
-    _this.state = Tabs.copyPropsToState(_this.props, {}, props.defaultFocus);
-    return _this;
+  if (mode === MODE_UNCONTROLLED) {
+    // Ensure that we handle removed tabs and don't let selectedIndex get out of bounds
+    var tabsCount = count_getTabsCount(children);
+    (0,external_react_.useEffect)(function () {
+      if (selectedIndex != null) {
+        var maxTabIndex = Math.max(0, tabsCount - 1);
+        setSelectedIndex(Math.min(selectedIndex, maxTabIndex));
+      }
+    }, [tabsCount]);
   }
 
-  Tabs.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
-    return Tabs.copyPropsToState(props, state);
-  };
-
-  Tabs.getModeFromProps = function getModeFromProps(props) {
-    return props.selectedIndex === null ? MODE_UNCONTROLLED : MODE_CONTROLLED;
-  };
-
-  // preserve the existing selectedIndex from state.
-  // If the state has not selectedIndex, default to the defaultIndex or 0
-  Tabs.copyPropsToState = function copyPropsToState(props, state, focus) {
-    if (focus === void 0) {
-      focus = false;
-    }
-
-    if (false) {}
+  checkForIllegalModeChange(props, mode);
 
-    var newState = {
-      focus: focus,
-      mode: Tabs.getModeFromProps(props)
-    };
+  var handleSelected = function handleSelected(index, last, event) {
+    // Call change event handler
+    if (typeof onSelect === 'function') {
+      // Check if the change event handler cancels the tab change
+      if (onSelect(index, last, event) === false) return;
+    } // Always set focus on tabs unless it is disabled
 
-    if (newState.mode === MODE_UNCONTROLLED) {
-      var maxTabIndex = Math.max(0, count_getTabsCount(props.children) - 1);
-      var selectedIndex = null;
 
-      if (state.selectedIndex != null) {
-        selectedIndex = Math.min(state.selectedIndex, maxTabIndex);
-      } else {
-        selectedIndex = props.defaultIndex || 0;
-      }
-
-      newState.selectedIndex = selectedIndex;
+    if (focusTabOnClick) {
+      setFocus(true);
     }
 
-    return newState;
+    if (mode === MODE_UNCONTROLLED) {
+      // Update selected index
+      setSelectedIndex(index);
+    }
   };
 
-  var _proto = Tabs.prototype;
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        children = _this$props.children,
-        defaultIndex = _this$props.defaultIndex,
-        defaultFocus = _this$props.defaultFocus,
-        props = Tabs_objectWithoutPropertiesLoose(_this$props, Tabs_excluded);
+  var subProps = Tabs_extends({}, props);
 
-    var _this$state = this.state,
-        focus = _this$state.focus,
-        selectedIndex = _this$state.selectedIndex;
-    props.focus = focus;
-    props.onSelect = this.handleSelected;
+  subProps.focus = focus;
+  subProps.onSelect = handleSelected;
 
-    if (selectedIndex != null) {
-      props.selectedIndex = selectedIndex;
-    }
-
-    return /*#__PURE__*/external_react_["default"].createElement(UncontrolledTabs, props, children);
-  };
-
-  return Tabs;
-}(external_react_.Component);
+  if (selectedIndex != null) {
+    subProps.selectedIndex = selectedIndex;
+  }
 
-Tabs.defaultProps = {
-  defaultFocus: false,
-  forceRenderTabPanel: false,
-  selectedIndex: null,
-  defaultIndex: null,
-  environment: null,
-  disableUpDownKeys: false
+  delete subProps.defaultFocus;
+  delete subProps.defaultIndex;
+  delete subProps.focusTabOnClick;
+  return /*#__PURE__*/external_react_["default"].createElement(components_UncontrolledTabs, subProps, children);
 };
 
 Tabs.propTypes =  false ? 0 : {};
+Tabs.defaultProps = Tabs_defaultProps;
 Tabs.tabsRole = 'Tabs';
+/* harmony default export */ const components_Tabs = (Tabs);
 ;// ./node_modules/react-tabs/esm/components/TabList.js
 var TabList_excluded = ["children", "className"];
 
@@ -347461,44 +347430,29 @@ function TabList_extends() { TabList_extends = Object.assign || function (target
 
 function TabList_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function TabList_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; TabList_setPrototypeOf(subClass, superClass); }
-
-function TabList_setPrototypeOf(o, p) { TabList_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return TabList_setPrototypeOf(o, p); }
-
-
-
-
-
-var TabList = /*#__PURE__*/function (_Component) {
-  TabList_inheritsLoose(TabList, _Component);
-
-  function TabList() {
-    return _Component.apply(this, arguments) || this;
-  }
 
-  var _proto = TabList.prototype;
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        children = _this$props.children,
-        className = _this$props.className,
-        attributes = TabList_objectWithoutPropertiesLoose(_this$props, TabList_excluded);
 
-    return /*#__PURE__*/external_react_["default"].createElement("ul", TabList_extends({}, attributes, {
-      className: (0,clsx_m/* default */.A)(className),
-      role: "tablist"
-    }), children);
-  };
+var TabList_defaultProps = {
+  className: 'react-tabs__tab-list'
+};
+var TabList_propTypes =  false ? 0 : {};
 
-  return TabList;
-}(external_react_.Component);
+var TabList = function TabList(props) {
+  var children = props.children,
+      className = props.className,
+      attributes = TabList_objectWithoutPropertiesLoose(props, TabList_excluded);
 
-TabList.defaultProps = {
-  className: 'react-tabs__tab-list'
+  return /*#__PURE__*/external_react_["default"].createElement("ul", TabList_extends({}, attributes, {
+    className: (0,clsx_m/* default */.A)(className),
+    role: "tablist"
+  }), children);
 };
 
-TabList.propTypes =  false ? 0 : {};
 TabList.tabsRole = 'TabList';
+TabList.propTypes =  false ? 0 : {};
+TabList.defaultProps = TabList_defaultProps;
+/* harmony default export */ const components_TabList = (TabList);
 ;// ./node_modules/react-tabs/esm/components/Tab.js
 var Tab_excluded = ["children", "className", "disabled", "disabledClassName", "focus", "id", "panelId", "selected", "selectedClassName", "tabIndex", "tabRef"];
 
@@ -347506,80 +347460,11 @@ function Tab_extends() { Tab_extends = Object.assign || function (target) { for
 
 function Tab_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function Tab_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; Tab_setPrototypeOf(subClass, superClass); }
-
-function Tab_setPrototypeOf(o, p) { Tab_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return Tab_setPrototypeOf(o, p); }
-
 
 
 
 var DEFAULT_CLASS = 'react-tabs__tab';
-
-var Tab = /*#__PURE__*/function (_Component) {
-  Tab_inheritsLoose(Tab, _Component);
-
-  function Tab() {
-    return _Component.apply(this, arguments) || this;
-  }
-
-  var _proto = Tab.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    this.checkFocus();
-  };
-
-  _proto.componentDidUpdate = function componentDidUpdate() {
-    this.checkFocus();
-  };
-
-  _proto.checkFocus = function checkFocus() {
-    var _this$props = this.props,
-        selected = _this$props.selected,
-        focus = _this$props.focus;
-
-    if (selected && focus) {
-      this.node.focus();
-    }
-  };
-
-  _proto.render = function render() {
-    var _cx,
-        _this = this;
-
-    var _this$props2 = this.props,
-        children = _this$props2.children,
-        className = _this$props2.className,
-        disabled = _this$props2.disabled,
-        disabledClassName = _this$props2.disabledClassName,
-        focus = _this$props2.focus,
-        id = _this$props2.id,
-        panelId = _this$props2.panelId,
-        selected = _this$props2.selected,
-        selectedClassName = _this$props2.selectedClassName,
-        tabIndex = _this$props2.tabIndex,
-        tabRef = _this$props2.tabRef,
-        attributes = Tab_objectWithoutPropertiesLoose(_this$props2, Tab_excluded);
-
-    return /*#__PURE__*/external_react_["default"].createElement("li", Tab_extends({}, attributes, {
-      className: (0,clsx_m/* default */.A)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx[disabledClassName] = disabled, _cx)),
-      ref: function ref(node) {
-        _this.node = node;
-        if (tabRef) tabRef(node);
-      },
-      role: "tab",
-      id: id,
-      "aria-selected": selected ? 'true' : 'false',
-      "aria-disabled": disabled ? 'true' : 'false',
-      "aria-controls": panelId,
-      tabIndex: tabIndex || (selected ? '0' : null),
-      "data-rttab": true
-    }), children);
-  };
-
-  return Tab;
-}(external_react_.Component);
-
-Tab.defaultProps = {
+var DEFAULT_PROPS = {
   className: DEFAULT_CLASS,
   disabledClassName: DEFAULT_CLASS + "--disabled",
   focus: false,
@@ -347588,9 +347473,51 @@ Tab.defaultProps = {
   selected: false,
   selectedClassName: DEFAULT_CLASS + "--selected"
 };
+var Tab_propTypes =  false ? 0 : {};
+
+var Tab = function Tab(props) {
+  var _cx;
+
+  var nodeRef = (0,external_react_.useRef)();
+
+  var children = props.children,
+      className = props.className,
+      disabled = props.disabled,
+      disabledClassName = props.disabledClassName,
+      focus = props.focus,
+      id = props.id,
+      panelId = props.panelId,
+      selected = props.selected,
+      selectedClassName = props.selectedClassName,
+      tabIndex = props.tabIndex,
+      tabRef = props.tabRef,
+      attributes = Tab_objectWithoutPropertiesLoose(props, Tab_excluded);
+
+  (0,external_react_.useEffect)(function () {
+    if (selected && focus) {
+      nodeRef.current.focus();
+    }
+  }, [selected, focus]);
+  return /*#__PURE__*/external_react_["default"].createElement("li", Tab_extends({}, attributes, {
+    className: (0,clsx_m/* default */.A)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx[disabledClassName] = disabled, _cx)),
+    ref: function ref(node) {
+      nodeRef.current = node;
+      if (tabRef) tabRef(node);
+    },
+    role: "tab",
+    id: id,
+    "aria-selected": selected ? 'true' : 'false',
+    "aria-disabled": disabled ? 'true' : 'false',
+    "aria-controls": panelId,
+    tabIndex: tabIndex || (selected ? '0' : null),
+    "data-rttab": true
+  }), children);
+};
 
 Tab.propTypes =  false ? 0 : {};
 Tab.tabsRole = 'Tab';
+Tab.defaultProps = DEFAULT_PROPS;
+/* harmony default export */ const components_Tab = (Tab);
 ;// ./node_modules/react-tabs/esm/components/TabPanel.js
 var TabPanel_excluded = ["children", "className", "forceRender", "id", "selected", "selectedClassName", "tabId"];
 
@@ -347598,56 +347525,41 @@ function TabPanel_extends() { TabPanel_extends = Object.assign || function (targ
 
 function TabPanel_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function TabPanel_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; TabPanel_setPrototypeOf(subClass, superClass); }
-
-function TabPanel_setPrototypeOf(o, p) { TabPanel_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return TabPanel_setPrototypeOf(o, p); }
-
 
 
 
 var TabPanel_DEFAULT_CLASS = 'react-tabs__tab-panel';
-
-var TabPanel = /*#__PURE__*/function (_Component) {
-  TabPanel_inheritsLoose(TabPanel, _Component);
-
-  function TabPanel() {
-    return _Component.apply(this, arguments) || this;
-  }
-
-  var _proto = TabPanel.prototype;
-
-  _proto.render = function render() {
-    var _cx;
-
-    var _this$props = this.props,
-        children = _this$props.children,
-        className = _this$props.className,
-        forceRender = _this$props.forceRender,
-        id = _this$props.id,
-        selected = _this$props.selected,
-        selectedClassName = _this$props.selectedClassName,
-        tabId = _this$props.tabId,
-        attributes = TabPanel_objectWithoutPropertiesLoose(_this$props, TabPanel_excluded);
-
-    return /*#__PURE__*/external_react_["default"].createElement("div", TabPanel_extends({}, attributes, {
-      className: (0,clsx_m/* default */.A)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)),
-      role: "tabpanel",
-      id: id,
-      "aria-labelledby": tabId
-    }), forceRender || selected ? children : null);
-  };
-
-  return TabPanel;
-}(external_react_.Component);
-
-TabPanel.defaultProps = {
+var TabPanel_defaultProps = {
   className: TabPanel_DEFAULT_CLASS,
   forceRender: false,
   selectedClassName: TabPanel_DEFAULT_CLASS + "--selected"
 };
+var TabPanel_propTypes =  false ? 0 : {};
+
+var TabPanel = function TabPanel(props) {
+  var _cx;
+
+  var children = props.children,
+      className = props.className,
+      forceRender = props.forceRender,
+      id = props.id,
+      selected = props.selected,
+      selectedClassName = props.selectedClassName,
+      tabId = props.tabId,
+      attributes = TabPanel_objectWithoutPropertiesLoose(props, TabPanel_excluded);
+
+  return /*#__PURE__*/external_react_["default"].createElement("div", TabPanel_extends({}, attributes, {
+    className: (0,clsx_m/* default */.A)(className, (_cx = {}, _cx[selectedClassName] = selected, _cx)),
+    role: "tabpanel",
+    id: id,
+    "aria-labelledby": tabId
+  }), forceRender || selected ? children : null);
+};
 
-TabPanel.propTypes =  false ? 0 : {};
 TabPanel.tabsRole = 'TabPanel';
+TabPanel.propTypes =  false ? 0 : {};
+TabPanel.defaultProps = TabPanel_defaultProps;
+/* harmony default export */ const components_TabPanel = (TabPanel);
 ;// ./node_modules/react-tabs/esm/index.js
 
 
@@ -369284,6 +369196,7 @@ const node_html_parser_1 = __webpack_require__(36192);
 const classnames_1 = __importDefault(__webpack_require__(46942));
 const react_router_dom_1 = __webpack_require__(92648);
 const EditorSlice_1 = __webpack_require__(68512);
+const externalLinkHelper_1 = __webpack_require__(31615);
 const open_in_new_tab_svg_1 = __importDefault(__webpack_require__(86936));
 const stores_1 = __webpack_require__(32132);
 const ProjectTypes_1 = __webpack_require__(27130);
@@ -369324,6 +369237,7 @@ function HtmlRunner() {
     const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
     // Using BroadcastChannel to communicate between the main app and the preview tab
     const broadcastChannel = (0, react_1.useRef)(null);
+    const [iframeKey, setIframeKey] = (0, react_1.useState)(0);
     (0, react_1.useEffect)(() => {
         broadcastChannel.current = new BroadcastChannel(BROADCAST_CHANNEL);
         return () => {
@@ -369369,22 +369283,29 @@ function HtmlRunner() {
             };
         }
     }, [isPreviewMode]);
-    (0, react_1.useEffect)(() => {
-        const handleReloadMessage = (event) => {
-            if (event.data?.msg !== "RELOAD")
-                return;
-            const nextPage = event.data?.payload?.linkTo;
-            if (typeof nextPage !== "string")
-                return;
-            dispatch((0, EditorSlice_1.setPage)(nextPage));
-            dispatch((0, EditorSlice_1.triggerCodeRun)());
-        };
-        window.addEventListener("message", handleReloadMessage);
-        return () => window.removeEventListener("message", handleReloadMessage);
-    }, [dispatch]);
+    const showModal = () => {
+        dispatch((0, EditorSlice_1.showErrorModal)());
+        eventListener();
+    };
+    const { externalLink, setExternalLink, handleAllowedExternalLink, handleRegularExternalLink, handleExternalLinkError, } = (0, externalLinkHelper_1.useExternalLinkState)(showModal);
+    const eventListener = () => {
+        window.addEventListener("message", (event) => {
+            if (typeof event.data?.msg === "string") {
+                if (event.data?.msg === "ERROR: External link") {
+                    handleExternalLinkError();
+                }
+                else if (event.data?.msg === "Allowed external link") {
+                    handleAllowedExternalLink(event.data.payload.linkTo);
+                }
+                else {
+                    handleRegularExternalLink(event.data.payload.linkTo);
+                }
+            }
+        });
+    };
     const iframeReload = () => {
         const iframe = output.current?.contentDocument;
-        const filePath = (0, helpers_1.getFilenameFromIFrame)(iframe);
+        const filePath = (0, helpers_1.getFilenameFromIFrame)(iframe) ?? externalLink;
         if (runningFilePath !== filePath) {
             setRunningFilePath(filePath);
         }
@@ -369394,11 +369315,9 @@ function HtmlRunner() {
                 linkElement.addEventListener("click", (e) => {
                     const href = linkElement.getAttribute("href");
                     const target = linkElement.getAttribute("target");
-                    if (!href || target !== "_blank" || (0, helpers_1.isExternalUrl)(href))
-                        return;
-                    // block in-iframe navigation for internal html links with target="_blank"
+                    // block in-iframe navigation for links with target="_blank" and .html href
                     // and open them in a preview tab
-                    if (href?.includes(".html")) {
+                    if (target === "_blank" && href?.includes(".html")) {
                         e.preventDefault();
                         e.stopImmediatePropagation();
                         openPreview(`/${href}`);
@@ -369406,13 +369325,17 @@ function HtmlRunner() {
                 }, true);
             });
         }
+        setExternalLink(null);
     };
     (0, react_1.useEffect)(() => {
+        eventListener();
         dispatch((0, EditorSlice_1.loadingRunner)(EditorTypes_1.RunnerType.HTML));
         dispatch((0, EditorSlice_1.setLoadedRunner)(EditorTypes_1.RunnerType.HTML));
     }, []);
     (0, react_1.useEffect)(() => {
         if (codeRunTriggered) {
+            // Set unique key to force iframe remount
+            setIframeKey((prev) => prev + 1);
             runCode();
             if (!isPreviewMode) {
                 broadcastChannel.current?.postMessage({
@@ -369432,31 +369355,42 @@ function HtmlRunner() {
         const fileToRun = page ?? defaultPreviewFilePath;
         setRunningFilePath(fileToRun);
         dispatch((0, EditorSlice_1.setError)(null));
-        const entryPoint = (0, helpers_1.getEntryPoint)(projectComponents, fileToRun);
-        if (!entryPoint) {
-            dispatch((0, EditorSlice_1.setError)(fileToRun === helpers_1.DEFAULT_ENTRY_FILE_PATH && !isPreviewMode
-                ? {
-                    type: Errors_1.ErrorType.ENTRY_FILE_NOT_FOUND,
-                    details: {
-                        fileName: helpers_1.DEFAULT_ENTRY_FILE_NAME,
-                    },
-                }
-                : {
-                    type: Errors_1.ErrorType.PAGE_NOT_FOUND,
-                }));
-            dispatch((0, EditorSlice_1.codeRunHandled)());
-            return;
-        }
-        const indexPage = (0, node_html_parser_1.parse)(entryPoint.content);
-        const body = indexPage.querySelector("body") || indexPage;
-        const htmlRoot = indexPage.querySelector("html") ?? indexPage;
-        body.insertAdjacentHTML("afterbegin", scripts_1.disableLocalStorageScript);
-        htmlRoot.insertAdjacentHTML("afterbegin", scripts_1.consoleOverrideScript);
-        const { content } = await (0, fileParsers_1.resolveAndRewriteHtmlImports)(indexPage.toString(), projectComponents, entryPoint.path, page ?? entryPoint.path);
-        if (output.current) {
-            output.current.srcdoc = content;
+        if (!externalLink) {
+            const entryPoint = (0, helpers_1.getEntryPoint)(projectComponents, fileToRun);
+            if (!entryPoint) {
+                dispatch((0, EditorSlice_1.setError)(fileToRun === helpers_1.DEFAULT_ENTRY_FILE_PATH && !isPreviewMode
+                    ? {
+                        type: Errors_1.ErrorType.ENTRY_FILE_NOT_FOUND,
+                        details: {
+                            fileName: helpers_1.DEFAULT_ENTRY_FILE_NAME,
+                        },
+                    }
+                    : {
+                        type: Errors_1.ErrorType.PAGE_NOT_FOUND,
+                    }));
+                dispatch((0, EditorSlice_1.codeRunHandled)());
+                return;
+            }
+            const indexPage = (0, node_html_parser_1.parse)(entryPoint.content);
+            const body = indexPage.querySelector("body") || indexPage;
+            const htmlRoot = indexPage.querySelector("html") ?? indexPage;
+            body.insertAdjacentHTML("afterbegin", scripts_1.disableLocalStorageScript);
+            htmlRoot.insertAdjacentHTML("afterbegin", scripts_1.consoleOverrideScript);
+            const { content } = await (0, fileParsers_1.resolveAndRewriteHtmlImports)(indexPage.toString(), projectComponents, entryPoint.path, page ?? entryPoint.path);
+            if (output.current?.contentWindow?.document) {
+                const doc = output.current.contentWindow.document;
+                doc.open();
+                doc.write(content);
+                doc.close();
+            }
+            if (codeRunTriggered) {
+                dispatch((0, EditorSlice_1.codeRunHandled)());
+            }
         }
-        if (codeRunTriggered) {
+        else {
+            if (output.current) {
+                output.current.src = externalLink;
+            }
             dispatch((0, EditorSlice_1.codeRunHandled)());
         }
     };
@@ -369496,7 +369430,7 @@ function HtmlRunner() {
     const iframeClasses = (0, classnames_1.default)(styles_module_scss_1.default.iframe, {
         [styles_module_scss_1.default.codeHasBeenRun]: codeHasBeenRun,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.htmlrunnerContainer, children: [(0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Preview", icon: preview_svg_1.default, readOnly: readOnly, extraTabContent: codeHasBeenRun && openInNewTabLink, tabPanelClassName: styles_module_scss_1.default.previewHtml, children: error ? ((0, jsx_runtime_1.jsx)("div", { className: iframeClasses, children: (0, jsx_runtime_1.jsx)(NotFoundPage_1.NotFoundPage, {}) })) : ((0, jsx_runtime_1.jsx)("iframe", { className: iframeClasses, sandbox: "allow-scripts allow-same-origin allow-modals allow-popups allow-popups-to-escape-sandbox", referrerPolicy: "strict-origin-when-cross-origin", allow: "\n            accelerometer 'none';\n            camera 'none';\n            encrypted-media;\n            fullscreen;\n            picture-in-picture;\n            geolocation 'none';\n            gyroscope 'none';\n            magnetometer 'none';\n            microphone 'none';\n            midi 'none';\n            payment 'none';\n            usb 'none';\n          ", id: "output-frame", title: "HTML Output Preview", ref: output, onLoad: iframeReload })) }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Console", icon: console_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(HtmlConsole_1.default, { consoleLogs: consoleLogs }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.htmlrunnerContainer, children: [(0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Preview", icon: preview_svg_1.default, readOnly: readOnly, extraTabContent: codeHasBeenRun && openInNewTabLink, tabPanelClassName: styles_module_scss_1.default.previewHtml, children: error ? ((0, jsx_runtime_1.jsx)("div", { className: iframeClasses, children: (0, jsx_runtime_1.jsx)(NotFoundPage_1.NotFoundPage, {}) })) : ((0, jsx_runtime_1.jsx)("iframe", { className: iframeClasses, sandbox: "allow-scripts allow-same-origin allow-modals allow-popups", referrerPolicy: "strict-origin-when-cross-origin", allow: "\n            accelerometer 'none';\n            camera 'none';\n            encrypted-media;\n            fullscreen;\n            picture-in-picture;\n            geolocation 'none';\n            gyroscope 'none';\n            magnetometer 'none';\n            microphone 'none';\n            midi 'none';\n            payment 'none';\n            usb 'none';\n          ", id: "output-frame", title: "HTML Output Preview", ref: output, onLoad: iframeReload, src: "about:blank" }, iframeKey)) }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Console", icon: console_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(HtmlConsole_1.default, { consoleLogs: consoleLogs }) }) }))] }));
 }
 exports["default"] = HtmlRunner;
 
@@ -369575,7 +369509,6 @@ const node_html_parser_1 = __webpack_require__(36192);
 const ProjectTypes_1 = __webpack_require__(27130);
 const binaryStore_1 = __webpack_require__(5060);
 const projectHelpers_1 = __webpack_require__(2610);
-const helpers_1 = __webpack_require__(1108);
 /** Normalizes CSS paths
  * Treats paths without leading / or ./ or ../ as relative to current file
  * E.g. 'image.png' will be treated as './image.png'
@@ -369629,7 +369562,9 @@ const getMimeType = (filePath, fallback = "application/octet-stream") => {
 };
 /** Check if a URL is external, blob, or data */
 const isExternalOrDataUrl = (url) => {
-    return (url.startsWith("blob:") || (0, helpers_1.isExternalUrl)(url) || url.startsWith("data:"));
+    return (url.startsWith("blob:") ||
+        /^(https?:)?\/\//.test(url) ||
+        url.startsWith("data:"));
 };
 async function replaceAsync(input, regex, replacer) {
     let result = "";
@@ -369806,12 +369741,7 @@ async function rewriteSources(indexPage, components, baseFilePath, propName, blo
     const nodes = indexPage.querySelectorAll(`[${propName}]`);
     for (const node of nodes) {
         const raw = node.getAttribute(propName);
-        if (!raw)
-            continue;
-        // For external links with target="_blank", add noopener and noreferrer for security
-        if ((0, helpers_1.isExternalUrl)(raw) && node.getAttribute("target") === "_blank")
-            node.setAttribute("rel", "noopener noreferrer");
-        if (isExternalOrDataUrl(raw))
+        if (!raw || isExternalOrDataUrl(raw))
             continue;
         if ((0, projectHelpers_1.parseFileName)(raw).extension === ProjectTypes_1.ProjectFileExtension.HTML &&
             propName === "href") {
@@ -369864,7 +369794,7 @@ async function resolveAndRewriteHtmlImports(html, projectComponents, baseFilePat
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.isExternalUrl = exports.getFilenameFromIFrame = exports.getEntryPoint = exports.DEFAULT_ENTRY_FILE_PATH = exports.DEFAULT_ENTRY_FILE_NAME = void 0;
+exports.getFilenameFromIFrame = exports.getEntryPoint = exports.DEFAULT_ENTRY_FILE_PATH = exports.DEFAULT_ENTRY_FILE_NAME = void 0;
 const ProjectTypes_1 = __webpack_require__(27130);
 exports.DEFAULT_ENTRY_FILE_NAME = "index.html";
 exports.DEFAULT_ENTRY_FILE_PATH = `/${exports.DEFAULT_ENTRY_FILE_NAME}`;
@@ -369875,10 +369805,6 @@ const getEntryPoint = (components, filePath) => {
 exports.getEntryPoint = getEntryPoint;
 const getFilenameFromIFrame = (iframe) => iframe?.querySelector("meta[filename]")?.getAttribute("filename") ?? null;
 exports.getFilenameFromIFrame = getFilenameFromIFrame;
-const isExternalUrl = (url) => {
-    return /^(https?:)?\/\//.test(url);
-};
-exports.isExternalUrl = isExternalUrl;
 
 
 /***/ }),
@@ -376659,6 +376585,57 @@ const downloadProjectFile = async (file, fileName) => {
 exports.downloadProjectFile = downloadProjectFile;
 
 
+/***/ }),
+
+/***/ 31615:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.matchingRegexes = exports.allowedInternalLinks = exports.allowedExternalLinks = exports.useExternalLinkState = void 0;
+const react_1 = __webpack_require__(51649);
+const react_redux_1 = __webpack_require__(14062);
+const EditorSlice_1 = __webpack_require__(68512);
+const Errors_1 = __webpack_require__(20339);
+const domain = "https://rpf.io/";
+const host = window?.location?.origin || "http://localhost:3011";
+const rpfDomain = new RegExp(`^${domain}`);
+const hostDomain = new RegExp(`^${host}`);
+const allowedInternalLinks = [new RegExp(`^#[a-zA-Z0-9]+`)];
+exports.allowedInternalLinks = allowedInternalLinks;
+const allowedExternalLinks = [rpfDomain, hostDomain];
+exports.allowedExternalLinks = allowedExternalLinks;
+const useExternalLinkState = (showModal) => {
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const [externalLink, setExternalLink] = (0, react_1.useState)(null);
+    const handleAllowedExternalLink = (linkTo) => {
+        setExternalLink(linkTo);
+        dispatch((0, EditorSlice_1.triggerCodeRun)());
+    };
+    const handleRegularExternalLink = (linkTo) => {
+        setExternalLink(null);
+        dispatch((0, EditorSlice_1.setPage)(linkTo));
+        dispatch((0, EditorSlice_1.triggerCodeRun)());
+    };
+    const handleExternalLinkError = () => {
+        dispatch((0, EditorSlice_1.setError)({ type: Errors_1.ErrorType.EXTERNAL_LINK }));
+        showModal();
+    };
+    return {
+        externalLink,
+        setExternalLink,
+        handleAllowedExternalLink,
+        handleRegularExternalLink,
+        handleExternalLinkError,
+    };
+};
+exports.useExternalLinkState = useExternalLinkState;
+const matchingRegexes = (regexArray, testString) => {
+    return regexArray.some((reg) => reg.test(testString));
+};
+exports.matchingRegexes = matchingRegexes;
+
+
 /***/ }),
 
 /***/ 65404:

package/dist/style.css

@@ -33,13 +33,11 @@
 }
 
 .react-tabs__tab:focus {
-  box-shadow: 0 0 5px hsl(208, 99%, 50%);
-  border-color: hsl(208, 99%, 50%);
   outline: none;
 }
 
 .react-tabs__tab:focus:after {
-  content: "";
+  content: '';
   position: absolute;
   height: 5px;
   left: -4px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gwchq-textjam",
   "description": "Embeddable React editor used in Raspberry Pi text-based projects.",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "license": "Apache-2.0",
   "homepage": "https://github.com/GirlsFirst/gwchq-textjam",
   "author": "Girls Who Code HQ",