set x-slate-fragment in plateStatic #4431

felixfeng33 · 2025-06-30T10:07:08Z

Checklist

codesandbox · 2025-06-30T10:07:13Z

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

changeset-bot · 2025-06-30T10:07:14Z

🦋 Changeset detected

Latest commit: 13dbdcd

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

This PR includes changesets to release 3 packages

Name	Type
@platejs/core	Patch
platejs	Patch
@platejs/utils	Patch

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 · 2025-06-30T10:07:14Z

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 1, 2025 11:00am

claude · 2025-06-30T10:07:25Z

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

Clean implementation: The code follows existing patterns and is well-structured
Proper data encoding: Uses the same encoding method (btoa(encodeURIComponent())) as other parts of the codebase
Minimal changes: Only adds necessary functionality without breaking existing behavior
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:

Add data-slate-id attributes to elements in BaseElementStatic
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

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)
Add integration test: Test the full copy flow with actual DOM selection
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:

Fix data-slate-id implementation (critical)
Add changeset (required)
Add tests (strongly recommended)
Improve error handling (recommended)

claude · 2025-06-30T10:07:33Z

Claude encountered an error —— View job

I'll analyze this and get back to you.

zbeyens · 2025-06-30T10:15:07Z

/changeset

claude · 2025-06-30T10:15:33Z

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.

Co-authored-by: Ziad Beyens <[email protected]>

zbeyens · 2025-06-30T11:46:06Z

/test

claude · 2025-06-30T11:46:24Z

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:

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
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.
|

- Add tests for setFragmentDataStatic - Add tests for getSelectedDomBlocks - Add tests for getPlainText - Add integration tests for PlateStatic copy functionality - Tests demonstrate that data-slate-id attributes are missing Co-authored-by: Ziad Beyens <[email protected]>

felixfeng33 · 2025-07-01T10:02:36Z

/changeset

felixfeng33 · 2025-07-01T10:31:48Z

/test

claude · 2025-07-01T10:32:05Z

zbeyens · 2025-07-01T10:33:30Z

apps/www/src/registry/ui/editor.tsx

+  variant,
+  ...props
+}: PlateViewProps & VariantProps<typeof editorVariants>) {
+  return <PlateView {...props} />;


Missing variants?

zbeyens · 2025-07-01T10:34:25Z

packages/core/src/lib/static/plugins/CopyPlugin.ts

+}).overrideEditor(({ editor }) => ({
+  transforms: {
+    setFragmentData(fragment) {
+      return setFragmentDataStatic(editor, fragment);


No need to export this, you can move the logic here

zbeyens · 2025-07-01T10:36:06Z

packages/core/src/lib/static/plugins/CopyPlugin.ts

+  }
+};
+
+export const CopyPlugin = createTSlatePlugin({


You can override dom plugin like ReactPlugin:

export const ViewPlugin = DOMPlugin.overrideEditor...

zbeyens · 2025-07-01T10:37:10Z

packages/core/src/lib/static/plugins/getStaticPlugins.ts

+
+export type GetStaticPluginsOptions = {
+  /** Enable copy plugin. */
+  copyPlugin?: boolean;


Options not needed, we'll always enable that plugin

zbeyens · 2025-07-01T10:42:01Z

packages/core/src/react/editor/usePlateViewEditor.ts

+ * @param deps - Additional dependencies for the useMemo hook (default: [])
+ * @see {@link createStaticEditor} for detailed information on static editor creation and configuration.
+ */
+export function usePlateViewEditor<


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

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:

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

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

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.

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.

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

- Add tests for createStaticEditor with copy plugin configuration - Add tests for CopyPlugin fragment data serialization - Add tests for DOM selection utilities (getSelectedDomBlocks, getSelectedDomNode) - Add tests for isSelectOutside editor detection - Add tests for getPlainText DOM text extraction - Add tests for PlateView component copy event handling - Add tests for usePlateViewEditor hook memoization Co-authored-by: Felix Feng <[email protected]>

felixfeng33 added 2 commits June 30, 2025 18:02

fix

0563029

fix

f6bfc8c

dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Jun 30, 2025

dosubot bot added the core label Jun 30, 2025

claude bot and others added 3 commits June 30, 2025 10:17

Add changeset for PlateStatic copy functionality

5c0c75a

Co-authored-by: Ziad Beyens <[email protected]>

fix

2d14273

Update platejs-core-minor.md

f798237

vercel bot deployed to Preview June 30, 2025 10:44 View deployment

Merge branch 'main' into staitc/copy

33b6e8b

dosubot bot added size:XXL This PR changes 1000+ lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Jun 30, 2025

temp

159588f

vercel bot deployed to Preview June 30, 2025 12:28 View deployment

fix

1cd9fb7

dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. and removed size:XXL This PR changes 1000+ lines, ignoring generated files. labels Jul 1, 2025

fix

6c78e99

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. and removed size:XL This PR changes 500-999 lines, ignoring generated files. labels Jul 1, 2025

vercel bot deployed to Preview July 1, 2025 10:17 View deployment

zbeyens reviewed Jul 1, 2025

View reviewed changes

dosubot bot added size:XXL This PR changes 1000+ lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Jul 1, 2025

vercel bot deployed to Preview July 1, 2025 11:00 View deployment

set x-slate-fragment in plateStatic #4431

Are you sure you want to change the base?

set x-slate-fragment in plateStatic #4431

Uh oh!

Conversation

felixfeng33 commented Jun 30, 2025

Uh oh!

codesandbox bot commented Jun 30, 2025

Review or Edit in CodeSandbox

Uh oh!

changeset-bot bot commented Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

claude bot commented Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Review Checklist

Summary

Code Review

✅ Strengths

🔍 Issues Found

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

2. Missing Changeset ⚠️

3. Missing Tests 🚨

4. Potential Runtime Error 🐛

5. Documentation Update Needed 📚

💡 Additional Suggestions

Conclusion

Uh oh!

claude bot commented Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zbeyens commented Jun 30, 2025

Uh oh!

claude bot commented Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Todo List:

Summary

Uh oh!

zbeyens commented Jun 30, 2025

Uh oh!

claude bot commented Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Todo List:

Summary

Key Finding

Uh oh!

felixfeng33 commented Jul 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

felixfeng33 commented Jul 1, 2025

Uh oh!

claude bot commented Jul 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Todo List:

Summary

Known Issues

Uh oh!

zbeyens Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

zbeyens Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

zbeyens Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

zbeyens Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

zbeyens Jul 1, 2025

Choose a reason for hiding this comment

Uh oh!

claude bot Jul 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

changeset-bot bot commented Jun 30, 2025 •

edited

Loading

vercel bot commented Jun 30, 2025 •

edited

Loading

claude bot commented Jun 30, 2025 •

edited

Loading

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

claude bot commented Jun 30, 2025 •

edited

Loading

claude bot commented Jun 30, 2025 •

edited

Loading

claude bot commented Jun 30, 2025 •

edited

Loading

felixfeng33 commented Jul 1, 2025 •

edited

Loading

claude bot commented Jul 1, 2025 •

edited

Loading

claude bot Jul 1, 2025 •

edited

Loading