fixup! ✨(forum) enables latext mathematical syntax

src/ashley/defaults.py

@@ -6,7 +6,14 @@
 from draftjs_exporter.defaults import STYLE_MAP as DEFAULT_STYLE_MAP
 from draftjs_exporter.dom import DOM
 
-from ashley.editor.decorators import emoji, image, inlinetex, link, mention
+from ashley.editor.decorators import (
+ emoji,
+ image,
+ inlinetex,
+ link,
+ mention,
+ render_children,
+)
 
 _FORUM_ROLE_ADMINISTRATOR = "administrator"
 _FORUM_ROLE_INSTRUCTOR = "instructor"
@@ -98,7 +105,12 @@
  "INLINETEX": inlinetex,
  },
  "composite_decorators": [],
- "block_map": DEFAULT_BLOCK_MAP,
+ "block_map": dict(
+ DEFAULT_BLOCK_MAP,
+ **{
+ "atomic": render_children,
+ },
+ ),
  "style_map": DEFAULT_STYLE_MAP,
  "engine": DOM.STRING,
 }

src/ashley/editor/decorators.py

@@ -99,4 +99,20 @@ def inlinetex(props):
  """
  Decorator for the `INLINETEX` entity in Draft.js ContentState.
  """
- return DOM.create_element("span", {"class": "latex"}, props.get("tex", None))
+ return DOM.create_element("span", {"class": "latex-inline"}, props.get("tex", None))
+
+
+def render_children(props):
+ """
+ Decorator for the blocks in Draft.js ContentState. TEXBLOCK is a custom
+ block that is used through atomic blocs.
+ """
+ if props.get("block").get("data").get("type") == "TEXBLOCK":
+ return DOM.create_element(
+ "span",
+ {"class": "latex-display"},
+ props.get("block").get("data").get("tex", None),
+ )
+
+ # default behaviour
+ return props

src/frontend/js/components/AshleyEditor/index.spec.tsx

@@ -184,7 +184,7 @@ describe('AshleyEditor', () => {
  );
  });
 
- it('creates a block of type inlinetex', () => {
+ it('recognizes a block of type TEXBLOCK using atomic blocks', () => {
  render(
  <IntlProvider locale="en">
  <AshleyEditor target="target" {...props} />

src/frontend/js/utils/latex.ts

@@ -1,9 +1,11 @@
 import katex from 'katex';
 
 export const renderLatex = () => {
- document.querySelectorAll('span.latex').forEach((math) => {
+ document.querySelectorAll('[class^=latex]').forEach((math) => {
  if (math.textContent) {
- math.innerHTML = katex.renderToString(math.textContent);
+ math.innerHTML = katex.renderToString(math.textContent, {
+ displayMode: math.classList.contains('latex-display'),
+ });
  }
  });
 };

tests/ashley/draftjs_exporter/test_draftjs_exporter_decorator_latex.py

@@ -1,7 +1,7 @@
 from django.test import TestCase
 from draftjs_exporter.dom import DOM
 
-from ashley.editor.decorators import inlinetex
+from ashley.editor.decorators import inlinetex, render_children
 
 
 class TestInlinetexDecorator(TestCase):
@@ -15,7 +15,7 @@ def test_custom_decorator_inlinetex_ok(self):
  tex = "\left.\frac{x^3}{3}\right|_0^1" # noqa: W605
  self.assertEqual(
  DOM.render(DOM.create_element(inlinetex, {"tex": tex})),
- f'<span class="latex">{tex}</span>',
+ f'<span class="latex-inline">{tex}</span>',
  )
 
  def test_custom_decorator_inlinetex_empty(self):
@@ -25,7 +25,7 @@ def test_custom_decorator_inlinetex_empty(self):
  """
  self.assertEqual(
  DOM.render(DOM.create_element(inlinetex, {"tex": ""})),
- '<span class="latex"></span>',
+ '<span class="latex-inline"></span>',
  )
 
  def test_custom_decorator_inlinetex_no_maths(self):
@@ -35,5 +35,95 @@ def test_custom_decorator_inlinetex_no_maths(self):
  """
  self.assertEqual(
  DOM.render(DOM.create_element(inlinetex, {"tex": "a common string"})),
- '<span class="latex">a common string</span>',
+ '<span class="latex-inline">a common string</span>',
+ )
+
+ def test_custom_decorator_displaytex_ok(self):
+ """
+ check custom decorator for `render_children` of tex returns expected html
+ """
+
+ tex = "\left.\frac{x^3}{3}\right|_0^1" # noqa: W605
+
+ self.assertEqual(
+ DOM.render(
+ DOM.create_element(
+ render_children,
+ {
+ "block": {
+ "key": "a215p",
+ "text": "",
+ "type": "atomic",
+ "data": {"tex": tex, "type": "TEXBLOCK"},
+ }
+ },
+ )
+ ),
+ f'<span class="latex-display">{tex}</span>',
+ )
+
+ def test_custom_decorator_displaytex_empty(self):
+ """
+ check custom decorator `render_children` returns expected html even when
+ the content is empty
+ """
+ self.assertEqual(
+ DOM.render(
+ DOM.create_element(
+ render_children,
+ {
+ "block": {
+ "key": "a215p",
+ "text": "",
+ "type": "atomic",
+ "data": {"tex": "", "type": "TEXBLOCK"},
+ }
+ },
+ )
+ ),
+ '<span class="latex-display"></span>',
+ )
+
+ def test_custom_decorator_displaytex_no_maths(self):
+ """
+ check custom decorator `render_children` returns expected html even when
+ the content is not a formula but a regular string
+ """
+ self.assertEqual(
+ DOM.render(
+ DOM.create_element(
+ render_children,
+ {
+ "block": {
+ "key": "a215p",
+ "text": "",
+ "type": "atomic",
+ "data": {"tex": "a common string", "type": "TEXBLOCK"},
+ }
+ },
+ )
+ ),
+ '<span class="latex-display">a common string</span>',
+ )
+
+ def test_custom_decorator_displaytex_no_malformed(self):
+ """
+ check custom decorator `render_children` returns expected html even when
+ the `tex` attribute is missing
+ """
+ self.assertEqual(
+ DOM.render(
+ DOM.create_element(
+ render_children,
+ {
+ "block": {
+ "key": "a215p",
+ "text": "",
+ "type": "atomic",
+ "data": {"type": "TEXBLOCK"},
+ }
+ },
+ )
+ ),
+ '<span class="latex-display"></span>',
  )