The link titles are not editable

Thanks for the report, will be fixed in the next release.

I have the same issue recently.

The issue you're encountering, where link titles are not editable, likely stems from a common misunderstanding of how GrapesJS handles different parts of a link component, specifically the distinction between the link's visible text and its HTML title attribute.

Let's clarify and provide solutions for both scenarios:

1. Editing the Link's Visible Text (Inner HTML)

What it is: This refers to the text displayed inside the <a> tag, for example, Click Here in <a href="#">Click Here</a>.

Expected Behavior in GrapesJS: By default, the visible text of a link component is inline editable. You should be able to click on the link in the canvas and then click again (or double-click) to enter text editing mode, similar to editing a standard text block.

How to Edit:

1. Drag a "Link" component from the "Basic" blocks into your canvas.
2. Click once on the link component to select it.
3. Click a second time (or double-click) on the link text itself. This should activate the rich text editor (ProseMirror) allowing you to type and change the text.

Troubleshooting if Link Text is NOT Editable: If you cannot edit the link's visible text, it's usually due to one of these reasons:

• Custom Component Definition: If you have a custom link component or a block that generates a link, it might have editable: false explicitly set. Ensure your component definition allows editing.

  editor.DomComponents.addType('custom-link', {
    model: {
      defaults: {
        tagName: 'a',
        // Ensure 'editable' is true for the content to be editable
        editable: true,
        traits: [
          'href',
          'title', // Add title trait here if you want it
          {
            type: 'select',
            label: 'Target',
            name: 'target',
            options: [
              { value: '_self', name: 'Same window' },
              { value: '_blank', name: 'New window' }
            ]
          }
        ],
        // Default content if not provided
        content: 'Edit Link Text'
      }
    }
  });
  
  editor.BlockManager.add('custom-link-block', {
    label: 'Custom Link',
    category: 'Basic',
    content: { type: 'custom-link' }
  });
  

• CSS Overlays: Less common, but sometimes custom CSS might apply pointer-events: none; or similar properties that prevent interaction with the link element in the editor.

2. Editing the Link's HTML title Attribute

What it is: This refers to the title attribute of the <a> tag (e.g., <a href="#" title="This is a tooltip">Link</a>). This attribute is typically used for tooltips that appear when a user hovers over the link.

Expected Behavior in GrapesJS: The title attribute is not inline editable. In GrapesJS, HTML attributes are managed via the Traits panel.

Root Cause of Your Issue: The default GrapesJS link component does not include a title trait by default. This is why you cannot find a way to edit it.

Solution: Add a title Trait to the Link Component You need to extend the default link component type to include a title trait. This will make the title attribute editable via the Traits panel.

const editor = grapesjs.init({
  // ... your GrapesJS configuration
});

editor.on('load', () => {
  const dc = editor.DomComponents;

  // Get the default 'link' component type
  const linkType = dc.getType('link');

  // Extend the 'link' component model
  dc.addType('link', {
    model: {
      defaults: {
        // Merge existing traits and add the new 'title' trait
        ...linkType.model.prototype.defaults,
        traits: [
          ...linkType.model.prototype.defaults.traits,
          {
            type: 'text',
            label: 'Title',
            name: 'title',
            placeholder: 'Tooltip text'
          }
        ]
      }
    }
  });

  // Re-add the default 'link' block to ensure it uses the updated component type
  // This step might be necessary if blocks are defined before component types are extended
  const bm = editor.BlockManager;
  const defaultLinkBlock = bm.get('link');
  if (defaultLinkBlock) {
    bm.remove('link');
    bm.add('link', {
      label: defaultLinkBlock.get('label'),
      category: defaultLinkBlock.get('category'),
      content: { type: 'link', content: 'Link' }, // Ensure it uses the updated 'link' type
      activate: true,
      select: true,
    });
  }
});

How to Edit the title Attribute (after adding the trait):

1. Drag a "Link" component into your canvas.
2. Select the link component by clicking on it.
3. Look at the Traits panel (usually on the right sidebar). You should now see a new input field labeled "Title".
4. Enter your desired tooltip text into this "Title" field. This will update the title attribute of your link.

By implementing the code snippet above, you will enable the editing of the title attribute through the GrapesJS Traits panel, resolving the core of your issue.