Skip to content

Commit

Permalink
feat: V2
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:
- Easier plugin format
- State format management change - systems are replaced with global
  cells/singals
- Upgrade to the Lexical 0.12.5
- Upgrade the toolchain to mdast 2.0
- Removed individual exports - tree shaking works just fine
  • Loading branch information
@petyosi
petyosi committed Jan 4, 2024
1 parent 3c35b02 commit bfa763c
Show file tree
Hide file tree
Showing 128 changed files with 11,481 additions and 20,768 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ temp
etc
uploads
tsdoc-metadata.json
.vscode
11 changes: 0 additions & 11 deletions api-documenter.json
View file

This file was deleted.

400 changes: 0 additions & 400 deletions api-extractor.json
View file

This file was deleted.

3 changes: 1 addition & 2 deletions docs/admonitions.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ 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).
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 pre-made styling (icons, colors, etc).

The admonitions are, in fact, just [conventional container directives](./custom-directive-editors). The MDXEditor package ships a pre-made directive `AdmonitionDirectiveDescriptor` that enables the usage of admonitions in your markdown document.

Expand Down Expand Up @@ -34,7 +34,6 @@ Some **content** with _Markdown_ syntax.
:::
`


export const Admonitions: React.FC = () => {
return (
<MDXEditor
Expand Down
24 changes: 10 additions & 14 deletions docs/basic-formatting.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,26 @@ position: 0.1

# Basic Formatting

In its bare form, MDXEditor supports only the most basic formatting - **bold**, *italic*, <u>underline</u> 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.
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. Several plugins 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.
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'
import { MDXEditor, headingsPlugin } from '@mdxeditor/editor'

//...
<MDXEditor markdown='# Hello world' plugins={[headingsPlugin()]} />
;<MDXEditor markdown="# Hello world" plugins={[headingsPlugin()]} />
```

## Quotes

The Quote plugin enables the usage of quotes which translate to `blockquote` in HTML.
The Quote plugin enables the usage of quotes that translate to `blockquote`` in HTML.

```tsx

import { MDXEditor } from '@mdxeditor/editor/MDXEditor'
import { quotePlugin } from '@mdxeditor/editor/plugins/quote'
import { quotePlugin , MDXEditor } from '@mdxeditor/editor'

const markdown = "> This is a quote"

Expand All @@ -38,12 +35,11 @@ const markdown = "> This is a quote"

## Lists

The Lists plugin enables the usage of ordered, unordered and check lists, including multiple levels of nesting.
The Lists plugin enables the usage of ordered, unordered, and checklists, including multiple levels of nesting.

```tsx

import { MDXEditor } from '@mdxeditor/editor/MDXEditor'
import { listsPlugin } from '@mdxeditor/editor/plugins/lists'
import { listsPlugin, MDXEditor } from '@mdxeditor/editor'

const markdown = `
* Item 1
Expand All @@ -64,8 +60,7 @@ const markdown = `
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'
import { thematicBreakPlugin, MDXEditor } from '@mdxeditor/editor'

const markdown = `
Hello
Expand All @@ -77,3 +72,4 @@ World

//...
<MDXEditor markdown={markdown} plugins={[thematicBreakPlugin()]} />
```
134 changes: 68 additions & 66 deletions docs/customizing-toolbar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,27 @@ position: 0.2

MDXEditor includes a toolbar plugin and a set of toolbar components that you can arrange up to your preferences and the features you have enabled. Most toolbar components need their respective plugins to be enabled in order to work correctly. The next example enables a simple toolbar with undo/redo and bold/italic/underline components in it. Following the same pattern, you can add, rearrange, or add custom toolbar components.

Note: Most of the components accept any properties, but some read the configuration parameters of their respective plugins. A notable exception is the DiffSourceToggleWrapper which requires its children to be the toolbar contents.
Note: Most of the components do not accept any properties, but some read the configuration parameters of their respective plugins. A notable exception is the `DiffSourceToggleWrapper` which requires its children to be the toolbar contents.

```tsx
import '@mdxeditor/editor/style.css'
import { MDXEditor } from '@mdxeditor/editor/MDXEditor'
import { UndoRedo } from '@mdxeditor/editor/plugins/toolbar/components/UndoRedo'
import { BoldItalicUnderlineToggles } from '@mdxeditor/editor/plugins/toolbar/components/BoldItalicUnderlineToggles'
import { toolbarPlugin } from '@mdxeditor/editor/plugins/toolbar'
import { MDXEditor, UndoRedo, BoldItalicUnderlineToggles, toolbarPlugin } from '@mdxeditor/editor'

function App() {
return (
<MDXEditor markdown='Hello world'
plugins={[toolbarPlugin({
toolbarContents: () => ( <> <UndoRedo /><BoldItalicUnderlineToggles /></>)
})]}
<MDXEditor
markdown="Hello world"
plugins={[
toolbarPlugin({
toolbarContents: () => (
<>
{' '}
<UndoRedo />
<BoldItalicUnderlineToggles />
</>
)
})
]}
/>
)
}
Expand All @@ -34,115 +40,111 @@ export default App

The package comes with a set of built-in toolbar components that give access to the capabilities of the editor. Below is a list of the available components and the plugins they require.

### [BlockTypeSelect](../api/editor.blocktypeselect)
### `BlockTypeSelect`

A toolbar component that allows the user to change the block type of the current selection. Supports paragraphs, headings and block quotes.
A toolbar component that allows the user to change the block type of the current selection. Supports paragraphs, headings, and block quotes.

### [BoldItalicUnderlineToggles](../api/editor.bolditalicunderlinetoggles)
### `BoldItalicUnderlineToggles`

A toolbar component that lets the user toggle bold, italic and underline formatting.
A toolbar component that lets the user toggle bold, italic, and underline formatting.

### [ChangeAdmonitionType](../api/editor.changeadmonitiontype)
### `ChangeAdmonitionType`

A component that allows the user to change the admonition type of the current selection. For this component to work, you must pass the [AdmonitionDirectiveDescriptor](../api/editor.admonitiondirectivedescriptor) to the <code>directivesPlugin</code> <code>directiveDescriptors</code> parameter.
A component that allows the user to change the admonition type of the current selection. For this component to work, you must pass the `AdmonitionDirectiveDescriptor` to the `directivesPlugin` `directiveDescriptors` parameter.

### [ChangeCodeMirrorLanguage](../api/editor.changecodemirrorlanguage)
### `ChangeCodeMirrorLanguage`

A component that allows the user to change the code block language of the current selection. For this component to work, you must enable the <code>codeMirrorPlugin</code> for the editor. See [ConditionalContents](../api/editor.conditionalcontents) for an example on how to display the dropdown only when a code block is in focus.
A component that allows the user to change the code block language of the current selection. For this component to work, you must enable the `codeMirrorPlugin` for the editor. See the `ConditionalContents` API reference for an example of how to display the dropdown only when a code block is in focus.

### [CodeToggle](../api/editor.codetoggle)
### `CodeToggle`

A toolbar component that lets the user toggle code formatting. Use for inline <code>code</code> elements (like variables, methods, etc).
A toolbar component that lets the user toggle code formatting. Use for inline `code` elements (like variables, methods, etc).

### [CreateLink](../api/editor.createlink)
### `CreateLink`

A toolbar component that opens the link edit dialog. For this component to work, you must include the <code>linkDialogPlugin</code>.
A toolbar component that opens the link edit dialog. For this component to work, you must include the `linkDialogPlugin`.

### [DiffSourceToggleWrapper](../api/editor.diffsourcetogglewrapper)
### `DiffSourceToggleWrapper`

A wrapper element for the toolbar contents that lets the user toggle between rich text, diff and source mode. Put the rich text toolbar contents as children of this component. For this component to work, you must include the <code>diffSourcePlugin</code>.
A wrapper element for the toolbar contents that lets the user toggle between rich text, diff, and source mode. Put the rich text toolbar contents as children of this component. For this component to work, you must include the `diffSourcePlugin`.

### [InsertAdmonition](../api/editor.insertadmonition)
### `InsertAdmonition`

A toolbar dropdown button that allows the user to insert admonitions. For this to work, you need to have the <code>directives</code> plugin enabled with the [AdmonitionDirectiveDescriptor](../api/editor.admonitiondirectivedescriptor) configured.
A toolbar dropdown button that allows the user to insert admonitions. For this to work, you need to have the `directives` plugin enabled with the `AdmonitionDirectiveDescriptor` configured.

### [InsertCodeBlock](../api/editor.insertcodeblock)
### `InsertCodeBlock`

A toolbar button that allows the user to insert a fenced code block. Once the code block is focused, you can construct a special code block toolbar for it, using the [ConditionalContents](../api/editor.conditionalcontents) primitive. See the [ConditionalContents](../api/editor.conditionalcontents) documentation for an example.
A toolbar button that allows the user to insert a fenced code block. Once the code block is focused, you can construct a special code block toolbar for it, using the `ConditionalContents` primitive. See the `ConditionalContents` documentation for an example.

### [InsertFrontmatter](../api/editor.insertfrontmatter)
### `InsertFrontmatter`

A toolbar button that allows the user to insert a [front-matter](https://jekyllrb.com/docs/front-matter/) editor (if one is not already present). For this to work, you need to have the <code>frontmatterPlugin</code> plugin enabled.
A toolbar button that allows the user to insert a [front-matter](https://jekyllrb.com/docs/front-matter/) editor (if one is not already present). For this to work, you need to have the `frontmatterPlugin` plugin enabled.

### [InsertImage](../api/editor.insertimage)
### `InsertImage`

A toolbar button that allows the user to insert an image from an URL. For the button to work, you need to have the <code>imagePlugin</code> plugin enabled.
A toolbar button that allows the user to insert an image from a URL. For the button to work, you need to have the `imagePlugin` plugin enabled.

### [InsertSandpack](../api/editor.insertsandpack)
### `InsertSandpack`

A dropdown button that allows the user to insert a live code block into the editor. The dropdown offers a list of presets that are defined in the sandpack plugin config. For this to work, you need to have the <code>sandpackPlugin</code> installed.
A dropdown button that allows the user to insert a live code block into the editor. The dropdown offers a list of presets that are defined in the Sandpack plugin config. For this to work, you need to have the `sandpackPlugin` installed.

### [InsertTable](../api/editor.inserttable)
### `InsertTable`

A toolbar button that allows the user to insert a table. For this button to work, you need to have the <code>tablePlugin</code> plugin enabled.
A toolbar button that allows the user to insert a table. For this button to work, you need to have the `tablePlugin` plugin enabled.

### [InsertThematicBreak](../api/editor.insertthematicbreak)
### `InsertThematicBreak`

A toolbar button that allows the user to insert a thematic break (rendered as an HR HTML element). For this button to work, you need to have the <code>thematicBreakPlugin</code> plugin enabled.
A toolbar button that allows the user to insert a thematic break (rendered as an HR HTML element). For this button to work, you need to have the `thematicBreakPlugin` plugin enabled.

### [ListsToggle](../api/editor.liststoggle)
### `ListsToggle`

A toolbar toggle that allows the user to toggle between bulleted and numbered lists. Pressing the selected button will convert the current list to the other type. Pressing it again will remove the list. For this button to work, you need to have the <code>listsPlugin</code> plugin enabled.
A toolbar toggle that allows the user to toggle between bulleted and numbered lists. Pressing the selected button will convert the current list to the other type. Pressing it again will remove the list. For this button to work, you need to have the `listsPlugin` plugin enabled.

### [ShowSandpackInfo](../api/editor.showsandpackinfo)
### `ShowSandpackInfo`

A component that displays the focused live code block's name. For this component to work, you must enable the <code>sandpackPlugin</code> for the editor. See [ConditionalContents](../api/editor.conditionalcontents) for an example on how to display the dropdown only when a Sandpack editor is in focus.
A component that displays the focused live code block's name. For this component to work, you must enable the `sandpackPlugin` for the editor. See `ConditionalContents` for an example of how to display the dropdown only when a Sandpack editor is in focus.

### [UndoRedo](../api/editor.undoredo)

A toolbar component that lets the user undo and redo changes in the editor.
### `UndoRedo`

A toolbar component that lets the user undo and redo changes in the editor.

## Toolbar primitives for custom components

The editor toolbar is a styled wrapper around the Radix UI [Toolbar](https://radix-ui.com/primitives/docs/components/toolbar) component.
The editor toolbar is a styled wrapper around the Radix UI [Toolbar](https://radix-ui.com/primitives/docs/components/toolbar) component.
To maintain consistent styling with the existing tools in your own components, you can use the primitives listed below.

### [SingleChoiceToggleGroup](../api/editor.singlechoicetogglegroup)

A toolbar primitive that allows you to build an UI with multiple exclusive toggle groups, like the list type toggle.

### [Separator](../api/editor.separator)
### `SingleChoiceToggleGroup`

A toolbar primitive that allows you to show a separator between toolbar items. By default, the separator is styled as vertical line.
A toolbar primitive that allows you to build a UI with multiple exclusive toggle groups, like the list type toggle.

### [Select](../api/editor.select)
### `Separator`

A toolbar primitive you can use to build dropdowns, such as the block type select. See [SelectProps](../api/editor.selectprops) for more details.
A toolbar primitive that allows you to show a separator between toolbar items. By default, the separator is styled as a vertical line.

### [MultipleChoiceToggleGroup](../api/editor.multiplechoicetogglegroup)
### `Select`

A toolbar primitive that allows you to build an UI with multiple non-exclusive toggle groups, like the bold/italic/underline toggle.
A toolbar primitive you can use to build dropdowns, such as the block type select.

### [DialogButton](../api/editor.dialogbutton)
### `MultipleChoiceToggleGroup`

Use this primitive to create a toolbar button that opens a dialog with a text input, autocomplete suggestions, and a submit button.
A toolbar primitive that allows you to build a UI with multiple non-exclusive toggle groups, like the bold/italic/underline toggle.

See [DialogButtonProps](../api/editor.dialogbuttonprops) for the properties that can be passed to this component.
### `DialogButton`

Use this primitive to create a toolbar button that opens a dialog with text input, autocomplete suggestions, and a submit button.

### [ConditionalContents](../api/editor.conditionalcontents)
### `ConditionalContents`

A toolbar primitive that allows you to show different contents based on the editor that is in focus. Useful for code editors that have different features and don't support rich text formatting.
A toolbar primitive that allows you to show different contents based on the editor that is in focus. Useful for code editors that have different features and don't support rich text formatting.

### [ButtonWithTooltip](../api/editor.buttonwithtooltip)
### `ButtonWithTooltip`

A toolbar button with a custom toolbar primitive.
A toolbar button with a custom toolbar primitive.

### [Button](../api/editor.button)
### `Button`

A toolbar button primitive.
A vanilla toolbar button primitive.

### [ButtonOrDropdownButton](../api/editor.buttonordropdownbutton)
### `ButtonOrDropdownButton`

Use this primitive to create a toolbar button that can be either a button or a dropdown, depending on the number of items passed.
Use this primitive to create a toolbar button that can be either a button or a dropdown, depending on the number of items passed.
3 changes: 1 addition & 2 deletions docs/diff-source.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ position: 0.7

# Diff/source mode

The diff/source plugin allows the user to switch to editing the markdown source of the document or to compare it to the initial version of the document.
The diff/source plugin allows the user to switch to editing the markdown source of the document or to compare it to the initial version of the document.
It's an useful integration if you're building something for power users that are familiar with markdown. The plugin is enabled by the `DiffSourceToggleWrapper` toolbar component.

```tsx
Expand All @@ -27,4 +27,3 @@ It's an useful integration if you're building something for power users that are
]}
/>
```

Loading

0 comments on commit bfa763c

Please sign in to comment.