editor-js / header Goto Github PK

A header is a whole container of introductory content, such as site logo, navigation, and search field. A heading is the title of a section of a document — headings create the document outline. In HTML, headers are represented by the <header> element and level headings are represented by <h1>–<h6>.

It looks like this repo refers to the latter. It might be helpful to reinforce established terminology and use "heading" instead of "header".

see: https://www.google.com/search?q=header+vs+heading

In EditorJs, you can switch a paragraph to header.

But once I add a header, I can not switch it back to paragraph. I need to delete the entire header and type in the paragraph again.

I have my own customised UI for the block tune menu and I'm rendering it in renderSettings(). But now I want to render the renderSettings() again in order to update my UI instantly. I have already called it once so, if I call it again I am getting an infinite rendering. I am using raw HTML dom elements to make my UI because the UI is a bit complex. Because of that, can't use the closeOnActivate API on my div tag.
Does anyone know how to avoid this situation or work around it?

renderSettings () {
div

return div;
}

I can not set heading with a tag.

Example:

<h2><a href="https://example.com">Show more</a></h2>

Thank you for your support !

 editor = new EditorJS({
        holder: id,
        onChange: async () => {
            if (editor) {
                const outputData = await editor.save()
                value.value = outputData.blocks
            }
        },

Dependencies:

"@editorjs/list": "^1.8.0",
"@editorjs/editorjs": "^2.26.4",
Google Chrome 113

I am customizing the header tool as per the requirements
I have added another div for my requirements other than the header element like this,

<div class="myWrapper">
    <h1>header element</h1>
    
    <!-- this will be extra div and can be toggled using block actions -->
    <div class="extraDiv">
         <!-- new code -->
    </div>
</div>

the problem is when it is added to editor.js and when we scroll between blocks using (up, down) arrow keys, it is also scrolling to the extraDiv I added, I dont want user to scroll to that element I newly added.

so for modified header block, it should scroll only to the header element skipping other elements

Is there any way we can avoid scrolling behavior for some of the elements from the created UI?

Step to reproduce:

1. Configure editor with a header as below:

  tools: {
    header: {
      class: Header,
      config: {
        placeholder: 'Enter a header',
        levels: [2, 3, 4],
        defaultLevel: 2
      }
    },
}

2. Create a header but do not enter any text
3. Move to next block and you will see the the placeholder "Enter a header" now as it's empty.
4. Now click on "Enter a header" to start typing. Error: The placeholder text vanishes but there is no cursor on the editor to accept text input.
5. Click again on the blank area where the placeholder text was to have the cursor. Now the header block accepts text input.

Expected behaviour: Clicking on placeholder text should immediately provide a cursor and start accepting text input without requiring the user to click the blank area again.

It seems like levels are hardcoded and cannot be set. What if I want to put H1 only?

We support 1—6 levels

Hi everyone,
first of all, thanks a lot for your hard work.

I have a Laravel project end I am integrating EditorJS and your header tool. This is my configuration so far:

const editor = new EditorJS( {
    /**
        * Id of Element that should contain Editor instance
        */
    holder: 'editorjs',
    /**
        * Tools list
        */
    tools: {
        header: {
            class: Header,
            inlineToolbar: [ 'link' ],
            config: {
                placeholder: 'Header'
            },
            shortcut: 'CMD+SHIFT+H'
        },
        /**
            * Or pass class directly without any configuration
            */
        image: {
            class: ImageTool,
            config: {
                uploader: {
                    /**
                        * Upload file to the server and return an uploaded image data
                        * @param {File} file - file selected from the device or pasted by drag-n-drop
                        * @return {Promise.<{success, file: {url}}>}
                        */
                    uploadByFile( file ) {
                        let formData = new FormData();
                        formData.append( 'file', file );

                        return new Promise( function ( resolve ) {
                            axios.post( '/admin/media', formData, {
                                headers: {
                                    'Content-Type': 'multipart/form-data'
                                }
                            } ).then( function ( response ) {
                                // The data from the request is available in a .then block
                                // We return the result using resolve.
                                resolve( response.data );
                            } ).catch( ( error ) => {
                                console.log( 'ERROR!!', error );
                            } ).then( () => {
                            } );
                        } )
                    },
                },
            },
        },
        list: {
            class: List,
            inlineToolbar: true,
            shortcut: 'CMD+SHIFT+L'
        },
        checklist: {
            class: Checklist,
            inlineToolbar: true,
        },
        quote: {
            class: Quote,
            inlineToolbar: true,
            config: {
                quotePlaceholder: 'Enter a quote',
                captionPlaceholder: 'Quote\'s author',
            },
            shortcut: 'CMD+SHIFT+O'
        },
        delimiter: Delimiter,
        embed: Embed,
        Marker: {
            class: Marker,
            shortcut: 'CMD+SHIFT+M',
        }
    },
} );

I am using Laravel mix (webpack) and extracting "@editorjs/editorjs" on my vendor.js file together with other libraries. Everything is looking good honestly. Only problem I am having is that the header is not "styling" itself when you choose it. Attached images:

Am I doing something wrong? I cannot really figure it out.

On the homepage of Editor.js you can see multiple levels of headings in the screenshot, see:

But after installing Editor.js and the header plugin I only have one "Heading" item in the toolbox. I found the following pull request but I guess this isn't merged into the default branch? When simply doing a npm i --save @editorjs/header I get the following:

How do I enable this feature?

Why do we need to save for dev? I would be needing this on runtime.
Note: Other plugins documented the same way too.

I am trying to use the initialBlock configuration in editorJS. But, I could not get any of the plugins to work with this configuration.

Get the errors like this -

Instructions state:

Download to your project's source dir

Upload folder dist from repository
Add dist/bundle.js file to your page.

However, there is no dist folder, and no packages or releases available.

Header tool doesn't work if I paste content with a heading,

for example from:

https://about.google/products/

Headings are shown but the component is invalid.

The content is not saved anywhere and the tools are lost on that block.

Example of selected text and the result in the editor in development mode:

When you hover the cursor over the placeholder text of the header tool, the cursor stays default. The expected behaviour is that the cursor should be a caret.
Also to be more specific, the cursor is caret for the rest of the Header block, its just the placeholder text which seems to have a problem.

Feauture

IMHO, when there's just one header level, there is no need to display the setting button:

References

https://github.com/editor-js/header/blob/master/src/index.js#L108-L120

There is mentioned a dist & bundle.js file but I cant seem to understand where is it located in the repo? Kindly help elaborate the process a bit more.
currently im doing import Header from 'path/to/index.js';
How do I get the dependencies

Problem

1. This tool was built in JavaScript to be a simplest example of Editor.js Tools API usage. Right now further enhancements requires more modern stack.
2. When using in TypeScript projects there is a problem with lack of type declarations. See codex-team/editor.js#2143

Task

We need to migrate this project to TypeScript and provide type declarations

I can use hotkeys like SHIFT+ENTER, CMD+B in a Header block. But when I save it resets. All formatting disappears.

So it has different look in the editor and in final HTML.

How to make hotkeys unavailable in the Header block?

There is no such problem in block Code https://github.com/editor-js/code

How to change the class name in the editor or disable the styles?

So i want to remove or change the classname ce-header, that the header can use the default page style.

When I write head named <React & balala> , the save method will return "<React & balala >".
I guess use innerHtml is becuse it will pass inner node to backend.

But if I wanna pass & to backend rather than &, is there any solution?

test page

I try
"header": { "Heading 1": "Cabeçalho 1" }
in tools, and blockTune but don't work...

I'm using HTML template engine that comes with go-fiber. I think I've set the configuration properly and other tools like quotes have been shown on the toolbox. But the Header tool still isn't showing.
This is my config js:

const editor = new EditorJS({
    holder: 'editorjs',
    autofocus: true,
    tools: {
        image: SimpleImage,
        quote: Quote,
        header: Header
    },
    data: {}
})

Here is my HTML:

   <head>
        <!-- Editor.js -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script>
        <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
        <!-- <script src="https://cdn.jsdelivr.net/npm/@editorjs/[email protected]"></script> -->
    </head>
    <body>
       <div id="editorjs"></div>
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="/js/scripts.js"></script>
        <!-- Custom js -->
        <script src="/js/editor.js"></script>
     </body>

Hi!

It's possible to override ICONs in the toolbar in the plugin config via the toolbox property. That works! But is it also possible to change it in the inline toolbar? Especially in the "convert to" dropdown?

I am trying to use a placeholder with the heading component. But, I am unable to select the first few letters of the heading. I found a PR around this Issue, but I am still facing this.

#30

Hi

On you docs you show that you just need to load the JS script

<sript src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></sript>
Then in Editor JS enter

 tools: {
            header: Header,
 }

The problem is that for obvious reasons this error happen: Uncaught ReferenceError: Header is not defined

Hello,

Can you add text formatting for this plugin? Like Italic, Underline, link, and convert into another style like on the paragraph plugin.

This plugin does not allow the user to press shift + Enter to create an inline break. This is supported in the paragraph plugin but not in this one yet! :-)

I believe the issue resides within the sanitize method. The Paragraph plugin has a "br" sanatize rule whereas this header plugin doesn't.

Proposed fix: extend plugin config to allow enabling of br tags in Header.

Hello,

I was going through the doc and spotted missing image here https://github.com/editor-js/header/blob/master/README.md?plain=1#L109

I would raise a PR with a new image but I don't know what was on the image.

how can I add H2 H3?
thanks

Any headings created have a br tag appended in the text.

I am creating a toggled UI
It will toggle between headers original UI and my custom UI depend upon a global variable's value.

So I created a block setting to toggle in between

So initially block will have only header element,
UI1:
<h2></h2>

after toggled it should be like
UI2:

<div class="newWrapper">
    <h2></h2>
    <div>my contents here</div>
</div>

after implementing this, it is working fine at first, but not toggling back later.

initially, UI1 is getting rendered then after toggling, UI2 is getting rendered
but after toggling again it should go back to UI1 but in this case, render is not getting called again and UI2 is always getting rendered.

In this scenario render is not getting called again in order to render new UI with conditions, is there any solution?

Following is the way I implemented it:

I have taken a global variables:
One to hold the anchorEditorWrapper toggle state which will be false initally
this._showAnchorEditor = false;``
and a wrapper div
this.wDiv = this.getUI();

So my render() method will be,

render() {
    return this.wDiv;
}

I have written a getUI() method, which will return appropriate UI depending on global flag variable as,

getUI(){
 return this._showAnchorEditor ? this.getWdiv() : this._element;
}

this._showAnchorEditor will be toggled using the block actions button.
this button will then call show() or hide() methods depend on this._showAnchorEditor variable state

In show() or hide() methods, I get new UI by using getUI() method and re-assign it to the global variable this.wDiv

showAnchorEditor() {
    this._showAnchorEditor = true;
 
   //create new UI
    const newWDiv = this.getUI();
    this.wDiv.parentNode.replaceChild(newWDiv, this.wDiv);
}

hideAnchorEditor() {
    this._showAnchorEditor = false;
    const newWDiv = this.getUI();
    this.wDiv.parentNode.replaceChild(newWDiv, this.wDiv);
    this.wDiv = newWDiv;
  }

Hi,
your module and editor.js is awesome!

Can you give me an example, how to override the Toolbar title?
I guess the property "toolbox" has to be used.

header: {
        class: Header,
        shortcut: 'CMD+SHIFT+H',
        config: {
            placeholder: 'Enter a header',
            levels: [2, 3, 4],
            defaultLevel: 3
          },
        toolbox: 'example'
      }

For a valid header block, can any of the text or level properties under any circumstances (now or in the future) be null or omitted? Or are any of the aforementioned properties guaranteed to always be present and non-null for this block to be valid?

Context: I'm a back-end .NET developer needing to parse Editor.js documents. The readme lists the aforementioned properties but does not explicitly guarantee that they will always be present and non-null. Back-end deserialization/parsing in strongly typed languages would be easier with some guarantees about which properties can and can not be null/omitted. (Ideally, any such guarantees should be added to the readme to ensure they are formalized and kept in the future.)