1

I am implementing a simple text editor with content editable div and a two buttons, one for bold text and one for italic. The way I am making a text bold or italic is by inserting a span around the selected text with class text-bold and text-italic, respectively, and then do the styles using css. However, I don't want to keep adding span inside a span to make a text bold and italic like

<span class="text-bold">
   <span class="text-italic">Some Text</span>
</span>

but rather when I select a text, I want to check if it's already surrounded with a span, and if yes, then add a class to it to reflect the desired change. For example, suppose I already have

<p>Hello there
   <span class="text-bold">
      Some Text
   </span>
</p>

in the DOM. Later if I want to make Some Text in italic, I just add the class text-italic like so

<p>Hello there
   <span class="text-bold text-italic">
      Some Text
   </span>
</p>

I know that selection.anchorNode.parentNode will return the containing p tag, and selection.anchorOffset will return the offset from p in characters. But I am not sure how to use these data to return the surrounding span.

So, my question is: how can I return the surrounding html element with its attributes if exists of a selected text?

BlackMath
  • 932
  • 7
  • 24
  • Why not just select the parent `` elements with `.getElementsByClassName('text-bold')` then add the relevant class to all of them? Surely you don't need to do it individually? – Obsidian Age Dec 01 '21 at 01:12
  • it is a problem of tree resolution. when a sub branch becomes the whole of its parent branch then you can merge them – Mister Jojo Dec 01 '21 at 01:32
  • @ObsidianAge Because I don't know in advance if there would be a `span` with class `text-bold`. The example I gave is just an example. I expect the user to add, delete and select random text, and perform random edits. The user could decide to make a text `italic` first and then `bold`. – BlackMath Dec 01 '21 at 01:36
  • @MisterJojo I just want to find if a selected text is surrounded by a `span`. If yes, then add a new class. If not, then add a span around the selected text with a class that reflects the edit. Later I want to be able to toggle edits. For example, if I press `bold` button to add `span` with `text-bold` class. If I press it again, then I remove the class, and ultimately remove any `span` that contains no classes. – BlackMath Dec 01 '21 at 01:41
  • yes, but you will still need to browse your part of the tree to know the configuration of the nodes concerned – Mister Jojo Dec 01 '21 at 01:47
  • @MisterJojo OK, do you have pointers how to start on this? – BlackMath Dec 01 '21 at 02:15
  • what? some links on the mdn doc? https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes https://developer.mozilla.org/en-US/docs/Web/API/Element/children https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName https://developer.mozilla.org/en-US/docs/Web/API/Element/classList – Mister Jojo Dec 01 '21 at 02:26
  • That's not really what you'll want. ex. `` **This is not what you want** ``, Then later on you want to italicize the word *`want`*. Now your function detects `.bold` and you get `` ***This is not what you want*** ``. The word ***`want`*** is italicized *but* so is the rest of the `` . If you are using `selection` and `range` API then you need to be precise and have complete control of your phrasing elements. – zer00ne May 15 '22 at 00:15

1 Answers1

0

Try the following:

.getSelection().getRangeAt(0).startContainer.nodeName
Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
mohamed reda
  • 1
  • 2