Fix DocCell label truncation and stabilize TipTap build typings#525
Fix DocCell label truncation and stabilize TipTap build typings#525
Conversation
… words Co-authored-by: ksalamy <12836105+ksalamy@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Removes the JavaScript word-count truncation in DocCell so document titles render in full (with overflow handled via Tailwind’s truncate styling), making similarly-prefixed document names distinguishable in the documents list.
Changes:
- Deleted the custom “first 3–4 words” truncation logic in
DocCell. - Rendered the full
labelprop directly in the primary button.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| <button | ||
| className="w-full truncate text-left font-light text-primary-600" | ||
| onClick={swallow(onSelect)} | ||
| > | ||
| {truncatedLabel} | ||
| {label} | ||
| </button> |
Add a DocCell test case with a long multi-word label to ensure full label text renders and guard against regressions back to JS truncation behavior.
There was a problem hiding this comment.
Pull request overview
This PR fixes document list titles being indistinguishable by removing DocCell’s JavaScript word-count truncation and relying on existing CSS (truncate) to handle overflow while preserving the full label in the DOM/accessibility tree.
Changes:
- Remove the 3-word (special-cased) truncation logic from
DocCelland renderlabeldirectly. - Add a regression test ensuring long multi-word labels render fully (not JS-truncated).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/react-ui/src/Cells/DocCell.tsx | Stops truncating labels in JS and renders the full label prop. |
| packages/react-ui/src/Cells/DocCell.test.tsx | Adds coverage for long multi-word labels to prevent regression. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
ksalamy
left a comment
ksalamy
left a comment
There was a problem hiding this comment.
This should be ready for development testing.
| <button | ||
| className="w-full truncate text-left font-light text-primary-600" | ||
| onClick={swallow(onSelect)} | ||
| > | ||
| {truncatedLabel} | ||
| {label} | ||
| </button> |
Refresh yarn.lock so @tiptap packages declared by lrauv-dash2 are resolved in clean CI installs and Next.js type-check can find @tiptap/react.
Pin TipTap packages to 3.13.0 and add minimal type-compatibility shims so lrauv-dash2 builds consistently in clean CI installs.
There was a problem hiding this comment.
Pull request overview
Removes DocCell’s JavaScript word-based truncation so document titles remain distinguishable in the documents list, relying on CSS truncation instead. The PR also introduces a set of TipTap dependency/version and TypeScript-typing related changes in apps/lrauv-dash2.
Changes:
- Render full
labeltext inDocCell(remove 3-word truncation logic). - Add a regression test ensuring long multi-word labels render in full.
- Add/adjust TipTap dependency pins and introduce TypeScript shims/typing relaxations for the TipTap editor code in
apps/lrauv-dash2.
Reviewed changes
Copilot reviewed 11 out of 14 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
packages/react-ui/src/Cells/DocCell.tsx |
Removes JS truncation and renders label directly. |
packages/react-ui/src/Cells/DocCell.test.tsx |
Adds test asserting long label is rendered fully. |
package.json |
Adds extensive TipTap version pins under resolutions. |
yarn.lock |
Large lockfile update bringing in TipTap/ProseMirror-related packages. |
apps/lrauv-dash2/package.json |
Pins TipTap deps to exact versions; adds missing TipTap extensions. |
apps/lrauv-dash2/tiptap-react.d.ts |
Adds ambient module stub for @tiptap/react using any. |
apps/lrauv-dash2/tiptap-extensions.d.ts |
Adds ambient module stubs for many TipTap packages using any. |
apps/lrauv-dash2/components/docs/extensions/*.ts |
Adds // @ts-nocheck to multiple custom TipTap node modules. |
apps/lrauv-dash2/components/docs/DocFormEditor.tsx |
Adjusts callback/handler typings (minimal inline types + any). |
apps/lrauv-dash2/components/docs/DocEditorToolbar.tsx |
Adds explicit any type for storedMarks iteration. |
apps/lrauv-dash2/components/docs/DocEditorTipTap.tsx |
Adjusts onUpdate typing for the editor callback. |
Comments suppressed due to low confidence (1)
apps/lrauv-dash2/components/docs/DocFormEditor.tsx:328
- These editor event handlers introduce
anyforview/eventparameters, which removes type checking in logic that gates keyboard/paste behavior. Prefer using the ProseMirror types (e.g.,EditorViewandClipboardEvent/KeyboardEvent) available via@tiptap/pmto keep this logic type-safe.
handleTextInput: (view: any, from: any, to: any, text: any) => {
const target = (view.dom.ownerDocument?.activeElement ??
null) as HTMLElement | null
if (
target &&
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| "@tiptap/extension-paragraph": "3.13.0", | ||
| "@tiptap/extension-strike": "3.13.0", | ||
| "@tiptap/extension-text": "3.13.0", | ||
| "@tiptap/extension-underline": "3.13.0" |
| // @ts-nocheck | ||
| import { Node, mergeAttributes } from '@tiptap/core' |
| // @ts-nocheck | ||
| import { Node, mergeAttributes } from '@tiptap/core' |
| // @ts-nocheck | ||
| import { Node, mergeAttributes } from '@tiptap/core' |
| // @ts-nocheck | ||
| import { Node, mergeAttributes } from '@tiptap/core' |
| onUpdate: ({ editor }: { editor: { getHTML: () => string } }) => { | ||
| const current = editor.getHTML() | ||
| const diffed = computeDiffHtml(current) | ||
| onChange?.(diffed) | ||
| }, |
Remove temporary ambient shims and ts-nocheck usage by applying explicit TipTap/ProseMirror types in docs editor code while keeping the build fix intact.
There was a problem hiding this comment.
Pull request overview
This PR addresses document-list ambiguity by ensuring DocCell displays the full document title (relying on CSS truncation for overflow), and also includes a set of TipTap dependency/type updates in apps/lrauv-dash2.
Changes:
- Remove JS word-based label truncation in
DocCelland render the fulllabel. - Add a regression test to ensure long multi-word labels render as the button accessible name.
- Update TipTap dependencies/types in
apps/lrauv-dash2(package.json + editor/extension typings) and refreshyarn.lockaccordingly.
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Adds/updates locked dependencies (notably TipTap/prosemirror-related transitive deps). |
| packages/react-ui/src/Cells/DocCell.tsx | Removes JS truncation and renders label directly. |
| packages/react-ui/src/Cells/DocCell.test.tsx | Adds a test asserting the full long label is present as the button name. |
| apps/lrauv-dash2/package.json | Pins TipTap packages to 3.13.0 and adds explicit heading/paragraph deps. |
| apps/lrauv-dash2/components/docs/extensions/TextFieldNode.ts | Adds explicit TipTap/PM typings for node view + commands. |
| apps/lrauv-dash2/components/docs/extensions/TextAreaNode.ts | Adds explicit TipTap/PM typings for node view + commands. |
| apps/lrauv-dash2/components/docs/extensions/RadioNode.ts | Adds explicit TipTap/PM typings for node view + commands/attrs. |
| apps/lrauv-dash2/components/docs/extensions/CheckboxNode.ts | Adds explicit TipTap/PM typings for node view + commands/attrs. |
| apps/lrauv-dash2/components/docs/DocFormEditor.tsx | Adds explicit TipTap/PM typings for editor callbacks/props. |
| apps/lrauv-dash2/components/docs/DocEditorToolbar.tsx | Adds explicit Mark type for stored-marks check. |
| apps/lrauv-dash2/components/docs/DocEditorTipTap.tsx | Adds explicit Editor typing for onUpdate callback. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| "@tiptap/core": "3.13.0", | ||
| "@tiptap/extension-color": "3.13.0", | ||
| "@tiptap/extension-highlight": "3.13.0", | ||
| "@tiptap/extension-heading": "3.13.0", | ||
| "@tiptap/extension-horizontal-rule": "3.13.0", | ||
| "@tiptap/extension-link": "3.13.0", | ||
| "@tiptap/extension-paragraph": "3.13.0", | ||
| "@tiptap/extension-subscript": "3.13.0", | ||
| "@tiptap/extension-superscript": "3.13.0", |
ksalamy
changed the title
There was a problem hiding this comment.
Pull request overview
Fixes document list ambiguity by removing DocCell’s word-based label truncation, and stabilizes the @mbari/lrauv-dash2 docs editor build by pinning TipTap dependencies and tightening TypeScript typings around TipTap/ProseMirror integration.
Changes:
- Remove JS word-count truncation in
DocCelland rely on rendering the fulllabel(with CSS truncation only). - Add a regression test ensuring long multi-word labels remain part of the button’s accessible name.
- Pin TipTap packages to
3.13.0in@mbari/lrauv-dash2and replace priorany/loose typings with explicit TipTap/ProseMirror types in editor code and custom nodes.
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Updates lockfile entries to reflect pinned TipTap ecosystem and related transitive deps. |
| packages/react-ui/src/Cells/DocCell.tsx | Removes JS truncation and renders the full document label. |
| packages/react-ui/src/Cells/DocCell.test.tsx | Adds regression coverage for long labels via accessible button name. |
| apps/lrauv-dash2/package.json | Pins TipTap dependencies to exact 3.13.0 and adds explicit editor extension deps. |
| apps/lrauv-dash2/components/docs/extensions/TextFieldNode.ts | Replaces loose typings with explicit TipTap/ProseMirror types for node views/commands. |
| apps/lrauv-dash2/components/docs/extensions/TextAreaNode.ts | Same typing cleanup for textarea node implementation. |
| apps/lrauv-dash2/components/docs/extensions/RadioNode.ts | Same typing cleanup for radio node implementation. |
| apps/lrauv-dash2/components/docs/extensions/CheckboxNode.ts | Same typing cleanup for checkbox node implementation. |
| apps/lrauv-dash2/components/docs/DocFormEditor.tsx | Adds explicit editor/view/slice types for TipTap update + ProseMirror handlers. |
| apps/lrauv-dash2/components/docs/DocEditorToolbar.tsx | Types stored mark inspection using ProseMirror Mark. |
| apps/lrauv-dash2/components/docs/DocEditorTipTap.tsx | Types TipTap onUpdate callback parameter explicitly. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
|
This PR contains two intentionally related parts:
yarn workspace @mbari/lrauv-dash2 build ✅ Focus for review: packages/react-ui/src/Cells/DocCell.tsx + test change |
There was a problem hiding this comment.
Pull request overview
This PR fixes document list ambiguity by removing word-based truncation in DocCell, adds a regression test to ensure full accessible button names for long labels, and stabilizes TipTap/ProseMirror builds in @mbari/lrauv-dash2 by pinning TipTap versions and tightening editor-related typings.
Changes:
- Render full
DocCelllabels (no JS word truncation) and add a long-label regression test. - Pin TipTap dependencies to
3.13.0(plus explicit heading/paragraph deps) to prevent CI-only module/type resolution failures. - Replace loose
any/untyped editor callback parameters with explicit TipTap/ProseMirror types in docs editor components and custom node extensions.
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Updates lockfile entries consistent with pinning/adding TipTap + ProseMirror-related dependencies. |
| packages/react-ui/src/Cells/DocCell.tsx | Removes word-count truncation and renders full label text. |
| packages/react-ui/src/Cells/DocCell.test.tsx | Adds a regression test asserting the full long label is the button’s accessible name. |
| apps/lrauv-dash2/package.json | Pins TipTap deps to exact 3.13.0 and adds explicit heading/paragraph dependencies. |
| apps/lrauv-dash2/components/docs/extensions/TextFieldNode.ts | Adds explicit TipTap/PM types for command/nodeview/update callbacks and HTML parsing helpers. |
| apps/lrauv-dash2/components/docs/extensions/TextAreaNode.ts | Adds explicit TipTap/PM types for command/nodeview/update callbacks and HTML parsing helpers. |
| apps/lrauv-dash2/components/docs/extensions/RadioNode.ts | Adds explicit TipTap/PM types for command/nodeview/update callbacks and attribute parsing. |
| apps/lrauv-dash2/components/docs/extensions/CheckboxNode.ts | Adds explicit TipTap/PM types for command/nodeview/update callbacks and attribute parsing. |
| apps/lrauv-dash2/components/docs/DocFormEditor.tsx | Types onUpdate and ProseMirror editorProps handlers with TipTap/PM types. |
| apps/lrauv-dash2/components/docs/DocEditorToolbar.tsx | Types storedMarks items as ProseMirror Mark. |
| apps/lrauv-dash2/components/docs/DocEditorTipTap.tsx | Types onUpdate callback editor parameter with TipTap Editor. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ument-titles-for-missions # Conflicts: # yarn.lock
|
Hey @zachmau — ready for your review! What this PR does:
Review order heads-up: There's a second PR (#528) that also touches Copilot reviewed both and had no blocking comments. Thanks! |
|
Hi Zach — this one has two parts that got linked during validation:
One heads-up on review order: Happy to answer any questions! |
…branches Resolved conflict in DocCell.test.tsx by preserving: - Our tests: secondary label, empty secondary, title attribute - develop's test: long multi-word label regression (from PR #525)
…n-feature conflicts All conflicts were between develop's authoritative post-merge versions (PRs #525, #526, #529, #531, #534, #535) and PR #530's older sync copies of the same files. The actual #530 feature (ScheduleEventDetailsModal, ScheduleSection) had no conflicts. Took --theirs for all 10 conflicted files.
DocCellwas JS-truncating labels to the first 3 words (4 if the 3rd was'-'), making documents with shared prefixes indistinguishable in the list.This PR now includes two related parts:
1) DocCell label fix (original scope)
packages/react-ui/src/Cells/DocCell.tsx: remove word-count JS truncation and render fulllabel.packages/react-ui/src/Cells/DocCell.test.tsx: add regression coverage for long multi-word labels so we keep full accessible button names.2) TipTap build stability + typing cleanup (required follow-up)
While validating this PR in clean CI installs,
@mbari/lrauv-dash2failed with:Cannot find module '@tiptap/react' or its corresponding type declarationsTo make builds deterministic and keep type safety:
apps/lrauv-dash2/package.json: pin TipTap deps to3.13.0and add explicit@tiptap/extension-heading/@tiptap/extension-paragraphdependencies used by docs editors.yarn.lock: refresh lock entries accordingly.DocEditorTipTap.tsx,DocEditorToolbar.tsx,DocFormEditor.tsxextensions/CheckboxNode.ts,RadioNode.ts,TextFieldNode.ts,TextAreaNode.tsany/@ts-nocheckapproaches with explicit TipTap/ProseMirror types.Validation
yarn workspace @mbari/lrauv-dash2 build✅yarn build(monorepo) ✅Fixes #514