fix: v0.1: View Example Dynamic Handling

Author: ShreyPurohit

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Change Log
 
-## [0.1.0] - 2025-09-16
+## [0.1.1] - 2025-09-22
+
+### Fixed
+
+- View Example dynamic handling
+
+## [0.1.0] - 2025-09-21
 
 ### Added
 

README.md

@@ -13,7 +13,7 @@
 </p>
 
 <p align="center">
-  <strong>🚀 The ultimate VS Code extension for managing folder structures with ease!</strong>
+  <strong>🚀 The ultimate Extension for managing folder structures with ease!</strong>
 </p>
 
 <hr style="border: 2px solid black; width: 100%; " />

package.json

@@ -3,7 +3,7 @@
   "displayName": "Folder Structure Pro",
   "description": "Easily copy or create folder structures in JSON or plain text, with .gitignore and hidden file support, and quickly copy file names with a single click.",
   "publisher": "iamshreydxv",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "engines": {
     "vscode": "^1.54.0"
   },

src/ui/helpers/index.ts

@@ -1,5 +1,5 @@
 export const getScripts = (formatChoice: string) => {
-    return `<script>const vscode=acquireVsCodeApi();const textarea=document.getElementById('folderStructure');const statusEl=document.getElementById('status');const statusSpan=statusEl.querySelector('span');const previewEl=document.getElementById('preview');const submitBtn=document.getElementById('submitBtn');const copyBtn=document.getElementById('copyBtn');const clearBtn=document.getElementById('clearBtn');const themeBtn=document.getElementById('themeBtn');const formatSelect=document.getElementById('formatSelect');const inputLabel=document.querySelector('.input-section .section-label');const initialFormat='${formatChoice}';const currentFormat=()=>(formatSelect&&'value'in formatSelect)?formatSelect.value:initialFormat;function updateStatus({valid,invalidLines,errorMessage}){statusEl.className='status-badge';if(errorMessage){statusEl.classList.add('invalid');statusSpan.textContent='Invalid';return}if(valid){statusEl.classList.add('valid');statusSpan.textContent='Valid'}else{statusEl.classList.add('invalid');statusSpan.textContent=invalidLines.length>0?\`Invalid (\${invalidLines.length} issues)\`:'Invalid'}}function requestValidation(){const content=textarea.value.trim();if(!content){statusEl.className='status-badge';statusSpan.textContent='Ready';try{if(inputLabel){inputLabel.textContent='Input ('+currentFormat()+')'}}catch{}try{vscode.postMessage({command:'validate',text:'',format:currentFormat()})}catch{}return}statusEl.className='status-badge warning';statusSpan.textContent='Validating...';if(inputLabel){inputLabel.textContent='Input ('+currentFormat()+')'}vscode.postMessage({command:'validate',text:content,format:currentFormat()})}function debounce(fn,delay){let timeoutId;return function(...args){clearTimeout(timeoutId);timeoutId=setTimeout(()=>fn.apply(this,args),delay)}}const debouncedValidation=debounce(requestValidation,300);textarea.addEventListener('input',debouncedValidation);submitBtn.addEventListener('click',()=>{const content=textarea.value.trim();if(content){vscode.postMessage({command:'submit',text:content,format:currentFormat()})}});if(formatSelect){formatSelect.addEventListener('change',()=>{const content=textarea&&'value'in textarea?textarea.value:'';if(inputLabel){inputLabel.textContent='Input ('+currentFormat()+')'}vscode.postMessage({command:'validate',text:content,format:currentFormat()})})}copyBtn.addEventListener('click',async()=>{const text=previewEl.textContent||'';if(text&&text!=="Preview will appear here..."){vscode.postMessage({command:'copyPreview',text});const originalText=copyBtn.textContent;copyBtn.textContent='Copied!';copyBtn.style.background='var(--success)';setTimeout(()=>{copyBtn.textContent=originalText;copyBtn.style.background=''},1500)}});clearBtn.addEventListener('click',()=>{if(textarea.value.trim()){textarea.value='';previewEl.textContent='';requestValidation();textarea.focus();const originalText=clearBtn.textContent;clearBtn.textContent='Cleared!';setTimeout(()=>{clearBtn.textContent=originalText},1000)}});function parseColorToRGB(c){const s=(c||'').toString().trim();if(s.startsWith('#')){const hex=s.slice(1);const h=hex.length===3?hex.split('').map(x=>x+x).join(''):hex;const num=parseInt(h,16)||0x1e1e1e;return{r:(num>>16)&255,g:(num>>8)&255,b:num&255}}const m=s.match(/rgb\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)/i);if(m){return{r:+m[1],g:+m[2],b:+m[3]}}return{r:30,g:30,b:30}}function luminance({r,g,b}){const a=[r,g,b].map(v=>{v/=255;return v<=0.03928?v/12.92:Math.pow((v+0.055)/1.055,2.4)});return 0.2126*a[0]+0.7152*a[1]+0.0722*a[2]}function setTheme(mode){if(mode==='light')document.documentElement.setAttribute('data-theme','light');else document.documentElement.removeAttribute('data-theme');const icon=document.getElementById('themeIcon');if(icon)icon.textContent=(mode==='light')?'☾':'☀'}(function initTheme(){const bg=getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-background');const lum=luminance(parseColorToRGB(bg));setTheme(lum<0.5?'dark':'light')})();window.addEventListener('message',(event)=>{const message=event.data;if(message.command==='validationResult'){updateStatus(message);previewEl.textContent=message.preview||''}});requestValidation();themeBtn.addEventListener('click',()=>{const isLight=document.documentElement.getAttribute('data-theme')==='light';setTheme(isLight?'dark':'light')});setTimeout(()=>{textarea.focus()},100)</script>`;
+    return `<script>const vscode=acquireVsCodeApi();const textarea=document.getElementById('folderStructure');const statusEl=document.getElementById('status');const statusSpan=statusEl.querySelector('span');const previewEl=document.getElementById('preview');const submitBtn=document.getElementById('submitBtn');const copyBtn=document.getElementById('copyBtn');const clearBtn=document.getElementById('clearBtn');const themeBtn=document.getElementById('themeBtn');const formatSelect=document.getElementById('formatSelect');const inputLabel=document.querySelector('.input-section .section-label');const exampleContent=document.querySelector('.example-content');const initialFormat='${formatChoice}';const currentFormat=()=>(formatSelect&&'value'in formatSelect)?formatSelect.value:initialFormat;function getExampleForFormat(format){return format==='Plain Text Format'?\`${getExample('Plain Text Format')}\`:\`${getExample('JSON Format')}\`}function updateExampleContent(){if(exampleContent){exampleContent.textContent=getExampleForFormat(currentFormat())}}function updateStatus({valid,invalidLines,errorMessage}){statusEl.className='status-badge';if(errorMessage){statusEl.classList.add('invalid');statusSpan.textContent='Invalid';return}if(valid){statusEl.classList.add('valid');statusSpan.textContent='Valid'}else{statusEl.classList.add('invalid');statusSpan.textContent=invalidLines.length>0?\`Invalid (\${invalidLines.length} issues)\`:'Invalid'}}function requestValidation(){const content=textarea.value.trim();if(!content){statusEl.className='status-badge';statusSpan.textContent='Ready';try{if(inputLabel){inputLabel.textContent='Input ('+currentFormat()+')'}}catch{}try{vscode.postMessage({command:'validate',text:'',format:currentFormat()})}catch{}return}statusEl.className='status-badge warning';statusSpan.textContent='Validating...';if(inputLabel){inputLabel.textContent='Input ('+currentFormat()+')'}vscode.postMessage({command:'validate',text:content,format:currentFormat()})}function debounce(fn,delay){let timeoutId;return function(...args){clearTimeout(timeoutId);timeoutId=setTimeout(()=>fn.apply(this,args),delay)}}const debouncedValidation=debounce(requestValidation,300);textarea.addEventListener('input',debouncedValidation);submitBtn.addEventListener('click',()=>{const content=textarea.value.trim();if(content){vscode.postMessage({command:'submit',text:content,format:currentFormat()})}});if(formatSelect){formatSelect.addEventListener('change',()=>{const content=textarea&&'value'in textarea?textarea.value:'';if(inputLabel){inputLabel.textContent='Input ('+currentFormat()+')'}updateExampleContent();vscode.postMessage({command:'validate',text:content,format:currentFormat()})})}copyBtn.addEventListener('click',async()=>{const text=previewEl.textContent||'';if(text&&text!=="Preview will appear here..."){vscode.postMessage({command:'copyPreview',text});const originalText=copyBtn.textContent;copyBtn.textContent='Copied!';copyBtn.style.background='var(--success)';setTimeout(()=>{copyBtn.textContent=originalText;copyBtn.style.background=''},1500)}});clearBtn.addEventListener('click',()=>{if(textarea.value.trim()){textarea.value='';previewEl.textContent='';requestValidation();textarea.focus();const originalText=clearBtn.textContent;clearBtn.textContent='Cleared!';setTimeout(()=>{clearBtn.textContent=originalText},1000)}});function parseColorToRGB(c){const s=(c||'').toString().trim();if(s.startsWith('#')){const hex=s.slice(1);const h=hex.length===3?hex.split('').map(x=>x+x).join(''):hex;const num=parseInt(h,16)||0x1e1e1e;return{r:(num>>16)&255,g:(num>>8)&255,b:num&255}}const m=s.match(/rgb\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)/i);if(m){return{r:+m[1],g:+m[2],b:+m[3]}}return{r:30,g:30,b:30}}function luminance({r,g,b}){const a=[r,g,b].map(v=>{v/=255;return v<=0.03928?v/12.92:Math.pow((v+0.055)/1.055,2.4)});return 0.2126*a[0]+0.7152*a[1]+0.0722*a[2]}function setTheme(mode){if(mode==='light')document.documentElement.setAttribute('data-theme','light');else document.documentElement.removeAttribute('data-theme');const icon=document.getElementById('themeIcon');if(icon)icon.textContent=(mode==='light')?'☾':'☀'}(function initTheme(){const bg=getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-background');const lum=luminance(parseColorToRGB(bg));setTheme(lum<0.5?'dark':'light')})();window.addEventListener('message',(event)=>{const message=event.data;if(message.command==='validationResult'){updateStatus(message);previewEl.textContent=message.preview||''}});requestValidation();updateExampleContent();themeBtn.addEventListener('click',()=>{const isLight=document.documentElement.getAttribute('data-theme')==='light';setTheme(isLight?'dark':'light')});setTimeout(()=>{textarea.focus()},100)</script>`;
 };
 
 export const getStyles = () => {