Super Script subscripts (#6)

Co-authored-by: Bert Bengtson <[email protected]>
bertybot · Dec 9, 2024 · 780fb83 · 780fb83
1 parent 2343829
commit 780fb83
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 1 deletion.
diff --git a/.changeset/unlucky-baboons-play.md b/.changeset/unlucky-baboons-play.md
@@ -0,0 +1,5 @@
+---
+"rich-text-svelte-renderer": patch
+---
+
+Added support for superscript and subscript elements
diff --git a/src/lib/RenderText.svelte b/src/lib/RenderText.svelte
@@ -7,6 +7,8 @@
 		bold?: boolean;
 		italic?: boolean;
 		underline?: boolean;
+		superscript?: boolean;
+		subscript?: boolean;
 		code?: boolean;
 		shouldSerialize: boolean;
 		renderers: NodeRendererType | undefined;
@@ -18,6 +20,8 @@
 		italic = false,
 		underline = false,
 		code = false,
+		superscript = false,
+		subscript = false,
 		shouldSerialize,
 		renderers
 	}: Props = $props();
@@ -27,6 +31,8 @@
 		if (italic) return 'italic';
 		if (underline) return 'underline';
 		if (code) return 'code';
+		if (superscript) return 'superscript';
+		if (subscript) return 'subscript';
 		return null;
 	});
 

diff --git a/src/lib/defaultElements.ts b/src/lib/defaultElements.ts
@@ -23,6 +23,8 @@ export const defaultElements: Required<NodeRendererType> = {
 	table: 'table',
 	bold: 'b',
 	italic: 'i',
+	superscript: 'sup',
+	subscript: 'sub',
 	underline: 'u',
 	code: 'code',
 	table_head: 'thead',

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -38,6 +38,8 @@ export interface NodeRendererType {
 	blockquote?: Component<any> | keyof SvelteHTMLElements;
 	bold?: Component<any> | keyof SvelteHTMLElements;
 	italic?: Component<any> | keyof SvelteHTMLElements;
+	superscript?: Component<any> | keyof SvelteHTMLElements;
+	subscript?: Component<any> | keyof SvelteHTMLElements;
 	underline?: Component<any> | keyof SvelteHTMLElements;
 	code?: Component<any> | keyof SvelteHTMLElements;
 	code_block?: Component<any> | keyof SvelteHTMLElements;

diff --git a/src/test/RichText.test.ts b/src/test/RichText.test.ts
@@ -13,7 +13,8 @@ import {
 	emptyContent,
 	embedAssetContent,
 	simpleH1Content,
-	tableContent
+	tableContent,
+	superScriptSubScriptContent
 } from './content';
 import TestP from './testComponents/TestP.svelte';
 import TestBold from './testComponents/TestBold.svelte';
@@ -338,6 +339,17 @@ describe('rich-text-svelte-renderer', () => {
 
 		expect(document.body).toMatchSnapshot();
 	});
+
+	it('should render superscript and subscript elements', () => {
+		mount(RichText, {
+			target: document.body,
+			props: {
+				content: superScriptSubScriptContent
+			}
+		});
+
+		expect(document.body).toMatchSnapshot();
+	});
 });
 
 describe('custom embeds and assets', () => {

diff --git a/src/test/__snapshots__/RichText.test.ts.snap b/src/test/__snapshots__/RichText.test.ts.snap
@@ -2130,6 +2130,126 @@ exports[`rich-text-svelte-renderer > should render empty text spaces 1`] = `
   
   
   
+</body>
+`;
+
+exports[`rich-text-svelte-renderer > should render superscript and subscript elements 1`] = `
+<body>
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <p>
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    TEST
+    
+    
+    
+    
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <sub>
+      <!---->
+      <!---->
+      T
+      
+      
+      
+    </sub>
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  </p>
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+  <p>
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    TEST
+    
+    
+    
+    
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <!---->
+    <sup>
+      <!---->
+      <!---->
+      2
+      
+      
+      
+    </sup>
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  </p>
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
 </body>
 `;
 

diff --git a/src/test/content.ts b/src/test/content.ts
@@ -452,3 +452,30 @@ export const nestedEmbedAssetContent: RichTextContent = [
 		]
 	}
 ];
+
+export const superScriptSubScriptContent: RichTextContent = [
+	{
+		type: 'paragraph',
+		children: [
+			{
+				text: 'TEST'
+			},
+			{
+				text: 'T',
+				subscript: true
+			}
+		]
+	},
+	{
+		type: 'paragraph',
+		children: [
+			{
+				text: 'TEST'
+			},
+			{
+				text: '2',
+				superscript: true
+			}
+		]
+	}
+];
-Original file line number
+Diff line change
@@ Expand Up @@
+    </body>
+    `;
+    exports[`rich-text-svelte-renderer > should render superscript and subscript elements 1`] = `
+    <body>
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <p>
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        TEST
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        <sub>
+          <!---->
+          <!---->
+          T
+        </sub>
+      </p>
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <!---->
+      <p>
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        TEST
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        <!---->
+        <sup>
+          <!---->
+          <!---->
+        </sup>
+      </p>
     </body>
     `;
@@ Expand Down @@