draftjs_html 0.14.0 → 0.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b708c9dfd4a3d4b6cdf22de377edd9a271e6eb527c70648d11337c1d090613e5
-  data.tar.gz: e472de0d6b79d5b7cf7380d6ed89f8c85aedf79d30d329a42550b1cf94eb7dd7
+  metadata.gz: 770a91eea2ce6ff069f3ccf80d8d9857e15ea8882cfd7a426fe9b8aea2b6ca4e
+  data.tar.gz: 1dfef55358fb964b0a6ac6c98458b1d04a59c0e115c11a2d32a5f4042c747777
 SHA512:
-  metadata.gz: 6511068eab5eb7c99f7815c85bb6b40bd998f80cee7ed8b41a418d9295bf467f4ed4a1de47049342aa27ec02e0e29207031f1f3cfa9e853da13acc79d98e21b1
-  data.tar.gz: bd939bb048b11692d520cfef3202b7e9d7106f36cac901cd4171f82991ccf24981b8cc610f0e61626231c463c84202d5dbb80b26221cecf1f68b9f48b435b32a
+  metadata.gz: '0830e5b529717b67fd2dbdd2627c53e68332bbc66601e6b405ecd60d993aef9eca797211bfc442c95c6cf00d9996d65b22cdacd12982094b4d3c33f04e86f0c2'
+  data.tar.gz: 47f94740645254e51675033bcb1d23d331eaa054d0d73382d689e4d10e18441177622b8fb9d66d51008c06f3d432eda1809014fd541ae2f52fa1b5d5d5905c9b

data/Gemfile

@@ -6,3 +6,5 @@ source "https://rubygems.org"
 gemspec
 
 gem "rake", "~> 13.0"
+gem "pry-byebug", "~> 3.10"
+gem 'simplecov', '~> 0.21'

data/README.md

@@ -177,6 +177,44 @@ end
 # will nest HTML nodes as you probably want (e.g. "<p>hi!</p>")
 ```
 
+### FromHtml (beta)
+
+As an experiment, this gem is providing the ability to convert from HTML to raw
+DraftJS JSON. You can explore this behavior with the following snippet:
+
+```ruby
+DraftjsHtml.from_html("<p>Hello!</p>") # => { "blocks" => [{ "text": "Hello!", "type" => "unstyled" } ] }
+```
+
+There are some known limitations with this approach, but, if you're just trying
+to get started, it may be good enough for you. Contributions and issue reports
+are welcome and encouraged.
+
+#### `:node_to_entity:`
+
+This `FromHtml` option allows the user to specify how a particular node is
+converted to a DraftJS entity. By default, the library converts `img` and `a`
+tags to `IMAGE` and `LINK` entities, respectively. If you specify this option,
+you override the existing behavior and must define those conversions yourself.
+
+The option expects a `callable` (`proc`, `lambda`, etc) that receives 3 arguments:
+
+- tagname (e.g. `a`) - always downcased
+- content - the text content inside the tag
+- HTML attributes - any HTML attributes on the tag as a Hash (string keys)
+
+The callable should return a Hash with symbol keys. The supported values are:
+
+- `type` (required)
+  - the entity "type" or name
+- `mutability` (optional, default `'IMMUTABLE'`)
+  - either 'MUTABLE', 'IMMUTABLE', or 'SEGMENTED'
+- `atomic` (optional, default `false`)
+  - when true, creates a new "atomic" block for this entity rather than apply 
+    the entity to the current range
+- `data` (optional, default `{}`)
+  - an arbitrary data-bag (Hash) of entity data
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run

data/lib/draftjs_html/draftjs/raw_builder.rb

@@ -14,8 +14,8 @@ module DraftjsHtml
         @entity_map = {}
       end
 
-      def text_block(text)
-        typed_block('unstyled', text)
+      def text_block(text, depth: 0)
+        typed_block('unstyled', text, depth: depth)
       end
 
       def typed_block(type, text, depth: 0)
@@ -40,6 +40,10 @@ module DraftjsHtml
         entity_range(key, range)
       end
 
+      def has_blocks?
+        @blocks.any?
+      end
+
       def to_h
         {
           'blocks' => @blocks,
@@ -47,6 +51,21 @@ module DraftjsHtml
         }
       end
 
+      def to_s
+        draftjs = DraftjsHtml::Draftjs.parse(to_h)
+        draftjs.blocks.reduce('') do |acc, block|
+          acc << "typed_block '#{block.type}', '#{block.text}', depth: #{block.depth}\n"
+          block.inline_styles.each do |style|
+            acc << "inline_style '#{style.name}', #{style.range.begin}..#{style.range.end} # (#{style.offset} + #{style.length})\n"
+          end
+          block.entity_ranges.each do |entity_range|
+            entity = draftjs.entity_map[entity_range.name]
+            acc << "apply_entity '#{entity.type}', #{entity_range.range.begin}..#{entity_range.range.end}\n"
+          end
+          acc
+        end
+      end
+
       private
 
       def deep_stringify_keys(object)

data/lib/draftjs_html/draftjs/to_raw.rb

@@ -14,6 +14,7 @@ module DraftjsHtml
 
       def convert_block(block)
         {
+          'key' => block.key,
           'text' => block.text,
           'type' => block.type,
           'depth' => block.depth,

data/lib/draftjs_html/from_html/depth_stack.rb

@@ -0,0 +1,109 @@
+module DraftjsHtml
+  class FromHtml < Nokogiri::XML::SAX::Document
+    class DepthStack
+      def initialize
+        @stack = []
+        @nodes = []
+        @list_depth = -1
+        @style_stack = StyleStack.new
+      end
+
+      def push(tagname, attrs)
+        @stack << PendingBlock.from_tag(tagname, attrs, @nodes.dup, @list_depth)
+        track_block_node(tagname)
+      end
+
+      def push_parent(tagname, attrs)
+        @list_depth += 1
+        track_block_node(tagname)
+      end
+
+      def pop_parent(tagname, draftjs)
+        @nodes.pop
+        blocks = []
+        while current.depth >= 0
+          blocks << @stack.pop
+          @nodes.pop
+        end
+        blocks.reverse_each do |pending_block|
+          pending_block.flush_to(draftjs, @style_stack)
+          pending_block.apply_entities_to(draftjs)
+        end
+        @list_depth -= 1
+      end
+
+      def pop(draftjs)
+        return if @stack.empty?
+        return if inside_parent?
+
+        if @nodes.last == current.tagname && current.flushable?
+          flush_to(draftjs)
+        elsif @stack[-2]
+          @stack[-2].consume(current)
+        end
+
+        @stack.pop
+        @nodes.pop
+      end
+
+      def create_pending_entity(tagname, attrs)
+        current.pending_entities << { tagname: tagname, start: current_character_offset + 1, attrs: attrs }
+      end
+
+      def convert_pending_entities(conversion)
+        while current.pending_entities.any?
+          pending_entity = current.pending_entities.pop
+          range = pending_entity[:start]..current_character_offset
+          content = current_text_buffer[range]
+          user_created_entity = conversion.call(pending_entity[:tagname], content, pending_entity[:attrs])
+          next unless user_created_entity
+
+          if content == '' && !user_created_entity[:atomic]
+            current.text_buffer << ' '
+            range = range.begin..(range.end+1)
+          end
+          current.entities << user_created_entity.merge(start: range.begin, finish: range.end)
+        end
+      end
+
+      def style_start(tagname)
+        @style_stack.track_start(tagname, current_character_offset + 1)
+      end
+
+      def style_end(tagname)
+        @style_stack.track_end(tagname, current_character_offset)
+      end
+
+      def flush_to(draftjs)
+        current.flush_to(draftjs, @style_stack)
+        current.apply_entities_to(draftjs)
+      end
+
+      def append_text(chars)
+        current.text_buffer << chars unless chars.empty?
+      end
+
+      private
+
+      def current_text_buffer
+        current.text_buffer.join
+      end
+
+      def current_character_offset
+        current.character_offset
+      end
+
+      def track_block_node(name)
+        @nodes << name
+      end
+
+      def inside_parent?
+        (FromHtml::LIST_PARENT_ELEMENTS & @nodes).any?
+      end
+
+      def current
+        @stack.last
+      end
+    end
+  end
+end

data/lib/draftjs_html/from_html/elements.rb

@@ -0,0 +1,8 @@
+module DraftjsHtml
+  class FromHtml < Nokogiri::XML::SAX::Document
+    INLINE_STYLE_ELEMENTS = HtmlDefaults::HTML_STYLE_TAGS_TO_STYLE.keys.freeze
+    LIST_PARENT_ELEMENTS = %w[ol ul table].freeze
+    INLINE_NON_STYLE_ELEMENTS = %w[a abbr cite font img output q samp span thead tbody td time var].freeze
+    BLOCK_CONTENT_ELEMENTS = %w[p dl h1 h2 h3 h4 h5 h6].freeze
+  end
+end

data/lib/draftjs_html/from_html/pending_block.rb

@@ -0,0 +1,82 @@
+module DraftjsHtml
+  class FromHtml < Nokogiri::XML::SAX::Document
+    PendingBlock = Struct.new(:tagname, :attrs, :chars, :entities, :pending_entities, :parent_tagnames, :depth, keyword_init: true) do
+      def self.from_tag(name, attrs, parent_tagnames, depth)
+        self.new(
+          tagname: name,
+          attrs: attrs,
+          entities: [],
+          chars: [],
+          pending_entities: [],
+          depth: depth,
+          parent_tagnames: parent_tagnames,
+        )
+      end
+
+      def text_buffer
+        self[:chars]
+      end
+
+      def clear_text_buffer
+        self[:chars] = []
+      end
+
+      def character_offset
+        text_buffer.join.length - 1
+      end
+
+      def flushable?
+        %w[OPENING ol ul li table].include?(parent_tagnames.last) ||
+          (parent_tagnames.last == 'div' && tagname != 'div')
+      end
+
+      def consume(other_pending_block)
+        self.text_buffer += other_pending_block.text_buffer
+        self.pending_entities += other_pending_block.pending_entities
+        self.entities += other_pending_block.entities
+      end
+
+      def flush_to(draftjs, styles)
+        if text_buffer.any?
+          chars.join.lines.each do |line|
+            draftjs.typed_block(block_name, line.chomp, depth: [depth, 0].max)
+          end
+
+          styles.each do |descriptor|
+            finish = descriptor[:finish] || character_offset
+            draftjs.inline_style(descriptor[:style], descriptor[:start]..finish)
+          end
+        end
+
+        clear_text_buffer
+        styles.clear_finished
+      end
+
+      def apply_entities_to(draftjs)
+        Array(entities).each do |entity|
+          range = entity[:start]..entity[:finish]
+          if entity[:atomic]
+            draftjs.typed_block('atomic', ' ', depth: [depth, 0].max)
+            range = 0..0
+          end
+
+          draftjs.apply_entity entity[:type], range, data: entity[:data], mutability: entity.fetch(:mutability, 'IMMUTABLE')
+        end
+      end
+
+      def block_name
+        stack = parent_tagnames.last == 'li' ? parent_tagnames.last(2) : parent_tagnames.last(1)
+        return 'ordered-list-item' if stack.first == 'ol'
+        return 'unordered-list-item' if stack.first == 'ul'
+
+        DraftjsHtml::HtmlDefaults::BLOCK_TYPE_TO_HTML.invert.fetch(tagname, 'unstyled')
+      end
+
+      private
+
+      def text_buffer=(other)
+        self[:chars] = other
+      end
+    end
+  end
+end

data/lib/draftjs_html/from_html/style_stack.rb

@@ -0,0 +1,50 @@
+module DraftjsHtml
+  class FromHtml < Nokogiri::XML::SAX::Document
+    class StyleStack
+      def initialize
+        @stack = []
+      end
+
+      def clear_finished
+        @stack.delete_if { !!_1[:finish] }
+      end
+
+      def each(&block)
+        @stack.reverse_each.group_by { _1[:tagname] }.each do |_, descriptors|
+          overlapping_ranges = find_overlapping_styles(descriptors)
+          widest_descriptor = overlapping_ranges.max_by { (_1[:start].._1[:finish]).size }
+
+          applicable_styles = descriptors - overlapping_ranges + [widest_descriptor].compact
+          applicable_styles.each(&block)
+        end
+      end
+
+      def track_start(tagname, current_character_offset)
+        style = DraftjsHtml::HtmlDefaults::HTML_STYLE_TAGS_TO_STYLE[tagname]
+        @stack.unshift({ tagname: tagname, style: style, start: current_character_offset })
+      end
+
+      def track_end(tagname, current_character_offset)
+        descriptor_index = @stack.find_index { _1[:tagname] == tagname && !_1[:finish] }
+        descriptor = @stack[descriptor_index]
+        descriptor[:finish] = current_character_offset
+      end
+
+      private
+
+      def find_overlapping_styles(descriptors)
+        descriptors.select do |candidate_a|
+          candidate_range = candidate_a[:start]..candidate_a[:finish]
+          (descriptors - [candidate_a]).any? do |other|
+            other_range = other[:start]..other[:finish]
+            range_overlaps?(candidate_range, other_range)
+          end
+        end
+      end
+
+      def range_overlaps?(candidate_range, other_range)
+        other_range.begin == candidate_range.begin || candidate_range.cover?(other_range.begin) || other_range.cover?(candidate_range.begin)
+      end
+    end
+  end
+end

data/lib/draftjs_html/from_html.rb

@@ -0,0 +1,107 @@
+require 'stringio'
+require_relative 'html_defaults'
+require_relative 'from_html/elements'
+require_relative 'from_html/style_stack'
+require_relative 'from_html/pending_block'
+require_relative 'from_html/depth_stack'
+
+module DraftjsHtml
+  class FromHtml < Nokogiri::XML::SAX::Document
+
+    def initialize(options = {})
+      @draftjs = Draftjs::RawBuilder.new
+      @parser = Nokogiri::HTML4::SAX::Parser.new(self)
+      @depth_stack = DepthStack.new
+      @options = ensure_options!(options.dup)
+    end
+
+    def convert(raw_html)
+      convert_io(StringIO.new(raw_html))
+    end
+
+    def convert_io(html_io)
+      @parser.parse(html_io)
+      @draftjs.to_h
+    end
+
+    def characters(str)
+      content = strip_unnecessary_trailing_space(str)
+      @depth_stack.append_text(content)
+    end
+
+    def end_element(name)
+      track_pending_entity_end(name)
+
+      case name
+      when 'br' then return
+      when 'html', 'body', *FromHtml::INLINE_NON_STYLE_ELEMENTS
+      when *FromHtml::INLINE_STYLE_ELEMENTS
+        track_inline_style_end(name)
+      when *FromHtml::LIST_PARENT_ELEMENTS
+        @depth_stack.pop_parent(name, @draftjs)
+      else
+        @depth_stack.pop(@draftjs)
+      end
+    end
+
+    def start_element(name, attrs = [])
+      attributes = Hash[attrs]
+
+      case name
+      when 'br'
+        @depth_stack.append_text("\n")
+      when 'html', 'body', *FromHtml::INLINE_NON_STYLE_ELEMENTS
+      when *FromHtml::INLINE_STYLE_ELEMENTS
+        track_inline_style_start(name)
+      when *FromHtml::LIST_PARENT_ELEMENTS
+        @depth_stack.push_parent(name, attrs)
+      else
+        @depth_stack.push(name, attributes)
+      end
+
+      track_pending_entity_start(name, attributes)
+    end
+
+    def start_document
+      @depth_stack.push('OPENING', {})
+    end
+
+    def end_document
+      @depth_stack.flush_to(@draftjs)
+    end
+
+    private
+
+    def track_inline_style_start(tagname)
+      @depth_stack.style_start(tagname)
+    end
+
+    def track_inline_style_end(tagname)
+      @depth_stack.style_end(tagname)
+    end
+
+    def strip_unnecessary_trailing_space(str)
+      str
+        .gsub(/(\n+[[:space:]]*$)|(^\n+)/, '')
+        .gsub(/(^[[:space:]]+$)/, ' ')
+    end
+
+    def track_pending_entity_start(tagname, attrs)
+      @depth_stack.create_pending_entity(tagname, attrs)
+    end
+
+    def track_pending_entity_end(name)
+      @depth_stack.convert_pending_entities(@options[:node_to_entity])
+    end
+
+    def ensure_options!(opts)
+      opts[:node_to_entity] ||= ->(tagname, _content, attrs) {
+        case tagname
+        when 'a' then { type: 'LINK', mutability: 'MUTABLE', data: attrs }
+        when 'img' then { type: 'IMAGE', mutability: 'IMMUTABLE', atomic: true, data: attrs }
+        end
+      }
+      opts
+    end
+  end
+end

data/lib/draftjs_html/html_defaults.rb

@@ -1,8 +1,8 @@
 module DraftjsHtml
   module HtmlDefaults
     BLOCK_TYPE_TO_HTML = {
-      'unstyled' => 'p',
       'paragraph' => 'p',
+      'unstyled' => 'p',
       'header-one' => 'h1',
       'header-two' => 'h2',
       'header-three' => 'h3',
@@ -23,6 +23,18 @@ module DraftjsHtml
       'UNDERLINE' => 'u',
     }.freeze
 
+    HTML_STYLE_TAGS_TO_STYLE = {
+      'b' => 'BOLD',
+      'i' => 'ITALIC',
+      'em' => 'ITALIC',
+      'del' => 'STRIKETHROUGH',
+      'u' => 'UNDERLINE',
+      'strong' => 'BOLD',
+      'small' => 'SMALL',
+      'sub' => 'SUBSCRIPT',
+      'sup' => 'SUPERSCRIPT',
+    }.freeze
+
     ENTITY_ATTRIBUTE_NAME_MAP = {
       'className' => 'class',
       'url' => 'href',
@@ -32,7 +44,7 @@ module DraftjsHtml
 
     ENTITY_CONVERSION_MAP = {
       'LINK' => ->(entity, content, *) {
-        attributes = entity.data.slice('url', 'rel', 'target', 'title', 'className').each_with_object({}) do |(attr, value), h|
+        attributes = entity.data.slice('url', 'href', 'rel', 'target', 'title', 'className').each_with_object({}) do |(attr, value), h|
           h[ENTITY_ATTRIBUTE_NAME_MAP.fetch(attr, attr)] = value
         end
 
@@ -47,4 +59,4 @@ module DraftjsHtml
       }
     }.freeze
   end
-end
+end

data/lib/draftjs_html/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module DraftjsHtml
-  VERSION = "0.14.0"
+  VERSION = "0.16.0"
 end

data/lib/draftjs_html.rb

@@ -4,6 +4,7 @@ require_relative "draftjs_html/version"
 require 'nokogiri'
 require_relative 'draftjs_html/draftjs'
 require_relative 'draftjs_html/to_html'
+require_relative 'draftjs_html/from_html'
 
 module DraftjsHtml
   class Error < StandardError; end
@@ -11,4 +12,8 @@ module DraftjsHtml
   def self.to_html(raw_draftjs, options: {})
     ToHtml.new(options).convert(raw_draftjs)
   end
+
+  def self.from_html(html_str, options: {})
+    FromHtml.new(options).convert(html_str)
+  end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: draftjs_html
 version: !ruby/object:Gem::Version
-  version: 0.14.0
+  version: 0.16.0
 platform: ruby
 authors:
 - TJ Taylor
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2022-10-19 00:00:00.000000000 Z
+date: 2022-11-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: nokogiri
@@ -66,6 +66,11 @@ files:
 - lib/draftjs_html/draftjs/entity_map.rb
 - lib/draftjs_html/draftjs/raw_builder.rb
 - lib/draftjs_html/draftjs/to_raw.rb
+- lib/draftjs_html/from_html.rb
+- lib/draftjs_html/from_html/depth_stack.rb
+- lib/draftjs_html/from_html/elements.rb
+- lib/draftjs_html/from_html/pending_block.rb
+- lib/draftjs_html/from_html/style_stack.rb
 - lib/draftjs_html/html_defaults.rb
 - lib/draftjs_html/html_depth.rb
 - lib/draftjs_html/node.rb