Closed domingoladron closed 10 months ago
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:
gh repo clone udecode/plate-template
cd plate-template/
pnpm install
pnpm dev
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?
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.
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.
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.
What I've found so far:
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);
createSelectOnBackspacePlugin
With this enabled, backspace acts like a left arrow. Disabled / removed, and backspace functions as expected.//createParagraphPlugin(),
//createHeadingPlugin(),
// createLinkPlugin({
// //renderAfterEditable: LinkFloatingToolbar as RenderAfterEditable,
// }),
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 consoleUnhandled 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.
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.
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
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
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:
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
Error: 'Tooltip' must be used within 'TooltipProvider'
error. Adding a TooltipProvider appears to remove this error.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