Skip to content

[WIP] Add HTML editor mode and type switcher feature#67

Merged
kiyarose merged 13 commits into
mainfrom
copilot/add-html-editor-mode-and-type-switcher
May 3, 2026
Merged

[WIP] Add HTML editor mode and type switcher feature#67
kiyarose merged 13 commits into
mainfrom
copilot/add-html-editor-mode-and-type-switcher

Conversation

Copilot AI commented May 2, 2026

Copy link
Copy Markdown
Contributor
  • Add HTML Editor mode option to settings modal (alongside Classic/Inline)
  • Implement isHtmlMode(), enableHtmlEditor(), disableHtmlEditor(), updated setEditorMode() in global.js
  • Add new item types (button, navmenu, dropdown, frame) to VALID_ITEM_TYPES and addItem()
  • Create handler files: js/handlers/button.js, navmenu.js, dropdown.js, frame.js
  • Add sanitizeHtmlContent() to helpers.js
  • Update text modal (HTML mode shows Button/Nav/Dropdown/Frame; classic-mode link hidden in HTML mode)
  • Bind text modal listeners for HTML-mode buttons in global.js
  • Wire new handlers into classic.js (renderBuilderInputs + collectPreviewNodes)
  • Add {} HTML-toggle button per-item in classic builder header (HTML mode only)
  • Wire new handlers into inline.js (buildInlineStandardElement)
  • Fix handleLiveInput to coerce frameHeight to number
  • Add CSS: .html-btn variants, .html-navmenu, .html-dropdown, .html-frame-wrapper, .html-code-toggle-btn
  • Verify UI via browser screenshot

Copilot AI linked an issue May 2, 2026 that may be closed by this pull request
@deepsource-io

deepsource-io Bot commented May 2, 2026

Copy link
Copy Markdown

DeepSource Code Review

We reviewed changes in 4919560...8d129dd on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

Important

Some issues found as part of this review are outside of the diff in this pull request and aren't shown in the inline review comments due to GitHub's API limitations. You can see those issues on the DeepSource dashboard.

PR Report Card

Overall Grade   Security  

Reliability  

Complexity  

Hygiene  

Coverage  

Code Review Summary

Analyzer Status Updated (UTC) Details
Shell May 3, 2026 1:33a.m. Review ↗
JavaScript May 3, 2026 1:33a.m. Review ↗
Code coverage May 3, 2026 1:33a.m. Review ↗
Secrets May 3, 2026 1:33a.m. Review ↗

Code Coverage Summary

Language Line Coverage (Overall)
Aggregate
100%
Javascript
0%

➟ Additional coverage metrics may have been reported. See full coverage report ↗


Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

Agent-Logs-Url: https://github.com/SillyLittleTech/CookieCut/sessions/4fae98dc-422f-404b-8657-fd323ee2f94b

Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com>
This commit fixes the style issues introduced in 9636ca4 according to the output
from Prettier and StandardJS.

Details: #67
Comment thread js/global.js
'dropdown',
'frame'
])
const VALID_HTML_ITEM_TYPES = new Set([

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'VALID_HTML_ITEM_TYPES' is assigned a value but never used


Found variables that are declared but not used anywhere.

NOTE: In browser applications, DeepSource recommends the use of ESModules over regular text/javascript scripts.
Currently, we don't support variables that are not explicitly exported,
and are injected into other scripts by being included in an HTML file

Comment thread js/handlers/navmenu.js Outdated
const links = parseNavLinks(item.links)
links.forEach((link) => {
const li = document.createElement('li')
const a = document.createElement('a')

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable name is too small


Short variable names affect code readability and complicate code refactoring, because of the difficulty in searching and replacing such short characters.

Comment thread js/helpers.js Outdated
attr.name === 'action'
) {
const val = attr.value.trim().toLowerCase()
if (val.startsWith('javascript:') || val.startsWith('data:text/html')) {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Script URL is a form of eval


Using javascript: URLs is considered by some as a form of eval. Code passed in javascript: URLs has to be parsed and evaluated by the browser in the same way that eval is processed.

@github-actions

github-actions Bot commented May 2, 2026

Copy link
Copy Markdown

Visit the preview URL for this PR (updated for commit 8d129dd):

https://slf-cookiecutter--pr67-copilot-add-html-edi-2vopboyl.web.app

(expires Mon, 04 May 2026 01:33:31 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: f3acc43c256baca92da4092df239688a133cbab3

Agent-Logs-Url: https://github.com/SillyLittleTech/CookieCut/sessions/bfe7a89f-4b6a-473b-b70f-f5047b8dded2

Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com>
deepsource-autofix Bot and others added 3 commits May 2, 2026 15:33
This commit fixes the style issues introduced in b5ed84e according to the output
from Prettier and StandardJS.

Details: #67
Adds a Show HTML tools setting, inline/context editors for HTML elements and per-item HTML rendering, and an advanced HTML preview tab (optionally runnable scripts). Also improves modal theming/scrolling, navmenu behavior, and sample template coverage.

Co-authored-by: Cursor <cursoragent@cursor.com>
Remove generated Firebase logs from tracking and ignore the .firebase folder.

Co-authored-by: Cursor <cursoragent@cursor.com>
Comment thread app.js Outdated
Comment on lines +52 to +53
'CookieCut failed to start.\n\n' +
(error && error.stack ? String(error.stack) : String(error))

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unexpected string concatenation


In ES2015 (ES6), we can use template literals instead of string concatenation.

Comment thread app.js Outdated
wrap.style.color = '#7f1d1d'
wrap.textContent =
'CookieCut failed to start.\n\n' +
(error && error.stack ? String(error.stack) : String(error))

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using an optional chain expression instead, as it's more concise and easier to read


The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Comment thread js/builders/inline.js Outdated
let inlineIsPagedMode = false

function isHtmlToolsEnabled () {
return Boolean(recipeData.settings && recipeData.settings.showHtmlTools)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using an optional chain expression instead, as it's more concise and easier to read


The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Comment thread js/builders/inline.js Outdated
{ value: 'danger', label: 'Danger' },
{ value: 'ghost', label: 'Ghost' }
].forEach((opt) => {
const o = document.createElement('option')

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable name is too small


Short variable names affect code readability and complicate code refactoring, because of the difficulty in searching and replacing such short characters.

Comment thread js/builders/inline.js
return renderRichText(item?.content || '')
}

function buildInlineStandardElement ({

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

`buildInlineStandardElement` has a cyclomatic complexity of 36 with "very-high" risk


A function with high cyclomatic complexity can be hard to understand and
maintain. Cyclomatic complexity is a software metric that measures the number of
independent paths through a function. A higher cyclomatic complexity indicates
that the function has more decision points and is more complex.

Comment thread js/global.js Outdated
}

function isHtmlToolsEnabled () {
return Boolean(recipeData.settings && recipeData.settings.showHtmlTools)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using an optional chain expression instead, as it's more concise and easier to read


The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Comment thread js/global.js Outdated
const hasHtmlItems = recipeData.items.some(
(item) =>
(item && VALID_HTML_ITEM_TYPES.has(item.type)) ||
Boolean(item && item.htmlEnabled)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using an optional chain expression instead, as it's more concise and easier to read


The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Comment thread js/preview/advanced-html-preview.js Outdated
if (!isListItem && currentList) flushCurrentList()

const htmlContent =
item && item.htmlEnabled && typeof item.content === 'string'

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using an optional chain expression instead, as it's more concise and easier to read


The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Comment thread js/preview/advanced-html-preview.js Outdated
Comment on lines +246 to +248
'<!doctype html><title>Preview error</title><pre style="white-space: pre-wrap; font-family: ui-monospace, monospace; padding: 16px; color: #7f1d1d; background: #fef2f2; border: 1px solid #ef4444; border-radius: 8px;">' +
String(err && err.stack ? err.stack : err) +
'</pre>'

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unexpected string concatenation


In ES2015 (ES6), we can use template literals instead of string concatenation.

Comment thread js/preview/advanced-html-preview.js Outdated
win.document.open()
win.document.write(
'<!doctype html><title>Preview error</title><pre style="white-space: pre-wrap; font-family: ui-monospace, monospace; padding: 16px; color: #7f1d1d; background: #fef2f2; border: 1px solid #ef4444; border-radius: 8px;">' +
String(err && err.stack ? err.stack : err) +

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using an optional chain expression instead, as it's more concise and easier to read


The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Comment thread app.js Outdated
Comment on lines +52 to +53
'CookieCut failed to start.\n\n' +
(error && error.stack ? String(error.stack) : String(error))

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unexpected string concatenation


In ES2015 (ES6), we can use template literals instead of string concatenation.

Comment thread app.js Outdated
wrap.style.color = '#7f1d1d'
wrap.textContent =
'CookieCut failed to start.\n\n' +
(error && error.stack ? String(error.stack) : String(error))

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using an optional chain expression instead, as it's more concise and easier to read


The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Comment thread js/builders/inline.js Outdated
let inlineIsPagedMode = false

function isHtmlToolsEnabled () {
return Boolean(recipeData.settings && recipeData.settings.showHtmlTools)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using an optional chain expression instead, as it's more concise and easier to read


The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Comment thread js/builders/inline.js Outdated
{ value: 'danger', label: 'Danger' },
{ value: 'ghost', label: 'Ghost' }
].forEach((opt) => {
const o = document.createElement('option')

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable name is too small


Short variable names affect code readability and complicate code refactoring, because of the difficulty in searching and replacing such short characters.

Comment thread js/builders/inline.js
return renderRichText(item?.content || '')
}

function buildInlineStandardElement ({

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

`buildInlineStandardElement` has a cyclomatic complexity of 36 with "very-high" risk


A function with high cyclomatic complexity can be hard to understand and
maintain. Cyclomatic complexity is a software metric that measures the number of
independent paths through a function. A higher cyclomatic complexity indicates
that the function has more decision points and is more complex.

Comment thread js/global.js Outdated
}

function isHtmlToolsEnabled () {
return Boolean(recipeData.settings && recipeData.settings.showHtmlTools)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using an optional chain expression instead, as it's more concise and easier to read


The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Comment thread js/global.js Outdated
const hasHtmlItems = recipeData.items.some(
(item) =>
(item && VALID_HTML_ITEM_TYPES.has(item.type)) ||
Boolean(item && item.htmlEnabled)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using an optional chain expression instead, as it's more concise and easier to read


The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Comment thread js/preview/advanced-html-preview.js Outdated
if (!isListItem && currentList) flushCurrentList()

const htmlContent =
item && item.htmlEnabled && typeof item.content === 'string'

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using an optional chain expression instead, as it's more concise and easier to read


The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Comment thread js/preview/advanced-html-preview.js Outdated
Comment on lines +246 to +248
'<!doctype html><title>Preview error</title><pre style="white-space: pre-wrap; font-family: ui-monospace, monospace; padding: 16px; color: #7f1d1d; background: #fef2f2; border: 1px solid #ef4444; border-radius: 8px;">' +
String(err && err.stack ? err.stack : err) +
'</pre>'

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unexpected string concatenation


In ES2015 (ES6), we can use template literals instead of string concatenation.

Comment thread js/preview/advanced-html-preview.js Outdated
win.document.open()
win.document.write(
'<!doctype html><title>Preview error</title><pre style="white-space: pre-wrap; font-family: ui-monospace, monospace; padding: 16px; color: #7f1d1d; background: #fef2f2; border: 1px solid #ef4444; border-radius: 8px;">' +
String(err && err.stack ? err.stack : err) +

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using an optional chain expression instead, as it's more concise and easier to read


The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

Kiya Rose and others added 2 commits May 2, 2026 15:18
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit fixes the style issues introduced in 3ef2852 according to the output
from Prettier and StandardJS.

Details: #67
Comment thread js/builders/inline.js
textarea.focus()
}

function openInlineHtmlElementEditor (item) {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'openInlineHtmlElementEditor' is defined but never used


Found variables that are declared but not used anywhere.

NOTE: In browser applications, DeepSource recommends the use of ESModules over regular text/javascript scripts.
Currently, we don't support variables that are not explicitly exported,
and are injected into other scripts by being included in an HTML file

Comment thread js/builders/inline.js Outdated
}
}

function canToggleHtmlForItem (item) {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'canToggleHtmlForItem' is defined but never used


Found variables that are declared but not used anywhere.

NOTE: In browser applications, DeepSource recommends the use of ESModules over regular text/javascript scripts.
Currently, we don't support variables that are not explicitly exported,
and are injected into other scripts by being included in an HTML file

Comment thread js/builders/inline.js
return typeof item.content === 'string'
}

function isInlineHtmlElement (item) {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'isInlineHtmlElement' is defined but never used


Found variables that are declared but not used anywhere.

NOTE: In browser applications, DeepSource recommends the use of ESModules over regular text/javascript scripts.
Currently, we don't support variables that are not explicitly exported,
and are injected into other scripts by being included in an HTML file

Comment thread js/builders/inline.js Outdated
)
}

function getInlineContentHtml (item) {

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'getInlineContentHtml' is defined but never used


Found variables that are declared but not used anywhere.

NOTE: In browser applications, DeepSource recommends the use of ESModules over regular text/javascript scripts.
Currently, we don't support variables that are not explicitly exported,
and are injected into other scripts by being included in an HTML file

Comment thread js/global.js
Comment on lines +1699 to +1701
const newEl = dom.contentInputs.querySelector(
`[data-id="${newItem.id}"]`
)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unexpected lexical declaration in case block


Declarations in switch cases are visible to all blocks.
It is recommended not to have such declarations.

Kiya Rose and others added 2 commits May 2, 2026 21:27
…ode)

- Use template literals and optional chaining in app.js and advanced-html-preview
- Brace navmenu case in addItem switch; tighten isHtmlToolsEnabled and hasHtmlItems
- Rename short variables in navmenu and inline option builder
- Extract HTML override helpers to lower buildInlineStandardElement complexity
- Remove unused helpers; wire openInlineHtmlElementEditor via inline context menu

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit fixes the style issues introduced in aceb5a0 according to the output
from Prettier and StandardJS.

Details: #67
Comment thread js/builders/inline.js
return wrap
}

function buildInlineStandardElement ({

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

`buildInlineStandardElement` has a cyclomatic complexity of 28 with "very-high" risk


A function with high cyclomatic complexity can be hard to understand and
maintain. Cyclomatic complexity is a software metric that measures the number of
independent paths through a function. A higher cyclomatic complexity indicates
that the function has more decision points and is more complex.

Kiya Rose and others added 2 commits May 2, 2026 21:32
- Compute contentWithIcons per item in renderInlinePreview (fixes undefined ref)
- Replace large switches with handler maps in inline and classic builders
- Split handleLiveInput into smaller helpers for DeepSource JS-R1005

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit fixes the style issues introduced in 89f786b according to the output
from Prettier and StandardJS.

Details: #67
@sonarqubecloud

sonarqubecloud Bot commented May 3, 2026

Copy link
Copy Markdown

@kiyarose kiyarose marked this pull request as ready for review May 3, 2026 03:09
Copilot AI review requested due to automatic review settings May 3, 2026 03:09
@kiyarose kiyarose merged commit ed74f6e into main May 3, 2026
12 checks passed
@kiyarose kiyarose deleted the copilot/add-html-editor-mode-and-type-switcher branch May 3, 2026 03:10

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This WIP PR expands CookieCut’s document editor with an HTML-tools workflow: new HTML-oriented item types, per-item code/HTML editing affordances, and a separate “advanced” preview path for richer HTML output. It touches the editor state, both classic/inline builders, preview UI, sanitization helpers, and sample/template content.

Changes:

  • Adds HTML-tool settings/UI, including new modal options, a preview button, and classic/inline editor wiring for HTML-related controls.
  • Introduces new item types (button, navmenu, dropdown, frame, codescript) plus new handlers, styles, and sample template data.
  • Adds HTML sanitization and a new advanced HTML preview module intended for richer preview/export behavior.

Reviewed changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 12 comments.

Show a summary per file
File Description
templates/default/all-items.cookie Adds sample data for new HTML-oriented item types.
styles.css Adds styling for HTML-mode controls and new rendered elements.
partials/preview-panel.html Adds an HTML preview button and responsive preview controls layout.
partials/modals.html Expands text/settings modals for HTML tools and new item selections.
js/state.js Persists the new showHtmlTools setting in app state defaults.
js/preview/advanced-html-preview.js Adds a separate advanced HTML preview renderer/new-tab flow.
js/helpers.js Adds HTML sanitization helpers for HTML-mode content rendering.
js/handlers/navmenu.js Adds builder/preview rendering for navigation menu items.
js/handlers/frame.js Adds builder/preview rendering for iframe/frame items.
js/handlers/dropdown.js Adds builder/preview rendering for dropdown items.
js/handlers/codescript.js Adds builder/preview rendering for raw HTML/script blocks.
js/handlers/button.js Adds builder/preview rendering for button items.
js/global.js Wires new item types, settings, modal actions, preview controls, and live-input handling.
js/dom.js Registers new DOM references for HTML preview/settings controls.
js/builders/inline.js Extends inline editor behavior for new HTML item types and context menus.
js/builders/classic.js Extends classic builder inputs/preview rendering for new HTML item types and code view.
app.js Improves bootstrap error handling for partial loading.
.gitignore Normalizes the Firebase ignore entry to a directory pattern.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread js/builders/classic.js
Comment on lines +71 to +80
const isHtmlOnlyType = (type) =>
['button', 'navmenu', 'dropdown', 'frame', 'codescript'].includes(type)

const getCodeViewBuilderInput = (item) => {
const targetKey = isHtmlOnlyType(item.type) ? 'htmlOverride' : 'content'
const label = isHtmlOnlyType(item.type) ? 'HTML override' : 'HTML source'
const placeholder = isHtmlOnlyType(item.type)
? '<div>Custom HTML for this element…</div>'
: '<div>Custom HTML for this item…</div>'
const value = escapeHTML(item[targetKey] || '')
Comment thread js/global.js
if (isHtmlToolsEnabled()) {
import('./preview/advanced-html-preview.js')
.then(({ openAdvancedHtmlPreview }) =>
openAdvancedHtmlPreview(recipeData, { autoPrint: false })
Comment thread js/handlers/navmenu.js
Comment on lines +75 to +80
const links = parseNavLinks(item.links)
links.forEach((link) => {
const li = document.createElement('li')
const anchorEl = document.createElement('a')
anchorEl.href = link.href || '#'
anchorEl.innerHTML = renderRichText(link.label || '')
Comment thread js/builders/classic.js
Comment on lines +204 to +223
const htmlToolsEnabled = Boolean(recipeData.settings?.showHtmlTools)
// HTML-enabled items render their content as sanitized HTML in the preview
const htmlEnabled = Boolean(item.htmlEnabled)
const htmlToggleEligible =
htmlToolsEnabled &&
!['button', 'navmenu', 'dropdown', 'frame', 'codescript'].includes(
item.type
)
const htmlToggleBtn = htmlToggleEligible
? `<button type="button" class="html-code-toggle-btn item-btn${htmlEnabled ? ' active' : ''}" title="Toggle HTML editing for this item">{}</button>`
: ''
const codeViewToggleBtn = htmlToolsEnabled
? `<div class="code-view-toggle-group" role="group" aria-label="Code view toggle">
<button type="button" class="code-view-toggle-btn${item.codeView ? ' active' : ''}" data-mode="code" title="Code view">
<span class="material-icons">code</span>
</button>
<button type="button" class="code-view-toggle-btn${!item.codeView ? ' active' : ''}" data-mode="form" title="Form view">
<span class="material-icons">edit</span>
</button>
</div>`
Comment thread js/global.js
Comment on lines +481 to +483
if (type === 'navmenu') {
normalized.links = toStringOrFallback(rawItem.links, '[]')
}
Comment thread js/handlers/frame.js
Comment on lines +52 to +58
const iframe = document.createElement('iframe')
iframe.src = safeSrc
iframe.style.width = '100%'
iframe.style.height = `${item.frameHeight || 400}px`
iframe.style.border = 'none'
iframe.setAttribute('loading', 'lazy')
wrapper.appendChild(iframe)
Comment thread js/handlers/dropdown.js
Comment on lines +32 to +40
if (item.content) {
const label = document.createElement('label')
label.className = 'html-dropdown-label'
label.innerHTML = renderRichText(item.content)
wrapper.appendChild(label)
}

const select = document.createElement('select')
select.className = 'html-dropdown'
Comment thread js/handlers/dropdown.js
Comment on lines +42 to +46
const optionsText = item.options || ''
const options = optionsText
.split(',')
.map((o) => o.trim())
.filter(Boolean)
Comment on lines +32 to +56
const items = Array.isArray(data.items) ? data.items : []

const createOrReuseList = (type) => {
if (currentList && currentListType === type) return currentList
flushCurrentList()
currentList = doc.createElement(type === 'step' ? 'ol' : 'ul')
currentListType = type
return currentList
}

const scriptsToRun = []

const adoptNode = (node) => {
if (!node) return null
try {
return doc.importNode(node, true)
} catch {
// Fallback: serialize and reparse into the target document.
const tmp = doc.createElement('div')
tmp.innerHTML = node.outerHTML || ''
return tmp.firstElementChild
}
}

items.forEach((item) => {
Comment on lines +110 to +124
case 'button': {
nodes.push(adoptNode(renderButtonPreviewElement(item)))
break
}
case 'navmenu': {
nodes.push(adoptNode(renderNavmenuPreviewElement(item)))
break
}
case 'dropdown': {
nodes.push(adoptNode(renderDropdownPreviewElement(item)))
break
}
case 'frame': {
nodes.push(adoptNode(renderFramePreviewElement(item)))
break
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

major feat: HTML Editor mode and Type Switcher.

3 participants