pax_global_header00006660000000000000000000000064152551577020014523gustar00rootroot0000000000000052 comment=65de91a7d8525a7ee2800575996ff7d0bc97b4d6 prosemirror-dropcursor/000077500000000000000000000000001525515770200156525ustar00rootroot00000000000000prosemirror-dropcursor/.gitignore000066400000000000000000000000371525515770200176420ustar00rootroot00000000000000/node_modules .tern-port /dist prosemirror-dropcursor/.npmignore000066400000000000000000000000371525515770200176510ustar00rootroot00000000000000/node_modules .tern-port /test prosemirror-dropcursor/.npmrc000066400000000000000000000000231525515770200167650ustar00rootroot00000000000000package-lock=false prosemirror-dropcursor/CHANGELOG.md000066400000000000000000000064511525515770200174710ustar00rootroot00000000000000## 1.8.4 (2026-09-24) ### Bug fixes Make removing the plugin clear the active drop cursor, if present. ## 1.8.3 (2026-07-06) ### Bug fixes Properly update the drop cursor for incoming changes during a drag. ## 1.8.2 (2025-04-22) ### Bug fixes Make sure the drop cursor is positioned in the right place when the editor is scaled with a CSS transform. Fix the width of the cursor when in a transformed element. Fix incorrect check in dragleave handler Fix an issue where the dropcursor would hide when drag moved over the top editor element. ## 1.8.1 (2023-05-17) ### Bug fixes Include CommonJS type declarations in the package to please new TypeScript resolution settings. ## 1.8.0 (2023-03-27) ### New features If the `color` option is set to `false`, the library will not assign an explicit color to the cursor. ## 1.7.1 (2023-03-02) ### Bug fixes Don't hide the drop cursor when no valid drop point can be found below the pointer. ## 1.7.0 (2023-02-07) ### New features The drop cursor element now has a `prosemirror-blockcursor-block`/`inline` CSS class depending on whether it is in a block or inline position. ## 1.6.1 (2022-10-25) ### Bug fixes Fix a crash when there's no DOM for the node next to the drag position. ## 1.6.0 (2022-08-07) ### New features `disableDropCursor` is now passed the dragover event as 3rd argument. ## 1.5.0 (2022-05-30) ### New features Include TypeScript type declarations. ## 1.4.0 (2021-11-11) ### New features Add support for a `disableDropCursor` property on node specs, which can be used to turn off the drop cursor inside such nodes. ## 1.3.5 (2021-05-25) ### Bug fixes Avoid a crash that happened when the document shrank during dragging. ## 1.3.4 (2021-04-01) ### Bug fixes Hide the drop cursor when `dropPoint` doesn't return a position. ## 1.3.3 (2021-02-04) ### Bug fixes Fix drop cursor positioning when the editor's `offsetParent` has been scrolled. ## 1.3.2 (2019-11-20) ### Bug fixes Rename ES module files to use a .js extension, since Webpack gets confused by .mjs ## 1.3.1 (2019-11-19) ### Bug fixes The file referred to in the package's `module` field now is compiled down to ES5. ## 1.3.0 (2019-11-08) ### New features Add a `module` field to package json file. ## 1.2.0 (2019-10-08) ### New features `dropCursor` now takes a new option, `class`, to set the CSS class name of the cursor element. Add class option to in-code docs ## 1.1.2 (2019-09-05) ### Bug fixes Fix crash on IE11 due to using a method that platform doesn't support. Don't show a drop cursor when the view isn't editable The drop cursor will no longer show up when the view isn't editable. ## 1.1.1 (2018-10-23) ### Bug fixes Fix crash when destroying the plugin, due to a misspelled method name. ## 1.1.0 (2018-10-22) ### Bug fixes Fixes an issue where drop cursors changed line breaking, causing the content to jump around during dragging. ### New features Between-blocks drop cursors are now shown as a horizontal line. ## 1.0.1 (2018-06-20) ### Bug fixes Dragging from a content node directly to the outside of the editor will now properly hide the drop cursor. Make removal of drop cursor part of the drop transaction when possible. Use `dropPoint` from prosemirror-transform, rather than a local parallel implementation. ## 1.0.0 (2017-10-13) First stable release. prosemirror-dropcursor/CONTRIBUTING.md000066400000000000000000000073301525515770200201060ustar00rootroot00000000000000# How to contribute - [Getting help](#getting-help) - [Submitting bug reports](#submitting-bug-reports) - [Contributing code](#contributing-code) ## Getting help Community discussion, questions, and informal bug reporting is done on the [discuss.ProseMirror forum](http://discuss.prosemirror.net). ## Submitting bug reports Report bugs on the [issue tracker](https://code.haverbeke.berlin/prosemirror/prosemirror/issues). Before reporting a bug, please read these pointers. - The issue tracker is for *bugs*, not requests for help. Questions should be asked on the [forum](http://discuss.prosemirror.net). - Include information about the version of the code that exhibits the problem. For browser-related issues, include the browser and browser version on which the problem occurred. - Mention very precisely what went wrong. "X is broken" is not a good bug report. What did you expect to happen? What happened instead? Describe the exact steps a maintainer has to take to make the problem occur. A screencast can be useful, but is no substitute for a textual description. - A great way to make it easy to reproduce your problem, if it can not be trivially reproduced on the website demos, is to submit a script that triggers the issue. ## Contributing code Code generated by a language model is not welcome in this project. Please don't waste my time with it. If you want to make a change that involves a significant overhaul of the code or introduces a user-visible new feature, create an [issue](https://code.haverbeke.berlin/prosemirror/prosemirror/issues/) first with your proposal. - Make sure you have a [Codeberg](https://codeberg.org/user/sign_up) or [GitHub](https://github.com/signup/free) account. - Use that to create a [code.haverbeke.berlin account](https://code.haverbeke.berlin/user/login). - Fork the relevant repository. - Create a local checkout of the code. You can use the [main repository](https://code.haverbeke.berlin/prosemirror/prosemirror) to easily check out all core modules. - Make your changes, and commit them - If your changes are easy to test or likely to regress, add tests in the relevant `test/` directory. Either put them in an existing `test-*.js` file, if they fit there, or add a new file. - Make sure all tests pass. Run `npm run test` to verify tests pass (you will need Node.js v6+). - Submit a pull request. Don't put more than one feature/fix in a single pull request. By contributing code to ProseMirror you - Agree to license the contributed code under the project's [MIT license](https://code.haverbeke.berlin/prosemirror/prosemirror/blob/main/LICENSE). - Confirm that you have the right to contribute and license the code in question. (Either you hold all rights on the code, or the rights holder has explicitly granted the right to use it like this, through a compatible open source license or through a direct agreement with you.) ### Coding standards - ES6 syntax, targeting an ES5 runtime (i.e. don't use library elements added by ES6, don't use ES7/ES.next syntax). - 2 spaces per indentation level, no tabs. - No semicolons except when necessary. - Follow the surrounding code when it comes to spacing, brace placement, etc. - Brace-less single-statement bodies are encouraged whenever they don't impact readability. - [getdocs-ts](https://code.haverbeke.berlin/marijn/getdocs-ts)-style doc comments above items that are part of the public API. - When documenting non-public items, you can put the type after a single colon, so that getdocs doesn't pick it up and add it to the API reference. - ProseMirror does *not* follow JSHint or JSLint prescribed style. Patches that try to 'fix' code to pass one of these linters will not be accepted. prosemirror-dropcursor/LICENSE000066400000000000000000000021211525515770200166530ustar00rootroot00000000000000Copyright (C) 2015-2017 by Marijn Haverbeke and others Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. prosemirror-dropcursor/README.md000066400000000000000000000041341525515770200171330ustar00rootroot00000000000000# prosemirror-dropcursor [ [**WEBSITE**](https://prosemirror.net) | [**ISSUES**](https://code.haverbeke.berlin/prosemirror/prosemirror-dropcursor/issues) | [**FORUM**](https://discuss.prosemirror.net) | [**CHANGELOG**](https://code.haverbeke.berlin/prosemirror/prosemirror-dropcursor/src/branch/main/CHANGELOG.md) ] This is a non-core example module for [ProseMirror](https://prosemirror.net). ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas. This module implements a plugin that shows a drop cursor for ProseMirror. The [project page](https://prosemirror.net) has more information, a number of [examples](https://prosemirror.net/examples/) and the [documentation](https://prosemirror.net/docs/). This code is released under an [MIT license](https://code.haverbeke.berlin/prosemirror/prosemirror/src/branch/main/LICENSE). There's a [forum](http://discuss.prosemirror.net) for general discussion and support requests, and the [bug tracker](https://code.haverbeke.berlin/prosemirror/prosemirror/issues) is the place to report issues. We aim to be an inclusive, welcoming community. To make that explicit, we have a [code of conduct](http://contributor-covenant.org/version/1/1/0/) that applies to communication around the project. ## Documentation * **`dropCursor`**`(options?: interface = {}) → Plugin`\ Create a plugin that, when added to a ProseMirror instance, causes a decoration to show up at the drop position when something is dragged over the editor. Nodes may add a `disableDropCursor` property to their spec to control the showing of a drop cursor inside them. This may be a boolean or a function, which will be called with a view, a position, and the DragEvent, and should return a boolean. * **`options`** * **`color`**`?: string`\ The color of the cursor. Defaults to `black`. * **`width`**`?: number`\ The precise width of the cursor in pixels. Defaults to 1. * **`class`**`?: string`\ A CSS class name to add to the cursor element. prosemirror-dropcursor/package.json000066400000000000000000000016451525515770200201460ustar00rootroot00000000000000{ "name": "prosemirror-dropcursor", "version": "1.8.4", "description": "Drop cursor plugin for ProseMirror", "type": "module", "main": "dist/index.cjs", "module": "dist/index.js", "types": "dist/index.d.ts", "exports": { "import": "./dist/index.js", "require": "./dist/index.cjs" }, "sideEffects": false, "license": "MIT", "maintainers": [ { "name": "Marijn Haverbeke", "email": "marijn@haverbeke.berlin", "web": "http://marijnhaverbeke.nl" } ], "repository": { "type": "git", "url": "git+https://code.haverbeke.berlin/prosemirror/prosemirror-dropcursor.git" }, "dependencies": { "prosemirror-state": "^1.0.0", "prosemirror-view": "^1.1.0", "prosemirror-transform": "^1.1.0" }, "devDependencies": { "@prosemirror/buildhelper": "^0.1.5" }, "scripts": { "test": "pm-runtests", "prepare": "pm-buildhelper src/dropcursor.ts" } } prosemirror-dropcursor/src/000077500000000000000000000000001525515770200164415ustar00rootroot00000000000000prosemirror-dropcursor/src/dropcursor.ts000066400000000000000000000153551525515770200212240ustar00rootroot00000000000000import {Plugin, EditorState} from "prosemirror-state" import {EditorView} from "prosemirror-view" import {dropPoint} from "prosemirror-transform" interface DropCursorOptions { /// The color of the cursor. Defaults to `black`. Use `false` to apply no color and rely only on class. color?: string | false /// The precise width of the cursor in pixels. Defaults to 1. width?: number /// A CSS class name to add to the cursor element. class?: string } /// Create a plugin that, when added to a ProseMirror instance, /// causes a decoration to show up at the drop position when something /// is dragged over the editor. /// /// Nodes may add a `disableDropCursor` property to their spec to /// control the showing of a drop cursor inside them. This may be a /// boolean or a function, which will be called with a view and a /// position, and should return a boolean. export function dropCursor(options: DropCursorOptions = {}): Plugin { return new Plugin({ view(editorView) { return new DropCursorView(editorView, options) } }) } // Add disableDropCursor to NodeSpec declare module "prosemirror-model" { interface NodeSpec { disableDropCursor?: boolean | ((view: EditorView, pos: {pos: number, inside: number}, event: DragEvent) => boolean) } } class DropCursorView { width: number color: string | undefined class: string | undefined cursorPos: number | null = null element: HTMLElement | null = null timeout: number = -1 lastDragEvent: DragEvent | null = null handlers: {name: string, handler: (event: Event) => void}[] constructor(readonly editorView: EditorView, options: DropCursorOptions) { this.width = options.width ?? 1 this.color = options.color === false ? undefined : (options.color || "black") this.class = options.class this.handlers = ["dragover", "dragend", "drop", "dragleave"].map(name => { let handler = (e: Event) => { (this as any)[name](e) } editorView.dom.addEventListener(name, handler) return {name, handler} }) } destroy() { this.setCursor(null) this.handlers.forEach(({name, handler}) => this.editorView.dom.removeEventListener(name, handler)) } update(editorView: EditorView, prevState: EditorState) { if (this.cursorPos != null && prevState.doc != editorView.state.doc) { // if we currently have an on-going drag event // we need to update the cursor position again and update the overlay if (this.lastDragEvent) { let target = this.computeTarget(this.lastDragEvent) if (target == this.cursorPos) this.updateOverlay() else this.setCursor(target) } else { this.updateOverlay() } } } setCursor(pos: number | null) { if (pos == this.cursorPos) return this.cursorPos = pos if (pos == null) { this.element!.parentNode!.removeChild(this.element!) this.element = null } else { this.updateOverlay() } } updateOverlay() { let $pos = this.editorView.state.doc.resolve(this.cursorPos!) let isBlock = !$pos.parent.inlineContent, rect let editorDOM = this.editorView.dom, editorRect = editorDOM.getBoundingClientRect() let scaleX = editorRect.width / editorDOM.offsetWidth, scaleY = editorRect.height / editorDOM.offsetHeight if (isBlock) { let before = $pos.nodeBefore, after = $pos.nodeAfter if (before || after) { let node = this.editorView.nodeDOM(this.cursorPos! - (before ? before.nodeSize : 0)) if (node) { let nodeRect = (node as HTMLElement).getBoundingClientRect() let top = before ? nodeRect.bottom : nodeRect.top if (before && after) top = (top + (this.editorView.nodeDOM(this.cursorPos!) as HTMLElement).getBoundingClientRect().top) / 2 let halfWidth = (this.width / 2) * scaleY rect = {left: nodeRect.left, right: nodeRect.right, top: top - halfWidth, bottom: top + halfWidth} } } } if (!rect) { let coords = this.editorView.coordsAtPos(this.cursorPos!) let halfWidth = (this.width / 2) * scaleX rect = {left: coords.left - halfWidth, right: coords.left + halfWidth, top: coords.top, bottom: coords.bottom} } let parent = this.editorView.dom.offsetParent as HTMLElement if (!this.element) { this.element = parent.appendChild(document.createElement("div")) if (this.class) this.element.className = this.class this.element.style.cssText = "position: absolute; z-index: 50; pointer-events: none;" if (this.color) { this.element.style.backgroundColor = this.color } } this.element.classList.toggle("prosemirror-dropcursor-block", isBlock) this.element.classList.toggle("prosemirror-dropcursor-inline", !isBlock) let parentLeft, parentTop if (!parent || parent == document.body && getComputedStyle(parent).position == "static") { parentLeft = -pageXOffset parentTop = -pageYOffset } else { let rect = parent.getBoundingClientRect() let parentScaleX = rect.width / parent.offsetWidth, parentScaleY = rect.height / parent.offsetHeight parentLeft = rect.left - parent.scrollLeft * parentScaleX parentTop = rect.top - parent.scrollTop * parentScaleY } this.element.style.left = (rect.left - parentLeft) / scaleX + "px" this.element.style.top = (rect.top - parentTop) / scaleY + "px" this.element.style.width = (rect.right - rect.left) / scaleX + "px" this.element.style.height = (rect.bottom - rect.top) / scaleY + "px" } scheduleRemoval(timeout: number) { clearTimeout(this.timeout) this.timeout = setTimeout(() => this.setCursor(null), timeout) } computeTarget(event: DragEvent): number | null { let pos = this.editorView.posAtCoords({left: event.clientX, top: event.clientY}) let node = pos && pos.inside >= 0 && this.editorView.state.doc.nodeAt(pos.inside) let disableDropCursor = node && node.type.spec.disableDropCursor let disabled = typeof disableDropCursor == "function" ? disableDropCursor(this.editorView, pos!, event) : disableDropCursor if (!pos || disabled) return null let target = pos.pos if (this.editorView.dragging && this.editorView.dragging.slice) { let point = dropPoint(this.editorView.state.doc, target, this.editorView.dragging.slice) if (point != null) target = point } return target } dragover(event: DragEvent) { if (!this.editorView.editable) return this.lastDragEvent = event let target = this.computeTarget(event) if (target != null) { this.setCursor(target) this.scheduleRemoval(5000) } } dragend() { this.scheduleRemoval(20) } drop() { this.scheduleRemoval(20) } dragleave(event: DragEvent) { if (!this.editorView.dom.contains((event as any).relatedTarget)) this.setCursor(null) } }