Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Make image resize controls more resilient (#8867) 

Commit aa24be1 made it possible to build data attributes from image's
Markdown and this changes ensure that the resize controls still work
when data attributes are present.
This commit is contained in:
Dan Ungureanu 2020-02-06 17:19:24 +02:00 committed by GitHub
parent 1183f8df52
commit 2a884e25be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/javascripts/discourse/components/composer-editor.js.es6
View File

@ -787,19 +787,18 @@ export default Component.extend({
}, },
_registerImageScaleButtonClick($preview) { _registerImageScaleButtonClick($preview) {
// original string `![image|690x220, 50%](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title")` // original string `![image|foo=bar|690x220, 50%|bar=baz](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title")`
// group 1 `image` // group 1 `image|foo=bar`
// group 2 `690x220` // group 2 `690x220`
// group 3 `, 50%` // group 3 `, 50%`
// group 4 'upload://1TjaobgKObzpU7xRMw2HuUc87vO.png' // group 4 '|bar=baz'
// group 4 'upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title"' // group 5 'upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title"'
// Notes: // Notes:
// Group 3 is optional. group 4 can match images with or without a markdown title. // Group 3 is optional. group 4 can match images with or without a markdown title.
// All matches are whitespace tolerant as long it's still valid markdown. // All matches are whitespace tolerant as long it's still valid markdown.
// If the image is inside a code block, we'll ignore it `(?!(.*`))`. // If the image is inside a code block, we'll ignore it `(?!(.*`))`.
const imageScaleRegex = /!\[(.*?)\|(\d{1,4}x\d{1,4})(,\s*\d{1,3}%)?\]\((upload:\/\/.*?)\)(?!(.*`))/g; const imageScaleRegex = /!\[(.*?)\|(\d{1,4}x\d{1,4})(,\s*\d{1,3}%)?(.*?)\]\((upload:\/\/.*?)\)(?!(.*`))/g;
$preview.off("click", ".scale-btn").on("click", ".scale-btn", e => { $preview.off("click", ".scale-btn").on("click", ".scale-btn", e => {
const index = parseInt( const index = parseInt(
$(e.target) $(e.target)
@ -821,7 +820,7 @@ export default Component.extend({
const replacement = match.replace( const replacement = match.replace(
imageScaleRegex, imageScaleRegex,
`![$1|$2, ${scale}%]($4)` `![$1|$2, ${scale}%$4]($5)`
); );
this.appEvents.trigger( this.appEvents.trigger(

7
app/assets/javascripts/pretty-text/engines/discourse-markdown/resize-controls.js.es6
View File

@ -15,7 +15,12 @@ function buildToken(state, type, tag, klass, nesting) {
function wrapImage(tokens, index, state, imgNumber) { function wrapImage(tokens, index, state, imgNumber) {
const imgToken = tokens[index]; const imgToken = tokens[index];
let selectedScale = imgToken.content const sizePart = imgToken.content
.split("|")
.find(x => x.match(/\d{1,4}x\d{1,4}(,\s*\d{1,3}%)?/));
let selectedScale =
sizePart &&
sizePart
.split(",") .split(",")
.pop() .pop()
.trim(); .trim();

13
test/javascripts/acceptance/composer-test.js.es6
View File

@ -766,13 +766,15 @@ QUnit.test("Image resizing buttons", async assert => {
// 10 Image with markdown title - should work // 10 Image with markdown title - should work
`![image|690x220](upload://test.png "image title")`, `![image|690x220](upload://test.png "image title")`,
// 11 bbcode - should not work // 11 bbcode - should not work
"[img]http://example.com/image.jpg[/img]" "[img]http://example.com/image.jpg[/img]",
// 12 Image with data attributes
"![test|foo=bar|690x313,50%|bar=baz](upload://test.png)"
]; ];
await fillIn(".d-editor-input", uploads.join("\n")); await fillIn(".d-editor-input", uploads.join("\n"));
assert.ok( assert.ok(
find(".button-wrapper").length === 9, find(".button-wrapper").length === 10,
"it adds correct amount of scaling button groups" "it adds correct amount of scaling button groups"
); );
@ -820,6 +822,13 @@ QUnit.test("Image resizing buttons", async assert => {
); );
assertImageResized(assert, uploads); assertImageResized(assert, uploads);
// Keep data attributes
uploads[12] = `![test|foo=bar|690x313, 75%|bar=baz](upload://test.png)`;
await click(
find(".button-wrapper[data-image-index='9'] .scale-btn[data-scale='75']")
);
assertImageResized(assert, uploads);
await fillIn( await fillIn(
".d-editor-input", ".d-editor-input",
` `