{"id":25084681,"url":"https://github.com/tiptiz/editor","last_synced_at":"2025-09-10T19:35:56.142Z","repository":{"id":267498031,"uuid":"890233422","full_name":"tiptiz/editor","owner":"tiptiz","description":"HTML5 \u0026 Email friendly WYSIWYG rich text editor by Tiptap \u0026 web comonents (WIP)","archived":false,"fork":false,"pushed_at":"2025-03-10T10:35:11.000Z","size":13246,"stargazers_count":28,"open_issues_count":21,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T12:18:58.846Z","etag":null,"topics":["markdown","prosemirror","rich-text-editor","shiki","svelte","svelte-editor","tiptap","typescript","vitejs","web-editor","wysiwyg","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"https://tiptiz.github.io/editor/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tiptiz.png","metadata":{"files":{"readme":"README.en.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-18T08:16:08.000Z","updated_at":"2025-04-12T10:15:07.000Z","dependencies_parsed_at":"2025-03-05T08:35:32.210Z","dependency_job_id":null,"html_url":"https://github.com/tiptiz/editor","commit_stats":null,"previous_names":["aolyang/tiptap-contentful","tiptiz/editor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiptiz%2Feditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiptiz%2Feditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiptiz%2Feditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiptiz%2Feditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tiptiz","download_url":"https://codeload.github.com/tiptiz/editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249067787,"owners_count":21207396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown","prosemirror","rich-text-editor","shiki","svelte","svelte-editor","tiptap","typescript","vitejs","web-editor","wysiwyg","wysiwyg-editor"],"created_at":"2025-02-07T07:18:10.088Z","updated_at":"2025-04-15T12:19:38.712Z","avatar_url":"https://github.com/tiptiz.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TipTap Contentful Example\n\n## [[简体中文]](./README.md) | [[Playground \u0026 Articles]](https://tiptiz.github.io/editor)\n\n| Light Mode                                              | Dark Mode                                                  |\n|---------------------------------------------------------|------------------------------------------------------------|\n| ![first view](./example/public/doc-imgs/first-view.png) | ![first view 2](./example/public/doc-imgs/first-view2.png) |\n\nThis is a practice project for exploring `Svelte` and `Tiptap` to create a `WYSIWYG` rich text editor.\nYeah, this project is **in prototype phase**.🤣\n\nThis project's final goal is to be able to be a `HTML5 Copy/Paste Friendly` \u0026 `Email Friendly` \u0026 `Markdown Friendly`\nfeature rich WYSIWYG rich text editor.\n\nBefore first public release, I will mainly use Chinese, but, a Q \u0026 Issue in English is OK.  \nResources will release a docs with English too, after the first public release.\n\n### [[Goto GitHub.io Playground for the details]](https://tiptiz.github.io/editor)\n### [[Goto Issues for the details and records]](https://github.com/tiptiz/editor/issues)\n\nI wrote a post on this demo page to show how I built it. Hopefully, it can help you, and I'm very grateful for your\nfeedback.\n\n1. basic Marks, Styles(fontFamily, fontSize, ColorPicker, Indent/Outdent, Text Alignment)\n2. BulletList/TaskList, Blockquote, Emojis, InlineCode/Code Block, Image, Link, Table...\n3. nice toolbars with manually adjusted svg icons (thanks [iconify](https://icon-sets.iconify.design/))\n4. table of contents with quick navigation jump\n5. builtin light i18n system\n6. (dev mode) assets auto save and assets sidebar, deploy to github.io by CI/CD in production\n\n❗️❗️❗ This project is still in the prototype phase, and there are still many features to be implemented, update very\nfast. If you have any\nsuggestions or ideas, please feel free to open an issue (Currently PR not welcome)🙏     \n❗️❗️❗ And be careful while saving content, there is no swap file yet.\n\n## Editor feature compatible tables (updating fast 🚀🚀🚀)\n\nGoto collection issue for details: https://github.com/tiptiz/editor/issues/29\n\n+ current practice status:  \n  ✅ supported; ❌ not support; ⏳ working on; 🚧 planning;\n+ other editors status (mainly paste to):  \n  🆗 partially support; 📋 paste support;\n\n| features                 | 本编辑器 | markdown | 微信公众号 | 知乎 | 掘金富文本 |\n|--------------------------|------|----------|-------|----|-------|\n| Undo/Redo                | ✅    | ✅        | ✅     | ✅  | ✅     |\n| clear marks              | ✅    | ❌        | ✅     | ✅  | ❌     |\n| bold                     | ✅    | ✅        | ✅     | ✅  | ✅     |\n| italic                   | ✅    | ✅        | ✅     | ✅  | ✅     |\n| inline code              | ✅    | ✅        | ✅     | ✅  | ✅     |\n| strike                   | ✅    | ✅        | ✅     | ✅  | ❌     |\n| superscript              | ✅    | ✅        | ❌     | ✅  | ❌     |\n| subscript                | ✅    | ✅        | ❌     | ✅  | ❌     |\n| underline                | ✅    | ✅        | ✅     | ✅  | ✅     |\n| fontFamily               | ✅    | ❌        | ✅     | ❌  | ❌     |\n| fontSize                 | ✅    | ❌        | ✅     | ❌  | ❌     |\n| HeadingLevel             | ✅    | ✅        | ✅     | ❌  | ✅     |\n| link                     | ✅    | ✅        | ❌     | ✅  | ✅     |\n| blockquote               | ✅    | ✅        | ✅     | ✅  | ✅     |\n| fontColor                | ✅    | ❌        | ✅     | ❌  | ❌     |\n| bgColor                  | ✅    | ❌        | ✅     | ❌  | ❌     |\n| Clear font/bg color only | ✅    | ❌        | ✅     | ❌  | ❌     |\n| Hr                       | ✅    | ✅        | ✅     | ✅  | ❌     |\n| BulletList               | ✅    | ✅        | ✅     | ✅  | ✅     |\n| TaskList                 | ✅    | ✅        | ❌     | ❌  | ❌     |\n| Alignment                | ✅    |          |       |    |       |\n| Indent/Outdent           | ✅    |          |       |    |       |\n| LineHeight               | ✅    |          |       |    |       |\n| Paragraph Margin         | ✅    |          |       |    |       |\n| Emoji                    | ✅    |          |       |    |       |\n| Table                    | ✅    |          |       |    |       |\n| Table Head/Cell Toggle   | ✅    |          |       |    |       |\n| Table Cell Merge/Split   | ✅    |          |       |    |       |\n| Table Row Add/Delete     | ✅    |          |       |    |       |\n| Table Col Add/Delete     | ✅    |          |       |    |       |\n| Code Block               | ✅    |          |       |    |       |\n| Image                    | ✅    |          |       |    |       |\n| Table Layout             | 🚧   |          |       |    |       |\n| Float layout             | 🚧   |          |       |    |       |\n\n## Internal classes table (Not done yet)\n\nTo compact with other rich text editors, I'm try my best to use inline style.\nBut using classes to style the editor is can not be avoided. So here is the classes table I'm using in this editor\n\n+ ✅ used classes\n+ ❌ not support\n\n| internal classes   | extension            | current | we-chat |\n|--------------------|----------------------|---------|---------|\n| list-paddingleft-1 | taskList, bulletList | ✅       | ✅       |\n\n## Project structure\n\nThis project is a monorepo based on pnpm workspaces.\n\n+ `packages/*`: customized extensions.\n+ `example`: this demo page.\n+ `example/dev-server.mjs`: provide `/content` api, and serve vite (as middleware mode).\n+ `src/App.svelte`: Page layout (editor, toolbars), Editor state context\n+ `src/icons/toolbars`: all toolbar SVG icons here are modified to look the same size and support svelte.\n+ `src/icons/*`: other SVG icons.\n+ `src/components/ui`: shadcn-svelte components, you can see the details in `src/components.josn`\n+ `src/components/Toolbar.svelte`: toolbar entry component.\n+ `src/components/toolbars/*.svelte`: all toolbar and editor features implemented here.\n+ `src/states/*.svelte.ts`: global shared states. (editor state, theme, color picker histories ...)\n+ `src/assets/noto-emojis-v16.json`: Google NotoEmoji metadata json file.\n+ `public/NotoColorEmoji.ttf`: Google NotoEmoji font file.\n\n## Run this Project\n\nThis project based on `Node 21.7.3`, I personally recommend using [fnm](https://github.com/Schniz/fnm) to manager your\nnode version.\n\n```bash\n\u003e git clone https://github.com/tiptiz/editor.git --depth=1\n\u003e cd editor\n\u003e fnm install/use # optional\n\u003e pnpm install\n\u003e cd exmaple \n\u003e node dev-server.mjs # also pnpm server, or you can't use local save\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiptiz%2Feditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiptiz%2Feditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiptiz%2Feditor/lists"}