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!
Related
i need to implement simple text editor with custom (probably dynamic) rules. For example, if user change text somehow i want to run regex (or callback method or something else) on this text and apply formatting for it. For ex all ip addresses in text should have red color, names from specified range - black, all words starting from "abc" - green.
So basically what i need is:
- simple text editor based on text area
- ability so add rules applying to text withing text area
I reviewed a lot of related resources and didn't found any simple solution yet. As for now I've started to implement my own editor with using of contenteditable attribute and JQuery.
I never wrote such functionality before, so could you please point me to the right direction? Maybe i can use already implemented tools or specific strategy?
Thanks a lot.
Maybe it would be useful for someone.
After a bit of investigation at first i tried to use jQuery Highlight Plugin, but it does not cover my all of needs so i used Codemirror editor, which i found very nice and customizable.
I wrote my custom mode and it's working perfectly.
As start point i used this article
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 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.
I am very curious to hear input from others on a problem I've been contemplating for some time now.
Essentially I would like to present a user with a text document and allow him/her to make selections of text and annotate it. Specific to the annotations I aim to achieve the following:
Allow users to make a text selection, annotate it, then save the selection and annotation for reference later
(UI) Support representing overlapped annotations. For example if the string where: "This is the test sentence for my example test sentence", user1 might have an annotation on "is the test sentence for my example" and user2 might have an annotation on "for my example".
Account for a situations where the document's text changes. The annotations would to be updated, if possible.
How would you tackle this from a technical perspective?
Some ideas I've had are:
Use javascript ranges and store an annotation as a pair of integers something like: (document_start_char, document_end_char). Save this pair in the db.
Alternatively, using JS get the text selected and actually save the full text in the db. (not sure how i would then do overlapping annotations)
Represent overlapped annotations by applying a css style to highlight the text then darken the "stack" of annotations where they overlap. Smallest annotation would always have to be on the top of the "stack".
What are your thoughts or areas of improvement? How the heck could i support a document's text being updated without breaking all the annotations?
I'm researching this same question and personally I favor staying away from rolling my own, in favor of an existing open source library like Annotator.
http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html (404 response)
http://mark.koli.ch/2009/09/05/get-selected-text-javascript.html- (404 response)
Getting the selected text is really easy. Storing it (or its starting/ending points) is also a joke. But what about your point number 3? What if the text changes?
If the text changes, both the original text and the original selection coordinates you stored won't equal the current modified text. You should be aware of the annotations present in the text document, so that everytime it changes, the annotations referencing to that particular piece of changed text should be updated, or deleted (maybe after a quick comparison between the before and after text: are some words missing? or just some words have been corrected?), but this seems really a struggling task.
I think storing the entire text annotation in a db is essential, to avoid it being changed and the annotation lost. This way you will still have the complete text you annotated. Then you should also use a sort of flag to indicate the start character of the annotation, and if the text changes, you could calculate the difference in characters from the document text before the change, and the one after it, and find this way the new starting point of the original annotation (assuming the annotation part of the document text has't changed).
Dividing the text document in as many paragraphs as possible should also help, this way you could separate different pieces of the document and work on one by one.
Now I would really like to see it done! :)
I wrote a TinyMCE plugin for Wordpress that drops a prepared bit of HTML into the textarea when a button on the toolbar is clicked. This is to assist in formatting some relatively complicated elements.
I would like for this piece of HTML to be wrapped in some sort of container that TinyMCE recognizes and allows for easy selection or deletion if needed.
Currently, the only way to delete an individual element is by erasing all of the information each individual "sub element" contains. I can't seem to find any information in the API regarding manually assigning an element as a singular combined object. As far as behavior goes, think "resize frame" or something similar (only this won't need to have any resizing capabilities).
Any ideas?
If you want to wrap text/html inside an element of your choice (i used a span here) at the current cursor position of tinymce editor instance ed you can simply do
ed.execCommand('insertHTML', false, '<span class="custom_to_delete">My_Text</span>');