Add global component type with focus-edit mode#91
Open
toriaezunama wants to merge 1 commit into
Open
Conversation
Introduces a three-type shared component model: - Local: default GrapesJS components (no changes). - Saved (Template): unlinked reusable starting points, surfaced as Blocks under a "Templates" category from a new `templates` plugin option. Capture is wired via a "Save as Template" command that invokes `onSaveTemplate`, letting the host persist the payload. - Global (Linked): a new `global-component` custom type wrapping a GrapesJS Symbol for in-page sync, tagged with `data-global-id` for cross-page identity. "Make Global" command promotes the selection. Adds a "Component edit mode" entered by double-clicking a Global: the rest of the canvas dims (opacity 0.3, pointer-events none) while the focused subtree remains full opacity and interactive — the visual cue that edits will propagate to every linked instance. CSS is iframe-scoped and DOM-only, so no transient classes leak into exported HTML. Exits on Escape, click-outside, preview/device change, undo/redo, or removal of the focused component. New toolbar buttons: Make Global, Save as Template, Edit Component (gated on selection type = global-component).
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Introduces a three-type shared component model:
templatesplugin option. Capture is wired via a "Save as Template" command that invokesonSaveTemplate, letting the host persist the payload.global-componentcustom type wrapping a GrapesJS Symbol for in-page sync, tagged withdata-global-idfor cross-page identity. "Make Global" command promotes the selection.Adds a "Component edit mode" entered by double-clicking a Global: the rest of the canvas dims (opacity 0.3, pointer-events none) while the focused subtree remains full opacity and interactive — the visual cue that edits will propagate to every linked instance. CSS is iframe-scoped and DOM-only, so no transient classes leak into exported HTML. Exits on Escape, click-outside, preview/device change, undo/redo, or removal of the focused component.
New toolbar buttons: Make Global, Save as Template, Edit Component (gated on selection type = global-component).