{"id":50690583,"url":"https://github.com/zidony/inkflow-editor","last_synced_at":"2026-06-09T02:20:10.597Z","repository":{"id":360332346,"uuid":"1248385778","full_name":"zidony/inkflow-editor","owner":"zidony","description":"A lightweight, zero-dependency, and high-performance WYSIWYG rich text editor built with pure Vanilla JavaScript.","archived":false,"fork":false,"pushed_at":"2026-06-06T15:20:10.000Z","size":904,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-06T17:07:21.437Z","etag":null,"topics":["editor","lightweight","rich-text-editor","typescript","vanilla-js","wysiwyg","zero-dependency"],"latest_commit_sha":null,"homepage":"https://zidony.github.io/inkflow-editor","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zidony.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-24T15:19:27.000Z","updated_at":"2026-06-06T15:20:14.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/zidony/inkflow-editor","commit_stats":null,"previous_names":["zidony/inkflow-editor"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/zidony/inkflow-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidony%2Finkflow-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidony%2Finkflow-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidony%2Finkflow-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidony%2Finkflow-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zidony","download_url":"https://codeload.github.com/zidony/inkflow-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zidony%2Finkflow-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34088519,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["editor","lightweight","rich-text-editor","typescript","vanilla-js","wysiwyg","zero-dependency"],"created_at":"2026-06-09T02:20:10.010Z","updated_at":"2026-06-09T02:20:10.586Z","avatar_url":"https://github.com/zidony.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Inkflow Editor\n\n**English** | [简体中文](README.zh-CN.md)\n\nInkflow Editor is a lightweight rich text editor built with vanilla TypeScript. It provides a visual editing surface, a configurable toolbar, basic Markdown shortcuts, image upload hooks, source editing, and a small public API for use in modern web applications.\n\n[Live Demo](https://zidony.github.io/inkflow-editor/)\n\n## Project Status\n\nInkflow Editor is under active development. It is suitable for lightweight editing use cases such as forms, comments, notes, and simple CMS fields.\n\nFor complex editing requirements such as collaborative editing, advanced table workflows, strict document schemas, block-based documents, or plugin ecosystems, a model-driven editor framework may be a better fit.\n\n## Features\n\n- Vanilla TypeScript implementation with no runtime framework dependency.\n- Visual WYSIWYG editing based on `contenteditable`.\n- Configurable toolbar with formatting, alignment, lists, links, media, tables, source mode, fullscreen mode, and optional emoji.\n- Basic Markdown shortcuts for inline formatting, headings, blockquotes, lists, dividers, and code blocks.\n- Undo and redo history with caret restoration.\n- Paste sanitization and URL validation for common editing flows.\n- Image upload hooks for pasted or dropped image files.\n- Click-to-select image resizing.\n- Source code mode for editing sanitized HTML.\n- English and Simplified Chinese locale support.\n- Theme customization through CSS variables and class mappings.\n\n## Install\n\n```bash\nnpm install inkflow-editor\n```\n\n```ts\nimport { InkflowEditor } from 'inkflow-editor';\nimport 'inkflow-editor/style.css';\n\nconst editor = new InkflowEditor({\n    container: '#editor',\n    lang: 'en-US',\n    placeholder: 'Start writing...'\n});\n```\n\nYou can also use the UMD build in a plain HTML page:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/inkflow-editor.css\" /\u003e\n\n\u003cdiv id=\"editor\"\u003e\u003c/div\u003e\n\n\u003cscript src=\"dist/inkflow-editor.umd.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    const { InkflowEditor } = window.InkflowEditor;\n\n    const editor = new InkflowEditor({\n        container: '#editor',\n        lang: 'en-US'\n    });\n\u003c/script\u003e\n```\n\n## Optional Emoji Extension\n\nEmoji support is shipped as an optional entry so the main editor bundle stays small. Import it only when the emoji picker is needed:\n\n```ts\nimport { InkflowEditor } from 'inkflow-editor';\nimport { emojiExtension } from 'inkflow-editor/emoji';\nimport 'inkflow-editor/style.css';\n\nconst editor = new InkflowEditor({\n    container: '#editor',\n    emoji: emojiExtension()\n});\n```\n\nFor plain HTML or PHP-rendered pages, include the emoji UMD file after the core editor:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/inkflow-editor.css\" /\u003e\n\n\u003cdiv id=\"editor\"\u003e\u003c/div\u003e\n\n\u003cscript src=\"dist/inkflow-editor.umd.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"dist/inkflow-editor-emoji.umd.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    const { InkflowEditor } = window.InkflowEditor;\n    const { emojiExtension } = window.InkflowEditorEmoji;\n\n    const editor = new InkflowEditor({\n        container: '#editor',\n        emoji: emojiExtension()\n    });\n\u003c/script\u003e\n```\n\n## Options\n\n```ts\nconst editor = new InkflowEditor({\n    container: '#editor',\n    lang: 'en-US',\n    placeholder: 'Start writing...',\n    height: '500px',\n    size: 'md',\n    toolbar: [\n        ['heading'],\n        ['bold', 'italic', 'underline'],\n        ['link', 'image', 'table'],\n        ['undo', 'redo']\n    ]\n});\n```\n\n| Option | Type | Description |\n| --- | --- | --- |\n| `container` | `HTMLElement \\| string` | Target element or selector. |\n| `theme` | `'inkflow' \\| ThemeClasses` | Built-in theme or custom class map. |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | Editor size variant. |\n| `toolbar` | `Array\u003cstring \\| string[]\u003e` | Toolbar layout. |\n| `placeholder` | `string` | Placeholder text for an empty editor. |\n| `lang` | `'en-US' \\| 'zh-CN' \\| LocaleDict` | Built-in or custom locale. |\n| `height` | `string` | CSS height for the editing area. |\n| `emoji` | `EmojiExtension` | Optional emoji picker extension from `inkflow-editor/emoji`. |\n| `hooks` | `object` | Async hooks for links, images, uploads, and videos. |\n\n## Hooks\n\n```ts\nconst editor = new InkflowEditor({\n    container: '#editor',\n    hooks: {\n        onInsertLink: async () =\u003e 'https://example.com',\n        onInsertImage: async () =\u003e 'https://example.com/image.png',\n        onInsertVideo: async () =\u003e 'https://example.com/video.mp4',\n        onUploadImage: async file =\u003e {\n            // Upload the file and return a public image URL.\n            return uploadImage(file);\n        }\n    }\n});\n```\n\n## API\n\n```ts\neditor.getHTML();\neditor.getText();\neditor.setHTML('\u003cp\u003eHello\u003c/p\u003e');\neditor.destroy();\n\neditor.on('ready', instance =\u003e {});\neditor.on('change', html =\u003e {});\neditor.on('focus', () =\u003e {});\neditor.on('blur', () =\u003e {});\n```\n\n## Security Notes\n\nInkflow Editor sanitizes HTML before it enters key editing flows such as initialization, `setHTML`, paste, source mode, and media insertion. It also validates common link and media URL protocols.\n\nApplications should still validate and sanitize content on the server before storing or rendering it. Client-side sanitization is a useful editing safeguard, not a replacement for backend content security.\n\n## Browser Support\n\nInkflow Editor targets modern browsers: Chrome, Edge, Firefox, and Safari. Internet Explorer is not supported.\n\nThe editor currently uses browser editing APIs through a centralized command adapter. This keeps compatibility work localized while the project gradually replaces higher-risk commands with direct DOM and Selection operations.\n\n## Development\n\n```bash\nnpm install\nnpm run lint\nnpm run typecheck\nnpm run build\n```\n\nRun the full local check:\n\n```bash\nnpm run check\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzidony%2Finkflow-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzidony%2Finkflow-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzidony%2Finkflow-editor/lists"}