![](\"https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/af968e21ccb808a0a57c4a7827a44237.png\"/)
\n\nTypr was built with Tiptap for [Prototypr](https://prototypr.io) (so the npm package is called 'tiptypr'). I separated it to a standalone package to help streamline the process of adding an editing experience with publishing and autosaving to any React project.\n\nIt's currently live in use on [Prototypr](https://prototypr.io), a platform built with Strapi and Next.js, but it can be used with any Content Management System:\n\n---\n\n## Built for any CMS\n\nTypr editor is designed to seamlessly integrate with React projects (e.g. Next.js applications).\nThe editor is built to work with any CMS backend, allowing users to publish content to various systems such as WordPress, Strapi, or your custom CMS solution.\nIt's a headless editor that lets users publish to your CMS without requiring direct access to your backend admin dashboard.\n\nIf you need assistance adapting Typr to work better with your CMS, consider [sponsoring the project](https://github.com/sponsors/Prototypr). Your support can help drive further development and customization.\n\n---\n\n### Key Features\n\n- React Editor: Easily embed Typr in your React or Next.js projects.\n- Universal CMS Compatibility: Works with any CMS backend such a Strapi, Wordpress and custom CMS solutions.\n- Publish Workflow: Configurable draft/pending/publish workflow (useful for publishers who want to review content before publishing):\n - Save as draft/pending/publish\n - If post status is publish or pending, require confirmation before overwriting published version\n- Customizable UI: Offers a customizable user menu dropdown and editor navigation to match your application's design.\n- Configurable Fields: You can configure the settings panel to work with any fields in your CMS.\n- Admin only fields: You can hide fields from the settings panel, and the editor, if you want to use Typr as a content manager.\n\n---\n\n## Save modes\n\nThere's 2 publishing modes:\n\n- **Standard mode** (draft/publish): This is a more standard save mode, where the post status is set to draft by default, and the user can publish it themselves at any time. The content is saved to local storage, but you must press the save button to save changes. (todo add autosave for this mode)\n\n- **Publisher Flow** (draft/pending/publish): This mode is for publishing platforms where content needs to be reviewed by editors before publishing. There is a submit button for users to submit their content for review, which will set the post status to pending. An editor can then review the content and publish it, and its status will be set to publish. Publisher flow autosaves as you type.\n - To use the publisher flow, you also gotta provide `versioned_title` and `versioned_content` properties in your post object.\n\nTo enable the publisher flow, set `enablePublishingFlow={true}`.\n\n---\n\n## Example usage\n\nInstall the package, then import it along with the styles to your project ([see the demo project for examples](https://github.com/Prototypr/typr-editor-demo)):\n\n```\nimport Tiptypr from \"tiptypr\";\nimport { useTypr } from \"tiptypr\";\n\nimport \"tiptypr/dist/styles.css\";\n```\n\nIf you already have tailwind installed on your project, you can also add the following to your tailwind config instead of importing the styles:\n\n```\n content: [\n \"./node_modules/tiptypr/dist/**/*.{js,ts,jsx,tsx}\",\n ],\n```\n\nThen add the component to your app with the props you need to customise.. Here is an example:\n⚠️ Docs in progress - I need to add all the available props and explain how to use them.\n🎉 Aug 28 2024 update - Now the editor is a hook, and works just like Tiptap editor, also giving you access to the underlying Tiptap editor instance with `typr.editor` - this lets you use the editor like a normal Tiptap editor, but with added features like autosaving and publishing flows.\n\n```\n const typr = useTypr({\n requireLogin: editorProps.requireLogin,\n components: editorProps.components,\n theme: editorProps.theme,\n user: editorProps.user,\n enablePublishingFlow: editorProps.enablePublishingFlow,\n customPostStatuses: editorProps.customPostStatuses,\n postId: postId, // Update to use postId state\n postOperations: {\n load: async function ({ postId }) {\n const postObject = await loadPostById(parseInt(postId, 10));\n console.log(\"loaded\", postObject);\n return postObject;\n },\n save: async function ({ postId, entry }) {\n console.log(\"saving entry\", entry);\n const postObject = await savePost(\n entry,\n parseInt(postId, 10)\n );\n fetchData();\n return postObject;\n },\n create: async function ({ entry }) {\n console.log(\"creating post\", entry);\n const postObject = await createPost(entry);\n fetchData();\n return postObject;\n },\n },\n hooks: {\n onPostCreated: ({ id }) => {\n const params = new URLSearchParams(searchParams);\n params.set(\"id\", id);\n router.push(`?${params.toString()}`, undefined, {\n shallow: true,\n scroll: false,\n });\n },\n },\n });\n\n return (\n This is my first post
',\n published: true,\n publishedAt: '2022-01-01',\n author: 'John Doe',\n slug: 'my-first-post',\n id: '123',\n status: 'published',\n publishedAt: '2022-01-01',\n updatedAt: '2022-01-01',\n}\n```\n\n#### postOperations.save\n\nThis is where you save your post to your CMS. This function is called by Typr when autosaving.\n\nIt will call your save function with the following arguments:\n\n- entry\n- postId\n\nYour function should return the saved post object, or false if the save failed.\nThe returned postObject should have a `title`, `content`, and `status` attribute.\n\n```\nsave:async ({ entry, postId }) => {\n const postObject = await savePost({ entry, postId, user });\n return postObject;\n },\n```\n\n#### postOperations.create\n\nThis is where you create a new post in your CMS.\n\n```\ncreate:async ({ entry }) => {\n const postObject = await createPost({ entry, user });\n return postObject;\n }\n```\n\n## mediaHandler\n\nYou can add a config object to the mediaHandler prop to handle image uploads.\n\nExample:\n\n```\nmediaHandler:{\n config: {\n method: \"post\",\n url: `${process.env.NEXT_PUBLIC_API_URL}/api/users-permissions/users/article/image/upload`,\n headers: {\n Authorization: `Bearer ${user?.jwt}`,\n }\n },\n },\n```\n\nA file is created and appended to a form data object, which is sent to the url provided in the config provided like this:\n\n```\nconst file = new File([blob], `${files[0].name || \"image.png\"}`, {\n type: \"image/png\",\n});\n\nconst data = new FormData();\ndata.append(\"files\", file);\n\nconst configUpload = mediaHandler?.config;\nconfigUpload.data = data;\n\nawait axios(configUpload)\n .then(async function (response) {\n toast.success(\"Image Uploaded!\", {...\n```\n\n---\n\n## ⚠️ Docs in progress!\n\nThese docs are still in progress, and the project still needs testing.\n\n### Todo:\n\n- [ ] Save featured image in settings\n- [ ] Link embed needs api route to get embed data\n\n## Local development\n\nClone the folder `typr` and run `npm install`\n\n### Watch script\n\nUse watch script in package.json in typr to automatically rebuild on changes:\n\nrun `npm run watch` in the typr directory while developing.\n","readmeFilename":"README.MD"}