feat: add props labels and withAdditionalProps to DefaultLinkToolRender

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,
+  },
+};
+

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 && (
         <div>
           <label htmlFor="title" className="yoopta-link-tool-label">
-            Link title
+            {mergedLabels.titleLabel}
           </label>
           <input
             id="title"
@@ -51,15 +66,15 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
             name="title"
             value={link.title || ''}
             onChange={onChange}
-            placeholder="Edit link title"
+            placeholder={mergedLabels.titlePlaceholder}
             autoComplete="off"
           />
         </div>
       )}
       {withLink && (
         <div className={withTitle ? 'yoo-link-tool-mt-2' : ''}>
           <label htmlFor="url" className="yoopta-link-tool-label">
-            Link URL
+            {mergedLabels.linkLabel}
           </label>
           <input
             id="url"
@@ -68,39 +83,42 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
             name="url"
             value={link.url || ''}
             onChange={onChange}
-            placeholder="Edit link URL"
+            placeholder={mergedLabels.linkPlaceholder}
             autoComplete="off"
           />
         </div>
       )}
-      <button
-        type="button"
-        className="yoopta-button yoopta-link-tool-label !yoo-link-tool-font-[500] yoo-link-tool-mt-2 !yoo-link-tool-mb-0 !yoo-link-tool-flex yoo-link-tool-justify-between yoo-link-tool-items-center yoo-link-tool-w-full"
-        onClick={() => setAdditionPropsOpen((p) => !p)}
-      >
-        Additional props
-        <ChevronUp style={{ transform: isAdditionalPropsOpen ? `rotate(180deg)` : `rotate(0deg)` }} />
-      </button>
+      {withAdditionalProps && (
+          <button
+              type="button"
+              className="yoopta-button yoopta-link-tool-label !yoo-link-tool-font-[500] yoo-link-tool-mt-2 !yoo-link-tool-mb-0 !yoo-link-tool-flex yoo-link-tool-justify-between yoo-link-tool-items-center yoo-link-tool-w-full"
+              onClick={() => setAdditionPropsOpen((p) => !p)}
+          >
+            {mergedLabels.additionalPropsLabel}
+            <ChevronUp style={{transform: isAdditionalPropsOpen ? `rotate(180deg)` : `rotate(0deg)`}}/>
+          </button>
+      )}
+
       {isAdditionalPropsOpen && (
-        <>
-          <div className="yoo-link-tool-mt-2">
-            <label htmlFor="target" className="yoopta-link-tool-label">
-              Link target
-            </label>
-            <input
-              id="target"
-              type="text"
-              className="yoopta-link-tool-input"
-              name="target"
-              value={link.target}
-              onChange={onChange}
-              placeholder="Edit link target"
+          <>
+            <div className="yoo-link-tool-mt-2">
+              <label htmlFor="target" className="yoopta-link-tool-label">
+                {mergedLabels.targetLabel}
+              </label>
+              <input
+                  id="target"
+                  type="text"
+                  className="yoopta-link-tool-input"
+                  name="target"
+                  value={link.target}
+                  onChange={onChange}
+                  placeholder={mergedLabels.targetPlaceholder}
               autoComplete="off"
             />
           </div>
           <div className="yoo-link-tool-mt-2">
             <label htmlFor="rel" className="yoopta-link-tool-label">
-              Link rel
+              {mergedLabels.relLabel}
             </label>
             <input
               id="rel"
@@ -109,7 +127,7 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
               name="rel"
               value={link.rel}
               onChange={onChange}
-              placeholder="Edit link rel"
+              placeholder={mergedLabels.relPlaceholder}
               autoComplete="off"
             />
           </div>
@@ -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}
         </button>
         <button
           type="button"
           className="yoopta-button yoo-link-tool-ml-2 yoo-link-tool-bg-[#f4f4f5] yoo-link-tool-text-[#000] yoo-link-tool-text-sm yoo-link-tool-font-medium yoo-link-tool-py-[5px] yoo-link-tool-px-[10px] yoo-link-tool-rounded-md yoo-link-tool-shadow-sm disabled:yoo-link-tool-opacity-50"
           onClick={onDelete}
         >
-          Delete link
+          {mergedLabels.deleteLabel}
         </button>
       </div>
     </div>

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;
 };