소스 검색

[notebook] Extract markdown to a separate snippet type

Johan Ahlen 10 년 전
부모
커밋
cfad3a0

+ 4 - 0
desktop/conf/pseudo-distributed.ini.tmpl

@@ -577,6 +577,10 @@
       name=Text
       interface=text
 
+    [[[markdown]]]
+      name=Markdown
+      interface=text
+
     # [[[sparksql]]]
     #   name=SparkSql
     #   interface=hiveserver2

+ 0 - 1
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -146,7 +146,6 @@
     self.id = ko.observable(typeof snippet.id != "undefined" && snippet.id != null ? snippet.id : UUID());
     self.name = ko.observable(typeof snippet.name != "undefined" && snippet.name != null ? snippet.name : '');
     self.type = ko.observable(typeof snippet.type != "undefined" && snippet.type != null ? snippet.type : 'hive');
-    self.subtype = ko.observable(typeof snippet.subtype != "undefined" && snippet.subtype != null ? snippet.subtype : '');
 
     //Ace stuff
     self.ace = ko.observable(null);

+ 33 - 32
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -372,10 +372,6 @@ from desktop.views import _ko
           </ul>
         </div>
 
-        <label data-bind="visible: type() == 'text' && $root.isEditing()" class="checkbox inline" style="margin-top: -6px"><input type="checkbox" data-bind="checked: $data.subtype" /> Markdown</label>
-
-        <span data-bind="visible: type() == 'text'">&nbsp;</span>
-
         <span data-bind="editable: name, editableOptions: {enabled: $root.isEditing(), placement: 'right'}"></span>
 
         <div class="hover-actions inline pull-right" style="font-size: 15px;">
@@ -390,8 +386,9 @@ from desktop.views import _ko
       <div>
         <div style="float: left; width: 50%">
           <div class="snippet-body" style="position: relative; z-index: 90;">
-            <!-- ko template: { if: ['text', 'jar', 'py'].indexOf(type()) == -1, name: 'code-editor-snippet-body' } --><!-- /ko -->
+            <!-- ko template: { if: ['text', 'jar', 'py', 'markdown'].indexOf(type()) == -1, name: 'code-editor-snippet-body' } --><!-- /ko -->
             <!-- ko template: { if: type() == 'text', name: 'text-snippet-body' } --><!-- /ko -->
+            <!-- ko template: { if: type() == 'markdown', name: 'markdown-snippet-body' } --><!-- /ko -->
             <!-- ko template: { if: type() == 'jar' || type() == 'py', name: 'executable-snippet-body' } --><!-- /ko -->
           </div>
         </div>
@@ -496,7 +493,7 @@ from desktop.views import _ko
       <div class="ace-editor" data-bind="attr: { id: id() }, delayedOverflow, aceEditor: {
           snippet: $data,
           openIt: '${ _ko("Alt or Ctrl + Click to open it") }'
-          }"></div>
+        }"></div>
       </div>
     <div class="clearfix"></div>
     <ul data-bind="foreach: variables" class="unstyled inline">
@@ -688,29 +685,29 @@ from desktop.views import _ko
 </script>
 
 <script type="text/html" id="text-snippet-body">
-  <!-- ko ifnot: subtype() -->
   <div data-bind="attr:{'id': 'editor_' + id()}, html: statement_raw, value: statement_raw, medium: {}" data-placeHolder="${ _('Type your text here, select some text to format it') }" class="text-snippet"></div>
+</script>
+
+<script type="text/html" id="markdown-snippet-body">
+  <!-- ko if: $root.isEditing() -->
+  <div class="row-fluid">
+    <div class="span6">
+      <div class="ace-editor" data-bind="attr: { id: id() }, aceEditor: {
+        snippet: $data,
+        updateOnInput: true
+      }"></div>
+    </div>
+    <div class="span6">
+      <div data-bind="html: renderMarkdown(statement_raw(), id()), attr: {'id': 'liveMD'+id()}"></div>
+    </div>
+  </div>
   <!-- /ko -->
-  <!-- ko if: subtype() -->
-    <!-- ko if: $root.isEditing() -->
-      <div class="row-fluid">
-        <div class="span6">
-          <div class="ace-editor" data-bind="attr: { id: id() }, aceEditor: {
-              snippet: $data,
-              updateOnInput: true
-            }"></div>
-        </div>
-        <div class="span6">
-          <div data-bind="html: renderMarkdown(statement_raw(), id()), attr: {'id': 'liveMD'+id()}"></div>
-        </div>
-      </div>
-    <!-- /ko -->
-    <!-- ko ifnot: $root.isEditing() -->
-      <div data-bind="html: renderMarkdown(statement_raw(), id())"></div>
-    <!-- /ko -->
+  <!-- ko ifnot: $root.isEditing() -->
+  <div data-bind="html: renderMarkdown(statement_raw(), id())"></div>
   <!-- /ko -->
 </script>
 
+
 <script type="text/html" id="executable-snippet-body">
   <div data-bind="verticalSlide: codeVisible" style="padding:10px;">
     <form class="form-horizontal">
@@ -1452,8 +1449,13 @@ from desktop.views import _ko
           snippetImage: '${ static("spark/art/icon_spark_48.png") }'
         },
         text: {
-          placeholder: '${ _('Type your markdown here') }',
-          aceMode: 'markdown',
+          placeHolder: '${ _('Type your text here') }',
+          aceMode: 'ace/mode/text',
+          snippetIcon: 'fa-header'
+        },
+        markdown: {
+          placeHolder: '${ _('Type your markdown here') }',
+          aceMode: 'ace/mode/markdown',
           snippetIcon: 'fa-header'
         }
       }
@@ -1503,12 +1505,6 @@ from desktop.views import _ko
           hideHoverMsg();
         }
 
-        function addMarkdown (content) {
-          var snip = viewModel.notebooks()[0].addSnippet({type: "text", result: {}}, true);
-          snip.subtype(true);
-          snip.statement_raw(content);
-        }
-
         function addAce (content, snippetType) {
           var snip = viewModel.notebooks()[0].addSnippet({type: snippetType, result: {}}, true);
           snip.statement_raw(content);
@@ -1524,6 +1520,11 @@ from desktop.views import _ko
           }, 100);
         }
 
+        function addMarkdown (content) {
+          var snip = viewModel.notebooks()[0].addSnippet({type: "markdown", result: {}}, true);
+          snip.statement_raw(content);
+        }
+
         function addPySpark (content) {
           addAce(content, "pyspark");
         }