Ability to position the cursor in the output string

[jukben]

A customizable final position of the cursor in the outputted string

Options could be "start" | "end" | number (position in the final string). Default should be "end"

Proposal:

type Output = (item: Object | string, trigger?: string) => 
    string | { text: string, caretPosition: "start" | "end" | number }

type triggerType = {
    [triggerChar: string]: {
        ?output: Output,
        dataProvider: (token: string) => Promise<Array<Object | string>> | Array<Object | string>,
        component: ReactClass<*>,
    },
}

Any thoughts?

[milosimr]

@jukben Yeah giving integer position would work, and I can see that would be easy to implement, but my idea was to have a special character in the output string, and interpolate position from it...

[jukben]

Could you please give me some example?

[milosimr]

@jukben Sure, let me know if this needs some clarification

<ReactTextareaAutocomplete
  className="ant-select-auto-complete.ant-select ant-input"
  loadingComponent={Loading}
  minChar={0}
  rows={1}
  trigger={{
    '#': {
      dataProvider: (token) => {
          if (!token || !token.length) {
            return this.props.allProperties
          }
          return this.props.allProperties.filter(prop => {
            if (prop.name.search(new RegExp(token, "i")) !== -1) {
              return prop
            }
            return null
          })
     },
     component: ItemComponent,
     output: (item, trigger) => {
       switch (item.type) {
         case 'string':
           return `${item.name} = ('${special_character_to_indicate_caret_position}')`
             case 'number':
               return `${item.name} in ('${special_character_to_indicate_caret_position}', '${maybe_have_multiple_positions}')`
              case 'date':
                return `${item.name} in ('${special_character_to_indicate_caret_position}', '${maybe_have_multiple_positions}')`
              default:
                return `${item.name} = ('${special_character_to_indicate_caret_position}')`
          }
        }
      },
  }}
/>

[jukben]

@milosimr Hey, to be honest, I don't really like the idea of interpolated position based on some magic character. You could easily count on which position the caret should appear:

return {
    text: `${item.name} = ('${special_character_to_indicate_caret_position}')`
    caretPosition: `${item.name} = (`.length
}

How do you imagine that multiple positions should work?

[milosimr]

@jukben That's true, that solution is simpler and much easier to implement...

As for multiple positions, there could be a special character e.g. that would jump to the next position. Again I understand its harder to implement that, and solution will probably require a hack of some sorts, given the nature of textarea.

[jukben]

@milosimr I personally think that jumping functionality is out of the scope of this plugin. I could go for my proposal about caretPosition, that's reasonable.

Anyway, I could provide getters/setters for textarea's caret position, so you can implement it by yourself.

[milosimr]

@jukben Ok, getters/setters would be nice, I understand that my proposals are out of the scope of this plugin, I have some other needs for customization, once I get to that point i'll fork the project and make them.

Thanks for all the help.

[jukben]

Good. I opened Issue for getters/setters and this could be implemented also as we discussed. So if someone is interested, please follow my proposal for implementing this.

[Olovorr]

I am on it 🙂

[jukben]

Cool! I can't wait to see your PR ❤️

[jukben]

Need to refactor getTextToReplace props from List.jsx (should be solved instead in onSelect method inside of Textarea.jsx)

See https://github.com/webscopeio/react-textarea-autocomplete/blob/master/src/List.jsx#L74

[Olovorr]

Hey guys, in the end, it looks like I just cannot find time to do this 😞 If someone can pick it up, please do.