SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

feat(app): import DOM/CSS from code panel

Browse source
This commit is contained in:
Danila Poyarkov 2026-06-06 10:59:43 +03:00
parent 6b3b2d68a7
commit 7f99431981
5 changed files with 163 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/app/document/io/create.ts
View file

@ -56,7 +56,7 @@ export function createDocumentIOActions(
setDocumentSource: sourceActions.setDocumentSource,
fitCurrentPageToViewport
})
const { openDOMFile } = createDOMOpenActions({
const { openDOMFile, importDOMText } = createDOMOpenActions({
editor,
state,
setDocumentSource: sourceActions.setDocumentSource,
@ -73,6 +73,7 @@ export function createDocumentIOActions(
disposeDocumentIO: sourceActions.disposeDocumentIO,
openFigFile,
openDOMFile,
importDOMText,
saveFigFile: sourceActions.saveFigFile,
saveFigFileAs: sourceActions.saveFigFileAs
}

45
src/app/document/io/dom.ts
View file

@ -28,6 +28,11 @@ type DOMImportOptions = {
path?: string
}
type DOMTextImportOptions = {
cssText?: string
documentName?: string
}
function documentNameFor(file: File): string {
return file.name.replace(/\.(html?|xhtml)$/i, '')
}
@ -38,19 +43,41 @@ export function createDOMOpenActions({
setDocumentSource,
fitCurrentPageToViewport
}: OpenDOMFileOptions) {
async function applyDOMText(html: string, options: DOMTextImportOptions) {
await yieldToUI()
const pageName = options.documentName ?? 'DOM Import'
const graph = await browserHTMLToSceneGraph(html, { cssText: options.cssText, pageName })
await yieldToUI()
await applyImportedDocument(editor, graph)
state.documentName = pageName
await fitCurrentPageToViewport()
editor.requestRender()
return pageName
}
async function importDOMText(html: string, options: DOMTextImportOptions = {}) {
try {
state.loading = true
const pageName = await applyDOMText(html, options)
setDocumentSource(`${pageName}.html`, 'html')
toast.info('Imported DOM/CSS document')
} catch (e) {
console.error('Failed to import DOM/CSS:', e)
toast.error(`Failed to import DOM/CSS: ${e instanceof Error ? e.message : String(e)}`)
} finally {
state.loading = false
}
}
async function openDOMFile(file: File, options: DOMImportOptions = {}) {
try {
state.loading = true
await yieldToUI()
const html = await file.text()
const pageName = documentNameFor(file)
const graph = await browserHTMLToSceneGraph(html, { cssText: options.cssText, pageName })
await yieldToUI()
await applyImportedDocument(editor, graph)
state.documentName = pageName
await applyDOMText(html, {
cssText: options.cssText,
documentName: documentNameFor(file)
})
setDocumentSource(file.name, 'html', options.handle, options.path)
await fitCurrentPageToViewport()
editor.requestRender()
} catch (e) {
console.error('Failed to open DOM/CSS file:', e)
toast.error(`Failed to open DOM/CSS file: ${e instanceof Error ? e.message : String(e)}`)
@ -59,5 +86,5 @@ export function createDOMOpenActions({
}
}
return { openDOMFile }
return { openDOMFile, importDOMText }
}

1
src/app/editor/session/modules.ts
View file

@ -70,6 +70,7 @@ export function createEditorStoreModules(
...vectorEdit,
openFigFile: documentIO.openFigFile,
openDOMFile: documentIO.openDOMFile,
importDOMText: documentIO.importDOMText,
setViewportSize: documentIO.setViewportSize,
fitCurrentPageToViewport: documentIO.fitCurrentPageToViewport,
saveFigFile: documentIO.saveFigFile,

112
src/components/CodePanel.vue
View file

@ -18,6 +18,10 @@ const store = useEditorStore()
const { copy, copied } = useClipboard({ copiedDuring: 2000 })
const { dialogs } = useI18n()
const jsxFormat = ref<JSXFormat>('openpencil')
const showImporter = ref(false)
const importHTML = ref('')
const importCSS = ref('')
const importing = ref(false)
function toggleFormat() {
jsxFormat.value = jsxFormat.value === 'openpencil' ? 'tailwind' : 'openpencil'
@ -38,6 +42,32 @@ const highlightedLines = computed(() => {
const { copy: copyRef, copied: copiedRef } = useClipboard({ copiedDuring: 2000 })
const canImport = computed(() => importHTML.value.trim().length > 0)
function toggleImporter() {
showImporter.value = !showImporter.value
}
async function pasteImportHTML() {
try {
importHTML.value = await navigator.clipboard.readText()
} catch (e) {
console.error('Failed to read clipboard:', e)
}
}
async function importCode() {
if (!canImport.value || importing.value) return
try {
importing.value = true
await store.importDOMText(importHTML.value, {
cssText: importCSS.value.trim() || undefined
})
} finally {
importing.value = false
}
}
function copyCode() {
copy(jsxCode.value)
}
@ -48,16 +78,9 @@ function copyReference() {
</script>
<template>
<div
v-if="!jsxCode"
data-test-id="code-panel-empty"
class="flex flex-1 items-center justify-center px-4 text-center"
>
<span class="text-xs text-muted">{{ dialogs.selectLayerForJSX }}</span>
</div>
<div v-else data-test-id="code-panel" class="flex min-h-0 flex-1 flex-col">
<div data-test-id="code-panel-root" class="flex min-h-0 flex-1 flex-col">
<div
v-if="jsxCode"
data-test-id="code-panel-header"
class="flex shrink-0 items-center justify-between border-b border-border px-3 py-1.5"
>
@ -72,6 +95,14 @@ function copyReference() {
</AppTextButton>
</div>
<div class="flex items-center gap-1">
<AppTextButton
test-id="code-panel-import-toggle"
:ui="{ base: 'flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] hover:bg-hover' }"
@click="toggleImporter"
>
<icon-lucide-file-input class="size-3" />
Import
</AppTextButton>
<Tip :label="dialogs.copyJSXReference">
<AppTextButton
test-id="code-panel-copy-ref"
@ -96,7 +127,68 @@ function copyReference() {
</div>
</div>
<ScrollAreaRoot class="min-h-0 flex-1">
<div
v-if="showImporter || !jsxCode"
data-test-id="code-panel-importer"
class="shrink-0 border-b border-border p-3"
>
<div class="mb-2 flex items-center justify-between gap-2">
<div class="min-w-0">
<div class="text-xs font-medium text-surface">Import HTML/CSS</div>
<div class="text-[11px] text-muted">
Paste HTML plus optional CSS or compiled Tailwind CSS.
</div>
</div>
<AppTextButton
test-id="code-panel-paste-import"
:ui="{ base: 'rounded px-1.5 py-0.5 text-[11px] hover:bg-hover' }"
@click="pasteImportHTML"
>
Paste
</AppTextButton>
</div>
<textarea
v-model="importHTML"
data-test-id="code-panel-import-html"
class="mb-2 h-28 w-full resize-none rounded border border-border bg-panel px-2 py-1.5 font-mono text-xs text-surface outline-none placeholder:text-muted/50 focus:border-accent"
placeholder='<div class="card">Hello</div>'
spellcheck="false"
/>
<textarea
v-model="importCSS"
data-test-id="code-panel-import-css"
class="mb-2 h-20 w-full resize-none rounded border border-border bg-panel px-2 py-1.5 font-mono text-xs text-surface outline-none placeholder:text-muted/50 focus:border-accent"
placeholder=".card { width: 240px; padding: 16px; border-radius: 12px; background: white; }"
spellcheck="false"
/>
<div class="flex items-center justify-between gap-2">
<span class="text-[11px] text-muted">Import replaces the current document.</span>
<AppTextButton
test-id="code-panel-import"
:ui="{
base: [
'rounded px-2 py-1 text-[11px]',
canImport && !importing
? 'bg-accent text-black hover:bg-accent/90'
: 'cursor-not-allowed opacity-50'
].join(' ')
}"
@click="importCode"
>
{{ importing ? 'Importing…' : 'Import to canvas' }}
</AppTextButton>
</div>
</div>
<div
v-if="!jsxCode"
data-test-id="code-panel-empty"
class="flex flex-1 items-center justify-center px-4 text-center"
>
<span class="text-xs text-muted">{{ dialogs.selectLayerForJSX }}</span>
</div>
<ScrollAreaRoot v-else data-test-id="code-panel" class="min-h-0 flex-1">
<ScrollAreaViewport class="code-highlight size-full">
<div class="p-3">
<div v-for="(html, i) in highlightedLines" :key="i" class="flex text-xs leading-5">

22
tests/e2e/code/panel.spec.ts
View file

@ -98,3 +98,25 @@ test('switching back to Design tab works', async () => {
.first()
).toBeVisible()
})
test('imports HTML and CSS into the canvas', async () => {
await codeTab().click()
await editor.page.getByTestId('code-panel-import-toggle').click()
await editor.page.getByTestId('code-panel-import-html').fill('<div class="card">Hello DOM</div>')
await editor.page
.getByTestId('code-panel-import-css')
.fill('.card { width: 240px; height: 120px; padding: 16px; background: #ffffff; }')
await editor.page.getByTestId('code-panel-import').click()
await editor.page.waitForFunction(() => {
const store = window.openPencil?.getStore?.()
return store?.graph.getAllNodes().some((node) => node.name.includes('Hello DOM'))
})
await editor.canvas.waitForRender()
const imported = await editor.page.evaluate(() => {
const store = window.openPencil?.getStore?.()
if (!store) throw new Error('OpenPencil store not initialized')
return store.graph.getAllNodes().some((node) => node.name.includes('Hello DOM'))
})
expect(imported).toBe(true)
})