canonical / canonical/vanilla-framework

Create editable fields within code snippets

Open
#4,337 7 comments 0 reactions 0 assignees View on GitHub
Review: Code needed Triaged: Pragma Triaged: v4 WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

After speaking with Landscape's product manager, he suggested we implement an editable field feature within the code snippet; which could update other pieces of code where the user's input may be needed. An example would be a tutorial where all the steps depend on a project's name, and they could replace that word in all following steps of the tutorial.

There is an example of this being implemented in [google's documentation](https://cloud.google.com/storage/docs/access-control/using-iam-permissions#gsutil_3)

![Screenshot 2022-02-22 at 18.01.30.png](https://images.zenhubusercontent.com/5e1c5367f4dbe2bfe4c77ad8/2c7eff3f-d7cf-4da2-af44-80301aa7f11b)

![Screenshot 2022-02-22 at 18.01.39.png](https://images.zenhubusercontent.com/5e1c5367f4dbe2bfe4c77ad8/c4d4f36c-4531-4627-bd19-7e3ffea06118)

![Screenshot 2022-02-22 at 18.01.48.png](https://images.zenhubusercontent.com/5e1c5367f4dbe2bfe4c77ad8/576a57e8-8ac9-4fbe-ba57-100e2e44a5d7)

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the linked Google documentation example and the existing code-snippet behavior in Vanilla Framework. Define how an editable value is represented, how updates propagate across later snippets, and which user interactions and tutorial cases must be covered before implementation.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.