Writer field: Not possible to wrap to words in one link if one contains an inline style

[baalej]

Description

I am using a Layout with Writer blocks and I realized that if I want to add a link with the inline toolbox to two different words for example:

“… the [professor of design at ELISAVA] discusses the ethics …”

It works works fine as long as there are no other tags on any of the words wrapped in the link.

If add oblique to any of them, the link splits in two, one for the oblique word and another one for the rest.

“… the [professor of design at] [ELISAVA] discusses the ethics …”

Is there a way to wrap them together in a link using Writer?

Expected behavior
There is one link that wraps all the words, even if they include different inline styles/tags.

Screenshots
Without inline styles/tags (Panel)

Without inline styles/tags (Template)

With inline styles/tags (Panel)

With inline styles/tags (Template)

To reproduce

Using a Writer field.

1. Select at least two separate words.
2. Add a Link.
3. Select one of the two words.
4. Add an inline style: e.g. oblique
5. The link in the template is split in two different words.

Console output
No console output.

[distantnative]

@baalej I cannot reproduce this

https://user-images.githubusercontent.com/3788865/206898258-b1e6f455-206f-4620-ae79-bfea18f92d91.mov

Result:

Are you using any custom blocks, custom inline styling...? How does your template output look like?

[baalej]

Hello,

I am using layouts + blocks. You are right @distantnative, the block has a custom blueprint based on the default one where I just added few more options.

Here is the blueprint:

name: field.blocks.text.name
icon: text
wysiwyg: true
preview: text
fields:
  indent:
    type: toggle
    label: Text Indent
    width: 1/2
  paragraphmargin:
    type: toggle
    default: false
    label: Paragraph spacing
    width: 1/2
  size:
    label: Text Size
    type: radio
    width: 1/2
    default: medium
    options:
      small: Small
      medium: Medium
  align:
    label: Text Align
    type: radio
    width: 1/2
    default: left
    options:
      left: Left
      center: Center
  adaptable:
    type: toggle
    label: Adaptable height
    help: Toggle for long Bio texts
  text:
    type: writer
    nodes: false
    placeholder: field.blocks.text.placeholder

And here is the block snippet:

<?php /** @var \Kirby\Cms\Block $block */ ?>
<?php 
$class = $block->indent()->toBool() == true ? 'indent ' : '';
$class .= $block->paragraphmargin()->toBool() == false ? 'no-margin-paragraphs ' : '';
$class .= $block->adaptable()->toBool() == true ? 'adaptable ' : '';
$class .= $block->size();
$class .= ' block-type-text';
?>

<div class="<?= $class ?>" style="text-align: <?= $block->align() ?>">
<?= $block->text(); ?>
</div>

Here is a video demonstration:

https://user-images.githubusercontent.com/38941353/206899364-3e227872-ea01-4826-8112-55bb0e38326c.mov

Here is the template output:

<strong>
  <a href="[https://www.elisava.net/es/profesores/dr-ariel-guersenzvaig](view-source:https://www.elisava.net/es/profesores/dr-ariel-guersenzvaig)" rel="noopener noreferrer">
    professor
  </a>
</strong>
<a href="[https://www.elisava.net/es/profesores/dr-ariel-guersenzvaig](view-source:https://www.elisava.net/es/profesores/dr-ariel-guersenzvaig)" rel="noopener noreferrer">
   of 
</a>
<s>
  <a href="[https://www.elisava.net/es/profesores/dr-ariel-guersenzvaig](view-source:https://www.elisava.net/es/profesores/dr-ariel-guersenzvaig)" rel="noopener noreferrer">
    design
  </a>
</s>
<a href="[https://www.elisava.net/es/profesores/dr-ariel-guersenzvaig](view-source:https://www.elisava.net/es/profesores/dr-ariel-guersenzvaig)" rel="noopener noreferrer">
   at 
</a>
<em>
  <a href="[https://www.elisava.net/es/profesores/dr-ariel-guersenzvaig](view-source:https://www.elisava.net/es/profesores/dr-ariel-guersenzvaig)" rel="noopener noreferrer">
  ELISAVA
  </a>
</em>

I am using Kirby 3.7.5 and PHP 8.0.8

[bastianallgeier]

✅