feat(ui): add auto-links to text, heading, field description and workflow descriptions

Author: psychedelicious

invokeai/frontend/web/package.json

@@ -75,6 +75,8 @@
     "idb-keyval": "^6.2.1",
     "jsondiffpatch": "^0.6.0",
     "konva": "^9.3.15",
+    "linkify-react": "^4.2.0",
+    "linkifyjs": "^4.2.0",
     "lodash-es": "^4.17.21",
     "lru-cache": "^11.0.1",
     "mtwist": "^1.0.2",

invokeai/frontend/web/pnpm-lock.yaml

@@ -0,0 +1,17 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import type { Opts as LinkifyOpts } from 'linkifyjs';
+
+export const linkifySx: SystemStyleObject = {
+  a: {
+    fontWeight: 'semibold',
+  },
+  'a:hover': {
+    textDecoration: 'underline',
+  },
+};
+
+export const linkifyOptions: LinkifyOpts = {
+  target: '_blank',
+  rel: 'noopener noreferrer',
+  validate: (value) => /^https?:\/\//.test(value),
+};

invokeai/frontend/web/src/common/components/linkify.ts

@@ -1,6 +1,8 @@
 import { Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
+import { linkifyOptions, linkifySx } from 'common/components/linkify';
 import { selectWorkflowDescription } from 'features/nodes/store/workflowSlice';
+import Linkify from 'linkify-react';
 import { memo } from 'react';
 
 export const ActiveWorkflowDescription = memo(() => {
@@ -11,8 +13,8 @@ export const ActiveWorkflowDescription = memo(() => {
   }
 
   return (
-    <Text color="base.300" fontStyle="italic" pb={2}>
-      {description}
+    <Text color="base.300" fontStyle="italic" pb={2} sx={linkifySx}>
+      <Linkify options={linkifyOptions}>{description}</Linkify>
     </Text>
   );
 });

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowDescription.tsx

@@ -1,5 +1,7 @@
 import type { HeadingProps, SystemStyleObject } from '@invoke-ai/ui-library';
 import { Text } from '@invoke-ai/ui-library';
+import { linkifyOptions, linkifySx } from 'common/components/linkify';
+import Linkify from 'linkify-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -9,13 +11,14 @@ const headingSx: SystemStyleObject = {
   '&[data-is-empty="true"]': {
     opacity: 0.3,
   },
+  ...linkifySx,
 };
 
 export const HeadingElementContent = memo(({ content, ...rest }: { content: string } & HeadingProps) => {
   const { t } = useTranslation();
   return (
     <Text sx={headingSx} data-is-empty={content === ''} {...rest}>
-      {content || t('workflows.builder.headingPlaceholder')}
+      <Linkify options={linkifyOptions}>{content || t('workflows.builder.headingPlaceholder')}</Linkify>
     </Text>
   );
 });

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementContent.tsx

@@ -1,10 +1,12 @@
 import { FormHelperText, Textarea } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
+import { linkifyOptions, linkifySx } from 'common/components/linkify';
 import { useEditable } from 'common/hooks/useEditable';
 import { useInputFieldDescription } from 'features/nodes/hooks/useInputFieldDescription';
 import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate';
 import { fieldDescriptionChanged } from 'features/nodes/store/nodesSlice';
 import type { NodeFieldElement } from 'features/nodes/types/workflow';
+import Linkify from 'linkify-react';
 import { memo, useCallback, useRef } from 'react';
 
 export const NodeFieldElementDescriptionEditable = memo(({ el }: { el: NodeFieldElement }) => {
@@ -36,7 +38,11 @@ export const NodeFieldElementDescriptionEditable = memo(({ el }: { el: NodeField
   });
 
   if (!editable.isEditing) {
-    return <FormHelperText onDoubleClick={editable.startEditing}>{editable.value}</FormHelperText>;
+    return (
+      <FormHelperText onDoubleClick={editable.startEditing} sx={linkifySx}>
+        <Linkify options={linkifyOptions}>{editable.value}</Linkify>
+      </FormHelperText>
+    );
   }
 
   return (

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementDescriptionEditable.tsx

@@ -1,12 +1,14 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex, FormControl, FormHelperText } from '@invoke-ai/ui-library';
+import { linkifyOptions, linkifySx } from 'common/components/linkify';
 import { InputFieldRenderer } from 'features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer';
 import { useContainerContext } from 'features/nodes/components/sidePanel/builder/contexts';
 import { NodeFieldElementLabel } from 'features/nodes/components/sidePanel/builder/NodeFieldElementLabel';
 import { useInputFieldDescription } from 'features/nodes/hooks/useInputFieldDescription';
 import { useInputFieldTemplate } from 'features/nodes/hooks/useInputFieldTemplate';
 import type { NodeFieldElement } from 'features/nodes/types/workflow';
 import { NODE_FIELD_CLASS_NAME } from 'features/nodes/types/workflow';
+import Linkify from 'linkify-react';
 import { memo, useMemo } from 'react';
 
 const sx: SystemStyleObject = {
@@ -43,7 +45,11 @@ export const NodeFieldElementViewMode = memo(({ el }: { el: NodeFieldElement })
             settings={data.settings}
           />
         </Flex>
-        {showDescription && _description && <FormHelperText>{_description}</FormHelperText>}
+        {showDescription && _description && (
+          <FormHelperText sx={linkifySx}>
+            <Linkify options={linkifyOptions}>{_description}</Linkify>
+          </FormHelperText>
+        )}
       </FormControl>
     </Flex>
   );

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementViewMode.tsx

@@ -1,5 +1,7 @@
 import type { SystemStyleObject, TextProps } from '@invoke-ai/ui-library';
 import { Text } from '@invoke-ai/ui-library';
+import { linkifyOptions, linkifySx } from 'common/components/linkify';
+import Linkify from 'linkify-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -9,13 +11,14 @@ const textSx: SystemStyleObject = {
   '&[data-is-empty="true"]': {
     opacity: 0.3,
   },
+  ...linkifySx,
 };
 
 export const TextElementContent = memo(({ content, ...rest }: { content: string } & TextProps) => {
   const { t } = useTranslation();
   return (
     <Text sx={textSx} data-is-empty={content === ''} {...rest}>
-      {content || t('workflows.builder.textPlaceholder')}
+      <Linkify options={linkifyOptions}>{content || t('workflows.builder.textPlaceholder')}</Linkify>
     </Text>
   );
 });