Inline link tool not showing up in Editorjs? Solution.

There was a problem i had faced while using editorjs , that inline link was not showing up. I was also using LinkTool of editorjs . Thats where the problem starts.

This was my code when inline link was not showing up

import InlineCode from "@editorjs/inline-code";
import LinkTool from "@editorjs/link";
import List from "@editorjs/list";
import Quote from "@editorjs/quote";
import Table from "@editorjs/table";

const EDITOR_TOOLS = {
  code: Code,
  header: {
    class: Header,
    shortcut: "CMD+H",
    inlineToolbar: true,
    config: {
      placeholder: "Enter a Header",
      levels: [2, 3, 4],
      defaultLevel: 2,
    },
  },
  paragraph: {
    class: Paragraph,
    // shortcut: 'CMD+P',
    inlineToolbar: true,
  },
  link:LinkTool,
  inlineCode: InlineCode,
  table: Table,
  list: List,
};
function Editor({ data, onChange, holder }) {
  const ref = useRef();
  useEffect(() => {
    if (!ref.current) {
      const editor = new EditorJS({
        holder: holder,
        placeholder: "Start writting here..",
        tools: EDITOR_TOOLS,
        data,
        async onChange(api, event) {
          const content = await api.saver.save();
          onChange(content);
        },
      });
      ref.current = editor;
    }
    return () => {
      if (ref.current && ref.current.destroy) {
        ref.current.destroy();
      }
    };
  }, []);

  return (
    <>
      <div
        id={holder}
        style={{
          width: "100%",
          minHeight: 500,
          borderRadius: " 7px",
          background: "fff",
        }}
      />
    </>
  );
}

export default Editor;

After searching a lot , i found the problem was LinkTool was conflicting with the editorjs link .

Here is how you can fix it ,

You have to import ‘Linktool’ by different name i.e ‘linktool’ or something else . Don’t use ‘link’

Fix : linktool:LinkTool, // — this is where you need to change

Full code below:

// Full code
import InlineCode from "@editorjs/inline-code";
import LinkTool from "@editorjs/link";
import List from "@editorjs/list";
import Quote from "@editorjs/quote";
import Table from "@editorjs/table";

const EDITOR_TOOLS = {
  code: Code,
  header: {
    class: Header,
    shortcut: "CMD+H",
    inlineToolbar: true,
    config: {
      placeholder: "Enter a Header",
      levels: [2, 3, 4],
      defaultLevel: 2,
    },
  },
  paragraph: {
    class: Paragraph,
    // shortcut: 'CMD+P',
    inlineToolbar: true,
  },
  linktool:LinkTool, // -- this is where you need to change
  inlineCode: InlineCode,
  table: Table,
  list: List,
};
function Editor({ data, onChange, holder }) {
  const ref = useRef();
  useEffect(() => {
    if (!ref.current) {
      const editor = new EditorJS({
        holder: holder,
        placeholder: "Start writting here..",
        tools: EDITOR_TOOLS,
        data,
        async onChange(api, event) {
          const content = await api.saver.save();
          onChange(content);
        },
      });
      ref.current = editor;
    }
    return () => {
      if (ref.current && ref.current.destroy) {
        ref.current.destroy();
      }
    };
  }, []);

  return (
    <>
      <div
        id={holder}
        style={{
          width: "100%",
          minHeight: 500,
          borderRadius: " 7px",
          background: "fff",
        }}
      />
    </>
  );
}

export default Editor;

Learn how to use editorjs in nextjs here : https://medium.com/@abhii5496/how-to-use-editorjs-in-nextjs-3ba6ed7a5c84

Happy coding , any error? just ask