Text frames/absolute elements

[Alexnortung]

I would like to be able to convert absolute elements. docx have support for text frames which can be used for this issue. However I am not sure how we can implement it properly in this library.

Considerations

• Anchor positioning - if there are no relative elements, it should just be at the start of the document. If there is a relative element as a parent, the anchor should be placed there.
• Some styles cannot be cascaded (e.g. position, left, top), but in the current implementation, I think that all styles are cascaded to its children.

Example HTML

Consider the following HTML

<div style="position: relative">
<p style="position: absolute; left: 10px; top: 10px;">
Floating text
</p>
</div>

If we convert it to DocumentElements we actually lose information about the div and that it was actually providing a context for the paragraph.

[
  {
    "type": "paragraph",
    "text": "Floating text",
    "styles": {
      "position": "absolute",
      "left": "10px",
      "top": "10px"
    },
    "attributes": {},
    "metadata": {
      "tagName": "p"
    }
  }
]

[ChipiKaf]

Yea, fair point.
Perhaps we can create a new type for div elements. We can change it from a fragment type, to a container type in the parser..

The fragment type just passes its styles on to its children:

    if (result.type === 'fragment') {
      const wrapperStyles = result.styles || {};
      const wrapperAttrs = result.attributes || {};
      return (result.content || []).map((el) => ({
        ...el,
        styles: { ...wrapperStyles, ...el.styles },
        attributes: { ...wrapperAttrs, ...el.attributes },
      }));
    }

Then in the adapter, we can make use of the text boxes or text frames depending on what fits best.

What do you think?

[Alexnortung]

yes I think it would be great to add a container element :)