Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Autogenerate heading anchors (#30825)
* auto-generate anchors for heading blocks * Don't use "we" & "us" in comments * account for non-latin anchors * remove lodash dependency * Revert "remove lodash dependency" This reverts commit bf0517c. * add dom-ready dependency * refactor everything * use useSelect * This was not removed on purpose * Move dummyElement inside getTextWithoutMarkup * Update e2e tests * Don't use a plain "wp-" as anchor * typo * Improve empty string handling * Improve inline comments * Bugfix anchor generation for empty headings * Update packages/block-library/src/heading/edit.js Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com> * Use blockEditorStore * cs * refactor hook * Update packages/block-library/src/heading/edit.js Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com> * no need for lodash here, these are pretty simple * refactor - no prefix * update e2e * bugfix * simplify * fix for block transforms * Improve generated slugs * bring back the prefix * Revert "update e2e" This reverts commit 792cfad. * remove wp- prefix if not autogenerated anchor * fix for empty/null anchors * use useEffect properly * Refactor to not use a prefix. * Maybe not use setAttributes? 🤔 * no need for this condition * This was too ugly to stay for more than 10 minutes * remove prefix from tests * alternative to useEffect * Revert "alternative to useEffect" This reverts commit 516c400. * only watch the content * mark anchor changes as not persistent * yet another refactor * fix for legacy headers & conversions * Typo was causing a crash * use useEffect for side effects * Simplify & improve performance * Use an object instead of Set Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
- Loading branch information
1 parent
b6f0bdf
commit c906643
Showing
7 changed files
with
123 additions
and
27 deletions.
There are no files selected for viewing
65 changes: 65 additions & 0 deletions
65
packages/block-library/src/heading/autogenerate-anchors.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { deburr, trim } from 'lodash'; | ||
|
|
||
| /** | ||
| * Returns the text without markup. | ||
| * | ||
| * @param {string} text The text. | ||
| * | ||
| * @return {string} The text without markup. | ||
| */ | ||
| const getTextWithoutMarkup = ( text ) => { | ||
| const dummyElement = document.createElement( 'div' ); | ||
| dummyElement.innerHTML = text; | ||
| return dummyElement.innerText; | ||
| }; | ||
|
|
||
| /** | ||
| * Get the slug from the content. | ||
| * | ||
| * @param {string} content The block content. | ||
| * | ||
| * @return {string} Returns the slug. | ||
| */ | ||
| const getSlug = ( content ) => { | ||
| // Get the slug. | ||
| return trim( | ||
| deburr( getTextWithoutMarkup( content ) ) | ||
| .replace( /[^\p{L}\p{N}]+/gu, '-' ) | ||
| .toLowerCase(), | ||
| '-' | ||
| ); | ||
| }; | ||
|
|
||
| /** | ||
| * Generate the anchor for a heading. | ||
| * | ||
| * @param {string} clientId The block ID. | ||
| * @param {string} content The block content. | ||
| * @param {string[]} allHeadingAnchors An array containing all headings anchors. | ||
| * | ||
| * @return {string|null} Return the heading anchor. | ||
| */ | ||
| export const generateAnchor = ( clientId, content, allHeadingAnchors ) => { | ||
| const slug = getSlug( content ); | ||
| // If slug is empty, then return null. | ||
| // Returning null instead of an empty string allows us to check again when the content changes. | ||
| if ( '' === slug ) { | ||
| return null; | ||
| } | ||
|
|
||
| delete allHeadingAnchors[ clientId ]; | ||
|
|
||
| let anchor = slug; | ||
| let i = 0; | ||
|
|
||
| // If the anchor already exists in another heading, append -i. | ||
| while ( Object.values( allHeadingAnchors ).includes( anchor ) ) { | ||
| i += 1; | ||
| anchor = slug + '-' + i; | ||
| } | ||
|
|
||
| return anchor; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters