-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: list of plugins and mardown shortcut detail page
- Loading branch information
Showing
2 changed files
with
121 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| # Markdown Shortcut Plugin | ||
|
|
||
| This plugin enables mardown shortcuts for formatting texts and other elements. For instance, `#` followed by space can be used to create a heading. | ||
|
|
||
| ## Usage | ||
|
|
||
| Include the `MarkdownShortcutPlugin` inside the `Composer` as shown below: | ||
|
|
||
| ```svelte | ||
| <Composer {initialConfig}> | ||
| <div class="editor-shell"> | ||
| <ToolbarRichText /> | ||
| <div class="editor-container"> | ||
| <div class="editor-scroller"> | ||
| <div class="editor"> | ||
| <ContentEditable /> | ||
| </div> | ||
| </div> | ||
| <RichTextPlugin /> | ||
| <!-- other plugins --> | ||
| <MarkdownShortcutPlugin transformers={ALL_TRANFORMERS} /> | ||
| <!-- other plugins --> | ||
| </div> | ||
| </div> | ||
| </Composer> | ||
| ``` | ||
|
|
||
| ## Transformers | ||
|
|
||
| You can specify which transformers to enable in the `transformers` attribute. | ||
|
|
||
| Here is the list of supported transformers: | ||
|
|
||
| | Transformer | Description | | ||
| | :--------------------- | :------------------------------------------------------------------------------------------------------------------------- | | ||
| | BOLD_STAR | Enclose text in ** to make it to bold (e.g. `**bold text\*\*`) | | ||
| | BOLD_UNDERSCORE | Enclose text in ** to make it to bold (e.g. `**bold text\_\_`) | | ||
| | ITALIC_STAR | Enclose text in * to make it italic (e.g. `*italic text\*`) | | ||
| | ITALIC_UNDERSCORE | Enclose text in _ to make it italic (e.g. `\_italic text_`) | | ||
| | BOLD_ITALIC_STAR | Enclose text in **_ to make it to bold and italic (e.g. `_**bold text\*\*\*`) | | ||
| | BOLD_ITALIC_UNDERSCORE | Enclose text in ** to make it to bold and italic (e.g. `\_**bold text\_\_\_`) | | ||
| | INLINE_CODE | Enclose text in backticks to convert it to inline code (e.g. `let value = 5`) | | ||
| | HIGHLIGHT | Enclose text in `==` to highlight (e.g. `==highlight==`) | | ||
| | STRIKETHROUGH | Enclose text in ~~ for strikethrough (e.g. `~~strikethrough~~`) | | ||
| | HEADING | Type `# ` to create a heading. Supports H1 to H6 (e.g. `### ` creates H3) | | ||
| | QUOTE | Type `> ` to create a quote | | ||
| | CODE | Type ` ``` ` followed by space to create a code block | | ||
| | UNORDERED_LIST | Tyoe `- ` to create an unordered list | | ||
| | ORDERED_LIST | Type `1. ` to create an ordered list (you can use any digit instead of 1 as starting number) | | ||
| | CHECK_LIST | Type `[] ` to create an check list | | ||
| | LINK | Create a link using `[]()` e.g. `[Syed Umar Anis](http://umaranis.com)` | | ||
| | HR | Create horizontal rule using one of the following: `--- `, `___ `, `*** ` | | ||
| | IMAGE | Create a image using `![]()` e.g. `` | | ||
|
|
||
| Pass the desired transformers to Mardown Shortcut Plugin as shown below: | ||
|
|
||
| ```svelte | ||
| <MarkdownShortcutPlugin transformers={[INLINE_CODE, BOLD_STAR]} /> | ||
| ``` | ||
|
|
||
| ### Array of Transformers | ||
|
|
||
| All of the above transformers can be included by using the `ALL_TRANSFORMERS` array. | ||
|
|
||
| ```svelte | ||
| <MarkdownShortcutPlugin transformers={ALL_TRANSFORMERS} /> | ||
| ``` | ||
|
|
||
| There is also an array for text formatting transformers called `TEXT_FORMAT_TRANSFORMERS`. It includes the following: | ||
|
|
||
| - INLINE_CODE | ||
| - BOLD_ITALIC_STAR | ||
| - BOLD_ITALIC_UNDERSCORE | ||
| - BOLD_STAR | ||
| - BOLD_UNDERSCORE | ||
| - HIGHLIGHT | ||
| - ITALIC_STAR | ||
| - ITALIC_UNDERSCORE | ||
| - STRIKETHROUGH | ||
|
|
||
| Another array that group transformers is called `ELEMENT_TRANSFORMERS`. It includes: | ||
|
|
||
| - HEADING | ||
| - QUOTE | ||
| - CODE | ||
| - UNORDERED_LIST | ||
| - ORDERED_LIST | ||
|
|
||
| We can mix arrays and other transfomers to make the desired list. For instance, here is a snippet that includes all text formatting transformers along with the IMAGE and LINK. | ||
|
|
||
| ```svelte | ||
| <MarkdownShortcutPlugin | ||
| transformers={[IMAGE, LINK, ...TEXT_FORMAT_TRANSFORMERS]} /> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| # List of Plugins | ||
|
|
||
| | Plugin | Description | Plugin file | Dependencies | | ||
| | ---------------------------------------- | :------------------------------------------------------------------------------------------------- | :------------------------------- | :------------------------------- | | ||
| | Rich Text | Enable rich text support. It's a must to include this plugin or PlainTextPlugin | RichTextPlugin | | | ||
| | Plain Text | Enable plain text support. It's a must to include this plugin or RichTextPlugin | PlainTextPlugin | | | ||
| | History | Support undo / redo. It shares the history with nested editors | SharedHistoryPlugin | | | ||
| | List | Enable ordered and unordered lists | ListPlugin | | | ||
| | Checklist | Enable Checklist | CheckListPlugin | | | ||
| | Horizontal Rule | Enable Horizontal Rule | HorizontalRulePlugin | | | ||
| | Link | Enable hyperlinks | LinkPlugin | | | ||
| | Link Editor | Show a floating editor for links | FloatingLinkEditorPlugin | LinkPlugin | | ||
| | Auto Link | Auto detect links in the text | AutoLinkPlugin | | | ||
| | Auto Focus | Automatically focus the editor on page load | AutoFocusPlugin | | | ||
| | Collaboration | Enable collaborative editing. It replaces the SharedHistoryPLugin. Requires a collaboration server | CollaborationPlugin | | | ||
| | Image | Add image support | ImagePlugin | | | ||
| | Caption History | Enables undo / redo for image caption | CaptionEditorHistoryPlugin | ImagePlugin | | ||
| | Caption Collaboration | Enable collaborative editing for image caption. Replaces CaptionEditorHistoryPlugin | CaptionEditorCollaborationPlugin | ImagePlugin | | ||
| | Code Block | Enable code blocks | CodeHighlightPlugin | | | ||
| | Code Block Actions | Enable `copy` and `prettier` actions for code blocks | CodeActionMenuPlugin | CodeHighlightPlugin | | ||
| | Keyword | Auto formatting given keywords | KeywordPlugin | | | ||
| | Hashtag | Formatting for tags that begin with `#` | HashtagPlugin | | | ||
| | [Markdown Shortcut](MarkdownShortcut.md) | Enable markdown shortcuts | MarkdownShortcutPlugin | Depends on the transformers used | | ||
| | Tree View | Shows developer tools | TreeViewPlugin | | |