199 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Just…. NO,NO,NO
Fri, Aug 11th 2017 270
Goodbye Evernote
Tue, Jan 17th 2017 4
Merry Christmas!
Sun, Dec 25th 2016 9
Visual Studio Code Editor
Fri, Nov 11th 2016 8
Work with Rich Text from DDS
Fri, Oct 21st 2016 2
A Polymer Avatar component
Wed, Oct 12th 2016 4
MWLUG Recap
Sat, Aug 20th 2016 5
Top 10
Just…. NO,NO,NO
Fri, Aug 11th 2017 270
Merry Christmas!
Sun, Dec 25th 2016 9
Visual Studio Code Editor
Fri, Nov 11th 2016 8
XMage, your XPrentice will surely miss you
Mon, May 12th 2014 6
sortablejs – Drag-n-Drop without jQuery UI
Thu, Jul 21st 2016 6
IBM Please fix Domino authentication
Tue, May 24th 2016 5
Progressive Web App Summit – 2016
Mon, Jun 20th 2016 5
MWLUG Recap
Sat, Aug 20th 2016 5
XMage, your XPrentice will surely miss you
Mon, May 12th 2014 4
Re-usability is the Goal!
Tue, Jun 14th 2016 4


Work with Rich Text from DDS
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Keith Strickland    

So you’ve created your shiny new web application using DDS and everything is really cool, except for the display of rich text. You’ve figured out that there is a multipart MIME object in the JSON delivered by DDS, and it has the HTML in that, but it still looks crappy. It has tags littered throughout and just doesn’t look good.

Well, I think I’ve got the solution for you. If you look at that multipart MIME Object and find the ‘text/html’ entry you’ll notice a ‘contentTransferEncoding’ property that equals ‘quoted-printable’ or maybe ‘base64’.  There’s the cause of your html display issue. You need a decoder for those 2 encoding types.

Now, let’s take a look at the now-richtext element.

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="quoted-printable.html">

<dom-module id="now-richtext">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <marked-element markdown="{{htmlContent}}">
      <div class="markdown-html"></div>
    </marked-element>
  </template>
  <script>
  Polymer({
    is: 'now-richtext',
    properties: {
      htmlContent: String,
      richTextObj: {
        type: Object,
        observer: '_onRichText'
      }
    },
    _onRichText: function(newVal, oldVal) {
      if (newVal) {
        var textObj = newVal.content;
        for (var i = 0; i < textObj.length; i++) {
          var mimeObj = textObj[i];
          if (mimeObj.contentType.indexOf('text/html') > -1) {
            var html = mimeObj.data;
            if (mimeObj.contentTransferEncoding === 'base64') {
              html = atob(mimeObj.data);
            }else if (mimeObj.contentTransferEncoding === 'quoted-printable') {
              html = quotedPrintable.decode(mimeObj.data);
            }
            var removeText = ['<html>','</html>','<body>','</body>','<head>','</head>'];
            for (var j = 0; j < removeText.length; j++) {
              html = html.replace(removeText[j],'');
            }
            this.set('htmlContent', html);
          }
        }
        // Gotta wait for the DOM to be built
        this.async(function() {
          this._updateImages(textObj);
        }.bind(this), 200);
      }
    },
    _updateImages: function(mimeObjContent) {
      for (var j = 0; j < mimeObjContent.length; j++) {
        var mimeObj = mimeObjContent[j];
        if (mimeObj.contentType.indexOf('image/') > -1) {
          var contentDispo = mimeObj.contentDisposition;
          var isInline = contentDispo.indexOf('inline') > -1;
          var elem = null;
          var srcAttrStr = null;
          if (isInline) {
            var imageBase64 = mimeObj.data;
            var imgElemName = 'cid:' + mimeObj.contentID.substring(1, mimeObj.contentID.length - 1);
            var contentType = mimeObj.contentType.split(';')[0];
            elem = this.querySelector('[src="' + imgElemName + '"]');
            if (elem) {
              srcAttrStr = 'data:' + contentType + ';base64,' + imageBase64;
              elem.setAttribute('src', srcAttrStr);
            }
          }else { // Gotta create an img tag for attachments
            var elemArr = this.querySelectorAll('i');
            for (var k = 0; k < elemArr.length; k++) {
              elem = elemArr[k];
              var dispoArr = mimeObj.contentDisposition.split(';');
              var fileNamePart = dispoArr[1].substring(dispoArr[1].indexOf('="') + 2, dispoArr[1].lastIndexOf('"'));
              if (elem.innerHTML.indexOf(fileNamePart) > -1) {
                var parent = elem.parentNode;
                var img = document.createElement('img');
                var contentTypeArr = mimeObj.contentType.split(';');
                srcAttrStr = 'data:' + contentTypeArr[0] + ';base64,' + mimeObj.data;
                img.setAttribute('src', srcAttrStr);
                parent.replaceChild(img, elem);
              }
            }
          }
        }
      }
    }
  });
  </script>
</dom-module>

This is a really simple element, the things of note here (highlighted lines above):

  • Let’s start with line 4: This is the import of quoted-printable. This is a library by Mathias Bynens that provides a quoted-printable decoder.
  • Next up is line 35: This will decode a ‘base64’ string. This will be placed in the ‘src’ attribute of an image tag.
  • Next is line 37: This will decode a ‘quoted-printable’ string. This is what we’ll hand to the marked-element for display.
  • Lastly is lines 39-42: This will remove the html, body and head tags from the markup (doesn’t really hurt to leave them there tho).

Let’s take a look how we’re dealing with images. Look at the ‘_updateImages’ function. We hand this function the content property of the multipart MIME object. It will then loop through all the parts looking for images. Once it finds an image, it’ll find the corresponding DOM element. If the image is an inline image, there will be an img tag present with a src attribute of something like ‘cid:2__=0ABB0AC0DFF9C40F8f9e8a93df93869091@local’. That’s the same name that is in the mimePart so we use that to find the proper img tag. Once we get the proper img tag, we replace it’s src attribute with the base64 from the mimePart’s data property.

If the image is an attachment we need to take a different route tho. Instead of an img tag, an ‘i’ tag will be created with something like ‘(See attached file: RPN_Logo_Stacked-Preferred.png)‘ as it’s innerHTML. We then get the file name from the mimePart and get all the ‘i’ tags and loop through those until we find the proper one. We then create an img element and replace the ‘i’ tag with the new ‘img’ tag whose ‘src’ attribute has been set to the base64 from the mimePart.

To use this element here’s the demo code:

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<link rel="import" href="../now-richtext.html">

<dom-module id="doc-wrapper">
  <template>
    <style>
      :host {
        display: block;
        box-sizing: border-box;
      }
    </style>
    <iron-ajax
      url="doc.json"
      handle-as="json"
      last-response="{{doc}}"
      auto>
    </iron-ajax>
    <now-richtext rich-text-obj="{{doc.BulletinText}}"></now-richtext>
  </template>
  <script>
Polymer({
  is: 'doc-wrapper',
  properties: {
    doc: Object
  }
});
  </script>
</dom-module>

This element is purely for the demo included with the now-richtext component. But, this will give us something like this:

screen-shot-2016-10-21-at-4-27-01-pm

This is just the rich text field of a document and is meant to only demo the rich text field. But if you would like to check out the demo, here’s a link to the github page and here’s the repo.

Until next time… Happy Coding!

Share This:



---------------------
http://keithstric.me/2016/10/21/work-with-rich-text-from-dds/
Oct 21, 2016
3 hits



Recent Blog Posts
270
Just…. NO,NO,NO
Fri, Aug 11th 2017 7:45p   Keith Strickland
This week I attended MWLUG in Alexandria, VA. This was an awesome event, so many good speakers, good content and excellent camaraderie. I can’t say it enough, but Richard Moy and his team put on such a good event. So, I spoke to a couple of developers who are writing client JavaScript in Domino Designer. While Domino Designer is capable of allowing you to write JavaScript, all I can say is STOP! Stop torturing yourself, Stop making it harder on yourself to write good JavaScript. There are
4
Goodbye Evernote
Tue, Jan 17th 2017 5:22p   Keith Strickland
I’ve been using Evernote for a few years now and have enjoyed it’s feature set and the ability to plan and document a complex project (namely home/shop projects) with shopping lists, ideas, etc. But recently every time I attempt to use Evernote to create a quick note or maybe just jot something down, I’m presented with a request to upgrade to a pay plan, or to update or just general advertising. I can no longer just open it and create a note. Because of this, I have now backed
9
Merry Christmas!
Sun, Dec 25th 2016 10:57p   Keith Strickland
Merry Christmas!! I hope everyone is having a great holiday. I thought now might be a good time to look back over the year and review some of the technology I’ve dealt with. Surface Pro 4: Last year I got a Surface Pro 4 tablet. I started the process of switching to it instead of my aging MacBook Pro. While I REALLY like the hardware and how everything works there were just a few issues which got on my nerves so bad I couldn’t ever completely make the switch. As far as performance, I
8
Visual Studio Code Editor
Fri, Nov 11th 2016 3:42p   Keith Strickland
I’ve been using the Visual Studio Code editor for the last couple of weeks and thought I would share my experience. I’ve mainly used this in a plain ‘ole polymer application which consists of html files. Using the editor this way has shown some of it’s shortcomings. Don’t get me wrong, I think it’s a fine editor and has a lot of features I really like. However with CSS, HTML and JavaScript all residing in the same file, a lot of the typeahead features just don
3
Work with Rich Text from DDS
Fri, Oct 21st 2016 5:33p   Keith Strickland
So you’ve created your shiny new web application using DDS and everything is really cool, except for the display of rich text. You’ve figured out that there is a multipart MIME object in the JSON delivered by DDS, and it has the HTML in that, but it still looks crappy. It has tags littered throughout and just doesn’t look good. Well, I think I’ve got the solution for you. If you look at that multipart MIME Object and find the ‘text/html’ entry you’ll not
4
A Polymer Avatar component
Wed, Oct 12th 2016 5:50p   Keith Strickland
At MWLUG a lot of people seemed surprised that I would create a component just for an avatar. My response to that is why wouldn’t you build an avatar component? So, in this post I’m going to show you how to build one for your applications. Let’s start out with the use case. We want to show an avatar for a person in various locations throughout our application. This avatar should do a few different things: Should show a picture of a person if one is attached to their person do
5
MWLUG Recap
Sat, Aug 20th 2016 11:27p   Keith Strickland
I had a great time at MWLUG this year. It was great to see so many familiar faces and friends, most of which I only see at the user groups. But, I just got home and thought I would share some of my thoughts and observations about the event and my take away about the state of our beloved Notes. As usual Richard Moy put together a great conference, so many thanks to him for making that event possible. The tone of the event was that most everyone is starting to realize that the Notes client is qui




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition