Add markdown to html tool

components/editors/html-editor.tsx

@@ -0,0 +1,18 @@
+import { html } from '@codemirror/lang-html';
+import { FunctionComponent } from 'react';
+import BaseEditor from './base-editor';
+
+const HtmlEditor: FunctionComponent<{
+  value: string;
+  showValidMsg?: boolean;
+  onValueChange?: (value: string) => void;
+  onErrorChange?: (
+    currentValue: string,
+    viewUpdate: any
+  ) => { message: string };
+  hideGoToLine?: boolean;
+}> = function (props) {
+  return <BaseEditor lang='html' editorExtensions={[html()]} {...props} />;
+};
+
+export default HtmlEditor;

components/editors/markdown-editor.tsx

@@ -0,0 +1,20 @@
+import { markdown } from '@codemirror/lang-markdown';
+import { FunctionComponent } from 'react';
+import BaseEditor from './base-editor';
+
+const MarkdownEditor: FunctionComponent<{
+  value: string;
+  showValidMsg?: boolean;
+  onValueChange?: (value: string) => void;
+  onErrorChange?: (
+    currentValue: string,
+    viewUpdate: any
+  ) => { message: string };
+  hideGoToLine?: boolean;
+}> = function (props) {
+  return (
+    <BaseEditor lang='markdown' editorExtensions={[markdown()]} {...props} />
+  );
+};
+
+export default MarkdownEditor;

components/tools-cta.tsx

@@ -0,0 +1,35 @@
+import { FunctionComponent } from 'react';
+import Quote from './quote';
+
+const ToolsCta: FunctionComponent = function () {
+  return (
+    <Quote colorScheme='secondary'>
+      <h4 className='fw-medium'>
+        💡 This tool is provided for free by Mockoon!
+      </h4>
+      <p>
+        Mockoon is a{' '}
+        <strong>powerful and user-friendly API mocking tool</strong> designed
+        for developers and teams to streamline their development process. With
+        Mockoon, you can effortlessly{' '}
+        <strong>create and manage mock APIs</strong>, allowing for rapid
+        prototyping and testing without the need for a live backend.
+      </p>
+      <p>
+        Its intuitive interface lets you quickly set up mock servers, customize
+        responses, and simulate different scenarios, all in real-time. By
+        integrating Mockoon into your workflow, you can{' '}
+        <strong>enhance collaboration</strong>
+        among team members, <strong>reduce development time</strong>, and ensure
+        a smoother, <strong>more efficient testing phase</strong>.
+      </p>
+      <div className='mt-4'>
+        <a href='/download/' className='btn btn-primary-subtle btn-xs'>
+          <i className='icon-download me-2'></i> Download
+        </a>
+      </div>
+    </Quote>
+  );
+};
+
+export default ToolsCta;