Custom blocks example typing improvements #202
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| * This is typed generically. If you want an editor with your custom schema, you need to | ||
| * cast it manually, e.g.: `const e = editor as BlockNoteEditor<typeof mySchema>;` | ||
| */ | ||
| editor: BlockNoteEditor<BSchema & { [k in Type]: BlockSpec<Type, PSchema> }> |
There was a problem hiding this comment.
I think I understand what this is for but just to clarify:
If I make an alert custom block like this:
const alertPropSchema = {...} satisfies PropSchema;
const Alert: BlockConfig<"alert", typeof alertPropSchema, ..., ...> = {...};
Then inside render, editor will be of type:
BlockNoteEditor<BlockSchema & BlockSpec<"alert", typeof alertPropSchema>>
Whereas before it was just
BlockNoteEditor<BlockSchema>
Is that correct?
There was a problem hiding this comment.
Yes, and BlockSchema was super generic. Now, at least we know it countains the type of the block being added
| /** | ||
| * The custom block to render | ||
| */ | ||
| block: SpecificBlock< |
There was a problem hiding this comment.
Could this be simplified to
block: Block<{ [k in Type]: BlockSpec<Type, PSchema> }>
?
There was a problem hiding this comment.
Also as a side note - right now you could, if you wanted to, update block to a different type. Not relevant for now, but will be when we need to sort out cleaning up listeners, since I think that a listener for a custom block should be removed if the block changes type.
There was a problem hiding this comment.
I don't think it can, because the children of the block should be able to be of other types
There was a problem hiding this comment.
Ah, good point, missed that
| @@ -141,6 +149,13 @@ export type Block<BSchema extends BlockSchema> = | |||
| children: Block<BSchema>[]; | |||
| }; | |||
|
|
|||
| export type SpecificBlock< | |||
There was a problem hiding this comment.
Might be worth adding a comment for a bit of clarification (the other types are now also commented on the custom-blocks-example branch)
There was a problem hiding this comment.
Good point, will do on main branch later
matthewlipski
approved these changes
May 24, 2023
…g-improvements # Conflicts: # packages/core/src/extensions/Blocks/api/block.ts # packages/core/src/extensions/Blocks/api/blockTypes.ts # packages/core/src/extensions/Blocks/api/defaultBlocks.ts
YousefED
added a commit
that referenced
this pull request
May 31, 2023
* simplify formattingtoolbar * Fixed React component types and added customizable formatting toolbar factory * Finished formatting toolbar customization with old props * Changed formatting toolbar props to use BlockNoteEditor * Fixed text alignment with basic selection object * Fixed block nesting tests * Removed multiple block shorthand for updateBlock * Added comments * Added basic mouse cursor position * Added drag handle menu customization API * Copied changes from PR and minor improvements * Table block test * wip: custom blocks typing and API * add comments * fix nodeConversions, add schema * comments * Implemented renderHTML and parseHTML for createCustomBlock * Temp changes * Mostly implemented stricter typing for custom blocks * Cleanup & fixed build issues * Fixed useBlockNote and improved some typing * Implemented PR feedback * Minor changes * Made custom blocks use node views * Created custom example and setup component testing * Changed custom block `renderHTML` implementation * Changed custom block `renderHTML` implementation * Changed custom block testing setup and added custom block examples * Slightly changed `blockConfig.render` type * Fixed merge issues * custom blocks react poc * Added internal custom block copy/paste tests * Small fix * Added external custom block copy/paste tests * Added expected serialized HTML for example custom blocks * Updated playwright scripts * Updated component tests and added serializer extension * Updated React custom block API * Reverted `App.tsx` * Fixed `test:updateSnaps` script * Added external copypaste snapshots * Fixed failing tests * Copy/paste tests are now skipped for WebKit * Removed old `console.log`s * Small change to `test-ct` script * Removed image block from `defaultBlocks.ts` * Updated component tests & snapshots * General cleanup * Updated firefox colors snapshot * remove unnecessary generics for slash menu items * fix types * hack around TextAlignButton types * Custom blocks example typing improvements (#202) * improve typings * add tests for types --------- Co-authored-by: Matthew Lipski <[email protected]> * Implemented most PR feedback * Implemented most PR feedback * Minor fixes to custom blocks * Custom blocks docs (#217) * Fixed custom block placeholders, formatting toolbar, and sizing * Small styling changes * Made text align button not show up when selected block/s doesn't/don't support the prop * Updated docs * Finished 1st draft custom block docs and demo * Added type arguments in custom block docs & minor changes * Implemented PR feedback * Updated unit tests * simplify docs * package lock update * add comment * retreat, fallback slash command to "any" * update packages incl prosemirror-view (#223) * update packages incl prosemirror-view * fix build * fix ReactAlert + add logs --------- Co-authored-by: yousefed <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I managed to at least get the correct type of
blockin the render functions. Unfortunately, getting the correct type of "editor" is impossible afaik, unless we decide to separate the "render" functions from the other spec definitions. Theoretically, it's not necessary to define them at the same time as they serve different purposesUpgraded TS as part of this process to make sure I wasn't running into issues that have meanwhile been fixed