From 1ebf5552c1754c34cfe4ef0e7928fb26d975b249 Mon Sep 17 00:00:00 2001 From: Guillermo Loaysa Date: Sat, 28 Sep 2024 16:56:56 +0200 Subject: [PATCH 1/3] feat: add props labels and withAdditionalProps to DefaultLinkToolRender --- packages/tools/link-tool/README.md | 24 ++++++ .../src/components/DefaultLinkToolRender.tsx | 80 ++++++++++++------- packages/tools/link-tool/src/types.ts | 43 ++++++++++ 3 files changed, 116 insertions(+), 31 deletions(-) diff --git a/packages/tools/link-tool/README.md b/packages/tools/link-tool/README.md index 177ded412..2a358fa60 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 disables the "Additional Props" section and 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..f8c37257f 100644 --- a/packages/tools/link-tool/src/types.ts +++ b/packages/tools/link-tool/src/types.ts @@ -7,11 +7,54 @@ 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; + + /** Placeholder text for the edit input section */ + editPlaceholder?: 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; }; From 737909850dc65f8c8d5e54d6012247aeb7bd956f Mon Sep 17 00:00:00 2001 From: Guillermo Loaysa Date: Sat, 28 Sep 2024 17:11:27 +0200 Subject: [PATCH 2/3] fix: remove unused editPlaceholder label --- packages/tools/link-tool/src/types.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/tools/link-tool/src/types.ts b/packages/tools/link-tool/src/types.ts index f8c37257f..91a4bab6c 100644 --- a/packages/tools/link-tool/src/types.ts +++ b/packages/tools/link-tool/src/types.ts @@ -35,9 +35,6 @@ export type LinkToolTranslationProps = { /** Placeholder text for the rel attribute input */ relPlaceholder?: string; - /** Placeholder text for the edit input section */ - editPlaceholder?: string; - /** Label for the button that updates an existing link */ updateLabel?: string; From 3c847ab07b14640770671ad8cceb123d6874ba87 Mon Sep 17 00:00:00 2001 From: Guillermo Loaysa Date: Sat, 28 Sep 2024 17:24:54 +0200 Subject: [PATCH 3/3] docs: demonstrate only changing labels in README --- packages/tools/link-tool/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tools/link-tool/README.md b/packages/tools/link-tool/README.md index 2a358fa60..718dca49b 100644 --- a/packages/tools/link-tool/README.md +++ b/packages/tools/link-tool/README.md @@ -16,7 +16,7 @@ The `LinkTool` allows you to customize the labels and tooltips to match the lang #### Example Configuration with Translations -Below is an example that disables the "Additional Props" section and sets custom Spanish labels for the "Add" and "Delete" buttons: +Below is an example that sets custom Spanish labels for the "Add" and "Delete" buttons: ```typescript export const TOOLS: Tools = {