1 import React from 'react'

     2 import Html from 'slate-html-serializer'

     3 

     4 const BLOCK_TAGS = {

     5   p: 'paragraph',

     6   ul: 'bulleted-list',

     7   ol: 'numbered-list',

     8   li: 'list-item',

     9 }

    10 

    11 // Add a dictionary of mark tags.

    12 const MARK_TAGS = {

    13   em: 'italic',

    14   strong: 'bold',

    15   u: 'underlined',

    16   category: 'span'

    17 }

    18 

    19 const rules = [

    20   // Block rules

    21   {

    22     deserialize(el, next) {

    23       const type = BLOCK_TAGS[el.tagName]

    24       if (!type) return

    25       return {

    26         object: 'block',

    27         type: type,

    28         nodes: next(el.childNodes)

    29       }

    30     },

    31     serialize(obj, children) {

    32       if (obj.object !== 'block') return

    33       switch (obj.type) {

    34         case 'numbered-list':

    35           return <ol>{children}</ol>;

    36         case 'bulleted-list':

    37           return <ul>{children}</ul>;

    38         case 'list-item':

    39           return <li>{children}</li>;

    40         case 'paragraph':

    41         case 'line':

    42           return <p>{children}</p>

    43         default: return;

    44       }

    45     }

    46   },

    47   // Mark rules

    48   {

    49     deserialize(el, next) {

    50       const type = MARK_TAGS[el.tagName]

    51       if (!type) return

    52       return {

    53         object: 'mark',

    54         type: type,

    55         nodes: next(el.childNodes)

    56       }

    57     },

    58     serialize(obj, children) {

    59       if (obj.object !== 'mark') return

    60       switch (obj.type) {

    61         case 'bold':

    62           return <strong>{children}</strong>

    63         case 'italic':

    64           return <em>{children}</em>

    65         case 'underlined':

    66           return <ins>{children}</ins>

    67         case 'category':

    68           return <span style={{ backgroundColor: obj.get('color') }}>{children}</span>

    69         default: return;

    70       }

    71     }

    72   }

    73 ]

    74 

    75 const serializer = new Html({ rules })

    76 

    77 export default serializer