Added handling for links (hyperlinks).

.gitignore

@@ -122,9 +122,11 @@ dist
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
+# yarn v3
 .pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

Dockerfile

@@ -5,26 +5,26 @@ FROM pdf_base as pdf_debug
 # So do nothing app related as the files won't 
 # be present yet. 
 
-FROM node:14 as pdf_build
+FROM node:18 as pdf_build
 
 WORKDIR /src
 COPY package.json .
 COPY yarn.lock .
 COPY tslint.json .
 COPY tsconfig.json .
-RUN yarn install --frozen-lockfile
+COPY .yarnrc.yml .
+COPY .yarn ./.yarn
+RUN yarn --immutable
+
 COPY src ./src
 COPY fonts ./fonts
 
 RUN yarn build
 
-# remove development dependencies
-RUN npm prune --production
-
 # run node prune
 RUN npx node-prune
 
-FROM node:14 as pdf_release
+FROM node:18 as pdf_release
 
 # Run everything after as non-privileged user.
 RUN install -m 775 -d /usr/src/app

package.json

@@ -38,5 +38,10 @@
     "tslint": "^6.0.0",
     "tslint-react": "^4.2.0",
     "typescript": "^4"
-  }
+  },
+  "volta": {
+    "node": "18.17.0",
+    "yarn": "3.6.1"
+  },
+  "packageManager": "yarn@3.6.1"
 }

src/factory/ElementRegistry.tsx

@@ -7,6 +7,7 @@ import { createListElement } from './Elements/ListElementFactory';
 import { createPageElement } from './Elements/PageElementFactory';
 import { createShadowElement } from './Elements/ShadowElementFactory';
 import { ILogger } from '../ILogger';
+import { createLinkElement } from './Elements/LinkElementFactory';
 
 // Define the function signature that we use to create elements
 export type ElementFactoryFunction = (e: any, factory:IElementFactory, context:IElementContext, stack: string[], logger:ILogger) => Promise<React.ReactElement | React.ReactElement[]>;
@@ -40,4 +41,5 @@ staticElementRegistry.register('view', createViewElement);
 staticElementRegistry.register('list', createListElement);
 staticElementRegistry.register('shadow', createShadowElement);
 staticElementRegistry.register('page', createPageElement);
+staticElementRegistry.register('link', createLinkElement);
 

src/factory/Elements/LinkElementFactory.tsx

@@ -0,0 +1,53 @@
+import { LinkElementDeclaration } from '../../wire/ElementDeclaration';
+import { IElementFactory } from '../IElementFactory';
+import { IElementContext } from '../IElementContext';
+import { Link, Text } from '@react-pdf/renderer';
+import React from 'react';
+import { ILogger } from '../../ILogger';
+import { v4 } from 'uuid';
+import { finalizeBoolean } from '../../helpers/FinalizeHelpers';
+import { createElementKey } from '../createElementKey';
+
+// Create a link element
+
+
+export const createLinkElement = async (element: LinkElementDeclaration, factory: IElementFactory, context: IElementContext, stack: string[], logger: ILogger): Promise<React.ReactElement> => {
+  const { style, text, classes, debug, href, children } = element;
+
+  // Calculate the final style to apply considering any class names included
+  const finalStyle = context.buildFinalStyle(classes ?? [], style ?? {});
+  const mustBreak = finalizeBoolean(element.break, context);
+  const canWrap = finalizeBoolean(element.wrap, context);
+  const isFixed = finalizeBoolean(element.fixed, context);
+  const finalText = context.finalizeString(text ?? "");
+  const finalHref = context.finalizeString(href ?? "");
+
+  // We create a render function, rather than just a simple string, so that we can account for
+  // dynamic functionality, such as including page numbers.
+  logger.debug(`<Link> ${href} ${text}`);
+  if(children?.length && text?.length)
+  {
+    logger.error('Text element provided with both a text property and a children property. Text will be discarded.');
+  }
+
+  if (finalStyle.fontFamily && !context.fontIsRegistered(finalStyle.fontFamily)) {
+    await context.loadReferencedFonts(finalStyle.fontFamily);
+  }
+
+  const key = createElementKey('link', element);
+  const renderedChildren = text?.length ? [<Text>{finalText}</Text>] : await Promise.all(children!.map(async (child, idx) => {
+    return await factory.createElement(child, [...stack, key+`.child[${idx}]`]);
+  }));
+
+  return (
+    <Link
+      key={v4()}
+      style={finalStyle}
+      wrap={canWrap}
+      debug={context.config.debug || debug}
+      fixed={isFixed}
+      break={mustBreak}
+      src={finalHref}
+    >{renderedChildren}</Link>
+  );
+};

src/factory/Elements/TextElementFactory.tsx

@@ -68,3 +68,6 @@ export const createTextElement = async (element: TextElementDeclaration, factory
     />
   );
 };
+
+
+

src/wire/ElementDeclaration.ts

@@ -4,7 +4,7 @@ import {
   Orientation,
 } from '@react-pdf/types';
 
-export type ElementTypes = 'view'|'image'|'text'|'list'|'shadow'|'page';
+export type ElementTypes = 'view'|'image'|'text'|'list'|'shadow'|'page'|'link';
 
 export type StyleWithShadow = Style & {
   shadowColor?:string,
@@ -77,6 +77,15 @@ export interface TextElementDeclaration extends StylableElementDeclaration
   children?: TextElementDeclaration[] | undefined;
 }
 
+export interface LinkElementDeclaration extends StylableElementDeclaration
+{
+  type?: 'link';
+  href?:string;
+  wrap?:boolean;
+  text?:string; 
+  children?: AnyElementDeclaration[] | undefined; 
+}
+
 export interface ImageElementDeclaration extends StylableElementDeclaration
 {
   type?: 'image';