Message Bundle component with rich text

[NilsJacobsen]

The last research showed that the message bundle editor which wants to render multiple pattern editors in the shadow root doesn't work.

The rich text editors rely on the Selection API which needs to be supported by the browsers. This API is not standard -> bugs and different behaviour in different browsers.

Proposal: Build the component in a way, that the editor can be on the light dom.

• We can achieve that with slots
• We need to create a wrapper component that doesn't put it's children in a shadow dom, to handle wiring and give a easy api to the outside

External Wrapper API (simple)

<inlang-message-bundle
  .messageBundle=${bundle}
  .settings=${settings}
  @change-message-bundle=${() => {}}
>
</inlang-message-bundle>

The wrapper component doesn't use the shadow root, that way we can use slots inside the wrapper that can also be on the top level dom.

Internal API (inside wrapper)

<inlang-message-bundle-root
  .messageBundle=${bundle}
  .settings=${settings}
  @change-message-bundle=${() => {}}
> //shadowRoot
  //shadowRoot
  ${bundle.messages.map(
    (message: any) => html`
      //shadowRoot
  ${message.variants.map(
    (variant: any) => html`
      //shadowRoot

    .pattern=${variant.pattern}
     > //slot top-level dom

  `)}

  `)}
</inlang-message-bundle-root>

We can do manual wiring in this component. But the app devs are going to use the simple api as long as they don't want to hack some fancy stuff in it.

Naming convention

• External
  • inlang-message-bunlde | no-shadow (same api as before)
• Internal
  • inlang-message-bundle-root
  • inlang-message-bundle-header
  • inlang-message
  • inlang-variant
  • inlang-pattern-editor | no-shadow -> slot
  • (inlang-message-bunlde-action) -> slot
  • (inlang-variant-action) -> slot

Loom

Solving Rich Text Editor Issues in Web Components

[samuelstroschein]

How will apps define custom actions?

If the external inlang-message-bundle component has no shadow root, I think it can't use slots. If slots can't be used, how can apps define custom actions?

<inlang-message-bundle
 .messageBundle=${bundle}
 .settings=${settings}
 @change-message-bundle=${() => {}}
>
  <inlang-message-bundle-action slot="bundle" />
</inlang-message-bundle>

[NilsJacobsen]

We could access the children and check if they are a instance of a action template. Based on that we can put it into the right location of the wrapper component and then slot it. Seems doable.