close
Skip to content

feat: use declarative component-based configuration for content mode#5724

Open
shreyanshkotak wants to merge 8 commits intowebstudio-is:mainfrom
shreyanshkotak:editor-properties
Open

feat: use declarative component-based configuration for content mode#5724
shreyanshkotak wants to merge 8 commits intowebstudio-is:mainfrom
shreyanshkotak:editor-properties

Conversation

@shreyanshkotak
Copy link
Copy Markdown
Contributor

@shreyanshkotak shreyanshkotak commented Apr 25, 2026 •
edited
Loading

Description

This PR refactors content mode property restrictions to use a declarative, component-based configuration approach. Instead of maintaining hardcoded lists of editable properties in a central location, each component now declares which of its properties should be editable in content mode via the contentMode: boolean flag in PropMeta.

Content Mode Properties Added:

Component Properties
Image src, width, height, alt
Video src, width, height
YouTube url
Vimeo url
Vimeo Preview Image src
Link href
Markdown Embed code

Steps for reproduction

  1. Create a project and share it with editor-only access
  2. Switch to content edit mode
  3. Select a YouTube or Vimeo component on the canvas
  4. In the Properties panel, the url property should now be visible and editable
  5. Modify the YouTube/Vimeo URL and verify it updates correctly

Code Review

  • hi @kof, I need you to do
    • conceptual review (architecture, feature-correctness)
    • detailed review (read every line)
    • test it on preview

Before requesting a review

  • made a self-review
  • added inline comments where things may be not obvious (the "why", not "what")

Before merging

  • tested locally and on preview environment (preview dev login: 0000)
  • updated test cases document
  • added tests
  • if any new env variables are added, added them to .env file

@shreyanshkotak
feat: make YouTube and Vimeo URLs editable in content mode
d8053a0 
Add component-based property restrictions alongside existing tag-based
restrictions, enabling editors with content-only access to modify
YouTube
and Vimeo URLs.
@shreyanshkotak shreyanshkotak changed the title feat: make YouTube and Vimeo URLs editable in content mode feat: use declarative component-based configuration for content mode Apr 25, 2026
@kof kof temporarily deployed to development April 25, 2026 21:50 — with Image GitHub Actions Inactive
@kof kof temporarily deployed to development April 25, 2026 21:50 — with Image GitHub Actions Inactive
@kof kof temporarily deployed to development April 25, 2026 21:50 — with Image GitHub Actions Inactive
@kof kof temporarily deployed to development April 25, 2026 21:50 — with Image GitHub Actions Inactive
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 25, 2026

🚀 Deployed!

📍 Preview: https://pr-5724.development.webstudio.is

Note: Adding new commits will remove the safe-to-deploy label and require re-approval.

@kof kof temporarily deployed to development April 25, 2026 21:51 — with Image GitHub Actions Inactive
@kof kof temporarily deployed to development April 25, 2026 21:51 — with Image GitHub Actions Inactive
@kof
Copy link
Copy Markdown
Member

kof commented Apr 26, 2026 •
edited
Loading

Found a few more things:

  • Time.datetime and other properties could be changeable as well I think
  • What about bindings? I feel like if the field has a binding, content author shouldn't be changing it, since its bound to some data and its already editable somewhere else, it would be a functional change, they are already marked as non-editable but user in content mode can reset the binding, maybe they shouldn't be able to? idk
  • We don't show right now text content field in settings, though I don't see a reason not to show it (if not bound), because sometimes its easier to work with a text field than with canvas (in case there is some kind of parser bug) ... this is currently also hidden, but could be enabled I feel

@shreyanshkotak
Copy link
Copy Markdown
Contributor Author

shreyanshkotak commented Apr 27, 2026

  • Time properties could be changeable
  • Text content field in settings

What about bindings? I feel like if the field has a binding, content author shouldn't be changing it, since its bound to some data and its already editable somewhere else, it would be a functional change, they are already marked as non-editable but user in content mode can reset the binding, maybe they shouldn't be able to? idk

Since we have now enabled Text content field, if the text is bound to a variable/expression - it can not be edited directly, but the editor is now able to reset the property to unbind it and change it

@shreyanshkotak
fix: read Time datetime prop from content mode
c8f4c00 
Update the Time component to use the Webstudio metadata prop name
`datetime` instead of React's `dateTime` input prop. The component still
renders the native `dateTime` DOM attribute internally
@kof
Copy link
Copy Markdown
Member

kof commented Apr 27, 2026

Since we have now enabled Text content field, if the text is bound to a variable/expression - it can not be edited directly, but the editor is now able to reset the property to unbind it and change it

Right, I think we need to disable reset button in content mode

@shreyanshkotak
fix: disable prop reset when bound to expression
f70a992
@shreyanshkotak
refactor: code cleanup
c7e8e99 
- Memoize content-mode tag → attribute map as its own computed store so
  it isn't rebuilt on every selection change
- Drop dead reset guard in `TextContent`
@shreyanshkotak
Copy link
Copy Markdown
Contributor Author

shreyanshkotak commented Apr 28, 2026

made updates to disable reset property when bound to expression

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@shreyanshkotak @kof