Initialize the repository using CKEditor 5 Package Generator.

ea3c4773 · Florian Spreckelsen · ea3c4773 · ea3c4773 · ea3c4773 · ea3c4773
Commit ea3c4773 authored 3 years ago by Florian Spreckelsen
--- a/.editorconfig
+++ b/.editorconfig
+# Configurations to normalize the IDE behavior.
+# http://editorconfig.org/
+
+root = true
+
+[*]
+indent_style = tab
+tab_width = 4
+charset = utf-8
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{js,jsx,ts}]
+quote_type = single
+
+[package.json]
+indent_style = space
+tab_width = 2
--- a/.eslintrc.js
+++ b/.eslintrc.js
+/* eslint-env node */
+
+'use strict';
+
+module.exports = {
+	extends: 'ckeditor5',
+	root: true,
+	rules: {
+		// This rule disallows importing core DLL packages directly. Imports should be done using the `ckeditor5` package.
+		// Also, importing non-DLL packages is not allowed. If the package requires other features to work, they should be
+		// specified as soft-requirements.
+		// Read more: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-26.html#soft-requirements.
+		'ckeditor5-rules/ckeditor-imports': 'error'
+	},
+	overrides: [
+		{
+			files: [ 'tests/**/*.js', 'sample/**/*.js' ],
+			rules: {
+				// To write complex tests, you may need to import files that are not exported in DLL files by default.
+				// Hence, imports CKEditor 5 packages in test files are not checked.
+				'ckeditor5-rules/ckeditor-imports': 'off'
+			}
+		}
+	]
+};
--- a/.gitattributes
+++ b/.gitattributes
+*			text=auto
+
+*.htaccess	eol=lf
+*.cgi		eol=lf
+*.sh		eol=lf
+
+*.css		text
+*.htm		text
+*.html		text
+*.js		text
+*.json		text
+*.php		text
+*.txt		text
+*.md		text
+
+*.png		-text
+*.gif		-text
+*.jpg		-text
--- a/.gitignore
+++ b/.gitignore
+build/
+coverage/
+node_modules/
+tmp/
+sample/ckeditor.dist.js
--- a/.stylelintrc
+++ b/.stylelintrc
+{
+	"extends": "stylelint-config-ckeditor5"
+}
--- a/LICENSE.md
+++ b/LICENSE.md
+Software License Agreement
+==========================
+
+Copyright (c) 2022. All rights reserved.
+
+Licensed under the terms of [MIT license](https://opensource.org/licenses/MIT).
--- a/README.md
+++ b/README.md
+@indiscale/ckeditor5-complexitywiki-plugins
+===========================================
+
+This package was created by the [ckeditor5-package-generator](https://www.npmjs.com/package/ckeditor5-package-generator) package.
+
+## Table of contents
+
+* [Developing the package](#developing-the-package)
+* [Available scripts](#available-scripts)
+  * [`start`](#start)
+  * [`test`](#test)
+  * [`lint`](#lint)
+  * [`stylelint`](#stylelint)
+  * [`dll:build`](#dllbuild)
+  * [`dll:serve`](#dllserve)
+  * [`translations:collect`](#translationscollect)
+  * [`translations:download`](#translationsdownload)
+  * [`translations:upload`](#translationsupload)
+* [License](#license)
+
+## Developing the package
+
+To read about the CKEditor 5 framework, visit the [CKEditor5 documentation](https://ckeditor.com/docs/ckeditor5/latest/framework/index.html).
+
+## Available scripts
+
+Npm scripts are a convenient way to provide commands in a project. They are defined in the `package.json` file and shared with other people contributing to the project. It ensures that developers use the same command with the same options (flags).
+
+All the scripts can be executed by running `npm run <script>`. Pre and post commands with matching names will be run for those as well.
+
+The following scripts are available in the package.
+
+### `start`
+
+Starts a HTTP server with the live-reload mechanism that allows previewing and testing plugins available in the package.
+
+When the server has been started, the default browser will open the developer sample. This can be disabled by passing the `--no-open` option to that command.
+
+You can also define the language that will translate the created editor by specifying the `--language [LANG]` option. It defaults to `'en'`.
+
+Examples:
+
+```bash
+# Starts the server and open the browser.
+npm run start
+
+# Disable auto-opening the browser.
+npm run start -- --no-open
+
+# Create the editor with the interface in German.
+npm run start -- --language=de
+```
+
+### `test`
+
+Allows executing unit tests for the package, specified in the `tests/` directory. The command accepts the following modifiers:
+
+* `--coverage` &ndash; to create the code coverage report,
+* `--watch` &ndash; to observe the source files (the command does not end after executing tests),
+* `--source-map` &ndash; to generate source maps of sources,
+* `--verbose` &ndash; to print additional webpack logs.
+
+Examples:
+
+```bash
+# Execute tests.
+npm run test
+
+# Generate code coverage report after each change in the sources.
+npm run test -- --coverage --test
+```
+
+### `lint`
+
+Runs ESLint, which analyzes the code (all `*.js` files) to quickly find problems.
+
+Examples:
+
+```bash
+# Execute eslint.
+npm run lint
+```
+
+### `stylelint`
+
+Similar to the `lint` task, stylelint analyzes the CSS code (`*.css` files in the `theme/` directory) in the package.
+
+Examples:
+
+```bash
+# Execute stylelint.
+npm run stylelint
+```
+
+### `dll:build`
+
+Creates a DLL-compatible package build which can be loaded into an editor using [DLL builds](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/dll-builds.html).
+
+Examples:
+
+```bash
+# Build the DLL file that is ready to publish.
+npm run dll:build
+
+# Build the DLL file and listen to changes in its sources.
+npm run dll:build -- --watch
+```
+
+### `dll:serve`
+
+Creates a simple HTTP server (without the live-reload mechanism) that allows verifying whether the DLL build of the package is compatible with the CKEditor 5 [DLL builds](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/dll-builds.html).
+
+Examples:
+
+```bash
+# Starts the HTTP server and opens the browser.
+npm run dll:serve
+```
+
+### `translations:collect`
+
+Collects translation messages (arguments of the `t()` function) and context files, then validates whether the provided values do not interfere with the values specified in the `@ckeditor/ckeditor5-core` package.
+
+The task may end with an error if one of the following conditions is met:
+
+* Found the `Unused context` error &ndash; entries specified in the `lang/contexts.json` file are not used in source files. They should be removed.
+* Found the `Context is duplicated for the id` error &ndash; some of the entries are duplicated. Consider removing them from the `lang/contexts.json` file, or rewrite them.
+* Found the `Context for the message id is missing` error &ndash; entries specified in source files are not described in the `lang/contexts.json` file. They should be added.
+
+Examples:
+
+```bash
+npm run translations:collect
+```
+
+### `translations:download`
+
+Download translations from the Transifex server. Depending on users' activity in the project, it creates translations files used for building the editor.
+
+The task requires passing the URL to Transifex API. Usually, it matches the following format: `https://www.transifex.com/api/2/project/[PROJECT_SLUG]`.
+
+To avoid passing the `--transifex` option every time when calls the command, you can store it in `package.json`, next to the `ckeditor5-package-tools translations:download` command.
+
+Examples:
+
+```bash
+npm run translations:download -- --transifex [API URL]
+```
+
+### `translations:upload`
+
+Uploads translation messages onto the Transifex server. It allows for the creation of translations into other languages by users using the Transifex platform.
+
+The task requires passing the URL to the Transifex API. Usually, it matches the following format: `https://www.transifex.com/api/2/project/[PROJECT_SLUG]`.
+
+To avoid passing the `--transifex` option every time when you call the command, you can store it in `package.json`, next to the `ckeditor5-package-tools translations:upload` command.
+
+Examples:
+
+```bash
+npm run translations:upload -- --transifex [API URL]
+```
+
+## License
+
+The `@indiscale/ckeditor5-complexitywiki-plugins` package is available under [MIT license](https://opensource.org/licenses/MIT).
+
+However, it is the default license of packages created by the [ckeditor5-package-generator](https://www.npmjs.com/package/ckeditor5-package-generator) package and it can be changed.
--- a/ckeditor5-metadata.json
+++ b/ckeditor5-metadata.json
+{
+	"plugins": [
+		{
+			"name": "My plugin",
+			"className": "MyPlugin",
+			"description": "Adds text to the editor.",
+			"path": "src/myplugin.js",
+			"uiComponents": [
+				{
+					"name": "myButton",
+					"type": "Button",
+					"iconPath": "theme/icons/ckeditor.svg"
+				}
+			]
+		}
+	]
+}
--- a/lang/contexts.json
+++ b/lang/contexts.json
+{
+  "My plugin": "Content for a tooltip is displayed when a user hovers the CKEditor 5 icon."
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "@indiscale/ckeditor5-complexitywiki-plugins",
+  "version": "0.0.1",
+  "description": "A plugin for CKEditor 5.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin",
+    "ckeditor5-dll",
+    "ckeditor5-package-generator"
+  ],
+  "main": "src/index.js",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14.0.0",
+    "npm": ">=5.7.1"
+  },
+  "files": [
+    "lang",
+    "src",
+    "theme",
+    "build",
+    "ckeditor5-metadata.json"
+  ],
+  "dependencies": {
+    "ckeditor5": ">=32.0.0"
+  },
+  "devDependencies": {
+    "@ckeditor/ckeditor5-autoformat": ">=32.0.0",
+    "@ckeditor/ckeditor5-basic-styles": ">=32.0.0",
+    "@ckeditor/ckeditor5-block-quote": ">=32.0.0",
+    "@ckeditor/ckeditor5-code-block": ">=32.0.0",
+    "@ckeditor/ckeditor5-core": ">=32.0.0",
+    "@ckeditor/ckeditor5-editor-classic": ">=32.0.0",
+    "@ckeditor/ckeditor5-essentials": ">=32.0.0",
+    "@ckeditor/ckeditor5-heading": ">=32.0.0",
+    "@ckeditor/ckeditor5-image": ">=32.0.0",
+    "@ckeditor/ckeditor5-indent": ">=32.0.0",
+    "@ckeditor/ckeditor5-inspector": "^2.2.2",
+    "@ckeditor/ckeditor5-link": ">=32.0.0",
+    "@ckeditor/ckeditor5-list": ">=32.0.0",
+    "@ckeditor/ckeditor5-media-embed": ">=32.0.0",
+    "@ckeditor/ckeditor5-package-tools": "^1.0.0-beta.4",
+    "@ckeditor/ckeditor5-paragraph": ">=32.0.0",
+    "@ckeditor/ckeditor5-table": ">=32.0.0",
+    "@ckeditor/ckeditor5-theme-lark": ">=32.0.0",
+    "@ckeditor/ckeditor5-upload": ">=32.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-ckeditor5": ">=3.1.1",
+    "http-server": "^14.1.0",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.6",
+    "stylelint": "^13.13.1",
+    "stylelint-config-ckeditor5": ">=2.0.1"
+  },
+  "scripts": {
+    "dll:build": "ckeditor5-package-tools dll:build",
+    "dll:serve": "http-server ./ -o sample/dll.html",
+    "lint": "eslint \"**/*.js\" --quiet --ignore-pattern \"build/\"",
+    "start": "ckeditor5-package-tools start",
+    "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
+    "test": "ckeditor5-package-tools test",
+    "prepare": "npm run dll:build",
+    "prepublishOnly": "npm run dll:build",
+    "translations:collect": "ckeditor5-package-tools translations:collect",
+    "translations:download": "ckeditor5-package-tools translations:download",
+    "translations:upload": "ckeditor5-package-tools translations:upload"
+  },
+  "lint-staged": {
+    "**/*.js": [
+      "eslint --quiet"
+    ],
+    "**/*.css": [
+      "stylelint --quiet --allow-empty-input"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }
+}
--- a/sample/ckeditor.js
+++ b/sample/ckeditor.js
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import CKEditorInspector from '@ckeditor/ckeditor5-inspector';
+
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
+import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import Image from '@ckeditor/ckeditor5-image/src/image';
+import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
+import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
+import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
+import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
+import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';
+import Indent from '@ckeditor/ckeditor5-indent/src/indent';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Link from '@ckeditor/ckeditor5-link/src/link';
+import List from '@ckeditor/ckeditor5-list/src/list';
+import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Table from '@ckeditor/ckeditor5-table/src/table';
+import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
+import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
+
+import MyPlugin from '../src/myplugin';
+
+/* global document, window */
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [
+			// `MyPlugin` is an example plugin generated by the package generator.
+			MyPlugin,
+			Essentials,
+			Autoformat,
+			BlockQuote,
+			Bold,
+			Heading,
+			Image,
+			ImageCaption,
+			ImageStyle,
+			ImageToolbar,
+			ImageUpload,
+			Indent,
+			Italic,
+			Link,
+			List,
+			MediaEmbed,
+			Paragraph,
+			Table,
+			TableToolbar,
+			CodeBlock,
+			Code,
+			Base64UploadAdapter
+		],
+		toolbar: [
+			// `myButton` is an example button provided by the `MyPlugin` class.
+			'myButton',
+			'|',
+			'heading',
+			'|',
+			'bold',
+			'italic',
+			'link',
+			'code',
+			'bulletedList',
+			'numberedList',
+			'|',
+			'outdent',
+			'indent',
+			'|',
+			'uploadImage',
+			'blockQuote',
+			'insertTable',
+			'mediaEmbed',
+			'codeBlock',
+			'|',
+			'undo',
+			'redo'
+		],
+		image: {
+			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'imageTextAlternative' ]
+		},
+		table: {
+			contentToolbar: [
+				'tableColumn',
+				'tableRow',
+				'mergeTableCells'
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+		CKEditorInspector.attach( editor );
+		window.console.log( 'CKEditor 5 is ready.', editor );
+	} )
+	.catch( err => {
+		window.console.error( err.stack );
+	} );
--- a/sample/dll.html
+++ b/sample/dll.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>CKEditor 5 – DLL Sample</title>
+    <style>
+        body {
+            max-width: 800px;
+            margin: 20px auto;
+        }
+    </style>
+</head>
+<body>
+
+<h1>CKEditor 5 – DLL Sample</h1>
+
+<div id="editor">
+    <h2>Production sample</h2>
+    <p>
+        This is a demo of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor
+        build</a>, initialized using the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/dll-builds.html">DLL builds</a>.
+    </p>
+    <p>
+        The package generator creates an example plugin (<code>MyPlugin</code>) which is loaded into the editor by default. If you changed its name or toolbar items it exposes, make sure to update the editor configuration in the <code>sample/dll.html</code> file.
+    </p>
+
+    <h3>Uncaught TypeError</h3>
+    <p>If the editor is not initialized correctly and the browser console displays an error such as the following:</p>
+    <pre><code>Uncaught TypeError: Cannot read properties of undefined (reading 'MyPlugin') at dll.html:85</code></pre>
+    <p>it means that the DLL build of the <code>@indiscale/ckeditor5-complexitywiki-plugins</code> package has not been created.</p>
+    <p>Please call the <code>npm run dll:build</code> command in the CLI, and after it finishes, refresh the page.</p>
+
+    <h3>Anatomy of the DLL build</h3>
+    <p>The source of the DLL build is located in the <code>src/index.js</code> file. It may export as many things as the package offers.</p>
+
+    <h4>Maintaining the sample</h4>
+    <p>Whenever you change objects exported by the DLL build, please review the content of the sample. Things to keep in mind:</p>
+    <ul>
+        <li>Review the list of loaded plugins in the configuration.</li>
+        <li>Review names of items registered in toolbars.</li>
+    </ul>
+
+    <h3>The goal</h3>
+    <p>The primary purpose of the sample is to verify whether the plugins in the package will work together with CKEditor 5 created with the DLL approach.</p>
+
+    <h3>Publishing the package</h3>
+    <p>
+        By default, the <code>build/</code> directory is specified in the <a href="https://docs.npmjs.com/cli/v7/configuring-npm/package-json#files"><code>#files</code></a>
+        array in the <a href="../package.json"><code>package.json</code></a> file. It means all its contents will be published when calling the <code>npm publish</code> command.
+    </p>
+    <p>
+        Unfortunately, it is easy to forget to refresh the DLL build before making a new release. Hence, we created the <a href="https://docs.npmjs.com/cli/v7/using-npm/scripts#pre--post-scripts">prescript</a> that would refresh the build automatically when calling the <code>npm publish</code> command.
+    </p>
+
+    <h3>Reporting issues</h3>
+    <p>If you found a problem with CKEditor 5 or the package generator, please, report an issue:</p>
+    <ul>
+        <li><a href="https://github.com/ckeditor/ckeditor5/issues/new/choose">CKEditor 5</a></li>
+        <li><a href="https://github.com/ckeditor/create-ckeditor5-plugin/issues/new">The package generator</a></li>
+    </ul>
+</div>
+
+<!-- DLL builds are served from the `node_modules/` directory -->
+<script src="../node_modules/ckeditor5/build/ckeditor5-dll.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-editor-classic/build/editor-classic.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-code-block/build/code-block.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-basic-styles/build/basic-styles.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-heading/build/heading.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-autoformat/build/autoformat.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-block-quote/build/block-quote.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-image/build/image.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-link/build/link.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-indent/build/indent.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-media-embed/build/media-embed.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-list/build/list.js"></script>
+<script src="../node_modules/@ckeditor/ckeditor5-table/build/table.js"></script>
+
+<!-- The "@indiscale/ckeditor5-complexitywiki-plugins" package DLL build is served from the `build/` directory -->
+<script src="../build/complexitywiki-plugins.js"></script>
+
+<script>
+	console.log( 'Objects exported by the DLL build:', CKEditor5[ 'complexitywikiPlugins' ] );
+
+	CKEditor5.editorClassic.ClassicEditor
+		.create( document.querySelector( '#editor' ), {
+			plugins: [
+				// `MyPlugin` is an example plugin generated by the package generator.
+				CKEditor5[ 'complexitywikiPlugins' ].MyPlugin,
+				CKEditor5.essentials.Essentials,
+				CKEditor5.autoformat.Autoformat,
+				CKEditor5.blockQuote.BlockQuote,
+				CKEditor5.basicStyles.Bold,
+				CKEditor5.heading.Heading,
+				CKEditor5.image.Image,
+				CKEditor5.image.ImageCaption,
+				CKEditor5.image.ImageStyle,
+				CKEditor5.image.ImageToolbar,
+				CKEditor5.image.ImageUpload,
+				CKEditor5.indent.Indent,
+				CKEditor5.basicStyles.Italic,
+				CKEditor5.link.Link,
+				CKEditor5.list.List,
+				CKEditor5.mediaEmbed.MediaEmbed,
+				CKEditor5.paragraph.Paragraph,
+				CKEditor5.table.Table,
+				CKEditor5.table.TableToolbar,
+				CKEditor5.codeBlock.CodeBlock,
+				CKEditor5.basicStyles.Code,
+				CKEditor5.upload.Base64UploadAdapter
+			],
+			toolbar: [
+				// `myButton` is an example button provided by the `MyPlugin` class.
+				'myButton',
+				'|',
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'link',
+				'code',
+				'bulletedList',
+				'numberedList',
+				'|',
+				'outdent',
+				'indent',
+				'|',
+				'uploadImage',
+				'blockQuote',
+				'insertTable',
+				'mediaEmbed',
+				'codeBlock',
+				'|',
+				'undo',
+				'redo'
+			],
+			image: {
+				toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'imageTextAlternative' ]
+			},
+			table: {
+				contentToolbar: [
+					'tableColumn',
+					'tableRow',
+					'mergeTableCells'
+				]
+			}
+		} )
+		.then( editor => {
+			window.editor = editor;
+		} )
+		.catch( error => {
+			console.error( 'There was a problem initializing the editor.', error );
+		} );
+</script>
+</body>
+</html>
--- a/sample/index.html
+++ b/sample/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>CKEditor 5 – Development Sample</title>
+    <style>
+        body {
+            max-width: 800px;
+            margin: 20px auto;
+        }
+    </style>
+</head>
+<body>
+
+<h1>CKEditor 5 – Development Sample</h1>
+
+<div id="editor">
+    <h2>Development environment</h2>
+    <p>
+        This is a demo of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor
+        build</a> that loads <code>MyPlugin</code>, which is an example plugin produced by the package generator. You can modify this
+        sample and use it to validate whether a plugin or a set of plugins work fine.
+    </p>
+    <p>
+        <code>MyPlugin</code> inserts a text into the editor. You can click the CKEditor 5 icon in the toolbar and see the results.
+    </p>
+
+    <h3>Helpful resources</h3>
+    <ul>
+        <li>Architecture
+            <ul>
+                <li>
+                    <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/core-editor-architecture.html">Core editor architecture</a>
+                </li>
+            </ul>
+            <ul>
+                <li>
+                    <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/editing-engine.html">The editing engine</a>
+                </li>
+            </ul>
+            <ul>
+                <li>
+                    <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/architecture/ui-library.html">The UI library</a>
+                </li>
+            </ul>
+        </li>
+
+        <li>
+            <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/browser-compatibility.html">Browser compatibility</a>
+        </li>
+
+        <li>
+            <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html">The error codes</a>
+        </li>
+
+        <li><a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/dll-builds.html">The DLL builds</a></li>
+    </ul>
+
+    <h3>The directory structure</h3>
+
+    <p>
+        The code snippet below presents the directory structure.
+    </p>
+
+    <pre><code class="language-plaintext">.
+├─ lang
+│  └─ contexts.json    # Entries used for creating translations.
+├─ sample
+│  ├─ dll.html         # The editor initialized using the DLL builds. Check README for details.
+│  ├─ index.html       # The currently displayed file.
+│  └─ ckeditor.js      # The editor initialization script.
+├─ src
+│  ├─ index.js         # The modules exported by the package when using the DLL builds.
+│  ├─ myplugin.js      # The plugin that shows the very basic usage of the CKEditor 5 framework.
+│  └─ **/*.js          # All JavaScript source files should be saved here.
+├─ tests
+│  ├─ index.js         # Tests for the plugin.
+│  ├─ myplugin.js
+│  └─ **/*.js          # All tests should be saved here.
+├─ theme
+│  ├─ icons
+│  │  ├─ ckeditor.svg  # The CKEditor 5 icon displayed in the toolbar.
+│  │  └─ **/*.svg      # All icon files should be saved here.
+│  └─ **/*.css         # All CSS files should be saved here.
+├─ .editorconfig
+├─ ...
+└─ README.md</code></pre>
+
+    <h3>Reporting issues</h3>
+    <p>If you found a problem with CKEditor 5 or the package generator, please, report an issue:</p>
+    <ul>
+        <li><a href="https://github.com/ckeditor/ckeditor5/issues/new/choose">CKEditor 5</a></li>
+        <li><a href="https://github.com/ckeditor/ckeditor5-package-generator/issues/new">The package generator</a></li>
+    </ul>
+</div>
+
+<script src="./ckeditor.dist.js"></script>
+</body>
+</html>
--- a/src/index.js
+++ b/src/index.js
+import ckeditor from './../theme/icons/ckeditor.svg';
+
+export { default as MyPlugin } from './myplugin';
+
+export const icons = {
+	ckeditor
+};
--- a/src/myplugin.js
+++ b/src/myplugin.js
+import { Plugin } from 'ckeditor5/src/core';
+import { ButtonView } from 'ckeditor5/src/ui';
+
+import ckeditor5Icon from '../theme/icons/ckeditor.svg';
+
+export default class MyPlugin extends Plugin {
+	static get pluginName() {
+		return 'MyPlugin';
+	}
+
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+		const model = editor.model;
+
+		// Add the "myPlugin" button to feature components.
+		editor.ui.componentFactory.add( 'myButton', locale => {
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'My plugin' ),
+				icon: ckeditor5Icon,
+				tooltip: true,
+				isToggleable: true
+			} );
+
+			// Insert a text into the editor after clicking the button.
+			this.listenTo( view, 'execute', () => {
+				model.change( writer => {
+					const textNode = writer.createText( 'Hello CKEditor 5!' );
+
+					model.insertContent( textNode );
+				} );
+
+				editor.editing.view.focus();
+			} );
+
+			return view;
+		} );
+	}
+}
--- a/tests/index.js
+++ b/tests/index.js
+import { MyPlugin as MyPluginDll, icons } from '../src';
+import MyPlugin from '../src/myplugin';
+
+import ckeditor from './../theme/icons/ckeditor.svg';
+
+describe( 'CKEditor5 MyPlugin DLL', () => {
+	it( 'exports MyPlugin', () => {
+		expect( MyPluginDll ).to.equal( MyPlugin );
+	} );
+
+	describe( 'icons', () => {
+		it( 'exports the "ckeditor" icon', () => {
+			expect( icons.ckeditor ).to.equal( ckeditor );
+		} );
+	} );
+} );
--- a/tests/myplugin.js
+++ b/tests/myplugin.js
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import MyPlugin from '../src/myplugin';
+
+/* global document */
+
+describe( 'MyPlugin', () => {
+	it( 'should be named', () => {
+		expect( MyPlugin.pluginName ).to.equal( 'MyPlugin' );
+	} );
+
+	describe( 'init()', () => {
+		let domElement, editor;
+
+		beforeEach( async () => {
+			domElement = document.createElement( 'div' );
+			document.body.appendChild( domElement );
+
+			editor = await ClassicEditor.create( domElement, {
+				plugins: [
+					Paragraph,
+					Heading,
+					Essentials,
+					MyPlugin
+				],
+				toolbar: [
+					'myButton'
+				]
+			} );
+		} );
+
+		afterEach( () => {
+			domElement.remove();
+			return editor.destroy();
+		} );
+
+		it( 'should load MyPlugin', () => {
+			const myPlugin = editor.plugins.get( 'MyPlugin' );
+
+			expect( myPlugin ).to.be.an.instanceof( MyPlugin );
+		} );
+
+		it( 'should add an icon to the toolbar', () => {
+			expect( editor.ui.componentFactory.has( 'myButton' ) ).to.equal( true );
+		} );
+
+		it( 'should add a text into the editor after clicking the icon', () => {
+			const icon = editor.ui.componentFactory.create( 'myButton' );
+
+			expect( editor.getData() ).to.equal( '' );
+
+			icon.fire( 'execute' );
+
+			expect( editor.getData() ).to.equal( '<p>Hello CKEditor 5!</p>' );
+		} );
+	} );
+} );
--- a/theme/icons/ckeditor.svg
+++ b/theme/icons/ckeditor.svg
+<svg width='68' height='64' viewBox='0 0 68 64' xmlns='http://www.w3.org/2000/svg'><g fill='none' fill-rule='evenodd'><path d='M43.71 11.025a11.508 11.508 0 0 0-1.213 5.159c0 6.42 5.244 11.625 11.713 11.625.083 0 .167 0 .25-.002v16.282a5.464 5.464 0 0 1-2.756 4.739L30.986 60.7a5.548 5.548 0 0 1-5.512 0L4.756 48.828A5.464 5.464 0 0 1 2 44.089V20.344c0-1.955 1.05-3.76 2.756-4.738L25.474 3.733a5.548 5.548 0 0 1 5.512 0l12.724 7.292z' fill='#FFF'/><path d='M45.684 8.79a12.604 12.604 0 0 0-1.329 5.65c0 7.032 5.744 12.733 12.829 12.733.091 0 .183-.001.274-.003v17.834a5.987 5.987 0 0 1-3.019 5.19L31.747 63.196a6.076 6.076 0 0 1-6.037 0L3.02 50.193A5.984 5.984 0 0 1 0 45.003V18.997c0-2.14 1.15-4.119 3.019-5.19L25.71.804a6.076 6.076 0 0 1 6.037 0L45.684 8.79zm-29.44 11.89c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h25.489c.833 0 1.51-.67 1.51-1.498v-.715c0-.827-.677-1.498-1.51-1.498h-25.49.001zm0 9.227c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h18.479c.833 0 1.509-.67 1.509-1.498v-.715c0-.827-.676-1.498-1.51-1.498H16.244zm0 9.227c-.834 0-1.51.671-1.51 1.498v.715c0 .828.676 1.498 1.51 1.498h25.489c.833 0 1.51-.67 1.51-1.498v-.715c0-.827-.677-1.498-1.51-1.498h-25.49.001zm41.191-14.459c-5.835 0-10.565-4.695-10.565-10.486 0-5.792 4.73-10.487 10.565-10.487C63.27 3.703 68 8.398 68 14.19c0 5.791-4.73 10.486-10.565 10.486v-.001z' fill='#1EBC61' fill-rule='nonzero'/><path d='M60.857 15.995c0-.467-.084-.875-.251-1.225a2.547 2.547 0 0 0-.686-.88 2.888 2.888 0 0 0-1.026-.531 4.418 4.418 0 0 0-1.259-.175c-.134 0-.283.006-.447.018-.15.01-.3.034-.446.07l.075-1.4h3.587v-1.8h-5.462l-.214 5.06c.319-.116.682-.21 1.089-.28.406-.071.77-.107 1.088-.107.218 0 .437.021.655.063.218.041.413.114.585.218s.313.244.422.419c.109.175.163.391.163.65 0 .424-.132.745-.396.961a1.434 1.434 0 0 1-.938.325c-.352 0-.656-.1-.912-.3-.256-.2-.43-.453-.523-.762l-1.925.588c.1.35.258.664.472.943.214.279.47.514.767.706.298.191.63.339.995.443.365.104.749.156 1.151.156.437 0 .86-.064 1.272-.193.41-.13.778-.323 1.1-.581a2.8 2.8 0 0 0 .775-.981c.193-.396.29-.864.29-1.405h-.001z' fill='#FFF' fill-rule='nonzero'/></g></svg>