Giter VIP home page Giter VIP logo

Comments (13)

benbriggs avatar benbriggs commented on May 26, 2024 1

I think the latter is what we want here - it's how overlapping style ranges currently work and I'm not so sure the first is valid.

from draft-convert.

benbriggs avatar benbriggs commented on May 26, 2024 1

closed via #57 🎉

from draft-convert.

benbriggs avatar benbriggs commented on May 26, 2024 1

Fix is landed in 1.4.6 - thanks so much for your help @liyantang!

from draft-convert.

noahlemen avatar noahlemen commented on May 26, 2024

Should resulting tags overlap, or be close/opened around the intersect?

In the Intersect start example, for example, which of these possibilities would be desired?

  • <div>t<strong>e<a href="http://google.com" target="_blank">s</strong>t test te</a>st</div>
  • <div>t<strong>e</strong><a href="http://google.com" target="_blank"><strong>s</strong>t test te</a>st</div>

For HTML5, either one should be valid. Is there any preference here?

from draft-convert.

liyantang avatar liyantang commented on May 26, 2024

@benbriggs Found a breaking case:

Given that you style text not overlapping to links, and have more that one link in text block, style is left on stack and error is thrown.

Example:

testing testing testing testing testing

Uncaught Error: Character 73: -1 styles left on stack that should no longer be there

Error is thrown in blockInlineStyles: https://github.com/HubSpot/draft-convert/blob/master/src/blockInlineStyles.js#L119

from draft-convert.

benbriggs avatar benbriggs commented on May 26, 2024

Hmm I can't seem to reproduce that @liyantang, can you provide a failing test? Here's one I tried to mimic your example that passes:

    const contentState = buildContentState([
      {
        type: 'unstyled',
        text: 'testing testing testing testing testing',
        styleRanges: [
          {
            style: 'BOLD',
            offset: 8,
            length: 7
          }
        ],
        entityRanges: [
          {
            key: 0,
            offset: 16,
            length: 7
          },
          {
            key: 1,
            offset: 24,
            length: 7
          }
        ]
      }
    ], {
      0: {
        type: 'LINK',
        mutability: 'MUTABLE',
        data: {
          url: 'asdf'
        }
      },
      1: {
        type: 'LINK',
        mutability: 'MUTABLE',
        data: {
          url: 'asdf'
        }
      }
    });

    const html = convertToHTML({
      entityToHTML: (entity, originalText) => {
        if (entity.type === 'LINK') {
          return <a>{originalText}</a>;
        }
      }
    })(contentState);

    expect(html).toBe('<p>testing <strong>testing</strong> <a>testing</a> <a>testing</a> testing</p>');

from draft-convert.

liyantang avatar liyantang commented on May 26, 2024

@benbriggs

Example:

    it('failing test', () => {
      const contentState = buildContentState([
        {
          type: 'unstyled',
          text: 'overlapping test Hello World',
          styleRanges: [
            {
              offset: 0,
              length: 11,
              style: 'BOLD'
            },
            {
              offset: 23,
              length: 5,
              style: 'ITALIC'
            }
          ],
          entityRanges: [
            {
              key: 0,
              offset: 17,
              length: 5,
              prefixLength: '<a href="http://google.com">'.length,
              suffixLength: '</a>'.length
            },
            {
              key: 1,
              offset: 23,
              length: 5,
              prefixLength: '<a href="http://google.com">'.length,
              suffixLength: '</a>'.length
            }
          ],
        },
      ], {
        0: {
          type: 'LINK',
          mutability: 'IMMUTABLE',
          data: {
            href: 'http://google.com',
          }
        },
        1: {
          type: 'LINK',
          mutability: 'IMMUTABLE',
          data: {
            href: 'http://google.com',
          }
        }
      });

      const result = convertToHTML(convertToHTMLProps)(contentState);

      expect(result).toBe('<strong>overlapping</strong> test <a href="http://google.com">Hello</a> <em><a href="http://google.com">World</a></em>');
    });

from draft-convert.

benbriggs avatar benbriggs commented on May 26, 2024

Hmm...that still passes for me as well (after adding wrapping <p> tags and defining convertToHTMLProps). Is your local fork/clone up to date to [email protected]?

from draft-convert.

liyantang avatar liyantang commented on May 26, 2024

I am on the latest of master branch of 1.4.5. I added this test to the existing tests in converToHTML.js and it throws the error for me.

from draft-convert.

benbriggs avatar benbriggs commented on May 26, 2024

Strange! Could you try submitting it as a PR so that the test runs in Travis and we can have an isolated place to verify that it can be fixed? Thanks for digging into this!

from draft-convert.

liyantang avatar liyantang commented on May 26, 2024

#66

https://travis-ci.org/HubSpot/draft-convert/builds/226509786

from draft-convert.

benbriggs avatar benbriggs commented on May 26, 2024

Perfect, thanks! I'll dig into it now.

from draft-convert.

liyantang avatar liyantang commented on May 26, 2024

Great, thanks!

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.