Is it possible to have a auto-complete plugin for Scribe?

[pdrummond]

Hi, I am new to scribe.js and I am currently evaluating the API to see if it will be suitable for my needs. So far, it looks very impressive and the plugin architecture is perfect for my requirements.

I am trying to implement auto-complete within the scribe-editor itself. So when the user types '#' I want to display a drop-down menu much like the way it works in GitHub Issues.

I want to do this by having a simple menu in the DOM at a relative position, then whenever a # is typed I invoke my plugin and update the 'top' and 'left' css attributes of the menu to match the caret position. But I can't seem to be able to find an existing API in Scribe or the Selection/Range api's to get the top/left position of the caret.

I realise this may not be a Scribe-specific issue, but I would appreciate some feedback on this, whether there are any plans to support such a plugin in the future? Or if there are plans for new API features to make this a possibility. Maybe I'm just missing something in the Range/Selection API's that provide access to the caret's position?

[hmgibson23]

There's currently nothing in the Range/Selection API to give you the position of the caret in respect to the page. I'm not sure how you could get the exact position of the caret as it's not a DOM element as such and thus doesn't have the usual rules. I guess you could it's position used the Range and Selection objects and then put a dummy element in it's place and use the styles from that to calculate yours - although this is pure speculation and might not work at all. If you look at https://github.com/guardian/scribe/blob/master/src/api/selection.js#L22 and look how the markers get placed you might be able to do something similar. There may be a few issues with collapsed ranges but then there might not!

You're more than welcome to patch the api and submit a pull request if you find a way to solve this.

[pdrummond]

Thanks for the info @hmgibson23, I'll take a closer look at placeMarkers and try to understand more how it works.

I didn't realise that "GitHub Issues" does exactly what I want until I actually came here to write my original comment and typed '#' and a drop-down menu appeared right next to the caret! The GitHub Issues comment box is just a text area so it must be possible to get the caret position somehow using the standard API's. I wonder how they are doing it?

I'll do some more digging on this and will definitely submit a pull request if I find anything useful.

[pdrummond]

I've found this which provides the caret position correctly.

But when I try to use it, scribe automatically inserts a <span><br></span>. I would assume the 'hack' would clean-up the span after using it but I'm not sure. I'm still new to the Range API so still learning. I guess I need to do something similar to below, but in a Scribe-friendly manner? I will try to figure this out myself but in the meantime, any tips would be appreciated. The code I have used is as follows:

range = window.getSelection().getRangeAt(0).cloneRange();
node = document.createElement('span');
range.insertNode(node);
range.selectNodeContents(node);
range.deleteContents();
$node = $(node);
position = $node.offset();
position.left -= this.$el.offset().left;
position.top += $node.height() - this.$el.offset().top;

[OliverJAsh]

Maybe one of these could help:

• https://developer.mozilla.org/en-US/docs/Web/API/Range.getBoundingClientRect
• https://developer.mozilla.org/en-US/docs/Web/API/Range.getClientRects

[hmgibson23]

Would be great to see a Scribe autocomplete plugin in the future.

P.S. @OliverJAsh you're supposed to be relaxing!

[ir-g]

:+1: +1 For autocomplete, that would be awesome!

[pdrummond]

@lucthev I received an email notification regarding your gist yesterday but I was away from my computer so I couldn't take a look. Thanks for taking the time to write it! I've logged in today to take a look but the gist and your comment no longer exist?

[lucthev]

Ah, terribly sorry. It can be found here.

[chanon]

Just a tip, this is the most cross-browser compatible/accurate way to find the coords of the cursor that I've found: http://stackoverflow.com/questions/6846230/coordinates-of-selected-text-in-browser-page

I even added it as a selection.getCoords() method for convenience in my custom selection.js since I needed it for something.