Aug 21 2019 01:22 PM
I am attempting to create a webpart that will allow me to inject html into a modern page. I have that portion working. I now want to be able to use the MathJax library to insert mathematical formulas into a page. I think I have referenced the library correctly but because the user is allowed to edit the html on the fly, MathJax never does anything with the LaTeX code within the html. I will paste my code here. I am hoping that someone will have an idea of how to get this to work.
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './HtmlWebPart.module.scss';
import * as strings from 'HtmlWebPartStrings';
import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor';
import * as mathjax from 'mathjax';
export interface IHtmlWebPartProps {
description: string;
htmlCode: string;
}
export default class HtmlWebPart extends BaseClientSideWebPart {
public render(): void {
this.domElement.innerHTML = `
${ this.properties.htmlCode }
`;
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: "This web part allows you to enter HTML code directly into a page."
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyFieldCodeEditor('htmlCode', {
label: 'Edit HTML Code',
panelTitle: 'Edit HTML Code',
initialValue: this.properties.htmlCode,
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties,
disabled: false,
key: 'codeEditorFieldId',
language: PropertyFieldCodeEditorLanguages.HTML
})
]
}
]
}
]
};
}
}