question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

is it possible to support <sup> and <sub> tags using this library?

See original GitHub issue

Since Draft.js only supports bold, italics, underline, code, and strikethrough natively, I’ve been trying to add subcript and superscript as well.

This seems like what I’m looking for, but so far I haven’t gotten things to work.

This is what <sub>subscript</sub> and <sup>superscript</sup> tags look like

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:12

github_iconTop GitHub Comments

2reactions
benbriggscommented, Feb 10, 2017

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);
1reaction
akinneecommented, Feb 27, 2017

@benbriggs Yes! That was it. Thanks.

Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML | Subscript and Superscript Tags - GeeksforGeeks
The <sup> tag defines the superscript text. Superscript text appears half a character above the normal line and is sometimes rendered in a ......
Read more >
Html formatting - add support for <sup> and <sub> tags
Hi, Please implement support for <sup> and <sub> tags in your simple Html engine. These tags are very helpful when we need to...
Read more >
<sup>: The Superscript element - HTML - MDN Web Docs
The <sup> HTML element specifies inline text which is to be displayed as superscript for solely typographical reasons.
Read more >
7.5. Superscript, Subscript, Big, and Small Text - O'Reilly
Superscript, Subscript, Big, and Small Text. The superscript (<sup>) and subscript (<sub>) tags can be used to specify superscript and subscript text.
Read more >
lightning-formatted-rich-text - Salesforce Developers
Displays rich text that's formatted with allowed tags and attributes. Other tags and attributes are removed and only their text content is displayed....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found