In an equipment checklist, an author moves a caution block above the packing instructions. A clear line between paragraphs helps the author aim at the intended boundary. The important result is the document order after release: the caution must precede the packing steps, and the original block must not remain in an unintended second location.
Add the visual cue to the working editor
For an existing ProseMirror application with its normal schema, view, and drag behavior configured:
import { dropCursor } from 'prosemirror-dropcursor';
const checklistDropCue = dropCursor({
color: '#12685D',
width: 3,
class: 'checklist-drop-cue'
});
Include checklistDropCue once in the editor state's plugin list. The default cue is black and one pixel wide; the custom values above are an illustrative choice for a light editing surface. Choose a color that remains visible against the actual content and selection styles.
The optional class gives the application a styling hook. The plugin positions its cue from the editor's coordinates. If it appears displaced, inspect the real editing container, scrolling, positioning, and transforms. Adding blank paragraphs to compensate changes the document without fixing the coordinate problem.
Keep the application's existing drag initiation and drop handlers. A block needs the appropriate draggable or selection behavior before an author can move it. The dropcursor plugin's source installs drag-event listeners to manage the cue; it does not implement a document upload service. Current module source
Hide the cue inside a node only when that matches its behavior
A node spec may supply disableDropCursor. For example, an application-owned locked panel could include this field in its existing node definition:
const lockedPanelSpec = {
// Keep this node's real content, attributes and DOM rules.
disableDropCursor: true
};
This is a partial node-spec illustration. Do not replace a complete schema definition with that object. The option controls whether the cue appears inside the node; it does not prohibit drops or edits there. Enforce any locked-content rule through the application's actual editing and authorization design.
The option can also be a function receiving the view, resolved hit information, and drag event. Use it only when the application has a concrete conditional display policy. A hidden cue alongside an accepted drop is confusing, so keep the visual policy consistent with the operation's real result.
Distinguish aiming, selection, and successful insertion
For the checklist fixture, start with a packing paragraph followed by one caution block. Drag the caution toward the boundary above the paragraph and inspect the cue. Release it through the editor's normal move interaction. Read the resulting model order and visible wording rather than treating the line as a success message.
Also cancel one drag and move the pointer out of the editor. The cue should disappear without the checklist changing. If your application accepts external images or files, test their actual ingestion separately. A cue can appear while a later upload or validation step still fails.
The gapcursor guide covers placing a selection beside blocks so an author can begin an edit. Dropcursor addresses a different moment: aiming a drag operation that is already in progress. Neither cue is a saved content node.
Reopen the reordered checklist
Save using the application's existing persistence path and reload the same record. Confirm the caution appears once, above the packing instruction, with its original warning text intact. If that order is correct before saving but wrong after reopening, trace the save and load representations rather than changing the cue's color or width.