diff --git a/.eslintrc.js b/.eslintrc.js index 26227a912..9e0de5ac0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -52,5 +52,5 @@ module.exports = { 'max-len': ['error', { code: 300 }], 'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1 }], }, - ignorePatterns: ['*/docs/api/*', 'dist'], + ignorePatterns: ['*/docs/api/*', 'dist', 'packages/cli/src/template/**/*.*', '*/locale/*', 'stats.json'], }; diff --git a/.github/actions/setup-project/action.yml b/.github/actions/setup-project/action.yml index 7ae3e89d7..e4f38afe0 100644 --- a/.github/actions/setup-project/action.yml +++ b/.github/actions/setup-project/action.yml @@ -5,7 +5,7 @@ inputs: pnpm-version: description: 'The version of pnpm to use for installing dependencies.' required: false - default: 8.6.3 + default: 9.10.0 node-version: description: 'The version of Node.js to use for building the project.' required: false @@ -25,5 +25,5 @@ runs: run: pnpm install shell: bash - name: Build project - run: pnpm build --force + run: pnpm build shell: bash diff --git a/.github/workflows/quality.yml b/.github/workflows/quality.yml index 94b0ae020..b23cbc384 100644 --- a/.github/workflows/quality.yml +++ b/.github/workflows/quality.yml @@ -11,13 +11,11 @@ jobs: steps: - uses: actions/checkout@v4 - uses: ./.github/actions/setup-project + - name: TS Check + run: pnpm ts:check - name: Lint run: pnpm lint - name: Format Check run: pnpm format:check - - name: Build - run: pnpm build --force - - name: Test - run: pnpm test - name: Docs run: pnpm docs:api diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 000000000..f14aa9d2a --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,24 @@ +name: GrapesJS Tests +on: + push: + branches: [dev] + pull_request: + branches: [dev] + +jobs: + test-core: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/setup-project + - name: Core Tests + run: pnpm test + working-directory: ./packages/core + test-cli: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/setup-project + - name: CLI Tests + run: pnpm test + working-directory: ./packages/cli diff --git a/.prettierignore b/.prettierignore index 19fba71ff..2a75b23ed 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,3 +1,6 @@ docs/**/*.md dist/ -pnpm-lock.yaml \ No newline at end of file +pnpm-lock.yaml +packages/cli/src/template/**/*.* +**/locale/** +stats.json \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 90581ceb7..896ae19ee 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -7,7 +7,7 @@ Thank you for your interest in contributing to GrapesJS! We welcome all types of ### Prerequisites - Node.js (version 20 LTS) -- pnpm (version 8.6.3 or later) +- pnpm (version 9.10.0 or later) ### Setup @@ -21,7 +21,7 @@ Thank you for your interest in contributing to GrapesJS! We welcome all types of 2. Install pnpm globally: ```bash - npm install -g pnpm@8.6.3 + npm install -g pnpm@9.10.0 ``` 3. Clone the repository: diff --git a/docs/Home.md b/docs/Home.md index 7aae1c693..6df16ef3d 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 976379e1f..61669da79 100644 --- a/docs/modules/Assets.md +++ b/docs/modules/Assets.md @@ -63,7 +63,7 @@ const editor = grapesjs.init({ }); ``` -If you want a complete list of available properties check out the source [AssetImage Model](https://github.com/GrapesJS/grapesjs/blob/dev/src/asset_manager/model/AssetImage.ts) +If you want a complete list of available properties check out the source [AssetImage Model](https://github.com/GrapesJS/grapesjs/blob/dev/packages/core/src/asset_manager/model/AssetImage.ts) The built-in Asset Manager modal is implemented and is showing up when requested. By default, you can make it appear by dragging Image Components in canvas, double clicking on images and all other stuff related to images (eg. CSS styling) @@ -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 diff --git a/docs/modules/Components.md b/docs/modules/Components.md index 0d3413d19..47e23c8d9 100644 --- a/docs/modules/Components.md +++ b/docs/modules/Components.md @@ -179,24 +179,24 @@ A more advanced use case of custom components is an implementation of a custom r Here below you can see the list of built-in component types, ordered by their position in the **Component Type Stack** -- [`cell`](https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/ComponentTableCell.ts) - Component for handle `` and `` elements -- [`row`](https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/ComponentTableRow.ts) - Component for handle `` elements -- [`table`](https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/ComponentTable.ts) - Component for handle `` elements -- [`thead`](https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/ComponentTableHead.ts) - Component for handle `` elements -- [`tbody`](https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/ComponentTableBody.ts) - Component for handle `` elements -- [`tfoot`](https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/ComponentTableFoot.ts) - Component for handle `` elements -- [`map`](https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/ComponentMap.ts) - Component for handle `` elements -- [`link`](https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/ComponentLink.ts) - Component for handle `` elements -- [`label`](https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/ComponentLabel.ts) - Component for handle properly `