diff --git a/src/components/mathpix-markdown/index.tsx b/src/components/mathpix-markdown/index.tsx
index d1966755..2057c309 100644
--- a/src/components/mathpix-markdown/index.tsx
+++ b/src/components/mathpix-markdown/index.tsx
@@ -1,87 +1,47 @@
+
 import * as React from 'react';
-import { 
-  MathpixMarkdownModel as MM, 
-  optionsMathpixMarkdown, 
-  TMarkdownItOptions,
-  ParserErrors
-} from '../../mathpix-markdown-model';
+import { MathpixMarkdownModel as MM, optionsMathpixMarkdown, TMarkdownItOptions, ParserErrors } from '../../mathpix-markdown-model';
 import { eMmdRuleType } from "../../markdown/common/mmdRules";
 import { getDisableRuleTypes } from "../../markdown/common/mmdRulesToDisable";
 
-
-export interface MathpixMarkdownProps extends optionsMathpixMarkdown{
+export interface MathpixMarkdownProps extends optionsMathpixMarkdown {
     text: string;
 }
 
-class MathpixMarkdown extends React.Component<MathpixMarkdownProps> {
-    render() {
-        const { text, alignMathBlock='center', display='block', isCheckFormula=false, showTimeLog=false,isDisableFancy=false,
-          isDisableEmoji = false, isDisableEmojiShortcuts = false, isDisableRefs = false, isDisableFootnotes = false,
-          htmlTags=false, width=0, breaks=true, typographer=false, linkify=false, xhtmlOut=false,
-          outMath={}, mathJax={}, htmlSanitize = {}, smiles = {}, openLinkInNewWindow = true,
-          enableFileLinks = false, validateLink = null,
-          accessibility = null,
-          nonumbers = false,
-          showPageBreaks = false,
-          centerImages = true,
-          centerTables = true,
-          enableCodeBlockRuleForLatexCommands = false,
-          addPositionsToTokens = false,
-          highlights = [],
-          parserErrors = ParserErrors.show,
-          codeHighlight = {},
-          footnotes = {},
-          copyToClipboard = false,
-          renderOptions = null,
-          previewUuid = ""
-        } = this.props;
-        const disableRules = isDisableFancy ? MM.disableFancyArrayDef : this.props.disableRules || [];
-        const disableRuleTypes: eMmdRuleType[] = renderOptions ? getDisableRuleTypes(renderOptions) : [];
-        const markdownItOptions: TMarkdownItOptions = {
-            isDisableFancy: isDisableFancy,
-            isDisableEmoji: isDisableEmoji,
-            isDisableEmojiShortcuts: isDisableEmojiShortcuts,
-            isDisableRefs: isDisableRefs,
-            isDisableFootnotes: isDisableFootnotes,
-            disableRules: disableRules,
-            htmlTags: htmlTags && !disableRuleTypes.includes(eMmdRuleType.html),
-            xhtmlOut: xhtmlOut,
-            breaks: breaks,
-            typographer: typographer,
-            linkify: linkify,
-            width: width,
-            outMath: outMath,
-            mathJax: mathJax,
-            htmlSanitize: htmlSanitize,
-            smiles: smiles,
-            openLinkInNewWindow: openLinkInNewWindow,
-            enableFileLinks: enableFileLinks,
-            validateLink: validateLink,
-            accessibility: accessibility,
-            nonumbers: nonumbers,
-            showPageBreaks: showPageBreaks,
-            centerImages: centerImages,
-            centerTables: centerTables,
-            enableCodeBlockRuleForLatexCommands: enableCodeBlockRuleForLatexCommands,
-            addPositionsToTokens: addPositionsToTokens,
-            highlights: highlights,
-            parserErrors: parserErrors,
-            codeHighlight: codeHighlight,
-            footnotes: footnotes,
-            copyToClipboard: copyToClipboard,
-            renderOptions: renderOptions,
-            previewUuid: previewUuid
-        };
+const MathpixMarkdown: React.FC<MathpixMarkdownProps> = ({
+    text,
+    alignMathBlock = 'center',
+    display = 'block',
+    isCheckFormula = false,
+    showTimeLog = false,
+    isDisableFancy = false,
+    disableRules,
+    renderOptions,
+    ...rest
+}) => {
+    const effectiveDisableRules = isDisableFancy ? MM.disableFancyArrayDef : disableRules || [];
+    const disableRuleTypes: eMmdRuleType[] = renderOptions ? getDisableRuleTypes(renderOptions) : [];
+
+    const markdownItOptions: TMarkdownItOptions = {
+        isDisableFancy,
+        disableRules: effectiveDisableRules,
+        htmlTags: rest.htmlTags && !disableRuleTypes.includes(eMmdRuleType.html),
+        renderOptions,
+        ...rest
+    };
+
+    MM.setOptions(effectiveDisableRules, isCheckFormula, showTimeLog);
+
+    return (
+        <div id='preview' style={{justifyContent: alignMathBlock, padding: '10px', overflowY: 'auto', willChange: 'transform'}}>
+            <div id='container-ruller' />
+            <div 
+                id='setText' 
+                style={{display, justifyContent: 'inherit'}}
+                dangerouslySetInnerHTML={{ __html: MM.convertToHTML(text, markdownItOptions) }}
+            />
+        </div>
+    );
+};
 
-         MM.setOptions(disableRules, isCheckFormula, showTimeLog);
-        return (
-            <div id='preview' style={{justifyContent: alignMathBlock, padding: '10px', overflowY: 'auto', willChange: 'transform'}}>
-                <div id='container-ruller'></div>
-                <div id='setText' style={{display: display, justifyContent: 'inherit'}}
-                     dangerouslySetInnerHTML={{ __html: MM.convertToHTML(text, markdownItOptions)}}
-                />
-            </div>
-        );
-    }
-}
 export default MathpixMarkdown;