height problme solved

Client/WebServer/css/docs.css

@@ -111,3 +111,16 @@
   .docs-h5 {font-weight:400; font-size:140%; margin-top: 35px; font-style:italic;}
 
   .docs-h6 {font-weight:400; font-size:130%; margin-top: 35px; font-style:italic;}
+
+  .docs-text-area {
+    font: 400 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
+    resize: none;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    overflow:hidden;
+    background-color: #fdfdfd;
+    color: #111; 
+    width: 100%;
+    height: 25%;
+  }

Projects/Superalgos/UI/Spaces/Docs-Space/DocsSpace.js

@@ -28,6 +28,9 @@ function newSuperalgosDocSpace() {
     let closingEventSubscriptionId
     let textSelection = ''
     let htmlSelection = ''
+    let selectedParagraph
+    let selectedParagraphData = ''
+    let selectedParagraphHeight = 0
 
     return thisObject
 
@@ -42,7 +45,7 @@ function newSuperalgosDocSpace() {
         setUpContextMenu()
         isInitialized = true
 
-        function setUpContextMenu() {    
+        function setUpContextMenu() {
             window.contextMenu = {
                 editText: editText,
                 editHTML: editHTML,
@@ -53,8 +56,24 @@ function newSuperalgosDocSpace() {
             }
 
             function editText() {
-                console.log(textSelection)
                 contextMenuForceOutClick()
+                showHTMLTextArea()
+
+                function showHTMLTextArea() {
+                    if (selectedParagraph === undefined) { return }
+
+                    let textArea = document.createElement('textarea');
+                    textArea.id = "textArea";
+                    textArea.spellcheck = false;
+                    textArea.className = "docs-text-area"
+                    textArea.style.height = selectedParagraphHeight
+                    textArea.value = selectedParagraphData
+                    selectedParagraph.innerHTML = ""
+                    selectedParagraph.appendChild(textArea)
+                    textArea.style.display = 'block'
+                    textArea.focus()
+                    EDITOR_ON_FOCUS = true
+                }
             }
 
             function editHTML() {
@@ -204,7 +223,7 @@ function newSuperalgosDocSpace() {
         })
     }
 
-    function contextMenuForceOutClick(){
+    function contextMenuForceOutClick() {
         const outClick = document.getElementById('docsDiv')
         const menu = document.getElementById('menu')
         menu.classList.remove('show')
@@ -219,6 +238,9 @@ function newSuperalgosDocSpace() {
         }
         else if (window.getSelection) {
             var selection = window.getSelection()
+            selectedParagraphData = selection.baseNode.data
+            selectedParagraph = selection.baseNode.parentNode
+            selectedParagraphHeight = selection.baseNode.parentNode.getClientRects()[0].height
             if (selection.rangeCount > 0) {
                 range = selection.getRangeAt(0)
                 var clonedSelection = range.cloneContents()