Add paste from markdown experimental

packages/ckeditor5-clipboard/docs/features/paste-plain-text.md

@@ -71,6 +71,7 @@ Feel free to open a [new feature request](https://github.com/ckeditor/ckeditor5/
 ## Related features
 
 CKEditor 5 supports a wider range of paste features, including:
+* {@link features/paste-markdown Paste Markdown} – Paste Markdown formatted content straight into the editor.
 * {@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/import-word Import from Word} – Convert Word files directly into HTML content.

packages/ckeditor5-markdown-gfm/docs/_snippets/features/paste-from-markdown.html

@@ -0,0 +1,10 @@
+<script src="https://cdn.ckbox.io/ckbox/latest/ckbox.js"></script>
+<textarea class="ck ck-content" id="snippet-paste-from-markdown">
+
+<h2>Markdown output 🛫</h2>
+
+</textarea>
+
+<p>Output:</p>
+
+<pre><code id="snippet-paste-from-markdown-output"></code></pre>

packages/ckeditor5-markdown-gfm/docs/_snippets/features/paste-from-markdown.js

@@ -0,0 +1,83 @@
+/**
+ * @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 } from '@ckeditor/ckeditor5-ckbox';
+import { PictureEditing, 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, PictureEditing, 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', 'uploadImage', 'insertTable', 'mediaEmbed', 'blockQuote', 'codeBlock', 'horizontalLine',
+				'|', 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent'
+			]
+		},
+		cloudServices: CS_CONFIG,
+		image: {
+			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
+		},
+		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 );
+	} );

packages/ckeditor5-markdown-gfm/docs/assets/markdown.txt

@@ -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
+
+![CKEditor 5](https://ckeditor.com/assets/images/webp/illustration/home-banner-d49ece364f.webp)

packages/ckeditor5-markdown-gfm/docs/features/markdown.md

@@ -24,7 +24,7 @@ The editor below is configured to output GitHub Flavored Markdown. Edit the cont
 
  Coupled with the {@link features/autoformat autoformatting} feature, the Markdown plugin offers the full-fledged Markdown WYSIWYG editing experience, as described in the ["CKEditor 5: the best open source Markdown editor"](https://ckeditor.com/blog/CKEditor-5-the-best-open-source-Markdown-editor/) blog post. Visit the [free online Markdown editor](https://onlinemarkdowneditor.dev/) to see this solution implemented.
 
-Please remember that Markdown syntax is very simple and it does not cover all the rich-text features. Some features provided by CKEditor 5 will thus work as intended only when output to HTML as they have no Markdown equivalent.
+Please remember that Markdown syntax is really simple and it does not cover all the rich-text features. Some features provided by CKEditor 5 will thus work as intended only when output to HTML as they have no Markdown equivalent.
 
 ## Extending formatting support
 If you need more extensive Markdown support for formatting elements (for example, having the `title` attribute on links represented as `[Foo Bar](https://foo.bar "My link title")`), you can also install {@link features/general-html-support General HTML Support}. This advanced feature allows the integrators to provide additional tags, elements, and attributes, not yet supported by other CKEditor 5 plugins and extend the formatting capabilities.
@@ -41,7 +41,7 @@ editor.setData( 'This is **bold**.' );
 
 The data processor outputs the GFM Markdown syntax. "GFM" stands for "GitHub Flavored Markdown" – a Markdown dialect used by [GitHub](https://github.com). Markdown lacks any formal specification (although the [CommonMark](https://commonmark.org/) initiative aims to close this gap) and has many dialects, often incompatible with one another.
 
-When converting the output produced by this data processor, make sure to use a compatible Markdown-to-HTML converter (e.g. the [marked](https://www.npmjs.com/package/marked) library).
+When converting the output produced by this data processor, make sure to use a compatible Markdown-to-HTML converter (for example, the [marked](https://www.npmjs.com/package/marked) library).
 
 <info-box info>
 	While the CKEditor&nbsp;5 architecture supports changing the data format, in most scenarios we do recommend sticking to the default format which is HTML (supported by the {@link module:engine/dataprocessor/htmldataprocessor~HtmlDataProcessor}). HTML remains [the best standard for rich-text data](https://medium.com/content-uneditable/a-standard-for-rich-text-data-4b3a507af552).
@@ -98,7 +98,7 @@ ClassicEditor
 ## Known issues
 
 <info-box info>
-	Please bear in mind that the Markdown data processor does not support all rich text features. The [Markdown syntax](https://daringfireball.net/projects/markdown/syntax) is very simple and only supports limited formatting options.
+	Please bear in mind that the Markdown data processor does not support all rich text features. The [Markdown syntax](https://daringfireball.net/projects/markdown/syntax) is really simple and only supports limited formatting options.
 
 	This means that advanced formatting like list styles, table styles, or page break markers will be stripped in the effecting data. These are not supported by Markdown and therefore cannot be converted from HTML to Markdown.
 </info-box>
@@ -116,6 +116,7 @@ Some other ways to output the edited content include:
 * {@link features/export-word Export to Word} &ndash; Generate editable `.docx` files out of your editor-created content.
 * {@link features/export-pdf Export to PDF} &ndash; Generate portable PDF files out of your editor-created content.
 * {@link features/autoformat Autoformatting} &ndash; Use Markdown syntax shortcodes to automatically format your content as you type!
+* {@link features/paste-markdown Paste Markdown} &ndash; Paste Markdown formatted content straight into the editor.
 
 ## Contribute
 

packages/ckeditor5-markdown-gfm/docs/features/paste-markdown.md

@@ -0,0 +1,87 @@
+---
+menu-title: Paste Markdown
+meta-title: Paste Markdown | CKEditor 5 Documentation
+category: features-pasting
+order: 40
+modified_at: 2023-11-10
+---
+
+# 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/markdown~Markdown} plugin to the editor configuration, which will change the default {@link module:engine/dataprocessor/dataprocessor~DataProcessor data processor} to the {@link module:markdown-gfm/gfmdataprocessor~GFMDataProcessor}:
+
+```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&nbsp;5 supports a wider range of paste features, including:
+* {@link features/paste-from-office Paste from Office} &ndash; Paste content from Microsoft Word and maintain the original structure and formatting.
+* {@link features/paste-from-google-docs Paste from Google Docs} &ndash; Paste content from Google Docs, maintaining the original formatting and structure.
+* {@link features/paste-plain-text Paste plain text} &ndash; Paste text without formatting that will inherit the style of the content it was pasted into.
+* {@link features/autoformat Autoformatting} &ndash; 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)

packages/ckeditor5-markdown-gfm/package.json

@@ -18,15 +18,28 @@
     "turndown-plugin-gfm": "1.0.2"
   },
   "devDependencies": {
+    "@ckeditor/ckeditor5-autoformat":"40.1.0",
     "@ckeditor/ckeditor5-basic-styles": "40.1.0",
+    "@ckeditor/ckeditor5-block-quote": "40.1.0",
+    "@ckeditor/ckeditor5-clipboard": "40.1.0",
     "@ckeditor/ckeditor5-code-block": "40.1.0",
     "@ckeditor/ckeditor5-core": "40.1.0",
     "@ckeditor/ckeditor5-dev-utils": "^39.0.0",
     "@ckeditor/ckeditor5-editor-classic": "40.1.0",
     "@ckeditor/ckeditor5-engine": "40.1.0",
+    "@ckeditor/ckeditor5-essentials": "40.1.0",
+    "@ckeditor/ckeditor5-heading":"40.1.0",
+    "@ckeditor/ckeditor5-horizontal-line": "40.1.0",
+    "@ckeditor/ckeditor5-image": "40.1.0",
+    "@ckeditor/ckeditor5-indent":"40.1.0",
+    "@ckeditor/ckeditor5-link": "40.1.0",
     "@ckeditor/ckeditor5-list": "40.1.0",
+    "@ckeditor/ckeditor5-media-embed":"40.1.0",
+    "@ckeditor/ckeditor5-paragraph": "40.1.0",
     "@ckeditor/ckeditor5-table": "40.1.0",
     "@ckeditor/ckeditor5-theme-lark": "40.1.0",
+    "@ckeditor/ckeditor5-undo": "40.1.0",
+    "@ckeditor/ckeditor5-utils": "40.1.0",
     "@types/marked": "^4.0.8",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",

packages/ckeditor5-markdown-gfm/src/augmentation.ts

@@ -3,10 +3,11 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-import type { Markdown } from './index';
+import type { Markdown, PasteFromMarkdownExperimental } from './index';
 
 declare module '@ckeditor/ckeditor5-core' {
 	interface PluginsMap {
 		[ Markdown.pluginName ]: Markdown;
+		[ PasteFromMarkdownExperimental.pluginName ]: PasteFromMarkdownExperimental;
 	}
 }

packages/ckeditor5-markdown-gfm/src/index.ts

@@ -8,5 +8,6 @@
  */
 
 export { default as Markdown } from './markdown';
+export { default as PasteFromMarkdownExperimental } from './pastefrommarkdownexperimental';
 
 import './augmentation';