Remove Links from Faded Text

jrjohnson · jrjohnson · commit 34657b4f0af3 · 2025-10-23T12:22:54.000-07:00
Automatically remove links from text, but allow them to be preserved if
needed. Can be invoked on the FadeText component or on the yielded
contextual component as needed.

Mostly we're removing them, but I kept links in when in a read only
display of the faded text.
diff --git a/packages/frontend/app/components/program-year/objective-list-item.gjs b/packages/frontend/app/components/program-year/objective-list-item.gjs
@@ -281,7 +281,7 @@ export default class ProgramYearObjectiveListItemComponent extends Component {
               </:postValue>
             </EditableField>
           {{else}}
-            {{ft.text}}
+            {{ft.text preserveLinks=true}}
             {{ft.controls}}
           {{/if}}
         </FadeText>
diff --git a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/fade-text.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/fade-text.js
@@ -4,7 +4,7 @@ const definition = {
   scope: '[data-test-fade-text]',
   enabled: isPresent('[data-test-fade-text-control]'),
   displayText: {
-    scope: '.display-text-wrapper',
+    scope: '[data-test-display-text]',
     isFaded: hasClass('faded'),
   },
   control: {
diff --git a/packages/ilios-common/addon/components/course/objective-list-item-parents.gjs b/packages/ilios-common/addon/components/course/objective-list-item-parents.gjs
@@ -63,7 +63,7 @@ export default class CourseObjectiveListItemParentsComponent extends Component {
               </button>
               {{ft.controls}}
             {{else}}
-              {{ft.text}}
+              {{ft.text preserveLinks=true}}
               {{ft.controls}}
             {{/if}}
           </FadeText>
diff --git a/packages/ilios-common/addon/components/course/objective-list-item.gjs b/packages/ilios-common/addon/components/course/objective-list-item.gjs
@@ -239,7 +239,7 @@ export default class CourseObjectiveListItemComponent extends Component {
               </:postValue>
             </EditableField>
           {{else}}
-            {{ft.text}}
+            {{ft.text preserveLinks=true}}
             {{ft.controls}}
           {{/if}}
         </FadeText>
diff --git a/packages/ilios-common/addon/components/fade-text.gjs b/packages/ilios-common/addon/components/fade-text.gjs
@@ -1,22 +1,19 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { cached, tracked } from '@glimmer/tracking';
 import { htmlSafe } from '@ember/template';
 import onResize from 'ember-on-resize-modifier/modifiers/on-resize';
 import t from 'ember-intl/helpers/t';
 import { on } from '@ember/modifier';
 import FaIcon from 'ilios-common/components/fa-icon';
 import { hash } from '@ember/helper';
+import { TrackedAsyncData } from 'ember-async-data';
 
 export default class FadeTextComponent extends Component {
   @tracked textHeight;
   @tracked expanded;
 
   MAX_HEIGHT = 200;
 
-  get displayText() {
-    return new htmlSafe(this.args.text);
-  }
-
   get textHeightRounded() {
     return Math.floor(this.textHeight);
   }
@@ -68,15 +65,20 @@ export default class FadeTextComponent extends Component {
               collapse=this.collapse
             )
             text=(component
-              FadedText faded=this.shouldFade resize=this.updateTextDims text=this.displayText
+              FadedTextComponent
+              faded=this.shouldFade
+              resize=this.updateTextDims
+              text=@text
+              preserveLinks=@preserveLinks
             )
           )
         }}
       {{else}}
-        <FadedText
+        <FadedTextComponent
           @faded={{this.shouldFade}}
           @resize={{this.updateTextDims}}
-          @text={{this.displayText}}
+          @preserveLinks={{@preserveLinks}}
+          @text={{@text}}
         />
         <Controls
           @expandable={{this.shouldFade}}
@@ -117,10 +119,46 @@ const Controls = <template>
   {{/if}}
 </template>;
 
-const FadedText = <template>
-  <div class="display-text-wrapper{{if @faded ' faded'}}">
-    <div class="display-text" {{onResize @resize}}>
-      {{@text}}
+class FadedTextComponent extends Component {
+  @cached
+  get sanitizerData() {
+    return new TrackedAsyncData(import('sanitize-html'));
+  }
+
+  get cleanText() {
+    if (this.args.preserveLinks) {
+      return this.args.text;
+    }
+
+    if (!this.sanitizerData.isResolved) {
+      return this.args.text;
+    }
+
+    const { default: sanitizeHtml } = this.sanitizerData.value;
+
+    return sanitizeHtml(this.args.text, {
+      transformTags: {
+        a: sanitizeHtml.simpleTransform('span', { class: 'link' }, false),
+      },
+      allowedAttributes: false, //disable attribute filtering
+      allowedTags: false, //disable tag filtering
+      allowVulnerableTags: true, //turn off warnings about script tags
+    });
+  }
+
+  get displayText() {
+    return new htmlSafe(this.cleanText);
+  }
+
+  <template>
+    <div
+      class="display-text-wrapper{{if @faded ' faded'}}"
+      data-test-display-text
+      data-test-done={{this.sanitierData.isResolved}}
+    >
+      <div class="display-text" {{onResize @resize}} data-test-text>
+        {{this.displayText}}
+      </div>
     </div>
-  </div>
-</template>;
+  </template>
+}
diff --git a/packages/ilios-common/addon/components/objective-sort-manager.gjs b/packages/ilios-common/addon/components/objective-sort-manager.gjs
@@ -150,7 +150,7 @@ export default class ObjectiveSortManagerComponent extends Component {
                 <FaIcon @icon="up-down-left-right" />
               {{/unless}}
               <span class="draggable-object-content">
-                <FadeText @text={{item.title}} />
+                <FadeText @text={{item.title}} @preserveLinks={{true}} />
               </span>
             </li>
           {{/each}}
diff --git a/packages/ilios-common/addon/components/session/objective-list-item-parents.gjs b/packages/ilios-common/addon/components/session/objective-list-item-parents.gjs
@@ -67,7 +67,7 @@ export default class SessionObjectiveListItemParentsComponent extends Component
               </button>
               {{ft.controls}}
             {{else}}
-              {{ft.text}}
+              {{ft.text preserveLinks=true}}
               {{ft.controls}}
             {{/if}}
           </FadeText>
diff --git a/packages/ilios-common/addon/components/session/objective-list-item.gjs b/packages/ilios-common/addon/components/session/objective-list-item.gjs
@@ -222,7 +222,7 @@ export default class SessionObjectiveListItemComponent extends Component {
               </:postValue>
             </EditableField>
           {{else}}
-            {{ft.text}}
+            {{ft.text preserveLinks=true}}
             {{ft.controls}}
           {{/if}}
         </FadeText>
diff --git a/packages/ilios-common/addon/components/session/overview.gjs b/packages/ilios-common/addon/components/session/overview.gjs
@@ -629,7 +629,7 @@ export default class SessionOverview extends Component {
                       </:postValue>
                     </EditableField>
                   {{else}}
-                    {{ft.text}}
+                    {{ft.text preserveLinks=true}}
                     {{ft.controls}}
                   {{/if}}
                 </FadeText>
@@ -664,7 +664,7 @@ export default class SessionOverview extends Component {
                       </:postValue>
                     </EditableField>
                   {{else}}
-                    {{ft.text}}
+                    {{ft.text preserveLinks=true}}
                     {{ft.controls}}
                   {{/if}}
                 </FadeText>
diff --git a/packages/ilios-common/package.json b/packages/ilios-common/package.json
@@ -65,6 +65,7 @@
     "normalize.css": "^8.0.1",
     "query-string": ">= 9.1.0",
     "quill": "^2.0.3",
+    "sanitize-html": "^2.17.0",
     "striptags": ">= 3.2.0",
     "typeface-nunito": ">= 1.1.13",
     "typeface-nunito-sans": ">= 1.1.13",
diff --git a/packages/test-app/tests/integration/components/fade-text-test.gjs b/packages/test-app/tests/integration/components/fade-text-test.gjs
@@ -26,6 +26,8 @@ module('Integration | Component | fade-text', function (hooks) {
     `;
     this.fadedClass = 'faded';
     this.fadedSelector = '.faded';
+    this.linkText = '<p class="text"><a href="iliosproject.org">Ilios Project</a></p>';
+    this.cleanText = '<p class="text"><span class="link">Ilios Project</span></p>';
   });
 
   test('it renders empty', async function (assert) {
@@ -119,4 +121,43 @@ module('Integration | Component | fade-text', function (hooks) {
     assert.notOk(this.expanded);
     assert.ok(component.displayText.isFaded);
   });
+
+  test('it replaces links by default', async function (assert) {
+    this.set('text', this.linkText);
+    await render(<template><FadeText @text={{this.text}} /></template>);
+    assert.dom('[data-test-text]', this.element).hasHtml(this.cleanText);
+
+    await render(
+      <template>
+        <FadeText @text={{this.text}} as |ft|>
+          {{ft.text}}
+        </FadeText>
+      </template>,
+    );
+    assert.dom('[data-test-text]', this.element).hasHtml(this.cleanText);
+  });
+
+  test('it preserves links when asked', async function (assert) {
+    this.set('text', this.linkText);
+    await render(<template><FadeText @text={{this.text}} @preserveLinks={{true}} /></template>);
+    assert.dom('[data-test-text]', this.element).hasHtml(this.linkText);
+
+    await render(
+      <template>
+        <FadeText @text={{this.text}} @preserveLinks={{true}} as |ft|>
+          {{ft.text}}
+        </FadeText>
+      </template>,
+    );
+    assert.dom('[data-test-text]', this.element).hasHtml(this.linkText);
+
+    await render(
+      <template>
+        <FadeText @text={{this.text}} as |ft|>
+          {{ft.text preserveLinks=true}}
+        </FadeText>
+      </template>,
+    );
+    assert.dom('[data-test-text]', this.element).hasHtml(this.linkText);
+  });
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
