From 3d382dacd0331f9313636a6f0ecf571399777286 Mon Sep 17 00:00:00 2001 From: Petyo Ivanov Date: Fri, 27 Oct 2023 09:01:21 +0200 Subject: [PATCH] Read the docs from the editor repo --- .github/workflows/release.yml | 1 + .gitignore | 2 + docs/.gitkeep | 0 docs/admonitions.md | 55 ------------ docs/basic-formatting.md | 79 ----------------- docs/code-blocks.md | 139 ----------------------------- docs/content-styling.md | 33 ------- docs/custom-directive-editors.md | 136 ---------------------------- docs/customizing-toolbar.md | 148 ------------------------------- docs/diff-source.md | 30 ------- docs/extending-the-editor.md | 87 ------------------ docs/front-matter.md | 31 ------- docs/getting-started.md | 145 ------------------------------ docs/images.md | 82 ----------------- docs/jsx.md | 105 ---------------------- docs/links.md | 47 ---------- docs/live-demo-contents.md | 72 --------------- docs/markdown-processing.md | 19 ---- docs/markdown-shortcuts.md | 33 ------- docs/overview.md | 35 -------- docs/tables.md | 34 ------- docs/theming.md | 77 ---------------- scripts/update-docs.sh | 1 + 23 files changed, 4 insertions(+), 1387 deletions(-) create mode 100644 docs/.gitkeep delete mode 100644 docs/admonitions.md delete mode 100644 docs/basic-formatting.md delete mode 100644 docs/code-blocks.md delete mode 100644 docs/content-styling.md delete mode 100644 docs/custom-directive-editors.md delete mode 100644 docs/customizing-toolbar.md delete mode 100644 docs/diff-source.md delete mode 100644 docs/extending-the-editor.md delete mode 100644 docs/front-matter.md delete mode 100644 docs/getting-started.md delete mode 100644 docs/images.md delete mode 100644 docs/jsx.md delete mode 100644 docs/links.md delete mode 100644 docs/live-demo-contents.md delete mode 100644 docs/markdown-processing.md delete mode 100644 docs/markdown-shortcuts.md delete mode 100644 docs/overview.md delete mode 100644 docs/tables.md delete mode 100644 docs/theming.md diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 1b5951d..44067c4 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -52,6 +52,7 @@ jobs: - name: Build API reference docs working-directory: temp/editor run: | + cp -r docs/*.md ../../docs mkdir etc npm install --legacy-peer-deps npm run build diff --git a/.gitignore b/.gitignore index 1855477..5df5e8c 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,5 @@ yarn-error.log* next-env.d.ts api-ref temp + +docs/* diff --git a/docs/.gitkeep b/docs/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/docs/admonitions.md b/docs/admonitions.md deleted file mode 100644 index efe93dc..0000000 --- a/docs/admonitions.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Admonitions -slug: Admonitions -position: 0.815 ---- - -# Admonitions - -Admonitions (also known as callouts or tips) are a common way to highlight some text in a markdown document. [Docusaurus uses them extensively](https://docusaurus.io/docs/markdown-features/admonitions) in its documentation, and provides a pre-made styling (icons, colors, etc). - -The admonitions are, in fact, just [conventional container directives](./directives). The MDXEditor package ships a pre-made directive `AdmonitionDirectiveDescriptor` that enables the usage of admonitions in your markdown document. - -```tsx -const admonitionMarkdown = ` - -:::note -foo -::: - -:::tip -Some **content** with _Markdown_ syntax. Check [this component](https://virtuoso.dev/). -::: - -:::info -Some **content** with _Markdown_ syntax. -::: - -:::caution -Some **content** with _Markdown_ syntax. -::: - -:::danger -Some **content** with _Markdown_ syntax. -::: -` - - -export const Admonitions: React.FC = () => { - return ( - - ) -} -``` diff --git a/docs/basic-formatting.md b/docs/basic-formatting.md deleted file mode 100644 index 3bf9110..0000000 --- a/docs/basic-formatting.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Basic Formatting -slug: basic-formatting -position: 0.1 ---- - -# Basic Formatting - -In its bare form, MDXEditor supports only the most basic formatting - **bold**, *italic*, underline and `inline code`. It's enough to write a simple text, but not much more. There are several plugins that allow the users to create a document structure and apply semantic formatting. - -## Headings - -The Headings plugin enables the usage of markdown headings which translate to `H1` - `H6` in HTML. - -```tsx - -import { MDXEditor } from '@mdxeditor/editor/MDXEditor' -import { headingsPlugin } from '@mdxeditor/editor/plugins/headings' - -//... - -``` - -## Quotes - -The Quote plugin enables the usage of quotes which translate to `blockquote` in HTML. - -```tsx - -import { MDXEditor } from '@mdxeditor/editor/MDXEditor' -import { quotePlugin } from '@mdxeditor/editor/plugins/quote' - -const markdown = "> This is a quote" - -//... - -``` - -## Lists - -The Lists plugin enables the usage of ordered and unordered lists, including multiple levels of nesting. - -```tsx - -import { MDXEditor } from '@mdxeditor/editor/MDXEditor' -import { listsPlugin } from '@mdxeditor/editor/plugins/lists' - -const markdown = ` - * Item 1 - * Item 2 - * Item 3 - * nested item - - 1. Item 1 - 2. Item 2 -` - -//... - -``` - -## Thematic Break - -The Thematic Break plugin enables the usage of thematic breaks which translate to `hr` in HTML. - -```tsx -import { MDXEditor } from '@mdxeditor/editor/MDXEditor' -import { thematicBreakPlugin } from '@mdxeditor/editor/plugins/thematic-break' - -const markdown = ` -Hello - ---- - -World -` - -//... - diff --git a/docs/code-blocks.md b/docs/code-blocks.md deleted file mode 100644 index fbad184..0000000 --- a/docs/code-blocks.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Code blocks -slug: code-blocks -position: 0.6 ---- - -# Code blocks - -The code block plugin enables support for fenced code blocks, but does not include any code editing UI. The `codeMirrorPlugin` and the `sandpackPlugin` build on top of it to provide a code editing experience. The next example enables both plugins along with their respective toolbar components. - -```tsx -const defaultSnippetContent = ` -export default function App() { - return ( -
-

Hello CodeSandbox

-

Start editing to see some magic happen!

-
- ); -} -`.trim() - -const simpleSandpackConfig: SandpackConfig = { - defaultPreset: 'react', - presets: [ - { - label: 'React', - name: 'react', - meta: 'live react', - sandpackTemplate: 'react', - sandpackTheme: 'light', - snippetFileName: '/App.js', - snippetLanguage: 'jsx', - initialSnippetContent: defaultSnippetContent - }, - ] -} - -function App() { - return ( - ( - editor?.editorType === 'codeblock', contents: () => }, - { when: (editor) => editor?.editorType === 'sandpack', contents: () => }, - { fallback: () => ( <> - - - ) } - ]} - />) - }) - ] - } - /> - ) -} -``` - -````md -Blocks of code - -JavaScript: - -```js -export default function App() { - return

Hello world from a markdown

-} -``` - -CSS: - -```css -body { - color: red; -} -``` - -React Sandpack: - -```tsx live react -export default function App() { - return

Hello world from a markdown

-} -``` -```` - -## Configuring the CodeMirror editor - -The code mirror editor plugin enables editing of fenced code blocks with basic code editing features like syntax highlighting, indentation and bracket matching. A set of toolbar component utilities support the display of a language selector when the block is in focus, while hiding the rich text editor controls. The plugin accepts supported languages as a parameter option. - -## Configuring the Sandpack editor - -Compared to the code mirror editor, the Sandpack one is a bit more complex, as Sandpack needs to know the context of the code block in order to execute it correctly. Before diving in, it's good to [understand Sandpack configuration](https://sandpack.codesandbox.io/) itself. MDXEditor supports multiple Sandpack configurations, based on the meta data of the code block. To configure the supported presets, pass a `sandpackConfig` option in the plugin initialization. For more details, refer to the [SandpackConfig interface](../api/editor.sandpackconfig) and the [SandpackPreset interface](../api/editor.sandpackpreset). - -## Build a custom code block editor - -You can implement your own stack of custom code editors by passing a code block editor descriptor to the `codeBlockPlugin`. The next example uses a plain text textarea to edit the code block content. More details about each of the constructs in the example can be found in the API reference. - -```tsx -const PlainTextCodeEditorDescriptor: CodeBlockEditorDescriptor = { - // always use the editor, no matter the language or the meta of the code block - match: (language, meta) => true, - // You can have multiple editors with different priorities, so that there's a "catch-all" editor (with the lowest priority) - priority: 0, - // The Editor is a React component - Editor: (props) => { - const cb = useCodeBlockEditorContext() - // stops the proppagation so that the parent lexical editor does not handle certain events. - return ( -
e.nativeEvent.stopImmediatePropagation()}> -