juliankrispel/react-text-selection-popover

Selection based Text UI made easy

react-text-selection-popover's Issues

Invalid tag name "^16.8.0,^17.x,^18.x" of package "react@^16.8.0,^17.x,^18.x"

Trying to install as per README:

npm install --save react-text-selection-popover

causes

npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "^16.8.0,^17.x,^18.x" of package "react@^16.8.0,^17.x,^18.x": Tags may not have any characters that encodeURIComponent encodes.

» npm --version                                                                                                                                                                                                                                
8.19.3

Please advise or let me know if you need more info

Thanks!

Avoid locking the react-dom version

react-text-selection-popover/package.json

Line 39 in 7f86b20

"react-dom": "16.3.0"

It would be better if the version of react-dom was not locked to 16.3.0 :)

Reimplement react-measure partially

This could also bring down filesize a fair bit

Using Select element in Popover

Hey, so I'm not sure if this is a bug or if I've just got something set up wrong.

I'm passing in a component that is a fairly basic <select> node with an onChange handler setup.

<Popover isOpen={isTextSelected}>
    <CommentCard
      characteristics={characteristics}
      handleCharacteristicSelection={handleCharacteristicSelection}
    />
</Popover>

function CommentCard({ characteristics, handleCharacteristicSelection }) {
  return (
    <Select
      emptyValue="Characteristic"
      tootip={{ title: 'Select a characteristic' }}
      onChange={({ value }) => handleCharacteristicSelection(value)}
      defaultValue={'Characteristic'}
    >
      {characteristics.map((characteristic) => (
        <Select.Option
          value={characteristic.id}
          children={characteristic.name}
          key={characteristic.id}
        />
      ))}
    </Select>
  )
}

When I load my page, the first time I use it everything works great. However, after I've used it once it seems like the onChange listener isn't firing anymore.

Here is a link to a gif showing the behavior
https://pic.pco.bz/L1up4vXm

Any idea's what might be going on?

As a developer I want to use a hook

Scroll

I am using the popover over a Devextreme dxList component and I didn't found a solution for scrollRef to work.
If I pass a scrollView ref or a list ref the program freeze with no error.
If I wrap it in div, the scroll event is not caught in popover.
I have tried various wrapping and so on. Nothing seems to trigger the scroll event in that scenario.

Seem to not run on React 16.13.1

My project was created on React version 16.13.1 and I haven't been able to make this module run in even it's most simplest form.
I installed with yarn add react-text-selection-popover and my component goes like this:

import Popover from 'react-text-selection-popover';
class MyComponent extends Component {
// Goes straight to render
render() {
<React.Fragment>
...//Simple divs and CSS, nothing fancy
<Popover>
  Just some text 
</Popover>
</React.Fragment>
}}....

No text is rendered. No console errors logged. Just a warning:

react_devtools_backend.js:2430 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: WindowDimensions, WithContentRect

Any advice is deeply appreciated.

Not working when we use in some loops or map

react-text-selection-popover is not working in map

Popover doesn't appear in Firefox.

Hello,

I tried your codesandbox example and it doesn't work in Firefox. Tested on Firefox 61.0.1 and Firefox Developer Edition 62.0b12 on Windows 10 (v1803).

It works in Chrome Version 68.0.3440.75 and Microsoft Edge 17 on the same machine.

Only one error appears in console: "Warning: Failed prop type: Invalid prop children of type object supplied to _class, expected function."

Error appears in all browsers, but popover still works in those mentioned so I'm not sure if that error is really related to the problem somehow.

why no click is encouraged?

Why are we doing

react-text-selection-popover/src/index.js

Line 96 in ea84ffd

style.pointerEvents = this.state.mousePressed === true ? "none" : "auto";

?
If user wants to control the click on top of toolbar, we should allow it, right?

And

containerNode | React.ref
-- | --

needed .current instead of the ref object.

events fire even though part of selection is outside container area

This shouldn't really happen - the selection events get triggered even though the focus node is outside of selectionRef

window is not defined

when am trying to run with ur package getting following error !!

Refactor placement logic

Some of it is redundant

Line One

Line two

Feature: add autoHide prop

Automatically hide/show popover when text is selected/unselected

Feature: Add displayRef

Constrain popover to movement inside a container so that it aligns with the containers dimensions

Add flow types

And export them

Is there a way to get the selected text?

For example, the popover can show the number of the selected words/characters?

Add aria props and instructions to docs about accessibility

MouseUp outside of selectionRef

Problem:
When selectionRef is set, the target for the mouseUp event is set to the corresponding element. Hence, when releasing the mouse when the cursor is outside of selectionRef.current, the mouseUp event is not triggered. In this case, the popup becomes non-interactive due to style.pointerEvents = "none";.

Possible solution:
Change the target prop of the mouseUp EventListener component to either window or document. This would retain the behavior of making the popup non-interactive while selecting, and it will make the popup always interactive when the mouse is released.

If it fits the intended behavior, this minor change would be much appreciated :)

Use absolute positioning instead of fixed

Or perhaps an option for this?

Specifically my current settings if I select text, then scroll, the position is fixed in the display port. But if you were to calculate the absolute positioning values, it would scroll to seem to be attached to the selected text

Upgrade React to 17.0.2

Please update react version to 17.0.2

Add draft-js example

Duh

Add slate example

I think this component would be quite useful for slate editors

updatePosition only fires when i scroll the window

i am using the version 1.3.0 and run into a problem.
when i select some words, 'onTextSelect' wont fire and the position of the popover is not recalculate(it show in the wrong place)
and then i scroll the window, onTextSelect and placementStrategy fired and all the things go in the right place
could you give some suggestion on solving the problem 😭
<SelectionPopover isOpen={this.state.isShowPopover} onTextSelect={() => {debugger}} onTextUnselect={() => this.setState({ isShowPopover: false })} className="selection-360-popover" selectionRef={this.ref} ref={this.popoverRef} scrollRef={this.props.scrollRef} containerNode={this.props.scrollRef.current} placementStrategy={placementStrategy} > <div className="mix-char-popover"> <Button color="primary" type="text" onClick={this.curOnMixTextCb} icon={ <Icon type="bee-icon_invisible_outlined" className="hide-icon" /> } > {t('hide_follow_perform_msg')} </Button> </div> </SelectionPopover>

Can't resolve 'react-measure/lib/with-content-rect'

@juliankrispel Very nice component, but keep getting an error

./node_modules/react-text-selection-popover/dist/index.es.js
Module not found: Can't resolve 'react-measure/lib/with-content-rect' in '/node_modules/react-text-selection-popover/dist'

should we take a look on this line?

Unintended behaviour in Chrome Mobile

Hey, as you can see below on mobile, it renders both popovers. Anyway to suppress the one which chrome enables by default.

PropType error: children must be function

This has bugged me for a while, right now there's a proptype error caused by this:

souporserious/react-measure#78

Popover on first appearance flashes

The popover window on first apperance is first positioned somewhere to the left, and then after it is visible it is positioned properly over the text.
This creates a visible flash as the popover materializes on the left of the screen and then it is positioned correctly.
Try the codesandbox example after reload where it is also happening.
Suggestion:
On first appearance the popover should first be positioned then made visible.

button onClick is not working Inside Popover

<Popover isOpen={this.state.isOpen} onTextSelect={this.onTextSelect} onTextUnselect={() => this.setState({ isOpen: false })} onClick={this.handleClick}> > <button onClick={this.handleClick}>{this.state.selectedText}!</button> </Popover>

PropType Error: EventListener component

At first render - selectionRef.current is null, the EventListener component complains about this 👍

Another value for "defaultDirection"

I'm using your library on a large page of code, and for my usage I expect to sometimes select over 1 page worth of text.

So I was thinking it would be nice to have the library detect the selection direction (like if I click at the top, hold drag downward vs upward), I'd probably call it defaultDirection="mouse", but obviously up to you if you implement or accept a pull request

I haven't looked at your code yet, but I'd imagine it would be simple to decide which one of these are higher up on the screen or in the DOM, and determine if it uses the "above" or the "below" logic

  var selectionStart = selection.anchorNode;
  var selectionEnd = selection.focusNode;

Big issue when creating a custom context menu

Hi, I am using this library to display some button so I could for example copy, share etc.

The problem is that the Popover disappear before the click event even trigger. there should be a settimeout at least so that click event may trigger if the popup previous state is visible.

Please could you check this out. I saw that you are using use-text-selection are you the owner of the library ?

should this problem be handled here or in use-text-selection.

Here is a code view should if you are interested of what I mean.

         {
            this.props.bookOption.selectionMenus && this.props.bookOption.selectionMenus.length ? (
              <Popover
                mount={this.chapterRef.current as HTMLElement | undefined}
                render={
                  ({ clientRect, isCollapsed, textContent }) => {

                    if (clientRect == null || isCollapsed) return null
                    var row = "";
                    var column = "";
                    if (this.props.bookOption.selectionMenus) {
                      this.props.bookOption.selectionMenus.forEach((_, i) => {
                        if (i % 3 === 0)
                          row += " 1fr";
                      });

                      if (this.props.bookOption.selectionMenus.length >= 3)
                        column = "1fr 1fr 1fr";
                      else column = this.props.bookOption.selectionMenus.map(() => "1fr").join(" ");

                    }

                    // I'm using emotion for this example but you can use anything really
                    const style = {
                      position: "absolute",
                      left: document.documentElement.scrollLeft + (clientRect.left + clientRect.width / 2),
                      top: document.documentElement.scrollTop + (clientRect.top - 40),
                      marginLeft: -75,
                      gridTemplateColumns: column,
                      gridTemplateRows: row
                    } as React.CSSProperties

                    return <div className='bookMenu' style={style}>
                      {
                        this.props.bookOption.selectionMenus?.map((x, i) => (
                          <a key={i} onClick={(event) => {
                           // this never trigger.
                            var result = {
                              selectedText: textContent,
                              rec: clientRect,
                              menuIndex: i
                            } as SelectionResult
                            console.log(result)
                            if (this.props.bookOption.selectionMenuClick)
                              this.props.bookOption.selectionMenuClick(result);
                          }}>
                            {
                              x.icon && typeof x.icon === "string" ? (<img src={x.icon} />) : null
                            }
                            {
                              x.icon && typeof x.icon !== "string" ? (x.icon) : null
                            }
                            {x.text}
                          </a>
                        ))
                      }
                    </div>
                  }
                }
              />
            ) : null}