How to add text based on click which is outside the Editor component , to the Editor

Question

what I have tried , here i have added two button when user click value stores in state, than that state is passed to the editor , copy as a props . then I was trying to convert value to html code and then concat the copy prop then again convert to html to draft format, and then update the state, but i am not able to fix.

Codesandbox link : code

what i want when user click on button it should append with the text value in editor.

Able to add text based on clicked, but now problem is to append text based on cursor position , currently it adds to the end, i want to be added where the user points the cursor and then click the button it should be added there

Latest code : Updated code with add text functionality

Parent Component

import EditorWrapper from "./Editor";

export default function App() {
  const [copy, setCopy] = useState("");
  return (
    <>
      <div className="App">
        <div className="d-flex">
          <button
            onClick={() => setCopy("Welcome")}
            className="btn btn-primary me-2"
          >
            Welcome
          </button>
          <button
            onClick={() => setCopy("Thank you")}
            className="btn btn-primary"
          >
            Thank you
          </button>
        </div>
        <EditorWrapper copy={copy} />
      </div>
    </>

Editor Component

import "./styles.css";
import React, { useState, useEffect } from "react";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, ContentState, convertToRaw } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import htmlToDraft from "html-to-draftjs";
import draftToHtml from "draftjs-to-html";

export default function EditorWrapper({ copy }) {
  const initialState = () => EditorState.createEmpty();

  const [editorState, setEditorState] = useState(initialState);

  const onChange = async (value) => {
    // const data = draftToHtml(convertToRaw(value.getCurrentContent()));
    // console.log(data.concat(`<p>${copy}</p>`));

    // const contentBlock = htmlToDraft(data);
    // const contentState = ContentState.createFromBlockArray(
    //   contentBlock?.contentBlocks
    // );

    // const updateState = EditorState.createWithContent(contentState);
    setEditorState(value);
  };
  return (
    <Editor
      editorState={editorState}
      toolbarClassName="toolbarClassName"
      wrapperClassName="wrapperClassName"
      editorClassName="editorClassName"
      onEditorStateChange={(value) => onChange(value)}
      stripPastedStyles
      ariaLabel="draftEditor"
    />
  );
}

I'm not familiar with draftjs, but looking at your code, I think you logged `data.concat(`
${copy}
`)` to the console and forgot actually adding it to `data` variable. — Moaaz Bhnas, Oct 20 '21 at 14:23
that doesn't work, i have converted the data into draft format and then passed it to setEditorstate(updateState ) — learner62, Oct 21 '21 at 05:45
Able to add the feature but now the problem is , can't add text to the particular position its always adds to end of the string because of concat method, please provide a solution based on cursor position https://codesandbox.io/s/infallible-brattain-u9cqi?file=/src/App.js — learner62, Oct 21 '21 at 13:01
React Draft.js Wysiwyg: How to programmatically insert text at the cursor location?: https://stackoverflow.com/questions/59657399/react-draft-js-wysiwyg-how-to-programmatically-insert-text-at-the-cursor-locati — Moaaz Bhnas, Oct 21 '21 at 13:54

score 0 · Answer 1 · answered Oct 22 '21 at 07:45

Parent Component

import { useState } from "react";
import { EditorState, Modifier } from "draft-js";
import EditorComponent from "./Editor";

const App = () => {
  const initialState = () => EditorState.createEmpty();
  const [editorState, setEditorState] = useState(initialState);

  const sendTextToEditor = (text) => {
    setEditorState(insertText(text, editorState));
  };

  const insertText = (text, editorValue) => {
    const currentContent = editorValue.getCurrentContent();
    const currentSelection = editorValue.getSelection();

    const newContent = Modifier.replaceText(
      currentContent,
      currentSelection,
      text
    );

    const newEditorState = EditorState.push(
      editorValue,
      newContent,
      "insert-characters"
    );
    return EditorState.forceSelection(
      newEditorState,
      newContent.getSelectionAfter()
    );
  };
  const buttonValue = ["welcome", "Thank you", "react"];

  return (
    <div>
      {buttonValue.map((i) => (
        <button
          className="btn btn-primary"
          key={i}
          type="button"
          onClick={() => sendTextToEditor(i)}
        >
          {i}
        </button>
      ))}
      <EditorComponent
        editorState={editorState}
        setEditorState={setEditorState}
      />
    </div>
  );
};
export default App;

Editor Component

import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const EditorComponent = ({ editorState, setEditorState }) => {
  const onChange = async (value) => {
    setEditorState(value);
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={(value) => {
          onChange(value);
        }}
        stripPastedStyles
        ariaLabel="draftEditor"
      />
    </div>
  );
};
export default EditorComponent;

Refer CodeSandbox

How to add text based on click which is outside the Editor component , to the Editor

1 Answers1