How to Get Selected Text & Insert Text Programmatically?

[Chaddeus]

Maybe I missed it in the docs. There's quite a bit about blocks, inline tools, etc. but I don't see an API for common things.

How do we get the selected text?

How would we get all the text from the current caret location back to the start of the document?

How do we insert text at the caret location? (even if in the middle of a block)

Thank you.

[neSpecc]

Editor.js hands such tasks internally and doesn't provide public methods for this.

We have a Caret API, with some methods for moving caret to a particular Block.

What you're described it could be implemented using native js method for Selection.

If you have some example of use cases, please share.

[Chaddeus]

My app, Chibi AI (an AI writing assistant), currently uses Quill for the editor.

Let's assume a writer is a few paragraphs into a story. Then a simple example would be when a user starts a sentence. They maybe write "And then Tom walked to the door, but just as he was about to open it" -- where they could then hit the "write" button.

My app needs to collect the text up until the end of the sentence fragment the writer started.

But also, they could be in the middle of a paragraph. Not necessarily at the end of the block.

Then after my app uses the collected text to generate the next couple lines of story for them, it needs to stream it in at the caret location (again, could be in the middle of a paragraph).

It seems Editor.js may not be a capable choice. I was really looking forward to crafting some custom tools and such. ;(

[youssefsiam38]

@Chaddeus did you find a tool to do the trick?

[neSpecc]

It still sounds like 2 lines of code with the native selection api. I'm not sure I'm understanding which methods of Editor.js API could be helpful here. You can share the expected interface proposal.

[philsmy]

We also need to update content via a tool (in a similar use case as @Chaddeus actually).

Are you saying there is no way in Editor.js to update/replace the selected text that may or may not be an entire block (or might even be multiple blocks or parts of)?

If indeed it is '2 lines of code with the native selection API' could you enlighten us with those two lines? I don't see anything in Selection that updates text.

[Atifelx]

"This is example of react app , return "Updatetext " when , text is selected by user in Editer.js !" so we can perform any function to take that "text" as input and "processs it " and return to same place , i am working with open AI api to get some magic!

toolcode:
class CustomReplaceTool {
static get toolbox() {
return {
title: 'Replace Tool',
icon: '',
};
}

render() {
  const button = document.createElement('button');
  button.innerHTML = 'Replace';
  button.classList.add('cdx-button');

  // Click event to replace the selected text
  button.addEventListener('click', () => this.replaceSelectedText());

  return button;
}

replaceSelectedText() {
  const selectedText = this.api.selection.getText();
  if (selectedText) {
    const replacedText = this.performReplacement(selectedText);
    this.api.selection.replaceText(replacedText);
  } else {
    alert("Please select some text to replace.");
  }
}

performReplacement(text) {
  // Custom logic to add "updated" to the text
  return `${text} updated`; // Appending "updated" to the original text
}

}

export default CustomReplaceTool;

import to main program :

import ConsoleTool from '../LoggedinComponents/customtool/consoletool';

const EditorComponent = () => {

const initializeEditor = (data) => {
editorInstance.current = new EditorJS({
holder: 'editorjs',
tools: {
header: {
class: Header,
inlineToolbar: true,
config: {
placeholder: 'Enter a header',
levels: [2, 3, 4],
defaultLevel: 3
},

       },

    list: {
      class: List,
    },
    paragraph: {
      class: Paragraph,
      inlineToolbar: ['bold', 'italic', 'console'], // Add the custom tool here
      config: {
        preserveBlank: true, 
    },
  },

    table: {
      class: Table,
    },
    embed: Embed,
    quote: {
      class: Quote,

    },
    delimiter: Delimiter,
    marker: Marker,
    inlineCode: InlineCode,
    console: ConsoleTool, //   Register the custom tool (which is above mention code )
  },