is it possible to support <sup> and <sub> tags using this library? about draft-convert HOT 12 CLOSED

Yes, it should work with this configuration, assuming you have inline styles applied to your Draft ContentState of types SUPERSCRIPT and SUBSCRIPT:

const opts = {
  styleToHTML: (style) => {
    if (style === 'SUPERSCRIPT') {
      return {
        start: '<sup>',
        end: '</sup>'
      };
    }
    if (style === 'SUBSCRIPT') {
      return {
        start: '<sub>',
        end: '</sub>'
      };
    }
  },
  htmlToStyle: (nodeName, node, currentStyle) => {
    if (nodeName === 'sup') {
      return currentStyle.add('SUPERSCRIPT');
    }
    if (nodeName === 'sub') {
      return currentStyle.add('SUBSCRIPT');
    }

    return currentStyle;
  }
}

const fromHTML = convertFromHTML(opts);
const toHTML = convertToHTML(opts);

from draft-convert.

@benbriggs Yes! That was it. Thanks.

from draft-convert.

This is probably a stupid question, but how do I apply inline styles to my Draft ContentState?

from draft-convert.

I'd suggest something similar to the Styling Controls example in the Draft docs to add an inline style to the currently selected text in your editor

from draft-convert.

Hi so I have the convertToHTML working correctly with my inlineStyles and my HTML has the around the desired text.

But when i try to read in the html into another draftjs instance with convertFromHTML I do not see the subscript effect - i believe I am missing something in the styleToHTML.

Do I need to define 'SUPERSCRIPT' somewhere before i currentStyle.add('SUPERSCRIPT');

any advice would be really appreciated!! awesome library!!

from draft-convert.

@tmccar5 you shouldn't need to - as long as you use the same string in styleToHTML, htmlToStyle, and your rendering inline styles, and you use the same config for both convertToHTML and convertFromHTML it should be fine. is that still not working?

from draft-convert.

Okay I am pretty sure I have it set up right, but I don't think the convertFromHTML is working properly for me.

The html I am reading in may be something like '< p >sub test< sub >*< /sub >< p >'
but the is lost when the HTML goes through convertFromHTML

Let me know if you want any code snippets ect. this feature is super critical for my project so i really appreciate it.

Thanks for the speedy response!!

from draft-convert.

@tmccar5 i noticed a couple errors in my example above - there should be a return currentStyle; at the end of the htmlToStyle function and I was missing a few brackets for if blocks - after fixing those i ran your example it through both convertFromHTML and convertToHTML with success. I did also have to remove spaces within the angle brackets from your example input for it to be valid HTML.

from draft-convert.

I'm running into a similar issue. I'm trying to implement the opposite of this exporter function from medium-draft. They have state to html working and I'm trying to go in the other direction.

Here's my htmlToStyle callback. Some of the calls to currentStyle.add are not showing up in currentStyle when I log it as JSON. Specifically I'm not seeing the HIGHLIGHT option.

htmlToStyle: (nodeName, node, currentStyle) => {
      node.className.split(' ').forEach((className) => {
        // DEBUG
        console.log('className:', className);
        switch (className) {
        case `md-inline-${Inline.ITALIC.toLowerCase()}`: {
          currentStyle.add(Inline.ITALIC);
          break;
        }
        case `md-inline-${Inline.BOLD.toLowerCase()}`: {
          currentStyle.add(Inline.BOLD);
          break;
        }
        case `md-inline-${Inline.STRIKETHROUGH.toLowerCase()}`: {
          currentStyle.add(Inline.STRIKETHROUGH);
          break;
        }
        case `md-inline-${Inline.UNDERLINE.toLowerCase()}`: {
          currentStyle.add(Inline.UNDERLINE);
          break;
        }
        case `md-inline-${Inline.HIGHLIGHT.toLowerCase()}`: {
          currentStyle.add(Inline.HIGHLIGHT);
          break;
        }
        case `md-inline-${Inline.CODE.toLowerCase()}`: {
          currentStyle.add(Inline.CODE);
          break;
        }
        }
      });
      // DEBUG
      console.log('currentStyle:', JSON.stringify(currentStyle, null, 4));
      return currentStyle;
    },

from draft-convert.

@akinnee I think your issue might lie with the calls to currentStyle.add in your htmlToStyle function. currentStyle is an immutable OrderedSet, so calling .add() without a reassignment won't mutate the value of currentStyle. Could you try replacing each call with currentStyle = currentStyle.add(...)?

from draft-convert.

Great! Closing this as I think everything seems to be working as it should.

from draft-convert.

so, how to solve this problem? Thank you very much

from draft-convert.