Add superscript, subscript, and highlight mark support

lib/tip_tap/nodes/text.rb

@@ -27,6 +27,9 @@ def to_h
 
       def to_html
         value = text
+        value = content_tag(:sup, value) if superscript?
+        value = content_tag(:sub, value) if subscript?
+        value = highlight_tag(value) if highlight?
         value = content_tag(:code, value) if code?
         value = content_tag(:u, value) if underline?
         value = content_tag(:em, value) if italic?
@@ -65,10 +68,28 @@ def code?
         has_mark_with_type?("code")
       end
 
+      def superscript?
+        has_mark_with_type?("superscript")
+      end
+
+      def subscript?
+        has_mark_with_type?("subscript")
+      end
+
+      def highlight?
+        has_mark_with_type?("highlight")
+      end
+
       def text_style?
         has_mark_with_type?("textStyle")
       end
 
+      private
+
+      def has_mark_with_type?(type)
+        marks.any? { |mark| mark["type"] == type }
+      end
+
       def link_href
         marks.find { |mark| mark["type"] == "link" }&.dig("attrs", "href")
       end
@@ -81,15 +102,25 @@ def text_styles
         marks.find { |mark| mark["type"] == "textStyle" }&.dig("attrs")
       end
 
-      private
-
-      def has_mark_with_type?(type)
-        marks.any? { |mark| mark["type"] == type }
+      def highlight_color
+        marks.find { |mark| mark["type"] == "highlight" }&.dig("attrs", "color")
       end
 
       def inline_style_content(styles)
+        return nil if styles.empty?
         styles.reduce("") { |acc, val| acc + "#{val[0]}:#{val[1]};" }
       end
+
+      def highlight_tag(value)
+        data = {}
+        styles = {}
+        if highlight_color
+          data[:color] = highlight_color
+          styles["background-color"] = highlight_color
+          styles[:color] = "inherit"
+        end
+        content_tag(:mark, text, data: data, style: inline_style_content(styles))
+      end
     end
   end
 end

spec/tip_tap/nodes/text_spec.rb

@@ -94,6 +94,44 @@
           expect(html).to eq('<span style="color:#f0f0f0;">Hello World!</span>')
         end
       end
+
+      context "superscript" do
+        it "returns the text wrapped in a sup tag" do
+          node = TipTap::Nodes::Text.from_json({text: "Hello World!", marks: [{type: "superscript"}]})
+          html = node.to_html
+
+          expect(html).to eq("<sup>Hello World!</sup>")
+        end
+      end
+
+      context "subscript" do
+        it "returns the text wrapped in a sup tag" do
+          node = TipTap::Nodes::Text.from_json({text: "Hello World!", marks: [{type: "subscript"}]})
+          html = node.to_html
+
+          expect(html).to eq("<sub>Hello World!</sub>")
+        end
+      end
+
+      context "highlight" do
+        context "without color" do
+          it "returns the text wrapped in a mark tag" do
+            node = TipTap::Nodes::Text.from_json({text: "Hello World!", marks: [{type: "highlight"}]})
+            html = node.to_html
+
+            expect(html).to eq("<mark>Hello World!</mark>")
+          end
+        end
+
+        context "with color" do
+          it "returns the text wrapped in a mark tag with proper attributes" do
+            node = TipTap::Nodes::Text.from_json({text: "Hello World!", marks: [{type: "highlight", attrs: {color: "#0f0f0f"}}]})
+            html = node.to_html
+
+            expect(html).to eq('<mark data-color="#0f0f0f" style="background-color:#0f0f0f;color:inherit;">Hello World!</mark>')
+          end
+        end
+      end
     end
   end