Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Introduce HTML string document import #5895

Merged
merged 18 commits into from
May 21, 2024
Merged

Introduce HTML string document import #5895

merged 18 commits into from
May 21, 2024

Conversation

artf
Copy link
Member

@artf artf commented May 21, 2024

This PR introduces a new feature that allows importing the HTML string as documents.
More details about the current problem and the implemented solution.

Problem

Currently, the editor imports only the content inside the body, so if you try to import this content inside the main wrapper...

editor.getWrapper().components(`
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Doc title</title>
  </head>
  <body>
    <h1>Body title</h1>
  </body>
</html>
`);

... and try to get its HTML content (eg. via editor.getHtml()), this is what you get

<body>
  <meta charset="utf-8"/>
  <title>Doc title</title>
  <h1>Body title</h1>
</body>

All the HTML document information is lost (eg. doctype, head, etc.), and some elements (eg. inside the head) are moved inside the body.
This was intentional as the editor's main purpose was always to manage only the content of the pages but this is not always suitable for all use cases.

Solution

To support the document import, the HTML parser and the wrapper component were extended to handle those data.
In order to avoid possible breaking changes, a new option asDocument is required.

editor.getWrapper().components(`
<!DOCTYPE html>
 ...
</html>
`, { asDocument: true });

Now the document information will be preserved if you try to get its HTML.

Additional API

The HTML document data are stored inside the wrapper component.

const wrapper = editor.getWrapper();
const { 
  head, // ComponentHead
  docEl,  // Component
  doctype, // string
} = wrapper;

head.toHTML(); // `<head ...</head>`
docEl.toHTML(); // '<html></html>' // no children here
doctype; //  '<!DOCTYPE html>'

Caveats

  • The asDocument option is only valid if used on the wrapper component.
  • In case you're making use of the config.canvas.styles/config.canvas.scripts options, those will be replaced with the content of the imported document.

@artf artf merged commit 13aa53c into dev May 21, 2024
2 checks passed
@artf artf mentioned this pull request May 21, 2024
Closed
This was referenced Jul 17, 2024
Open
Open
Open
This was referenced Jul 24, 2024
Open
Open
Open
@wense02 wense02 mentioned this pull request Jul 26, 2024
Open
This was referenced Aug 7, 2024
Open
Open
@aleHRevirtus aleHRevirtus mentioned this pull request Aug 27, 2024
Open
@aleHRevirtus aleHRevirtus mentioned this pull request Aug 27, 2024
Open
This was referenced Sep 10, 2024
Open
Open
This was referenced Sep 20, 2024
Open
Open
Open
Open
Open
Open
This was referenced Oct 26, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@artf