Changing editable content from true to false using Javascript

Question

So I'm trying to override or nullify contenteditable="true" with js because Notion Enhancer as far as I know does not have the option to add html files. They do have the option of adding css and client side javascript, so I'm trying to turn the contenteditable false using js. I've tried many options, but nothing seems to be working. Does anyone have any ideas on how to turn it false through js without touching the HTML?

This is the html markup.

  <div style="display: flex; width: 100%; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Helvetica, &quot;Apple Color Emoji&quot;, Arial, sans-serif, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-weight: 600; font-size: 1.5em; line-height: 1.3; color: inherit; fill: inherit;">
    <div contenteditable="true" spellcheck="true" placeholder="Heading 2" data-root="true" class="notranslate" style="max-width: 100%; width: 100%; white-space: pre-wrap; word-break: break-word; caret-color: rgb(55, 53, 47); padding: 3px 2px;">Monday</div>
  </div>
</div>

As I said, the HTML is non-negotiable, so everything would have to be through css or js. And I'd like to make the contenteditable false to change the padding around a heading.

Answer 1

So, the issue here has nothing to do with the contentEditable attribute.

The issue is that the div tag in the html code contains a style attribute which already specifies values for padding. These values specified in the html code have a higher priority than specifications made in the css.

Possible Solution 1:

Use the !important marker in the css to have the definitions in the css overwrite the padding settings made in the code for that rule:

.notion-sub_header-block .notranslate {
  background-color: #fed2e4;
  width: auto;
  position: relative;
  padding:30px !important;
}

Fiddle for Solution 1

• See Documentation on Specifity to learn about !important

Possible Solution 2:

Use JavaScript to remove the padding from the style attribute from the html tag.

var editableElements = document.querySelectorAll("[class=notranslate");
    
for (var i = 0; i < editableElements.length; ++i) {
  editableElements[i].style.padding = "";
}

Fiddle for Solution 2

Solution 1 is more elegant in this context because there's no need for JavaScript.