feat: ✨ Add ErrorBoundary on mobile

[wapec]

In editors display a framework7 dialog when ErrorBoundary catches a render error

How to test

Open any document type (.docx / .xlsx / .pptx / .vsdx) in the
mobile editor

Triggering a render error manually

Real render crashes are not deterministic, so use DevTools to invoke the
boundary's componentDidCatch directly.

1. Open DevTools.

2. In the Console tab, click the top dropdown at the top-left and
   switch context to the iframe whose URL ends in
   /web-apps/apps/<editor>/mobile/index.html.

3. Paste and run:

   (function triggerErrorBoundary() {
     const app = document.getElementById('app');
     const key = Object.keys(app).find(k => k.startsWith('__reactContainer'));
     const root = app[key].stateNode.current;
     const find = (f) => {
       if (!f) return null;
       const n = f.stateNode;
       if (n && typeof n.componentDidCatch === 'function'
           && typeof f.type?.getDerivedStateFromError === 'function') return n;
       return find(f.child) || find(f.sibling);
     };
     const eb = find(root);
     if (!eb) throw new Error('ErrorBoundary not found');
     eb.componentDidCatch(new Error('Manual ErrorBoundary test from DevTools'));
   })();

The dialog should appear immediately. To test different error lengths,
replace the message string — e.g. new Error('Line1\nLine2\n…\nLine9')
to verify the multi-line truncation.

Test plan

Dialog appearance

• A modal dialog appears with title "Error"
• The error text is shown in monospace inside the dialog body
• Exactly one button is rendered, labelled "OK"

Dialog behaviour

• Tap OK: the editor closes (in a hosted iframe, this calls
  Common.Gateway.requestClose(), so the parent app — e.g. Nextcloud —
  receives the close signal; outside that, it falls back to /)
• The dialog cannot be dismissed by tapping outside (modal)

Cross-editor coverage

• documenteditor (.docx): dialog appears + single OK button works
• spreadsheeteditor (.xlsx): same
• presentationeditor (.pptx): same
• visioeditor (.vsdx): same

Cross-theme rendering (Framework7 theme: 'auto')

• iOS (UA = iPhone/iPad): centred title, rounded corners, OK
  centred below the body with a thin divider above it
• Android / Material (UA = Pixel/other Android): left-aligned
  title, OK right-aligned in the dialog footer

Color / contrast (light vs dark mode)

• Light system theme: dialog body is light, error text is #9b1c1c
  (deep red) — passes WCAG AAA against white
• Dark system theme: body.theme-type-dark is set; dialog body is
  dark, error text switches to #ff6b6b — passes WCAG AA against the
  dark dialog background
• Toggle OS dark mode while the editor is open: on next dialog open,
  the text color matches the active theme

Long error handling

• Use a 9-line stack-trace payload (see the snippet note above)
• Dialog body clamps to 7 lines with … ellipsis
  (max-height 120 px)
• Dialog does not grow to fill the screen

Sanity

• No console errors appear besides the simulated one
• After tapping OK there are no stuck modals or stale React state

Tested on

• iOS Safari
  • documenteditor
  • spreadsheeteditor
  • presentationeditor
  • visioeditor
• Android Chrome
  • documenteditor
  • spreadsheeteditor
  • presentationeditor
  • visioeditor

Screenshots

Dialog by platform — medium / long error in documenteditor

iOS	Android

Dialog across editor types

spreadsheeteditor	presentationeditor

[wapec]

Found a way to set a few style properties with global variables. Will update the code soon