I'm looking at Rangy (http://code.google.com/p/rangy/) and it seems it has a bunch of DOM utilities but I don't understand them without examples. So I'm turning to SO with my ideas and hopefully you guys can show me how this can be done:
What I need to do with Rangy is use it to find the position and dimensions of the selection. I want to get the frame or Rect of the selection, whether relative to the document or parent element. Then I can position my callout accordingly.
I believe the demo that comes with Rangy already illustrates what you want. specifically http://rangy.googlecode.com/svn/trunk/demos/position.html inside showSelectionPosition function
Considering the fact that selection may be spread across multiple elements, it'd be best to use the coordinates of either startSelEl or endSelEl to anchor your callout to the beginning or end of a selection.
There is an embryonic, unreleased Rangy module I wrote for getting pixel coordinates of a selection or range. Unfortunately the difficulty of getting this working properly in all browsers and all situations has put me off completing it and I have essentially abandoned it. However, if you add a bit more detail about what you're trying to do I may be able to suggest something.
Related
This question is only related to TipTap/Prosemirror and it's APIs.
Hey!
I have a TextNode (pic attached), which I extracted from the editor. And also I have a mark applied to this TextNode. And I want to unset this specific mark from the TextNode that I have.
Main point here is that I need to unset a mark without manual selection from the user.
I've tried a lot to create prosemirror Selection on fly and then toggle mark, but to instantiate Selection you need to provide positions, and I don't have them. And also I cannot find a way to get them somehow.
Also it's not really clear for me why TextNode is not selectable? I mean it's property https://tiptap.dev/api/schema#selectable.
Because of that I wasn't able to create NodeSelection via https://prosemirror.net/docs/ref/#state.NodeSelection^create.
Probably there are some options to make it selectable?
Finally I even tried to just create WEB API Selection from Ranges - https://developer.mozilla.org/en-US/docs/Web/API/Selection, but seems like it's not possible, seems like tiptap or prosemirror preventing me to do that.
I'm one step away from just rough update directly in the JSON of my editor's content, because I can't find other options to make it correctly through APIs.
Probably you can suggest something?
Thanks in advance!
I want to add an overlay to my editor that will only apply in a given range (e.g. from line 3, column 44 to line 8, column 5).
The problem is that I couldn't come up with any way to find what the current line is in my token() method, since overlays are stateless, so I can't store the current line in the state.
I pored over the extensions in multiplex.js and overlay.js, and tried to grok how nested modes work, but I could not figure out a way to use any of these tools to help me here. Keep in mind I still want this to behave like an overlay, so without disturbing the base mode.
My alternative is to scan elements for the added class and manually modify them, using element.getBoundingClientRect() and cm.coorsChar() to check their position. But this is ugly, needs manual refreshing, and causes bugs when marked elements span across my range boundaries. Any idea on how to solve this properly?
You can't bound an overlay like that. But you also don't have to manually mess with the dom. The markText method provides a more convenient way to style specific pieces of your document.
I'm looking for a jQuery tagging/autocomplete plugin where I tags can be inserted mid-order - and control over this is possible with the mouse.
I've gone through everything I can find, but am yet to find a plugin with all the requirements I'm looking for. I'm looking for a Facebook-esque tagging plugin, yet I'll be working with pre-defined phrases, and building them up into a paragraph, so I need to be able to control the order, and potentially insert a new tag in the middle of an existing selection.
The closest I've found to having this functionality is TextBoxList and the 'Facebook Theme' of JQuery TokenInput. Both of these however only allow you to move the cursor between tags with the arrow keys - and I'm looking to be able to mouseclick to control the cursor aswell.
Anyone know anything that's got what I need? A few other key essentials are free-text input (when no tag matches), remote source of data, and form submission, but I'd hope they'll be easier to retro-fit to something else!
An update for Googlers - I went with jQuery-tokeninput, and have spent the day modifying the library to work with mouse input. When I get time to tidy the code, and check how it works with other themes, I may put a pull request on GitHub, it seems like fairly useful functionality to me.
I'm using a modified version of the following example and everything works great so far.
What I am trying to do is to make the nodes bounce from each others and not overlap because I can't see the text and icons of a node if there is another on top of it. Is there a way to make this happen without modifying too much of code that works already? Maybe add something like enabling collision for the nodes?
ok i its seems that setting the charge to .charge(-300), sets the nodes apart by pushing them away from each others.
I would like to implement some "Drag-select" functionality into a project of mine but i'm unsure how to implement it.
The creation of the selection area is not a problem, it's the capturing of elements within the area itself which is confusing me.
A jQuery example found here.
Selectable Demo
If you can use jquery there are some plugins that do this operation. Anyway you can check if the position of the element is contained into the selection area coordinates and, if it is, you select it.
Script.aculo.us has a nice implementation of drag-n-drop, but then you have to include this rather large library. Or you could investigate how they done it for that matter, since its open-source.