New feature motivation
The limel-code-diff examples page demonstrates the component with hard-coded inputs. To explore the component, a reader has to edit example source or imagine how their own content would render. An interactive playground lets a reader paste in their own "before"/"after" content and immediately see the resulting diff, while toggling the available display options — a much faster way to evaluate the component.
New feature description
Add an interactive example at the top of the code-diff examples page:
- Two editable
limel-code-editor boxes (old value / new value), side by side.
- A live
limel-code-diff below them that updates as the reader types.
- Controls to switch the
layout between unified and split, and to toggle lineWrapping on/off.
New feature implementation
- New example component
limel-example-code-diff-interactive, registered as the first @exampleComponent on limel-code-diff.
- Editors feed the diff via their
change event; the layout/line-wrapping controls reuse the existing limel-example-controls + limel-select + limel-switch pattern.
- Extract the
layout prop's inline 'unified' | 'split' union into a named, public CodeDiffLayout type so the example (and consumers) can reference it instead of repeating the literal.
New feature motivation
The
limel-code-diffexamples page demonstrates the component with hard-coded inputs. To explore the component, a reader has to edit example source or imagine how their own content would render. An interactive playground lets a reader paste in their own "before"/"after" content and immediately see the resulting diff, while toggling the available display options — a much faster way to evaluate the component.New feature description
Add an interactive example at the top of the code-diff examples page:
limel-code-editorboxes (old value / new value), side by side.limel-code-diffbelow them that updates as the reader types.layoutbetweenunifiedandsplit, and to togglelineWrappingon/off.New feature implementation
limel-example-code-diff-interactive, registered as the first@exampleComponentonlimel-code-diff.changeevent; the layout/line-wrapping controls reuse the existinglimel-example-controls+limel-select+limel-switchpattern.layoutprop's inline'unified' | 'split'union into a named, publicCodeDiffLayouttype so the example (and consumers) can reference it instead of repeating the literal.