How to edit ol tags in rich text editor

Question

I am creating and ordered list using Text Angular and able to create orderlist which starts with 1,2,3 by default. Text angular has 2 modes 1. Rich Text mode 1. HTML mode

HTML mode shows

 <ol>
       <li>test</li>
       <li>test</li>
 </ol>

Rich Text mode will show as:

1. test
2. test

If I need to start ordered list with number 5, I need to switch to HTML mode first and do the below change

<ol start="5">
    <li>test</li>
    <li>test</li>
</ol>

Now the Rich Text mode starts the numbering with 5

5. test
6. test

The real problem is how to change the numbering by clicking on the pseudo element generated by the < ol> tag while on the rich text editor mode. After googling and research it seems the pseudo element cannot be changed.

Stack overflow editor gives the option of changing this in Rich Text mode itself!

So while adding the below data in Rich Text mode starting with 4 for example

 4. number 4
 3. number 3

The preview mode ends up displaying buggy result.

4. number 4
5. number 3

if you noticed 5. number 3. this was generated from the Rich text editor.

There are JS way to replace tags in the DOM and give a simlar tag look n feel using combination of html tags etc which I am not looking for at this point.

Would there be a creative CSS way to change the number on the fly in the rich text mode (rather than doing html mode) in Text Angular.

Answer 1

Below solution is inspired by S.Klechkovski's answer. On the editor type a number, say 5 , select the number, click on on ol tag in TextAngular, the old now starts with 5

The difference is in var startingNumber = parseInt($(taSelection.getSelectionElement()).text());

$provide.decorator('taTools', function ($delegate, $document, taSelection) {

      // NOTE: override the ol action
      var olAction = $delegate.ol.action;
      $delegate.ol.action = function () {

        if (!this.active) {
          // NOTE: replace with better way for integrating the feature
        var startingNumber = parseInt($(taSelection.getSelectionElement()).text());

          // do the ordering
          var result = olAction.apply(this, arguments);

          // change the starting number
          var element = angular.element(taSelection.getSelection().start.element);
          var parentOls = element.parents('ol');
          if (parentOls.length > 0) {
            angular.element(parentOls[0]).attr('start', startingNumber); 
          }

          // clean up
          element = null;
          parentOl = null;
          return result;
        } else {
          return olAction.apply(this, arguments);
        }
      };

      return $delegate;
    });