RubyGems - storyblok-richtext-renderer - Versions diffs - 0.0.6 → 0.0.8 - Mend

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html xmlns='http://www.w3.org/1999/xhtml'>
+  <head>
+    <title>Code coverage for Storyblok-ruby-richtext-renderer</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <script src='./assets/0.12.3/application.js' type='text/javascript'></script>
+    <link href='./assets/0.12.3/application.css' media='screen, projection, print' rel='stylesheet' type='text/css' />
+    <link rel="shortcut icon" type="image/png" href="./assets/0.12.3/favicon_green.png" />
+    <link rel="icon" type="image/png" href="./assets/0.12.3/favicon.png" />
+  </head>
+  <body>
+    <div id="loading">
+      <img src="./assets/0.12.3/loading.gif" alt="loading"/>
+    </div>
+    <div id="wrapper" class="hide">
+      <div class="timestamp">Generated <abbr class="timeago" title="2023-04-18T11:07:52-03:00">2023-04-18T11:07:52-03:00</abbr></div>
+      <ul class="group_tabs"></ul>
+      <div id="content">
+        <div class="file_list_container" id="AllFiles">
+  <h2>
+    <span class="group_name">All Files</span>
+    (<span class="covered_percent">
+      <span class="green">
+  100.0%
+</span>
+     </span>
+     covered at
+     <span class="covered_strength">
+       <span class="red">
+         0.0
+       </span>
+    </span> hits/line
+    )
+  </h2>
+  <a name="AllFiles"></a>
+  <div>
+    <b>0</b> files in total.
+  </div>
+  <div class="t-line-summary">
+    <b>0</b> relevant lines,
+    <span class="green"><b>0</b> lines covered</span> and
+    <span class="red"><b>0</b> lines missed. </span>
+    (<span class="green">
+  100.0%
+</span>
+)
+  </div>
+  <div class="file_list--responsive">
+    <table class="file_list">
+      <thead>
+        <tr>
+          <th>File</th>
+          <th class="cell--number">% covered</th>
+          <th class="cell--number">Lines</th>
+          <th class="cell--number">Relevant Lines</th>
+          <th class="cell--number">Lines covered</th>
+          <th class="cell--number">Lines missed</th>
+          <th class="cell--number">Avg. Hits / Line</th>
+        </tr>
+      </thead>
+      <tbody>
+      </tbody>
+    </table>
+  </div>
+</div>
+      </div>
+      <div id="footer">
+        Generated by <a href="https://github.com/simplecov-ruby/simplecov">simplecov</a> v0.22.0
+        and simplecov-html v0.12.3<br/>
+        using RSpec
+      </div>
+      <div class="source_files">
+      </div>
+    </div>
+  </body>
+</html>

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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'].is_a?(Hash)
+          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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

data/spec/richtext_spec.rb CHANGED Viewed

@@ -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