gwchq-textjam 0.2.20 → 0.2.22

package/dist/index.js

@@ -68344,8 +68344,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
-/* harmony import */ var D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(98850);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
@@ -68369,7 +68369,7 @@ var DraggableTab = _ref => {
       panelIndex,
       fileIndex
     } = _ref,
-    otherProps = (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
+    otherProps = (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
   var openFiles = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.openedFiles);
   var openFilesCount = openFiles[panelIndex].length;
   var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
@@ -68386,7 +68386,7 @@ var DraggableTab = _ref => {
       switchToFileTab(panelIndex, (fileIndex + openFilesCount - 1) % openFilesCount);
     }
   };
-  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
     onClick: e => {
       e.stopPropagation();
       switchToFileTab(panelIndex, fileIndex);
@@ -68404,7 +68404,7 @@ var DraggableTab = _ref => {
         draggableProps,
         dragHandleProps
       } = _ref2;
-      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
         className: "draggable-tab",
         ref: innerRef
       }, draggableProps), dragHandleProps), {}, {
@@ -68426,8 +68426,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
-/* harmony import */ var D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(98850);
 /* harmony import */ var react_tabs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39243);
@@ -68446,8 +68446,8 @@ var DroppableTabList = _ref => {
       children: _children,
       index
     } = _ref,
-    otherProps = (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
+    otherProps = (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__.Droppable, {
       direction: "horizontal",
       droppableId: index.toString(),
@@ -68457,7 +68457,7 @@ var DroppableTabList = _ref => {
           droppableProps,
           placeholder
         } = _ref2;
-        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
+        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
           className: "droppable-tab-list"
         }, droppableProps), {}, {
           ref: innerRef,
@@ -103011,7 +103011,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
 /* harmony import */ var _redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(68512);
@@ -103031,6 +103031,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+var defaultProjectName = "New project";
+var getProjectName = project => (project === null || project === void 0 ? void 0 : project.name) || defaultProjectName;
 var ProjectName = _ref => {
   var {
     className = null,
@@ -103038,17 +103040,23 @@ var ProjectName = _ref => {
     editable = true
   } = _ref;
   var project = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.project, react_redux__WEBPACK_IMPORTED_MODULE_1__.shallowEqual);
+  var projectName = getProjectName(project);
   var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
+  var nameInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var nameBeforeEditingRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(projectName);
+  var [isEditing, setEditing] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+  var [name, setName] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(projectName);
   var {
     hovered,
     hoverProps
-  } = (0,_hooks_useHover__WEBPACK_IMPORTED_MODULE_5__.useHover)();
-  var nameInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var [isEditing, setEditing] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
-  var [name, setName] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(project.name || "New project");
+  } = (0,_hooks_useHover__WEBPACK_IMPORTED_MODULE_5__.useHover)(_hooks_useHover__WEBPACK_IMPORTED_MODULE_5__.TOOLTIP_SHOW_DELAY_MS);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-    setName(project.name);
-  }, [project.name]);
+    if (!isEditing) {
+      setName(projectName);
+      nameBeforeEditingRef.current = projectName;
+      dispatch((0,_redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__.setProjectNameDraft)(null));
+    }
+  }, [projectName, isEditing, dispatch]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     if (isEditing) {
       var _nameInput$current, _nameInput$current2;
@@ -103057,33 +103065,59 @@ var ProjectName = _ref => {
     }
   }, [isEditing]);
   var startEditing = () => {
-    if (!editable) return;
+    if (!editable || isEditing) return;
+    nameBeforeEditingRef.current = projectName;
     setEditing(true);
   };
   var saveName = () => {
     var newName = nameInput.current.value.trim();
-    if (newName && newName !== project.name) {
+    dispatch((0,_redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__.setProjectNameDraft)(null));
+    if (!newName) {
+      setName(projectName);
+    } else if (newName !== projectName) {
       dispatch((0,_redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__.updateProjectName)(newName));
+      setName(newName);
     }
     setEditing(false);
   };
   var cancelEditing = () => {
-    setName(project.name);
+    var previousName = nameBeforeEditingRef.current;
+    dispatch((0,_redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__.setProjectNameDraft)(null));
+    setName(previousName);
+    if (previousName !== projectName) {
+      dispatch((0,_redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__.updateProjectName)(previousName));
+    }
     setEditing(false);
   };
   var handleOnChange = () => {
-    setName(nameInput.current.value);
+    var nextName = nameInput.current.value;
+    var trimmedName = nextName.trim();
+    setName(nextName);
+    dispatch((0,_redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__.setProjectNameDraft)(trimmedName && trimmedName !== projectName ? trimmedName : null));
+  };
+  var handleOnBlur = () => {
+    saveName();
+  };
+  var stopKeyboardEventPropagation = event => {
+    var _event$nativeEvent;
+    if (!isEditing) return;
+    event.stopPropagation();
+    if ((_event$nativeEvent = event.nativeEvent) !== null && _event$nativeEvent !== void 0 && _event$nativeEvent.stopImmediatePropagation) {
+      event.nativeEvent.stopImmediatePropagation();
+    }
   };
   var handleKeyDown = event => {
+    stopKeyboardEventPropagation(event);
     if (event.key === "Enter") {
       event.preventDefault();
       saveName();
     } else if (event.key === "Escape") {
+      event.preventDefault();
       cancelEditing();
     }
   };
-  var handleOnBlur = () => {
-    saveName();
+  var handleKeyUp = event => {
+    stopKeyboardEventPropagation(event);
   };
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment, {
     children: [showLabel && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("label", {
@@ -103091,7 +103125,7 @@ var ProjectName = _ref => {
       id: "project_name_label",
       className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectLabel,
       children: "Project Name"
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc2_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,C_Project_source_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
       className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectName, className)
     }, hoverProps), {}, {
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)((components_Tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_8___default()), {
@@ -103106,6 +103140,7 @@ var ProjectName = _ref => {
         onFocus: startEditing,
         onClick: startEditing,
         onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
         value: name,
         readOnly: !isEditing,
         onChange: handleOnChange,
@@ -370829,6 +370864,7 @@ const ContextMenu = (props) => {
                     [styles_module_scss_1.default.withDivider]: showDivider && i !== menuOptions.length - 1,
                 }), onClick: (e) => {
                     e.stopPropagation = true;
+                    e.syntheticEvent.stopPropagation();
                     option.action?.();
                     onClose();
                 }, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.optionContent, children: [option.icon ?? null, option.text] }), hoverElement && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.hoverElement, children: hoverElement }))] }, option.id ?? i)))] }));
@@ -370958,32 +370994,21 @@ const ItemEdit_1 = __webpack_require__(61576);
 const ItemIcon_1 = __webpack_require__(3427);
 const styles_module_scss_1 = __importDefault(__webpack_require__(68233));
 const Tooltip_1 = __importDefault(__webpack_require__(26982));
+const useHover_1 = __webpack_require__(78556);
 const button_dots_svg_1 = __importDefault(__webpack_require__(80054));
 const SvgIcon_1 = __webpack_require__(82917);
-const react_1 = __webpack_require__(51649);
 const stores_1 = __webpack_require__(32132);
 const BasicItemContent = ({ item, onContextMenu, }) => {
     const itemData = item.getItemData();
-    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
-    const timerRef = (0, react_1.useRef)(undefined);
     const isSharedProject = (0, stores_1.useAppSelector)((state) => state.editor.isSharedProject);
+    const { hovered, hoverProps } = (0, useHover_1.useHover)(useHover_1.TOOLTIP_SHOW_DELAY_MS);
     if (item.isRenaming()) {
         return (0, jsx_runtime_1.jsx)(ItemEdit_1.ItemEdit, { item: item });
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.itemContent, onContextMenu: onContextMenu, children: [(0, jsx_runtime_1.jsx)(ItemIcon_1.ItemIcon, { itemData: itemData }), (0, jsx_runtime_1.jsx)(Text_1.Text, { className: styles_module_scss_1.default.itemTitle, size: 12, draggable: true, onMouseEnter: () => {
-                            timerRef.current = setTimeout(() => {
-                                setShowTooltip(true);
-                            }, 1000);
-                        }, onMouseLeave: () => {
-                            clearTimeout(timerRef.current);
-                            setShowTooltip(false);
-                        }, onDragStart: () => {
-                            clearTimeout(timerRef.current);
-                            setShowTooltip(false);
-                        }, children: item.getItemName() }), !isSharedProject && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { className: styles_module_scss_1.default.itemButton, size: 16, SvgElement: button_dots_svg_1.default, onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.itemContent, onContextMenu: onContextMenu, children: [(0, jsx_runtime_1.jsx)(ItemIcon_1.ItemIcon, { itemData: itemData }), (0, jsx_runtime_1.jsx)(Text_1.Text, { className: styles_module_scss_1.default.itemTitle, size: 12, draggable: true, ...hoverProps, children: item.getItemName() }), !isSharedProject && ((0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { className: styles_module_scss_1.default.itemButton, size: 16, SvgElement: button_dots_svg_1.default, onClick: (e) => {
                             onContextMenu(e);
                             e.stopPropagation();
-                        } }))] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: item.getItemName(), visible: showTooltip, position: "bottom" })] }));
+                        } }))] }), (0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: item.getItemName(), visible: hovered, position: "bottom" })] }));
 };
 exports.BasicItemContent = BasicItemContent;
 
@@ -373480,17 +373505,48 @@ exports.validateProjectFilesCount = validateProjectFilesCount;
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.useHover = void 0;
+exports.useHover = exports.TOOLTIP_SHOW_DELAY_MS = void 0;
 const react_1 = __webpack_require__(51649);
-const useHover = () => {
+exports.TOOLTIP_SHOW_DELAY_MS = 1000;
+const useHover = (delay = 0) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
+    const timeoutRef = (0, react_1.useRef)(null);
+    const clearHoverTimeout = () => {
+        if (timeoutRef.current !== null) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    };
+    const activate = () => {
+        clearHoverTimeout();
+        if (delay > 0) {
+            timeoutRef.current = setTimeout(() => {
+                setHovered(true);
+                timeoutRef.current = null;
+            }, delay);
+        }
+        else {
+            setHovered(true);
+        }
+    };
+    const deactivate = () => {
+        clearHoverTimeout();
+        setHovered(false);
+    };
+    (0, react_1.useEffect)(() => {
+        return () => {
+            clearHoverTimeout();
+        };
+    }, []);
     return {
         hovered,
         hoverProps: {
-            onMouseEnter: () => setHovered(true),
-            onMouseLeave: () => setHovered(false),
-            onFocus: () => setHovered(true),
-            onBlur: () => setHovered(false),
+            onMouseEnter: activate,
+            onMouseLeave: deactivate,
+            onFocus: activate,
+            onBlur: deactivate,
+            onDragStart: deactivate,
+            onKeyDown: deactivate,
         },
     };
 };
@@ -373542,7 +373598,7 @@ const useProjectCache_1 = __webpack_require__(69557);
 const helpers_1 = __webpack_require__(59578);
 const sendToast_1 = __webpack_require__(50068);
 const useUnsavedDraftResolution_1 = __webpack_require__(61171);
-const buildProjectSnapshot_1 = __webpack_require__(10533);
+const projectSnapshotHelpers_1 = __webpack_require__(22390);
 const isFinalLoadingState = (state) => state === types_1.LoadingState.SUCCESS || state === types_1.LoadingState.FAILED;
 const useProject = ({ projectData, projectContent = null, isContentLoaded = null, isLoading = false, loadProjectContent, loadTemplateProjectData, isTemplateDataLoaded, }) => {
     const project = (0, stores_1.useAppSelector)((state) => state.editor.project);
@@ -373588,7 +373644,10 @@ const useProject = ({ projectData, projectContent = null, isContentLoaded = null
             components: preparedComponents,
             commitId: null,
         };
-        dispatch((0, EditorSlice_1.setProject)(projectToSet));
+        dispatch((0, EditorSlice_1.setProject)({
+            ...projectToSet,
+            lastSavedSnapshot: (0, projectSnapshotHelpers_1.buildProjectSnapshot)(projectToSet),
+        }));
     }, [dispatch]);
     // set initial project data on first load
     (0, react_1.useEffect)(() => {
@@ -373746,7 +373805,7 @@ const useProject = ({ projectData, projectContent = null, isContentLoaded = null
             };
             dispatch((0, EditorSlice_1.setProject)({
                 ...projectToSet,
-                lastSavedSnapshot: (0, buildProjectSnapshot_1.buildProjectSnapshot)(projectToSet),
+                lastSavedSnapshot: (0, projectSnapshotHelpers_1.buildProjectSnapshot)(projectToSet),
             }));
             dispatch((0, EditorSlice_1.setCommits)({ commits: commits ?? [] }));
         })
@@ -373858,7 +373917,7 @@ const constants_1 = __webpack_require__(16287);
 const sendToast_1 = __webpack_require__(50068);
 const projectTabSync_1 = __webpack_require__(48235);
 const LeaveFlowSlice_1 = __webpack_require__(52990);
-const buildProjectSnapshot_1 = __webpack_require__(10533);
+const projectSnapshotHelpers_1 = __webpack_require__(22390);
 const selectors_1 = __webpack_require__(43551);
 const AUTO_SAVE_INTERVAL = 2000;
 const useProjectPersistence = ({ user, projectData, hasShownSavePrompt, saveProject, isShared, }) => {
@@ -373999,7 +374058,7 @@ const useProjectPersistence = ({ user, projectData, hasShownSavePrompt, saveProj
             commitId: incomingCommitId ?? project.commitId,
             commits,
         };
-        const newLastSavedSnapshot = (0, buildProjectSnapshot_1.buildProjectSnapshot)(cleanedProject);
+        const newLastSavedSnapshot = (0, projectSnapshotHelpers_1.buildProjectSnapshot)(cleanedProject);
         const updatedProjectSnapshot = {
             components: cleanedComponents,
             hasStructureChanges: false,
@@ -374207,6 +374266,7 @@ const react_1 = __webpack_require__(51649);
 const react_redux_1 = __webpack_require__(14062);
 const EditorSlice_1 = __webpack_require__(68512);
 const types_1 = __webpack_require__(92932);
+const projectSnapshotHelpers_1 = __webpack_require__(22390);
 // check if incoming and cached projects are the same draft
 const isSameDraftProjectType = (incomingProject, cachedProject) => {
     if (!incomingProject || !cachedProject)
@@ -374216,12 +374276,34 @@ const isSameDraftProjectType = (incomingProject, cachedProject) => {
         cachedProject.project_type === incomingProject.project_type &&
         cachedProject.extension === incomingProject.extension);
 };
+const buildTemplateSnapshotFromIncomingProject = (cachedProject, incomingProject) => {
+    if (!incomingProject?.components?.length)
+        return null;
+    return (0, projectSnapshotHelpers_1.buildProjectSnapshot)({
+        ...cachedProject,
+        ...incomingProject,
+        components: incomingProject.components,
+        commitId: null,
+    });
+};
+const hasCachedDraftChanges = (cachedProject, incomingProject) => {
+    if (!cachedProject)
+        return false;
+    const cachedSnapshot = (0, projectSnapshotHelpers_1.buildProjectSnapshot)(cachedProject);
+    const baselineSnapshot = cachedProject.lastSavedSnapshot ??
+        buildTemplateSnapshotFromIncomingProject(cachedProject, incomingProject);
+    if (!baselineSnapshot) {
+        return true;
+    }
+    return !(0, projectSnapshotHelpers_1.areProjectSnapshotsEqual)(cachedSnapshot, baselineSnapshot);
+};
 // handles unsaved draft logic and modal decision
 const useUnsavedDraftResolution = ({ projectData, cachedProject, isCurrentOutdated, }) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     // flag to ignore cached draft after Start New
     const [shouldBypassCachedDraft, setShouldBypassCachedDraft] = (0, react_1.useState)(false);
     const isSameDraftType = (0, react_1.useMemo)(() => isSameDraftProjectType(projectData, cachedProject), [projectData, cachedProject]);
+    const hasDraftChanges = (0, react_1.useMemo)(() => hasCachedDraftChanges(cachedProject, projectData), [cachedProject, projectData]);
     (0, react_1.useEffect)(() => {
         if (projectData?.commitId && shouldBypassCachedDraft) {
             setShouldBypassCachedDraft(false);
@@ -374231,7 +374313,8 @@ const useUnsavedDraftResolution = ({ projectData, cachedProject, isCurrentOutdat
     const shouldShowUnsavedDraftModal = !!cachedProject &&
         !isCurrentOutdated &&
         !shouldBypassCachedDraft &&
-        isSameDraftType;
+        isSameDraftType &&
+        hasDraftChanges;
     const openUnsavedDraftModal = (0, react_1.useCallback)(() => {
         dispatch((0, EditorSlice_1.showModal)({
             modal: types_1.ModalType.DRAFT_UNSAVED_CHANGES,
@@ -374259,8 +374342,8 @@ exports.useUnsavedDraftResolution = useUnsavedDraftResolution;
 
 var _a;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.revertProject = exports.setRemixTriggered = exports.setIsLoadingCommit = exports.setCommitIdLoadTriggered = exports.setShareLinks = exports.setCommits = exports.setSharedStatus = exports.setCodeVisibility = exports.applyComponentsPatch = exports.setSaving = exports.disableTheming = exports.hideSidebar = exports.showSidebar = exports.closeModal = exports.showModal = exports.closeErrorModal = exports.showErrorModal = exports.updateProjectName = exports.setSaveTriggered = exports.triggerDraw = exports.triggerCodeRun = exports.stopDraw = exports.stopCodeRun = exports.setLoading = exports.setReadOnly = exports.updateProjectIdentifier = exports.updateProjectCommits = exports.updateProjectSnapshot = exports.setProject = exports.setHasShownSavePrompt = exports.setError = exports.setCascadeUpdate = exports.setIsOutputOnly = exports.setAutorunEnabled = exports.setPage = exports.setFocussedFileIndex = exports.addFilePanel = exports.setOpenedFiles = exports.openFile = exports.closeFile = exports.expireJustLoaded = exports.codeRunHandled = exports.resetRunner = exports.setLoadedRunner = exports.loadingRunner = exports.updateProjectComponent = exports.addProjectComponent = exports.resetState = exports.EditorSlice = exports.editorInitialState = void 0;
-exports.queueBinaryWrites = void 0;
+exports.setRemixTriggered = exports.setIsLoadingCommit = exports.setCommitIdLoadTriggered = exports.setShareLinks = exports.setCommits = exports.setSharedStatus = exports.setCodeVisibility = exports.applyComponentsPatch = exports.setSaving = exports.disableTheming = exports.hideSidebar = exports.showSidebar = exports.closeModal = exports.showModal = exports.closeErrorModal = exports.showErrorModal = exports.updateProjectName = exports.setProjectNameDraft = exports.setSaveTriggered = exports.triggerDraw = exports.triggerCodeRun = exports.stopDraw = exports.stopCodeRun = exports.setLoading = exports.setReadOnly = exports.updateProjectIdentifier = exports.updateProjectCommits = exports.updateProjectSnapshot = exports.setProject = exports.setHasShownSavePrompt = exports.setError = exports.setCascadeUpdate = exports.setIsOutputOnly = exports.setAutorunEnabled = exports.setPage = exports.setFocussedFileIndex = exports.addFilePanel = exports.setOpenedFiles = exports.openFile = exports.closeFile = exports.expireJustLoaded = exports.codeRunHandled = exports.resetRunner = exports.setLoadedRunner = exports.loadingRunner = exports.updateProjectComponent = exports.addProjectComponent = exports.resetState = exports.EditorSlice = exports.editorInitialState = void 0;
+exports.queueBinaryWrites = exports.revertProject = void 0;
 const toolkit_1 = __webpack_require__(12069);
 const ProjectTypes_1 = __webpack_require__(27130);
 const types_1 = __webpack_require__(92932);
@@ -374308,6 +374391,7 @@ exports.editorInitialState = {
     isSharedProject: false,
     shareLinks: null,
     remixTriggered: false,
+    projectNameDraft: null,
 };
 exports.EditorSlice = (0, toolkit_1.createSlice)({
     name: "editor",
@@ -374414,6 +374498,7 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
         },
         setProject: (state, action) => {
             state.project = action.payload;
+            state.projectNameDraft = null;
             state.loading = types_1.LoadingState.SUCCESS;
             state.openedFiles = [[]];
             state.focussedFileIndices = [0];
@@ -374462,8 +374547,12 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
         setSaving: (state, action) => {
             state.saving = action.payload;
         },
+        setProjectNameDraft: (state, action) => {
+            state.projectNameDraft = action.payload;
+        },
         updateProjectName: (state, action) => {
             state.project.name = action.payload;
+            state.projectNameDraft = null;
             state.saving = types_1.SavingState.IDLE;
         },
         updateProjectComponent: (state, action) => {
@@ -374504,6 +374593,7 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
             state.project.components = action.payload.components;
             state.project.hasStructureChanges = action.payload.hasStructureChanges;
             state.project.lastSavedSnapshot = action.payload.lastSavedSnapshot;
+            state.projectNameDraft = null;
             if (action.payload.identifier) {
                 state.project.identifier = action.payload.identifier;
             }
@@ -374587,7 +374677,7 @@ exports.EditorSlice = (0, toolkit_1.createSlice)({
     },
 });
 // Action creators are generated for each case reducer function
-_a = exports.EditorSlice.actions, exports.resetState = _a.resetState, exports.addProjectComponent = _a.addProjectComponent, exports.updateProjectComponent = _a.updateProjectComponent, exports.loadingRunner = _a.loadingRunner, exports.setLoadedRunner = _a.setLoadedRunner, exports.resetRunner = _a.resetRunner, exports.codeRunHandled = _a.codeRunHandled, exports.expireJustLoaded = _a.expireJustLoaded, exports.closeFile = _a.closeFile, exports.openFile = _a.openFile, exports.setOpenedFiles = _a.setOpenedFiles, exports.addFilePanel = _a.addFilePanel, exports.setFocussedFileIndex = _a.setFocussedFileIndex, exports.setPage = _a.setPage, exports.setAutorunEnabled = _a.setAutorunEnabled, exports.setIsOutputOnly = _a.setIsOutputOnly, exports.setCascadeUpdate = _a.setCascadeUpdate, exports.setError = _a.setError, exports.setHasShownSavePrompt = _a.setHasShownSavePrompt, exports.setProject = _a.setProject, exports.updateProjectSnapshot = _a.updateProjectSnapshot, exports.updateProjectCommits = _a.updateProjectCommits, exports.updateProjectIdentifier = _a.updateProjectIdentifier, exports.setReadOnly = _a.setReadOnly, exports.setLoading = _a.setLoading, exports.stopCodeRun = _a.stopCodeRun, exports.stopDraw = _a.stopDraw, exports.triggerCodeRun = _a.triggerCodeRun, exports.triggerDraw = _a.triggerDraw, exports.setSaveTriggered = _a.setSaveTriggered, exports.updateProjectName = _a.updateProjectName, exports.showErrorModal = _a.showErrorModal, exports.closeErrorModal = _a.closeErrorModal, exports.showModal = _a.showModal, exports.closeModal = _a.closeModal, exports.showSidebar = _a.showSidebar, exports.hideSidebar = _a.hideSidebar, exports.disableTheming = _a.disableTheming, exports.setSaving = _a.setSaving, exports.applyComponentsPatch = _a.applyComponentsPatch, exports.setCodeVisibility = _a.setCodeVisibility, exports.setSharedStatus = _a.setSharedStatus, exports.setCommits = _a.setCommits, exports.setShareLinks = _a.setShareLinks, exports.setCommitIdLoadTriggered = _a.setCommitIdLoadTriggered, exports.setIsLoadingCommit = _a.setIsLoadingCommit, exports.setRemixTriggered = _a.setRemixTriggered, exports.revertProject = _a.revertProject;
+_a = exports.EditorSlice.actions, exports.resetState = _a.resetState, exports.addProjectComponent = _a.addProjectComponent, exports.updateProjectComponent = _a.updateProjectComponent, exports.loadingRunner = _a.loadingRunner, exports.setLoadedRunner = _a.setLoadedRunner, exports.resetRunner = _a.resetRunner, exports.codeRunHandled = _a.codeRunHandled, exports.expireJustLoaded = _a.expireJustLoaded, exports.closeFile = _a.closeFile, exports.openFile = _a.openFile, exports.setOpenedFiles = _a.setOpenedFiles, exports.addFilePanel = _a.addFilePanel, exports.setFocussedFileIndex = _a.setFocussedFileIndex, exports.setPage = _a.setPage, exports.setAutorunEnabled = _a.setAutorunEnabled, exports.setIsOutputOnly = _a.setIsOutputOnly, exports.setCascadeUpdate = _a.setCascadeUpdate, exports.setError = _a.setError, exports.setHasShownSavePrompt = _a.setHasShownSavePrompt, exports.setProject = _a.setProject, exports.updateProjectSnapshot = _a.updateProjectSnapshot, exports.updateProjectCommits = _a.updateProjectCommits, exports.updateProjectIdentifier = _a.updateProjectIdentifier, exports.setReadOnly = _a.setReadOnly, exports.setLoading = _a.setLoading, exports.stopCodeRun = _a.stopCodeRun, exports.stopDraw = _a.stopDraw, exports.triggerCodeRun = _a.triggerCodeRun, exports.triggerDraw = _a.triggerDraw, exports.setSaveTriggered = _a.setSaveTriggered, exports.setProjectNameDraft = _a.setProjectNameDraft, exports.updateProjectName = _a.updateProjectName, exports.showErrorModal = _a.showErrorModal, exports.closeErrorModal = _a.closeErrorModal, exports.showModal = _a.showModal, exports.closeModal = _a.closeModal, exports.showSidebar = _a.showSidebar, exports.hideSidebar = _a.hideSidebar, exports.disableTheming = _a.disableTheming, exports.setSaving = _a.setSaving, exports.applyComponentsPatch = _a.applyComponentsPatch, exports.setCodeVisibility = _a.setCodeVisibility, exports.setSharedStatus = _a.setSharedStatus, exports.setCommits = _a.setCommits, exports.setShareLinks = _a.setShareLinks, exports.setCommitIdLoadTriggered = _a.setCommitIdLoadTriggered, exports.setIsLoadingCommit = _a.setIsLoadingCommit, exports.setRemixTriggered = _a.setRemixTriggered, exports.revertProject = _a.revertProject;
 exports.queueBinaryWrites = (0, toolkit_1.createAction)("editor/queueBinaryWrites");
 exports["default"] = exports.EditorSlice.reducer;
 
@@ -374946,8 +375036,10 @@ exports.selectProjectHasContentChanges = (0, toolkit_1.createSelector)([
 exports.selectProjectHasNameChanges = (0, toolkit_1.createSelector)([
     (state) => state.editor.project?.name,
     (state) => state.editor.project?.lastSavedSnapshot?.name,
-], (projectName, snapshotName) => {
-    return Boolean(snapshotName) && projectName !== snapshotName;
+    (state) => state.editor.projectNameDraft,
+], (projectName, snapshotName, projectNameDraft) => {
+    const effectiveProjectName = projectNameDraft || projectName;
+    return Boolean(snapshotName) && effectiveProjectName !== snapshotName;
 });
 exports.selectProjectDirtyState = (0, toolkit_1.createSelector)([exports.selectProjectHasContentChanges, exports.selectProjectHasNameChanges], (hasContentChanges, hasNameChanges) => {
     return hasContentChanges || hasNameChanges;
@@ -375460,32 +375552,6 @@ class BinaryStore {
 exports.binaryStore = new BinaryStore();
 
 
-/***/ }),
-
-/***/ 10533:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.buildProjectSnapshot = void 0;
-const ProjectTypes_1 = __webpack_require__(27130);
-const signatureHelpers_1 = __webpack_require__(41835);
-const buildProjectSnapshot = (project) => {
-    return {
-        name: project.name,
-        identifier: project.identifier,
-        components: Object.fromEntries(project.components.map((c) => [
-            c.path,
-            c.type === ProjectTypes_1.ProjectComponentType.FILE
-                ? c.content
-                : undefined,
-        ])),
-        structureSignature: (0, signatureHelpers_1.buildSignature)(project.components),
-    };
-};
-exports.buildProjectSnapshot = buildProjectSnapshot;
-
-
 /***/ }),
 
 /***/ 56469:
@@ -376054,6 +376120,49 @@ const getAuthorName = (author) => {
 exports.getAuthorName = getAuthorName;
 
 
+/***/ }),
+
+/***/ 22390:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.areProjectSnapshotsEqual = exports.buildProjectSnapshot = void 0;
+const ProjectTypes_1 = __webpack_require__(27130);
+const signatureHelpers_1 = __webpack_require__(41835);
+const buildProjectSnapshot = (project) => {
+    return {
+        name: project.name,
+        identifier: project.identifier,
+        components: Object.fromEntries(project.components.map((c) => [
+            c.path,
+            c.type === ProjectTypes_1.ProjectComponentType.FILE
+                ? c.content
+                : undefined,
+        ])),
+        structureSignature: (0, signatureHelpers_1.buildSignature)(project.components),
+    };
+};
+exports.buildProjectSnapshot = buildProjectSnapshot;
+const areProjectSnapshotsEqual = (first, second) => {
+    if (!first || !second)
+        return false;
+    if (first.name !== second.name)
+        return false;
+    if ((0, signatureHelpers_1.isSignatureDifferent)(first.structureSignature, second.structureSignature)) {
+        return false;
+    }
+    const firstComponentPaths = Object.keys(first.components);
+    const secondComponentPaths = Object.keys(second.components);
+    if (firstComponentPaths.length !== secondComponentPaths.length) {
+        return false;
+    }
+    return firstComponentPaths.every((path) => Object.prototype.hasOwnProperty.call(second.components, path) &&
+        first.components[path] === second.components[path]);
+};
+exports.areProjectSnapshotsEqual = areProjectSnapshotsEqual;
+
+
 /***/ }),
 
 /***/ 48235:

package/package.json

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