// Programmatically set content for the article editor after render
if(articleEditor){
constarticleBlocks=[
{
id:'intro-heading-'+Date.now(),
type:'heading-2'asconst,
content:'Introduction'
},
{
id:'intro-para-'+Date.now(),
type:'paragraph'asconst,
content:'Modern web development has evolved significantly over the past decade. In this article, we\'ll explore the key technologies and best practices that define web development in 2024.'
// Initialize drag demo editor with sample content
if(dragDemoEditor){
constdragDemoBlocks=[
{
id:'drag-title-'+Date.now(),
type:'heading-1'asconst,
content:'Drag & Drop Demo'
},
{
id:'drag-intro-'+Date.now(),
type:'paragraph'asconst,
content:'This editor demonstrates drag and drop functionality. Try dragging these blocks around!'
},
{
id:'drag-heading-'+Date.now(),
type:'heading-2'asconst,
content:'How It Works'
},
{
id:'drag-list-'+Date.now(),
type:'list'asconst,
content:'Hover over any block to see the drag handle\nClick and hold the handle to start dragging\nDrag to reorder blocks\nRelease to drop in the new position',
metadata:{listType:'ordered'}
},
{
id:'drag-quote-'+Date.now(),
type:'quote'asconst,
content:'The drag and drop feature makes it easy to reorganize your content without cutting and pasting.'
},
{
id:'drag-code-'+Date.now(),
type:'code'asconst,
content:'// Example: The blocks can be reordered\nconst blocks = editor.exportBlocks();\n// Rearrange blocks array\neditor.importBlocks(blocks);'
},
{
id:'drag-divider-'+Date.now(),
type:'divider'asconst,
content:' '
},
{
id:'drag-footer-'+Date.now(),
type:'paragraph'asconst,
content:'Note: Divider blocks cannot be dragged, but other blocks can be moved around them.'
content:'System performance remains within acceptable parameters with room for optimization in memory management.'
},
{
id:'code-heading-'+Date.now(),
type:'heading-3'asconst,
content:'Sample Query Performance'
},
{
id:'code-block-'+Date.now(),
type:'code'asconst,
content:'SELECT AVG(response_time) as avg_time,\n COUNT(*) as total_requests,\n DATE(created_at) as date\nFROM performance_logs\nWHERE created_at >= NOW() - INTERVAL 30 DAY\nGROUP BY DATE(created_at)\nORDER BY date DESC;'
},
{
id:'divider-'+Date.now(),
type:'divider'asconst,
content:' '
},
{
id:'footer-'+Date.now(),
type:'paragraph'asconst,
content:'Report generated automatically by System Monitor v2.5.0'
}
];
programmaticEditor.importBlocks(blocks);
});
}
if(generateRecipeBtn){
generateRecipeBtn.addEventListener('click',()=>{
constblocks=[
{
id:'recipe-title-'+Date.now(),
type:'heading-1'asconst,
content:'Classic Margherita Pizza'
},
{
id:'recipe-intro-'+Date.now(),
type:'paragraph'asconst,
content:'A traditional Italian pizza with fresh basil, mozzarella, and tomato sauce.'
},
{
id:'ingredients-heading-'+Date.now(),
type:'heading-2'asconst,
content:'🍕 Ingredients'
},
{
id:'dough-heading-'+Date.now(),
type:'heading-3'asconst,
content:'For the Dough:'
},
{
id:'dough-list-'+Date.now(),
type:'list'asconst,
content:'500g tipo "00" flour\n325ml warm water\n10g salt\n7g active dry yeast\n2 tbsp olive oil',
metadata:{listType:'bullet'}
},
{
id:'toppings-heading-'+Date.now(),
type:'heading-3'asconst,
content:'For the Toppings:'
},
{
id:'toppings-list-'+Date.now(),
type:'list'asconst,
content:'400g canned San Marzano tomatoes\n250g fresh mozzarella\nFresh basil leaves\nExtra virgin olive oil\nSalt and pepper to taste',
metadata:{listType:'bullet'}
},
{
id:'instructions-heading-'+Date.now(),
type:'heading-2'asconst,
content:'👨🍳 Instructions'
},
{
id:'steps-list-'+Date.now(),
type:'list'asconst,
content:'Dissolve yeast in warm water and let stand for 5 minutes\nMix flour and salt, create a well in center\nAdd yeast mixture and olive oil\nKnead for 10 minutes until smooth\nLet rise for 1-2 hours until doubled\nPunch down and divide into portions\nRoll out each portion to 12-inch circles\nTop with crushed tomatoes, mozzarella, and basil\nBake at 475°F (245°C) for 10-12 minutes',
metadata:{listType:'ordered'}
},
{
id:'tip-'+Date.now(),
type:'quote'asconst,
content:'Pro tip: For an authentic taste, use a pizza stone and preheat it in the oven for at least 30 minutes before baking.'
.description=${'Write your article using various formatting options'}
.value=${'<h1>Welcome to Our Blog</h1><p>This is an example blog post that demonstrates the capabilities of our WYSIWYG editor.</p><h2>Features Overview</h2><p>Our editor supports multiple block types including headings, paragraphs, quotes, and more.</p><blockquote>The best way to predict the future is to invent it.</blockquote><p>You can also create lists and code blocks for technical content.</p>'}
.description=${'Step-by-step guide with commands and explanations'}
.outputFormat=${'markdown'}
.value=${'# Git Tutorial for Beginners\n\nGit is a distributed version control system that helps you track changes in your code over time. This tutorial will guide you through the basics.\n\n## Prerequisites\n\nBefore starting, ensure you have:\n\n- Git installed on your system\n- A text editor or IDE\n- Basic command line knowledge\n\n## Getting Started\n\n### 1. Configure Git\n\nFirst, set up your identity:\n\n```bash\ngit config --global user.name "Your Name"\ngit config --global user.email "your.email@example.com"\n```\n\n### 2. Initialize a Repository\n\nCreate a new Git repository:\n\n```bash\nmkdir my-project\ncd my-project\ngit init\n```\n\n### 3. Basic Git Workflow\n\n#### Adding Files\n\nCreate a file and add it to staging:\n\n```bash\necho "# My Project" > README.md\ngit add README.md\n```\n\n#### Committing Changes\n\n```bash\ngit commit -m "Initial commit"\n```\n\n> **Best Practice:** Write clear, descriptive commit messages that explain what changes were made and why.\n\n### 4. Working with Branches\n\nBranches allow you to work on features independently:\n\n```bash\n# Create and switch to a new branch\ngit checkout -b feature-branch\n\n# Make changes and commit\ngit add .\ngit commit -m "Add new feature"\n\n# Switch back to main\ngit checkout main\n\n# Merge the feature\ngit merge feature-branch\n```\n\n---\n\n## Common Commands Reference\n\n| Command | Description |\n|---------|-------------|\n| `git status` | Check repository status |\n| `git log` | View commit history |\n| `git diff` | Show changes |\n| `git pull` | Fetch and merge changes |\n| `git push` | Upload changes to remote |\n\n## Next Steps\n\n1. Learn about remote repositories\n2. Explore advanced Git features\n3. Practice with real projects\n4. Contribute to open source\n\n**Happy coding!** 🚀'}
.value=${'<h2>Q4 Planning Meeting</h2><p><strong>Date:</strong> December 15, 2024<br><strong>Attendees:</strong> Product Team, Engineering, Design</p><h3>Agenda Items</h3><ol><li>Review Q3 achievements</li><li>Set Q4 objectives</li><li>Resource allocation</li><li>Timeline discussion</li></ol><h3>Key Decisions</h3><ul><li>Launch new dashboard feature by end of January</li><li>Increase engineering team by 2 developers</li><li>Implement weekly design reviews</li></ul><blockquote>"Focus on user experience improvements based on Q3 feedback" - Product Manager</blockquote><h3>Action Items</h3><ul><li>Sarah: Create detailed project timeline</li><li>Mike: Draft technical requirements</li><li>Lisa: Schedule user research sessions</li></ul><hr><p>Next meeting: January 5, 2025</p>'}
.value=${'# Ultimate Chocolate Chip Cookies\n\nThere\'s nothing quite like the smell of freshly baked chocolate chip cookies. This recipe has been perfected over years of testing!\n\n## Ingredients\n\n- 2¼ cups all-purpose flour\n- 1 tsp baking soda\n- 1 tsp salt\n- 1 cup butter, softened\n- ¾ cup granulated sugar\n- ¾ cup packed brown sugar\n- 2 large eggs\n- 2 tsp vanilla extract\n- 2 cups chocolate chips\n\n## Instructions\n\n### Step 1: Preparation\n\nPreheat your oven to **375°F (190°C)**. This temperature is crucial for achieving the perfect texture.\n\n### Step 2: Mix Dry Ingredients\n\nIn a medium bowl, whisk together:\n\n1. Flour\n2. Baking soda\n3. Salt\n\n### Step 3: Cream Butter and Sugars\n\n```\nCream butter and sugars for 3-4 minutes\nuntil light and fluffy\n```\n\n> **Pro tip:** Room temperature ingredients mix better and create a more uniform dough.\n\n### Step 4: Add Wet Ingredients\n\nBeat in eggs one at a time, then add vanilla extract.\n\n### Step 5: Combine and Bake\n\nGradually blend in flour mixture, then stir in chocolate chips. Drop rounded tablespoons onto ungreased cookie sheets.\n\n---\n\n**Baking time:** 9-11 minutes or until golden brown\n\n**Yield:** About 5 dozen cookies'}
.value=${'<h1>API Documentation</h1><p>Welcome to our API documentation. Below you\'ll find examples of how to use our endpoints.</p><h2>Authentication</h2><p>All API requests require authentication using an API key:</p><pre><code>Authorization: Bearer YOUR_API_KEY</code></pre><h2>Endpoints</h2><h3>GET /users</h3><p>Retrieve a list of users from the system.</p><pre><code>curl -X GET https://api.example.com/users \\\n -H "Authorization: Bearer YOUR_API_KEY"</code></pre><blockquote>Note: Rate limiting applies to all endpoints. You can make up to 100 requests per minute.</blockquote><h3>POST /users</h3><p>Create a new user in the system.</p><pre><code>{\n "name": "John Doe",\n "email": "john@example.com",\n "role": "user"\n}</code></pre><hr><p>For more information, please refer to our complete documentation.</p>'}
.description=${'Try the export buttons below to see different output formats'}
.value=${'<h1>Software Release Notes</h1><p><strong>Version 2.5.0</strong> - Released December 15, 2024</p><h2>🎉 New Features</h2><ul><li>Added dark mode support across all components</li><li>Implemented real-time collaboration features</li><li>New dashboard analytics widgets</li><li>Export functionality for all report types</li></ul><h2>🐛 Bug Fixes</h2><ul><li>Fixed memory leak in data processing module</li><li>Resolved authentication timeout issues</li><li>Corrected timezone handling in scheduled tasks</li></ul><h2>⚡ Performance Improvements</h2><blockquote>Page load times reduced by 40% through lazy loading and code splitting</blockquote><h2>🔧 Technical Details</h2><pre><code>// New API endpoint for batch operations\nPOST /api/v2/batch\n{\n "operations": [\n { "method": "GET", "path": "/users/123" },\n { "method": "PUT", "path": "/settings", "body": {...} }\n ]\n}</code></pre><h2>💡 Migration Guide</h2><ol><li>Update your dependencies to the latest versions</li><li>Run database migrations: <code>npm run migrate</code></li><li>Clear cache: <code>npm run cache:clear</code></li><li>Restart all services</li></ol><hr><p>For questions or issues, please contact the development team or file a ticket in our issue tracker.</p>'}
