Upgrade storyblok-richtext-renderer and add custom marks/nodes (#512)

Gemfile

@@ -29,7 +29,7 @@ gem 'rack-cors', :require => 'rack/cors'
 gem 'pg_search'
 gem 'figaro'
 gem 'open-uri'
-gem 'storyblok-richtext-renderer', github: 'performant-software/storyblok-ruby-richtext-renderer', ref: '0a6c2e8e81560311569d49d06c0e32abd0effcd5'
+gem 'storyblok-richtext-renderer', github: 'performant-software/storyblok-ruby-richtext-renderer', ref: 'bef6903146426e01175887eb92a75bf9bac4c3cb'
 gem 'sidekiq', '~>6.5.1'
 gem 'sidekiq-status', '~>2.1.1'
 
@@ -54,3 +54,4 @@ gem 'mutex_m', '~> 0.2.0'
 gem 'bigdecimal', '~> 3.1'
 gem 'psych', '< 4'
 gem "dotenv-rails", "~> 2.8"
+gem "rubyzip", "~> 2.3"

Gemfile.lock

@@ -1,9 +1,9 @@
 GIT
   remote: https://github.com/performant-software/storyblok-ruby-richtext-renderer.git
-  revision: 0a6c2e8e81560311569d49d06c0e32abd0effcd5
-  ref: 0a6c2e8e81560311569d49d06c0e32abd0effcd5
+  revision: bef6903146426e01175887eb92a75bf9bac4c3cb
+  ref: bef6903146426e01175887eb92a75bf9bac4c3cb
   specs:
-    storyblok-richtext-renderer (0.0.6)
+    storyblok-richtext-renderer (0.0.10)
 
 GEM
   remote: https://rubygems.org/
@@ -240,6 +240,7 @@ GEM
     ruby-vips (2.2.2)
       ffi (~> 1.12)
       logger
+    rubyzip (2.3.2)
     sidekiq (6.5.12)
       connection_pool (>= 2.2.5, < 3)
       rack (~> 2.0)
@@ -313,6 +314,7 @@ DEPENDENCIES
   puma (~> 4.3)
   rack-cors
   rails (~> 6.1)
+  rubyzip (~> 2.3)
   sidekiq (~> 6.5.1)
   sidekiq-status (~> 2.1.1)
   spring

lib/storyblok_richtext/marks/color.rb

@@ -0,0 +1,20 @@
+module Storyblok::Richtext
+  module Marks
+    class Color < Mark
+
+      def matching
+        @node['type'] === 'color'
+      end
+
+      def tag
+        attrs = {
+          style: "color:#{@node['attrs']['color']};"
+        }
+        [{
+          tag: 'span',
+          attrs: attrs
+        }]
+      end
+    end
+  end
+end

lib/storyblok_richtext/marks/em.rb

@@ -0,0 +1,13 @@
+module Storyblok::Richtext
+  module Marks
+    class Em < Mark
+      def matching
+        @node['type'] === 'em'
+      end
+
+      def tag
+        'em'
+      end
+    end
+  end
+end

lib/storyblok_richtext/marks/font_family.rb

@@ -0,0 +1,20 @@
+module Storyblok::Richtext
+  module Marks
+    class FontFamily < Mark
+
+      def matching
+        @node['type'] === 'fontFamily'
+      end
+
+      def tag
+        attrs = {
+          style: "font-family:#{@node['attrs']['fontFamily']};"
+        }
+        [{
+          tag: 'span',
+          attrs: attrs
+        }]
+      end
+    end
+  end
+end

lib/storyblok_richtext/marks/font_size.rb

@@ -0,0 +1,20 @@
+module Storyblok::Richtext
+  module Marks
+    class FontSize < Mark
+
+      def matching
+        @node['type'] === 'fontSize'
+      end
+
+      def tag
+        attrs = {
+          style: "font-size:#{@node['attrs']['fontSize']};"
+        }
+        [{
+          tag: 'span',
+          attrs: attrs
+        }]
+      end
+    end
+  end
+end

lib/storyblok_richtext/marks/strikethrough.rb

@@ -0,0 +1,14 @@
+module Storyblok::Richtext
+  module Marks
+    class Strikethrough < Mark
+
+      def matching
+        @node['type'] === 'strikethrough'
+      end
+
+      def tag
+        's'
+      end
+    end
+  end
+end

lib/storyblok_richtext/marks/text_style.rb

@@ -0,0 +1,24 @@
+module Storyblok::Richtext
+  module Marks
+    class TextStyle < Mark
+
+      def matching
+        @node['type'] === 'textStyle'
+      end
+
+      def tag
+        color = "color:#{@node['attrs']['color']};"
+        font_size = "font-size:#{@node['attrs']['fontSize']};"
+        font_family = "font-family:#{@node['attrs']['fontFamily']};"
+        text_decoration = "text-decoration:#{@node['attrs']['textDecoration']};"
+        attrs = {
+          style: "#{color} #{font_size} #{font_family} #{text_decoration}"
+        }
+        [{
+          tag: 'span',
+          attrs: attrs
+        }]
+      end
+    end
+  end
+end

lib/storyblok_richtext/nodes/image.rb

@@ -0,0 +1,22 @@
+module Storyblok::Richtext
+  module Nodes
+    class Image < Node
+
+      def matching
+        @node['type'] === 'image'
+      end
+
+      def single_tag
+        attrs = {}
+        if !@node['attrs'].nil?
+          attrs = @node['attrs'].slice('src', 'alt', 'title')
+          attrs['style'] = "width: #{@node['attrs']['width']};"
+        end
+        return [{
+          tag: "img",
+          attrs: attrs
+        }]
+      end
+    end
+  end
+end

lib/storyblok_richtext/nodes/paragraph.rb

@@ -0,0 +1,28 @@
+module Storyblok::Richtext
+  module Nodes
+    class Paragraph < Node
+
+      def matching
+        @node['type'] === 'paragraph'
+      end
+
+      def tag
+        if @node['attrs']
+          text_indent = @node['attrs']['indented'] ? '3rem' : '0'
+          text_indent = "text-indent: #{text_indent};"
+          margin_left = "margin-left: #{(@node['attrs']['indentLevel'] || 0) * 48}px;"
+          line_height = "line-height: #{@node['attrs']['lineHeight']};"
+          attrs = {
+            style: "#{text_indent} #{margin_left} #{line_height}"
+          }
+          [{
+            tag: 'p',
+            attrs: attrs,
+          }]
+        else
+          'p'
+        end
+      end
+    end
+  end
+end