How to implement a Notion style editor with tiptap?

[jagan-blip]

Custom Document Top Node with Keymap Issues

We have implemented a custom document top node that includes drag handles, an add button for new lines, and a slash menu. However, we are encountering issues with the custom keymap used to handle the Enter key behavior. Specifically, the behavior of bullet lists, numbered lists, and code blocks is not as expected when nodes with nesting, like code blocks or block quotes, are present.

When pressing on an empty node inside bullet list It should create a new RootBlock below, And In Codeblock we cannot type multiple lines pressing enter is creating a new RootBlock instead.

Screencast.from.04-01-24.05.51.53.PM.IST.webm

Custom RootBlock Node Extension

import { mergeAttributes, Node } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";

import RootBlockComponent from "./root-block-component";

// Extend the Commands interface to include RootBlockCommands
declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    RootBlockCommands: {
      setRootBlock: (position?: number) => ReturnType;
    };
  }
}

// Create and export the RootBlock node
export const RootBlock = Node.create({
  name: "rootblock",
  group: "rootblock",
  content: "block", // Ensure only one block element inside the rootblock
  draggable: true, // Make the node draggable
  selectable: false, // Node isn't selectable
  inline: false, // Node is a block-level element
  priority: 1000, // Priority for node resolution
  defining: true,

  // Default options for the node
  addOptions() {
    return {
      HTMLAttributes: {},
    };
  },

  // Define commands specific to the RootBlock node
  addCommands() {
    return {
      setRootBlock:
        (position) =>
        ({ state, chain }) => {
          const {
            selection: { from },
          } = state;

          // Determine the insertion position
          const pos = position !== undefined || position !== null ? from : position;

          // Insert a new rootblock node and focus on it
          return chain()
            .insertContentAt(pos, {
              type: this.name,
              content: [
                {
                  type: "paragraph",
                },
              ],
            })
            .focus(pos + 4)
            .run();
        },
    };
  },

  // Define keyboard shortcuts for the RootBlock node
  addKeyboardShortcuts() {
    return {
      "Mod-Alt-0": () => this.editor.commands.setRootBlock(),
    };
  },
  // Rules to parse the node from HTML
  parseHTML() {
    return [
      {
        tag: 'div[data-type="rootblock"]',
      },
    ];
  },

  // Rules to render the node to HTML
  renderHTML({ HTMLAttributes }) {
    return [
      "div",
      mergeAttributes(HTMLAttributes, { "data-type": "rootblock" }),
      0,
    ];
  },

  // Use ReactNodeViewRenderer to render the node view with the RootBlockComponent
  addNodeView() {
    return ReactNodeViewRenderer(RootBlockComponent);
  },
});

export default RootBlock;

Custom RootBlock component

import { DragHandleDots2Icon, PlusIcon } from "@radix-ui/react-icons";
import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";

// Define the RootBlockComponent, which will serve as a custom Node View in the Tiptap editor
const RootBlockComponent: React.FC<NodeViewProps> = ({
  node,
  getPos,
  editor,
}) => {
  // Function to create a new node immediately after the current node
  const createNodeAfter = () => {
    // Calculate the position right after the current node
    const pos = getPos() + node.nodeSize;

    // Use the editor's command to insert a new "rootblock" node at the calculated position
    /*   editor.commands.insertContentAt(pos, {
      type: "rootblock",
      content: [
        {
          type: "paragraph",
        },
      ],
    }); */
    editor
      .chain()
      .insertContentAt(pos, {
        type: "rootblock",
        content: [
          {
            type: "paragraph",
          },
        ],
      })
      .focus(pos + 3)
      .run();
  };

  // Render the custom node view
  return (
    <NodeViewWrapper
      as="div"
      className="group relative mx-auto flex w-full gap-2"
    >
      {/* Container for buttons that appear on hover */}
      <div
        className="absolute -left-12 top-[-2px] flex w-12 gap-1 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100"
        aria-label="left-menu"
      >
        {/* Button to add a new node after the current node */}
        <button
          type="button"
          onClick={createNodeAfter}
          className=" p-[2px] hover:bg-button-hover-bg rounded-md "
        >
          <PlusIcon className="scale-[1.3] text-app-med" />
        </button>
        {/* Draggable handle button to allow rearranging nodes */}
        <button
          draggable
          data-drag-handle
          className="cursor-grab p-[2px] hover:bg-button-hover-bg rounded-md py-2"
        >
          <DragHandleDots2Icon className="scale-[1.3] text-app-med" />
        </button>
      </div>
      {/* Area where the node's actual content will be rendered */}
      <NodeViewContent contentEditable={true} className="w-full" />
    </NodeViewWrapper>
  );
};

export default RootBlockComponent;

Custom keymap

import { Extension } from "@tiptap/core";

// Extend the Commands interface to include the handleEnterKey command for Keymap
declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    Keymap: {
      handleEnterKey: () => ReturnType;
    };
  }
}

// Define and create the Keymap extension
const Keymap = Extension.create({
  name: "Keymap",

  // Define custom commands for the extension
  addCommands() {
    return {
      handleEnterKey:
        () =>
        ({ state, chain }) => {
          const { selection, doc } = state;
          const { $from, $to } = selection;

          // Check if the cursor is within a rootblock, no selection is made, and if it's at the end of a block.
          if (
            $from.node(-1).type.name === "rootblock" &&
            $from.parent.type.isBlock &&
            $to.pos === $from.pos
          ) {
            if ($to.pos === $from.end()) {
              console.log("creating a new block", $from.parent.type);
              // Create and focus on a new root block with a paragraph inside at the cursor position
              return chain()
                .focus()
                .insertContentAt($from.pos, {
                  type: "rootblock",
                  content: [
                    {
                      type: "paragraph",
                    },
                  ],
                })
                .focus($from.pos + 4)
                .run();
            } else {
              console.log("Cursor is not at the end of the block");

              let currentActiveNodeTo = -1;

              // Iterate over document nodes to find the active node's end position.
              doc.descendants((node, pos) => {
                if (currentActiveNodeTo !== -1) return false;
                if (node.type.name === "rootblock") return;

                const [nodeFrom, nodeTo] = [pos, pos + node.nodeSize];
                if (nodeFrom <= $from.pos && $to.pos <= nodeTo)
                  currentActiveNodeTo = nodeTo;

                return false;
              });

              const content = doc
                .slice($from.pos, currentActiveNodeTo)
                ?.toJSON().content;

              // Replace content from cursor to the end of the block with new content.
              return chain()
                .focus()
                .insertContentAt(
                  { from: $from.pos, to: currentActiveNodeTo },
                  {
                    type: "rootblock",
                    content,
                  }
                )
                .focus($from.pos + 4)
                .run();
            }
          }
          console.log("here ?");

          // If conditions aren't met, use the default Enter behavior
          return false;
        },

      selectTextWithinNodeBoundaries:
        () =>
        ({ editor, commands }) => {
          const { state } = editor;
          const { tr } = state;
          const startNodePos = tr.selection.$from.start();
          const endNodePos = tr.selection.$to.end();
          return commands.setTextSelection({
            from: startNodePos,
            to: endNodePos,
          });
        },
    };
  },

  // Define keyboard shortcuts for the extension
  addKeyboardShortcuts() {
    return {
      "Mod-a": ({ editor }) => {
        const { state } = editor;
        const { tr } = state;
        const startSelectionPos = tr.selection.from;
        const endSelectionPos = tr.selection.to;
        const startNodePos = tr.selection.$from.start();
        const endNodePos = tr.selection.$to.end();
        const isCurrentTextSelectionNotExtendedToNodeBoundaries =
          startSelectionPos > startNodePos || endSelectionPos < endNodePos;
        if (isCurrentTextSelectionNotExtendedToNodeBoundaries) {
          editor.chain().selectTextWithinNodeBoundaries().run();
          return true;
        }
        return false;
      },
      Enter: ({ editor }) => editor.commands.handleEnterKey(), // Call handleEnterKey command on Enter key press
    };
  },
});

export default Keymap;

[litingyes]

You can see if my attempt can solve your problem ? https://github.com/litingyes/note-editor/blob/main/packages/tiptap-extension-block-container/src/blockContainer.ts#L64

[remusris]

I also ran into this problem too, I think it has something to do with using a rootblock.

This is how I solved it, don't remember the specifics of why or how it worked though.

import { Extension } from "@tiptap/core";
import { Plugin, TextSelection } from "prosemirror-state";
import enterKeyListenerStore from "~/zustand/enterKeyListener";

// Extend the Commands interface to include the handleEnterKey command for Keymap
declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    Keymap: {
      handleEnterKey: () => ReturnType;
    };
  }
}

// Define a helper function to manage local storage
const localStorageKey = "lastEnterPress";

function getLastEnterPress() {
  const data = localStorage.getItem(localStorageKey);
  return data ? JSON.parse(data) : { count: 0, pos: null };
}

function setLastEnterPress(data) {
  localStorage.setItem(localStorageKey, JSON.stringify(data));
}

// Define and create the Keymap extension
const Keymap = Extension.create({
  name: "Keymap",

  // Define custom commands for the extension
  addCommands() {
    return {
      handleEnterKey:
        () =>
          ({ state, chain }) => {
            const { selection, doc, schema } = state;
            const { $from, $to } = selection;
            const isCodeBlock = $from.parent.type === schema.nodes.codeBlock;
            let lastEnterPress = getLastEnterPress();

            console.log("newCount", lastEnterPress);

            enterKeyListenerStore.getState().setEnterState(true)

            if ($from.node(-1).type.name === "rootblock" && isCodeBlock) {
              let lastEnterPress = getLastEnterPress(); // Get the latest value from local storage

              // Increment count for each Enter press within the code block
              const newCount = lastEnterPress.count + 1;

              // Update lastEnterPress in local storage
              setLastEnterPress({ count: newCount, pos: $from.pos });

              if (newCount >= 3) {
                // Reset the counter in storage
                setLastEnterPress({ count: 0, pos: null });

                // Create a new rootblock with a paragraph after the code block
                return chain()
                  .insertContentAt($from.pos, {
                    type: "rootblock",
                    content: [{ type: "paragraph" }],
                  })
                  .focus($from.pos + 4)
                  .run();
              }

              console.log("about to insert new line in code block")

              // Insert a newline in the code block
              return chain().insertContent("\n").run();
            } else {
              // Reset the counter when not in a code block
              setLastEnterPress({ count: 0, pos: null });
            }

            // Reset lastEnterPress when not in a code block
            setLastEnterPress({ count: 0, pos: null });

            // Check if the cursor is within a rootblock, no selection is made, and if it's at the end of a block.
            if (
              $from.node(-1).type.name === "rootblock" &&
              $from.parent.type.isBlock &&
              $to.pos === $from.pos
            ) {
              if ($to.pos === $from.end()) {
                // Create and focus on a new root block with a paragraph inside at the cursor position
                return chain()
                  .insertContentAt($from.pos, {
                    type: "rootblock",
                    content: [
                      {
                        type: "paragraph",
                      },
                    ],
                  })
                  .focus($from.pos + 4)
                  .run();
              } else {
                console.log("Cursor is not at the end of the block");

                let currentActiveNodeTo = -1;

                // Iterate over document nodes to find the active node's end position.
                doc.descendants((node, pos) => {
                  if (currentActiveNodeTo !== -1) return false;
                  if (node.type.name === "rootblock") return;

                  const [nodeFrom, nodeTo] = [pos, pos + node.nodeSize];
                  if (nodeFrom <= $from.pos && $to.pos <= nodeTo)
                    currentActiveNodeTo = nodeTo;

                  return false;
                });

                const content = doc
                  .slice($from.pos, currentActiveNodeTo)
                  ?.toJSON().content;

                // Replace content from cursor to the end of the block with new content.
                return chain()
                  .insertContentAt(
                    { from: $from.pos, to: currentActiveNodeTo },
                    {
                      type: "rootblock",
                      content,
                    }
                  )
                  .focus($from.pos + 4)
                  .run();
              }
            }

            // Reset lastEnterPress when not in a code block
            // lastEnterPress = { count: 0, pos: null };
            setLastEnterPress({ count: 0, pos: null });

            // If conditions aren't met, use the default Enter behavior
            return false;
          },
    };
  },

  // Add a ProseMirror plugin to handle all keydown events
  addProseMirrorPlugins() {
    return [
      new Plugin({
        props: {
          handleKeyDown: (view, event) => {
            console.log("handleKeyDown", event.key);

            // Check if the key pressed is not Enter
            if (event.key !== "Enter") {
              // Update lastEnterPress when a non-Enter key is pressed
              setLastEnterPress({ count: 0, pos: null });
              let lastEnterPress = getLastEnterPress();
              console.log("newCount of lastEnterPress", lastEnterPress);
            }

            // Return false to indicate that this keydown event is not handled here
            // and should be propagated to other keydown handlers (including the default ones)
            return false;
          },
        },
      }),
      // ... [Include other plugins if needed] ...
    ];
  },

  // Define keyboard shortcuts for the extension
  addKeyboardShortcuts() {
    return {
      Enter: ({ editor }) => editor.commands.handleEnterKey(), // Call handleEnterKey command on Enter key press
    };
  },
});

export default Keymap;

[laowangdefangjian]

请问你的问题解决了吗？我也遇到了列表项li前需要手柄的需求，我目前的代码结构跟你是类似的

[litingyes]

请问你的问题解决了吗？我也遇到了列表项li前需要手柄的需求，我目前的代码结构跟你是类似的

If you just want a handle, you can try this：https://github.com/NiclasDev63/tiptap-extension-global-drag-handle

[laowangdefangjian]

~/zustand/enterKeyListener
May I ask what this file is? Can you provide a more complete case study? I also encountered the problem of entering a carriage in the list item, just like the problem with the initiator

[laowangdefangjian]

@remusris Is it convenient for you to reply to me? I have encountered a bottleneck，thanks

[laowangdefangjian]

May I ask if your issue has been resolved? I also encountered a requirement for a controller before the list item li, and my current code structure is similar to yours

[nperez0111]

We have the notion like template for this https://templates.tiptap.dev

[nperez0111]

@tiptap-pro/extension-drag-handle can be used in Vue. The react version just allows for a better react integration. Partial docs for the one you want here: #4814 (comment)

[nperez0111]

Code is not open source but with a free tiptap account you can be invited to the repo to see it. Cannot be used for commercial purposes unless you subscribe to tiptap and uses several pro extensions but a free account will give enough permissions to run locally

[devnaumov]

@nperez0111 Maybe you could sell the Notion template as a one-time purchase or offer it as a bonus for GitHub sponsors. Some people might not need AI or collaborative features but may still want the Notion template. What do you think?

[markolofsen]

@nperez0111 Maybe you could sell the Notion template as a one-time purchase or offer it as a bonus for GitHub sponsors. Some people might not need AI or collaborative features but may still want the Notion template. What do you think?

Here if better and free https://novel.sh/

[Tholkappiar]

Here if better and free https://novel.sh/

@markolofsen yeah but I am struggling to implement that in my react app with the vite tool ! coz I can't find the editor component in the novel library !