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

make spliting of blocks for any markdown content #19

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions plugin/awesoMD/awesoMD.esm.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions plugin/awesoMD/awesoMD.js

Large diffs are not rendered by default.

88 changes: 63 additions & 25 deletions plugin/awesoMD/plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const headingWithMetadataRegex = /^#+\s.*::\w+: *\w+.*$/m
const metadataRegex = /::(\w+):([^::\n]*)/g
const alertBlockRegex = /^\r*>\s*(\[!(\w+)\]).*\n(\s*\s*>.*\n?)*/gm
const alertTypeRegex = /^\r*>*\s*(\[!(\w+)\])/gm
const alertMessageRegex = /\r*>\s*[\w].*/gm
const alertMessageRegex = /^\r*>\s*[\w].*/gm
const alertRegex = /^\r*>.*$/gm
const regexToGetAlertType = /\[!(\w+)\]/

Expand Down Expand Up @@ -723,47 +723,85 @@ const plugin = () => {
const lines = content.split(/\r?\n/)
const blocks = []
let currentBlock = []
let inAlertBlock = false
let inCodeBlock = false
let inListBlock = false

lines.forEach((line) => {
const trimmedLine = line.trim()

// if empty line, reset
if (!trimmedLine) {
if (currentBlock.length > 0) {
// Check for code block
if (/^```/.test(trimmedLine)) {
if (!inCodeBlock) {
// Start of code block
blocks.push(currentBlock.join('\n'))
currentBlock = [line]
inCodeBlock = true
} else {
// Ending of code block
currentBlock.push(line)
blocks.push(currentBlock.join('\n'))

// Reset code block
currentBlock = []
inAlertBlock = false
inCodeBlock = false
}
return
} else if (inCodeBlock) {
// Inside of code block
currentBlock.push(line)
return
}

// check for start of alert block
// Check for alert blocks
if (/^>+\s*\[!/.test(trimmedLine)) {
if (currentBlock.length > 0) {
blocks.push(currentBlock.join('\n'))
}
blocks.push(currentBlock.join('\n'))
currentBlock = [line]
inAlertBlock = true
}
// if line starts with '>' or is next line of the same block
else if (trimmedLine.startsWith('>')) {
return
} else if (trimmedLine.startsWith('>')) {
currentBlock.push(line)
inAlertBlock = true
return
}
// if line is a normal line and is part of the same block
else if (inAlertBlock && trimmedLine) {

// Check for lists
if (/^[-*]\s+/.test(trimmedLine) || /^\d+\.\s+/.test(trimmedLine)) {
if (!inListBlock) {
// Start of lists
blocks.push(currentBlock.join('\n'))
currentBlock = []
inListBlock = true
}
// Keep adding the list to currentBlock
currentBlock.push(line)
return
} else if (inListBlock) {
// Reset the currentBlock after list is added to blocks
blocks.push(currentBlock.join('\n'))
currentBlock = []
inListBlock = false
}

// Check for images
if (/^!\[.*\]\(.*\)/.test(trimmedLine)) {
blocks.push(currentBlock.join('\n'))
blocks.push(trimmedLine)
currentBlock = []
return
}
// for normal text block
else {

// Handle empty lines
if (!trimmedLine) {
if (currentBlock.length > 0) {
blocks.push(currentBlock.join('\n'))
currentBlock = []
inAlertBlock = false
}
blocks.push(line)
currentBlock = []
inListBlock = false
return
}

// Check for plain text content
blocks.push(currentBlock.join('\n'))
currentBlock = []
blocks.push(line)
})

if (currentBlock.length > 0) {
Expand Down Expand Up @@ -881,9 +919,9 @@ const plugin = () => {
this.styleBlockquotes(alertDiv)
alertsContainer.appendChild(alertDiv)
} else {
const plainContent = document.createElement('p')
plainContent.textContent = block
alertsContainer.appendChild(plainContent)
alertsContainer.appendChild(document.createTextNode('\n\n'))
const textNode = document.createTextNode(block)
alertsContainer.appendChild(textNode)
}
}
return alertsContainer.innerHTML
Expand Down
49 changes: 48 additions & 1 deletion tests/unit/jest/extractMetadata.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -287,29 +287,34 @@ describe('renderMarkdownAlerts', () => {
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.`

const expectedRenderedMarkdowAlerts = `<div class="alert caution">
const expectedRenderedMarkdowAlerts = `
<div class="alert caution">
<div class="alert-title"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path>
</svg> Caution</div>
<blockquote>Advises about risks or negative outcomes of certain actions.</blockquote>
</div>

<div class="alert caution">
<div class="alert-title"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path>
</svg> Caution</div>
<blockquote>Advises about risks or negative outcomes of certain actions.</blockquote>
<blockquote>an other line</blockquote>
</div>

<div class="alert caution">
<div class="alert-title"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path>
</svg> Caution</div>
<blockquote>Advises about risks or negative outcomes of certain actions.</blockquote>
</div>

<div class="alert">
<blockquote>[!something]</blockquote>
<blockquote>Advises about risks or negative outcomes of certain actions.</blockquote>
</div>

<div class="alert">
<blockquote>
<p>[!CAUTION]</p>
Expand All @@ -320,18 +325,21 @@ describe('renderMarkdownAlerts', () => {
<p>Advises about risks or negative outcomes of certain actions.</p>
</blockquote>
</div>

<div class="alert" style="--padding-top: 0px; --padding-bottom: 0px;">
<blockquote style="padding-top: 0px; padding-bottom: 0px; border: 0px solid; border-left-width: 6px;">
<blockquote>
<p>[!CAUTION]<br>Advises about risks or negative outcomes of certain actions.</p>
</blockquote>
</blockquote>
</div>

<div class="alert">
<blockquote>
<p>[!CAUTION] Advises about risks or negative outcomes of certain actions.</p>
</blockquote>
</div>

<div class="alert caution">
<div class="alert-title"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path>
Expand All @@ -344,3 +352,42 @@ describe('renderMarkdownAlerts', () => {
expect(beautify(returnedRenderedMarkdownAlerts)).toBe(beautify(expectedRenderedMarkdowAlerts))
})
})

describe('splitSlideContentIntoBlocks', () => {
const markdownContent = `> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

\`\`\`js
console.log('hello')
console.log('world')
\`\`\`

some content

![img alt](https://picsum.photos/100/100)

- hello
- world

1. hello
2. world`

const expectedSplitedMarkdownContent = [
'',
'> [!CAUTION]\n' + '> Advises about risks or negative outcomes of certain actions.',
'',
"```js\nconsole.log('hello')\nconsole.log('world')\n```",
'',
'some content',
'',
'![img alt](https://picsum.photos/100/100)',
'',
'- hello\n- world',
'',
'1. hello\n2. world',
]
it('should split content of slide into different blocks', () => {
const splitedMarkdownContent = mdPlugin.splitSlideContentIntoBlocks(markdownContent)
expect(splitedMarkdownContent).toEqual(expectedSplitedMarkdownContent)
})
})