Web Plugin: Select Text In Widget

Hi @Abhijeet Narvekar,

It is not possible with the Web SDK to “select” a text of a Text widget.

You can highlight text in the widget by using HTML like:

await miro.board.widgets.create({type: "text", text: "example <span style=\"background-color: rgb(254, 244, 69);\">hello world!</span>"})

Which will look like: 

I would love to hear about your use-case: what are you trying to do by having pre-selected text? I will then be able to share it with our Product Managers :)  

@Anthony Roux Thanks for the suggestion. But that won’t help with our use case. We don’t want to make permanant change to the widget content.

We are Acrolinx a content governanace solution. The plugin would be suggesting users on how they can improve content quality in Miro. For showing suggestions we need to highlight the text content based on offsets. 

We have our own sidebar app where we show results. We want to highlight those results on Miro widgets. (See screenshot)

We have a several integrations across a wide range of editors. Most of them provide us with some API to select text content. Would it be possible for Miro to provide such an API ?

Best,
Abhijeet

P.S. Also do you know if we can get hold of the editor object which Miro uses for text editing? When a user clicks into the widget a text editor is activated. If we can get hold of that editor or invoke the editor through the API we could probably highlight using DOM operations

Thanks for sharing.

I have shared with the Product Managers to be added to our backlog and prioritised in the future. Unfortunately, this is not something that we will offer in the coming weeks.

I will inform you when I have more information about this request.

Dear Miro Developer Team,

it took me waaaay too long to find out, that you can adjust the styling of a text through “inline-style” and tags like <strong></strong>. I was struggling with this for a while, since there was no way yet to modify text widgets through the style: {} attribute. To make the life easier for other developers, I think it is the best to document this directly in the text widget documentation as a temporary workaround. Here is my code.

const someTextItem= await miro.board.createText({

    x: 50,

    y: 50,

    width: 180,

    content: '<p style="color: rgb(254, 244, 69);"><strong>PRIORITÄTEN LISTE</strong></p>',

    style: {

        // here is no way to adjust text color, font-weight or other text modifications

        fontSize: 92,

    },

});

Hi @Vladimir B.,

Thanks for the feedback. May I ask where you would expect to find this information? It is available in the content parameter description here but you might have expected to find it somewhere else.

Hey @Anthony Roux 

I guess I see my main issue.

I come from the Miro SDK 1.0, where we had a bold attribute in the style attribute.

Therefore, I didn’t expect to set the fontStyling over the content attribute.

But now as I double checked, I saw that there is the possibility mentioned on the content property: https://developers.miro.com/docs/text_text-1.

Still I think it should be mentioned in the comparison guide v1 → v2 as well, since it is a different way to get the same result. The same applies for the other features, which are not provided in Miro SDK 2.0 yet:

I am happy that I was able to find out, that it is possible to set the font color via inline-style in content. I don’t know if it is mentioned somewhere. Maybe this would be something good to mention in the comparison guide or in the text docs of the SDK 2.0.

Anyways, thank you very much for hearing me and for replying so quicky :).

Nice to have such a supportive development team.

  "style": {
    "borderColor": "#808080", // Deprecated. Default: "#ffffff"
    // allowed values: 0.0, 0.25, 0.5, 0.75, 1.0
    "borderOpacity": 0.6, // Deprecated. Default: 1.0
    "borderStyle": "normal", // Deprecated. Default: normal
    // allowed values: 2.0, 4.0, 8.0, 16.0, 24.0
    "borderWidth": 4.0, // Deprecated. Default: 2.0
    "textColor": "#1a1a1a", // default: "#1a1a1a"
  }

This is great feedback! Thanks for taking the time to share it and explain it clearly. 

I will share that with the team and we will see how to improve it. We are always very happy to hear about how we can improve our documentation!

@Anthony Roux 

Small addition:

This would be the perfect place for a side-mark, that there is the possibility to set text-emphasis and text-color via html tags and inline-styling inside the content property.

Still I wonder, is there any workaround to achieve any border styling?

Let’s say I want a rect with a fillColor: transparent and a blue 5px solid border.

This could be easily achieved inside the MIRO Dashboard.

But let’s say I want to generate this from my app.

I tried it via inline-styling inside the content property, but without any success.

@Anthony Roux do you know any solution to achieve this, even if it is currently not supported in v2?

Hi @Vladimir B. 

Still I wonder, is there any workaround to achieve any border styling?

Let’s say I want a rect with a fillColor: transparent and a blue 5px solid border.

You can achieve this result with shapes.

Specifically, the REST API supports border properties (they are not yet supported in the Web SDK): 

• borderColor
• borderOpacity
• borderStyle
• borderWidth

You can create a rectangular shape, set border properties, add text, set the font (family and size, not the color), and set text alignment.

You can try it on our REST API playground: https://developers.miro.com/reference/create-shape-item

This would enable you to reproduce programmatically the result you achieve when you create a shape on the UI; the screenshot you shared in your previous message displays a shape item menu.

Would this option work for you?

Hey @Marco Spinello 

Thank you very much for your in depth reply.

Currently, I only work with the Miro Web SDK. Isn't it a bad practise to use both, the REST API and the WEB SDK? But as you mentioned, the only way to modify and create borders, is currently through the REST API. Do you know, how long it would take the MIRO Developers to introduce this functionality into the Web SDK?

Thank you for your support and have a nice day :).

It is not a bad practice but it is technically more complex than using only the Web SDK. 

We recently released a new article explaining how to connect a Web SDK app and a REST API backend.

HI @Vladimir B.,

Thank you so much for your message! As Anthony Roux mentions above, using both Web SDK and REST API adds complexity, but it's not a bad practice.

> Do you know, how long it would take the MIRO Developers to introduce this functionality into the Web SDK?

Web SDK support for border styling in shape items is in their backlog, but we don't have an ETA for that at this moment. Right now, using both Web SDK and REST API is the way to implement your solution.

Have a great day!