How to disable default paragraph tool

[ThemeMetro]

The question.

How to disable default paragraph tool?

[woren951]

You can specify default Tool.

From types/configs/editor-config.d.ts

  /**
   * This Tool will be used as default
   * Name should be equal to one of Tool`s keys of passed tools
   * If not specified, Paragraph Tool will be used
   */
  defaultBlock?: string;

[ThemeMetro]

You can specify default Tool.

From types/configs/editor-config.d.ts

  /**
   * This Tool will be used as default
   * Name should be equal to one of Tool`s keys of passed tools
   * If not specified, Paragraph Tool will be used
   */
  defaultBlock?: string;

but after this the toolbar option is not available to select another tool/block, that's why want disable this permanently.

[loic-bellinger]

I use defaultBlock: 'myParagraph', but the 'paragraph' tool coming with EditorJS is still being used. I don't understand why. Could you please help? It's like it cannot be overriden.

[haupv]

Hi all,
I've got the same issue. Is there any solution, please?!

[nberongoy]

I added defaultBlock but still text is showing in the toolbar is there a way to hide it ?

[nberongoy]

One solution I found was via css

 [data-item-name="paragraph"] {
        display: none;
      }

[misterjulo]

For those who come across this problem

just set paragraph to false like this

import MyCustomBlock from './plugins/MyCustomBlock'
new EditorJS({
      holder: 'editorjs',
      defaultBlock: 'customBlock'
      tools: {
        paragraph: false,
        customBlock: MyCustomBlock
      }
})

[ThemeMetro]

Is there nay update in this issue?

[ARH3]

Not that I've seen :(

[ThemeMetro]

Not that I've seen :(

It working fine in 2.15.0 but when i am trying to update by latest version getting issue,

[tiagorangel1]

Thank you so much, this works perfectly!

[digisomni]

This doesn't quite work, it throws an error about "readonly" mode not being available on "paragraph: false".

[tiagorangel1]

Maybe it's a problem with your paragraph implementation. For me, I gave up because there is no toolbar support for custom paragraphs. A sábado, 30/12/2023, 4:28 da tarde, Kalila ***@***.***> escreveu:

…

This doesn't quite work, it throws an error about "readonly" mode not being available on "paragraph: false". — Reply to this email directly, view it on GitHub <#1897 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQ3M5XTPV2OCSWAFNHJN2ELYMA6KZAVCNFSM5NHBNZD2U5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TOOJXHE2TINY> . You are receiving this because you commented.Message ID: ***@***.***>

[MuhammadAhmedev]

Facing issue when i false paragraph then I can't able to get block content

complete component :
import React, { useRef, useEffect, useState } from "react";
import TitleTool from "./tools/BigTitle/TitleTool";
import ButtonTool from "./tools/Button/ButtonTool";

export default function Editor({
initialContent,
data,
onChange,
}: {
initialContent?: any;
data?: any;
onChange?:any
}) {
const [editorLoaded, setEditorLoaded] = useState(false);
const editorRef = useRef(null);
const [loading, setLoading] = useState(false);

useEffect(() => {
const initializeEditor = async () => {
const EditorJS = (await import("@editorjs/editorjs")).default;
const Header = (await import("@editorjs/header")).default;
const Table = (await import("@editorjs/table")).default;
const List = (await import("@editorjs/list")).default;
const LinkTool = (await import("@editorjs/link")).default;
const RawTool = (await import("@editorjs/raw")).default;
const SimpleImage = (await import("@editorjs/simple-image")).default;
const Checklist = (await import("@editorjs/checklist")).default;
const Embed = (await import("@editorjs/embed")).default;
const Quote = (await import("@editorjs/quote")).default;
const Paragraph = (await import("@editorjs/paragraph")).default;

  const tools = {
    header: Header,
    table: Table,
    list: List,
    linkTool: LinkTool,
    raw: RawTool,
    image: SimpleImage,
    checklist: Checklist,
    embed: Embed,
    paragraph: false,
    // paragraph: Paragraph,
    quote: {
      class: Quote,
      config: {
        quotePlaceholder: "Quote here...",
        captionPlaceholder: "Author...",
      },
    },
    // title: TitleTool,
    // buttonTool: ButtonTool,
  };

  const editorInstance = new EditorJS({
    holder: "editorjs",
    autofocus: true,
    // paragraph: false,
    placeholder: "Let`s write an awesome story!",
    inlineToolbar: true,
    tools,
    // defaultBlock: "Text",
    data: initialContent
      ? {
          time: initialContent.time,
          blocks: initialContent.block.blocks,
        }
      : ({} as any),
  } as any);

  editorRef.current = editorInstance;
  setEditorLoaded(true);
};

initializeEditor();

return () => {
  if (editorRef.current) {
    editorRef.current.destroy();
  }
};

}, [initialContent]);

const save = async () => {
try {
setLoading(true);
if (editorRef.current) {
const outputData = await editorRef.current.save();
console.log('outputData', outputData)
// Save data to the database
return
try {
const saveInDb = await fetch("/api/post", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(outputData),
});
console.log("Save In DB Response:", saveInDb);
} catch (error) {
console.error(
"Error while saving editor content to the database:",
error
);
}
} else {
console.log("Editor is not initialized");
}
} catch (error) {
console.error("Error while saving editor content:", error);
} finally {
setLoading(false);
}
};

return (

<div
id="editorjs"
className="min-h-[50vh] min-w-[80%] border-[1px] rounded-md"
style={{ border: "1px solid lightgray", padding: "20px" }}
/>

{loading ? "Loading..." : "Submit"}

);
}

output :

[ThemeMetro]

I think, instead of relying on the paragraph block in Editor.js, it should use an empty block as the default.

[hirnlego]

Solution for me was to define a custom tool:

class MyParagraph {
    render()
    {
        return null;
    }

    save()
    {
        return null;
    }
}

and then replacing the default in the configuration:

tools: {
    paragraph: MyParagraph,
    // Other tools
}

[davegurnell]

It looks like the paragraph tool appears in a list of core tools that are always added to the user-supplied list if the user doesn't explicitly override them as suggested above. The code that does this is here in src/components/modules/tools.js.

Here's a yarn-patch compatible patch file that does the job on the ESM build that's shipped in version 2.30.8 on NPM. It's not an ideal solution but it's effective as a workaround for me at the moment:

diff --git a/dist/editorjs.mjs b/dist/editorjs.mjs
index 5a44e08549f1547de8550e38f2914dfab8d657ec..e773c1a800e0a32d38ef22cd4b716fa99e47698d 100644
--- a/dist/editorjs.mjs
+++ b/dist/editorjs.mjs
@@ -10391,11 +10391,11 @@ class Wn extends E {
         class: mo,
         isInternal: !0
       },
-      paragraph: {
-        class: fo,
-        inlineToolbar: !0,
-        isInternal: !0
-      },
+      // paragraph: {
+      //   class: fo,
+      //   inlineToolbar: !0,
+      //   isInternal: !0
+      // },
       stub: {
         class: jn,
         isInternal: !0

There are a couple of ways around this if the authors are willing to accept them as a PR:

• One possible approach would be to explicitly allow disabling of built-in tools by passing null or false in the config parameter as misterjulo suggested earlier in this thread (with an appropriate disclaimer that this might break things).

• Another possibility would be to add a second flag to disable the built-in tools (again, with an appropriate disclaimer).

[villeneuve-michael]

Any news on this? I'm currently using a CSS solution but it's not ideal! I would really love to either pass paragraph: false or simply not show it if we're overriding the default component (it could still be imported manually).

I don't mind working on the PR, would @neSpecc and the team be interested?