Refactor approach to using rich text in record summaries

[seancolsen]

Current behavior

• Using a primitive templating system, the front end generates record summaries and stores them as strings.
• To display stylized NULL values within a record summary, we encode NULL with a special unicode code point and then parse the record summary later. During this later parsing stage, we sanitize the user input and then then display the whole record summary using {@html }.
• We'd like to eliminate usage of {@html }

Desired behavior

1. When generating a record summary from a template and data, the front end does not produce a string. Instead it produces a RecordSummaryPart[], defined as follows:

   interface RecordSummaryTextPart {
     type: 'text';
     text: string;
   }
   interface RecordSummaryNullValuePart {
     type: 'nullValue';
   }
   type RecordSummaryPart = RecordSummaryTextPart | RecordSummaryNullValuePart;

2. We have a RichText.svelte component which behaves as follows:

   <script lang="ts">
     export let parts: (string | ComponentAndProps)[];
   </script>
   
   {#each parts as part}
     {#if typeof part === 'string'}
       {part}
     {:else}
       <svelte:component this={part.component} {...part.props}>
     {/if}
   {/each}

3. We render a rich text record summary as follows:

   <script lang="ts">
     import Null from '@mathesar/components/Null.svelte';
   
     export let parts: RecordSummary[];
   
     $: richTextParts = parts.map((part) => {
       if (part.type === 'nullValue') {
         return { component: Null };
       }
       if (part.type === 'text') {
         return  part.text
       }
       assertExhaustive(part.type);
     });
   </script>
   
   <RichText parts={richTextParts}>

4. We use similar mapping logic to render a plain text record summary.

[github-actions[bot]]

This issue has not been updated in 90 days and is being marked as stale.