support for full screen editing of inline strings

editor/calculator.ts

@@ -1237,7 +1237,9 @@ module TDev
 
         private inlineEditString(l:AST.Literal)
         {
-            var res = HTML.mkAutoExpandingTextArea(true)
+            var opts : HTML.AutoExpandingTextAreaOptions = { showDismiss: true };
+            if (Browser.isDesktop && TheEditor.widgetEnabled("stringEditFullScreen")) opts.editFullScreenAsync = (t) => EditorHost.editFullScreenAsync('', t);
+            var res = HTML.mkAutoExpandingTextArea(opts)
             res.div.className += " calcStringEdit";
             res.textarea.value = l.data;
             res.div.id = "stringEdit";

editor/editor.ts

@@ -1179,6 +1179,7 @@ module TDev
             scriptPropertiesInstrumentation: 1,
             scriptPropertiesData: 1,
             wallLogsButton: 1,
+            stringEditFullScreen: 1,
             // language
             async: 1,
             testAction: 1,

rt/html.ts

@@ -826,13 +826,42 @@ module TDev.HTML {
         return r;
     }
 
-    export function mkAutoExpandingTextArea(showDismiss = false)
+    export interface AutoExpandingTextAreaOptions {
+        showDismiss?: boolean;
+        editFullScreenAsync?: (text: string) => Promise; // string
+    }
+
+    export interface AutoExpandingTextArea {
+        div: HTMLElement;
+        textarea: HTMLTextAreaElement;
+        update: () => void;
+        onUpdate: () => void;
+        dismiss: HTMLElement;
+        onDismiss: () => void;
+        fullScreen: HTMLElement;
+    }
+
+    export function mkAutoExpandingTextArea(options: AutoExpandingTextAreaOptions = {}): AutoExpandingTextArea
     {
         var ta = HTML.mkTextArea();
         var pre = document.createElement("pre");
-        var dismiss = showDismiss ? div('close-round-button', HTML.mkImg("svg:check,black")).withClick(() => {
-          if(r.onDismiss) r.onDismiss();
-        }) : null
+        var dismiss: HTMLElement;
+        var fullScreen: HTMLElement;
+        var btns: HTMLElement;
+        if (options.showDismiss || options.editFullScreenAsync) {
+            btns = div('close-round-buttons');
+            if (options.showDismiss)
+                btns.appendChild(dismiss = div('',HTML.mkImg("svg:check,black")).withClick(() => {
+                    if (r.onDismiss) r.onDismiss();
+                }));
+            if (options.editFullScreenAsync)
+                btns.appendChild(fullScreen = div('',HTML.mkImg('svg:expand,black')).withClick(() => {
+                    options.editFullScreenAsync(ta.value).done(value => {
+                        ta.value = value;
+                        if (r.onDismiss) r.onDismiss();
+                    })
+                }));
+        }
         var content = span(null, null)
         pre.setChildren([content, mkBr()])
         var update = () => {
@@ -841,14 +870,15 @@ module TDev.HTML {
         }
         Util.onInputChange(ta, update)
         var r = {
-          div: div("expandingTextAreaContainer", pre, ta, dismiss),
+          div: div("expandingTextAreaContainer", pre, ta, btns),
           textarea: ta,
           update: update,
           onUpdate: () => {},
           dismiss: dismiss,
-          onDismiss: () => {},
+          onDismiss: () => { },
+          fullScreen: fullScreen,
         }
-        return r
+        return r;
     }
 
     export function fixWp8Links(...elts:HTMLElement[])

www/default.css

@@ -1229,15 +1229,19 @@ input[data-invalid^="yes"]
   font-size: 1.3em;
 }
 
-.close-round-button {
+.close-round-buttons {
   position: absolute;
   top: 0.2em;
   right: 0.2em;
+}
+
+.close-round-buttons div {
   width: 1.5em;
   height: 1.5em;
   margin-left: 0.5em;
   background: white;
   border-radius: 50%;
+  float:right;
 }
 
 /*