jodit / jodit/jodit-react

Link edit pop-up allways close on input focus

Open
#57 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
406
Forks
131
Avg merge
2h 32m
Merged PRs (30d)
2

Description

hey guys,
I implemented your editor in our application. Everything seems good sofar.
But while I was testing, I had the problem, that I couldn't edit link's which where insert with the insert link option.
The problem is, allways when I try to set the focus to one of the input-fields the pop-ups starts to close.
It sometimes happens even, when I do want to enter a new link. But that error seems inconstent.
The other (with editing a link), happens every time, no matter which ways I use to edit the link (either with the toolbar or the inline edit by the link)

Can anybody help with that?

By the way, I implemented everything today, so it is update.

import JoditEditor from 'jodit-react';

import { editorConfig } from './EditorConfig';

const Editor = ({ handleStateChanges, contentText, placeholderText }) => {
  let editorLanguage = navigator.language.slice(0, 2).toLowerCase();

  return (
    <JoditEditor
      value={contentText}
      config={editorConfig({ editorLanguage, placeholderText })}
      onBlur={entry => {
        handleStateChanges('contentText', entry);
      }} // only this option is used to update the content for performance reasons
      onChange={newContent => {}}
    />
  );
};

The editor config

export const editorConfig = ({ editorLanguage, placeholderText }) => ({
  buttons: toolbarButtons,
  buttonsMD: toolbarButtons,
  buttonsSM: toolbarButtons,
  buttonsXS: toolbarButtons,
  removeButtons: unneededButtons,
  language: editorLanguage,
  link: {
    noFollowCheckbox: false,
  },
  placeholder: placeholderText,
  readonly: false,
  showWordsCounter: false,
  showXPathInStatusbar: false,
  toolbarButtonSize: 'large',
});

const toolbarButtons = [ 'paragraph', '|', 'bold', 'italic', 'strikethrough', 'underline', 'link', '|', 'align', 'outdent', 'indent', 'ul',  'ol', '|', 'table', 'video', '|', 'undo', 'redo' ];

const unneededButtons = [ 'font', 'fontsize', 'brush', 'file', 'image', 'selectall', 'hr',
  'symbol', 'fullsize', 'print', 'about' ];

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the link-edit focus behavior through the JoditEditor component using the shown editorConfig, especially the link settings and toolbar buttons. Confirm the issue by editing an existing link and focusing each input; done means the popup stays open and the inputs remain usable.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.