-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #15393 from ckeditor/ck/2321-paste-from-markdown
Feature (markdown-gfm): Added an experimental support for pasting from markdown. Closes #2321.
- Loading branch information
Showing
17 changed files
with
799 additions
and
5 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
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
10 changes: 10 additions & 0 deletions
10
packages/ckeditor5-markdown-gfm/docs/_snippets/features/paste-from-markdown.html
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,10 @@ | ||
| <script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script> | ||
| <textarea id="snippet-paste-from-markdown"> | ||
|
|
||
| <h2>Markdown output 🛫</h2> | ||
|
|
||
| </textarea> | ||
|
|
||
| <p>Output:</p> | ||
|
|
||
| <pre><code id="snippet-paste-from-markdown-output"></code></pre> |
94 changes: 94 additions & 0 deletions
94
packages/ckeditor5-markdown-gfm/docs/_snippets/features/paste-from-markdown.js
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,94 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved. | ||
| * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
| */ | ||
|
|
||
| /* globals console, window, document, setTimeout */ | ||
|
|
||
| import { Code, Strikethrough, Underline } from '@ckeditor/ckeditor5-basic-styles'; | ||
| import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config'; | ||
| import { CodeBlock } from '@ckeditor/ckeditor5-code-block'; | ||
| import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line'; | ||
| import { SourceEditing } from '@ckeditor/ckeditor5-source-editing'; | ||
| import { DocumentList, TodoDocumentList, AdjacentListsSupport } from '@ckeditor/ckeditor5-list'; | ||
| import { Markdown, PasteFromMarkdownExperimental } from '@ckeditor/ckeditor5-markdown-gfm'; | ||
| import { CKBox, CKBoxImageEdit } from '@ckeditor/ckeditor5-ckbox'; | ||
| import { PictureEditing, ImageInsert, ImageResize, AutoImage } from '@ckeditor/ckeditor5-image'; | ||
| import { LinkImage } from '@ckeditor/ckeditor5-link'; | ||
| import { Font } from '@ckeditor/ckeditor5-font'; | ||
|
|
||
| // Umberto combines all `packages/*/docs` into the `docs/` directory. The import path must be valid after merging all directories. | ||
| import ClassicEditor from '../build-classic'; | ||
|
|
||
| const plugins = ClassicEditor.builtinPlugins | ||
| // Remove the `List` plugin as in a single demo we want to use the Document list feature. | ||
| .filter( pluginConstructor => { | ||
| if ( pluginConstructor.pluginName === 'List' ) { | ||
| return false; | ||
| } | ||
|
|
||
| return true; | ||
| } ) | ||
| // Then, add Markdown-specific features. | ||
| .concat( [ | ||
| SourceEditing, Code, Strikethrough, Underline, Markdown, CodeBlock, HorizontalLine, DocumentList, TodoDocumentList, | ||
| AdjacentListsSupport, PasteFromMarkdownExperimental, CKBox, CKBoxImageEdit, | ||
| PictureEditing, ImageInsert, ImageResize, AutoImage, LinkImage, Font | ||
| ] ); | ||
|
|
||
| ClassicEditor | ||
| .create( document.querySelector( '#snippet-paste-from-markdown' ), { | ||
| plugins, | ||
| toolbar: { | ||
| items: [ | ||
| 'undo', 'redo', '|', 'sourceEditing', '|', 'heading', | ||
| '|', 'bold', 'italic', 'underline', 'strikethrough', 'code', | ||
| '-', 'link', 'insertImage', 'insertTable', 'mediaEmbed', 'blockQuote', 'codeBlock', 'horizontalLine', | ||
| '|', 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent' | ||
| ], | ||
| shouldNotGroupWhenFull: true | ||
| }, | ||
| cloudServices: CS_CONFIG, | ||
| image: { | ||
| toolbar: [ | ||
| 'imageStyle:inline', | ||
| 'imageStyle:block', | ||
| 'imageStyle:side', | ||
| '|', | ||
| 'toggleImageCaption', | ||
| 'imageTextAlternative', | ||
| '|', | ||
| 'ckboxImageEdit' | ||
| ] | ||
| }, | ||
| codeBlock: { | ||
| languages: [ | ||
| { language: 'css', label: 'CSS' }, | ||
| { language: 'html', label: 'HTML' }, | ||
| { language: 'javascript', label: 'JavaScript' }, | ||
| { language: 'php', label: 'PHP' } | ||
| ] | ||
| }, | ||
| ui: { | ||
| viewportOffset: { | ||
| top: window.getViewportTopOffsetConfig() | ||
| } | ||
| } | ||
| } ) | ||
| .then( editor => { | ||
| window.editor = editor; | ||
|
|
||
| const outputElement = document.querySelector( '#snippet-paste-from-markdown-output' ); | ||
|
|
||
| editor.model.document.on( 'change', () => { | ||
| outputElement.innerText = editor.getData(); | ||
| } ); | ||
|
|
||
| // Set the initial data with delay so hightlight.js doesn't catch it. | ||
| setTimeout( () => { | ||
| outputElement.innerText = editor.getData(); | ||
| }, 500 ); | ||
| } ) | ||
| .catch( err => { | ||
| console.error( err.stack ); | ||
| } ); |
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,72 @@ | ||
| # Headings of various kinds | ||
| ## h2 Heading | ||
| ### h3 Heading | ||
| #### h4 Heading | ||
| ##### h5 Heading | ||
|
|
||
|
|
||
| ## Various ways to create horizontal rules | ||
|
|
||
| ___ | ||
|
|
||
| --- | ||
|
|
||
| *** | ||
|
|
||
| ## Basic formatting | ||
|
|
||
| **This is bold text** | ||
|
|
||
| __This is bold text__ | ||
|
|
||
| *This is italic text* | ||
|
|
||
| _This is italic text_ | ||
|
|
||
| ~~Strikethrough~~ | ||
|
|
||
|
|
||
| ## Block quotes | ||
|
|
||
| > Basic block quotes | ||
|
|
||
|
|
||
| ## Lists | ||
|
|
||
| Unordered lists | ||
|
|
||
| + A list is created by starting a line with `+`, `-`, or `*`. | ||
| + Indenting an item by two spaces will turn it into a sub-list. | ||
| + That can be nested further: | ||
| + Like this! | ||
|
|
||
| Ordered lists | ||
|
|
||
| 1. You can create ordered lists... | ||
| 2. ...with sequential numbers... | ||
| 3. ...incrementing by 1. | ||
|
|
||
|
|
||
| 1. Or you can just use 1... | ||
| 1. ...for all the items. | ||
|
|
||
| ## Code formatting | ||
|
|
||
| This covers either inline `code`... | ||
|
|
||
| ``` | ||
| Or a code block. | ||
| ``` | ||
|
|
||
| ## Tables | ||
|
|
||
| | Header | Header | | ||
| | ------ | ----------- | | ||
| | Tables are tricky | And need some special care | | ||
|
|
||
| ## Links | ||
| [CKEditor 5 main site](https://ckeditor.com/) | ||
|
|
||
| ## Images | ||
|
|
||
|  |
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
88 changes: 88 additions & 0 deletions
88
packages/ckeditor5-markdown-gfm/docs/features/paste-markdown.md
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,88 @@ | ||
| --- | ||
| menu-title: Paste Markdown | ||
| meta-title: Paste Markdown | CKEditor 5 Documentation | ||
| meta-description: The paste Markdown feature lets users paste Markdown-formatted content straight into CKEditor 5. | ||
| category: features-pasting | ||
| order: 40 | ||
| modified_at: 2023-11-24 | ||
| --- | ||
|
|
||
| # Paste Markdown | ||
|
|
||
| The paste Markdown feature lets users paste Markdown-formatted content straight into the editor. It will be then converted into rich text on the fly. | ||
|
|
||
| <info-box warning> | ||
| This feature is still in the experimental phase. See the [known issues](#known-issues) section to learn more. | ||
| </info-box> | ||
|
|
||
| ## Demo | ||
|
|
||
| Simply paste some Markdown-formatted content into the demo editor below and see it turn into rich text on the fly. You can copy [this document](%BASE_PATH%/assets/markdown.txt) for convenience. | ||
|
|
||
| {@snippet features/paste-from-markdown} | ||
|
|
||
| <info-box info> | ||
| This demo only presents a limited set of features. Visit the {@link examples/builds/full-featured-editor feature-rich editor example} to see more in action. | ||
| </info-box> | ||
|
|
||
| ## Installation | ||
|
|
||
| <info-box info> | ||
| This feature is not available in any of the {@link installation/getting-started/predefined-builds predefined builds}. | ||
| </info-box> | ||
|
|
||
| To enable this data processor in your editor, install the [`@ckeditor/ckeditor5-markdown-gfm`](https://www.npmjs.com/package/@ckeditor/ckeditor5-markdown-gfm) package: | ||
|
|
||
| ``` | ||
| npm install --save @ckeditor/ckeditor5-markdown-gfm | ||
| ``` | ||
|
|
||
| Then add the {@link module:markdown-gfm/pastefrommarkdownexperimental~PasteFromMarkdownExperimental} plugin to the editor configuration: | ||
|
|
||
| ```js | ||
| import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic'; | ||
|
|
||
| import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles'; | ||
| import { Essentials } from '@ckeditor/ckeditor5-essentials'; | ||
| // More imports. | ||
| // ... | ||
|
|
||
| import { PasteFromMarkdownExperimental } from '@ckeditor/ckeditor5-markdown-gfm'; | ||
|
|
||
| ClassicEditor | ||
| .create( document.querySelector( '#snippet-markdown' ), { | ||
| plugins: [ | ||
| PasteFromMarkdownExperimental, | ||
| Essentials, | ||
| Bold, | ||
| Italic, | ||
| // More plugins. | ||
| // ... | ||
| ], | ||
| // More of editor's config. | ||
| // ... | ||
| } ) | ||
| .then( /* ... */ ) | ||
| .catch( /* ... */ ); | ||
|
|
||
| ``` | ||
|
|
||
| <info-box info> | ||
| Read more about {@link installation/plugins/installing-plugins installing plugins}. | ||
| </info-box> | ||
|
|
||
| ## Known issues | ||
|
|
||
| While the Paste Markdown feature is already stable enough to use it, please remember it still needs some more testing. We are now mostly concentrating on testing it in connection with other tools and plugins. If you have any observations, suggestions or other piece of information you want to share with us, feel free to put them in [this GitHub issue](https://github.com/ckeditor/ckeditor5/issues/2321). | ||
|
|
||
| ## Related features | ||
|
|
||
| CKEditor 5 supports a wider range of paste features, including: | ||
| * {@link features/paste-from-office Paste from Office} – Paste content from Microsoft Word and maintain the original structure and formatting. | ||
| * {@link features/paste-from-google-docs Paste from Google Docs} – Paste content from Google Docs, maintaining the original formatting and structure. | ||
| * {@link features/paste-plain-text Paste plain text} – Paste text without formatting that will inherit the style of the content it was pasted into. | ||
| * {@link features/autoformat Autoformatting} – Format your content on the go with Markdown-like shortcodes. | ||
|
|
||
| ## Contribute | ||
|
|
||
| The source code of the feature is available on GitHub at [https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-markdown-gfm](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-markdown-gfm) |
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
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
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
Oops, something went wrong.