Fix/text positioning, fluid width images, and skip invisible nodes

svickars commented 1 year ago

Fixes a few things:

Frames that were acting as shapes (ie with fills and strokes) were being converted to groups and thus losing their styling. That’s addressed.
Missing font family names and missing segments were causing an error in a specific debugging file. I defaulted those cases to ‘Inter Normal’; should be fixed.
Apply header tags feature was no longer working. I turned that off and have everything defaulting to p elements for now.
Fluid width was stretching images (#86). Fixed in #87 and reflected here, by setting image height to null when Fluid container width is turned on.
Text in components and component instances was not being recognized as text and instead was exporting as part of the image. I’ve made it so the tempFrame converts frames (that have text children), auto layouts, and components to groups and detaches instances, which means text nodes are have correct positioning, relative to the base frame.
We were still seeing invisible text nodes in the final export. I’ve updated withModificationsForExport to just remove those nodes from the tempFrame.
Text positioning was way off. Converting frames with text children to groups helped with part of that and correcting the artboard height and width fixed the rest... I hope?

Still seeing issues (some new, some old) when testing in the playground file:

Getting weird characters for apostrophes and other special characters
Linebreaks within the same text node aren’t being recognized

Files to test on: Playground Playground (UFOs) Positioning bug

changeset-bot[bot] commented 1 year ago

🦋 Changeset detected

Latest commit: 5dcfc874ca7d16ac517c753bd395695c7b4bf2fd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | ---------- | ----- | | figma2html | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

sawyerclick commented 1 year ago

re: weird characters: because we are exporting html as headless and technically only a partial of HTML, we lack the <meta charset="utf-8"> meta tag that would handle encoding of commas and other symbols. This is a non-issue for us. To verify, plop the exported partial into a true html page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
  <!-- put figma2html export here -->
  </body>
</html>

sawyerclick commented 1 year ago

I've edited the attribute application. This removes the applyHTags config option in favor of a more robust way of adding attributes. In short, use tag="h1" in the [f2h] text block to change from <p> to <h1>. From the new docs:

Including custom attributes: you can include custom attributes on a text layer by naming the layer [f2h] followed by a list of attributes in HTMl attribute format. For example, a text layer named [f2h]class="text-sm font-sans" id="my-text-layer" will render as <p class="font-sans text-sm" id="my-text-layer">. This can be useful for including Tailwind and other utility classes. You also can use a reserved tag attribute to change the default <p> tag to one of your choosing (ex: [f2h] tag="h1" id="hed" class="text-xl font-bold" will render <h1 id="hed" class="text-xl font-bold">). Note that naming your layers like this will not turn off Style text elements for that node, and will still include inline styling for child spans. To rely purely on class names for styling, turn off the Style text elements option.

the-dataface / figma2html

Fix/text positioning, fluid width images, and skip invisible nodes #96

🦋 Changeset detected