TT-6465 let a note title use the desktop dictionary menu

localization/TranscriberAdmin-en-1.2.xliff

@@ -7621,6 +7621,13 @@
                <context context-type="sourcefile">PlanSheet.tsx</context>
             </context-group>
          </trans-unit>
+         <trans-unit id="planSheet.noteTitle">
+            <source>Note title</source>
+            <target/>
+            <context-group>
+               <context context-type="sourcefile">NoteTitleField.tsx</context>
+            </context-group>
+         </trans-unit>
          <trans-unit id="planSheet.pasting">
             <source>Pasting</source>
             <target/>

localization/TranscriberAdmin-en.xlf

@@ -6532,6 +6532,12 @@
             <target/>
          </segment>
       </unit>
+      <unit id="planSheet.noteTitle">
+         <segment>
+            <source>Note title</source>
+            <target/>
+         </segment>
+      </unit>
       <unit id="planSheet.pasting">
          <segment>
             <source>Pasting</source>

web/src/components/Sheet/NoteTitleField.test.tsx

@@ -0,0 +1,57 @@
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+  shallowEqual: jest.fn(),
+}));
+
+import { useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useSelector } from 'react-redux';
+import { NoteTitleField } from './NoteTitleField';
+import { shouldOpenSheetContextMenu } from './sheetContextMenu';
+
+const mockUseSelector = useSelector as unknown as jest.Mock;
+
+function TitleCell({ readonly = false }: { readonly?: boolean }) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [value, setValue] = useState('Teest');
+  return (
+    <div
+      onContextMenu={(event) => {
+        if (!shouldOpenSheetContextMenu(event.target)) return;
+        event.preventDefault();
+        setMenuOpen(true);
+      }}
+    >
+      <NoteTitleField value={value} onChange={setValue} readonly={readonly} />
+      {menuOpen ? <div role="menu">Sheet menu</div> : null}
+    </div>
+  );
+}
+
+describe('note title dictionary', () => {
+  beforeEach(() => {
+    mockUseSelector.mockReturnValue({ noteTitle: 'Note title' });
+  });
+
+  it('does not open the sheet menu on a misspelled note title', () => {
+    render(<TitleCell />);
+    const title = screen.getByRole('textbox', { name: 'Note title' });
+    expect(title).toHaveAttribute('spellcheck', 'true');
+    expect(title).not.toHaveAttribute('readonly');
+    fireEvent.change(title, { target: { value: 'Changed' } });
+    expect(title).toHaveValue('Changed');
+    fireEvent.contextMenu(title);
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+
+  it('does not change a read-only note title', () => {
+    render(<TitleCell readonly />);
+    const title = screen.getByRole('textbox', { name: 'Note title' });
+    expect(title).toHaveAttribute('spellcheck', 'true');
+    expect(title).toHaveAttribute('readonly');
+    fireEvent.change(title, { target: { value: 'Changed' } });
+    expect(title).toHaveValue('Teest');
+    fireEvent.contextMenu(title);
+    expect(screen.queryByRole('menu')).toBeNull();
+  });
+});

web/src/components/Sheet/NoteTitleField.tsx

@@ -0,0 +1,34 @@
+import { TextField } from '@mui/material';
+import { IPlanSheetStrings } from '@model/index';
+import { useSelector, shallowEqual } from 'react-redux';
+import { planSheetSelector } from '../../selector';
+
+export function NoteTitleField({
+  value,
+  onChange,
+  readonly = false,
+}: Readonly<{
+  value: string;
+  onChange: (value: string) => void;
+  readonly?: boolean;
+}>) {
+  const t: IPlanSheetStrings = useSelector(planSheetSelector, shallowEqual);
+  return (
+    <TextField
+      value={value}
+      onChange={(event) => {
+        if (readonly) return;
+        onChange(event.target.value);
+      }}
+      size="small"
+      spellCheck
+      slotProps={{
+        htmlInput: {
+          'aria-label': t.noteTitle,
+          spellCheck: true,
+          readOnly: readonly,
+        },
+      }}
+    />
+  );
+}

web/src/components/Sheet/PlanSheet.tsx

@@ -83,6 +83,7 @@ import { findPlanSheetRowFromReferenceQuery } from './findPlanSheetRowFromRefere
 import { rowTypes } from './rowTypes';
 import { PlanSheetRowCtx } from './PlanActionMenu';
 import { usePlanSheetFill } from './usePlanSheetFill';
+import { shouldOpenSheetContextMenu } from './sheetContextMenu';
 import { useRefErrTest } from './useRefErrTest';
 import { useShowIcon } from './useShowIcon';
 import {
@@ -909,6 +910,7 @@ export function PlanSheet(props: IProps) {
     i,
     j
   ) => {
+    if (!shouldOpenSheetContextMenu(e.target)) return;
     e.preventDefault();
     const absI = sheetToAbs(i);
     if (absI > 0 && !readonly) {

web/src/components/Sheet/sheetContextMenu.ts

@@ -0,0 +1,6 @@
+export function shouldOpenSheetContextMenu(
+  target: EventTarget | null
+): boolean {
+  if (!(target instanceof Element)) return true;
+  return target.closest('input, textarea') == null;
+}

web/src/components/Sheet/usePlanSheetFill.tsx

@@ -7,6 +7,7 @@ import {
   OptionType,
 } from '../../model';
 import { ICell, ICellChange } from './PlanSheet';
+import { NoteTitleField } from './NoteTitleField';
 import { planSheetSelector, viewModeSelector } from '../../selector';
 import {
   related,
@@ -480,20 +481,20 @@ export const usePlanSheetFill = ({
     const handleMediaIdChange = (mediaId: string) => {
       titleMediaChanged(rowIndex, mediaId);
     };
-    const noteTitle = (e: string) => {
-      return (
-        <>
-          {'\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0'}
-          {NoteIcon}
-          {'\u00A0'}
-          {e}
-        </>
-      );
-    };
 
     return (
       <>
-        {isNote && noteTitle(e as string)}
+        {isNote && (
+          <>
+            {NoteIcon}
+            {'\u00A0'}
+            <NoteTitleField
+              value={e as string}
+              readonly={readonly}
+              onChange={handleTextChange}
+            />
+          </>
+        )}
         {!isNote && (
           <TitleEdit
             title={e as string}

web/src/store/localization/exported-strings-name.json

@@ -1 +1 @@
-{ "stringsName": "stringsfc697f79.json" }
+{ "stringsName": "stringse76d118f.json" }

web/src/store/localization/model.tsx

@@ -1273,6 +1273,7 @@ export interface IPlanSheetStrings extends Localize.LocalizedStringsMethods {
     "passageEnd": string;
     "passageToPrevSection": string;
     "passageToNextSection": string;
+    "noteTitle": string;
     "pasting": string;
     "propagate": string;
     "publish": string;

web/src/store/localization/reducers.tsx

@@ -1340,6 +1340,7 @@ const initialState = {
 			"passageEnd": "Add Passage to End",
 			"passageToPrevSection": "Move {pt} {0} Up",
 			"passageToNextSection": "Move {pt} {0} Down",
+			"noteTitle": "Note title",
 			"pasting": "Pasting",
 			"propagate": "Propagate to all {0} in the {1}",
 			"publish": "Publish {0} {1}",