Indent text using javascript by pressing a button

Question

on my website, there are 2 buttons. one button is to indent text to the left and the other button is to indent text to the right. what I am trying to achieve is that whenever I press the indent left or right button, currently selected (on focus) text should move left or right (depending on what button I press). at the same time, I want the font size of that text to go down by one level, so when compared to the text above, it's smaller to the text above.

// global variable
let onFocus = null;

// this function
function focusedText(event) {
  onFocus = event.target;
}

function init() {
  const newLineButton = document.querySelector('#newLine');
  newLineButton.addEventListener("click", newLine);
  newLine();
  document.querySelector("#printButton").addEventListener("click", printPage)
}

function newLine() {
  const newLine = document.createElement("p");
  newLine.setAttribute("contenteditable", true);
  newLine.addEventListener("keydown", handleKeyDown)
  newLine.addEventListener("focus", focusedText)
  newLine.classList.add("textLine")
  const parent = document.querySelector('#textBox');
  parent.appendChild(newLine);
  newLine.focus();
}

function handleKeyDown(event) {
  if (event.which === 13) {
    event.preventDefault();
    newLine();
  }
}
// this runs the init(); function
init();

// this prints the page
function printPage() {
  window.print();
}
// this fuction changes the text size
function textSize(selectTag) {
  const listValue = selectTag.options[selectTag.selectedIndex].value;
  onFocus.style.fontSize = listValue;
}

* {
  padding-top: 0em;
  padding-bottom: 0em;
  margin-top: 0em;
  margin-bottom: 0em;
}

*:focus {
  outline: 0px solid transparent;
}

body {
  margin: 0;
}

.title {
  font-family: 'Assistant', sans-serif;
  font-size: 2em;
  text-align: center;
  text-transform: uppercase;
  color: white;
  background: #6a0dad;
  letter-spacing: 0.20em;
}

.navMenu {
  display: flex;
  align-items: stretch;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  justify-content: center;
}

.navMenu button,
#dropDown {
  padding: 0.3em 1.2em;
  margin: 0 0.1em 0.1em 0;
  border: 0.16em solid rgba(255, 255, 255, 0);
  border-radius: 2em;
  box-sizing: border-box;
  font-family: 'Assistant', sans-serif;
  font-weight: bold;
  font-size: 1rem;
  color: white;
  text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
  text-align: center;
  transition: all 0.2s;
  background-color: #6a0dad;
  cursor: pointer;
}

.navMenu button:hover,
#dropDown:hover {
  border-color: white;
}

#dropDown option {
  font-weight: bold;
}

#textBox {
  display: flex;
  justify-content: left;
  width: auto;
  flex-flow: column nowrap;
  font-family: 'Assistant', sans-serif;
}

.textLine {
  color: black;
  width: 100%;
  padding-left: 0.8em;
  padding-right: 0.8em;
  box-sizing: border-box;
  transition: background-color 0.25s;
}

@media screen {
  .textLine:hover {
    background-color: #6a0dad;
    color: white;
  }
}

@media print {
  .navMenu,
  .title {
    display: none;
  }
}

.textLine:empty::before {
  content: "Enter your text here";
  color: grey;
  font-family: 'Assistant', sans-serif;
  pointer-events: none;
}

.textLine:hover:empty::before {
  content: "Enter your text here";
  color: white;
  font-family: 'Assistant', sans-serif;
}

<!DOCTYPE html>
<html>

<head>
  <title>Outline Editing</title>

  <link rel="stylesheet" type="text/css" href="main-css.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <main>
    <h1 class="title">Outline Editing</h1>

    <nav class="navMenu">
      <button type="button" id="indentLeft"><i class="material-icons">format_indent_decrease</i></button>
      <select id="dropDown" onchange="textSize(this);" size="1">
        <option value="" selected disabled hidden>Levels</option>
        <option value="200%">Level 1</option>
        <option value="170%">Level 2</option>
        <option value="150%">Level 3</option>
        <option value="130%">Level 4</option>
        <option value="100%">Level 5</option>
      </select>
      <button type="button" id="newLine">New Line</button>
      <button type="button" id="indentRight"><i class="material-icons">format_indent_increase</i></button>
      <button type="button" id="printButton">Print</button>
    </nav>

    <div id="textBox">
    </div>

    <script src="main.js"></script>
  </main>

</body>

</html>

yea, so if the text is already indented then remove the indentation, if it's not already indented then it does nothing — LPB, Dec 11 '19 at 15:03
you can use `String.trim()` to remove, or `String.concat(' ', str)` to add — felixmosh, Dec 11 '19 at 15:36

score 0 · Accepted Answer · answered Dec 11 '19 at 16:08

0

You could just add "Horizontal Tab" as an HTML entity on your focused text.

First change the <p> to <pre>.

function newLine() {
    const newLine = document.createElement("pre");
    //...
}

Update your init function:

function init() {
    var newLineButton = document.querySelector('#newLine');
    newLineButton.addEventListener("click", newLine);
    newLine();
    document.querySelector("#printButton").addEventListener("click", printPage);

    let indentRight = document.getElementById("indentRight");
    indentRight.addEventListener("click", IndentRight_Click);

    let indentLeft = document.getElementById("indentLeft");
    indentLeft.addEventListener("click", IndentLeft_Click);
}

Then you can add the "Horizontal Tab" on the text that is focused, checking if you have already added:

function IndentRight_Click(event) {
    let horizontalTab = "&#009;";
    let originalHtml = onFocus.innerHTML;
    if (!originalHtml.includes("\t")) onFocus.innerHTML = horizontalTab + originalHtml;
    onFocus.focus();
}

And finally, check for it again on your "Left Indentation":

function IndentLeft_Click(event) {
    var originalHtml = onFocus.innerHTML;
    if (originalHtml.includes("\t")) onFocus.innerHTML = originalHtml.replace("\t", "");
    onFocus.focus();
}

answered Dec 11 '19 at 16:08

FF-

732
9
19

this works, but what can i do so that if i press the indent right button again on an already indented text, it will indent again – LPB Dec 12 '19 at 13:48
also, for some reason, the font style changed – LPB Dec 12 '19 at 13:54
and after clicking the indent button, for some reason, the text cursor appears on the left side of the entered text. – LPB Dec 12 '19 at 14:04
1
For indentation on an already indented text, you need to remove the `if (!originalHtml.includes("\t"))` on the `IndentRight_Click` function and just leave `onFocus.innerHTML = horizontalTab + originalHtml;` on it. The font change is because of the `
```
` nodes. You could "style" it to be more like a `` as before.
```
– FF- Dec 12 '19 at 14:16
what about the fact that the text cursor is starting on the left side of the written text. – LPB Dec 12 '19 at 14:24
1

Sorry about that, you need to add [this function](https://stackoverflow.com/a/3866442/7002366) and on your `focusedText` function, add at the end of it `setEndOfContenteditable(this);`. – FF- Dec 12 '19 at 14:31
also, what is " " – LPB Dec 12 '19 at 14:48
It’s the ascii control character for “Horizontal Tab” – FF- Dec 12 '19 at 15:04

Indent text using javascript by pressing a button

1 Answers1