View Code? Open in Web Editor
NEW
A react text selection / highlight menu similar to the context menu on medium.com.
Home Page: https://asyndesis.github.io/react-highlight-menu/
HTML 1.30%
JavaScript 1.38%
TypeScript 97.32%
react-highlight-menu's Introduction
react-highlight-menu's People
Contributors
Watchers
react-highlight-menu's Issues
It would be great if there is a prop for setting position of 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