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

ADDS: Feature to decenter text in wysiwyg and markdown mode #521

Merged
merged 7 commits into from
Jul 21, 2020
Merged

ADDS: Feature to decenter text in wysiwyg and markdown mode #521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b8179ac
Enables decentering in both modes
Jun 6, 2020
fe19347
changes to the dist folder after build
Jun 6, 2020
e10ca45
jest test
cypherean Jul 2, 2020
664bf5c
comments added
cypherean Jul 6, 2020
8c81b51
required changes and indentation fixes
cypherean Jul 15, 2020
a8dbbfc
changes var to const
cypherean Jul 17, 2020
166fdef
Merge branch 'main' into decenter_feature
jywarren Jul 21, 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
118 changes: 110 additions & 8 deletions dist/PublicLab.Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22892,14 +22892,116 @@ module.exports = function initAutoCenter(_module, wysiwyg) {

$('.wk-commands .woofmark-command-autocenter').click(function() {
wysiwyg.runCommand(function(chunks, mode) {
if (mode == "wysiwyg") { // first convert then replace
chunks.selection = ("->"+chunks.selection+"<-");
var openingTag = /->/g;
var closingTag = /<-/g;
chunks.selection = chunks.selection.replace(openingTag, "<center>");
chunks.selection = chunks.selection.replace(closingTag, "</center>");
} else if (mode == "markdown") {
chunks.selection = _module.wysiwyg.parseHTML("<center>"+chunks.selection+"</center>");
if (mode === "wysiwyg") {
var tag = "center";
var open = '<' + tag;
var close = '</' + tag.replace(/</g, '</');
var rleading = new RegExp(open + '( [^>]*)?>$', 'i');
var rtrailing = new RegExp('^' + close + '>', 'i');
var ropen = new RegExp(open + '( [^>]*)?>', 'ig');
var rclose = new RegExp(close + '( [^>]*)?>', 'ig');
chunks.trim();
// searches if selected text is center aligned and left aligns it
var trail = rtrailing.exec(chunks.before);
var lead = rleading.exec(chunks.after);
if (lead && trail) {
chunks.before = chunks.before.replace(rleading, '');
chunks.after = chunks.after.replace(rtrailing, '');
} else {
// searches if center tag is opened in selected text
var opened = ropen.test(chunks.selection);
if (opened) {
chunks.selection = chunks.selection.replace(ropen, '');
if (!surrounded(chunks, tag)) {
chunks.before += open + '>';
}
}
// searches if center tag is closed in selected text
var closed = rclose.test(chunks.selection);
if (closed) {
chunks.selection = chunks.selection.replace(rclose, '');
if (!surrounded(chunks, tag)) {
chunks.after = close + '>' + chunks.after;
}
}
if (surrounded(chunks, tag)) {
if (rleading.test(chunks.before)) {
chunks.before = chunks.before.replace(rleading, '');
} else {
chunks.before += close + '>';
}
if (rtrailing.test(chunks.after)) {
chunks.after = chunks.after.replace(rtrailing, '');
} else {
chunks.after = open + '>' + chunks.after;
}
} else if (!closebounded(chunks, tag)) {
chunks.after = close + '>' + chunks.after;
chunks.before += open + '>';
}
}

function closebounded(chunks, tag) {
var rcloseleft = new RegExp('</' + tag.replace(/</g, '</') + '>$', 'i');
var ropenright = new RegExp('^<' + tag + '(?: [^>]*)?>', 'i');
var bounded = rcloseleft.test(chunks.before) && ropenright.test(chunks.after);
if (bounded) {
chunks.before = chunks.before.replace(rcloseleft, '');
chunks.after = chunks.after.replace(ropenright, '');
}
return bounded;
}

function surrounded(chunks, tag) {
var ropen = new RegExp('<' + tag + '(?: [^>]*)?>', 'ig');
var rclose = new RegExp('<\/' + tag.replace(/</g, '</') + '>', 'ig');
var opensBefore = count(chunks.before, ropen);
var opensAfter = count(chunks.after, ropen);
var closesBefore = count(chunks.before, rclose);
var closesAfter = count(chunks.after, rclose);
var open = opensBefore - closesBefore > 0;
var close = closesAfter - opensAfter > 0;
return open && close;
}

function count(text, regex) {
var match = text.match(regex);
if (match) {
return match.length;
}
return 0;
}
} else if (mode === "markdown") {
var open = '->';
var close = '<-';
var rleading = new RegExp(open + '( [^>]*)?', 'i');
var rtrailing = new RegExp('^' + close, 'i');
var ropen = new RegExp(open + '( [^>]*)?', 'ig');
var rclose = new RegExp(close + '( [^>]*)?', 'ig');
chunks.trim();
var trail = rleading.exec(chunks.before);
var lead = rtrailing.exec(chunks.after);

if (trail && lead) {
chunks.before = chunks.before.replace(rleading, '');
chunks.after = chunks.after.replace(rtrailing, '');
} else {
var opened = ropen.test(chunks.selection);
var closed = rclose.test(chunks.selection);
if (opened || closed) {
if (opened) {
chunks.selection = chunks.selection.replace(ropen, '');
chunks.before += open;
}
if (closed) {
chunks.selection = chunks.selection.replace(rclose, '');
chunks.after = close + chunks.after;
}
} else {
// adds center tag and parses into markdown
chunks.selection = _module.wysiwyg.parseHTML("<center>" + chunks.selection + "</center>");
}
}
}

_module.afterParse();
Expand Down
118 changes: 110 additions & 8 deletions src/modules/PublicLab.RichTextModule.AutoCenter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,116 @@ module.exports = function initAutoCenter(_module, wysiwyg) {

$('.wk-commands .woofmark-command-autocenter').click(function() {
wysiwyg.runCommand(function(chunks, mode) {
if (mode == "wysiwyg") { // first convert then replace
chunks.selection = ("->"+chunks.selection+"<-");
var openingTag = /->/g;
var closingTag = /<-/g;
chunks.selection = chunks.selection.replace(openingTag, "<center>");
chunks.selection = chunks.selection.replace(closingTag, "</center>");
} else if (mode == "markdown") {
chunks.selection = _module.wysiwyg.parseHTML("<center>"+chunks.selection+"</center>");
if (mode === "wysiwyg") {
const tag = "center";
const open = '<' + tag;
const close = '</' + tag.replace(/</g, '</');
const rleading = new RegExp(open + '( [^>]*)?>$', 'i');
const rtrailing = new RegExp('^' + close + '>', 'i');
const ropen = new RegExp(open + '( [^>]*)?>', 'ig');
const rclose = new RegExp(close + '( [^>]*)?>', 'ig');
chunks.trim();
// searches if selected text is center aligned and left aligns it
const trail = rtrailing.exec(chunks.before);
const lead = rleading.exec(chunks.after);
if (lead && trail) {
chunks.before = chunks.before.replace(rleading, '');
chunks.after = chunks.after.replace(rtrailing, '');
} else {
// searches if center tag is opened in selected text
const opened = ropen.test(chunks.selection);
if (opened) {
chunks.selection = chunks.selection.replace(ropen, '');
if (!surrounded(chunks, tag)) {
chunks.before += open + '>';
}
}
// searches if center tag is closed in selected text
const closed = rclose.test(chunks.selection);
if (closed) {
chunks.selection = chunks.selection.replace(rclose, '');
if (!surrounded(chunks, tag)) {
chunks.after = close + '>' + chunks.after;
}
}
if (surrounded(chunks, tag)) {
if (rleading.test(chunks.before)) {
chunks.before = chunks.before.replace(rleading, '');
} else {
chunks.before += close + '>';
}
if (rtrailing.test(chunks.after)) {
chunks.after = chunks.after.replace(rtrailing, '');
} else {
chunks.after = open + '>' + chunks.after;
}
} else if (!closebounded(chunks, tag)) {
chunks.after = close + '>' + chunks.after;
chunks.before += open + '>';
}
}

function closebounded(chunks, tag) {
const rcloseleft = new RegExp('</' + tag.replace(/</g, '</') + '>$', 'i');
const ropenright = new RegExp('^<' + tag + '(?: [^>]*)?>', 'i');
const bounded = rcloseleft.test(chunks.before) && ropenright.test(chunks.after);
if (bounded) {
chunks.before = chunks.before.replace(rcloseleft, '');
chunks.after = chunks.after.replace(ropenright, '');
}
return bounded;
}

function surrounded(chunks, tag) {
const ropen = new RegExp('<' + tag + '(?: [^>]*)?>', 'ig');
const rclose = new RegExp('<\/' + tag.replace(/</g, '</') + '>', 'ig');
const opensBefore = count(chunks.before, ropen);
const opensAfter = count(chunks.after, ropen);
const closesBefore = count(chunks.before, rclose);
const closesAfter = count(chunks.after, rclose);
const open = opensBefore - closesBefore > 0;
const close = closesAfter - opensAfter > 0;
return open && close;
}

function count(text, regex) {
const match = text.match(regex);
if (match) {
return match.length;
}
return 0;
}
} else if (mode === "markdown") {
const open = '->';
const close = '<-';
const rleading = new RegExp(open + '( [^>]*)?', 'i');
const rtrailing = new RegExp('^' + close, 'i');
const ropen = new RegExp(open + '( [^>]*)?', 'ig');
const rclose = new RegExp(close + '( [^>]*)?', 'ig');
chunks.trim();
const trail = rleading.exec(chunks.before);
const lead = rtrailing.exec(chunks.after);

if (trail && lead) {
chunks.before = chunks.before.replace(rleading, '');
chunks.after = chunks.after.replace(rtrailing, '');
} else {
const opened = ropen.test(chunks.selection);
const closed = rclose.test(chunks.selection);
if (opened || closed) {
if (opened) {
chunks.selection = chunks.selection.replace(ropen, '');
chunks.before += open;
}
if (closed) {
chunks.selection = chunks.selection.replace(rclose, '');
chunks.after = close + chunks.after;
}
} else {
// adds center tag and parses into markdown
chunks.selection = _module.wysiwyg.parseHTML("<center>" + chunks.selection + "</center>");
}
}
}

_module.afterParse();
Expand Down
32 changes: 32 additions & 0 deletions test/ui-testing/center.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
const timeout = process.env.SLOWMO ? 60000 : 10000;
const fs = require('fs');
beforeAll(async () => {
path = fs.realpathSync('file://../examples/index.html');
await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});
});

describe('Center Text', () => {
test('Centering and decentering text', async () => {
// selects a string from textarea in md mode
await page.setViewport({width: 1920, height: 1080});
await page.waitForSelector('.ple-module-body');
await page.click('.woofmark-mode-markdown');
await page.focus('.ple-textarea');

// center aligns the string and checks for presence of '->' and '<-'
await page.click('.woofmark-command-autocenter');
let opening = await page.evaluate(() => document.querySelector('.ple-textarea').value.includes('->'));
let closing = await page.evaluate(() => document.querySelector('.ple-textarea').value.includes('<-'));
expect(opening).toBe(true);
expect(closing).toBe(true);

// the selection changes from '-> some text <-' to ->'some text'<-
await page.click('.woofmark-command-autocenter');
// clicking again removes the center alignment and tests for absence of '->' and '<-'
await page.click('.woofmark-command-autocenter');
opening = await page.evaluate(() => document.querySelector('.ple-textarea').value.includes('->'));
closing = await page.evaluate(() => document.querySelector('.ple-textarea').value.includes('<-'));
expect(opening).toBe(false);
expect(closing).toBe(false);
}, timeout);
});