GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 07:21:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #30276 from msmx-mnakagawa/fix-angular-accent-character-issue

Browse Source 
Angular: Fix accent character issue
This commit is contained in:
Valentin Palkovic 2025-01-16 09:59:08 +01:00 committed by GitHub
commit ed3beb3c25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts
View File

@ -96,7 +96,9 @@ export abstract class AbstractRenderer {
const analyzedMetadata = new PropertyExtractor(storyFnAngular.moduleMetadata, component);
const storyUid = targetDOMNode.getAttribute(STORY_UID_ATTRIBUTE);
const storyUid = this.generateStoryUIdFromRawStoryUid(
targetDOMNode.getAttribute(STORY_UID_ATTRIBUTE)
);
const componentSelector = storyUid !== null ? `${targetSelector}[${storyUid}]` : targetSelector;
if (storyUid !== null) {
const element = targetDOMNode.querySelector(targetSelector);
@ -143,6 +145,27 @@ export abstract class AbstractRenderer {
return storyIdIsInvalidHtmlTagName ? `sb-${id.replace(invalidHtmlTag, '')}-component` : id;
}
/**
* Angular is unable to handle components that have selectors with accented attributes.
*
* Therefore, stories break when meta's title contains accents.
* https://github.com/storybookjs/storybook/issues/29132
*
* This method filters accents from a given raw id. For example, this method converts
* 'Example/Button with an "é" accent' into 'Example/Button with an "e" accent'.
*
* @memberof AbstractRenderer
* @protected
*/
protected generateStoryUIdFromRawStoryUid(rawStoryUid: string | null) {
if (rawStoryUid === null) {
return rawStoryUid;
}
const accentCharacters = /[\u0300-\u036f]/g;
return rawStoryUid.normalize('NFD').replace(accentCharacters, '');
}
/** Adds DOM element that angular will use as bootstrap component. */
protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string) {
targetDOMNode.innerHTML = '';