Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
tiptap-extension-global-drag-handle
Advanced tools
NPM
$ npm install tiptap-extension-global-drag-handle
Yarn
$ yarn add tiptap-extension-global-drag-handle
import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
new Editor({
extensions: [
GlobalDragHandle,
],
})
In order to enjoy all the advantages of the drag handle, it is recommended to install the AutoJoiner extension as well, which allows you to automatically join various nodes such as 2 lists that are next to each other.
Optionally, you can also configure the drag handle.
import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
new Editor({
extensions: [
GlobalDragHandle.configure({
dragHandleWidth: 20, // default
// The scrollTreshold specifies how close the user must drag an element to the edge of the lower/upper screen for automatic
// scrolling to take place. For example, scrollTreshold = 100 means that scrolling starts automatically when the user drags an
// element to a position that is max. 99px away from the edge of the screen
// You can set this to 0 to prevent auto scrolling caused by this extension
scrollTreshold: 100, // default
// The css selector to query for the drag handle. (eg: '.custom-handle').
// If handle element is found, that element will be used as drag handle.
// If not, a default handle will be created
dragHandleSelector: ".custom-drag-handle", // default is undefined
// Tags to be excluded for drag handle
// If you want to hide the global drag handle for specific HTML tags, you can use this option.
// For example, setting this option to ['p', 'hr'] will hide the global drag handle for <p> and <hr> tags.
excludedTags: [], // default
}),
],
})
By default the drag handle is headless, which means it doesn't contain any css. If you want to apply styling to the drag handle, use the class "drag-handle" in your css file. Take a look at this example, to see how you can apply styling.
FAQs
drag handle extension for tiptap
The npm package tiptap-extension-global-drag-handle receives a total of 6,398 weekly downloads. As such, tiptap-extension-global-drag-handle popularity was classified as popular.
We found that tiptap-extension-global-drag-handle demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.