My Custom Toolbar
-
+
-
- );
- },
- execute: (state: commands.TextState, api: commands.TextAreaTextApi) => {
- console.log('> execute: >>>>>', state);
- },
- buttonProps: { 'aria-label': 'Insert title' },
- }),
- // commands.divider,
- // commands.codeEdit, commands.codeLive, commands.codePreview, commands.divider,
- // commands.fullscreen,
- ]}
- />
- );
-};
-export default ExampleCustomToolbar;
diff --git a/website/ExampleKaTeX.tsx b/website/ExampleKaTeX.tsx
deleted file mode 100644
index 45840e6f3..000000000
--- a/website/ExampleKaTeX.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useState } from 'react';
-import 'katex/dist/katex.css';
-import katex from 'katex';
-import { getCodeString } from 'rehype-rewrite';
-import MDEditor from '../';
-
-const mdKaTeX = `This is to display the
-\`$$c = \\pm\\sqrt{a^2 + b^2}$$\`
- in one line
-
-\`\`\`KaTeX
-c = \\pm\\sqrt{a^2 + b^2}
-\`\`\`
-
-\`\`\`KaTeX
-\\\\f\\relax{x} = \\int_{-\\infty}^\\infty
- \\\\f\\hat\\xi\\,e^{2 \\pi i \\xi x}
- \\,d\\xi
-\`\`\`
-`;
-
-const ExampleKaTeX = () => {
- const [value, setValue] = useState(mdKaTeX);
- return (
- My Custom Toolbar
-
-
-
- {txt};
- }
- const code = props.node && props.node.children ? getCodeString(props.node.children) : txt;
- if (
- typeof code === 'string' &&
- typeof className === 'string' &&
- /^language-katex/.test(className.toLocaleLowerCase())
- ) {
- const html = katex.renderToString(code, {
- throwOnError: false,
- });
- return {txt};
- },
- },
- }}
- />
- );
-};
-
-export default ExampleKaTeX;
diff --git a/website/ExampleMermaid.tsx b/website/ExampleMermaid.tsx
deleted file mode 100644
index ce33e4b73..000000000
--- a/website/ExampleMermaid.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-// @ts-ignore
-import mermaid from 'mermaid';
-import MDEditor from '../';
-
-const mdMermaid = `The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it.
-
-\`\`\`mermaid
-graph TD
-A[Hard] -->|Text| B(Round)
-B --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Two| E[Result 2]
-\`\`\`
-
-\`\`\`mermaid
-sequenceDiagram
-Alice->>John: Hello John, how are you?
-loop Healthcheck
- John->>John: Fight against hypochondria
-end
-Note right of John: Rational thoughts!
-John-->>Alice: Great!
-John->>Bob: How about you?
-Bob-->>John: Jolly good!
-\`\`\`
-`;
-
-const randomid = () => parseInt(String(Math.random() * 1e15), 10).toString(36);
-
-const Code = ({ inline, children = [], className, ...props }: any) => {
- const demoid = useRef(`dome${randomid()}`);
- const code = getCode(children);
- const demo = useRef(null);
- useEffect(() => {
- if (demo.current) {
- try {
- const str = mermaid.render(demoid.current, code, () => null, demo.current);
- // @ts-ignore
- demo.current.innerHTML = str;
- } catch (error) {
- // @ts-ignore
- demo.current.innerHTML = error;
- }
- }
- }, [code, demo]);
-
- if (
- typeof code === 'string' &&
- typeof className === 'string' &&
- /^language-mermaid/.test(className.toLocaleLowerCase())
- ) {
- return (
-
-
- );
- }
- return {children};
-};
-
-const getCode = (arr: any = []) =>
- arr
- .map((dt: any) => {
- if (typeof dt === 'string') {
- return dt;
- }
- if (dt.props && dt.props.children) {
- return getCode(dt.props.children);
- }
- return false;
- })
- .filter(Boolean)
- .join('');
-
-export default function ExampleMermaid() {
- const [value, setValue] = useState(mdMermaid);
- return (
- 
- Custom toolbar.
-
- Example Code
-
-
-
- Support Custom KaTeX Preview.
-
- Example Code
-
-
-
- Support Custom Mermaid Preview.
-
- Example Code
-
-
-