asyndesis / react-highlight-menu Goto Github PK
View Code? Open in Web Editor NEWA react text selection / highlight menu similar to the context menu on medium.com.
Home Page: https://asyndesis.github.io/react-highlight-menu/
A react text selection / highlight menu similar to the context menu on medium.com.
Home Page: https://asyndesis.github.io/react-highlight-menu/
在 menu 中返回一个 input 输入框,选择文本后弹出 input 输入框,但输入框入法输入内容
The menu doesn't appear upon highlight in Firefox. I'm guessing this is related to Firefox's esoteric getSelection method, I know developers for a while have had to use selectionStart and selectionEnd instead of getSelection.toString. Would dearly appreciate a fix!
FWIW I also encountered issues on IE (demo page wouldn't even load) but may not be too reliable as I was testing on a VM from BrowserStack. Works great on all other browsers I've tested (Opera, Chrome, Vivaldi, Edge, Safari).
When using react-highlight-menu
2.0.2 with a Next.js 13.4.9 app, I am getting this warning
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
at Lo (/testing/my_nextjs_app/node_modules/react-highlight-menu/dist/index.cjs.js:30:23196)
at div
at ChatMessage (webpack-internal:///./src/components/ChatMessage.js:24:25)
at main
at div
at div
at Layout (webpack-internal:///./src/components/layout.js:16:19)
at MyApp (webpack-internal:///./src/pages/_appInner.js:21:18)
at Provider (/testing/my_nextjs_app/node_modules/react-redux/lib/components/Provider.js:19:3)
at MyAppWithRedux (webpack-internal:///./src/pages/_app.js:108:27)
at StyleRegistry (/testing/my_nextjs_app/node_modules/styled-jsx/dist/index/index.js:449:36)
at PathnameContextProviderAdapter (/testing/my_nextjs_app/node_modules/next/dist/shared/lib/router/adapters.js:78:11)
at AppContainer (/testing/my_nextjs_app/node_modules/next/dist/server/render.js:346:29)
at AppContainerWithIsomorphicFiberStructure (/testing/my_nextjs_app/node_modules/next/dist/server/render.js:382:57)
at div
at Body (/testing/my_nextjs_app/node_modules/next/dist/server/render.js:682:21)
My component that uses HighlightMenu
is like this:
The app still works as expected. But can we do something to fix this warning? Thanks
It would be great if there is a prop for setting position of menu.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.