storyblok-richtext-renderer 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1bd667e62ab735283652c282968f376195914598e6ec6eb55a839a6a80f836bf
-  data.tar.gz: 3bed9652f7f9eeedca3eedeaec2113286bf34e54e89bdbe142193be46fb3c950
+  metadata.gz: a0434d76180ca753632cfcb0397e5891d40b0f2b02c47a55b56ae914d38ec2ab
+  data.tar.gz: a342fe4acbcb83b28d37487cdff0e46f44753a7f8f740c47339bd7751875e032
 SHA512:
-  metadata.gz: ccd700dde808fff8168c2454aec3567e8163b33cb2ec97ad7f625aaca671fb9e234d45f3fdc02423949f6de031744e173c9b31417f2d9bc5ace599f9ddebb62f
-  data.tar.gz: 4a3cdb496f897df411159e1108ad1a957d52d1201efec70d597e375a7cfa899483667c38be8067ffb1dce44d2994ebfdef9008bc2fb1988c42d7b3a3f5e43748
+  metadata.gz: b2779bcd262dc381c6454f5edbeb8de19f60e20ff1611d7756af07c1fef011a420f5d47b5c24f57531e6517565aedb3299fa27cbed66a67ca3f874d7515eaa12
+  data.tar.gz: d5949e45bc9a4b1c44bfa5bb072b406c54a3a964d1f00d7ac9b6ed17dae0dfa96a44270d81fb9b0d7e1e298a99719170b60c85fa45bb88ad6424fc6ed063aa88

data/README.md

@@ -1,6 +1,6 @@
 # About
 
-This is Storyblok's rendering service to render html from the data of the richtext field type. The renderer is also compatible with Prosemirror's json format.
+This package allows you to get an HTML string from the [richtext field](https://www.storyblok.com/docs/richtext-field) of Storyblok.
 
 ## How to install
 
@@ -10,13 +10,32 @@ Add the gem to your Gemfile
 gem 'storyblok-richtext-renderer'
 ```
 
-### Rendering a richtext field
+## Usage
+
+Instantiate the `Resolver` class:
 
 ```ruby
-require 'storyblok/richtext'
+require_relative '../lib/storyblok/richtext'
+
 renderer = Storyblok::Richtext::HtmlRenderer.new
-renderer.render({'type' => 'doc', 'content' => [{'type' => 'paragraph', 'content' => [{'text' => 'Good', 'type' => 'text'}]}]})
-# -> <p>Good</p>
+
+```
+
+Use the function `render()` to get the html string from your richtext field.
+
+```ruby
+# previous code...
+
+doc = {
+  'type' => 'doc',
+  'content' => [
+    {
+      'type' => 'horizontal_rule'
+    }
+  ]
+}
+
+renderer.render(doc) # renders a html string: '<hr />'
 ```
 
 ### Run all tests

data/lib/storyblok/richtext/html_renderer/marks/anchor.rb

@@ -0,0 +1,17 @@
+module Storyblok::Richtext
+  module Marks
+    class Anchor < Mark
+
+      def matching
+        @node['type'] === 'anchor'
+      end
+
+      def tag
+        [{
+          tag: "span",
+          attrs: @node['attrs']
+        }]
+      end
+    end
+  end
+end

data/lib/storyblok/richtext/html_renderer/marks/highlight.rb

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

data/lib/storyblok/richtext/html_renderer/marks/link.rb

@@ -11,11 +11,24 @@ module Storyblok::Richtext
 
         if attrs['anchor'].is_a?(String) and !attrs['anchor'].empty?
           attrs['href'] = "#{attrs['href']}##{attrs['anchor']}"
+          attrs.delete('anchor')
+        end
+
+        if attrs['linktype'].is_a?(String) and attrs['linktype'] == 'email'
+          emailContainer = attrs['href']
+          attrs['href'] = "mailto:#{emailContainer}"
+        end
+
+        if attrs['custom']
+          for item in attrs['custom'] do
+            attrs[item[0]] = item[1]
+          end
+          attrs.delete('custom')
         end
 
         [{
           tag: "a",
-          attrs: attrs.slice('href', 'target')
+          attrs: attrs
         }]
       end
     end

data/lib/storyblok/richtext/html_renderer/marks/subscript.rb

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

data/lib/storyblok/richtext/html_renderer/marks/superscript.rb

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

data/lib/storyblok/richtext/html_renderer/marks/text_style.rb

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

data/lib/storyblok/richtext/html_renderer/nodes/emoji.rb

@@ -0,0 +1,23 @@
+module Storyblok::Richtext
+  module Nodes
+    class Emoji < Node
+
+      def matching
+        @node['type'] === 'emoji'
+      end
+
+      def tag
+        attrs = {
+          'data-type' => 'emoji',
+          'data-name' => @node['attrs']['name'],
+          'emoji' => @node['attrs']['emoji']
+        }
+
+        [{
+          tag: "span",
+          attrs: attrs
+        }]
+      end
+    end
+  end
+end

data/lib/storyblok/richtext/html_renderer.rb

@@ -11,6 +11,11 @@ module Storyblok
     require_relative "html_renderer/marks/italic"
     require_relative "html_renderer/marks/link"
     require_relative "html_renderer/marks/styled"
+    require_relative "html_renderer/marks/anchor"
+    require_relative "html_renderer/marks/highlight"
+    require_relative "html_renderer/marks/subscript"
+    require_relative "html_renderer/marks/superscript"
+    require_relative "html_renderer/marks/text_style"
     require_relative "html_renderer/nodes/node"
     require_relative "html_renderer/nodes/bullet_list"
     require_relative "html_renderer/nodes/code_block"
@@ -25,6 +30,7 @@ module Storyblok
     require_relative "html_renderer/nodes/horizontal_rule"
     require_relative "html_renderer/nodes/text"
     require_relative "html_renderer/nodes/blok"
+    require_relative "html_renderer/nodes/emoji"
 
     class HtmlRenderer
       def initialize
@@ -36,7 +42,12 @@ module Storyblok
           Storyblok::Richtext::Marks::Code,
           Storyblok::Richtext::Marks::Italic,
           Storyblok::Richtext::Marks::Link,
-          Storyblok::Richtext::Marks::Styled
+          Storyblok::Richtext::Marks::Styled,
+          Storyblok::Richtext::Marks::Anchor,
+          Storyblok::Richtext::Marks::Highlight,
+          Storyblok::Richtext::Marks::Subscript,
+          Storyblok::Richtext::Marks::Superscript,
+          Storyblok::Richtext::Marks::TextStyle
         ]
         @nodes = [
           Storyblok::Richtext::Nodes::HorizontalRule,
@@ -50,7 +61,8 @@ module Storyblok
           Storyblok::Richtext::Nodes::OrderedList,
           Storyblok::Richtext::Nodes::Paragraph,
           Storyblok::Richtext::Nodes::Text,
-          Storyblok::Richtext::Nodes::Blok
+          Storyblok::Richtext::Nodes::Blok,
+          Storyblok::Richtext::Nodes::Emoji
         ]
       end
 
@@ -99,6 +111,8 @@ module Storyblok
           html.push(render_tag(node.single_tag))
         elsif node and node.html
           html.push(node.html)
+        elsif item['type'] == 'emoji'
+          html.push(render_emoji(item))
         end
 
         html.push(render_closing_tag(node.tag)) if node and node.tag
@@ -159,6 +173,24 @@ module Storyblok
         end
         found.first
       end
+
+      def render_emoji(item)
+        if item['attrs']['emoji']
+          return item['attrs']['emoji']
+        end
+
+        emoji_image_container = [{
+          tag: 'img',
+          attrs: {
+            src: item['attrs']['fallbackImage'],
+            draggable: 'false',
+            loading: 'lazy',
+            align: 'absmiddle',
+          },
+        }]
+
+        render_tag(emoji_image_container, ' /')
+      end
     end
   end
 end

data/lib/storyblok/richtext/version.rb

@@ -1,6 +1,6 @@
 module Storyblok
   module Richtext
     # Gem Version
-    VERSION = '0.0.6'
+    VERSION = '0.0.7'
   end
 end

data/spec/richtext_spec.rb

@@ -129,7 +129,7 @@ describe 'richtext' do
     }
 
     renderer = Storyblok::Richtext::HtmlRenderer.new
-    expect(renderer.render(doc)).to eq('<a href="/link" target="_blank">link text</a>')
+    expect(renderer.render(doc)).to eq('<a href="/link" target="_blank" uuid="300aeadc-c82d-4529-9484-f3f8f09cf9f5">link text</a>')
   end
 end
 
@@ -178,6 +178,292 @@ describe 'richtext' do
     }
 
     renderer = Storyblok::Richtext::HtmlRenderer.new
-    expect(renderer.render(doc)).to eq('<a href="/link#anchor-text" target="_blank">link text</a>')
+    expect(renderer.render(doc)).to eq('<a href="/link#anchor-text" target="_blank" uuid="300aeadc-c82d-4529-9484-f3f8f09cf9f5">link text</a>')
+  end
+end
+
+describe 'richtext' do
+  it 'link to generate a tag with an email' do
+    doc = {
+      'type' => 'doc',
+      'content' => [
+      {
+        'text' => 'an email link',
+        'type' => 'text',
+        'marks' => [
+          {
+            'type' => 'link',
+            'attrs' => {
+              'href' => 'email@client.com',
+              'target' => '_blank',
+              'uuid' => nil,
+              'linktype' => 'email'
+            }
+          }
+        ]
+      }
+    ]
+    }
+
+    renderer = Storyblok::Richtext::HtmlRenderer.new
+    expect(renderer.render(doc)).to eq('<a href="mailto:email@client.com" target="_blank" linktype="email">an email link</a>')
+  end
+end
+
+describe 'richtext' do
+  it 'should render a custom attribute in a link tag' do
+    doc = {
+      'type' => 'paragraph',
+      'content' => [
+        {
+          'text' => 'A nice link with custom attr',
+          'type' => 'text',
+          'marks' => [
+            {
+              'type' => 'link',
+              'attrs' => {
+                'href' => 'www.storyblok.com',
+                'uuid' => '300aeadc-c82d-4529-9484-f3f8f09cf9f5',
+                # 'anchor' => nil,
+                'custom' => {
+                  'rel' => 'nofollow',
+                  'title' => 'nice test',
+                },
+                'target' => '_blank',
+                'linktype' => 'url'
+              }
+            }
+          ]
+        }
+      ]
+    }
+
+    renderer = Storyblok::Richtext::HtmlRenderer.new
+    expect(renderer.render(doc)).to eq('<a href="www.storyblok.com" uuid="300aeadc-c82d-4529-9484-f3f8f09cf9f5" target="_blank" linktype="url" rel="nofollow" title="nice test">A nice link with custom attr</a>')
+  end
+end
+
+describe 'richtext' do
+  it 'should render a subscript' do
+    doc = {
+      'type' => 'paragraph',
+      'content' => [
+        {
+          'text' => 'A Subscript text',
+          'type' => 'text',
+          'marks' => [
+            {
+              'type' => 'subscript'
+            }
+          ]
+        }
+      ]
+    }
+
+    renderer = Storyblok::Richtext::HtmlRenderer.new
+    expect(renderer.render(doc)).to eq('<sub>A Subscript text</sub>')
+  end
+end
+
+describe 'richtext' do
+  it 'should render a superscript' do
+    doc = {
+      'type' => 'paragraph',
+      'content' => [
+        {
+          'text' => 'A Superscript text',
+          'type' => 'text',
+          'marks' => [
+            {
+              'type' => 'superscript'
+            }
+          ]
+        }
+      ]
+    }
+
+    renderer = Storyblok::Richtext::HtmlRenderer.new
+    expect(renderer.render(doc)).to eq('<sup>A Superscript text</sup>')
+  end
+end
+
+describe 'richtext' do
+  it 'should render a anchor in the text' do
+    doc = {
+      "type" => "doc",
+      "content" => [
+        {
+          "type" => "paragraph",
+          "content" => [
+            {
+              "text" => "Paragraph with anchor in the midle",
+              "type" => "text",
+              "marks" => [
+                {
+                  "type" => "anchor",
+                  "attrs" => {
+                    "id" => "test"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+
+    renderer = Storyblok::Richtext::HtmlRenderer.new
+    expect(renderer.render(doc)).to eq('<p><span id="test">Paragraph with anchor in the midle</span></p>')
+  end
+end
+
+describe 'richtext' do
+  it 'should render a h1 title with a anchor in the middle of the text' do
+    doc = {
+      'type' => 'doc',
+      'content' => [
+        {
+          'type' => 'heading',
+          'attrs' => {
+            'level' => '1'
+          },
+          'content' => [
+            {
+              'text' => 'Title with ',
+              'type' => 'text'
+            },
+            {
+              'text' => 'Anchor',
+              'type' => 'text',
+              'marks' => [
+                {
+                  'type' => 'anchor',
+                  'attrs' => {
+                    'id' => 'test1'
+                  }
+                }
+              ]
+            },
+            {
+              'text' => ' in the midle',
+              'type' => 'text'
+            }
+          ]
+        }
+      ]
+    }
+
+    renderer = Storyblok::Richtext::HtmlRenderer.new
+    expect(renderer.render(doc)).to eq('<h1>Title with <span id="test1">Anchor</span> in the midle</h1>')
+  end
+end
+
+describe 'richtext' do
+  it 'should render a text with highlight color' do
+    doc = {
+      'type' => 'doc',
+      'content' => [
+        {
+          'text' => 'Highlighted text',
+          'type' => 'text',
+          'marks' => [
+            {
+              'type' => 'highlight',
+              'attrs' => {
+                'color' => '#E72929',
+              },
+            },
+          ],
+        },
+      ],
+    }
+
+    renderer = Storyblok::Richtext::HtmlRenderer.new
+    expect(renderer.render(doc)).to eq('<span style="background-color:#E72929;">Highlighted text</span>')
+  end
+end
+
+describe 'richtext' do
+  it 'should render a text with text color' do
+    doc = {
+      'type' => 'doc',
+      'content' => [
+        {
+          'text' => 'Colored text',
+          'type' => 'text',
+          'marks' => [
+            {
+              'type' => 'textStyle',
+              'attrs' => {
+                'color' => '#E72929',
+              },
+            },
+          ],
+        },
+      ],
+    }
+
+    renderer = Storyblok::Richtext::HtmlRenderer.new
+    expect(renderer.render(doc)).to eq('<span style="background-color:#E72929;">Colored text</span>')
+  end
+end
+
+describe 'richtext' do
+  it 'should render a text with a emoji' do
+    doc = {
+      'type' => 'doc',
+      'content' => [
+        {
+          'type' => 'paragraph',
+          'content' => [
+            {
+              'text' => 'Text with a emoji in the end ',
+              'type' => 'text'
+            },
+            {
+              'type' => 'emoji',
+              'attrs' => {
+                'name' => 'smile',
+                'emoji' => '😄',
+                'fallbackImage' => 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f604.png'
+              }
+            },
+          ]
+        }
+      ]
+    }
+
+    renderer = Storyblok::Richtext::HtmlRenderer.new
+    expect(renderer.render(doc)).to eq('<p>Text with a emoji in the end <span data-type="emoji" data-name="smile" emoji="😄">😄</span></p>')
+  end
+end
+
+describe 'richtext' do
+  it 'should render a emoji with falbackimage' do
+    doc = {
+      'type' => 'doc',
+      'content' => [
+        {
+          'type' => 'paragraph',
+          'content' => [
+            {
+              'text' => 'Text with a emoji in the end ',
+              'type' => 'text'
+            },
+            {
+              'type' => 'emoji',
+              'attrs' => {
+                'name' => 'trollface',
+                'emoji' => nil,
+                'fallbackImage' => 'https://github.githubassets.com/images/icons/emoji/trollface.png'
+              }
+            },
+          ]
+        }
+      ]
+    }
+
+    renderer = Storyblok::Richtext::HtmlRenderer.new
+    expect(renderer.render(doc)).to eq('<p>Text with a emoji in the end <span data-type="emoji" data-name="trollface"><img src="https://github.githubassets.com/images/icons/emoji/trollface.png" draggable="false" loading="lazy" align="absmiddle" /></span></p>')
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: storyblok-richtext-renderer
 version: !ruby/object:Gem::Version
-  version: 0.0.6
+  version: 0.0.7
 platform: ruby
 authors:
 - Storyblok (Alexander Feiglstorfer)
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-05-14 00:00:00.000000000 Z
+date: 2023-04-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -45,32 +45,31 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- ".DS_Store"
 - ".editorconfig"
 - ".gitignore"
-- ".ruby-version"
 - Gemfile
-- Gemfile.lock
 - README.md
-- lib/.DS_Store
-- lib/storyblok/.DS_Store
 - lib/storyblok/richtext.rb
 - lib/storyblok/richtext/html_renderer.rb
-- lib/storyblok/richtext/html_renderer/.DS_Store
+- lib/storyblok/richtext/html_renderer/marks/anchor.rb
 - lib/storyblok/richtext/html_renderer/marks/bold.rb
 - lib/storyblok/richtext/html_renderer/marks/code.rb
+- lib/storyblok/richtext/html_renderer/marks/highlight.rb
 - lib/storyblok/richtext/html_renderer/marks/italic.rb
 - lib/storyblok/richtext/html_renderer/marks/link.rb
 - lib/storyblok/richtext/html_renderer/marks/mark.rb
 - lib/storyblok/richtext/html_renderer/marks/strike.rb
 - lib/storyblok/richtext/html_renderer/marks/strong.rb
 - lib/storyblok/richtext/html_renderer/marks/styled.rb
+- lib/storyblok/richtext/html_renderer/marks/subscript.rb
+- lib/storyblok/richtext/html_renderer/marks/superscript.rb
+- lib/storyblok/richtext/html_renderer/marks/text_style.rb
 - lib/storyblok/richtext/html_renderer/marks/underline.rb
-- lib/storyblok/richtext/html_renderer/nodes/.DS_Store
 - lib/storyblok/richtext/html_renderer/nodes/blockquote.rb
 - lib/storyblok/richtext/html_renderer/nodes/blok.rb
 - lib/storyblok/richtext/html_renderer/nodes/bullet_list.rb
 - lib/storyblok/richtext/html_renderer/nodes/code_block.rb
+- lib/storyblok/richtext/html_renderer/nodes/emoji.rb
 - lib/storyblok/richtext/html_renderer/nodes/hard_break.rb
 - lib/storyblok/richtext/html_renderer/nodes/heading.rb
 - lib/storyblok/richtext/html_renderer/nodes/horizontal_rule.rb
@@ -88,7 +87,7 @@ homepage: https://github.com/storyblok/storyblok-ruby-richtext-renderer
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -103,9 +102,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.6
-signing_key: 
+rubygems_version: 3.1.4
+signing_key:
 specification_version: 4
 summary: Storyblok richtext renderer
 test_files:

data/.ruby-version

@@ -1 +0,0 @@
-2.5.1

data/Gemfile.lock

@@ -1,33 +0,0 @@
-PATH
-  remote: .
-  specs:
-    storyblok-richtext-renderer (0.0.4)
-
-GEM
-  remote: https://rubygems.org/
-  specs:
-    diff-lcs (1.3)
-    rspec (3.8.0)
-      rspec-core (~> 3.8.0)
-      rspec-expectations (~> 3.8.0)
-      rspec-mocks (~> 3.8.0)
-    rspec-core (3.8.2)
-      rspec-support (~> 3.8.0)
-    rspec-expectations (3.8.5)
-      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.8.0)
-    rspec-mocks (3.8.2)
-      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.8.0)
-    rspec-support (3.8.3)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  bundler (~> 2)
-  rspec (~> 3)
-  storyblok-richtext-renderer!
-
-BUNDLED WITH
-   2.0.2