diff --git a/docs/plugins/MarkdownShortcut.md b/docs/plugins/MarkdownShortcut.md new file mode 100644 index 0000000..0f33cda --- /dev/null +++ b/docs/plugins/MarkdownShortcut.md @@ -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 + +
+ +
+
+
+ +
+
+ + + + + + + +
+
+
+``` + +## 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. `![Image Alt Text](https://i0.wp.com/umaranis.com/wp-content/uploads/2023/09/image.png)` | + +Pass the desired transformers to Mardown Shortcut Plugin as shown below: + +```svelte + +``` + +### Array of Transformers + +All of the above transformers can be included by using the `ALL_TRANSFORMERS` array. + +```svelte + +``` + +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 + +``` diff --git a/docs/plugins/readme.md b/docs/plugins/readme.md new file mode 100644 index 0000000..782d93f --- /dev/null +++ b/docs/plugins/readme.md @@ -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 | |