editor-js / underline Goto Github PK

When I type Scrs on chrome and underline it. I can underline but the chrome spellcheck immediately overrides the styles of the underline.

When applying underline with to a block of text that was created with "@editorjs/header". After the event of saving the document, or losing focus from the block and returning to further editing, it is impossible to remove the underline of the text. Since the tag is not removed from the currently selected text. This can be seen in the section of the attached video.

can we have shortcut for underline so it'll be like bold toolbar below?

right now the underline toolbar is like this

I think we can add something like this in the class component

static get shortcut() {
    return 'CMD+U'; //or 'CTRL+U'
}

npm install @editorjs/underline
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@editorjs%2funderline - Not found
npm ERR! 404
npm ERR! 404 '@editorjs/underline@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

I'm moving an entire book into JSON, and EditorJS seems like the perfect tool for the translation process. Feel like I'm so close, the only thing I need is for it to detect underlines on paste. I'm looking into paste substitions but it's a little over my head. Any help would be appreciated!

I noticed the bold tool that comes with the core editor uses execCommand and plugins are using another method.
there is a problem with the approach that prevent user from applying the tool to a sentence then tries to remove one word of this sentence.

The issue is that it tried to get the tags around the text which will remove the whole tag and replace the sentence with just the text that was highlighted/selected.

Anyway I ended up reimplementing this tool using execCommand

class Underline {
  static get isInline() { return true; }
  static get title() { return "Underline"; }
  static get sanitize() { return { U: {} }; }

  constructor({api}) {
    this.api = api;
    this.commandName = "underline";
    this.button = null;
  }

  render() {
    this.button = document.createElement('button');
    this.button.type = 'button';
    this.button.textContent = 'U';
    this.button.classList.add(this.api.styles.inlineToolButton);
    this.button.style.textDecoration = "underline";
    return this.button;
  }

  surround(range) { document.execCommand(this.commandName); }

  checkState(selection) {
    const isActive = document.queryCommandState(this.commandName);
    this.button.classList.toggle(this.api.styles.inlineToolButtonActive, isActive);
    return isActive;
  }
}

I used the same approach to implement strikethrough too

class StrikeTool {
  static get isInline() { return true; }
  static get title() { return "Strike"; }
  static get sanitize() { return { strike: {} }; }

  constructor({api}) {
    this.api = api;
    this.commandName = "strikeThrough";
    this.button = null;
  }

  render() {
    this.button = document.createElement('button');
    this.button.type = 'button';
    this.button.textContent = 'S';
    this.button.classList.add(this.api.styles.inlineToolButton);
    this.button.style.textDecoration = "line-through";
    this.button.style.fontWeight = "bold";
    return this.button;
  }

  surround(range) { document.execCommand(this.commandName); }

  checkState(selection) {
    const isActive = document.queryCommandState(this.commandName);
    this.button.classList.toggle(this.api.styles.inlineToolButtonActive, isActive);
    return isActive;
  }
}

When I save the data with underlined content. The JSON after retrieving is not getting displayed due to class="cdx-underline"

I can't override the icon or title of this plugin since it's using old syntax. I should be able to specify the toolbox when declaring the plugin.

I don't know how to describe it, sorry for the title.

When I double click and select a word, it works. Bu after clicking outside and come back by double clicking, it doesn't work.

Small video for the issue [^]

Thanks.