Extension, Mark, and Node classes allow functions for creation #6301
Conversation
…ccept function as config
🦋 Changeset detectedLatest commit: 7863bf6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 57 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Pull Request Overview
This PR adds flexibility by allowing the create and extend methods in the Extension, Mark, and Node classes to accept either a configuration object or a function that returns a configuration object. It also improves code documentation through additional JSDoc comments and changeset updates.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/core/src/Node.ts | Updated create and extend methods to resolve configuration functions and added corresponding comments. |
| packages/core/src/Mark.ts | Revised create and extend methods for functional configuration support and added JSDoc annotations. |
| packages/core/src/Extension.ts | Updated create and extend methods to handle configuration functions and enhanced documentation. |
| .changeset/silly-plants-sin.md | Added a changeset file describing the functional configuration support in extension creation. |
✅ Deploy Preview for tiptap-embed ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
@tiptap/core
@tiptap/extension-blockquote
@tiptap/extension-bubble-menu
@tiptap/extension-bullet-list
@tiptap/extension-bold
@tiptap/extension-code
@tiptap/extension-code-block
@tiptap/extension-code-block-lowlight
@tiptap/extension-collaboration
@tiptap/extension-collaboration-caret
@tiptap/extension-color
@tiptap/extension-document
@tiptap/extension-floating-menu
@tiptap/extension-font-family
@tiptap/extension-hard-break
@tiptap/extension-heading
@tiptap/extension-highlight
@tiptap/extension-horizontal-rule
@tiptap/extension-image
@tiptap/extension-italic
@tiptap/extension-link
@tiptap/extension-list
@tiptap/extension-mention
@tiptap/extension-ordered-list
@tiptap/extension-paragraph
@tiptap/extension-strike
@tiptap/extension-subscript
@tiptap/extension-superscript
@tiptap/extension-table
@tiptap/extension-text
@tiptap/extension-text-align
@tiptap/extension-text-style
@tiptap/extension-typography
@tiptap/extension-underline
@tiptap/extension-youtube
@tiptap/extensions
@tiptap/html
@tiptap/pm
@tiptap/react
@tiptap/starter-kit
@tiptap/static-renderer
@tiptap/suggestion
@tiptap/vue-2
@tiptap/vue-3
commit: |
bdbch
changed the title
|
Added the documentation for this new option here: |
There was a problem hiding this comment.
I like the idea. Before we merge, I'd like to point out that this solution does have some limitations. It's not possible to access the extension options and storage from the method. So the amount of helper functions, variables and methods you can initialize there is fairly limited. Most of them, you will need to initialize in the onBeforeCreate lifecycle method, where you have access to the editor state, extension options and storage (via the this object).
So, although this initializer function is a good step forward, I think the developer ergonomics can still be improved.
Perhaps a successful outcome would be to:
- Be able to define an internal storage object of the extension, which includes helper functions that are not exposed externally.
- Make the internal storage straightforward to initialize/update.
The problem with accessing storage in that callback is that the logic is happening before any extension is even registered to the editor (and therefore no storages to access). I think it would still be possible to access storage in functions defined in the const MyExtension = Extension.create(() => {
const initialName = 'Jane Doe'
function sayHello(name) {
console.log(name)
}
// writing into storage wouldn't really work here - but you could split up logic into smaller chunks of methods that you could use below
function createInitials(name) {
return name.split(' ')
.map(s => s[0].toUpperCase())
.join('')
}
return {
name: 'myExtension',
addStorage() {
name: initialName,
initials: createInitials(initialName),
},
onUpdate() {
sayHello(this.storage.name)
},
}
})To me those are two separated things.
Both are separated to me, 2 can reuse logic from 1 but 1 can't access 2s state because it can't assume it before anything is created yet. |
Changes Overview
This pull request enhances the flexibility of the
createandextendmethods in theExtension,Mark, andNodeclasses by allowing configuration objects to be provided as functions. It also improves code readability by adding detailed comments and JSDoc annotations.Enhancements to
createmethods:createmethod in theExtensionclass to accept either a configuration object or a function that returns a configuration object. Added JSDoc annotations for better documentation. (packages/core/src/Extension.ts, packages/core/src/Extension.tsL18-R27)createmethod in theMarkclass, allowing for functional configuration and adding comments for clarity. (packages/core/src/Mark.ts, packages/core/src/Mark.tsL149-R156)createmethod in theNodeclass to support functional configuration and added JSDoc annotations. (packages/core/src/Node.ts, packages/core/src/Node.tsL343-R350)Enhancements to
extendmethods:extendmethod in theExtensionclass to handle functional configurations, improving flexibility. (packages/core/src/Extension.ts, packages/core/src/Extension.tsL30-R41)extendmethods in both theMarkandNodeclasses to support functional configurations, maintaining consistency across the codebase. (packages/core/src/Mark.ts, [1];packages/core/src/Node.ts, [2]This change allows developers to create extensions like this:
Checklist