Feature: Allow users custom configuration for editor.

1 files changed, 130 insertions, 133 deletions

diff --git a/gn2/wqflask/templates/gn_editor.html b/gn2/wqflask/templates/gn_editor.html
index c957f6aa..ab587715 100644
--- a/gn2/wqflask/templates/gn_editor.html
+++ b/gn2/wqflask/templates/gn_editor.html
@@ -9,46 +9,39 @@
 {% block search %}{% endblock %}
 {% block content %}
 <section class="container-fluid">
-    <header class="row">
-<nav class="navbar-inverse">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <a class="navbar-brand" href="#"><strong>GN Editor<strong></a>
-    </div>
-    <div >
-      <ul class="nav navbar-nav navbar-right">
-        <li><a href="#">Commit</a></li>
-	<li><a href="#">Refresh</a></li>
-	<li><a href="#">Help</a></li>
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Settings <span class="caret"></span></a>
-          <ul class="dropdown-menu">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>           
+  <header class="row">
+    <nav class="navbar-inverse">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <a class="navbar-brand" href="#"><strong>GN Editor<strong></a>
+        </div>
+        <div >
+          <ul class="nav navbar-nav navbar-right">
+            <li><a href="#">Commit</a></li>
+            <li><a href="#" hx-get="/editor/commit" hx-target="#output" hx-trigger="click" hx-swap="innerHTML"  >Settings </a></li>
+            <li><a href="#">Help</a></li>
           </ul>
-        </li>
-      </ul>
+        </div>
+      </div>
+    </nav>
+
+  </header>
+
+  <div>
+    <div class="row">
+      <section class="col-sm-6" id="editor" style="height:100vh">
+
+      </section>
+      <section class="col-sm-6">
+        <div class="row">
+          <section class="col-sm-10 col-sm-offset-1" id="output" style="height:100vh;overflow-y:scroll" id="swap">
+            Tristique nulla aliquet enim tortor, at auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci, a scelerisque! Laoreet suspendisse interdum consectetur libero.
+          </section>
+        </div>
+
+      </section>
     </div>
   </div>
-</nav>
-    
-    </header>
-
-    <div>
-      <div class="row">
-	<section class="col-sm-6" id="editor" style="height:100vh">
-
-	</section>
-	<section class="col-sm-6">
-	  <div class="row">
-	    <section class="col-sm-10 col-sm-offset-1" id="output" style="height:100vh;overflow-y:scroll">
-	      	  Tristique nulla aliquet enim tortor, at auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci, a scelerisque! Laoreet suspendisse interdum consectetur libero.
-	    </section>
-	  </div>
-
-	</section>
-      </div>      
-    </div>    
 </section>
 
 {% endblock %}
@@ -60,105 +53,109 @@
 
 <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='htmx.min.js') }}"></script>
 
- 
+
 <script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/marked-highlight/lib/index.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked-highlight/lib/index.umd.js"></script>
 <script type="text/javascript">
 
- document.addEventListener('DOMContentLoaded', function() {
-     $('footer').hide()
-  var editor_configurations = {
-  selectionStyle: 'line',// "line"|"text"
-  highlightActiveLine: true, // boolean
-  highlightSelectedWord: true, // boolean
-  readOnly: false, // boolean: true if read only
-  cursorStyle: 'ace', // "ace"|"slim"|"smooth"|"wide"
-  mergeUndoDeltas: true, // false|true|"always"
-  behavioursEnabled: true, // boolean: true if enable custom behaviours
-  wrapBehavioursEnabled: true, // boolean
-  autoScrollEditorIntoView: undefined, // boolean: this is needed if editor is inside scrollable 
-  keyboardHandler: null, // function: handle custom keyboard events
-  
-  // renderer options
-  animatedScroll: false, // boolean: true if scroll should be animated
-  displayIndentGuides: false, // boolean: true if the indent should be shown. See 'showInvisibles'
-  showInvisibles: false, // boolean -> displayIndentGuides: true if show the invisible tabs/spaces in indents
-  showPrintMargin: true, // boolean: true if show the vertical print margin
-  printMarginColumn: 80, // number: number of columns for vertical print margin
-  printMargin: undefined, // boolean | number: showPrintMargin | printMarginColumn
-  showGutter: true, // boolean: true if show line gutter
-  fadeFoldWidgets: false, // boolean: true if the fold lines should be faded
-  showFoldWidgets: true, // boolean: true if the fold lines should be shown ?
-  showLineNumbers: true,
-  highlightGutterLine: false, // boolean: true if the gutter line should be highlighted
-  hScrollBarAlwaysVisible: false, // boolean: true if the horizontal scroll bar should be shown regardless
-  vScrollBarAlwaysVisible: false, // boolean: true if the vertical scroll bar should be shown regardless
-  fontSize: 16, // number | string: set the font size to this many pixels
-  fontFamily: undefined, // string: set the font-family css value
-  maxLines: undefined, // number: set the maximum lines possible. This will make the editor height changes
-  minLines: undefined, // number: set the minimum lines possible. This will make the editor height changes
-  maxPixelHeight: 0, // number -> maxLines: set the maximum height in pixel, when 'maxLines' is defined. 
-  scrollPastEnd: 0, // number -> !maxLines: if positive, user can scroll pass the last line and go n * editorHeight more distance 
-  fixedWidthGutter: false, // boolean: true if the gutter should be fixed width
-  theme: "ace/theme/dracula", // theme string from ace/theme or custom?
-
-  // mouseHandler options
-  scrollSpeed: 2, // number: the scroll speed index
-  dragDelay: 0, // number: the drag delay before drag starts. it's 150ms for mac by default 
-  dragEnabled: true, // boolean: enable dragging
-  focusTimout: 0, // number: the focus delay before focus starts.
-  tooltipFollowsMouse: true, // boolean: true if the gutter tooltip should follow mouse
-
-  // session options
-  firstLineNumber: 1, // number: the line number in first line
-  overwrite: false, // boolean
-  newLineMode: 'auto', // "auto" | "unix" | "windows"
-  useWorker: true, // boolean: true if use web worker for loading scripts
-  useSoftTabs: true, // boolean: true if we want to use spaces than tabs
-  tabSize: 4, // number
-  wrap: true, // boolean | string | number: true/'free' means wrap instead of horizontal scroll, false/'off' means horizontal scroll instead of wrap, and number means number of column before wrap. -1 means wrap at print margin
-  indentedSoftWrap: true, // boolean
-  foldStyle: 'markbegin', // enum: 'manual'/'markbegin'/'markbeginend'.
-  mode: 'ace/mode/markdown'  	 
-}
-
-var editor = ace.edit("editor");
-editor.setOptions(editor_configurations);
-     editor.container.style.resize = "horizontal";
-     function updatePreview(){
-	 const {markedHighlight} = globalThis.markedHighlight;
-	 let new_marked = new marked.Marked(
-                 markedHighlight({
-                  langPrefix: 'hljs language-',
-                  highlight(code, lang) {
-      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-      return hljs.highlight(code, { language }).value;
-    }
-  })
-	 );
-	   new_marked.use({
-          pedantic: false,
-          gfm: true,
-           });
-
-	 previewContent = document.querySelector("#output");
-        var markdownContent = editor.getValue();
-        var htmlContent = new_marked.parse(markdownContent)
-         previewContent.innerHTML = htmlContent;		 
-     }     
-
-     editor.getSession().on("change", function(e){
-	 updatePreview()
-     })
-
-     
-
-     
- });
-
- 
-  
+  document.addEventListener('DOMContentLoaded', function() {
+      $('footer').hide()
+      var editor_configurations = {
+          selectionStyle: 'line',// "line"|"text"
+          highlightActiveLine: true, // boolean
+          highlightSelectedWord: true, // boolean
+          readOnly: false, // boolean: true if read only
+          cursorStyle: 'ace', // "ace"|"slim"|"smooth"|"wide"
+          mergeUndoDeltas: true, // false|true|"always"
+          behavioursEnabled: true, // boolean: true if enable custom behaviours
+          wrapBehavioursEnabled: true, // boolean
+          autoScrollEditorIntoView: undefined, // boolean: this is needed if editor is inside scrollable
+          keyboardHandler: null, // function: handle custom keyboard events
+
+          // renderer options
+          animatedScroll: false, // boolean: true if scroll should be animated
+          displayIndentGuides: false, // boolean: true if the indent should be shown. See 'showInvisibles'
+          showInvisibles: false, // boolean -> displayIndentGuides: true if show the invisible tabs/spaces in indents
+          showPrintMargin: true, // boolean: true if show the vertical print margin
+          printMarginColumn: 80, // number: number of columns for vertical print margin
+          printMargin: undefined, // boolean | number: showPrintMargin | printMarginColumn
+          showGutter: true, // boolean: true if show line gutter
+          fadeFoldWidgets: false, // boolean: true if the fold lines should be faded
+          showFoldWidgets: true, // boolean: true if the fold lines should be shown ?
+          showLineNumbers: true,
+          highlightGutterLine: false, // boolean: true if the gutter line should be highlighted
+          hScrollBarAlwaysVisible: false, // boolean: true if the horizontal scroll bar should be shown regardless
+          vScrollBarAlwaysVisible: false, // boolean: true if the vertical scroll bar should be shown regardless
+          fontSize: 16, // number | string: set the font size to this many pixels
+          fontFamily: undefined, // string: set the font-family css value
+          maxLines: undefined, // number: set the maximum lines possible. This will make the editor height changes
+          minLines: undefined, // number: set the minimum lines possible. This will make the editor height changes
+          maxPixelHeight: 0, // number -> maxLines: set the maximum height in pixel, when 'maxLines' is defined.
+          scrollPastEnd: 0, // number -> !maxLines: if positive, user can scroll pass the last line and go n * editorHeight more distance
+          fixedWidthGutter: false, // boolean: true if the gutter should be fixed width
+          theme: "ace/theme/dracula", // theme string from ace/theme or custom?
+
+          // mouseHandler options
+          scrollSpeed: 2, // number: the scroll speed index
+          dragDelay: 0, // number: the drag delay before drag starts. it's 150ms for mac by default
+          dragEnabled: true, // boolean: enable dragging
+          focusTimout: 0, // number: the focus delay before focus starts.
+          tooltipFollowsMouse: true, // boolean: true if the gutter tooltip should follow mouse
+
+          // session options
+          firstLineNumber: 1, // number: the line number in first line
+          overwrite: false, // boolean
+          newLineMode: 'auto', // "auto" | "unix" | "windows"
+          useWorker: true, // boolean: true if use web worker for loading scripts
+          useSoftTabs: true, // boolean: true if we want to use spaces than tabs
+          tabSize: 4, // number
+          wrap: true, // boolean | string | number: true/'free' means wrap instead of horizontal scroll, false/'off' means horizontal scroll instead of wrap, and number means number of column before wrap. -1 means wrap at print margin
+          indentedSoftWrap: true, // boolean
+          foldStyle: 'markbegin', // enum: 'manual'/'markbegin'/'markbeginend'.
+          mode: 'ace/mode/markdown'
+
+          document.querySelector("#output").addEventListener("updateEditor", function(event){
+              console.log(event.detail.payload)
+              console.log(event)
+              editor.setOptions({
+                  ...editor_configurations,
+                  ...event.detail.payload
+              })
+              editor.renderer.updateFull();
+          })
+
+          var editor = ace.edit("editor");
+          editor.setOptions(editor_configurations);
+          editor.container.style.resize = "horizontal";
+          function updatePreview(){
+              const {markedHighlight} = globalThis.markedHighlight;
+              let new_marked = new marked.Marked(
+                  markedHighlight({
+                      langPrefix: 'hljs language-',
+                      highlight(code, lang) {
+                          const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+                          return hljs.highlight(code, { language }).value;
+                      }}));
+              new_marked.use({
+                  pedantic: false,
+                  gfm: true,
+              });
+
+              previewContent = document.querySelector("#output");
+              var markdownContent = editor.getValue();
+              var htmlContent = new_marked.parse(markdownContent)
+              previewContent.innerHTML = htmlContent;
+          }
+
+          editor.getSession().on("change", function(e){
+              updatePreview()
+          })
+
+
+      });
+
+
+
 </script>
 {% endblock %}
-