nozer/quill-delta-to-html

Unable to get the group types 'InlineGroup','videoItem' etc in React Native production

Closed this issue · 3 comments

In React Native debug mode, the following method works to get the type of each groupedOp ('InlineGroup','videoItem').

var QuillDeltaToHtmlConverter = require('quill-delta-to-html');

let converter = new QuillDeltaToHtmlConverter(data.ops);
let groupedOps = converter.getGroupedOps();
groupedOps.map((groupedOp, key) => {
            console.log(groupedOp)
            let groupType = groupedOp.constructor.name 
          // also tried groupedOp.constructor["name"]

            switch (groupType) {
                case "InlineGroup":
                case "ListGroup":
                case "BlockGroup":
                case "VideoItem":
                default:
                    console.log(`Unknown instance`)
                    return;
            }
        })

But I just found out that groupType was undefined in React Native production. I guess the JS minifier may have messed up class.constructor.name in production build (https://stackoverflow.com/a/42660666/2598292). How would you get the type other than constructor.name?

I think one of the solutions for this is storing the type name explicitly in each groupedOp.

Logs:

09-06 00:57:26.041 25561 25619 I ReactNativeJS: { ops: 
09-06 00:57:26.041 25561 25619 I ReactNativeJS:    [ { insert: { type: 'text', value: 'Some text!!!!' },
09-06 00:57:26.041 25561 25619 I ReactNativeJS:        attributes: {} },
09-06 00:57:26.041 25561 25619 I ReactNativeJS:        attributes: {} },
09-06 00:57:26.041 25561 25619 I ReactNativeJS:      { insert: { type: 'text', value: '\n' }, attributes: {} } ] }
09-06 00:57:26.042 25561 25619 I ReactNativeJS: Unknown instance

Update:
Looks like the React Native minifier doesn't like class.constructor.name. This is my solution.

import {InlineGroup,ListGroup,ListItem,VideoItem,BlockGroup} from 'quill-delta-to-html/dist/commonjs/grouper/group-types'

groupedOps.map((group, key) => {
            switch (group.constructor) {
                case InlineGroup:
                    return rules.inlineGroup(group,key);
                case ListGroup:
                    return rules.listGroup(group,key);
                case BlockGroup:
                    return rules.blockGroup(group,key);
                case VideoItem:
                    return rules.videoItem(group,key);
                default:
                    console.log(`Unknown instance`)
                    return;
            }
 })

I wonder if you can export these types in a way that I can simply do this:

import {InlineGroup,ListGroup,ListItem,VideoItem,BlockGroup} from 'quill-delta-to-html

nozer commented

When I have time, I will look at this. Please make do with your solution for now

nozer commented

I just exported those types (along with QuillDeltaToHtmlConverter). So your import will look like
import {QuillDeltaToHtmlConverter, InlineGroup,ListGroup,ListItem,VideoItem,BlockGroup} from 'quill-delta-to-html Updated the docs with this breaking change and pushed as tag v0.10.0