Custom elements when text is selected

Do you want to: How to
Document Server version: 7.4.0.163
Installation method: Docker
OS: Linux
Browser version: Chromium: 114.0.5735.19

Hey, guys. I’m starting to work on a feature/plugin in OnlyOffice Server where the user selects text, it displays an icon above the selected text. I’m tried with InputHelper but it displays icon below selected text.

The idea is to do something similar to what IDEs do. When you select text, a light bulb icon appears. And when you click on this lamp, it is to perform some function.

image

Is there any different way to do this?

Hello @Ryan

Just for better understanding can you provide an example of what it does?
By the way, if you have an example of the plugin in any state that you can share, it would make it easier to look for the solution.

When I select a text, an icon appears and then if I click, some functionality happens. I created something similar using only the ShowInputHelper method:

Peek 2023-07-19 16-12

It works great but I don’t think it’s the best way to do this


// Other functions that hide or show elements
// To show the icon
 window.Asc.plugin.executeMethod("ShowInputHelper",
            [window.pluginIdentifier, 20, 25, true]);


// Other functions that hide or show elements
// To show the popup
  window.Asc.plugin.executeMethod("ShowInputHelper",
            [window.pluginIdentifier, 520, 150, true]);

My html file:


 <img id="icon" class="icon d-none" width="20px" height="20px" src="resources/img/icon.svg" alt="">
    <div class="close-popup" id="btn-close">
        <svg> <!-- Content here --> </svg>
    </div>
    <div id="container" class="container">
        <div class="textarea-container">
            <div class="d-flex">
                <img width="20px" height="20px" src="resources/img/icon.svg" alt="">
                <p class="title-modal">Create content with Optiwork</p>
            </div>

            <textarea placeholder="This is the new optidata"  id="selectedText" class="form-control" rows="3"></textarea>
            <svg> <!-- Content here --> </svg>
        </div>
    </div>

Is there a more interesting way to create this feature?

Thanks. We’ll take a closer look at this. As soon as I get any info, I’ll let you know.