From 3dc8455c0bea8f47ae21c13d4101fa5907f71cac Mon Sep 17 00:00:00 2001 From: omahs <73983677+omahs@users.noreply.github.com> Date: Fri, 13 Sep 2024 15:47:49 +0200 Subject: [PATCH] docs: fix typos (#6147) * fix typos --- docs/Home.md | 8 ++++---- docs/modules/Assets.md | 12 ++++++------ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/Home.md b/docs/Home.md index 7aae1c693c..6df16ef3d9 100644 --- a/docs/Home.md +++ b/docs/Home.md @@ -172,7 +172,7 @@ You could add other commands to enable interactions with blocks. Check [Built-in ## Style Manager -Any HTML structure requires, at some point, a proper style, so to meet this need the Style Manager was added as a built-in feature in GrapesJS. Style manager is composed by sectors, which group inside different types of CSS properties. So you can add, for instance, a `Dimension` sector for `width` and `height`, and another one as `Typography` for `font-size` and `color`. So it's up to you decide how organize sectors. +Any HTML structure requires, at some point, a proper style, so to meet this need the Style Manager was added as a built-in feature in GrapesJS. Style manager is composed by sectors, which group inside different types of CSS properties. So you can add, for instance, a `Dimension` sector for `width` and `height`, and another one as `Typography` for `font-size` and `color`. So it's up to you to decide how to organize sectors. To enable this module we rely on a built-in command `open-sm`, which shows up the Style Manager, which we gonna bind to another button in a separate panel @@ -228,7 +228,7 @@ Selecting one of the component will show up the Style Manager with default secto [[img/default-sm.jpg]] -As we exploring different configurations inside GrapesJS we gonna overwrite all the default sectors to create some custom one +As we explore different configurations inside GrapesJS we gonna overwrite all the default sectors to create some custom one Let's put a few sectors with use of `buildProps` which helps us building common properties @@ -356,7 +356,7 @@ styleManager : { ... ``` -As you can see using `buildProps` actually will save you a lot of work. You could also mix this techniques to obtain custom properties in less time. For example, let's see how can we setup the same width but with a different value of `min`: +As you can see using `buildProps` actually will save you a lot of work. You could also mix these techniques to obtain custom properties in less time. For example, let's see how we can setup the same width but with a different value of `min`: ```js ... @@ -402,7 +402,7 @@ var editor = grapesjs.init({ ... ``` -Worth noting the defaut `id` parameter which adds a prefix for all keys to store. If you check the localStorage inside your DOM panel you'll see something like `{ 'gjs-components': '
....' ...}` in this way it prevents the risk of collisions, quite common with localStorage use in large applications. +Worth noting the default `id` parameter which adds a prefix for all keys to store. If you check the localStorage inside your DOM panel you'll see something like `{ 'gjs-components': '
....' ...}` in this way it prevents the risk of collisions, quite common with localStorage use in large applications. Storing data locally it's easy and fast but useless in some common cases. In the next example we'll see how to setup a remote storage, which is not far from the previous one diff --git a/docs/modules/Assets.md b/docs/modules/Assets.md index a9ae65d2f3..61669da794 100644 --- a/docs/modules/Assets.md +++ b/docs/modules/Assets.md @@ -78,7 +78,7 @@ editor.runCommand('open-assets'); ``` -Worth nothing that by doing this you can't do much with assets (if you double click on them nothing happens) and this is because you've not indicated any target. Try just to select an image in your canvas and run this in console (you should first make the editor globally available `window.editor = editor;` in your script) +Worth noting that by doing this you can't do much with assets (if you double click on them nothing happens) and this is because you've not indicated any target. Try just to select an image in your canvas and run this in console (you should first make the editor globally available `window.editor = editor;` in your script) ```js editor.runCommand('open-assets', { @@ -225,7 +225,7 @@ am.getAll().length; // <- 3 am.getAllVisible().length; // <- 3 ``` -Ok, now let's show only assets form the first category +Ok, now let's show only assets from the first category ```js const assets = am.getAll(); @@ -325,7 +325,7 @@ Here an example of using custom Asset Manager with a Vue component. The example above is the right way if you need to replace the default UI, but as you might notice we append the mounted element to the container `props.container.appendChild(this.$el);`. This is required as the Asset Manager, by default, is placed in the [Modal](/modules/Modal.html). -How to approach the case when your Asset Manager is a completely independent/external module (eg. should be showed in its own custom modal)? Not a problem, you can bind the Asset Manager state via `assetManager.custom.open`. +How to approach the case when your Asset Manager is a completely independent/external module (eg. should be shown in its own custom modal)? Not a problem, you can bind the Asset Manager state via `assetManager.custom.open`. ```js const editor = grapesjs.init({ @@ -339,7 +339,7 @@ const editor = grapesjs.init({ // Init and open your external Asset Manager // ... // IMPORTANT: - // When the external library is closed you have to comunicate + // When the external library is closed you have to communicate // this state back to the editor, otherwise GrapesJS will think // the Asset Manager is still open. // example: myAssetManager.on('close', () => props.close()) @@ -357,10 +357,10 @@ It's important to declare also the `close` function, the editor should be able t