https://github.com/NiclasDev63/tiptap-extension-global-drag-handle

https://github.com/NiclasDev63/tiptap-extension-global-drag-handle

Last synced: about 16 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/NiclasDev63/tiptap-extension-global-drag-handle
• Owner: NiclasDev63
• License: mit
• Created: 2024-03-26T15:46:42.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2024-10-29T20:13:22.000Z (3 months ago)
• Last Synced: 2024-10-29T22:44:53.979Z (3 months ago)
• Language: TypeScript
• Size: 33.2 KB
• Stars: 64
• Watchers: 2
• Forks: 11
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-tiptap - tiptap-extension-global-drag-handle
• awesome-tiptap - tiptap-extension-global-drag-handle

README

        
# Tiptap Extension: GlobalDragHandle



## Install

NPM

```

$ npm install tiptap-extension-global-drag-handle

```

Yarn

```

$ yarn add tiptap-extension-global-drag-handle

```

## Usage

```js

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](https://github.com/NiclasDev63/tiptap-extension-auto-joiner) extension as well, which allows you to automatically join various nodes such as 2 lists that are next to each other.

## Configuration

Optionally, you can also configure the drag handle.

```js

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

        excludedTags: [], // default


        // Custom nodes to be included for drag handle

        // For example having a custom Alert component. Add data-type="alert" to the node component wrapper.

        // Then add it to this list as ['alert']

        //

        customNodes: [],

    }),

  ],

})

```

## Styling

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](https://github.com/steven-tey/novel/blob/main/apps/web/styles/prosemirror.css#L131) example, to see how you can apply styling.