Identifying stylized text in contenteditable while navigating with arrow keys

Question

Identifying stylized text in contenteditable while navigating with arrow keys

Hello there! I am looking for a way to identify the text format within my editable div using arrow keys and automatically highlight the corresponding formatting buttons.

For instance, if my cursor is on the phrase "This is me" and it is bold, strikethrough, and colored, I want the bold, strikethrough, and font color buttons to be highlighted. How can I achieve this functionality?

I would greatly appreciate any assistance.

Thank you!

$(function () {
    $('#editor').on('keydown', function (event) {
        if (
            event.keyCode == 37 // left arrow key pressed
            || event.keyCode == 38 // up arrow key pressed
            || event.keyCode == 39 // right arrow key pressed
            || event.keyCode == 40 // down arrow key pressed
        ) {
            // code implementation here ...
        }
    });
});

ul li {
    display: inline-block;
}
.btn-decorations .btn-color {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    position: relative;
}
.btn-color-blue {
    background-color: blue;
}

.btn-color-red {
    background-color: red;
}

.btn-color-black {
    background-color: black;
}

.on {
    border: 3px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <p id="editor" contenteditable="true"><font><strike><b>This is me.</b></strike></font> Some test text for you to select</p>
</div>
<div class="btn-area btn-area-center">
    <ul class="btn-decorations">
        <li>
            <button type="button" class="btn-ic on" id="addBold">
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
                    <g id="ic-bold" class="ic-bold" transform="translate(-5.5 -3.5)">
                        <path id="path-1" class="path-1" data-name="path-1" d="M6,4h7.333A3.844,3.844,0,0,1,17,8a3.844,3.844,0,0,1-3.667,4H6Z" transform="translate(0)" fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
                        <path id="path-2" class="path-2" data-name="path-2" d="M6,12h8.308A3.855,3.855,0,0,1,18,16a3.855,3.855,0,0,1-3.692,4H6Z" transform="translate(0)" fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
                    </g>
                </svg>
            </button>
        </li>
        <li>
            <button type="button" class="btn-ic on" id="addStrike">
                <svg xmlns="http://www.w3.org/2000/svg" width="12.5" height="16.5" viewBox="0 0 12.5 16.5">
                    <g id="ic-strike" class="ic-strike" data-name="ic-strike" transform="translate(-13.46 -4.751)">
                        <path id="path-1" data-name="path-1" d="M25.469,12.743H19.731a7.047,7.047,0,0,1-2.227-.827A3.9,3.9,0,0,1,16.28,10.8a3.047,3.047,0,0,1-.524-1.76...

javascript html jquery css

Answer 1

Answer №1

Let's consider the following scenario.

$(function() {
  $('#editor').on('keydown', function(event) {
    if (event.keyCode >= 37 && event.keyCode <= 40) {
      var el, active = [];
      if (document.selection) {
        el = document.selection.createRange().parentElement();
      } else {
        el = window.getSelection().anchorNode.parentNode;
      }
      while ($(el).prop("nodeName") != "P") {
        active.push($(el).prop("nodeName"));
        el = $(el).parent().get(0);
      }
      console.log(active.join(", "));
    }
  });
});

ul li {
  display: inline-block;
}

.btn-decorations .btn-color {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  position: relative;
}

.btn-color-blue {
  background-color: blue;
}

.btn-color-red {
  background-color: red;
}

.btn-color-black {
  background-color: black;
}

.on {
  border: 3px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p id="editor" contenteditable="true">
    <font><strike><b>This is me.</b></strike></font> Some test text for you to select</p>
</div>
<div class="btn-area btn-area-center">
  <ul class="btn-decorations">
    <li>
      <button type="button" class="btn-ic on" id="addBold">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
                                            <g id="ic-bold" class="ic-bold" transform="translate(-5.5 -3.5)">
                                                <path id="path-1" class="path-1" data-name="path-1" d="M6,4h7.333A3.844,3.844,0,0,1,17,8a3.844,3.844,0,0,1-3.667,4H6Z" transform="translate(0)" fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
                                                <path id="path-2" class="path-2" data-name="path-2" d="M6,12h8.308A3.855,3.855,0,0,1,18,16a3.855,3.855,0,0,1-3.692,4H6Z" transform="translate(0)" fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
                                            </g>
                                        </svg>
                                    </button>
    </li>
    <li>
      <button type="button" class="btn-ic on" id="addStrike">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12.5" height="16.5" viewBox="0 0 12.5 16.5">
 <!-- More SVG Code Here -->
                                    </button>
    </li>
    <li>
      <button type="button" id="addColorBlack" class="btn-add-color on">
 <!-- More Button Code Here -->
                                    </button>
    </li>
    <li>
      <button type="button" id="addColorBlue" class="btn-add-color">
 <!-- More Button Code Here -->
                                    </button>
    </li>
    <li>
      <button type="button" id="addColorRed" class="btn-add-color">
 <!-- More Button Code Here -->
                                    </button>
    </li>
  </ul>
</div>

This elaborates on the solution provided in How to detect when a child-element of a contenteditable DIV is edited via keyboard?

In case of arrow key input, it is essential to verify if the parent element is P. If not, an iteration through each parent element is required to determine the applied elements on the Text Node.

Upon identifying these elements, appropriate buttons can be highlighted accordingly.

Answer 2

Let's consider the following scenario.

$(function() {
  $('#editor').on('keydown', function(event) {
    if (event.keyCode >= 37 && event.keyCode <= 40) {
      var el, active = [];
      if (document.selection) {
        el = document.selection.createRange().parentElement();
      } else {
        el = window.getSelection().anchorNode.parentNode;
      }
      while ($(el).prop("nodeName") != "P") {
        active.push($(el).prop("nodeName"));
        el = $(el).parent().get(0);
      }
      console.log(active.join(", "));
    }
  });
});

ul li {
  display: inline-block;
}

.btn-decorations .btn-color {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  position: relative;
}

.btn-color-blue {
  background-color: blue;
}

.btn-color-red {
  background-color: red;
}

.btn-color-black {
  background-color: black;
}

.on {
  border: 3px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p id="editor" contenteditable="true">
    <font><strike><b>This is me.</b></strike></font> Some test text for you to select</p>
</div>
<div class="btn-area btn-area-center">
  <ul class="btn-decorations">
    <li>
      <button type="button" class="btn-ic on" id="addBold">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
                                            <g id="ic-bold" class="ic-bold" transform="translate(-5.5 -3.5)">
                                                <path id="path-1" class="path-1" data-name="path-1" d="M6,4h7.333A3.844,3.844,0,0,1,17,8a3.844,3.844,0,0,1-3.667,4H6Z" transform="translate(0)" fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
                                                <path id="path-2" class="path-2" data-name="path-2" d="M6,12h8.308A3.855,3.855,0,0,1,18,16a3.855,3.855,0,0,1-3.692,4H6Z" transform="translate(0)" fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
                                            </g>
                                        </svg>
                                    </button>
    </li>
    <li>
      <button type="button" class="btn-ic on" id="addStrike">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12.5" height="16.5" viewBox="0 0 12.5 16.5">
 <!-- More SVG Code Here -->
                                    </button>
    </li>
    <li>
      <button type="button" id="addColorBlack" class="btn-add-color on">
 <!-- More Button Code Here -->
                                    </button>
    </li>
    <li>
      <button type="button" id="addColorBlue" class="btn-add-color">
 <!-- More Button Code Here -->
                                    </button>
    </li>
    <li>
      <button type="button" id="addColorRed" class="btn-add-color">
 <!-- More Button Code Here -->
                                    </button>
    </li>
  </ul>
</div>

This elaborates on the solution provided in How to detect when a child-element of a contenteditable DIV is edited via keyboard?

In case of arrow key input, it is essential to verify if the parent element is P. If not, an iteration through each parent element is required to determine the applied elements on the Text Node.

Upon identifying these elements, appropriate buttons can be highlighted accordingly.

Identifying stylized text in contenteditable while navigating with arrow keys

Answer №1

Similar questions

Interact with scrollable tabs on your mobile device with ease

Choosing between Ajax and Websockets for sending small amounts of dataOR

Is it possible to use CSS and HTML to rotate a cube and expand its sides?

Axios delivers the index.html data to the front end of a React.js application

AngularJS allows for setting the rate value using the jQuery Raty plugin

Adding images to HTML using JavaScript below existing images

When you hover over it, the text moves above the background content

What is the best way to break a single line into multiple lines when working in VS code?

Transforming a CSV file into JSON format using Gatsbyjs

creating a dynamic bounce animation using jqueryui and svg

Create a visual layout showcasing a unique combination of images and text using div elements in

Populating the table with data through a repetitive process

What is the best way to ensure these 2 divs are aligned vertically in the provided html (starting at the same vertical level)?

Javascript textbox and submit button

On mobile devices, the alignment of text in Bootstrap doesn't appear as intended

Is it possible to invoke a server-side Groovy object method from client-side JavaScript using AJAX?

Can JS variables be recycled in any manner?

The client.postMessage() function in a service worker is not being recognized by the onmessage handler within an AngularJS controller

Unable to select div element by clicking on the text

The Chrome browser allows interaction between two separate divs, where a button located in one div can impact