0.0.5 • Published 2 years ago
@lexi-kit/shell v0.0.5
Shell
This package exports primitives for dealing with the shell of a text editor.
You can consider as the shell the most inner part of the editor before the actual contenteditable itself.
In a way, the shell is the editor without the contenteditable.
Note that you are not required to use the shell primitives to build your editor, you can use them as a reference or as a starting point and there are tons of ways of getting away without using them.
Features
ContentView
- The root component that wraps the contenteditable.ContentEditable
- The contenteditable itself, this component is the same as the one exported at@lexical/react/LexicalContentEditable
with the exception that this one automatically connects itself with the editor theme.ContentViewProvider
- You can wrap your editor with this provider to make sure that the ContentView automatically binds the ContentView HTML element to the context state.useContentViewContext
- A hook to access the ContentView context state. This is useful if you need to do some manual DOM manipulation or positioning elements.
Installation
$ yarn add @lexi-kit/shell
# or
$ npm install @lexi-kit/shell
# or
$ pnpm add @lexi-kit/shell
Usage
import React from "react";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import * as Shell from "@lexi-kit/shell";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
function MyEditor() {
return (
<LexicalComposer initialConfig={{ /* your config here */ }}>
<Shell.ContentViewProvider>
<div className="my-editor">
{/* other plugins here... */}
{/* A toolbar maybe? */}
<RichTextPlugin
{/* This Shell.ContentView will automatically bind the view element
to the ContentViewProvider and after that the element will be available anywhere in the editor.
*/}
contentEditable={
<Shell.ContentView>
<Shell.ContentEditable />
</Shell.ContentView>
}
placeholder={<span>Type something...</span>}
/>
{/* other plugins here... */}
</div>
</Shell.ContentViewProvider>
</LexicalComposer>
);
}
You can also obviously keep track of the ContentView element yourself.
We expose a prop on the ContentView component named onSetupView
that you can use to get the element in a callback.
// imports...
import { useState } from "react";
function MyEditor() {
const [viewElement, setViewElement] = useState<HTMLElement | null>(null);
return (
<LexicalComposer initialConfig={{ /* your config here */ }}>
<Shell.RawContentViewProvider value={{ contentView: viewElement, setView: setViewElement }}>
<div className="my-editor">
{/* other plugins here... */}
{/* A toolbar maybe? */}
<RichTextPlugin
{/* This Shell.ContentView will automatically bind the view element
to the ContentViewProvider and after that the element will be available anywhere in the editor.
*/}
contentEditable={
<Shell.ContentView onSetupView={(viewEl: HTMLElement) => {
setViewElement(viewEl);
// Note that you don't need this callback here
// if you are using the RawContentViewProvider
// because it will automatically set the element
// for you in the context.
// but you can still use it if you want to do.
}}>
<Shell.ContentEditable />
</Shell.ContentView>
}
placeholder={<span>Type something...</span>}
/>
{/* other plugins here... */}
</div>
</Shell.RawContentViewProvider>
</LexicalComposer>
);
}
0.0.6-next.0
2 years ago
0.0.5
2 years ago
0.0.5-next.2
2 years ago
0.0.5-next.1
2 years ago
0.0.5-next.0
2 years ago
0.0.4
2 years ago
0.0.4-next.4
2 years ago
0.0.4-next.3
2 years ago