Skip to content

Commit

Permalink
Merge pull request #17246 from ckeditor/docs-use-degit-in-tutorials-s…
Browse files Browse the repository at this point in the history
…table2

Docs: Use `npx degit` instead of `git clone` in tutorials. See #17182.
  • Loading branch information
filipsobol authored Oct 10, 2024
2 parents e6c0cfd + 9799d13 commit 43271fc
Show file tree
Hide file tree
Showing 9 changed files with 87 additions and 194 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,20 @@ If you want to see the final product of this tutorial before you plunge in, chec

## Let's start!

The easiest way to set up your project is to grab the starter files from the [GitHub repository for this tutorial](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/abbreviation-plugin). We gathered all the necessary dependencies there, including some CKEditor 5 packages and other files needed to start the editor.

The editor has already been created in the `main.js` file with some basic plugins. All you need to do is clone the repository, navigate to the [starter-files directory](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/abbreviation-plugin/starter-files), run the `npm install` command, and you can start coding right away.
The easiest way to get started is to grab the starter project using the commands below.

```bash
git clone https://github.com/ckeditor/ckeditor5-tutorials-examples
cd ckeditor5-tutorials-examples/abbreviation-plugin/starter-files
npx -y degit ckeditor/ckeditor5-tutorials-examples/abbreviation-plugin/starter-files abbreviation-plugin
cd abbreviation-plugin

npm install
npm run dev
```

This will create a new directory called `abbreviation-plugin` with the necessary files. The `npm install` command will install all the dependencies, and `npm run dev` will start the development server.

The editor with some basic plugins is created in the `main.js` file.

<info-box>
The starter files come with the {@link framework/development-tools/inspector CKEditor&nbsp;5 Inspector} attached to the editor, so you can debug and observe what is happening in the model and the view layers. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
</info-box>
Expand Down Expand Up @@ -105,18 +107,6 @@ Now, we need to load the `Abbreviation` plugin in our `main.js` file. The editor
```js
// main.js

import {
ClassicEditor,
Essentials,
Paragraph,
Heading,
List,
Bold,
Italic
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

import Abbreviation from './abbreviation/abbreviation'; // ADDED

ClassicEditor
Expand All @@ -126,12 +116,6 @@ ClassicEditor
Abbreviation // ADDED
],
toolbar: [ 'heading', 'bold', 'italic', 'numberedList', 'bulletedList' ]
} )
.then( editor => {
console.log( 'Editor was initialized', editor );
} )
.catch( error => {
console.error( error.stack );
} );
```

Expand Down Expand Up @@ -327,18 +311,6 @@ We passed the name of the button in the `componentFactory.add`, so it is now ava
```js
// main.js

import {
ClassicEditor,
Essentials,
Paragraph,
Heading,
List,
Bold,
Italic
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

import Abbreviation from './abbreviation/abbreviation';

ClassicEditor
Expand All @@ -351,12 +323,6 @@ ClassicEditor
'|',
'abbreviation' // ADDED
]
} )
.then( editor => {
console.log( 'Editor was initialized', editor );
} )
.catch( error => {
console.error( error.stack );
} );
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,15 @@ modified_at: 2022-07-15

In this part of the tutorial we will focus on creating a dialog, which will get the user's input.

We will pick up where we left off in the first part, so make sure you {@link tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-1 start there}, or grab our [starter files for this part](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/abbreviation-plugin/part-1).
We will pick up where we left off in the first part, so make sure you {@link tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-1 start there} or grab our starter files for this part using the commands below.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/abbreviation-plugin/part-1 abbreviation-plugin
cd abbreviation-plugin

npm install
npm run dev
```

<info-box>
As we will mostly work on the UI, we recommend reading about our {@link framework/architecture/ui-library UI library} before you start coding.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,15 @@ modified_at: 2022-07-15

You made it to the final part of the abbreviation plugin tutorial. In this part, we will improve accessibility of our plugin. We will also work on a command, which will additionally grab the text from user's selection, and insert it into our form. And more!

We pick up where we left off in the {@link tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-2 second part}, so make sure you finished it, or grab our [starter files for this part](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/abbreviation-plugin/part-2).
We pick up where we left off in the {@link tutorials/abbreviation-plugin-tutorial/abbreviation-plugin-level-2 second part}, so make sure you finished it, or grab our starter files for this part using the commands below.

```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/abbreviation-plugin/part-2 abbreviation-plugin
cd abbreviation-plugin

npm install
npm run dev
```

If you want to see the final product of this tutorial before you plunge in, check out the [live demo](#demo).

Expand Down
15 changes: 9 additions & 6 deletions docs/tutorials/crash-course/editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,17 @@ modified_at: 2023-08-16

## Test environment

For the purposes of this tutorial, we have created a repository with the minimal setup required to use the editor. To follow along:
For this tutorial, we have created a minimal setup required to use the editor. To follow along, run the commands below:

1. Clone [this repository](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/crash-course).
2. Run the `npm install` command to install the dependencies.
3. Run the `npm run dev` command to start the project.
4. Open the URL displayed in your terminal.
```bash
npx -y degit ckeditor/ckeditor5-tutorials-examples/crash-course crash-course
cd crash-course

If everything went well, you should see a "Hello world!" text displayed on the page.
npm install
npm run dev
```

Open the URL displayed in your terminal. If everything went well, you should see a "Hello world!" text displayed on the page.

We encourage you to follow the steps in the tutorial and type the code yourself to build the muscle and mental memory.

Expand Down
48 changes: 15 additions & 33 deletions docs/tutorials/creating-simple-plugin-timestamp.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,38 +13,34 @@ We will create a toolbar button that will insert the current date and time at th

## Let's start!

The easiest way to set up your project is to grab the starter files from our [GitHub repository for this tutorial](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/timestamp-plugin). We gathered all the necessary dependencies there, including some CKEditor 5 packages and other files needed to run the editor.

The editor has already been created in the `main.js` file with some basic plugins. All you need to do is clone the repository, run the `npm install` command, and you can start coding right away.
The easiest way to get started is to grab the starter project using the commands below.

```bash
git clone https://github.com/ckeditor/ckeditor5-tutorials-examples
cd ckeditor5-tutorials-examples/timestamp-plugin/starter-files
npx -y degit ckeditor/ckeditor5-tutorials-examples/timestamp-plugin/starter-files timestamp-plugin
cd timestamp-plugin

npm install
npm run dev
```

## Creating a plugin
This will create a new directory called `timestamp-plugin` with the necessary files. The `npm install` command will install all the dependencies, and `npm run dev` will start the development server.

All features in the CKEditor 5 are powered by plugins. To create our custom timestamp plugin, we need to import the base `Plugin` class.
The editor with some basic plugins is created in the `main.js` file.

We can now create a `Timestamp` class that extends the basic `Plugin` class. After we define it, we can add it to the editor's plugins array.
## Creating a plugin

All features in the CKEditor 5 are powered by plugins. To create our custom timestamp plugin, we need to import the base `Plugin` class from the `ckeditor5`. Be careful not to remove the other imports from this package.

```js
import {
ClassicEditor,
Essentials,
Paragraph,
Heading,
List,
Bold,
Italic,
import {
// Other imports
Plugin
} from 'ckeditor5';
```

import 'ckeditor5/ckeditor5.css';
We can now create a `Timestamp` class that extends the basic `Plugin` class. After we define it, we can add it to the editor's plugins array.

```js
class Timestamp extends Plugin {
init() {
console.log( 'Timestamp was initialized.' );
Expand All @@ -56,14 +52,7 @@ ClassicEditor
// Add the Timestamp plugin to config.plugins array.
plugins: [
Essentials, Paragraph, Heading, List, Bold, Italic, Timestamp
],
toolbar: [ 'heading', 'bold', 'italic', 'numberedList', 'bulletedList' ]
} )
.then( editor => {
console.log( 'Editor was initialized', editor );
} )
.catch( error => {
console.error( error.stack );
]
} );
```

Expand All @@ -81,14 +70,7 @@ We also need to register our button in the editor's UI `componentFactory`, so it

```js
import {
ClassicEditor,
Essentials,
Paragraph,
Heading,
List,
Bold,
Italic,
Plugin,
// Other imports
ButtonView
} from 'ckeditor5';

Expand Down
31 changes: 9 additions & 22 deletions docs/tutorials/widgets/data-from-external-source.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,20 @@ This guide assumes that you are familiar with the widgets concept introduced in

The overall project structure will be similar to one described in the {@link tutorials/widgets/implementing-an-inline-widget#bootstrapping-the-project Bootstrapping the project} section of the "Implementing an inline widget" tutorial.

The easiest way to set up your project is to grab the starter files from the [GitHub repository for this tutorial](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/data-from-external-source). We gathered all the necessary dependencies there, including some CKEditor&nbsp;5 packages and other files needed to start the editor.

The editor has already been created in the `main.js` file with some basic plugins. All you need to do is clone the repository, navigate to the [starter-files directory](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/data-from-external-source/starter-files), run the `npm install` command, and you can start coding right away.
The easiest way to get started is to grab the starter project using the commands below.

```bash
git clone https://github.com/ckeditor/ckeditor5-tutorials-examples
cd ckeditor5-tutorials-examples/data-from-external-source/starter-files
npx -y degit ckeditor/ckeditor5-tutorials-examples/data-from-external-source/starter-files data-from-external-source
cd data-from-external-source

npm install
npm run dev
```

This will create a new directory called `data-from-external-source` with the necessary files. The `npm install` command will install all the dependencies, and `npm run dev` will start the development server.

The editor with some basic plugins is created in the `main.js` file.

First, lets define the `ExternalDataWidget` plugin. The project structure should be as follows:

```plain
Expand Down Expand Up @@ -104,27 +106,12 @@ Finally, you need to load the `ExternalDataWidget` plugin in your `main.js` file
```js
// main.js

import { ClassicEditor, Bold, Italic, Essentials, Heading, List, Paragraph } from 'ckeditor5';
import ExternalDataWidget from './external-data-widget/externaldatawidget';
import CKEditorInspector from '@ckeditor/ckeditor5-inspector';

import 'ckeditor5/ckeditor5.css';

ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Essentials, Paragraph, Heading, List, Bold, Italic, ExternalDataWidget ],
toolbar: [ 'heading', 'bold', 'italic', 'numberedList', 'bulletedList', '|', 'undo', 'redo' ]
} )
.then( editor => {
console.log( 'Editor was initialized', editor );

CKEditorInspector.attach( { editor: 'editor' } );

// Expose for playing in the console.
window.editor = editor;
} )
.catch( error => {
console.error( error.stack );
} );
```

Expand Down Expand Up @@ -576,8 +563,8 @@ You can see the external data widget implementation in action in the editor belo
If you got lost at any point in the tutorial or want to go straight to the solution, there is a repository with the [final project](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/data-from-external-source/final-project) available.

```bash
git clone https://github.com/ckeditor/ckeditor5-tutorials-examples
cd ckeditor5-tutorials-examples/data-from-external-source/final-project
npx -y degit ckeditor/ckeditor5-tutorials-examples/data-from-external-source/final-project final-project
cd final-project

npm install
npm run dev
Expand Down
50 changes: 10 additions & 40 deletions docs/tutorials/widgets/implementing-a-block-widget.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,21 @@ This tutorial will reference various parts of the {@link framework/architecture/

## Let's start

The easiest way to set up your project is to grab the starter files from the [GitHub repository for this tutorial](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/block-widget). We gathered all the necessary dependencies there, including some CKEditor&nbsp;5 packages and other files needed to start the editor.

The editor has already been created in the `main.js` file with some basic plugins. All you need to do is clone the repository, navigate to the [starter-files directory](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/block-widget/starter-files), run the `npm install` command, and you can start coding right away.
The easiest way to get started is to grab the starter project using the commands below.

```bash
git clone https://github.com/ckeditor/ckeditor5-tutorials-examples
cd ckeditor5-tutorials-examples/block-widget/starter-files
npx -y degit ckeditor/ckeditor5-tutorials-examples/block-widget/starter-files block-widget
cd block-widget

npm install
npm run dev
```

You should see a CKEditor&nbsp;5 instance in your browser like this:
This will create a new directory called `block-widget` with the necessary files. The `npm install` command will install all the dependencies, and `npm run dev` will start the development server.

The editor with some basic plugins is created in the `main.js` file.

Open the URL displayed in your terminal. If everything went well, you should see a CKEditor&nbsp;5 instance in your browser like this:

{@img assets/img/tutorial-implementing-a-widget-1.png Screenshot of a classic editor initialized from source.}

Expand Down Expand Up @@ -109,16 +111,6 @@ Finally, you need to load the `SimpleBox` plugin in your `main.js` file:
```js
// main.js

import {
ClassicEditor,
Bold,
Italic,
Essentials,
Heading,
List,
Paragraph
} from 'ckeditor5';

import SimpleBox from './simplebox/simplebox'; // ADDED

ClassicEditor
Expand All @@ -128,15 +120,6 @@ ClassicEditor
SimpleBox // ADDED
],
toolbar: [ 'heading', 'bold', 'italic', 'numberedList', 'bulletedList' ]
} )
.then( editor => {
console.log( 'Editor was initialized', editor );

// Expose for playing in the console.
window.editor = editor;
} )
.catch( error => {
console.error( error.stack );
} );
```

Expand Down Expand Up @@ -366,16 +349,6 @@ To learn that, use the official {@link framework/development-tools/inspector CKE
```js
// main.js

import {
ClassicEditor,
Bold,
Italic,
Essentials,
Heading,
List,
Paragraph
} from 'ckeditor5';

import SimpleBox from './simplebox/simplebox';

import CKEditorInspector from '@ckeditor/ckeditor5-inspector'; // ADDED
Expand All @@ -394,9 +367,6 @@ ClassicEditor
CKEditorInspector.attach( { 'editor': editor } );

window.editor = editor;
} )
.catch( error => {
console.error( error.stack );
} );
```

Expand Down Expand Up @@ -838,8 +808,8 @@ You can see the block widget implementation in action in the editor below. You c
If you got lost at any point in the tutorial or want to go straight to the solution, there is a repository with the [final project](https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/block-widget/final-project) available.

```bash
git clone https://github.com/ckeditor/ckeditor5-tutorials-examples
cd ckeditor5-tutorials-examples/block-widget/final-project
npx -y degit ckeditor/ckeditor5-tutorials-examples/block-widget/final-project final-project
cd final-project

npm install
npm run dev
Expand Down
Loading

0 comments on commit 43271fc

Please sign in to comment.