MRTextInputEntity
The text area element that simulates the behavior of an HTML tag, allowing for multiline text input and display. Inherits from MRTextInputEntity, which in turn extends MRTextEntity.</p> <p><strong>Kind</strong>: global class<br /> <strong>Extends</strong>: <code>MRTextInputEntity</code></p> <ul> <li><a href="#MRTextAreaEntity">MRTextAreaEntity</a> ⇐ <code>MRTextInputEntity</code> <ul> <li><a href="#MRTextAreaEntity+MRTextAreaEntity">.MRTextAreaEntity</a> <ul> <li><a href="#new_MRTextAreaEntity+MRTextAreaEntity_new">new exports.MRTextAreaEntity()</a></li> </ul></li> <li><a href="#MRTextAreaEntity+createHiddenInputElement">.createHiddenInputElement()</a></li> <li><a href="#MRTextAreaEntity+fillInHiddenInputElementWithUserData">.fillInHiddenInputElementWithUserData()</a></li> <li><a href="#MRTextAreaEntity+hasTextSubsetForVerticalScrolling">.hasTextSubsetForVerticalScrolling()</a> ⇒ <code>boolean</code></li> <li><a href="#MRTextAreaEntity+hasTextSubsetForHorizontalScrolling">.hasTextSubsetForHorizontalScrolling()</a> ⇒ <code>boolean</code></li> <li><a href="#MRTextAreaEntity+updateTextDisplay">.updateTextDisplay(fromCursorMove)</a></li> <li><a href="#MRTextAreaEntity+handleKeydown">.handleKeydown(event)</a></li> </ul></li> </ul> <p><a name="MRTextAreaEntity+MRTextAreaEntity"></a></p> <h3 id="mrtextareaentitymrtextareaentity"><a href="#mrtextareaentitymrtextareaentity" class="anchor" aria-hidden="true"></a>mrTextAreaEntity.MRTextAreaEntity</h3> <p><strong>Kind</strong>: instance class of <a href="#MRTextAreaEntity"><code>MRTextAreaEntity</code></a><br /> <a name="new_MRTextAreaEntity+MRTextAreaEntity_new"></a></p> <h4 id="new-exportsmrtextareaentity"><a href="#new-exportsmrtextareaentity" class="anchor" aria-hidden="true"></a>new exports.MRTextAreaEntity()</h4> <p>Constructor for the MRTextInputEntity entity component.</p> <p><a name="MRTextAreaEntity+createHiddenInputElement"></a></p> <h3 id="mrtextareaentitycreatehiddeninputelement"><a href="#mrtextareaentitycreatehiddeninputelement" class="anchor" aria-hidden="true"></a>mrTextAreaEntity.createHiddenInputElement()</h3> <p>Called by connected to make sure the hiddenInput dom element is created as expected.</p> <p><strong>Kind</strong>: instance method of <a href="#MRTextAreaEntity"><code>MRTextAreaEntity</code></a><br /> <a name="MRTextAreaEntity+fillInHiddenInputElementWithUserData"></a></p> <h3 id="mrtextareaentityfillinhiddeninputelementwithuserdata"><a href="#mrtextareaentityfillinhiddeninputelementwithuserdata" class="anchor" aria-hidden="true"></a>mrTextAreaEntity.fillInHiddenInputElementWithUserData()</h3> <p>Called by connected after createHiddenInputElement to fill it in with the user’s given attribute information.</p> <p><strong>Kind</strong>: instance method of <a href="#MRTextAreaEntity"><code>MRTextAreaEntity</code></a><br /> <a name="MRTextAreaEntity+hasTextSubsetForVerticalScrolling"></a></p> <h3 id="mrtextareaentityhastextsubsetforverticalscrolling--boolean"><a href="#mrtextareaentityhastextsubsetforverticalscrolling--boolean" class="anchor" aria-hidden="true"></a>mrTextAreaEntity.hasTextSubsetForVerticalScrolling() ⇒ <code>boolean</code></h3> <p>Getter for whether this textinput should handle vertical scrolling or not.</p> <p><strong>Kind</strong>: instance method of <a href="#MRTextAreaEntity"><code>MRTextAreaEntity</code></a><br /> <strong>Returns</strong>: <code>boolean</code> - true if it should be handled, false otherwise<br /> <a name="MRTextAreaEntity+hasTextSubsetForHorizontalScrolling"></a></p> <h3 id="mrtextareaentityhastextsubsetforhorizontalscrolling--boolean"><a href="#mrtextareaentityhastextsubsetforhorizontalscrolling--boolean" class="anchor" aria-hidden="true"></a>mrTextAreaEntity.hasTextSubsetForHorizontalScrolling() ⇒ <code>boolean</code></h3> <p>Getter for whether this textinput should handle horizontal scrolling or not.</p> <p><strong>Kind</strong>: instance method of <a href="#MRTextAreaEntity"><code>MRTextAreaEntity</code></a><br /> <strong>Returns</strong>: <code>boolean</code> - true if it should be handled, false otherwise<br /> <a name="MRTextAreaEntity+updateTextDisplay"></a></p> <h3 id="mrtextareaentityupdatetextdisplayfromcursormove"><a href="#mrtextareaentityupdatetextdisplayfromcursormove" class="anchor" aria-hidden="true"></a>mrTextAreaEntity.updateTextDisplay(fromCursorMove)</h3> <p>Used on event trigger to update the textObj visual based on the hiddenInput DOM element.</p> <p><strong>Kind</strong>: instance method of <a href="#MRTextAreaEntity"><code>MRTextAreaEntity</code></a></p> <table> <thead> <tr class="header"> <th>Param</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr class="odd"> <td>fromCursorMove</td> <td><code>boolean</code></td> <td><code>false</code></td> <td>default set as false if not supplied. Used because we only want to move the visible region if it is not already handled. Since cursor movement already handles that region change, then we only need to update the new text. Otherwise, we also need to scroll and update the new text.</td> </tr> </tbody> </table> <p><a name="MRTextAreaEntity+handleKeydown"></a></p> <h3 id="mrtextareaentityhandlekeydownevent"><a href="#mrtextareaentityhandlekeydownevent" class="anchor" aria-hidden="true"></a>mrTextAreaEntity.handleKeydown(event)</h3> <p>Called by the keydown event trigger. Handles the arrow key movements.</p> <p><strong>Kind</strong>: instance method of <a href="#MRTextAreaEntity"><code>MRTextAreaEntity</code></a></p> <table> <thead> <tr class="header"> <th>Param</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr class="odd"> <td>event</td> <td><code>event</code></td> <td>the keydown event</td> </tr> </tbody> </table> <footer> <p>Found a typo or suggestion for the docs?</p> <p><a href="https://github.com/volumetrics-io/mrjs/edit/main/src/core/entities/MRTextAreaEntity.js">Suggest an edit on GitHub</a> </p> </footer> </div> </main> <script type="text/javascript"> let hamburger_button = document.getElementById('hamburger'); let sidebar = document.getElementById('sidebar'); let dim_layer = document.getElementById('dim_layer'); let js_details = document.getElementById('js-details') let isOpened = false; const hide_sidebar = () => { sidebar.style.transform = "translateX(0%)"; dim_layer.style.opacity = 0; setTimeout(() => { dim_layer.style.display = "none"; }, 300); isOpened = false; document .getElementById("hamburgerSVG") .querySelectorAll(".anim_open") .forEach((i) => i.beginElement()); }; const show_sidebar = () => { sidebar.style.transform = "translateX(100%)"; dim_layer.style.opacity = 1; dim_layer.style.display = "block"; isOpened = true; document .getElementById("hamburgerSVG") .querySelectorAll(".anim_close") .forEach((i) => i.beginElement()); }; dim_layer.addEventListener("click", hide_sidebar); hamburger_button.addEventListener( "click", function () { if (isOpened) { hide_sidebar(); } else { show_sidebar(); } document.getElementById("hamburger").classList.toggle("open"); }, false ); window.addEventListener("resize", () => { if (isOpened) { hide_sidebar(); } }); // Restore the JavaScript API <details> if it was opened console.log(localStorage.getItem("js-details")); if (localStorage.getItem("js-details")) { js_details.setAttribute("open", true); } else { js_details.removeAttribute("open"); } // Restore the <aside> sidebar scroll position . let scrollTop = localStorage.getItem("sidebar-scroll") || 0; sidebar.scrollTop = parseInt(scrollTop, 10); // Store the state before unload window.onbeforeunload = (event) => { localStorage.setItem("sidebar-scroll", sidebar.scrollTop); if (js_details.open) { localStorage.setItem("js-details", true); } else { localStorage.removeItem("js-details"); } }; </script> </body> </html>