documentation-editor 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 714e8b811361a5ba5c1bd64cd4d8e0979c83bbd3
-  data.tar.gz: 0980c654431f99c7f1876bbfff26ecda869c2127
+  metadata.gz: 5c1b887bb5ba7cc9014c287d2aa2ed28453c53f4
+  data.tar.gz: b7d916b3011f1837912961c63f48703189fe45c8
 SHA512:
-  metadata.gz: 3a1583330738b2372e5ab055078e8f752ea4fe7166f61f2de1ade9b7bc2b8137e83236c8d79524be554d6c8441a05af93dd6f6b1bd7b12cca7deeb679689216b
-  data.tar.gz: 01cf954b93b72676dcbc105309222e6277cce5e48075c2b03b197b24c9421b4d4f0f3cbffee38f93cf6b758cc9d8d41ea52c503a129c2bfd885865b5b035cd65
+  metadata.gz: 0a2f8125e3fc22d8af168e03d10ed5244e2e309524b0fc45cb254efebf04e55ede5a88934ccf193738607e882de6eb3ae9d7af7184400da17d3bdc07e31960c1
+  data.tar.gz: 4d3d7f39146758c4e62cd2bde32cfc6cff878d87ef69bf1ab4a3fa7a97c8c4bfbf62a763653ca4b480e76da64baaa9945c4d4bae01cf79d16e84f7163dd3ebb7

data/README.md

@@ -9,12 +9,13 @@ The goal of this project is to provide an easy & frictionless way to edit an onl
 ## Features
 
  - Widgets
-   - Text: Full markdown support
+   - Text: full markdown support
    - Callout: info/warning/danger
    - Tables: customizable number of columns & rows
    - Code: code snippet with highlighting
    - Conditions: ability to display some sections based on some query parameters
    - Image: image uploader + ability to store on S3
+   - Buttons: labeled buttons
  - Caching
  - Automatic TOC generation (anchors are automatically generated on each title)
  - Raw edition mode

data/app/assets/javascripts/documentation_editor/pages.js

@@ -61,18 +61,20 @@ angular.module('documentationEditorApp', ['ngFileUpload'])
           data.push(section.content + "\n");
         } else {
           data.push('[block:' + section.type + ']');
-          data.push(JSON.stringify(section.content));
+          data.push(JSON.stringify(section.content, null, 2));
           data.push("[/block]\n");
         }
       });
       return data.join("\n");
     }
 
-    $scope.init = function(id, slug, thumbnailUrl, path) {
+    $scope.init = function(id, slug, thumbnailUrl, path, published_revision_id, last_revision_id) {
       $scope.id = id;
       $scope.slug = slug;
       $scope.path = path;
       $scope.thumbnailUrl = thumbnailUrl;
+      $scope.published_revision_id = published_revision_id;
+      $scope.last_revision_id = last_revision_id;
 
       $http.get($scope.path + '/admin/' + id).then(function(content) {
         $scope.source = content.data.source;
@@ -102,6 +104,9 @@ angular.module('documentationEditorApp', ['ngFileUpload'])
         $scope.sections = $.grep($scope.sections, function(e) { return e.id !== o.data.obj.id });
       } else if (o.type === 'deleteSection') {
         $scope.sections = o.data.sections;
+      } else if (o.type === 'text') {
+        o.model.$setViewValue(o.data);
+        o.model.$render();
       } else if (o.type === 'deleteLanguage' || o.type === 'addLanguage') {
         var index = getIndex(o.data.id);
         var obj = {
@@ -112,6 +117,16 @@ angular.module('documentationEditorApp', ['ngFileUpload'])
           }
         };
         $scope.sections = [].concat($scope.sections.slice(0, index), [obj], $scope.sections.slice(index + 1));
+      } else if (o.type === 'deleteButton' || o.type === 'addButton') {
+        var index = getIndex(o.data.id);
+        var obj = {
+          id: $scope.sections[index].id,
+          type: 'buttonse',
+          content: {
+            buttons: o.data.buttons
+          }
+        };
+        $scope.sections = [].concat($scope.sections.slice(0, index), [obj], $scope.sections.slice(index + 1));
       } else if (o.type === 'deleteColumn' || o.type === 'addColumn' || o.type === 'addRow' || o.type === 'deleteRow') {
         var index = getIndex(o.data.id);
         $scope.sections[index] = {
@@ -218,6 +233,22 @@ angular.module('documentationEditorApp', ['ngFileUpload'])
       });
     };
 
+    $scope.addButtons = function($event, id) {
+      $event.preventDefault();
+      add(id, {
+        id: getNextID(),
+        type: 'buttons',
+        content: {
+          buttons: [
+            {
+              label: 'FIXME',
+              link: 'http://example.org'
+            }
+          ]
+        }
+      });
+    };
+
     $scope.getIntegerIterator = function(v) {
       var a = [];
       for (var i = 0; i < v; ++i) {
@@ -263,15 +294,42 @@ angular.module('documentationEditorApp', ['ngFileUpload'])
       $scope.sections[index].content.codes = [].concat($scope.sections[index].content.codes, [{ language: 'FIXME:language|label', code: '// FIXME' }]);
     };
 
+    $scope.deleteButton = function($event, id, buttonIndex) {
+      $event.preventDefault();
+      var index = getIndex(id);
+      $scope.undoRedo.push({
+        type: 'deleteButton',
+        data: {
+          id: id,
+          buttons: $scope.sections[index].content.buttons
+        }
+      });
+      $scope.sections[index].content.buttons = $.grep($scope.sections[index].content.buttons, function(e, i) { return i !== buttonIndex; });
+    };
+
+    $scope.addButton = function($event, id) {
+      $event.preventDefault();
+      var index = getIndex(id);
+      $scope.undoRedo.push({
+        type: 'addButton',
+        data: {
+          id: id,
+          codes: $scope.sections[index].content.buttons
+        }
+      });
+      $scope.sections[index].content.buttons = [].concat($scope.sections[index].content.buttons, [{ label: 'FIXME', link: 'https://example.org' }]);
+    };
+
     $scope.imageToAddAfter = 0;
     $scope.saveImagePosition = function(id) {
       $scope.imageToAddAfter = id;
     };
-    $scope.addImage = function(url) {
+    $scope.addImage = function(url, caption) {
       $('#editor-images').modal('hide');
       add($scope.imageToAddAfter, {
         type: 'image',
         content: {
+          caption: caption,
           images: [
             {
               image: [url]
@@ -370,6 +428,17 @@ angular.module('documentationEditorApp', ['ngFileUpload'])
       section.content.rows = section.content.rows - 1;
     };
 
+    $scope.addHTML = function($event, id) {
+      $event.preventDefault();
+      add(id, {
+        id: getNextID(),
+        type: 'html',
+        content: {
+          body: '<span>FIXME</span>'
+        }
+      });
+    };
+
     $scope.addIf = function($event, id) {
       $event.preventDefault();
       add(id, {
@@ -421,8 +490,17 @@ angular.module('documentationEditorApp', ['ngFileUpload'])
       });
     };
 
+    $scope.diff = function() {
+      return $scope.undoRedo.length > 0 && !$scope.undoRedo[$scope.undoRedo.length - 1].saved;
+    };
+
     function save(preview) {
-      return $http.post($scope.path + '/admin/' + $scope.id, { data: serialize($scope.sections), preview: preview });
+      return $http.post($scope.path + '/admin/' + $scope.id, { data: serialize($scope.sections), preview: preview }).then(function(content) {
+        if ($scope.undoRedo.length > 0) {
+          $scope.undoRedo[$scope.undoRedo.length - 1].saved = true;
+        }
+        $scope.last_revision_id = content.data.id;
+      });
     }
 
     $scope.save = function($event) {
@@ -464,7 +542,7 @@ angular.module('documentationEditorApp', ['ngFileUpload'])
             file: file
           }).success(function (data, status, headers, config) {
             console.log('uploaded', data);
-            $scope.$parent.addImage(data.url);
+            $scope.$parent.addImage(data.url, data.caption);
           }).error(function (data, status, headers, config) {
             console.log('error', data);
             alert('Error status: ' + status);
@@ -520,31 +598,54 @@ angular.module('documentationEditorApp', ['ngFileUpload'])
       });
     });
   }]).directive('contenteditable', ['$document', function($document) {
+    var before = '';
+
     return {
       require: 'ngModel',
       link: function(scope, element, attrs, ngModel) {
-        function read() {
+        function update(undoable) {
           // use the HTML form to keep the new lines
           var text = element.html();
           // replace the HTML newlines by \n
           text = text.replace(/<div>/g, '<br>').replace(/<\/div>/g, '').replace(/<br>/g, "\n");
-          // replace also all HTML entities
-          text = $('<div />').html(text).text();
-          ngModel.$setViewValue(text);
+          if (undoable) {
+            scope.undoRedo.push({
+              type: 'text',
+              model: ngModel,
+              data: before
+            });
+            ngModel.$setViewValue(text);
+          }
         }
 
         ngModel.$render = function() {
-          element.text(ngModel.$viewValue || "");
+          var val = ngModel.$viewValue || '';
+          if (val.indexOf('<') !== -1) {
+            // backward compat: before 2015/11/9 the values were not escaped
+            //                  consider them as text values
+            element.text(val);
+          } else {
+            element.html(val);
+          }
         };
 
-        element.bind("blur keyup change", function() {
-          scope.$apply(read);
+        element.bind("focus", function() {
+          before = ngModel.$viewValue;
+        });
+
+        element.bind("blur", function() {
+          scope.$apply(update.bind(null, true));
+        });
+
+        element.bind("keyup change", function() {
+          scope.$apply(update.bind(null, false));
         });
 
         // force every copy/paste to be plain/text
         element.bind('paste', function(e) {
           e.preventDefault();
           var text = (e.originalEvent || e).clipboardData.getData('text/plain') || '';
+          text = $('<div />').text(text).html(); // escape HTML entities, we're dealing with plain text here
           $document[0].execCommand("insertHTML", false, text);
         });
       }

data/app/assets/stylesheets/documentation_editor/pages.css.sass

@@ -113,6 +113,11 @@
       border: 1px solid #DDD
       margin-right: 5px
 
+  .history
+    tr.published
+      background: lighten(#58B957, 20%)
+      color: white
+
 .markdown-page
   h1, h2, h3, h4, h5, h6
     position: relative

data/app/controllers/documentation_editor/pages_controller.rb

@@ -39,8 +39,8 @@ module DocumentationEditor
     end
 
     def commit
-      @page.add_revision!(params[:data], params[:preview].to_s == 'false', respond_to?(:current_user) ? current_user.id : nil)
-      render nothing: true
+      r = @page.add_revision!(params[:data], params[:preview].to_s == 'false', respond_to?(:current_user) ? current_user.id : nil)
+      render json: { id: r.id }
     end
 
     def create
@@ -81,7 +81,7 @@ module DocumentationEditor
       image.caption = params[:caption]
       image.image = params[:file]
       image.save!
-      render json: { id: image.id, url: image.image.url }
+      render json: { id: image.id, url: image.image.url, caption: image.caption }
     end
 
     def upload_thumbnail

data/app/views/documentation_editor/pages/edit.html.haml

@@ -1,5 +1,5 @@
 %div{"ng-app" => "documentationEditorApp"}
-  %section#documentation-editor{"ng-controller" => 'EditorController', "ng-init" => "init(#{@page.id}, #{@page.slug.to_json}, #{@page.thumbnail_url.to_json}, '#{admin_path.gsub(/\/admin$/, '')}')"}
+  %section#documentation-editor{"ng-controller" => 'EditorController', "ng-init" => "init(#{@page.id}, #{@page.slug.to_json}, #{@page.thumbnail_url.to_json}, '#{admin_path.gsub(/\/admin$/, '')}', #{@page.published_revision_id.to_i}, #{@page.revisions.last.id.to_i})"}
     .editor-header
       %ul.list-inline.pull-right
         %li
@@ -7,15 +7,15 @@
             %i.fa.fa-chevron-left
             Back to Admin
         %li
-          %a.btn.btn-success.btn-sm{href: '#', 'ng-click' => 'save($event)'}
+          %a.btn.btn-default.btn-sm{href: '#', 'ng-click' => 'save($event)', 'ng-disabled' => '!diff()'}
             %i.fa.fa-save
             Save
         %li
-          %a.btn.btn-default.btn-sm{href: '#', 'ng-click' => 'preview($event)'}
+          %a.btn.btn-success.btn-sm{href: '#', 'ng-click' => 'preview($event)'}
             %i.fa.fa-eye
             Save & Preview
         %li
-          %a.btn.btn-danger.btn-sm{href: '#', 'ng-click' => 'publish($event)'}
+          %a.btn.btn-danger.btn-sm{href: '#', 'ng-click' => 'publish($event)', 'ng-disabled' => 'published_revision_id === last_revision_id'}
             %i.fa.fa-save
             Save & Publish
         %li
@@ -54,12 +54,16 @@
             %p
               Caption:
               %span.markdown{contenteditable: true, 'ng-model' => 'sections[sectionIndex].content.caption'}
-            %p
-              Float:
-              %select{"ng-model" => "sections[sectionIndex].content.float"}
-                %option{value: ''} None
-                %option{value: 'left'} Left
-                %option{value: 'right'} Right
+            %ul.list-inline
+              %li
+                Float:
+                %select{"ng-model" => "sections[sectionIndex].content.float"}
+                  %option{value: ''} None
+                  %option{value: 'left'} Left
+                  %option{value: 'right'} Right
+              %li
+                Width:
+                %input{"ng-model" => "sections[sectionIndex].content.width", type: 'number'}
         %table.table.parameters{"ng-if" => "section.type === 'parameters'"}
           %thead
             %tr
@@ -81,6 +85,17 @@
                   %i.fa.fa-plus-circle
                 %a{href: '#', 'ng-click' => 'deleteRow($event, section.id)'}>
                   %i.fa.fa-minus-circle
+        .buttons{"ng-if" => "section.type === 'buttons'"}
+          .pull-right
+            Button:
+            %a{href: '#', 'ng-click' => 'addButton($event, section.id)'}>
+              %i.fa.fa-plus-circle
+          %ul.list-inline
+            %li{"ng-repeat" => "button in section.content.buttons track by $index"}
+              %a.btn.btn-default{contenteditable: true, 'ng-model' => 'sections[sectionIndex].content.buttons[$index].label', href: '#'}
+              %input{'ng-model' => 'sections[sectionIndex].content.buttons[$index].link'}
+              %a{href: '#', 'ng-click' => 'deleteButton($event, section.id, $index)'}>
+                %i.fa.fa-remove>
         .code{"ng-if" => "section.type === 'code'"}
           .pull-right
             Language:
@@ -93,6 +108,8 @@
               %a{contenteditable: true, href: '#snippet_{{section.id}}_{{$index}}', 'data-toggle' => 'tab', 'ng-model' => 'sections[sectionIndex].content.codes[$index].language' }>
           .tab-content
             %pre.tab-pane{contenteditable: true, "ng-repeat" => "code in section.content.codes track by $index", "ng-class" => "{ 'in active': ($index === 0) }", id: 'snippet_{{section.id}}_{{$index}}', 'ng-model' => 'sections[sectionIndex].content.codes[$index].code'}
+        .html{"ng-if" => "section.type === 'html'"}
+          %pre.tab-pane{contenteditable: true, id: 'snippet_{{section.id}}_{{$index}}', 'ng-model' => 'sections[sectionIndex].content.body'}
 
         .insert-sections
           .pull-right
@@ -118,6 +135,9 @@
             %a.btn.btn-default{href: '#', "data-toggle" => "modal", "data-target" => "#editor-images", "ng-click" => "saveImagePosition(section.id)"}
               %i.fa.fa-image
               Add image
+            %a.btn.btn-default{href: '#', 'ng-click' => 'addHTML($event, section.id)'}
+              %i.fa.fa-code
+              Add HTML
             %a.btn.btn-info{href: '#', 'ng-click' => 'addCallout($event, "info", section.id)'}
               %i.fa.fa-info-circle
               Add info
@@ -136,6 +156,9 @@
             %a.btn.btn-default{href: '#', 'ng-click' => 'addEndIf($event, section.id)'}
               %i.fa.fa-scissors
               \/IF
+            %a.btn.btn-default{href: '#', 'ng-click' => 'addButtons($event, section.id)'}
+              %i.fa.fa-link
+              Add buttons
 
     #editor-images.modal.fade{"ng-controller" => "ImageUploaderController"}
       .modal-dialog
@@ -147,19 +170,21 @@
 
           .modal-body
             - if DocumentationEditor::Image.count > 0
-              %h3 Existing images:
+              %h5 Choose an existing image:
               .images
                 - DocumentationEditor::Image.limit(100).order('id DESC').each do |image|
-                  %a{href: '#', 'ng-click' => "addImage('#{image.image.url}')"}= image_tag image.image.url
+                  %a{href: '#', 'ng-click' => "addImage('#{image.image.url}', '#{escape_javascript image.caption}')"}= image_tag image.image.url
+              %hr
+              %h4.text-center Or
               %hr
-            %h3 Upload a new image
+            %h5 Upload a new one:
             .form
               .row.form-group
                 .col-sm-3.text-right Caption
                 .col-sm-9
                   %input.form-control{type: 'text', 'ng-model' => 'caption', placeholder: 'Optional caption'}
               .text-center.form-group
-                .btn.btn-success{"ngf-select" => true, "ng-model" => 'files'} Select image
+                .btn.btn-success{"ngf-select" => true, "ng-model" => 'files'} Browse & upload image
 
     #upload-thumbnail.modal.fade{"ng-controller" => "ThumbnailUploaderController"}
       .modal-dialog

data/app/views/documentation_editor/pages/history.html.haml

@@ -8,15 +8,27 @@
         %a.btn.btn-default.btn-sm{href: admin_path}
           %i.fa.fa-chevron-left
           Back to Admin
+      %li
+        %a.btn.btn-default.btn-sm{href: edit_page_path(@page)}
+          %i.fa.fa-edit
+          Edit
     %h1
       History of
       %small
         = page_path('')
         = @page.slug
   .editor-content
+    - if !@page.published_revision
+      .alert.alert-danger
+        %i.fa.fa-exclamation-triangle
+        This page has never been published
+    - elsif @page.revisions.last != @page.published_revision
+      .alert.alert-warning
+        %i.fa.fa-exclamation-triangle
+        The latest version of this page has not been published yet.
     .row{"ng-controller" => 'HistoryController', "ng-init" => "init(#{@page.id}, '#{admin_path.gsub(/\/admin$/, '')}')"}
       .col-sm-3
-        %table.table.table-striped
+        %table.table.table-striped.history
           %thead
             %tr
               %th.text-right Revision
@@ -24,7 +36,7 @@
               %th
               %th Modification date
           %tbody
-            %tr{"ng-repeat" => "revision in revisions track by revision.id"}
+            %tr{"ng-repeat" => "revision in revisions track by revision.id", 'ng-class' => "{published: (#{@page.published_revision_id.to_i} == revision.id)}"}
               %td.text-right {{ revisions.length - $index }}
               %td
                 %input{type: 'radio', name: 'prev', "ng-value" => "$index", "ng-model" => "diff.prev", "ng-if" => "$index > diff.cur"}

data/lib/documentation_editor.rb

@@ -12,6 +12,8 @@ require 'paperclip'
 require 'diffy'
 ## best in place
 require 'best_in_place'
+## htmlentities
+require 'htmlentities'
 
 module DocumentationEditor
 end

data/lib/documentation_editor/parser.rb

@@ -1,6 +1,7 @@
 require 'kramdown/document'
 require 'kramdown/parser/kramdown'
 require 'simplabs/highlight'
+require 'htmlentities'
 
 class Kramdown::Parser::BlockKramdown < Kramdown::Parser::Kramdown
 
@@ -45,6 +46,9 @@ class Kramdown::Parser::BlockKramdown < Kramdown::Parser::Kramdown
       callout = new_block_el(:html_element, 'div', { class: "alert alert-#{content['type']}" })
       callout.children << Element.new(:raw, parse_cached(content['body']))
       @tree.children << callout
+    when 'html'
+      coder = HTMLEntities.new
+      @tree.children << Element.new(:raw, coder.decode(content['body']))
     when 'image'
       clazz = case content['float']
       when 'left'
@@ -54,12 +58,23 @@ class Kramdown::Parser::BlockKramdown < Kramdown::Parser::Kramdown
       else
         nil
       end
+      attrs = { src: content['images'][0]['image'][0] }
+      if !content['width'].blank?
+        attrs[:width] = content['width'].to_i
+      end
       @tree.children << Element.new(:html_element, 'figure', { class: clazz })
-      @tree.children.last.children << Element.new(:img, nil, { src: content['images'][0]['image'][0] })
+      @tree.children.last.children << Element.new(:img, nil, attrs)
       unless content['caption'].blank?
         @tree.children.last.children << Element.new(:html_element, 'figcaption')
         @tree.children.last.children.last.children << Element.new(:raw, parse_cached(content['caption']))
       end
+    when 'buttons'
+      buttons = new_block_el(:html_element, 'div', { class: "text-center" })
+      content['buttons'].each do |b|
+        buttons.children << Element.new(:html_element, 'a', { href: b['link'], class: 'btn btn-default' })
+        buttons.children.last.children << Element.new(:raw, b['label'])
+      end
+      @tree.children << buttons
     when 'if'
       @tree.children << Element.new(:comment, "if #{content['condition']}", { }, { start: true, condition: content['condition'], negation: false })
     when 'ifnot'
@@ -127,7 +142,7 @@ class Kramdown::Parser::BlockKramdown < Kramdown::Parser::Kramdown
       language
     end
     cache "#{language}_#{code.hash}" do
-      Simplabs::Highlight.highlight(language, code)
+      Simplabs::Highlight.highlight(language, CGI.unescapeHTML(code))
     end
   end
 

data/lib/documentation_editor/version.rb

@@ -1,3 +1,3 @@
 module DocumentationEditor
-  VERSION = "0.5.0"
+  VERSION = "0.6.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: documentation-editor
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.6.0
 platform: ruby
 authors:
 - Algolia Team
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-09-30 00:00:00.000000000 Z
+date: 2015-11-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -122,6 +122,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: htmlentities
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: The goal of this project is to provide an easy & frictionless way to
   edit an online tech documentation. The sweet spot of this editor is to be able to
   generate pages containing multiple snippets of highlighted code & conditional sections
@@ -186,7 +200,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.8
+rubygems_version: 2.2.2
 signing_key: 
 specification_version: 4
 summary: Mountable Rails application providing an extended Markdown documentation