[FEATURE] markup placeholders (html, rich text, components)

[samuelstroschein]

💡 Upvote and subscribe to this issue to increase prioritization.

Problem

Users can not use markup placeholders.

See this long thread https://github.com/opral/monorepo/discussions/1959#discussioncomment-8004920

And this one from https://discord.com/channels/897438559458430986/1110687789395226716/1110903944143712338:

Proposal

Add markup placeholders.

From the message format working group https://github.com/unicode-org/message-format-wg/blob/main/spec/syntax.md#markup-elements

Originally posted by @samuelstroschein in https://github.com/opral/monorepo/discussions/913

[samuelstroschein]

We have a longer RFC. Feel free to comment on the Google Doc https://docs.google.com/document/d/1uhLrrwKPsenyNsDvZqCl6UXJc5ZBVQYkzn7k5yBuVy0/edit#heading=h.hv9mugtjvm53

[samuelstroschein]

In the meantime you can directly write HTML in your messages and then call the message with dangeourslySetInnerHtml (react) or @html in Svelte

[machycek]

This is the biggest blocker for us not switching over to paraglide. Hoping this lands at some point. Thanks for all the hard work 💯

[gtbuchanan]

I'm providing my "injection safe" Vue implementation using the strategy from the OP's screenshot (and influenced by this) in hopes that it improves Paraglide JS adoption and guides the implementation of markup placeholders (i.e. component interpolation).

ParaglideM Functional Component

// Polyfill for RegEx.escape
import 'regexp.escape/auto';
import '@types/regexp.escape/auto';

import { createTextVNode, h } from 'vue';
import type { PropType, SetupContext, Slot, VNodeChild } from 'vue';

type ParaglideMFunction<TInputs, TOptions> = (inputs: TInputs, options?: TOptions) => string;

interface ParaglideMProps<TInputs, TOptions> {
  message: ParaglideMFunction<TInputs, TOptions>;
  inputs: TInputs;
  options?: TOptions;
  tag?: string | undefined;
}

function renderInputs(slots: Record<string, Slot | undefined>): Record<string, VNodeChild> {
  return Object.entries(slots)
    .filter(([key]) => key !== '_')
    .reduce((acc, [key, slot]) => ({
      ...acc,
      [`[${key}]`]: slot?.() as VNodeChild,
    }), {});
}

type InputReplacer = (message: string, inputs: Record<string, VNodeChild>) => string[];

function createInputReplacer(inputNames: string[]): InputReplacer {
  const inputCondition = inputNames.map(RegExp.escape).join('|');
  const regExp = new RegExp(`(\\[(${inputCondition})\\])`);
  return (message, inputs) => message
    .split(regExp)
    // HACK: The inner group in the split regex ends up in the output, so we need to skip it
    .filter((_, i, { [i - 1]: part }) => !part || typeof inputs[part] === 'undefined');
}

function interpolateSlots(
  message: string,
  slots: Record<string, Slot | undefined>,
): Array<VNodeChild | null> {
  const inputs = renderInputs(slots);
  const replaceInputs = createInputReplacer(Object.keys(slots));
  const parts = replaceInputs(message, inputs);
  return parts.map((part) => {
    const { [part]: input } = inputs;
    return typeof input === 'undefined' ? createTextVNode(part) : input;
  });
}

const defaultTag = 'span';

export const ParaglideM = <TInputs, TLocale>(
  props: ParaglideMProps<TInputs, TLocale>,
  { slots, attrs }: SetupContext,
): VNodeChild => {
  const message = props.message(props.inputs, props.options);
  const children = interpolateSlots(message, slots);
  return h(props.tag ?? defaultTag, attrs, children);
};

ParaglideM.props = {
  message: {
    /* eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
       -- This is the only way to define a function prop type for function components */
    type: Function as PropType<ParaglideMFunction<Record<string, unknown>, { locale?: string }>>,
    required: true,
  },
  inputs: {
    type: Object as PropType<Record<string, unknown>>,
    required: true,
  },
  options: {
    type: Object as PropType<Record<string, unknown> | undefined>,
    default: undefined,
  },
  tag: {
    type: String as PropType<string>,
    default: 'span',
  },
};

ParaglideM Usage

{
  "$schema": "https://inlang.com/schema/inlang-message-format",
  "greeting": "Hello, [name]!"
}

<script lang="ts" setup>
import { m } from '@/paraglide/messages.js';

const props = defineProps<{ name: string }>();
</script>

<template>
  <paraglide-m
    :message="m['greeting']"
    :inputs="undefined"
    tag="p"
  >
    <template #name>
      <span class="name">{{ props.name }}</span>
    </template>
  </paraglide-m>
</template>

<style scoped>
.name {
  font-weight: bold;
}
</style>

ParaglideM Tests

import { faker } from '@faker-js/faker';
import { mount } from '@vue/test-utils';
import { describe, it } from 'vitest';
import { mockFn } from 'vitest-mock-extended';
import { createTextVNode } from 'vue';
import { ParaglideM } from '@/components/ParaglideM.js';

describe('ParaglideM', () => {
  it('renders span by default', ({ expect }) => {
    const message = mockFn().mockReturnValue('');
    const sut = mount(ParaglideM, { props: { inputs: {}, message } });

    expect(sut.html()).toBe('<span></span>');
  });

  it('renders the specified tag', ({ expect }) => {
    const message = mockFn().mockReturnValue('');
    const sut = mount(ParaglideM, { props: { inputs: {}, message, tag: 'p' } });

    expect(sut.html()).toBe('<p></p>');
  });

  it('passes through attributes to the root element', ({ expect }) => {
    const class1 = faker.word.noun();
    const id = faker.string.uuid();
    const message = mockFn().mockReturnValue('');
    const sut = mount(ParaglideM, {
      props: { inputs: {}, message },
      attrs: { class: class1, id },
    });

    expect(sut.html()).toBe(`<span class="${class1}" id="${id}"></span>`);
  });

  it('renders the slot as HTML', ({ expect }) => {
    const message = mockFn<() => string>().mockImplementation(() => `Hello, [name]!`);
    const nameHtml = `<span class="${faker.word.noun()}">${faker.person.firstName()}</span>`;
    const sut = mount(ParaglideM, {
      props: { inputs: {}, message },
      slots: { name: nameHtml },
    });

    expect(sut.html()).toBe(`<span>Hello, ${nameHtml}!</span>`);
  });

  it('prevents code injection', ({ expect }) => {
    const message = mockFn().mockReturnValue(
      `<script>throw new Error('Injected Message');</script>[value]`);
    const maliciousSlotContent = `<script>throw new Error('Injected Slot');</script>`;
    const sut = mount(ParaglideM, {
      props: { inputs: {}, message },
      slots: { value: () => createTextVNode(maliciousSlotContent) },
    });

    // Ensure v-html isn't used to render the slot content directly
    expect(sut.html()).not.toContain('<script>');
  });

  it('prevents regex injection', ({ expect }) => {
    const slotName = '.*';
    const message = mockFn<() => string>().mockImplementation(() => `[start][${slotName}][end]`);
    const sut = mount(ParaglideM, {
      props: { inputs: {}, message },
      slots: { [slotName]: '' },
    });

    expect(sut.html()).toBe(`<span>[start][end]</span>`);
  });

  it('preserves raw input words', ({ expect }) => {
    const inputName = faker.word.noun();
    const message = mockFn<() => string>()
      .mockImplementation(() => `${inputName}[${inputName}]${inputName}`);
    const input = faker.lorem.word();

    const sut = mount(ParaglideM, {
      props: { inputs: {}, message },
      slots: { [inputName]: input },
    });

    expect(sut.html()).toBe(`<span>${inputName}${input}${inputName}</span>`);
  });
});

Notes

• The message content could have been passed directly to the component instead of the message function. However, I was trying to make it forward-compatible with whatever ends up being done to support component interpolation in Paraglide JS. That may or may not be possible with markup placeholders as described in the OP.
• The inputs prop must be required or it will always be optional (even when inputs are required by the message). That's why undefined is passed explicitly in the example.
• The slots names aren't type-safe and the slots specified in the message template aren't required. I'm hoping that can change when component interpolation support is added to Paraglide JS, but I'm unsure how that will work wrt function components.

[matt-winfield]

I've created a similar component for React to allow replacing elements using a similar strategy as proposed in the OP screenshot.

Inspired by @gtbuchanan 's component for Vue, although the implementation/usage is a bit different.

Unfortunately it doesn't have strong typing for the elements (i.e. if you forget to include a tag in the list that is used in the translation it won't throw an error), and I haven't had time to thoroughly test the component. But this seems to work:

ParaglideM Component

import { ComponentType, ElementType, ReactNode } from 'react';

type ParaglideMFunction<TInputs, TOptions> = (
  inputs: TInputs,
  options?: TOptions,
) => string;

type ParaglideMProps<TInputs, TOptions> = {
  message: ParaglideMFunction<TInputs, TOptions>;
  inputs: TInputs;
  options?: TOptions;
  as?: ElementType;
  elements: Record<
    string,
    ComponentType<{
      children: ReactNode;
    }>
  >;
  className?: string;
};

/**
 * @example
 * ```tsx
 * // en.json
 * // { "key": "Hello [+bold]{variable}[-bold]" }
 *
 * <ParaglideM
 *    message={m.key}
 *    inputs={{ variable: "Bob" }}
 *    elements={{
 *      bold: ({ children }) => <strong className="font-semibold">{children}</strong>,
 *    }}
 *  />
 * ```
 */
export const ParaglideM = <TInputs, TLocale>({
  className,
  as: Tag = 'span',
  ...props
}: ParaglideMProps<TInputs, TLocale>) => {
  const message = props.message(props.inputs, props.options);
  const interpolatedMessage = replacePlaceholders(message, props.elements);

  return <Tag>{interpolatedMessage}</Tag>;
};

const replacePlaceholders = (
  message: string,
  elements: Record<string, ComponentType<{ children: ReactNode }>>,
) => {
  const regex = /\[\+(\w+)\](.*?)\[-\1\]/g;

  const parseMessage = (text: string): ReactNode[] => {
    const parts: ReactNode[] = [];
    let lastIndex = 0;

    text.replace(regex, (match, key, content, offset) => {
      // Add text before the match
      if (offset > lastIndex) {
        parts.push(text.slice(lastIndex, offset));
      }

      // Add the React component if the key exists in elements
      const Element = elements[key];
      if (Element) {
        parts.push(<Element key={offset}>{parseMessage(content)}</Element>);
      } else {
        // If no matching element, keep the original text
        parts.push(match);
      }

      lastIndex = offset + match.length;
      return match;
    });

    // Add remaining text after the last match
    if (lastIndex < text.length) {
      parts.push(text.slice(lastIndex));
    }

    return parts;
  };

  return parseMessage(message);
};

Usage

{
  "$schema": "https://inlang.com/schema/inlang-message-format",
  "greeting": "Hello, [+bold]{name}[-bold]"
}

<ParaglideM
  message={m.greeting}
  inputs={{ name: "Bob" }}
  elements={{
    bold: ({ children }) => (
      <strong className="font-semibold">{children}</strong>
     ),
  }}
/>

[aarondoet]

This is the last thing I need for me to switch to inlang. I am currently using my own i18n implementation that I based off of typesafe-i18n, which I was using before. On my Svelte 5 version of it I am using it like this:

{
  "en": {
    "contact": "Feel free to send us <link href='mailto:{email}' text='an email'>!"
  },
  "de": {
    "contact": "Schreib uns gerne <link href='mailto:{email}' text='eine Email'>!"
  }
}

<I18n message={i18n.contact} args={{email: "info@example.com"}}>
  {#snippet link({href, text})}
    <A {href}>{text}</A> <!-- component from component library for default styling, just injecting html won't work for me -->
  {/snippet}
</I18n>

I do not have enough knowledge about inlang, I only tested it a bit and decided it to be better / more comfortable than my own solution, so I don't know how one could achieve this, nor do I want to hack together some weird solution.
The problem I have with solutions like that from @matt-winfield is that the inputs could inject something:

<ParaglideM message={m.greeting} inputs={{name: "[-bold]I don't want a bold name![+bold]"}} elements={{...}} />