✨ hover highlighted sections for feedback

2026-02-21 13:58:19 +10:00
parent ca49a407da
commit e2d3f44dfa
13 changed files with 428 additions and 26 deletions
--- a/demo/index.html
+++ b/demo/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Annotation Tooltip Demo</title>
+    <style>
+      html, body, #root { height: 100%; margin: 0; padding: 0; overflow: hidden; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
--- a/demo/main.tsx
+++ b/demo/main.tsx
@@ -0,0 +1,68 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { useEditorStore } from '@renderer/store/editorStore'
+import { MarkdownEditor } from '@renderer/components/Editor/MarkdownEditor'
+import '@renderer/styles/global.css'
+
+// Mock window.api so the renderer doesn't crash in a plain browser context
+;(window as unknown as Record<string, unknown>).api = {
+  listFiles: () => Promise.resolve([]),
+  readFile: () => Promise.resolve(''),
+  writeFile: () => Promise.resolve(),
+  streamAIMessage: () => Promise.resolve(),
+  removeAIListener: () => {},
+  getProjectWordCount: () => Promise.resolve(0),
+  saveOrder: () => Promise.resolve()
+}
+
+const DEMO_TEXT =
+  `She was seen by him walking down the cobblestone path.\n\n` +
+  `The old manuscript was written by an unknown author many centuries ago.\n\n` +
+  `The message had been delivered by the courier at dawn.`
+
+// Compute annotation character ranges directly from the text
+const a1s = DEMO_TEXT.indexOf('She was seen')
+const a1e = DEMO_TEXT.indexOf('.', a1s) + 1
+const a2s = DEMO_TEXT.indexOf('The old manuscript')
+const a2e = DEMO_TEXT.indexOf('.', a2s) + 1
+const a3s = DEMO_TEXT.indexOf('The message')
+const a3e = DEMO_TEXT.indexOf('.', a3s) + 1
+
+// Pre-seed store before React renders so all three effects fire correctly on mount
+const store = useEditorStore.getState()
+store.setActiveFile('demo.md', DEMO_TEXT)
+store.setAnnotations([
+  {
+    id: 'ann-1',
+    type: 'passive_voice',
+    from: a1s,
+    to: a1e,
+    matchedText: 'was seen by',
+    message: 'Passive voice weakens the narrative tension here — placing the subject in an active role would make the sentence more immediate and visceral, which is essential for gothic prose where atmosphere must feel alive and urgent\u2026',
+    suggestion: 'He saw her walking down the cobblestone path.'
+  },
+  {
+    id: 'ann-2',
+    type: 'passive_voice',
+    from: a2s,
+    to: a2e,
+    matchedText: 'was written by',
+    message: 'Passive construction distances the reader from the action; consider foregrounding the actor to strengthen the historical atmosphere.',
+    suggestion: 'An unknown author wrote the old manuscript many centuries ago.'
+  },
+  {
+    id: 'ann-3',
+    type: 'style',
+    from: a3s,
+    to: a3e,
+    matchedText: 'had been delivered by',
+    message: 'Wordy passive construction: "had been delivered by"',
+    suggestion: 'The courier delivered the message at dawn.'
+  }
+])
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <MarkdownEditor />
+  </StrictMode>
+)