feat(watermark): support for setting text alignment direction through textAlign

[Yuiai01]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Workflow
• Other (about what?)

🔗 Related issue link

close #44885

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	watermark supports setting text alignment direction through textAlign
🇨🇳 Chinese	水印支持通过 textAlign 设置文本对齐方向

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

---

🚀 Summary

🤖 Generated by Copilot at 5681b65

Added a textAlign prop to the Watermark component to enable custom text alignment for the watermark. Updated the demo, the documentation, and the useClips hook to support the new prop. Modified the files components/watermark/demo/custom.tsx, components/watermark/index.tsx, components/watermark/index.en-US.md, components/watermark/index.zh-CN.md, and components/watermark/useClips.ts.

🔍 Walkthrough

🤖 Generated by Copilot at 5681b65

• Add textAlign prop to Watermark component and demo to allow users to customize the horizontal alignment of the watermark text (link, link, link, link, link, link, link, link, link, link, link, link, link, link)
• Set the default value of textAlign to center in Watermark component and demo (link, link)
• Pass textAlign prop to getClips function and useClips hook in Watermark component to generate and render the canvas elements for the watermark (link, link, link)
• Update the documentation for Watermark component in English and Chinese versions to include the textAlign prop in the Font section (link, link)

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	3 changes	Sep 15, 2023, 12:23 PM

[codecov]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (1e0c3b8) 100.00% compared to head (a310740) 100.00%.
Report is 27 commits behind head on feature.

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #44888   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          686       686           
  Lines        11647     11648    +1     
  Branches      3123      3124    +1     
=========================================
+ Hits         11647     11648    +1     

Files Changed	Coverage Δ
components/watermark/index.tsx	100.00% <100.00%> (ø)
components/watermark/useClips.ts	100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.