✨(forum) enables latext mathematical syntax

Using katex, we enable latex mathematical syntax in
draft.js to write equations in forums.
In draft.js press $ for starting Inline TeX, to
write the $ character, type \$, and Press CMD + M for
starting Tex Block

CHANGELOG.md

@@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Added
+
+- Enabling latex mathematical equations in forums
+
 ## [1.2.5] - 2022-10-14
 
 ### Fixed

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, link, mention
+from ashley.editor.decorators import (
+ emoji,
+ image,
+ inlinetex,
+ link,
+ mention,
+ render_children,
+)
 
 _FORUM_ROLE_ADMINISTRATOR = "administrator"
 _FORUM_ROLE_INSTRUCTOR = "instructor"
@@ -95,9 +102,15 @@
  "emoji": emoji,
  "mention": mention,
  "IMAGE": image,
+ "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

@@ -93,3 +93,28 @@ def image(props):
  )
 
  return None
+
+
+def inlinetex(props):
+ """
+ Decorator for the `INLINETEX` entity in Draft.js ContentState.
+ """
+ return DOM.create_element(
+ "span", {"class": "ashley-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 blocks.
+ """
+ if props.get("block").get("data").get("type") == "TEXBLOCK":
+ return DOM.create_element(
+ "span",
+ {"class": "ashley-latex-display"},
+ props.get("block").get("data").get("tex", None),
+ )
+
+ # default behaviour
+ return props

src/frontend/jest.config.js

@@ -4,5 +4,7 @@ module.exports = {
  setupFilesAfterEnv: ['./testSetup.ts', 'regenerator-runtime/runtime'],
  testMatch: [__dirname + '/js/**/*.spec.+(ts|tsx|js)'],
  testURL: 'https://localhost',
- transformIgnorePatterns: ['node_modules/(?!(lodash-es)/)'],
+ transformIgnorePatterns: [
+ '/node_modules/(?!(lodash-es|draft-js-latex-plugin)/)',
+ ],
 };

src/frontend/js/ashley.ts

@@ -1,9 +1,11 @@
 import { renderEmojis } from './utils/emojis';
 import { renderHighlight } from './utils/highlight';
+import { renderLatex } from './utils/latex';
 
 // expose some modules to the global window object
 
 document.addEventListener('DOMContentLoaded', (event) => {
  renderEmojis();
  renderHighlight();
+ renderLatex();
 });

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

@@ -1,5 +1,5 @@
 import { createEvent } from '@testing-library/dom';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen, within } from '@testing-library/react';
 import user from '@testing-library/user-event';
 import React from 'react';
 import { IntlProvider } from 'react-intl';
@@ -25,6 +25,9 @@ describe('AshleyEditor', () => {
  };
  afterEach(() => {
  jest.resetAllMocks();
+ if (target) {
+ target.value = '';
+ }
  });
 
  // add input target, it's value is linked with editor content and needed for all the tests
@@ -181,6 +184,53 @@ describe('AshleyEditor', () => {
  );
  });
 
+ it('recognizes a block of type TEXBLOCK using atomic blocks', () => {
+ render(
+ <IntlProvider locale="en">
+ <AshleyEditor target="target" {...props} />
+ </IntlProvider>,
+ );
+ expect(screen.queryByRole('figure')).not.toBeInTheDocument();
+
+ // TEXBLOCK are recognized
+ target.value = BlockMapFactory([
+ {
+ type: 'atomic',
+ text: 'displaystylesum_{i=1}^{k+1}i',
+ data: {
+ tex: '',
+ type: 'TEXBLOCK',
+ },
+ },
+ ]);
+
+ render(
+ <IntlProvider locale="en">
+ <AshleyEditor target="target" {...props} />
+ </IntlProvider>,
+ );
+ const figure = screen.getByRole('figure');
+ const latex = within(figure).getByRole('textbox');
+ expect(latex).toBeInTheDocument();
+ });
+
+ it('generates a block of type inlinetex when `$` key is pressed', () => {
+ const { container } = render(
+ <IntlProvider locale="en">
+ <AshleyEditor target="target" {...props} />
+ </IntlProvider>,
+ );
+
+ expect(screen.queryAllByRole('textbox').length).toEqual(1);
+ // select the draft-js editor
+ const editorNode = container.querySelector('.public-DraftEditor-content')!;
+
+ fireEvent.keyDown(editorNode, { key: '$', code: '221', charCode: 36 });
+ expect(screen.queryAllByRole('textbox').length).toEqual(2);
+ const latex = screen.queryAllByRole('textbox')[1];
+ expect(latex).toHaveClass('TeXInput');
+ });
+
  it('renders the editor with a list of users to mention', () => {
  // load the editor with no list of users to mention
  render(

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

@@ -31,14 +31,14 @@ import {
  BlockquoteButton,
  CodeBlockButton,
 } from '@draft-js-plugins/buttons';
-import createCodeEditorPlugin from '../../draftjs-plugins/code-editor';
 import { ImageAdd } from './ImageAdd';
 import createAlignmentPlugin from '@draft-js-plugins/alignment';
 import createFocusPlugin from '@draft-js-plugins/focus';
 import createResizeablePlugin from '@draft-js-plugins/resizeable';
 import createBlockDndPlugin from '@draft-js-plugins/drag-n-drop';
 import { useIntl } from 'react-intl';
 import { messagesEditor } from './messages';
+import { getLaTeXPlugin } from 'draft-js-latex-plugin';
 
 interface MyEditorProps {
  autofocus?: boolean;
@@ -67,7 +67,6 @@ export const AshleyEditor = (props: MyEditorProps) => {
  emojiPlugin,
  linkPlugin,
  toolbarPlugin,
- codeEditorPlugin,
  blockDndPlugin,
  alignmentPlugin,
  focusPlugin,
@@ -85,7 +84,6 @@ export const AshleyEditor = (props: MyEditorProps) => {
  },
  }),
  toolbarPlugin: createToolbarPlugin(),
- codeEditorPlugin: createCodeEditorPlugin(),
  blockDndPlugin: createBlockDndPlugin(),
  alignmentPlugin: createAlignmentPlugin(),
  focusPlugin: createFocusPlugin(),
@@ -107,7 +105,9 @@ export const AshleyEditor = (props: MyEditorProps) => {
  const [{ imagePlugin }] = useState({
  imagePlugin: createImagePlugin({ decorator }),
  });
-
+ const [{ LaTeXPlugin }] = useState({
+ LaTeXPlugin: getLaTeXPlugin({}),
+ });
  const { AlignmentTool } = alignmentPlugin;
 
  useEffect(() => {
@@ -169,12 +169,12 @@ export const AshleyEditor = (props: MyEditorProps) => {
  toolbarPlugin,
  emojiPlugin,
  linkPlugin,
- codeEditorPlugin,
  blockDndPlugin,
  focusPlugin,
  alignmentPlugin,
  resizeablePlugin,
  imagePlugin,
+ LaTeXPlugin,
  ];
 
  if (props.mentions) {
@@ -183,6 +183,7 @@ export const AshleyEditor = (props: MyEditorProps) => {
  });
  const [open, setOpen] = useState(true);
  const [suggestions, setSuggestions] = useState(props.mentions);
+
  const onSearchChange = useCallback(({ value }: { value: string }) => {
  setSuggestions(defaultSuggestionsFilter(value, props.mentions!));
  }, []);

src/frontend/js/types/libs/draft-js-latex-plugin/draft-js-latex-plugin.d.ts

@@ -0,0 +1 @@
+declare module 'draft-js-latex-plugin';

src/frontend/js/utils/latex.ts

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

src/frontend/package.json

@@ -47,6 +47,7 @@
  "cljs-merge": "1.1.1",
  "css-loader": "5.2.4",
  "fetch-mock": "9.11.0",
+ "file-loader": "6.2.0",
  "intl-pluralrules": "1.2.2",
  "jest": "26.6.3",
  "lodash-es": "4.17.21",
@@ -77,14 +78,17 @@
  "@formatjs/intl-relativetimeformat": "8.1.6",
  "@fortawesome/fontawesome-free": "5.15.3",
  "@testing-library/user-event": "13.1.9",
+ "@types/katex": "0.14.0",
  "bootstrap": "4.6.0",
  "core-js": "3.11.1",
  "draft-js": "0.11.7",
  "draft-js-emoji-plugin": "2.1.3",
+ "draft-js-latex-plugin": "0.1.2",
  "draft-js-mention-plugin": "3.1.5",
  "emojione": "4.5.0",
  "es6-shim": "0.35.6",
  "highlight.js": "10.7.2",
+ "katex": "0.16.4",
  "mdn-polyfills": "5.20.0",
  "react": "17.0.2",
  "react-autosuggest": "10.1.0",

src/frontend/scss/_main.scss

@@ -20,6 +20,10 @@
 @import '@draft-js-plugins/mention/lib/plugin';
 @import '@draft-js-plugins/static-toolbar/lib/plugin';
 
+//latex code style
+@import 'draft-js-latex-plugin/lib/styles';
+@import 'katex/dist/katex';
+
 //highlight code style
 @import 'highlight.js/styles/github';
 

src/frontend/webpack.config.js

@@ -34,6 +34,10 @@ module.exports = () => {
 
  module: {
  rules: [
+ {
+ test: /\.(woff|woff2|ttf|eot|png|jpg|svg|gif)$/i,
+ use: ['file-loader'],
+ },
  { test: /\.css$/, use: ['style-loader', 'css-loader'] },
  {
  test: new RegExp(`(${babelCompileDeps.join('|')}.*)`),