mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-05 03:28:59 +09:00
Oleg Isonen
d56e857cb6
Ref https://github.com/webstudio-is/webstudio/issues/2647 ## Description This allows to copy Heading only and only tested with minimal styles, hence this is first stage, next I will add components and add tests with complex styles. ## Steps for reproduction 1. click button 2. expect xyz ## Code Review - [ ] hi @TrySound , I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory
847 lines
14 KiB
TypeScript
847 lines
14 KiB
TypeScript
import { describe, test, expect } from "@jest/globals";
|
|
import { __testing__ } from "./plugin-markdown";
|
|
import { $breakpoints } from "../nano-states";
|
|
|
|
const options = { generateId: () => "123" };
|
|
|
|
const { parse } = __testing__;
|
|
|
|
$breakpoints.set(new Map([["0", { id: "0", label: "base" }]]));
|
|
|
|
describe("Plugin Markdown", () => {
|
|
test("paragraph", () => {
|
|
expect(parse("xyz", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "xyz",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("h1", () => {
|
|
expect(parse("# heading", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "heading",
|
|
},
|
|
],
|
|
"component": "Heading",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "tag",
|
|
"type": "string",
|
|
"value": "h1",
|
|
},
|
|
],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("h6", () => {
|
|
expect(parse("###### heading", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "heading",
|
|
},
|
|
],
|
|
"component": "Heading",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "tag",
|
|
"type": "string",
|
|
"value": "h6",
|
|
},
|
|
],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("bold 1", () => {
|
|
expect(parse("__bold__", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "bold",
|
|
},
|
|
],
|
|
"component": "Bold",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("bold 2", () => {
|
|
expect(parse("**bold**", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "bold",
|
|
},
|
|
],
|
|
"component": "Bold",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("italic 1", () => {
|
|
expect(parse("_italic_", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "italic",
|
|
},
|
|
],
|
|
"component": "Italic",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("italic 2", () => {
|
|
expect(parse("*italic*", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "italic",
|
|
},
|
|
],
|
|
"component": "Italic",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("link", () => {
|
|
expect(parse('[link](/uri "Title")', options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "link",
|
|
},
|
|
],
|
|
"component": "RichTextLink",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "href",
|
|
"type": "string",
|
|
"value": "/uri",
|
|
},
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "title",
|
|
"type": "string",
|
|
"value": "Title",
|
|
},
|
|
],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("image", () => {
|
|
expect(parse('', options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [],
|
|
"component": "Image",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "src",
|
|
"type": "string",
|
|
"value": "/url",
|
|
},
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "title",
|
|
"type": "string",
|
|
"value": "title",
|
|
},
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "alt",
|
|
"type": "string",
|
|
"value": "foo",
|
|
},
|
|
],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("hard line break", () => {
|
|
expect(
|
|
parse(
|
|
`foo
|
|
baz`,
|
|
options
|
|
)
|
|
).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "foo",
|
|
},
|
|
{
|
|
"type": "text",
|
|
"value": "baz",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("soft line break", () => {
|
|
expect(
|
|
parse(
|
|
`foo
|
|
baz`,
|
|
options
|
|
)
|
|
).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "foo
|
|
baz",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("blockquote", () => {
|
|
expect(parse("> bar", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "bar",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"component": "Blockquote",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("inline code", () => {
|
|
expect(parse("`foo`", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [],
|
|
"component": "CodeText",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "code",
|
|
"type": "string",
|
|
"value": "foo",
|
|
},
|
|
],
|
|
"resources": [],
|
|
"styleSourceSelections": [
|
|
{
|
|
"instanceId": "123",
|
|
"values": [
|
|
"123",
|
|
],
|
|
},
|
|
],
|
|
"styleSources": [
|
|
{
|
|
"id": "123",
|
|
"type": "local",
|
|
},
|
|
],
|
|
"styles": [
|
|
{
|
|
"breakpointId": "0",
|
|
"property": "display",
|
|
"styleSourceId": "123",
|
|
"value": {
|
|
"type": "keyword",
|
|
"value": "inline-block",
|
|
},
|
|
},
|
|
],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("code", () => {
|
|
expect(parse("```js meta\nfoo\n```", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [],
|
|
"component": "CodeText",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "code",
|
|
"type": "string",
|
|
"value": "foo",
|
|
},
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "lang",
|
|
"type": "string",
|
|
"value": "js",
|
|
},
|
|
],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("list unordered", () => {
|
|
expect(parse("- one", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "one",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"component": "ListItem",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"component": "List",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "ordered",
|
|
"type": "boolean",
|
|
"value": false,
|
|
},
|
|
],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("list ordered", () => {
|
|
expect(parse("3. one", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"value": "one",
|
|
},
|
|
],
|
|
"component": "Paragraph",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"component": "ListItem",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"component": "List",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "ordered",
|
|
"type": "boolean",
|
|
"value": true,
|
|
},
|
|
{
|
|
"id": "123",
|
|
"instanceId": "123",
|
|
"name": "start",
|
|
"type": "number",
|
|
"value": 3,
|
|
},
|
|
],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
test("thematic break | separator", () => {
|
|
expect(parse("---", options)).toMatchInlineSnapshot(`
|
|
{
|
|
"assets": [],
|
|
"breakpoints": [],
|
|
"children": [
|
|
{
|
|
"type": "id",
|
|
"value": "123",
|
|
},
|
|
],
|
|
"dataSources": [],
|
|
"instances": [
|
|
{
|
|
"children": [],
|
|
"component": "Separator",
|
|
"id": "123",
|
|
"type": "instance",
|
|
},
|
|
],
|
|
"props": [],
|
|
"resources": [],
|
|
"styleSourceSelections": [],
|
|
"styleSources": [],
|
|
"styles": [],
|
|
}
|
|
`);
|
|
});
|
|
|
|
// @todo For some reason doesn't work
|
|
test.skip("strikethrough", () => {
|
|
expect(
|
|
parse("~One~ ~~two~~ ~~~three~~~.", options)
|
|
).toMatchInlineSnapshot();
|
|
});
|
|
});
|