mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-08 21:15:18 +09:00
Bogdan Chadkin
59b6471c4f
Ref https://github.com/webstudio-is/webstudio/issues/4404 Slightly reworked paste story. Now minimal API to insert html looks like this ```js const fragment = generateFragmentFromHtml(html); insertWebstudioFragmentAt(fragment); ``` - attributes are casted to string, number and boolean types - text is wrapped with spans when outside of rich text - unsupported tags are ignored in result https://github.com/user-attachments/assets/c8072d86-72bd-4446-a26a-e678b193f93e
66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { expect, test } from "vitest";
|
|
import { setEnv } from "@webstudio-is/feature-flags";
|
|
import { renderData, ws } from "@webstudio-is/template";
|
|
import { createDefaultPages } from "@webstudio-is/project-build";
|
|
import type { Project } from "@webstudio-is/project";
|
|
import { registerContainers } from "../sync";
|
|
import { $instances, $pages, $project } from "../nano-states";
|
|
import { $awareness } from "../awareness";
|
|
import { html } from "./plugin-html";
|
|
|
|
setEnv("*");
|
|
registerContainers();
|
|
|
|
test("paste html fragment", () => {
|
|
const data = renderData(
|
|
<ws.element ws:tag="body" ws:id="bodyId">
|
|
<ws.element ws:tag="div" ws:id="divId"></ws.element>
|
|
</ws.element>
|
|
);
|
|
$project.set({ id: "" } as Project);
|
|
$instances.set(data.instances);
|
|
$pages.set(
|
|
createDefaultPages({ rootInstanceId: "bodyId", homePageId: "pageId" })
|
|
);
|
|
$awareness.set({ pageId: "pageId", instanceSelector: ["divId", "bodyId"] });
|
|
expect(
|
|
html.onPaste?.(`
|
|
<section>
|
|
<h1>It works</h1>
|
|
</section>
|
|
`)
|
|
).toEqual(true);
|
|
const [_bodyId, _divId, sectionId, headingId] = $instances.get().keys();
|
|
expect(sectionId).toBeTruthy();
|
|
expect(headingId).toBeTruthy();
|
|
expect($instances.get()).toEqual(
|
|
renderData(
|
|
<ws.element ws:tag="body" ws:id="bodyId">
|
|
<ws.element ws:tag="div" ws:id="divId">
|
|
<ws.element ws:tag="section" ws:id={sectionId}>
|
|
<ws.element ws:tag="h1" ws:id={headingId}>
|
|
It works
|
|
</ws.element>
|
|
</ws.element>
|
|
</ws.element>
|
|
</ws.element>
|
|
).instances
|
|
);
|
|
});
|
|
|
|
test("ignore html without any tags", () => {
|
|
const data = renderData(
|
|
<ws.element ws:tag="body" ws:id="bodyId">
|
|
<ws.element ws:tag="div" ws:id="divId"></ws.element>
|
|
</ws.element>
|
|
);
|
|
$project.set({ id: "" } as Project);
|
|
$instances.set(data.instances);
|
|
$pages.set(
|
|
createDefaultPages({ rootInstanceId: "bodyId", homePageId: "pageId" })
|
|
);
|
|
$awareness.set({ pageId: "pageId", instanceSelector: ["divId", "bodyId"] });
|
|
expect(html.onPaste?.(`It works`)).toEqual(false);
|
|
expect($instances.get()).toEqual(data.instances);
|
|
});
|