discourse/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-09 14:34:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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) {
// original string `![image|690x220, 50%](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title")`
// group 1 `image`
// original string `![image|foo=bar|690x220, 50%|bar=baz](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title")`
// group 1 `image|foo=bar`
// group 2 `690x220`
// group 3 `, 50%`
// group 4 'upload://1TjaobgKObzpU7xRMw2HuUc87vO.png'
// group 4 'upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title"'
// group 4 '|bar=baz'
// group 5 'upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title"'
// Notes:
// 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.
// 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 => {
const index = parseInt(
$(e.target)
@ -821,7 +820,7 @@ export default Component.extend({
const replacement = match.replace(
imageScaleRegex,
`![$1|$2, ${scale}%]($4)`
`![$1|$2, ${scale}%$4]($5)`
);
this.appEvents.trigger(

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

@ -15,10 +15,15 @@ function buildToken(state, type, tag, klass, nesting) {
function wrapImage(tokens, index, state, imgNumber) {
const imgToken = tokens[index];
let selectedScale = imgToken.content
.split(",")
.pop()
.trim();
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(",")
.pop()
.trim();
tokens.splice(
index,
0,

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
`![image|690x220](upload://test.png "image title")`,
// 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"));
assert.ok(
find(".button-wrapper").length === 9,
find(".button-wrapper").length === 10,
"it adds correct amount of scaling button groups"
);
@ -820,6 +822,13 @@ QUnit.test("Image resizing buttons", async assert => {
);
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(
".d-editor-input",
`