Giter VIP home page Giter VIP logo

Comments (11)

stevensacks avatar stevensacks commented on May 26, 2024 1

We are using your recommended example to me from awhile back:

const draftConverter = convertToHTML({
  blockToHTML: (block) => {
    if(block.type === 'header-two'){
      return {
        start: '<h2 class="title">',
        end: '</h2>'
      }
    }
    if(block.type === 'header-three'){
      return {
        start: '<h3 class="subtitle">',
        end: '</h3>'
      }
    }
    if (block.type === 'atomic') {
      return {
        start: '',
        end: ''
      }
    } else {
      return {
        start: '<p>',
        end: '</p>'
      }
    }
  },
  entityToHTML: (entity, originalText) => {
    const src = entity.data.src;
    if (entity.type === 'image') return `<div class="content-image">${originalText}<img src="${src}"/></div>`;
    else if (entity.type === '#mention') return parsers.games.hearthstone(entity);
    else return originalText;
  }
});

from draft-convert.

coniel avatar coniel commented on May 26, 2024 1

I just ran into this issue as well. This is what fixed it for me in case anyone else is stuck on the same problem (note the nestStart/nestEnd tags):

if (type === 'unordered-list-item') {
  return {
    start: '<li>',
    end: '</li>',
    nestStart: '<ul>',
    nestEnd: '</ul>',
  };
}
if (type === 'ordered-list-item') {
  return {
    start: '<li>',
    end: '</li>',
    nestStart: '<ol>',
    nestEnd: '</ol>',
  };
}

from draft-convert.

stevensacks avatar stevensacks commented on May 26, 2024

Here's the raw object from draftjs.

{
    "entityMap": {},
    "blocks": [{
        "key": "9elus",
        "text": "Ordered list test",
        "type": "unstyled",
        "depth": 0,
        "inlineStyleRanges": [],
        "entityRanges": [],
        "data": {}
    }, {
        "key": "1rd6b",
        "text": "first item",
        "type": "ordered-list-item",
        "depth": 0,
        "inlineStyleRanges": [],
        "entityRanges": [],
        "data": {}
    }, {
        "key": "9l80r",
        "text": "second item",
        "type": "ordered-list-item",
        "depth": 0,
        "inlineStyleRanges": [],
        "entityRanges": [],
        "data": {}
    }, {
        "key": "cr9vv",
        "text": "third item",
        "type": "ordered-list-item",
        "depth": 0,
        "inlineStyleRanges": [],
        "entityRanges": [],
        "data": {}
    }, {
        "key": "cc2j0",
        "text": "",
        "type": "unstyled",
        "depth": 0,
        "inlineStyleRanges": [],
        "entityRanges": [],
        "data": {}
    }]
}

from draft-convert.

stevensacks avatar stevensacks commented on May 26, 2024

It looks like DraftJS doesn't export the <ol> or <ul> tags that open/close the line items.

from draft-convert.

benbriggs avatar benbriggs commented on May 26, 2024

hmm, what version of draft-convert are you using? are you running convertToHTML with any configuration options passed to it? I was able to successfully convert that raw state with the default options.

from draft-convert.

stevensacks avatar stevensacks commented on May 26, 2024

We just updated to 1.3.3 and we still get this error:

convertToHTML: received block information without either a ReactElement or an object with start/end tags

from draft-convert.

benbriggs avatar benbriggs commented on May 26, 2024

Interesting. I still can't reproduce on 1.3.3 with the default settings so it sounds like draft-convert disagrees with your setting of the blockToHTML option. Is it possible that for list items you're returning HTML information that doesn't include any of these properties:

a) a nest property with a value of a ReactElement
b) a nestStart and nestEnd with string values for the html tags

If you're interested this is likely the source of the error check. In order to know what tag (ul or ol) in this case to use to wrap blocks that require nesting. The default block HTML has this definition so it sounds like it's being overridden somewhere in your configuration.

from draft-convert.

stevensacks avatar stevensacks commented on May 26, 2024

I tried adding this but no change:

    if(block.type === 'unordered-list-item'){
        return {
            element: '<li/>',
            nest: '<ul>'
        }
    }
    if(block.type === 'ordered-list-item'){
        return {
            element: '<li/>',
            nest: '<ol>'
        }
    }

from draft-convert.

stevensacks avatar stevensacks commented on May 26, 2024

We got it working. Thanks!

from draft-convert.

benbriggs avatar benbriggs commented on May 26, 2024

Great! Looks like that else at the end was clobbering it. I'd recommend avoiding one so that it can fall back to the built-in values.

from draft-convert.

ddelrio1986 avatar ddelrio1986 commented on May 26, 2024

@benbriggs I had to add the same thing as @coniel above. Is this a bug in draft-convert? I can share any information on my setup if needed.

from draft-convert.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.