Files
colanode/apps/mobile/webviews/editor/editor.html

131 lines
3.9 KiB
HTML
Raw Permalink Normal View History

Mobile: WebView-based page editor with TipTap (#345) * Mobile: replace inline page editor with WebView-based TipTap editor Replaces the plain-text block-by-block page editor with a Vite-built WebView that runs the full TipTap rich text editor. The editor HTML is bundled as a single self-contained asset, loaded via expo-asset and rendered in react-native-webview. Communication between RN and the WebView uses postMessage/onMessage bridge for init, mutations, queries, theme changes, and navigation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Mobile: reorganize WebView editor as standalone package Moves the editor WebView app from apps/mobile/src/editor-webview/ to apps/mobile/webviews/editor/ as a first-class build target with its own package.json, tsconfig.json, and vite.config.ts. This fixes TypeScript compilation (editor code no longer typechecked as React Native) and makes the build story clearer. - WebView editor is now at apps/mobile/webviews/editor/ - Built artifact copied to apps/mobile/assets/editor-dist/ on prestart - Vite dev server support for fast iteration - Tailwind CSS @source path fixed (../../../../packages/ui) - Page title editing restored via RenameNodeSheet - File preview now converts file:// to base64 data URLs for WebView - WebView hidden until ready to avoid white flash - Keyboard accessory bar hidden on iOS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 13:43:17 +01:00
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<title>Editor</title>
<style>
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--novel-stone-400: oklch(0.556 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--novel-stone-400: oklch(0.708 0 0);
}
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
Mobile: WebView-based page editor with TipTap (#345) * Mobile: replace inline page editor with WebView-based TipTap editor Replaces the plain-text block-by-block page editor with a Vite-built WebView that runs the full TipTap rich text editor. The editor HTML is bundled as a single self-contained asset, loaded via expo-asset and rendered in react-native-webview. Communication between RN and the WebView uses postMessage/onMessage bridge for init, mutations, queries, theme changes, and navigation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Mobile: reorganize WebView editor as standalone package Moves the editor WebView app from apps/mobile/src/editor-webview/ to apps/mobile/webviews/editor/ as a first-class build target with its own package.json, tsconfig.json, and vite.config.ts. This fixes TypeScript compilation (editor code no longer typechecked as React Native) and makes the build story clearer. - WebView editor is now at apps/mobile/webviews/editor/ - Built artifact copied to apps/mobile/assets/editor-dist/ on prestart - Vite dev server support for fast iteration - Tailwind CSS @source path fixed (../../../../packages/ui) - Page title editing restored via RenameNodeSheet - File preview now converts file:// to base64 data URLs for WebView - WebView hidden until ready to avoid white flash - Keyboard accessory bar hidden on iOS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 13:43:17 +01:00
background-color: var(--background);
color: var(--foreground);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-webkit-text-size-adjust: 100%;
}
#scroll-container {
height: 100%;
overflow-y: auto;
Mobile: WebView-based page editor with TipTap (#345) * Mobile: replace inline page editor with WebView-based TipTap editor Replaces the plain-text block-by-block page editor with a Vite-built WebView that runs the full TipTap rich text editor. The editor HTML is bundled as a single self-contained asset, loaded via expo-asset and rendered in react-native-webview. Communication between RN and the WebView uses postMessage/onMessage bridge for init, mutations, queries, theme changes, and navigation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Mobile: reorganize WebView editor as standalone package Moves the editor WebView app from apps/mobile/src/editor-webview/ to apps/mobile/webviews/editor/ as a first-class build target with its own package.json, tsconfig.json, and vite.config.ts. This fixes TypeScript compilation (editor code no longer typechecked as React Native) and makes the build story clearer. - WebView editor is now at apps/mobile/webviews/editor/ - Built artifact copied to apps/mobile/assets/editor-dist/ on prestart - Vite dev server support for fast iteration - Tailwind CSS @source path fixed (../../../../packages/ui) - Page title editing restored via RenameNodeSheet - File preview now converts file:// to base64 data URLs for WebView - WebView hidden until ready to avoid white flash - Keyboard accessory bar hidden on iOS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 13:43:17 +01:00
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="editor-root"></div>
</div>
<script>
(function () {
function stringifyError(error) {
if (!error) {
return 'Unknown error';
}
if (error.stack) {
return String(error.stack);
}
if (error.message) {
return String(error.message);
}
return String(error);
}
function report(message) {
try {
const rn = window.ReactNativeWebView;
if (rn && typeof rn.postMessage === 'function') {
rn.postMessage(
JSON.stringify({
type: 'error',
payload: { message },
})
);
}
} catch {
// Ignore reporting failures inside the reporter itself.
}
}
window.__colanodeReportFatal = report;
window.addEventListener('error', function (event) {
const location = [event.filename, event.lineno, event.colno]
.filter(Boolean)
.join(':');
const message = event.error
? stringifyError(event.error)
: [event.message, location].filter(Boolean).join(' at ');
report('Window error: ' + message);
});
window.addEventListener('unhandledrejection', function (event) {
report('Unhandled rejection: ' + stringifyError(event.reason));
});
})();
</script>
Mobile: WebView-based page editor with TipTap (#345) * Mobile: replace inline page editor with WebView-based TipTap editor Replaces the plain-text block-by-block page editor with a Vite-built WebView that runs the full TipTap rich text editor. The editor HTML is bundled as a single self-contained asset, loaded via expo-asset and rendered in react-native-webview. Communication between RN and the WebView uses postMessage/onMessage bridge for init, mutations, queries, theme changes, and navigation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Mobile: reorganize WebView editor as standalone package Moves the editor WebView app from apps/mobile/src/editor-webview/ to apps/mobile/webviews/editor/ as a first-class build target with its own package.json, tsconfig.json, and vite.config.ts. This fixes TypeScript compilation (editor code no longer typechecked as React Native) and makes the build story clearer. - WebView editor is now at apps/mobile/webviews/editor/ - Built artifact copied to apps/mobile/assets/editor-dist/ on prestart - Vite dev server support for fast iteration - Tailwind CSS @source path fixed (../../../../packages/ui) - Page title editing restored via RenameNodeSheet - File preview now converts file:// to base64 data URLs for WebView - WebView hidden until ready to avoid white flash - Keyboard accessory bar hidden on iOS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-15 13:43:17 +01:00
<script type="module" src="/src/main.tsx"></script>
</body>
</html>