diff --git a/packages/tools/link-tool/README.md b/packages/tools/link-tool/README.md index 177ded412..718dca49b 100644 --- a/packages/tools/link-tool/README.md +++ b/packages/tools/link-tool/README.md @@ -9,3 +9,27 @@ const paragraph = require('yoopta-paragraph'); // TODO: DEMONSTRATE API ``` + +### LinkTool Translation Support + +The `LinkTool` allows you to customize the labels and tooltips to match the language of your application. You can easily pass translated text through the `labels` property, making the tool adaptable for different languages. + +#### Example Configuration with Translations + +Below is an example that sets custom Spanish labels for the "Add" and "Delete" buttons: + +```typescript +export const TOOLS: Tools = { + LinkTool: { + render: (props: LinkToolRenderProps) => + DefaultLinkToolRender({ + labels: { + addLabel: 'Añadir enlace', // Label for the Add button + deleteLabel: 'Eliminar enlace' // Label for the Delete button + }, + ...props, + }), + tool: LinkTool, + }, +}; + diff --git a/packages/tools/link-tool/src/components/DefaultLinkToolRender.tsx b/packages/tools/link-tool/src/components/DefaultLinkToolRender.tsx index 05f674cf4..3ef9a9e7d 100644 --- a/packages/tools/link-tool/src/components/DefaultLinkToolRender.tsx +++ b/packages/tools/link-tool/src/components/DefaultLinkToolRender.tsx @@ -1,10 +1,25 @@ import { ChangeEvent, useEffect, useState } from 'react'; -import { LinkToolRenderProps, Link } from '../types'; +import {LinkToolRenderProps, LinkToolTranslationProps} from '../types'; import ChevronUp from '../icons/chevronup.svg'; import { useYooptaEditor } from '@yoopta/editor'; const DefaultLinkToolRender = (props: LinkToolRenderProps) => { - const { withLink = true, withTitle = true } = props; + const { withLink = true, withTitle = true, withAdditionalProps = true, labels } = props; + const mergedLabels: LinkToolTranslationProps = { + titleLabel: 'Link Title', + titlePlaceholder: 'Edit link title', + linkLabel: 'Link URL', + linkPlaceholder: 'Edit link URL', + additionalPropsLabel:'Additional props', + targetLabel: 'Link target', + targetPlaceholder: 'Edit link target', + relLabel: 'Link rel', + relPlaceholder: 'Edit link rel', + updateLabel: 'Update', + addLabel: 'Add', + deleteLabel: 'Delete link', + ...labels + } const editor = useYooptaEditor(); const defaultLinkProps = editor.plugins?.LinkPlugin?.elements?.link?.props; @@ -42,7 +57,7 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => { {withTitle && (
{ name="title" value={link.title || ''} onChange={onChange} - placeholder="Edit link title" + placeholder={mergedLabels.titlePlaceholder} autoComplete="off" />
@@ -59,7 +74,7 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => { {withLink && (
{ name="url" value={link.url || ''} onChange={onChange} - placeholder="Edit link URL" + placeholder={mergedLabels.linkPlaceholder} autoComplete="off" />
)} - + {withAdditionalProps && ( + + )} + {isAdditionalPropsOpen && ( - <> -
- - +
+ +
{ name="rel" value={link.rel} onChange={onChange} - placeholder="Edit link rel" + placeholder={mergedLabels.relPlaceholder} autoComplete="off" />
@@ -122,14 +140,14 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => { disabled={!link.url} onClick={onSave} > - {props.link.url ? 'Update' : 'Add'} + {props.link.url ? mergedLabels.updateLabel : mergedLabels.addLabel}
diff --git a/packages/tools/link-tool/src/types.ts b/packages/tools/link-tool/src/types.ts index bb182bd24..91a4bab6c 100644 --- a/packages/tools/link-tool/src/types.ts +++ b/packages/tools/link-tool/src/types.ts @@ -7,11 +7,51 @@ export type Link = { target?: string; }; +export type LinkToolTranslationProps = { + /** The label displayed above the input field for the link title */ + titleLabel?: string; + + /** Placeholder text for the title input field */ + titlePlaceholder?: string; + + /** The label displayed above the input field for the link URL */ + linkLabel?: string; + + /** Placeholder text for the link URL input field */ + linkPlaceholder?: string; + + /** Label for additional properties section (e.g., rel and target attributes) */ + additionalPropsLabel?: string; + + /** Label for the target attribute (i.e., to specify where to open the link) */ + targetLabel?: string; + + /** Placeholder text for the target attribute input */ + targetPlaceholder?: string; + + /** Label for the rel attribute (defines the relationship between the current page and the linked resource) */ + relLabel?: string; + + /** Placeholder text for the rel attribute input */ + relPlaceholder?: string; + + /** Label for the button that updates an existing link */ + updateLabel?: string; + + /** Label for the button that adds a new link */ + addLabel?: string; + + /** Label for the button that deletes the link */ + deleteLabel?: string; +} + export type LinkToolRenderProps = { editor: YooEditor; link: Link; withLink?: boolean; withTitle?: boolean; + withAdditionalProps?: boolean; onSave: (link: Link) => void; onDelete: () => void; + labels?: LinkToolTranslationProps; };