Merge pull request #2827 from storytouch/exportHtmlAdditionalTagsWithData

Create hook exportHtmlAdditionalTagsWithData

doc/api/hooks_server-side.md

@@ -81,7 +81,7 @@ Available blocks in `pad.html` are:
  * `modals` - Contains all connectivity messages
  * `embedPopup` - the embed dropdown
  * `scripts` - Add your script tags here, if you really have to (consider use client-side hooks instead)
- 
+
 `timeslider.html` blocks:
 
  * `timesliderStyles`
@@ -90,9 +90,9 @@ Available blocks in `pad.html` are:
  * `timesliderTop`
  * `timesliderEditbarRight`
  * `modals`
- 
+
  `index.html` blocks:
- 
+
  * `indexWrapper` - contains the form for creating new pads
 
 ## padInitToolbar
@@ -334,7 +334,7 @@ exports.aceAttribClasses = function(hook_name, attr, cb){
 ```
 
 ## exportFileName
-Called from src/node/handler/ExportHandler.js 
+Called from src/node/handler/ExportHandler.js
 
 Things in context:
 
@@ -357,7 +357,7 @@ Things in context:
 
 1. Pad object
 
-This hook will allow a plug-in developer to include more properties and attributes to support during HTML Export. An Array should be returned. If a value in this array is a string, the exported HTML will contain tags like `<tag_name>` for the content where attributes are `['tag_name', 'true']`; if a value in this array is a pair `['tag_name', 'value']`, the exported HTML will contain tags like `<span data-tag_name="value">` for the content where attributes are `['tag_name', 'value']`.
+This hook will allow a plug-in developer to include more properties and attributes to support during HTML Export. If tags are stored as `['color', 'red']` on the attribute pool, use `exportHtmlAdditionalTagsWithData` instead. An Array should be returned.
 
 Example:
 ```
@@ -368,10 +368,19 @@ exports.exportHtmlAdditionalTags = function(hook, pad, cb){
 };
 ```
 
-Example when attributes are stores as `['color', 'red']` on the attribute pool:
+## exportHtmlAdditionalTagsWithData
+Called from src/node/utils/ExportHtml.js
+
+Things in context:
+
+1. Pad object
+
+Identical to `exportHtmlAdditionalTags`, but for tags that are stored with an specific value (not simply `true`) on the attribute pool. For example `['color', 'red']`, instead of `['bold', true]`. This hook will allow a plug-in developer to include more properties and attributes to support during HTML Export. An Array of arrays should be returned. The exported HTML will contain tags like `<span data-color="red">` for the content where attributes are `['color', 'red']`.
+
+Example:
 ```
 // Add the props to be supported in export
-exports.exportHtmlAdditionalTags = function(hook, pad, cb){
+exports.exportHtmlAdditionalTagsWithData = function(hook, pad, cb){
   var padId = pad.id;
   cb([["color", "red"], ["color", "blue"]]);
 };

src/node/utils/ExportHtml.js

@@ -78,16 +78,18 @@ function getHTMLFromAtext(pad, atext, authorColors)
   var tags = ['h1', 'h2', 'strong', 'em', 'u', 's'];
   var props = ['heading1', 'heading2', 'bold', 'italic', 'underline', 'strikethrough'];
 
+  // prepare tags stored as ['tag', true] to be exported
   hooks.aCallAll("exportHtmlAdditionalTags", pad, function(err, newProps){
-    // newProps can be simply a string (which means it is stored as attribute in the form of ['tag', 'true'])
-    // or it can be a pair of values in an Array (for the case when it is stored as ['tag', 'value']).
-    // The later scenario will generate HTML with tags like <span data-tag="value">
     newProps.forEach(function (propName, i){
-      if (_.isArray(propName)) {
-        tags.push('span data-' + propName[0] + '="' + propName[1] + '"');
-      } else {
-        tags.push(propName);
-      }
+      tags.push(propName);
+      props.push(propName);
+    });
+  });
+  // prepare tags stored as ['tag', 'value'] to be exported. This will generate HTML
+  // with tags like <span data-tag="value">
+  hooks.aCallAll("exportHtmlAdditionalTagsWithData", pad, function(err, newProps){
+    newProps.forEach(function (propName, i){
+      tags.push('span data-' + propName[0] + '="' + propName[1] + '"');
       props.push(propName);
     });
   });
@@ -140,7 +142,8 @@ function getHTMLFromAtext(pad, atext, authorColors)
   {
     var attrib = [propName, true];
     if (_.isArray(propName)) {
-      // propName can be in the form of ['color', 'red']
+      // propName can be in the form of ['color', 'red'],
+      // see hook exportHtmlAdditionalTagsWithData
       attrib = propName;
     }
     var propTrueNum = apool.putAttrib(attrib, true);
@@ -167,7 +170,8 @@ function getHTMLFromAtext(pad, atext, authorColors)
 
       var property = props[i];
 
-      // we are not insterested on properties in the form of ['color', 'red']
+      // we are not insterested on properties in the form of ['color', 'red'],
+      // see hook exportHtmlAdditionalTagsWithData
       if (_.isArray(property)) {
         return false;
       }
@@ -183,6 +187,8 @@ function getHTMLFromAtext(pad, atext, authorColors)
       return false;
     }
 
+    // tags added by exportHtmlAdditionalTagsWithData will be exported as <span> with
+    // data attributes
     function isSpanWithData(i){
       var property = props[i];
       return _.isArray(property);