{"_id":"@bwly999/lotion","_rev":"1-57f45cc7855e9c0bf0d5659365b0e87f","name":"@bwly999/lotion","dist-tags":{"latest":"0.1.6"},"versions":{"0.1.5":{"name":"@bwly999/lotion","version":"0.1.5","type":"module","main":"lib/lolo.js","types":"types/src/index.d.ts","keywords":["vue","notion","editor","markdown"],"scripts":{"dev":"vite","build":"vue-tsc --noEmit && vite build","preview":"vite preview","test:unit":"vitest","test:e2e":"playwright test","coverage":"vitest run --coverage","build-bundle":"tsc && vite build --mode library && npx tailwind -c ./tailwind.config.cjs -i ./src/index.css -o lib/style.css"},"dependencies":{"@tiptap/extension-link":"^2.0.0-beta.195","@tiptap/extension-placeholder":"^2.0.0-beta.53","@tiptap/starter-kit":"^2.0.0-beta.191","@tiptap/vue-3":"^2.0.0-beta.96","fuse.js":"^6.6.2","oh-vue-icons":"^1.0.0-rc3","uuid":"^8.3.2","vue":"^3.2.37","vue-draggable-next":"^2.1.1"},"devDependencies":{"@babel/types":"^7.18.9","@playwright/test":"^1.25.1","@types/node":"^18.0.6","@types/sortablejs":"^1.13.0","@types/uuid":"^8.3.4","@vitejs/plugin-vue":"^3.0.0","@vitest/coverage-c8":"^0.22.1","@vue/test-utils":"^2.0.2","autoprefixer":"^10.4.7","happy-dom":"^6.0.4","postcss":"^8.4.14","tailwindcss":"^3.1.6","typescript":"^4.6.4","vite":"^3.0.0","vitest":"^0.22.1","vue-tsc":"^0.38.4"},"gitHead":"3ea19c0ed257a6ef5a502a4b324c7f34d7342499","description":"

🧴 Lotion

\r

\r An open-source Notion UI built with Vue 3.\r

\r

\r Try demo\r

\r

\r 🧴 Lotion\r

\r An open-source Notion UI built with Vue 3.\r

\r

\r Try demo\r

\r

\r 🧴 Lotion\r

\r An open-source Notion UI built with Vue 3.\r

\r

\r Try demo\r

\r

\r 🧴 Lotion\r\n

\r\n An open-source Notion UI built with Vue 3.\r\n

\r\n

\r\n Try demo\r\n

\r\n

\r\n \r\n \"follow\r\n \r\n \r\n \"chat\r\n \r\n \r\n \r\n \r\n \r\n
\r\n

\r\n\r\n> We shared about Lotion and recreating the Notion UI during [CityJS Singapore's pre-conference meetup on 27th July](https://twitter.com/dashibase/status/1554070309224861696?s=20&t=f9pkIgoxYUCgAL5tRTxK4Q)!\r\n\r\n

\r\n \r\n

\r\n\r\n## Features\r\n\r\n- [x] Block-based editor\r\n- [x] Drag to reorder blocks\r\n- [x] Basic Markdown-parsing including bold, italic, headings and divider\r\n- [x] Type '/' for command menu and shortcuts\r\n- [x] Register your own blocks\r\n- [x] Read-only mode\r\n\r\n## Getting Started\r\n\r\n**1. Install package**\r\n\r\n```bash\r\nnpm i @dashibase/lotion\r\n```\r\n\r\n**2. Basic Lotion editor**\r\n\r\nThe following Vue component will initialize a basic Lotion editor.\r\n\r\n```javascript\r\n\r\n\r\n```\r\n\r\n**3. Create custom components**\r\n\r\nSee `examples/CustomBlock.vue` for an example of a custom block.\r\n\r\nThe custom block component can accept the following props:\r\n- `block`: A `Block` object. See `src/utils/types.ts` for details.\r\n- `readonly`: A boolean, which sets whether the block/editor is in read-only mode.\r\n\r\nThe custom block component can also optionally expose the following methods (remember to call `defineExpose`):\r\n- `onSet`: This is triggered when a user converts any block into this blocktype. It is called before the blocktype is changed.\r\n- `onUnset`: This is triggered when a user converts this block into any blocktype. It is called before the blocktype is changed.\r\n\r\n```javascript\r\n\r\n\r\n\r\n```\r\n\r\n**4. Register custom components**\r\n\r\nSee `examples/Example.vue` for an example of registering a custom block.\r\n\r\nAfter creating the custom component, register it as follows:\r\n\r\n```javascript\r\nimport CustomBlock from './CustomBlock.vue'\r\nimport { addIcons } from \"oh-vue-icons\"\r\nimport { FaPumpSoap } from \"oh-vue-icons/icons\"\r\nimport { registerBlock } from '@dashibase/lotion'\r\n\r\n// Add the icon (from oh-vue-icons.js.org/)\r\naddIcons(FaPumpSoap)\r\n// Register the block\r\n// registerBlock('', '', , 'BLOCK_ICON')\r\nregisterBlock('LOTION', 'Moisturize', CustomBlock, 'fa-pump-soap')\r\n\r\n```\r\n\r\nAfter that, you should be able to see the custom block when the user opens the menu to switch to different blocks.\r\n\r\n## Contributing\r\n\r\n**1. Clone this repository, go to the root directory and install packages**\r\n\r\n```bash\r\ngit clone https://github.com/dashibase/lotion\r\ncd lotion\r\nnpm i\r\n```\r\n\r\n**2. Run dev**\r\n\r\n```bash\r\nnpm run dev\r\n```\r\n\r\nIf you head to http://localhost:5173 on your browser, you should see what looks like the screenshot above.\r\n\r\n**3. Contribute!**\r\n\r\nLotion is quite limited for now but we hope it serves as a good starting point for other folks looking to build their own editors.\r\n\r\nWe would love to make Lotion more extensible and welcome any suggestions or contributions!\r\n\r\nSee CONTRIBUTING.md for details.\r\n\r\n## Acknowledgements\r\n\r\nThis was made much easier with the following libraries and frameworks, thank you!\r\n\r\n- [vue-draggable-next](https://github.com/anish2690/vue-draggable-next)\r\n- [tiptap](https://tiptap.dev/) and [ProseMirror](https://prosemirror.net/)\r\n- [Vue 3](https://vuejs.org/)\r\n- [Vite](https://vitejs.dev/)\r\n- [TypeScript](https://www.typescriptlang.org/)\r\n- [Tailwind CSS](https://tailwindcss.com/)\r\n- [Headless UI](https://headlessui.dev/)\r\n- [Oh, Vue Icons!](https://oh-vue-icons.js.org/)\r\n- [Vitest](https://vitest.dev/)\r\n- [Playwright](https://playwright.dev/)\r\n","readmeFilename":"README.md"}