This project is a Markdown editor library. Thanks to it, it is possible to use Markdown in a simple and pleasant way. It is written using React, styled-components. React-hook-form was used to render forms alogn with yup. It's basically a Milkdown wrapper, but by using it you don't have to configure and install all the plugins you need because this library does everything for you, no configuration required.
The newest test version should be released there -> example page
Simply run:
yarn add altos-text-editor
and then import TextEditor
Note that this library has its own state and cannot be overwritten!
If you don't want to create another state, you may always use useRef
and pass ref
to the TextEditor
. There is getValue
function that will return actual text of the text editor.
import 'altos-text-editor/dist/style.css';
import { TextEditor } from 'altos-text-editor';
type AltosTextEditorProps = {
text: string
onSave: (text: string) => void
}
const AltosTextEditor: React.FC<AltosTextEditorProps> = ({ text, onSave }) => {
const [editorText, setEditorText] = useState(text);
const onDataChange = useCallback((value: string) => {
setEditorText(value);
}, [])
const onSaveButtonClick = () => {
onSave(editorText)
}
return (
<div>
<TextEditor data={text} mode="active" onDataChange={onDataChange} />
<button onClick={onSaveButtonClick}>Save</button>
</div>
)
}
This library cannot be rendered on the server! That's why it's important to render it only on the client side.
So basically.. the library will never and should not be rendered on the server.
How to use it with Next.js? It's not the best solution. We shouldn't use lazy loading components in this case, but it's a "now" solution. In the future, this must be changed and a better solution must be found
yarn add altos-text-editor
import 'altos-text-editor/dist/style.css';
import { TextEditor } from 'altos-text-editor';
const AltosTextEditor: React.FC = () => {
const onDataChange = useCallback(() => {}, [])
return (
<TextEditor data="" mode="active" onDataChange={onDataChange} />
)
}
export default AltosTextEditor;
AltosTextEditor
via dynamic import dynamic from 'next/dynamic'
const AltosTextEditorDynamic = dynamic(() =>
import('<--path_to_the_component->'), {
loading: () => <p>Loading...</p>,
ssr: false,
}
)
export default function MyComponent() {
return (
<div>
Hello!
<AltosTextEditorDynamic />
</div>
)
}
https://github.com/Milkdown/milkdown/issues/389#issuecomment-1050468759
For consistency and to ensure that each developer uses the same version of Node.js, we used nvm (How to install nvm on macos).
cd /your_path
git clone git@github.com:DareData/notion-style-editor.git
cd notion-style-editor
nvm use
yarn
yarn prepare
yarn start
If you want to share the current state of the library with external people, you can use Github Pages where a test version is placed for testing by testers.
To add a new version, you just need to run the following commands:
yarn build:pages
git commit -m"<--any_commit_message-->"
git push origin <--your_branch-->
Just remember that the changes you upload should be visible on github pages, your changes should be in the same branch on which github pages is currently "listening". Here you can check on which branch github is currently listening for changes.
If you want to build a library to be used by external applications, you need to run the following commands:
yarn build
Your library has been created in the dist
folder.
Check, whether onDataChange
and data
do not change their reference. When one of them changes, the old editor is "unmounted" and a new one is "mounted".
https://blog.logrocket.com/understanding-react-exhaustive-deps-linting-warning/
Unfortunately after using https://github.com/btd/rollup-plugin-visualizer, I noticed that both of these plugins are around 4MB
In addition, fonts take up quite a lot of space.
Moreover.. the code is not minified yet, so 60% of the size will be reduced. Also remember about compression, which will also reduce the size of the package. https://github.com/Milkdown/milkdown/issues/389#issuecomment-1050468759
Documentation is missing, however feel free to contribute and create that one :)