Skip to content

Support formatting of alert boxes #18

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

Merged
merged 4 commits into from
Jan 30, 2025
Merged

Support formatting of alert boxes #18

merged 4 commits into from
Jan 30, 2025

Conversation

PrajwolAmatya
Copy link
Collaborator

@PrajwolAmatya PrajwolAmatya commented Jan 22, 2025

Description

This PR adds the functionality to support the formatting of alert boxes in the presentation slides.

Screenshot

Input markdown content

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

Rendered output:

image

Related WP

https://community.openproject.org/projects/revealjs/work_packages/60582/activity

@@ -700,6 +701,62 @@ const plugin = () => {
throw error
}
},

renderMarkdownAlerts: function (content) {
const alertRegex = /> \[!(\w+)]\s*(.*)/gm
Copy link
Collaborator

Choose a reason for hiding this comment

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

I think this regex will NOT catch these inputs, which GitHub is happily working with:

multi line

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
> an other line

multiple spaces after >

>    [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

But it will catch these inputs, that GitHub does not use as alert boxes:

invalid type

> [!something]
> Advises about risks or negative outcomes of certain actions.

empty line between type and text

> [!CAUTION]

> Advises about risks or negative outcomes of certain actions.

double >

>> [!CAUTION]
>> Advises about risks or negative outcomes of certain actions.

missing new line

> [!CAUTION] Advises about risks or negative outcomes of certain actions.

I think we need tests here to make sure all those and other cases work correctly


if (match) {
const type = match[1].toLowerCase()
const message = match[2].replace(/^>\s*/, '').trim()
Copy link
Collaborator

Choose a reason for hiding this comment

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

what about ?

> [!CAUTION]
        > Advises about risks or negative outcomes of certain actions.

Is that a valid input? At least for GitHub it is. But I think the replace will not catch it

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Caution

> Advises about risks or negative outcomes of certain actions.

It looks like github only removes > if only it is in the beginning of the line.


const alertIcon = document.createElement('span')
alertIcon.classList.add('alert-icon')
alertIcon.innerHTML = alertIcons[type]
Copy link
Collaborator

Choose a reason for hiding this comment

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

what if alertIcons does not have an item with the type?
You could have a check here, then the regex does not need to contain all types. Or you construct a complicated regex dynamically.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

In that case, i have updated the code and it will be a normal block quote.

@PrajwolAmatya PrajwolAmatya force-pushed the support-alerts branch 3 times, most recently from 4b5b1a7 to 7987abc Compare January 30, 2025 04:02
@PrajwolAmatya PrajwolAmatya merged commit ef01d17 into main Jan 30, 2025
3 checks passed
@PrajwolAmatya PrajwolAmatya deleted the support-alerts branch January 30, 2025 09:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants