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.

Sign up for GitHub

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

Jump to bottom

fix bold texts loosing formatting after converting to markdown and back to wysiwyg #15

Merged
merged 5 commits into from
Jul 21, 2020
Merged

fix bold texts loosing formatting after converting to markdown and back to wysiwyg #15

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3c87cfe
fix bold texts loosing formatting
Shulammite-Aso Jul 16, 2020
04ae4ab
add test for bold formatting
Shulammite-Aso Jul 16, 2020
028ce5f
remove unrelated test
Shulammite-Aso Jul 17, 2020
e9e9fed
fix emphasized texts loosing formatting
Shulammite-Aso Jul 19, 2020
b60f8a5
remove test.html file
Shulammite-Aso Jul 20, 2020
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
16 changes: 15 additions & 1 deletion src/woofmark.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,21 @@ function woofmark (textarea, options) {
if (currentMode === 'html') {
textarea.value = parse('parseHTML', textarea.value).trim();
} else {
textarea.value = parse('parseHTML', editable).trim();
var regexp = /\*\*[A-Z][^*]+ \*\*/gi;
Shulammite-Aso marked this conversation as resolved.
Show resolved Hide resolved
Copy link

Choose a reason for hiding this comment

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

Can we have a better name for this regex? Instead of using regex and regex2 as variable name, can we have a separate utils file where each regex is defined (can be done in a separate PR)

Copy link
Author

Choose a reason for hiding this comment

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

was intending to comment the code, and will think of something more suitable to rename the variable with like your're suggesting. About a utils file, do you mean putting this code in a function and importing from a utils file?

Copy link

Choose a reason for hiding this comment

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

Yes only this regex line but it can be done later. No worries 👍

textarea.value = parse('parseHTML', editable).trim();
if (textarea.value.match(regexp)) {
var reg = textarea.value.match(regexp);

for (let i = 0; i <= reg.length - 1; i++) {
var regexp2 = /\*\*[A-Z][^*]+ \*\*/i;
Copy link

Choose a reason for hiding this comment

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

we are re declarating this regex on each for iteration.

Copy link
Author

Choose a reason for hiding this comment

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

regexp2 should go outside the iteration sorry. will fix this.

if (textarea.value.match(regexp2)) {
reg[i] = reg[i].replace(' **', '** ')
textarea.value = textarea.value.replace(regexp2, reg[i])
//console.log(textarea.value);
}
}
}

}
} else if (nextMode === 'html') {
if (currentMode === 'markdown') {
Expand Down
33 changes: 33 additions & 0 deletions test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!doctype html>
<link href='dist/woofmark.css' rel='stylesheet' type='text/css' />
<link href='example/example.css' rel='stylesheet' type='text/css' />
<link href='example/highlights.css' rel='stylesheet' type='text/css' />
<title>woofmark</title>
<h1>woofmark</h1>
<h3>Barking up the DOM tree. <b>**woof** &lt;strong&gt;woof&lt;/strong&gt;</b><br/>A modular, progressive, and beautiful Markdown and HTML editor</h3>
<a href='https://github.com/bevacqua/woofmark'>
<img class='gh-fork' src='https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png' />
</a>
<div class='parent'>
<label for='ta'>Create your website in the area below: </label>
<div>
<textarea id='ta', autofocus>

</textarea>
</div>
<pre>
<code>
woofmark(document.querySelector('#ta'), {
parseMarkdown: megamark,
parseHTML: domador
});
</code>
</pre>
<sub><strong>Disclaimer:</strong> the example has a teensie bit more of code that's used to preserve the GitHub-style <kbd>```</kbd> code fences.</sub>
</div>
<div class='parent'>
<label>The buttons above look kind of rough, but that's on purpose: it's up to you to style them and the API helps you do that. Here's another example using Font Awesome.</label>
<img src='http://i.imgur.com/AhwXSLu.png' />
</div>
<h3>Get it on GitHub! <a href='https://github.com/bevacqua/woofmark'>bevacqua/woofmark</a></h3>
<script src='dist/example.js'></script>
56 changes: 56 additions & 0 deletions test/ui-tests/bold-module.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
const timeout = process.env.SLOWMO ? 130000 : 40000;
const fs = require('fs');
beforeAll(async () => {
path = fs.realpathSync('file://../test.html');
await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});
});

describe('bold module work as expected', () => {
test('retains bold selection state (on/off) after using new line', async () => {
await page.waitForSelector('.wk-wysiwyg');
await page.keyboard.type(' not using bold ', {delay: 160});
await page.keyboard.down('Control');
await page.keyboard.press('KeyB');
await page.keyboard.up('Control');
await page.keyboard.type('using bold ', {delay: 160});
await page.keyboard.down('Control');
await page.keyboard.press('KeyB');
await page.keyboard.up('Control');
await page.keyboard.press('Enter');
await page.keyboard.type('using new line', {delay: 160});



const stringIsIncluded = await page.evaluate(() => document.querySelector('.wk-wysiwyg').innerHTML.includes('<strong>using new line</strong>'));
expect(stringIsIncluded).toBe(false);


}, timeout);

test('bold text does not loose formatting after converting to markdown and back to rich', async () => {
await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});
await page.waitForSelector('.wk-wysiwyg');
await page.keyboard.type(' not using bold ', {delay: 160});
await page.keyboard.down('Control');
await page.keyboard.press('KeyB');
await page.keyboard.up('Control');
await page.keyboard.type('using bold ', {delay: 160});
await page.keyboard.down('Control');
await page.keyboard.press('KeyB');
await page.keyboard.up('Control');
await page.keyboard.type('using new line', {delay: 160});
Shulammite-Aso marked this conversation as resolved.
Show resolved Hide resolved

await page.keyboard.down('Control');
await page.keyboard.press('KeyM');
await page.keyboard.up('Control');
await page.keyboard.type('writing in markdown mode', {delay: 160});
await page.keyboard.down('Control');
await page.keyboard.press('KeyP');
await page.keyboard.up('Control');
await page.keyboard.type('back writing in wysiwyg mode', {delay: 160});

const stringIsIncluded = await page.evaluate(() => document.querySelector('.wk-wysiwyg').innerHTML.includes('**using bold **'));
expect(stringIsIncluded).toBe(false);

}, timeout);
});