Issues creating a base editor from the interactive builder (styles and backspace key binding)

[domingoladron]

Description

So, I tried spinning up the plate editor from the interactive builder. I went with defaults across the board (all plugins, all components) building a next.js app.

I followed the instructions to create the application, and noted a few things:

1. I added the full code for the plate editor to a file named PennableEditor.tsx
2. I edited the default page.tsx to ONLY include this one component

So, first error is that starting the app in dev mode gives you an immediate error Error: 'Tooltip' must be used within 'TooltipProvider'
I add a ToolTipProvider to my PennableEditor.tsx, and this resolves this issue.

Upon launching the editor in ANY browser (see details on OS and browser below) we get the following editor. Styling appears...broken. The basic layout of the editor (likely due to missing styling / theming) looks incorrect.

So, I stole the default page.tsx from your github template repo

https://github.com/udecode/plate-template/blob/main/src/app/page.tsx

And added my component to this page.

Styles appear better but still with transparencies where there likely SHOULDN'T be transparency.

So, realising there must be something missing in regard to the styling / transparency issue, I figured I'd start over and create my repo fresh from your templated repo

https://github.com/udecode/plate-template

As I guessed, the templated version did give me better styles / no transparency issues.

At this point, I began typing in the editor. Most everything appears to work, BUT, backspace does not work as you'd expect.

On any standard keyboard, you'd expect backspace to wipe out characters. Instead, backspace just moves the caret position back without deleting. This wee animated gif shows you what happens in any browser when I backspace on my keyboard.

Steps to Reproduce

You can pull the source code from this repo / branch
https://github.com/domingoladron/pennable-editor/tree/bug/backspace-and-transparency

Interactive Builder

1. Use the interactive builder to create a base next.js app
2. Try to start up your app. You will get the Error: 'Tooltip' must be used within 'TooltipProvider' error. Adding a TooltipProvider appears to remove this error.
3. Start the app.
4. Styling is not proper, and even using the page.tsx from your template does not remove all styling issues (particularly transparencies on the toolbars)

Interactive Builder or Templated Repo

No matter whether you build the app from the interactive builder or simply clone the templated repo, when run up using next dev you will note that the backspace key acts like an arrow left key, so rather than deleting characters, it simply moves the caret to the left.

Expected Behavior

Clearly, the expected behaviour is that the backspace key acts as a backspace key.

In addition, it'd be preferable if the interactive builder version of the application will render a styled and ready-to-go editor much more in-line with the templated repo version.

Environment

• slate: "^0.100.0",
• slate-react: "^0.101.0"
• browser: chrome (119.0.6045.160), firefox (119.0.1), edge (119.0.2151.72)
• yarn: 1.22.19
• node: v20.0.0

[12joan]

No matter whether you build the app from the interactive builder or simply clone the template repo, when run up using next dev you will note that the backspace key acts like an arrow left key, so rather than deleting characters, it simply moves the caret to the left.

I can't reproduce this on the template.

Here's what I'm doing:

1. gh repo clone udecode/plate-template
2. cd plate-template/
3. pnpm install
4. pnpm dev
5. Open http://localhost:3000/ in macOS Chrome
6. Type "Hello world"
7. Press backspace repeatedly

Backspace works as expected for me, and there are no styling issues.

@domingoladron Can you push the code you're getting from the interactive builder to a public GitHub repo?

[domingoladron]

Following your instructions to the letter, you are correct. The backspace DOES appear to work when I clone right off the template. However, first thing I noted after doing so is that the plate editor in the repo template has no plugins setup.

// from components/plate-editor.tsx
const plugins = createPlugins([], {
  components: {},
});

This leads me to believe there is some issue in a plugin or component which is nullifying the default backspace behaviour.

I'll upload a public repo from the interactive builder shortly.

[domingoladron]

Okay, repo can be found here:

https://github.com/domingoladron/plate-template-app

So I created my repo from your template, then followed the default instructions to get the plugins wired up from your interactive builder page.

I chose for ALL plugins and ALL components. I installed all dependencies, and replaced plate-editor.tsx with the final contents at the end of the interactive builder tutorial.

First, there appears to be a bug in the link-floating-toolbar.tsx as when I start up the app, I get the following error:

- error TypeError: Cannot read properties of null (reading 'id')
    at LinkFloatingToolbar (./src/components/plate-ui/link-floating-toolbar.tsx:42:104)
    at Array.forEach (<anonymous>)

After commenting this out, I found that it's not simply this plugin which bombs not finding the editor. Once I comment out the above plugin, then slate begins complaining that the editor is null, so I'm assuming something even more fundamental is not working.

- error node_modules\.pnpm\slate@0.94.1\node_modules\slate\dist\index.js (2055:0) @ Object.isInline
- error TypeError: Cannot read properties of null (reading 'isInline')
    at Array.forEach (<anonymous>)
    at Array.some (<anonymous>)

So at this point, I can't even get the app to fire up using your template and the interactive builder.

[domingoladron]

NOTE: If I revert the page-editor.tsx to its default value prior to adding the interactive-builder code, again it renders np.

I am suspecting one or more plugins are not playing well together. I will attempt to one-at-a-time remove plugins until I can identify the offender.

[domingoladron]

What I've found so far:

1. The issue is definitely related to at least one plugin and/or the FloatingToolbar component. Using the full contents from the interactive builder with NO plugins and NO FloatingToolBar and the editor works, renders, backspaces, and so on.
2. Enabling the FloatingToolbar inside Plate and we get the following error

TypeError: editor is null
src\components\plate-ui\floating-toolbar.tsx (49:25) @ floatingToolbarState

  47 |   props: rootProps,
  48 |   hidden,
> 49 | } = useFloatingToolbar(floatingToolbarState);

3. The plugin which seems to be disabling the backspace deletion of characters is the rightly-named createSelectOnBackspacePlugin With this enabled, backspace acts like a left arrow. Disabled / removed, and backspace functions as expected.
4. going through the plugins one-by-one, they all appear to work when added back in with a few exceptions

//createParagraphPlugin(),
//createHeadingPlugin(),
// createLinkPlugin({
    //   //renderAfterEditable: LinkFloatingToolbar as RenderAfterEditable,
    // }),

• The createParagraphPlugin and createHeadingPlugin can be loaded, but if you then try to use them by selecting some text and trying to apply a heading or paragraph, you get a nextjs error at the console

Unhandled Runtime Error
TypeError: editor is null
 error node_modules\.pnpm\slate@0.94.1\node_modules\slate\dist\index.js (2055:0) @ Object.isInline
- error TypeError: Cannot read properties of null (reading 'isInline')
    at Array.forEach (<anonymous>)
    at Array.some (<anonymous>

I've already mentioned the error above when we attempt to load the createLinkPlugin with the LinkFloatingToolbar

Hopefully all this ramble helps.

[joseffsmith]

Thanks for this, I was also running into an issue using the playground template.

I think it was also the FloatingToolbar causing issues with the backspace key but I did the same by removing all plugins and I'm adding them back in one by one

[domingoladron]

I was able to get it all working, but yeah, some of the plugins from the interactive builder don't work on their own.

[zbeyens]

Thank you for the detailed report. Could you compare your code with https://github.com/udecode/plate-playground-template ? That playground enables most of the plugins.

[domingoladron]

Yeah, there are some pretty significant differences between my public repo (built from the plate template and then using the interactive builder code) and the playground template you sent through.

Ran a diff -briq plate-playground-template/ plate-template-app/ and got back this summary of the differences. Included in the file diffs.txt.

Mostly, it's files in the playground template that do not exist in the interactive builder code, but with some file diffs thrown in for good measure. A diff -bur plate-playground-template/ plate-template-app/ gives us a more detailed breakdown which I've included in this file: full-diffs.txt

Hope this helps

[domingoladron]

Look, at this point, I am able to get the Plate App up and running (particularly now that I know about the plate playround template), so I don't really need anything further. If there's something I can do, please ask, as I don't want to keep this ticket open for no reason, but also want to contribute anything I can to improve your great product.

Let me know

[zbeyens]

I've moved it to Discussions.

The interactive builder main use-case is to be used from the plate template using copy/pasting. I remember I could reproduce the playground using it, so I'll try again when I can.

[Juncollab]

I hit the same issue and it got resolved after removing that plugin so I believe the issue might be related to that plugin

[zbeyens]

Which plugin?

[domingoladron]

The createSelectOnBackspacePlugin causes backspace to act like a caret shift to left and right vs acting like a standard backspace which deletes characters as you backspace.