feat: Document artifact + rich text editor - #603

packages/documents/src/MarkdownDocument.tsx (2)

24-29: 💤 Low value

Inline arrow function creates new reference on each render.

The onChange prop receives a new arrow function (markdown) => setMarkdown(artifactId, markdown) on every render. While this typically doesn't cause issues with Tiptap's internal memoization, you could wrap it in useCallback for consistency.

♻️ Optional: Memoize onChange callback

+ const handleChange = React.useCallback(
+   (markdown: string) => setMarkdown(artifactId, markdown),
+   [artifactId, setMarkdown],
+ );
+
  return (
    <MarkdownDocumentEditor
      value={document?.markdown ?? ''}
-     onChange={(markdown) => setMarkdown(artifactId, markdown)}
+     onChange={handleChange}
    />
  );

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/documents/src/MarkdownDocument.tsx` around lines 24 - 29, The inline
arrow passed to MarkdownDocumentEditor’s onChange prop creates a new function
each render; wrap the handler in React.useCallback (e.g., create a memoized
handleChange that calls setMarkdown(artifactId, markdown)) and pass that
callback to onChange to stabilize the prop reference; ensure artifactId and
setMarkdown are included in the dependency array so the callback updates
correctly.

---

8-16: 💤 Low value

Consider combining selectors or using shallow comparison.

Three separate useStoreWithDocuments calls will cause this component to re-render whenever any of these three values change. While the functions (ensureDocument, setMarkdown) are likely stable references, combining related selectors can improve clarity and potentially performance.

♻️ Consider consolidating selectors

- const document = useStoreWithDocuments(
-   (state) => state.documents.config.artifacts[artifactId],
- );
- const ensureDocument = useStoreWithDocuments(
-   (state) => state.documents.ensureDocument,
- );
- const setMarkdown = useStoreWithDocuments(
-   (state) => state.documents.setMarkdown,
- );
+ const {document, ensureDocument, setMarkdown} = useStoreWithDocuments(
+   (state) => ({
+     document: state.documents.config.artifacts[artifactId],
+     ensureDocument: state.documents.ensureDocument,
+     setMarkdown: state.documents.setMarkdown,
+   }),
+ );

However, note that this creates a new object on each selector call, which will cause re-renders unless you use a shallow equality check. If the individual selectors are more stable, the current pattern may be preferable.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/documents/src/MarkdownDocument.tsx` around lines 8 - 16, The
component currently calls useStoreWithDocuments three times for document,
ensureDocument, and setMarkdown causing extra re-renders; replace these with a
single useStoreWithDocuments selector that returns an object like { document:
state.documents.config.artifacts[artifactId], ensureDocument:
state.documents.ensureDocument, setMarkdown: state.documents.setMarkdown } and
pass a shallow equality comparator (e.g., zustand's shallow) as the second
argument to prevent re-renders from object identity changes; update references
to use the new object fields and keep original symbol names (document,
ensureDocument, setMarkdown) to minimize other changes.

packages/documents/src/MarkdownDocumentEditor.tsx (1)

274-285: 🏗️ Heavy lift

Consider a non-blocking link prompt UI.

Line 278 uses window.prompt(), which blocks the UI thread and can be jarring. For a better user experience, consider implementing a non-blocking dialog or inline input field for link insertion.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/documents/src/MarkdownDocumentEditor.tsx` around lines 274 - 285,
The current command's run handler in MarkdownDocumentEditor.tsx uses
window.prompt (blocking) to get the link URL; replace it with a non-blocking UI
flow: create a small LinkInputDialog/InlineLinkInput component that opens via
state (or returns a Promise) when the run function is invoked, pre-fill it using
editor?.getAttributes('link').href, and then on confirm call
editor?.chain().focus().setLink({href}).run() or
editor?.chain().focus().unsetLink().run() on empty/cancel; update the run
implementation to toggle the dialog state (or await the component's promise)
instead of calling window.prompt so the UI remains responsive.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes