fix: html rendering tables in Studio for subclasses of HTML5 XBlock

Previously, we added a fix for the HTML tables to be rendered
correctly in the studio preview. However, it only worked
for the HTML5 XBlock, not its subclasses.

html_xblock/static/css/html_preview.css

@@ -7,71 +7,71 @@
 
 /* fall back to default browser styles for all rows; the inline styles (like
  * border style and color) would overwrite it */
-.studio-xblock-wrapper [data-block-type="html5"] table > * > tr {
+.studio-xblock-wrapper .html5_xblock table > * > tr {
   border: unset;
 }
 
 /* fall back to default browser styles, if border attribute is not set; the
  * inline styles (like border style and color) would overwrite it */
-.studio-xblock-wrapper [data-block-type="html5"] table:not([border]) {
+.studio-xblock-wrapper .html5_xblock table:not([border]) {
   border: unset;
 }
 
 /* default styles for any table that had border attribute set; the inline
  * styles (like border style and color) would overwrite it */
-.studio-xblock-wrapper [data-block-type="html5"] table[border] {
+.studio-xblock-wrapper .html5_xblock table[border] {
   border: 1px solid black;
 }
 
 /* change the border width, depending on the explicit value of the border
  * attribute */
-.studio-xblock-wrapper [data-block-type="html5"] table[border="1"] {
+.studio-xblock-wrapper .html5_xblock table[border="1"] {
   border-width: 1px;
 }
 
-.studio-xblock-wrapper [data-block-type="html5"] table[border="2"] {
+.studio-xblock-wrapper .html5_xblock table[border="2"] {
   border-width: 2px;
 }
 
-.studio-xblock-wrapper [data-block-type="html5"] table[border="3"] {
+.studio-xblock-wrapper .html5_xblock table[border="3"] {
   border-width: 3px;
 }
 
-.studio-xblock-wrapper [data-block-type="html5"] table[border="4"] {
+.studio-xblock-wrapper .html5_xblock table[border="4"] {
   border-width: 4px;
 }
 
-.studio-xblock-wrapper [data-block-type="html5"] table[border="5"] {
+.studio-xblock-wrapper .html5_xblock table[border="5"] {
   border-width: 5px;
 }
 
-.studio-xblock-wrapper [data-block-type="html5"] table[border="6"] {
+.studio-xblock-wrapper .html5_xblock table[border="6"] {
   border-width: 6px;
 }
 
-.studio-xblock-wrapper [data-block-type="html5"] table[border="7"] {
+.studio-xblock-wrapper .html5_xblock table[border="7"] {
   border-width: 7px;
 }
 
-.studio-xblock-wrapper [data-block-type="html5"] table[border="8"] {
+.studio-xblock-wrapper .html5_xblock table[border="8"] {
   border-width: 8px;
 }
 
-.studio-xblock-wrapper [data-block-type="html5"] table[border="9"] {
+.studio-xblock-wrapper .html5_xblock table[border="9"] {
   border-width: 9px;
 }
 
-.studio-xblock-wrapper [data-block-type="html5"] table[border="10"] {
+.studio-xblock-wrapper .html5_xblock table[border="10"] {
   border-width: 10px;
 }
 /* etc until the value we think is reasonable */
 
-.studio-xblock-wrapper [data-block-type="html5"] table[border] > * > tr > td,
-.studio-xblock-wrapper [data-block-type="html5"] table[border] > * > tr > th,
-.studio-xblock-wrapper [data-block-type="html5"] table[border] > * > td,
-.studio-xblock-wrapper [data-block-type="html5"] table[border] > * > th,
-.studio-xblock-wrapper [data-block-type="html5"] table[border] > td,
-.studio-xblock-wrapper [data-block-type="html5"] table[border] > th {
+.studio-xblock-wrapper .html5_xblock table[border] > * > tr > td,
+.studio-xblock-wrapper .html5_xblock table[border] > * > tr > th,
+.studio-xblock-wrapper .html5_xblock table[border] > * > td,
+.studio-xblock-wrapper .html5_xblock table[border] > * > th,
+.studio-xblock-wrapper .html5_xblock table[border] > td,
+.studio-xblock-wrapper .html5_xblock table[border] > th {
   border-width: thin;
   border-style: inset;
 }

html_xblock/static/html/lms.html

@@ -1 +1 @@
-<div>{{ self.html | safe }}</div>
+<div class="html5_xblock">{{ self.html | safe }}</div>

setup.py

@@ -23,7 +23,7 @@ def package_data(pkg, roots):
 
 setup(
     name='html-xblock',
-    version='1.2.1',
+    version='1.2.2',
     description='HTML XBlock will help creating and using a secure and easy-to-use HTML blocks',
     license='AGPL v3',
     packages=[

tests/test_basics.py

@@ -53,7 +53,7 @@ def test_render(self):
         block = html_xblock.HTML5XBlock(self.runtime, field_data, None)
         self.assertEqual(block.allow_javascript, False)
         fragment = block.student_view()
-        self.assertIn('<div>Safe <b>html</b></div>', fragment.content)
+        self.assertIn('Safe <b>html</b>', fragment.content)
 
     def test_render_with_unsafe(self):
         """
@@ -65,7 +65,7 @@ def test_render_with_unsafe(self):
         self.assertEqual(block.allow_javascript, False)
         fragment = block.student_view()
         self.assertIn(
-            '<div>Safe <b>html</b>&lt;script&gt;alert(\'javascript\');&lt;/script&gt;</div>',
+            'Safe <b>html</b>&lt;script&gt;alert(\'javascript\');&lt;/script&gt;',
             fragment.content
         )
 
@@ -91,7 +91,7 @@ def test_render_allow_js(self):
         block = html_xblock.HTML5XBlock(self.runtime, field_data, None)
         self.assertEqual(block.allow_javascript, True)
         fragment = block.student_view()
-        self.assertIn('<div>Safe <b>html</b><script>alert(\'javascript\');</script></div>', fragment.content)
+        self.assertIn('Safe <b>html</b><script>alert(\'javascript\');</script>', fragment.content)
 
     def test_substitution_no_system(self):
         """
@@ -100,7 +100,7 @@ def test_substitution_no_system(self):
         field_data = DictFieldData({'data': 'Safe <b>%%USER_ID%% %%COURSE_ID%%</b>'})
         block = html_xblock.HTML5XBlock(self.runtime, field_data, None)
         fragment = block.student_view()
-        self.assertIn('<div>Safe <b>%%USER_ID%% %%COURSE_ID%%</b></div>', fragment.content)
+        self.assertIn('Safe <b>%%USER_ID%% %%COURSE_ID%%</b>', fragment.content)
 
     def test_substitution_not_found(self):
         """
@@ -110,7 +110,7 @@ def test_substitution_not_found(self):
         block = html_xblock.HTML5XBlock(self.runtime, field_data, None)
         block.system = Mock(anonymous_student_id=None)
         fragment = block.student_view()
-        self.assertIn('<div>Safe <b>%%USER_ID%% %%COURSE_ID%%</b></div>', fragment.content)
+        self.assertIn('Safe <b>%%USER_ID%% %%COURSE_ID%%</b>', fragment.content)
 
     def test_user_id_substitution(self):
         """
@@ -120,7 +120,7 @@ def test_user_id_substitution(self):
         block = html_xblock.HTML5XBlock(self.runtime, field_data, None)
         block.system = Mock(anonymous_student_id='test_user')
         fragment = block.student_view()
-        self.assertIn('<div>Safe <b>test_user</b></div>', fragment.content)
+        self.assertIn('Safe <b>test_user</b>', fragment.content)
 
     def test_course_id_substitution(self):
         """
@@ -132,4 +132,4 @@ def test_course_id_substitution(self):
         course_locator_mock.html_id = Mock(return_value='test_course')
         block.system = Mock(course_id=course_locator_mock)
         fragment = block.student_view()
-        self.assertIn('<div>Safe <b>test_course</b></div>', fragment.content)
+        self.assertIn('Safe <b>test_course</b>', fragment.content)