Code & Style Editors

Relevant source files

The following files were used as context for generating this wiki page:

• src/views.js
• src/style.js
• src/server.js
• src/widgets.js
• PLAN.md
• test/editor.browser.test.js

The Code and Style Editors provide in-browser tools for members to create and customize their static homepages. These editors allow direct manipulation of HTML, CSS, and other text-based files while offering real-time feedback through live previews.

The system emphasizes "old-web" style creation, where members write their own code rather than using complex frameworks or algorithms. The editors are integrated into the member dashboard and use CodeMirror for an enhanced coding experience, including features like syntax highlighting and tag autocomplete.

Sources: PLAN.md:3-5, src/views.js:338-340

Code Editor

The Code Editor handles the creation and modification of text-based files, such as HTML, CSS, JavaScript, and Markdown. It integrates the CodeMirror library to provide a professional editing environment within the browser.

Editor Architecture

The editor uses a sandboxed iframe for live previews. This isolation ensures that scripts running within the preview cannot access the member's login session or sensitive dashboard data. A <base> tag is injected into the preview to resolve relative paths for images and stylesheets correctly.

Sources: src/views.js:360-363, src/server.js:237-238

Key Features

Feature	Implementation
Syntax Highlighting	Uses CodeMirror modes for HTML, CSS, JS, XML, and Markdown.
Live Preview	Updates an iframe via srcdoc with a debounced 400ms delay.
Tag Autocomplete	Offers tag names when typing < or </ in HTML/XML modes.
Asset Insertion	Allows inserting site images or widgets at the cursor position.
Phishing Protection	Scans saved content for password/card fields or brand impersonation.

Sources: src/views.js:366-371, src/views.js:386-388, src/server.js:77-82, test/editor.browser.test.js:52-54

Phishing and Safety Checks

When a member saves a file, the server performs an "Auto-flag" scan. If the content contains suspicious signals (like password inputs or specific brand names in titles), the system creates a report for moderators and emails the abuse contact. The site remains live, but is marked for review.

Sources: src/server.js:77-83, PLAN.md:95-98

Style Editor

The Style Editor allows members to customize the visual appearance of their site without manually writing CSS. It generates a specialized file named puppypad.css based on user selections.

CSS Generation and Merging

The editor manages a specific block of CSS at the top of puppypad.css. This block is delimited by "puppypad-style" comments.

1. The editor parses the JSON stored in the header comment to load existing settings.
2. User changes update the JSON and the generated CSS variables.
3. Any CSS written by the user below the generated block (the "tail") is preserved during saves.

Sources: src/style.js:58-62, src/style.js:72-74

Configuration Options

The Style Editor provides several pre-defined categories for customization:

• Colors: Page, text, link, and visited link colors (Hex format).
• Typography: Selection of web-safe fonts (e.g., Comic Sans, Verdana, Georgia).
• Borders: Box styles including ridge, inset, dashed, and solid.
• Layout: Page width constraint (320px to 2000px).
• Backgrounds: Tiling patterns (stars, clouds, paws) or user-uploaded images.

Sources: src/style.js:5-22, src/views.js:400-415

Style Presets

The system includes several presets to serve as starting points:

Preset	Characteristics
Sky Blue	The default PuppyPad look with blue/yellow accents.
Geocities	High-contrast black and lime green with a crosshair cursor.
Notebook	Ruled paper background with Courier New font.
Night Mode	Dark background with soft blue and purple accents.

Sources: src/style.js:25-31

Implementation Details

File Operations

Saving in the editors uses an atomic write pattern. The server writes to a temporary file and then renames it over the target file. This prevents file corruption if a write is interrupted.

Sources: src/server.js:384-393

Snippet Insertion

The editors support the insertion of "Widgets" directly into the code. Widgets are snippets of HTML (like hit counters or guestbook iframes) provided by the widgets.js module.

// Example of how a widget is defined for insertion
const snippet = (cfg, user, id) => groups(cfg, user).flatMap((g) => g.items).find((i) => i.id === id) || null;
// The editor then uses JS to insert this at the cursor
if(ins)ins.addEventListener('click',function(){
  if(cm){cm.replaceRange(snip,cm.getCursor());cm.focus()}
  else{ta.setRangeText(snip,ta.selectionStart,ta.selectionEnd,'end');ta.focus()}
  draw();
});

Sources: src/widgets.js:63, src/views.js:389-393

Summary

The Code and Style editors are the primary interfaces for content creation on PuppyPad. The Code Editor provides a flexible environment for technical users via CodeMirror, while the Style Editor offers a guided customization path for puppypad.css. Both systems prioritize safety through sandboxed previews and server-side phishing validation.