set x-slate-fragment in PlateView

[felixfeng33]

Checklist

• yarn typecheck
• yarn lint:fix
• yarn test
• yarn brl
• yarn changeset
• ui changelog

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[changeset-bot]

🦋 Changeset detected

Latest commit: 1863d89

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 43 packages

Name	Type
@platejs/core	Major
platejs	Major
@platejs/utils	Major
@platejs/autoformat	Major
@platejs/basic-nodes	Major
@platejs/basic-styles	Major
@platejs/callout	Major
@platejs/caption	Major
@platejs/code-block	Major
@platejs/combobox	Major
@platejs/comment	Major
@platejs/csv	Major
@platejs/cursor	Major
@platejs/date	Major
@platejs/diff	Major
@platejs/dnd	Major
@platejs/docx	Major
@platejs/emoji	Major
@platejs/excalidraw	Major
@platejs/find-replace	Major
@platejs/floating	Major
@platejs/indent	Major
@platejs/juice	Major
@platejs/layout	Major
@platejs/link	Major
@platejs/list-classic	Major
@platejs/list	Major
@platejs/markdown	Major
@platejs/math	Major
@platejs/media	Major
@platejs/mention	Major
@platejs/playwright	Major
@platejs/resizable	Major
@platejs/selection	Major
@platejs/slash-command	Major
@platejs/suggestion	Major
@platejs/tabbable	Major
@platejs/table	Major
@platejs/tag	Major
@platejs/toc	Major
@platejs/toggle	Major
@platejs/yjs	Major
@platejs/ai	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
plate	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 2, 2025 10:14am

[claude]

Claude finished @felixfeng33's task —— View job

---

Code Review for "set x-slate-fragment in plateStatic"

Review Checklist

• Read and analyze all changed files
• Review code quality and adherence to project standards
• Check error handling implementation
• Verify test coverage for new functionality
• Assess if changeset is required
• Check documentation requirements
• Provide comprehensive feedback

---

Summary

This PR adds copy functionality to PlateStatic by setting the x-slate-fragment data format when content is copied. This enables proper Slate-compatible copy operations in the static renderer, aligning its behavior with the interactive editor.

Code Review

✅ Strengths

1. Clean implementation: The code follows existing patterns and is well-structured
2. Proper data encoding: Uses the same encoding method (btoa(encodeURIComponent())) as other parts of the codebase
3. Minimal changes: Only adds necessary functionality without breaking existing behavior
4. Browser safety: Includes proper typeof window === 'undefined' check for SSR compatibility

🔍 Issues Found

1. Critical: Missing data-slate-id Implementation 🚨

The copy functionality relies on elements having data-slate-id attributes, but these attributes are never set in PlateStatic:

// In getSelectedDomBlocks.ts
const domBlocks = fragment.querySelectorAll(
  '[data-slate-node="element"][data-slate-id]'
);

This means the copy functionality will not work as the query selector will find no elements. You need to:

1. Add data-slate-id attributes to elements in BaseElementStatic
2. Ensure elements have an id property to use

Example fix in PlateStatic.tsx:

// In BaseElementStatic
const attributes: SlateRenderElementProps['attributes'] = {
  'data-slate-node': 'element',
  'data-slate-id': element.id, // Add this line
  ref: null,
};

2. Missing Changeset ⚠️

The changeset bot correctly identified that this PR needs a changeset. This is a new feature for the @platejs/core package:

# Run this command or use the link provided by the bot:
yarn changeset

Suggested changeset:

"@platejs/core": minor
---

feat: Add x-slate-fragment support to PlateStatic for copy operations

3. Missing Tests 🚨

The new copy functionality lacks test coverage. Consider adding tests to verify:

• Elements have data-slate-id attributes
• Copy event sets the correct clipboard data
• Fragment encoding works correctly

4. Potential Runtime Error 🐛

In setFragmentDataStatic.ts line 24-26:

const blockId = node.dataset.slateId;
const block = editor.api.node({ id: blockId, at: [] })!;
fragment.push(block[0]);

Issues:

• Non-null assertion could cause runtime errors
• If blockId is undefined (which it currently will be), this will fail

Consider safer implementation:

const blockId = node.dataset.slateId;
if (!blockId) continue;

const block = editor.api.node({ id: blockId, at: [] });
if (block) {
  fragment.push(block[0]);
}

5. Documentation Update Needed 📚

The static rendering guide should mention the new copy functionality.

💡 Additional Suggestions

1. Consider element path fallback: If elements don't have IDs, you might need a different approach to identify them (e.g., using data attributes with paths)
2. Add integration test: Test the full copy flow with actual DOM selection
3. File extension: getPlainText.tsx should be .ts (no JSX content)

Conclusion

While the implementation is clean, this feature currently won't work because data-slate-id attributes are never set on elements. This must be fixed before merging.

Required actions:

1. Fix data-slate-id implementation (critical)
2. Add changeset (required)
3. Add tests (strongly recommended)
4. Improve error handling (recommended)

[claude]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[zbeyens]

/changeset

[claude]

Claude finished @zbeyens's task —— View job

---

Todo List:

• Read PR changes to understand the feature
• Create changeset file for @platejs/core
• Write proper changeset description
• Commit the changeset file

Summary

Created a changeset file for the new copy functionality in PlateStatic:

• File: .changeset/platejs-core-minor.md
• Change type: minor (new feature)
• Package: @platejs/core

The changeset documents the addition of copy functionality to the PlateStatic component, which enables proper serialization of selected content with the x-slate-fragment data format for seamless paste operations.

[zbeyens]

/test

[claude]

Claude finished @zbeyens's task —— View job

---

Todo List:

• Read testing guidelines from .cursor/rules/testing.mdc
• Analyze PR changes to understand what needs testing
• Create test file for setFragmentDataStatic
• Create test file for getSelectedDomBlocks
• Create test file for getPlainText
• Add integration test for PlateStatic copy functionality
• Run build and tests for affected packages
• Commit test files to the PR branch

Summary

Successfully created comprehensive test coverage for the new copy functionality in PlateStatic. The tests include:

1. Unit tests for each new utility function:

   • setFragmentDataStatic.spec.ts - Tests fragment data encoding and clipboard operations
   • getSelectedDomBlocks.spec.ts - Tests DOM selection and element querying
   • getPlainText.spec.ts - Tests text extraction from DOM nodes

2. Integration tests in PlateStatic.copy.spec.tsx that demonstrate:

   • How the copy functionality should work when elements have data-slate-id attributes
   • The current bug: Elements in PlateStatic don't have data-slate-id attributes, causing copy to fail
   • Edge cases like empty selection and inline elements

Key Finding

The tests confirm the issue identified in the previous review: data-slate-id attributes are never set on elements in PlateStatic, which prevents the copy functionality from working. This needs to be fixed by adding data-slate-id to the attributes in BaseElementStatic.
|

[felixfeng33]

/changeset

[felixfeng33]

/test

[claude]

Claude finished @felixfeng33's task —— View job

---

Todo List:

• Read testing guidelines from .cursor/rules/testing.mdc
• Analyze PR changes to understand what needs testing
• Create tests for createStaticEditor
• Create tests for CopyPlugin
• Create tests for new utility functions (getSelectedDomBlocks, getPlainText, etc.)
• Create tests for PlateView component
• Create tests for usePlateViewEditor hook
• Build affected packages using turbo
• Run tests to ensure they pass
• Fix failing tests
• Commit test files to the PR branch

Summary

Successfully created comprehensive test coverage for the new PlateStatic copy functionality. The tests include:

1. Unit tests for each new utility function:

   • createStaticEditor.spec.tsx - Tests editor creation with copy plugin configuration
   • CopyPlugin.spec.ts - Tests fragment data encoding and clipboard operations
   • getSelectedDomBlocks.spec.ts - Tests DOM selection and element querying
   • getSelectedDomNode.spec.ts - Tests DOM node extraction from selection
   • isSelectOutside.spec.ts - Tests editor boundary detection
   • getPlainText.spec.ts - Tests text extraction from DOM nodes

2. Component tests:

   • PlateView.spec.tsx - Tests the copy event handling in the view component
   • usePlateViewEditor.spec.tsx - Tests the hook for creating memoized static editors

Known Issues

Some existing tests in the project are failing due to missing dependencies (@platejs/callout, @platejs/resizable), but the new tests for the copy functionality are working correctly. The test suite covers all the new code paths and edge cases.

[zbeyens]

@claude do you prefer usePlateViewEditor or useViewEditor? to match createStaticEditor, createViewEditor, usePlateEditor, createSlateEditor, createPlateEditor

[claude]

Claude finished @zbeyens's task —— View job

---

Todo List:

• Analyze the naming patterns in the codebase
• Provide recommendation for hook naming

Naming Recommendation

I prefer usePlateViewEditor for the following reasons:

1. Consistency with existing patterns: The codebase already has usePlateEditor as the primary hook for creating React editors. Using usePlateViewEditor maintains this naming convention.

2. Clear namespace distinction: The "Plate" prefix distinguishes these React-enhanced hooks from base Slate functionality. This is important because:

   • usePlateEditor creates a Plate editor (React-enhanced)
   • usePlateViewEditor creates a Plate view editor (React-enhanced, static)
   • Without the prefix, useViewEditor could be confused with a base Slate hook

3. Parallel structure: The existing create functions follow this pattern:

   • createPlateEditor → usePlateEditor
   • createStaticEditor → usePlateViewEditor

   Note: There's no createViewEditor in the codebase - the static editor is created with createStaticEditor.

4. Semantic clarity: The name clearly indicates this is a Plate-specific hook for view/static editors, not a generic editor hook.

The pattern useEditor* (without "Plate") is reserved for hooks that interact with existing editors (like useEditorSelector, useEditorPlugin), not for creating new editor instances.

---

[zbeyens]

@dosu do you prefer usePlateViewEditor or useViewEditor? to match createStaticEditor, createViewEditor, usePlateEditor, createSlateEditor, createPlateEditor

[felixfeng33]

/changeset

[claude]

Claude finished @felixfeng33's task —— View job

---

Todo List:

• Read existing changeset file to check completeness
• Analyze registry changes in editor.tsx
• Update changeset from patch to minor
• Update docs/components/changelog.mdx for registry changes
• Review and improve changeset description based on all changes
• Commit updates

Summary

Successfully updated the changeset and changelog for this PR:

1. Changeset Update: Changed from patch to minor since this PR adds new features
2. Comprehensive Description: Enhanced the changeset to document all new components, utilities, and static editor enhancements
3. Changelog Entry: Added a new entry for July 2, 2025 documenting the EditorView component addition to the registry

The changes properly document the new copy functionality for PlateStatic and all related components that enable static rendering with copy support.

[felixfeng33]

@claude

Registry Changes: Changelog Updates

When changes are made to apps/www/src/registry/ components, you MUST also update docs/components/changelog.mdx to document component changes, additions, or removals.

Changelog Standards:

• Update docs/components/changelog.mdx following the existing format and style
• Document component changes, additions, or removals
• Include any breaking changes or migration notes for registry components
• Use consistent version numbering
• Follow the existing changelog structure and writing style

[claude]

Claude finished @felixfeng33's task —— View job

---

Todo List:

• Read registry changes in apps/www/src/registry/ui/editor.tsx
• Read current changelog entry in docs/components/changelog.mdx
• Verify changelog properly documents the registry changes
• Update changelog if needed to follow project standards

Summary

The changelog has already been properly updated! I verified that:

1. Registry Change: The editor.tsx file was updated to add a new EditorView component (lines 116-129) that uses PlateView from @platejs/core/react

2. Changelog Entry: The docs/components/changelog.mdx already contains the correct entry:

   ### July 2 #24.1
   - `editor`: Added `EditorView` component using the new `PlateView` from `@platejs/core/react` for static editor rendering with copy functionality
   

The changelog entry follows the project's format and properly documents the registry component addition. No further updates are needed.