From 8cf92c5a69e11cbcb0cef03ceb3b7a0de76e7e87 Mon Sep 17 00:00:00 2001
From: Monica Mateiu <monica.mateiu@gmail.com>
Date: Mon, 25 Mar 2024 09:23:13 +0000
Subject: [PATCH] [WIP] add required attribute to trix-editor

---
 assets/index.html                        | 28 +++++++++++++++++++++++-
 src/trix/elements/trix_editor_element.js |  9 ++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)
diff --git a/assets/index.html b/assets/index.html
index e4cf73b85..2ed400284 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -17,6 +17,18 @@
         max-width: 700px;
       }
 
+      div {
+        margin-bottom: 1rem;
+
+        label {
+          display: block;
+        }
+
+        textarea {
+          width: 100%;
+        }
+      }
+
       #output {
         margin: 1rem 0 0;
       }
@@ -72,7 +84,21 @@
   </head>
   <body>
     <main>
-      <trix-editor autofocus class="trix-content" input="input"></trix-editor>
+      <form>
+        <h1>Form with required textarea field</h1>
+        <div>
+          <trix-editor autofocus required class="trix-content" input="input"></trix-editor>
+        </div>
+
+        <div>
+          <label for="comments">Your comments</label>
+          <textarea id="comments" required></textarea>
+        </div>
+
+        <div>
+          <input type="submit" />
+        </div>
+      </form>
       <details id="output">
         <summary>Output</summary>
         <textarea readonly id="input"></textarea>
diff --git a/src/trix/elements/trix_editor_element.js b/src/trix/elements/trix_editor_element.js
index 33877cc1a..9ed5cdbf2 100644
--- a/src/trix/elements/trix_editor_element.js
+++ b/src/trix/elements/trix_editor_element.js
@@ -25,6 +25,14 @@ const autofocus = function(element) {
   }
 }
 
+const makeRequired = function(element) {
+  if (element.hasAttribute("required")) {
+    // element.inputElement.removeAttribute("readonly")
+    element.inputElement.required = true
+    console.log("input", element.inputElement)
+  }
+}
+
 const makeEditable = function(element) {
   if (element.hasAttribute("contenteditable")) {
     return
@@ -257,6 +265,7 @@ export default class TrixEditorElement extends HTMLElement {
   connectedCallback() {
     if (!this.hasAttribute("data-trix-internal")) {
       makeEditable(this)
+      makeRequired(this)
       addAccessibilityRole(this)
       ensureAriaLabel(this)
 
