hubgit / react-prosemirror

A React component for ProseMirror
https://ow1qi.csb.app/
MIT License
248 stars 51 forks source link

Fix positioning of floater menu #23

Closed morpheus-87 closed 3 years ago

morpheus-87 commented 5 years ago

There is an issue with the positioning of the floater menu. The problem is that ProseMirror calculates the offsets relative to the viewport, but with position: absolute the selected element will positioned relative to the containing element.

This issue is fixed by changing position: absolute to position: fixed.

Additionally some event handlers are introduced that calculate the position whenever the window is resized or the user scrolls.

Unfortunalety it was not possible for me to test the changes in action, because I couldn't even build anything. I changed to the subfolder react-prosemirror and ran npm install and npm run build and got the following error:

> webpack --progress
clean-webpack-plugin: /path/to/react-prosemirror/react-prosemirror/dist has been removed.
Hash: 776884dcd48f7030101e                                                         
Version: webpack 3.12.0
Time: 216ms
   Asset     Size  Chunks             Chunk Names
index.js  4.34 kB       0  [emitted]  main
   [0] ./src/index.js 1.85 kB {0} [built] [failed] [1 error]

ERROR in ./src/index.js
Module build failed: Error: Couldn't find preset "env" relative to directory "/path/to/react-prosemirror"
    at /path/to/react-prosemirror/react-prosemirror/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/path/to/react-prosemirror/react-prosemirror/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/path/to/react-prosemirror/react-prosemirror/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/path/to/react-prosemirror/react-prosemirror/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/path/to/react-prosemirror/react-prosemirror/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/path/to/react-prosemirror/react-prosemirror/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/path/to/react-prosemirror/react-prosemirror/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/path/to/react-prosemirror/react-prosemirror/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/path/to/react-prosemirror/react-prosemirror/node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (/path/to/react-prosemirror/react-prosemirror/node_modules/babel-loader/lib/index.js:173:20)

I also tried npm install and npm run build in the root folder of the repository, but it was again the same error.

morpheus-87 commented 4 years ago

Anything new on this PR, @hubgit?

hubgit commented 3 years ago

Thanks very much for the PR, and sorry for taking a while to respond to this.

If you're interested in trying v2, I've added the fix for the Floater position and it now recalculates the position on resize and scroll events.