mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-22 16:18:08 +02:00
XFA - Convert some template properties into CSS ones (#13082)
- implement few positioning properties: position, width, height, anchor; - implement font element; - implement fill element (used by font) and its children (linear, radial, ...); - font property is inherited from ancestor container (see https://www.pdfa.org/wp-content/uploads/2020/07/XFA-3_3.pdf#page=43) so let CSS handles that stuff; - in order to reduce the number of properties to set, only set non default properties and put the default in CSS; - set a background to some containers to be able to see them (will be removed in a future commit).
This commit is contained in:
parent
9d0ce6e79f
commit
63471bcbbe
10 changed files with 549 additions and 93 deletions
|
@ -13,57 +13,108 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
const converters = {
|
||||
pt: x => x,
|
||||
cm: x => Math.round((x / 2.54) * 72),
|
||||
mm: x => Math.round((x / (10 * 2.54)) * 72),
|
||||
in: x => Math.round(x * 72),
|
||||
};
|
||||
import { $toStyle, XFAObject } from "./xfa_object.js";
|
||||
import { warn } from "../../shared/util.js";
|
||||
|
||||
function measureToString(m) {
|
||||
const conv = converters[m.unit];
|
||||
if (conv) {
|
||||
return `${conv(m.value)}px`;
|
||||
}
|
||||
return `${m.value}${m.unit}`;
|
||||
return Number.isInteger(m) ? `${m}px` : `${m.toFixed(2)}px`;
|
||||
}
|
||||
|
||||
function setWidthHeight(node, style) {
|
||||
if (node.w) {
|
||||
style.width = measureToString(node.w);
|
||||
} else {
|
||||
if (node.maxW && node.maxW.value > 0) {
|
||||
style.maxWidth = measureToString(node.maxW);
|
||||
const converters = {
|
||||
anchorType(node, style) {
|
||||
if (!("transform" in style)) {
|
||||
style.transform = "";
|
||||
}
|
||||
if (node.minW && node.minW.value > 0) {
|
||||
style.minWidth = measureToString(node.minW);
|
||||
switch (node.anchorType) {
|
||||
case "bottomCenter":
|
||||
style.transform += "translate(-50%, -100%)";
|
||||
break;
|
||||
case "bottomLeft":
|
||||
style.transform += "translate(0,-100%)";
|
||||
break;
|
||||
case "bottomRight":
|
||||
style.transform += "translate(-100%,-100%)";
|
||||
break;
|
||||
case "middleCenter":
|
||||
style.transform += "translate(-50%,-50%)";
|
||||
break;
|
||||
case "middleLeft":
|
||||
style.transform += "translate(0,-50%)";
|
||||
break;
|
||||
case "middleRight":
|
||||
style.transform += "translate(-100%,-50%)";
|
||||
break;
|
||||
case "topCenter":
|
||||
style.transform += "translate(-50%,0)";
|
||||
break;
|
||||
case "topRight":
|
||||
style.transform += "translate(-100%,0)";
|
||||
break;
|
||||
}
|
||||
},
|
||||
dimensions(node, style) {
|
||||
if (node.w) {
|
||||
style.width = measureToString(node.w);
|
||||
} else {
|
||||
if (node.maxW && node.maxW.value > 0) {
|
||||
style.maxWidth = measureToString(node.maxW);
|
||||
}
|
||||
if (node.minW && node.minW.value > 0) {
|
||||
style.minWidth = measureToString(node.minW);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (node.h) {
|
||||
style.height = measureToString(node.h);
|
||||
} else {
|
||||
if (node.maxH && node.maxH.value > 0) {
|
||||
style.maxHeight = measureToString(node.maxH);
|
||||
if (node.h) {
|
||||
style.height = measureToString(node.h);
|
||||
} else {
|
||||
if (node.maxH && node.maxH.value > 0) {
|
||||
style.maxHeight = measureToString(node.maxH);
|
||||
}
|
||||
if (node.minH && node.minH.value > 0) {
|
||||
style.minHeight = measureToString(node.minH);
|
||||
}
|
||||
}
|
||||
if (node.minH && node.minH.value > 0) {
|
||||
style.minHeight = measureToString(node.minH);
|
||||
},
|
||||
position(node, style) {
|
||||
if (node.x !== "" || node.y !== "") {
|
||||
style.position = "absolute";
|
||||
style.left = measureToString(node.x);
|
||||
style.top = measureToString(node.y);
|
||||
}
|
||||
},
|
||||
rotate(node, style) {
|
||||
if (node.rotate) {
|
||||
if (!("transform" in style)) {
|
||||
style.transform = "";
|
||||
}
|
||||
style.transform += `rotate(-${node.rotate}deg)`;
|
||||
style.transformOrigin = "top left";
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
function toStyle(node, ...names) {
|
||||
const style = Object.create(null);
|
||||
for (const name of names) {
|
||||
const value = node[name];
|
||||
if (value === null) {
|
||||
continue;
|
||||
}
|
||||
if (value instanceof XFAObject) {
|
||||
const newStyle = value[$toStyle]();
|
||||
if (newStyle) {
|
||||
Object.assign(style, newStyle);
|
||||
} else {
|
||||
warn(`(DEBUG) - XFA - style for ${name} not implemented yet`);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if (converters.hasOwnProperty(name)) {
|
||||
converters[name](node, style);
|
||||
}
|
||||
}
|
||||
return style;
|
||||
}
|
||||
|
||||
function setPosition(node, style) {
|
||||
style.transform = "";
|
||||
if (node.rotate) {
|
||||
style.transform = `rotate(-${node.rotate}deg) `;
|
||||
style.transformOrigin = "top left";
|
||||
}
|
||||
|
||||
if (node.x !== "" || node.y !== "") {
|
||||
style.position = "absolute";
|
||||
style.left = node.x ? measureToString(node.x) : "0pt";
|
||||
style.top = node.y ? measureToString(node.y) : "0pt";
|
||||
}
|
||||
}
|
||||
|
||||
export { measureToString, setPosition, setWidthHeight };
|
||||
export { measureToString, toStyle };
|
||||
|
|
|
@ -30,6 +30,7 @@ import {
|
|||
$setSetAttributes,
|
||||
$setValue,
|
||||
$toHTML,
|
||||
$toStyle,
|
||||
$uid,
|
||||
ContentObject,
|
||||
Option01,
|
||||
|
@ -50,8 +51,8 @@ import {
|
|||
getRelevant,
|
||||
getStringOption,
|
||||
} from "./utils.js";
|
||||
import { measureToString, setPosition, setWidthHeight } from "./html_utils.js";
|
||||
import { warn } from "../../shared/util.js";
|
||||
import { measureToString, toStyle } from "./html_utils.js";
|
||||
import { Util, warn } from "../../shared/util.js";
|
||||
|
||||
const TEMPLATE_NS_ID = NamespaceIds.template.id;
|
||||
|
||||
|
@ -614,6 +615,10 @@ class Color extends XFAObject {
|
|||
[$hasSettableValue]() {
|
||||
return false;
|
||||
}
|
||||
|
||||
[$toStyle]() {
|
||||
return Util.makeHexColor(this.value.r, this.value.g, this.value.b);
|
||||
}
|
||||
}
|
||||
|
||||
class Comb extends XFAObject {
|
||||
|
@ -680,7 +685,7 @@ class ContentArea extends XFAObject {
|
|||
children: [],
|
||||
attributes: {
|
||||
style,
|
||||
className: "xfa-contentarea",
|
||||
class: "xfaContentarea",
|
||||
id: this[$uid],
|
||||
},
|
||||
};
|
||||
|
@ -896,10 +901,10 @@ class Draw extends XFAObject {
|
|||
"invisible",
|
||||
]);
|
||||
this.relevant = getRelevant(attributes.relevant);
|
||||
this.rotate = getFloat({
|
||||
this.rotate = getInteger({
|
||||
data: attributes.rotate,
|
||||
defaultValue: 0,
|
||||
validate: x => true,
|
||||
validate: x => x % 90 === 0,
|
||||
});
|
||||
this.use = attributes.use || "";
|
||||
this.usehref = attributes.usehref || "";
|
||||
|
@ -924,6 +929,38 @@ class Draw extends XFAObject {
|
|||
[$setValue](value) {
|
||||
_setValue(this, value);
|
||||
}
|
||||
|
||||
[$toHTML]() {
|
||||
if (!this.value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const style = toStyle(
|
||||
this,
|
||||
"font",
|
||||
"dimensions",
|
||||
"position",
|
||||
"rotate",
|
||||
"anchorType"
|
||||
);
|
||||
|
||||
const clazz = ["xfaDraw"];
|
||||
if (this.font) {
|
||||
clazz.push("xfaFont");
|
||||
}
|
||||
|
||||
const attributes = {
|
||||
style,
|
||||
id: this[$uid],
|
||||
class: clazz.join(" "),
|
||||
};
|
||||
|
||||
return {
|
||||
name: "div",
|
||||
attributes,
|
||||
children: [],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Edge extends XFAObject {
|
||||
|
@ -1269,6 +1306,31 @@ class ExclGroup extends XFAObject {
|
|||
field.value[$setValue](nodeBoolean);
|
||||
}
|
||||
}
|
||||
|
||||
[$toHTML]() {
|
||||
if (!this.value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const style = toStyle(this, "dimensions", "position", "anchorType");
|
||||
const attributes = {
|
||||
style,
|
||||
id: this[$uid],
|
||||
class: "xfaExclgroup",
|
||||
};
|
||||
|
||||
const children = this[$childrenToHTML]({
|
||||
// TODO: exObject & exclGroup
|
||||
filter: new Set(["field"]),
|
||||
include: true,
|
||||
});
|
||||
|
||||
return {
|
||||
name: "div",
|
||||
attributes,
|
||||
children,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Execute extends XFAObject {
|
||||
|
@ -1360,7 +1422,11 @@ class Field extends XFAObject {
|
|||
"invisible",
|
||||
]);
|
||||
this.relevant = getRelevant(attributes.relevant);
|
||||
this.rotate = getStringOption(attributes.rotate, ["0", "angle"]);
|
||||
this.rotate = getInteger({
|
||||
data: attributes.rotate,
|
||||
defaultValue: 0,
|
||||
validate: x => x % 90 === 0,
|
||||
});
|
||||
this.use = attributes.use || "";
|
||||
this.usehref = attributes.usehref || "";
|
||||
this.w = getMeasurement(attributes.w);
|
||||
|
@ -1394,6 +1460,38 @@ class Field extends XFAObject {
|
|||
[$setValue](value) {
|
||||
_setValue(this, value);
|
||||
}
|
||||
|
||||
[$toHTML]() {
|
||||
if (!this.value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const style = toStyle(
|
||||
this,
|
||||
"font",
|
||||
"dimensions",
|
||||
"position",
|
||||
"rotate",
|
||||
"anchorType"
|
||||
);
|
||||
|
||||
const clazz = ["xfaField"];
|
||||
if (this.font) {
|
||||
clazz.push("xfaFont");
|
||||
}
|
||||
|
||||
const attributes = {
|
||||
style,
|
||||
id: this[$uid],
|
||||
class: clazz.join(" "),
|
||||
};
|
||||
|
||||
return {
|
||||
name: "div",
|
||||
attributes,
|
||||
children: [],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Fill extends XFAObject {
|
||||
|
@ -1418,6 +1516,26 @@ class Fill extends XFAObject {
|
|||
this.solid = null;
|
||||
this.stipple = null;
|
||||
}
|
||||
|
||||
[$toStyle]() {
|
||||
let fill = "#000000";
|
||||
for (const name of Object.getOwnPropertyNames(this)) {
|
||||
if (name === "extras" || name === "color") {
|
||||
continue;
|
||||
}
|
||||
const obj = this[name];
|
||||
if (!(obj instanceof XFAObject)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
fill = obj[$toStyle](this.color);
|
||||
break;
|
||||
}
|
||||
|
||||
return {
|
||||
color: fill,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
class Filter extends XFAObject {
|
||||
|
@ -1522,6 +1640,80 @@ class Font extends XFAObject {
|
|||
this.extras = null;
|
||||
this.fill = null;
|
||||
}
|
||||
|
||||
[$toStyle]() {
|
||||
const style = toStyle(this, "fill");
|
||||
if (style.color) {
|
||||
if (!style.color.startsWith("#")) {
|
||||
// We've a gradient which is not possible for a font color
|
||||
// so use a workaround.
|
||||
style.backgroundClip = "text";
|
||||
style.background = style.color;
|
||||
style.color = "transparent";
|
||||
} else if (style.color === "#000000") {
|
||||
delete style.color;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.baselineShift) {
|
||||
style.verticalAlign = measureToString(this.baselineShift);
|
||||
}
|
||||
|
||||
// TODO: fontHorizontalScale
|
||||
// TODO: fontVerticalScale
|
||||
|
||||
if (this.kerningMode !== "none") {
|
||||
style.fontKerning = "normal";
|
||||
}
|
||||
|
||||
if (this.letterSpacing) {
|
||||
style.letterSpacing = measureToString(this.letterSpacing);
|
||||
}
|
||||
|
||||
if (this.lineThrough !== 0) {
|
||||
style.textDecoration = "line-through";
|
||||
if (this.lineThrough === 2) {
|
||||
style.textDecorationStyle = "double";
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: lineThroughPeriod
|
||||
|
||||
if (this.overline !== 0) {
|
||||
style.textDecoration = "overline";
|
||||
if (this.overline === 2) {
|
||||
style.textDecorationStyle = "double";
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: overlinePeriod
|
||||
|
||||
if (this.posture !== "normal") {
|
||||
style.fontStyle = this.posture;
|
||||
}
|
||||
|
||||
const fontSize = measureToString(this.size);
|
||||
if (fontSize !== "10px") {
|
||||
style.fontSize = fontSize;
|
||||
}
|
||||
|
||||
style.fontFamily = this.typeface;
|
||||
|
||||
if (this.underline !== 0) {
|
||||
style.textDecoration = "underline";
|
||||
if (this.underline === 2) {
|
||||
style.textDecorationStyle = "double";
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: underlinePeriod
|
||||
|
||||
if (this.weight !== "normal") {
|
||||
style.fontWeight = this.weight;
|
||||
}
|
||||
|
||||
return style;
|
||||
}
|
||||
}
|
||||
|
||||
class Format extends XFAObject {
|
||||
|
@ -1755,6 +1947,13 @@ class Linear extends XFAObject {
|
|||
this.color = null;
|
||||
this.extras = null;
|
||||
}
|
||||
|
||||
[$toStyle](startColor) {
|
||||
startColor = startColor ? startColor[$toStyle]() : "#FFFFFF";
|
||||
const transf = this.type.replace(/([RBLT])/, " $1").toLowerCase();
|
||||
const endColor = this.color ? this.color[$toStyle]() : "#000000";
|
||||
return `linear-gradient(${transf}, ${startColor}, ${endColor})`;
|
||||
}
|
||||
}
|
||||
|
||||
class LockDocument extends ContentObject {
|
||||
|
@ -1989,11 +2188,11 @@ class PageArea extends XFAObject {
|
|||
|
||||
// TODO: handle the case where there are several content areas.
|
||||
const contentArea = children.find(
|
||||
node => node.attributes.className === "xfa-contentarea"
|
||||
node => node.attributes.class === "xfaContentarea"
|
||||
);
|
||||
|
||||
const style = Object.create(null);
|
||||
if (this.medium && this.medium.short.value && this.medium.long.value) {
|
||||
if (this.medium && this.medium.short && this.medium.long) {
|
||||
style.width = measureToString(this.medium.short);
|
||||
style.height = measureToString(this.medium.long);
|
||||
} else {
|
||||
|
@ -2133,6 +2332,32 @@ class Pattern extends XFAObject {
|
|||
this.color = null;
|
||||
this.extras = null;
|
||||
}
|
||||
|
||||
[$toStyle](startColor) {
|
||||
startColor = startColor ? startColor[$toStyle]() : "#FFFFFF";
|
||||
const endColor = this.color ? this.color[$toStyle]() : "#000000";
|
||||
const width = 5;
|
||||
const cmd = "repeating-linear-gradient";
|
||||
const colors = `${startColor},${startColor} ${width}px,${endColor} ${width}px,${endColor} ${
|
||||
2 * width
|
||||
}px`;
|
||||
switch (this.type) {
|
||||
case "crossHatch":
|
||||
return `${cmd}(to top,${colors}) ${cmd}(to right,${colors})`;
|
||||
case "crossDiagonal":
|
||||
return `${cmd}(45deg,${colors}) ${cmd}(-45deg,${colors})`;
|
||||
case "diagonalLeft":
|
||||
return `${cmd}(45deg,${colors})`;
|
||||
case "diagonalRight":
|
||||
return `${cmd}(-45deg,${colors})`;
|
||||
case "horizontal":
|
||||
return `${cmd}(to top,${colors})`;
|
||||
case "vertical":
|
||||
return `${cmd}(to right,${colors})`;
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
class Picture extends StringObject {
|
||||
|
@ -2270,6 +2495,16 @@ class Radial extends XFAObject {
|
|||
this.color = null;
|
||||
this.extras = null;
|
||||
}
|
||||
|
||||
[$toStyle](startColor) {
|
||||
startColor = startColor ? startColor[$toStyle]() : "#FFFFFF";
|
||||
const endColor = this.color ? this.color[$toStyle]() : "#000000";
|
||||
const colors =
|
||||
this.type === "toEdge"
|
||||
? `${startColor},${endColor}`
|
||||
: `${endColor},${startColor}`;
|
||||
return `radial-gradient(circle to center, ${colors})`;
|
||||
}
|
||||
}
|
||||
|
||||
class Reason extends StringObject {
|
||||
|
@ -2393,6 +2628,10 @@ class Solid extends XFAObject {
|
|||
this.usehref = attributes.usehref || "";
|
||||
this.extras = null;
|
||||
}
|
||||
|
||||
[$toStyle](startColor) {
|
||||
return startColor ? startColor[$toStyle]() : "#FFFFFF";
|
||||
}
|
||||
}
|
||||
|
||||
class Speak extends StringObject {
|
||||
|
@ -2430,6 +2669,15 @@ class Stipple extends XFAObject {
|
|||
this.color = null;
|
||||
this.extras = null;
|
||||
}
|
||||
|
||||
[$toStyle](bgColor) {
|
||||
const alpha = this.rate / 100;
|
||||
return Util.makeHexColor(
|
||||
Math.round(bgColor.value.r * (1 - alpha) + this.value.r * alpha),
|
||||
Math.round(bgColor.value.g * (1 - alpha) + this.value.g * alpha),
|
||||
Math.round(bgColor.value.b * (1 - alpha) + this.value.b * alpha)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Subform extends XFAObject {
|
||||
|
@ -2568,17 +2816,16 @@ class Subform extends XFAObject {
|
|||
page = pageAreas[pageNumber][$toHTML]();
|
||||
}
|
||||
|
||||
const style = Object.create(null);
|
||||
setWidthHeight(this, style);
|
||||
setPosition(this, style);
|
||||
const style = toStyle(this, "dimensions", "position");
|
||||
|
||||
const attributes = {
|
||||
style,
|
||||
id: this[$uid],
|
||||
class: "xfaSubform",
|
||||
};
|
||||
|
||||
if (this.name) {
|
||||
attributes["xfa-name"] = this.name;
|
||||
attributes.xfaName = this.name;
|
||||
}
|
||||
|
||||
const children = this[$childrenToHTML]({
|
||||
|
|
|
@ -13,7 +13,13 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
const measurementPattern = /([+-]?)([0-9]+\.?[0-9]*)(.*)/;
|
||||
const dimConverters = {
|
||||
pt: x => x,
|
||||
cm: x => (x / 2.54) * 72,
|
||||
mm: x => (x / (10 * 2.54)) * 72,
|
||||
in: x => x * 72,
|
||||
};
|
||||
const measurementPattern = /([+-]?[0-9]+\.?[0-9]*)(.*)/;
|
||||
|
||||
function getInteger({ data, defaultValue, validate }) {
|
||||
if (!data) {
|
||||
|
@ -67,15 +73,22 @@ function getMeasurement(str, def = "0") {
|
|||
if (!match) {
|
||||
return getMeasurement(def);
|
||||
}
|
||||
const [, sign, valueStr, unit] = match;
|
||||
const [, valueStr, unit] = match;
|
||||
const value = parseFloat(valueStr);
|
||||
if (isNaN(value)) {
|
||||
return getMeasurement(def);
|
||||
}
|
||||
return {
|
||||
value: sign === "-" ? -value : value,
|
||||
unit: unit || "pt",
|
||||
};
|
||||
|
||||
if (value === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const conv = dimConverters[unit];
|
||||
if (conv) {
|
||||
return conv(value);
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
function getRatio(data) {
|
||||
|
@ -134,7 +147,7 @@ function getColor(data, def = [0, 0, 0]) {
|
|||
}
|
||||
|
||||
function getBBox(data) {
|
||||
const def = getMeasurement("-1");
|
||||
const def = -1;
|
||||
if (!data) {
|
||||
return { x: def, y: def, width: def, height: def };
|
||||
}
|
||||
|
@ -142,7 +155,7 @@ function getBBox(data) {
|
|||
.trim()
|
||||
.split(/\s*,\s*/)
|
||||
.map(m => getMeasurement(m, "-1"));
|
||||
if (bbox.length < 4 || bbox[2].value < 0 || bbox[3].value < 0) {
|
||||
if (bbox.length < 4 || bbox[2] < 0 || bbox[3] < 0) {
|
||||
return { x: def, y: def, width: def, height: def };
|
||||
}
|
||||
|
||||
|
|
|
@ -59,6 +59,7 @@ const $setSetAttributes = Symbol();
|
|||
const $setValue = Symbol();
|
||||
const $text = Symbol();
|
||||
const $toHTML = Symbol();
|
||||
const $toStyle = Symbol();
|
||||
const $uid = Symbol("uid");
|
||||
|
||||
const _applyPrototype = Symbol();
|
||||
|
@ -259,6 +260,10 @@ class XFAObject {
|
|||
return dumped;
|
||||
}
|
||||
|
||||
[$toStyle]() {
|
||||
return null;
|
||||
}
|
||||
|
||||
[$toHTML]() {
|
||||
return null;
|
||||
}
|
||||
|
@ -839,6 +844,7 @@ export {
|
|||
$setValue,
|
||||
$text,
|
||||
$toHTML,
|
||||
$toStyle,
|
||||
$uid,
|
||||
ContentObject,
|
||||
IntegerObject,
|
||||
|
|
|
@ -36,9 +36,13 @@ class XfaLayer {
|
|||
}
|
||||
const stack = [[root, -1, rootHtml]];
|
||||
|
||||
parameters.div.appendChild(rootHtml);
|
||||
const rootDiv = parameters.div;
|
||||
rootDiv.appendChild(rootHtml);
|
||||
const coeffs = parameters.viewport.transform.join(",");
|
||||
parameters.div.style.transform = `matrix(${coeffs})`;
|
||||
rootDiv.style.transform = `matrix(${coeffs})`;
|
||||
|
||||
// Set defaults.
|
||||
rootDiv.setAttribute("class", "xfaLayer xfaFont");
|
||||
|
||||
while (stack.length > 0) {
|
||||
const [parent, i, html] = stack[stack.length - 1];
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue