@roast-cms/french-press-editor
Advanced tools
☕ An offline-first rich text editor component.
)
)
yarn add @roast-cms/french-press-editor
For complete API reference refer to docummentation.
french-press-editor was built for fast installation and with a pre-defined set of tools. It's meant to make a good editorial experience that has most of the required features of a typical blog or publication entry for your users with the absolute minimum required from you, the developer. This tool is extendable, via Slate's plugins infrastructure, however, it has some prerequisites and opinionated limitations.
index.js.In order for you to use this tool you'll need to have React.js development environment working on your machine. If you don't and don't know where to start, have a look at create-react-app. CRA will take care of everything that you need for you, though if you have your own system please make sure that you've got Babel transpiler, with an ability to load imports dynamically, understand spread operators, and this: babel-plugin-transform-class-properties.
There are a few peer dependencies that you will need to install and manage yourself in order to use french-press-editor. The reason for this is that they tend to be used in other parts of blog and publication apps, so to keep the bundle size as small as possible you are being forced to use a single version of those components throughout. Here's what you'll need:
"peerDependencies": {
"immutable": "^3.8.2",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-router-dom": "^4.2.2"
}
You can run yarn add immutable (and so fourth) on all of the above packages.
index.js in this folder gives you a complete example with full usage API (aside from importing custom components and plugins). However, to get started you don't need to build all that. Assuming you got your environment working and have all the dependencies installed this is what your component should have at minimum in order to render:
//
// tools
import React from "react"
import { render } from "react-dom"
import { ThemeProvider } from "styled-components"
import { BrowserRouter } from "react-router-dom"
//
// theming is required to properly render the styled-components
// elements, however you can change it as you wish;
// please refer to the documentation and the code in the below component's repo
// to figure out how to do this yourself
import { Sugar } from "@roast-cms/react-sugar-styled"
//
// editor and components that help render it
// [ note that in this case components are loaded from NPM,
// while in the example files they are loaded from project folder ]
import { FrenchPress, Wrapper } from "@roast-cms/french-press-editor"
import { Wrapper } from "@roast-cms/french-press-editor/dist/components/Wrapper"
//
// this component will render the editor
render(
<div>
<ThemeProvider theme={Sugar}>
<BrowserRouter>
<Wrapper>
<FrenchPress />
</Wrapper>
</BrowserRouter>
</ThemeProvider>
</div>,
window.document.getElementById("app")
)
The above, however, won't let you add add and store images within your content. To do that simply add the provided <Picture /> component as a prop:
// ...
import { FrenchPress } from "@roast-cms/french-press-editor"
import { Wrapper } from "@roast-cms/french-press-editor/dist/components/Wrapper"
import { Picture } from "@roast-cms/french-press-editor/dist/containers/Picture"
// ...
<FrenchPress components={{Picture}} />
// ...
)
If you've ever tried building a rich-text editorial experience for your users in-browser with ContentEditable, you may know what true torture feels like. Nobody wants that, hence tools like Slate, Quill, Draft.js, Prose Mirror, and many more exist to alleviate the pain. However, there's a learning curve and possible limitations to each system, which take time to learn and understand.
french-press-editor simplifies the task of building a functional and beautiful editorial experience for your users further by packaging all of the plugins, components, and directives necessary in one easy to install module (using Slate as a platform of choice). No ContentEditable bullshit, no lengthy research, no complex APIs.
This project is being actively developed and debugged. Expect breaking changes with every minor release (i.e.
v0.1.0tov0.2.0). Your input on how to make it easier to work with and customized is greately appreciated.
To see if this tool is right for you, please have a look through the list of specs below. Everything listed is pre-packaged.
localStorage and all image data is stored in browser database. Your users may edit everything whilst offline!french-press-editor is a ready-made, opinionated package, yet there is plenty that you can customize, far beyond CSS.
<p></p>.<h3></h3> to allow for semantic HTML structure in a document that has a title <h1></h1> and a subtitle <h2></h2>. Headings do not allow any formatting (links, bold, italic) within in order to maintain clean content structure.<blockquote></blockquote>. Quotes do not allow any formatting (links, bold, italic) within in order to maintain clean content structure. Quotes also do not allow images or any other blocks within to keep the documents clean and to-the-point.<Link></Link> using react-link-filter component built on top of React Router 4 with additional features, such as correcting user input (if they forgot to type http://), transforming absolute URLs on your domain to relative ones, and a proper function within React application that works in React Router 4 context.<hr />.<Picture />. With this package there is a ready-made component that you can use, which will properly render images in your document. You may, however, develop your own image components with a lot more options (such as different sizes, positions, captions etc.)<strong></strong>.<em></em>.*** on a new line and pressing Enter will create a divider line.# followed by space and text will convert paragraph into a heading after user moves to the next line with Enter key.> followed by space and text will convert paragraph into a quote after user moves to the next line with Enter key.... and pressing space will convert three dots into an ellipsis ….- then space again will turn dash into — (—).callbackStatus() will send you "ok" or "pending" indicating whether the content is being stored in browser or not.callbackError() will send you error string and reason (i.e. if the image is too large).editorRef() returns Slate Editor reference once it mounts.To learn more about what you can customize and build for french-press-editor to make it yours, check out the complete API guide.
If you have a feature request, bug report or a question, please submit an issue. Please keep in mind that this tool isn't built for everyone and it works best when there are less features cluttering the experience and weighing down the package.
Pull requests are very much welcome. To get started with the code: clone the repo, run yarn install then yarn start and open up http://localhost:3002 in your browser.
Every folder in this repo has a README.md file to help you along.
){kind=logo}
FAQs
An offline-first rich text editor component.
The npm package @roast-cms/french-press-editor receives a total of 24 weekly downloads. As such, @roast-cms/french-press-editor popularity was classified as not popular.
We found that @roast-cms/french-press-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.