Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support type attribute for <ol> element #117

Merged
merged 10 commits into from
Mar 6, 2020
Merged

Support type attribute for <ol> element #117

merged 10 commits into from
Mar 6, 2020

Conversation

yhatt
Copy link
Owner

@yhatt yhatt commented Mar 3, 2020

HTML5 can use type attribute for <ol> element to change the numbering type.

<ol type="I">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol> 

And now, jsx-slack has supported type attribute to allow alphabetical and roman numbering.

Alphabetical numberingRoman numbering
<Blocks>
  <Section>
    <ol type="a">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
    </ol> 
  </Section>
</Blocks>

<Blocks>
  <Section>
    <ol type="I">
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
    </ol> 
  </Section>
</Blocks>

jsx-slack can render list items as mimicked text, but rendering new numbering types with keeping right-aligned is difficult with a traditional way. So we've updated how to generate spaces for indenting list item: Store the data of measured Slack font width by using Puppeteer, and generate the best indent string consisted of spaces from the width of numbering text.

By this change, the count of spaces for indent may be changed from <= v1.3.0, but would not expect visual regressions in the view of Slack client.

export function intToRoman(num: number): string {
let int = coerceToInteger(num)
if (int === undefined) return num.toString()
if (int <= 0 || int >= 4000) return int.toString()
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Many browsers won't convert number to roman if the number is over than / equal to 4000.
https://jsfiddle.net/ukybLe5m/

@yhatt yhatt merged commit 649d437 into master Mar 6, 2020
@yhatt yhatt deleted the ol-type-attribute branch March 6, 2020 05:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant