@qkix/strapi-plugin-better-blocks 0.23.7 → 0.23.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -12
- package/dist/admin/src/blockRegistry.d.ts +2 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -697,7 +697,16 @@ Third-party frames load only after that click, never on page load.
|
|
|
697
697
|
|
|
698
698
|
## Frontend Rendering
|
|
699
699
|
|
|
700
|
-
|
|
700
|
+
Three companion renderers read this content, one per framework. Each supports
|
|
701
|
+
every Better Blocks feature - text colors, background highlights, images, and all
|
|
702
|
+
standard block types - and each is native to its framework rather than a wrapper
|
|
703
|
+
around another one:
|
|
704
|
+
|
|
705
|
+
| Renderer | For |
|
|
706
|
+
| ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------- |
|
|
707
|
+
| [`@qkix/better-blocks-react-renderer`](https://github.com/qkix/strapi-plugins/tree/main/packages/better-blocks-react-renderer) | React / Next.js |
|
|
708
|
+
| [`@qkix/better-blocks-astro-renderer`](https://github.com/qkix/strapi-plugins/tree/main/packages/better-blocks-astro-renderer) | Astro - zero client-side JavaScript |
|
|
709
|
+
| [`@qkix/better-blocks-vue-renderer`](https://github.com/qkix/strapi-plugins/tree/main/packages/better-blocks-vue-renderer) | Vue 3 / Nuxt - with a Nuxt module for the setup |
|
|
701
710
|
|
|
702
711
|
```bash
|
|
703
712
|
# Using yarn
|
|
@@ -715,9 +724,8 @@ const MyComponent = ({ content }) => {
|
|
|
715
724
|
};
|
|
716
725
|
```
|
|
717
726
|
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
See the [@qkix/better-blocks-react-renderer](https://github.com/qkix/strapi-plugins/tree/main/packages/better-blocks-react-renderer) documentation for details.
|
|
727
|
+
See each renderer's own documentation for its props, custom renderers and
|
|
728
|
+
framework-specific notes.
|
|
721
729
|
|
|
722
730
|
## Requirements
|
|
723
731
|
|
|
@@ -770,7 +778,7 @@ export default {
|
|
|
770
778
|
```
|
|
771
779
|
|
|
772
780
|
Registering is the only supported way in. Editing this package to add a block is
|
|
773
|
-
how the editor,
|
|
781
|
+
how the editor, the renderers and the validator ended up with four separate
|
|
774
782
|
hardcoded lists of block types in the first place.
|
|
775
783
|
|
|
776
784
|
`registerBlock` throws if the type shadows a built-in or is registered twice -
|
|
@@ -779,7 +787,7 @@ not appear.
|
|
|
779
787
|
|
|
780
788
|
### The rest of the pipeline
|
|
781
789
|
|
|
782
|
-
The same definition object is understood by the core and
|
|
790
|
+
The same definition object is understood by the core and every renderer, so a
|
|
783
791
|
package writes `type` and `content` once:
|
|
784
792
|
|
|
785
793
|
| Where | What it adds |
|
|
@@ -787,7 +795,7 @@ package writes `type` and `content` once:
|
|
|
787
795
|
| `registerBlock` here | the editor: rendering, Insert menu, slash command |
|
|
788
796
|
| `validateDocument(doc, { blocks })` in the core | `validate`, so the block is not "unknown" |
|
|
789
797
|
| `migrateDocument(doc, { blocks })` in the core | `migrate`, called for every node of the type |
|
|
790
|
-
| `blockPlugins` on
|
|
798
|
+
| `blockPlugins` on any renderer | `component`, so the front end draws it |
|
|
791
799
|
|
|
792
800
|
A renderer given no plugin for a type renders nothing for it - content authored
|
|
793
801
|
with a registered block is not lost, it is simply not drawn until the front end
|
|
@@ -800,7 +808,9 @@ working registration.
|
|
|
800
808
|
## Contributing
|
|
801
809
|
|
|
802
810
|
Contributions are welcome! This package lives in a monorepo together with the
|
|
803
|
-
React and
|
|
811
|
+
React, Astro and Vue renderers -
|
|
812
|
+
[CONTRIBUTING.md](https://github.com/qkix/strapi-plugins/blob/main/CONTRIBUTING.md)
|
|
813
|
+
covers the whole workspace. The easiest way to get started is with Docker:
|
|
804
814
|
|
|
805
815
|
```bash
|
|
806
816
|
# Clone the repository
|
|
@@ -812,9 +822,9 @@ docker compose up --build
|
|
|
812
822
|
|
|
813
823
|
That builds the plugin and starts a Strapi v5 app (SQLite) at
|
|
814
824
|
`http://localhost:1337/admin`, seeded with showcase articles and an admin
|
|
815
|
-
account (`admin@example.com` / `admin12#`).
|
|
816
|
-
on `http://localhost:5173`
|
|
817
|
-
content.
|
|
825
|
+
account (`admin@example.com` / `admin12#`). The renderer examples come up
|
|
826
|
+
alongside it on `http://localhost:5173` (React), `http://localhost:4321` (Astro)
|
|
827
|
+
and `http://localhost:3000` (Nuxt), showing the same content.
|
|
818
828
|
|
|
819
829
|
To see the field itself, open any article, or add it to your own content type
|
|
820
830
|
via **Content-Type Builder** → **Add new field** → **CUSTOM** tab
|
|
@@ -842,7 +852,7 @@ docker compose down -v && docker compose up --build
|
|
|
842
852
|
|
|
843
853
|
```bash
|
|
844
854
|
pnpm install
|
|
845
|
-
pnpm build # the plugin, the core and
|
|
855
|
+
pnpm build # the plugin, the core and every renderer
|
|
846
856
|
|
|
847
857
|
pnpm --filter @qkix/example-strapi-app develop
|
|
848
858
|
```
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
* another request to leak into.
|
|
9
9
|
*
|
|
10
10
|
* Registering is the *only* supported way in. Adding a block by editing this
|
|
11
|
-
* package is how the editor,
|
|
11
|
+
* package is how the editor, the renderers and the validator ended up with
|
|
12
12
|
* four separate hardcoded lists of block types in the first place.
|
|
13
13
|
*/
|
|
14
14
|
/// <reference types="react" />
|
|
@@ -22,7 +22,7 @@ import type { CSSProperties } from 'styled-components';
|
|
|
22
22
|
*
|
|
23
23
|
* Extends the core {@link BlockDefinition}, so a package writes `type` and
|
|
24
24
|
* `content` once and the same object teaches the validator, the migrator and
|
|
25
|
-
*
|
|
25
|
+
* every renderer about the block.
|
|
26
26
|
*/
|
|
27
27
|
export type EditorBlockDefinition = BlockDefinition & {
|
|
28
28
|
/** Draws the block inside the editor. Slate calls this with its element props. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qkix/strapi-plugin-better-blocks",
|
|
3
|
-
"version": "0.23.
|
|
3
|
+
"version": "0.23.8",
|
|
4
4
|
"description": "An enhanced Rich Text (Blocks) field for Strapi with inline color picker and more",
|
|
5
5
|
"strapi": {
|
|
6
6
|
"kind": "plugin",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"remark-parse": "^11.0.0",
|
|
56
56
|
"shiki": "^4.3.0",
|
|
57
57
|
"unified": "^11.0.5",
|
|
58
|
-
"@qkix/better-blocks-core": "^0.2.
|
|
58
|
+
"@qkix/better-blocks-core": "^0.2.6"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
61
|
"@strapi/sdk-plugin": "^5.3.2",
|