Implement decorator with DOM

Author: su27

draftjs_exporter/composite_decorators.py

@@ -45,7 +45,8 @@ def render_block(self, block, entity_map):
                 entity_state.apply(command)
                 self.style_state.apply(command)
 
-            style_node = self.style_state.create_node(text)
+            style_node = self.style_state.create_node(
+                text, with_decorator=not entity_state.entity_stack)
             entity_state.render_entitities(element, style_node)
 
     def build_command_groups(self, block):

draftjs_exporter/html.py

@@ -56,16 +56,28 @@ def get_style_value(self):
 
         return ''.join(sorted(rules))
 
-    def create_node(self, text):
-
-        for deco in self.composite_decorators:
-            text = deco.process(text, parent=element)
-
-        text_children = list(DOM.parse_html(
-            '<textnode>' + text + '</textnode>').body.children)
+    def get_decorated_text(self, text):
+        while text:
+            for deco in self.composite_decorators:
+                match = deco.SEARCH_RE.search(text)
+                if match:
+                    begin, end = match.span()
+                    yield DOM.create_text_node(text[:begin])
+                    yield deco.replace(match)
+                    text = text[end:]
+                    break
+            else:
+                yield DOM.create_text_node(text)
+                return
+
+    def create_node(self, text, with_decorator=True):
+        if with_decorator:
+            text_children = self.get_decorated_text(text)
+        else:
+            text_children = [DOM.create_text_node(text)]
 
         if self.is_unstyled():
-            node = DOM.create_text_node('')
+            node = DOM.create_document_fragment()
             for child in text_children:
                 DOM.append_child(node, child)
         else:

draftjs_exporter/style_state.py

@@ -2,7 +2,9 @@
 
 from __future__ import absolute_import, unicode_literals
 
+import cgi
 import codecs
+import re
 
 from draftjs_exporter.constants import BLOCK_TYPES, ENTITY_TYPES
 from draftjs_exporter.defaults import BLOCK_MAP, STYLE_MAP
@@ -35,12 +37,51 @@ def render(self, props):
         return DOM.create_element('a', {'href': href}, props['children'])
 
 
+class URLDecorator:
+    """
+    Replace plain urls with actual hyperlinks.
+    """
+    SEARCH_RE = re.compile(r'(http://|https://|www\.)([a-zA-Z0-9\.\-%/\?&_=\+#:~!,\'\*\^$]+)')
+
+    def __init__(self, new_window=False):
+        self.new_window = new_window
+
+    def replace(self, match):
+        u_protocol = match.group(1)
+        u_href = match.group(2)
+        u_href = u_protocol + u_href
+
+        text = cgi.escape(u_href)
+        if u_href.startswith("www"):
+            u_href = "http://" + u_href
+        props = {'href': u_href}
+        if self.new_window:
+            props.update(target="_blank")
+
+        return DOM.create_element('a', props, text)
+
+
+class HashTagDecorator:
+    """
+    Wrap hash tags in spans with specific class.
+    """
+
+    SEARCH_RE = re.compile(r'#\w+')
+
+    def replace(self, match):
+        return DOM.create_element('em', {'class': 'hash_tag'}, match.group(0))
+
+
 config = {
     'entity_decorators': {
         ENTITY_TYPES.LINK: Link(),
         ENTITY_TYPES.IMAGE: Image(),
         ENTITY_TYPES.TOKEN: Null(),
     },
+    'composite_decorators': [
+        URLDecorator(),
+        HashTagDecorator(),
+    ],
     # Extend/override the default block map.
     'block_map': dict(BLOCK_MAP, **{
         BLOCK_TYPES.HEADER_TWO: {
@@ -104,15 +145,15 @@ def render(self, props):
         },
         {
             'key': '5384u',
-            'text': 'Everyone 🍺 Springload applies the best principles of UX to their work.',
+            'text': 'Everyone 🍺 Springload applies the best #principles of UX to their work. (https://www.springload.co.nz/work/nz-festival/)',
             'type': 'blockquote',
             'depth': 0,
             'inlineStyleRanges': [],
             'entityRanges': []
         },
         {
             'key': 'eelkd',
-            'text': 'The design decisions we make building tools and services for your customers are based on empathy for what your customers need.',
+            'text': 'The design decisions we make building #tools and #services for your customers are based on empathy for what your customers need.',
             'type': 'unstyled',
             'depth': 0,
             'inlineStyleRanges': [],

example.py

@@ -1,18 +1,48 @@
 from __future__ import absolute_import, unicode_literals
 
+import cgi
 import re
 import unittest
+
+from draftjs_exporter.dom import DOM
 from draftjs_exporter.html import HTML
-from draftjs_exporter.composite_decorators import CompositeDecorator, URLDecorator
-from draftjs_exporter.entities import Link
 
+from .test_entities import Link
+
+
+class URLDecorator:
+    """
+    Replace plain urls with actual hyperlinks.
+    """
+    SEARCH_RE = re.compile(r'(http://|https://|www\.)([a-zA-Z0-9\.\-%/\?&_=\+#:~!,\'\*\^$]+)')
+
+    def __init__(self, new_window=False):
+        self.new_window = new_window
+
+    def replace(self, match):
+        u_protocol = match.group(1)
+        u_href = match.group(2)
+        u_href = u_protocol + u_href
+
+        text = cgi.escape(u_href)
+        if u_href.startswith("www"):
+            u_href = "http://" + u_href
+        props = {'href': u_href}
+        if self.new_window:
+            props.update(target="_blank")
+
+        return DOM.create_element('a', props, text)
+
+
+class HashTagDecorator:
+    """
+    Wrap hash tags in spans with specific class.
+    """
 
-class HashTagDecorator(CompositeDecorator):
     SEARCH_RE = re.compile(r'#\w+')
 
     def replace(self, match):
-        return '<span class="hash_tag">{hash_tag}</span>'.format(
-            hash_tag=match.group(0) or '')
+        return DOM.create_element('span', {'class': 'hash_tag'}, match.group(0))
 
 
 config = {
@@ -37,8 +67,12 @@ class TestCompositeDecorator(unittest.TestCase):
 
     def setUp(self):
         self.exporter = HTML(config)
+        self.maxDiff = None
 
-    def test_render_with_composite_decorator(self):
+    def test_render_with_entity_and_decorators(self):
+        """
+        The composite decorator should never render text in any entities.
+        """
         self.assertEqual(self.exporter.render({
             'entityMap': {
                 '1': {
@@ -71,3 +105,25 @@ def test_render_with_composite_decorator(self):
             '<a href="http://www.google.com">www.google.com</a> for '
             '<span class="hash_tag">#github</span> and '
             '<span class="hash_tag">#facebook</span></div>')
+
+    def test_render_with_multiple_decorators(self):
+        """
+        When multiple decorators match the same part of text,
+        only the first one should perform the replacement.
+        """
+        self.assertEqual(self.exporter.render({
+            'entityMap': {},
+            'blocks': [
+                {
+                    'key': '5s7g9',
+                    'text': 'search http://www.google.com#world for the #world',
+                    'type': 'unstyled',
+                    'depth': 0,
+                    'inlineStyleRanges': [],
+                    'entityRanges': [],
+                },
+            ]
+        }),
+            '<div>search <a href="http://www.google.com#world">'
+            'http://www.google.com#world</a> for the '
+            '<span class="hash_tag">#world</span></div>')

tests/test_composite_decorator.py

@@ -50,7 +50,7 @@ def test_get_style_value_multiple(self):
         self.assertEqual(self.style_state.get_style_value(), 'text-decoration: underline;')
 
     def test_create_node_unstyled(self):
-        self.assertEqual(DOM.get_tag_name(self.style_state.create_node('Test text')), 'textnode')
+        self.assertEqual(DOM.get_tag_name(self.style_state.create_node('Test text')), 'fragment')
         self.assertEqual(DOM.get_text_content(self.style_state.create_node('Test text')), 'Test text')
 
     def test_create_node_unicode(self):