{"id":26149001,"url":"https://github.com/codedynasty-dev/rabbit","last_synced_at":"2025-03-11T05:22:35.057Z","repository":{"id":190254144,"uuid":"682257622","full_name":"CodeDynasty-dev/Rabbit","owner":"CodeDynasty-dev","description":"🐰 An extensible Text Editor library for javascript.","archived":false,"fork":false,"pushed_at":"2024-08-10T11:35:27.000Z","size":6260,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T05:24:44.230Z","etag":null,"topics":["rich-text-editor","text-editor"],"latest_commit_sha":null,"homepage":"https://uiedbook.github.io/Rabbit/","language":"TypeScript","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/CodeDynasty-dev.png","metadata":{"files":{"readme":"README.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":"2023-08-23T19:30:10.000Z","updated_at":"2024-12-25T08:46:19.000Z","dependencies_parsed_at":"2024-08-10T12:57:58.164Z","dependency_job_id":null,"html_url":"https://github.com/CodeDynasty-dev/Rabbit","commit_stats":null,"previous_names":["fridaycandour/rabbit","uiedbook/rabbit","codedynasty-foo/rabbit","codedynasty-dev/rabbit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeDynasty-dev%2FRabbit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeDynasty-dev%2FRabbit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeDynasty-dev%2FRabbit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeDynasty-dev%2FRabbit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeDynasty-dev","download_url":"https://codeload.github.com/CodeDynasty-dev/Rabbit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242975441,"owners_count":20215459,"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":["rich-text-editor","text-editor"],"created_at":"2025-03-11T05:22:34.480Z","updated_at":"2025-03-11T05:22:35.047Z","avatar_url":"https://github.com/CodeDynasty-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/fridaycandour/rabbit\"\u003e\n\u003cimg src=\"./src/rabbit.png\" width='200' \u003e\n\u003c/img\u003e\n  \u003c/a\u003e\n\n  \u003ch1 align=\"center\"\u003eRabbit.js\u003c/h1\u003e\n\n  \u003cp align=\"center\"\u003e\nA bare bone Text Editor library for javascript\nAimed to be small, simple, efficient and easy to extend.\n    \u003cbr/\u003e\n    \u003cbr/\u003e\n    \u003ca href=\"https://fridaycandour.github.io/Rabbit/index.html\" align=\"center\"\u003e\n    Live Example\n    \u003c/a\u003e\n    \u003cbr/\u003e \n    \u003cbr/\u003e\n \u003cdiv align=\"center\"\u003e\n    .\n    \u003ca href=\"https://github.com/fridaycandour/cradova/issues\"\u003eReport Bug\u003c/a\u003e\n    .\n    \u003ca href=\"https://github.com/fridaycandour/cradova/issues\"\u003eRequest Feature\u003c/a\u003e\n\u003c/div\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n \nExample Rabbit setup\n\n```js\nimport { Rabbit } from \"./rabbit.js\";\n\n// creating a Rabbit instance\n\nconst BigFatRabbit = new Rabbit();\n\nBigFatRabbit.installOn(\"pub\"); // #pub div install point\n```\n\nNow you will get a working text editor, which comes with default actions and tools.\n\n## Features of Rabbit\n\nRabbit big has ears, two big tooths, huh no sorry. i mean\n\n- Strong Type system (typescript)\n- Simple abstraction interface for\n  - actions (event system)\n  - tools (user input system)\n\nwhich makes rabbit very easy to extend\n\n- and other part of rabbits ...\n\nnext\n\nExample ways of extending Rabbit\n\nin Rabbit we can install tools and actions\nmore docs will be added later\n\n```js\n\n// Extending Rabbit.js\n\n\nBigFatRabbit.installTool(\"Bold\", {\n  text: \"Bold Button\",\n  tooling({ selectedElement, selection, range }) {\n    console.log(selection, selectedElement);\n    if (selectedElement) {\n      if (selection) {\n        if (selection === selectedElement.innerText) {\n          if (selectedElement?.style.fontWeight === \"bold\") {\n            selectedElement!.style.fontWeight = \"unset\";\n          } else {\n            selectedElement!.style.fontWeight = \"bold\";\n          }\n        } else {\n          const span = document.createElement(\"span\");\n          span.innerText = selection;\n          span.style.fontWeight = \"bold\";\n          range!.deleteContents();\n          range!.insertNode(span);\n        }\n      }\n    }\n  },\n});\n\nBigFatRabbit.installTool(\"Color\", {\n  text: \"Color Button\",\n  tooling({ selectedElement, selection, range }) {\n    console.log(selection, selectedElement);\n    const input = document.createElement(\"input\");\n    input.type = \"color\";\n    input.addEventListener(\"change\", (e) =\u003e {\n      const color = (e.target! as HTMLInputElement).value;\n      if (selectedElement) {\n        if (selection) {\n          if (selection === selectedElement.innerText) {\n            if (selectedElement?.style.color === color) {\n              selectedElement!.style.color = \"unset\";\n            } else {\n              selectedElement!.style.color = color;\n            }\n          } else {\n            const span = document.createElement(\"span\");\n            span.innerText = selection;\n            span.style.color = color;\n            range!.deleteContents();\n            range!.insertNode(span);\n          }\n        }\n      }\n    });\n    input.click();\n  },\n});\n\nBigFatRabbit.installTool(\"Image\", {\n  text: \"Inset image\",\n  tooling({ selectedElement, selection, range }) {\n    console.log(selection, selectedElement);\n    const input = document.createElement(\"input\");\n    input.type = \"file\";\n    input.accept = \"image/*\";\n    input.click();\n    input.addEventListener(\"change\", (e) =\u003e {\n      const file = (e.target! as any).files[0];\n      if (file \u0026\u0026 file.type.startsWith(\"image/\")) {\n        const reader = new FileReader();\n        reader.onload = (e) =\u003e {\n          const img = document.createElement(\"img\");\n          img.src = e.target!.result as string;\n          range!.insertNode(img);\n        };\n        reader.readAsDataURL(file);\n      }\n    });\n    input.click();\n  },\n});\n\nBigFatRabbit.installTool(\"Link\", {\n  text: \"Inset link\",\n  tooling({ selectedElement, selection, range }) {\n    console.log(selection, selectedElement);\n    const url = prompt(\"Enter URL:\");\n    if (url) {\n      const link = document.createElement(\"a\");\n      link.href = url;\n      link.textContent = selection;\n      range!.deleteContents();\n      range!.insertNode(link);\n    }\n  },\n});\n\nBigFatRabbit.installTool(\"Alignment\", {\n  text: \"center Alignment\",\n  tooling({ selectedElement, selection, range }) {\n    console.log(selection, selectedElement);\n    if (selection) {\n      const alignedContainer = document.createElement(\"div\");\n      alignedContainer.style.textAlign = \"center\";\n      alignedContainer.appendChild(range!.extractContents());\n      range!.insertNode(alignedContainer);\n    }\n  },\n});\n\nBigFatRabbit.installAction(\"paste\", (e: any) =\u003e {\n  e.preventDefault();\n  const clipboardData =\n    e.clipboardData ||\n    (window as unknown as { clipboardData: object }).clipboardData;\n  const pastedText = clipboardData.getData(\"text/plain\");\n  document.execCommand(\"insertHTML\", false, pastedText);\n});\n\nBigFatRabbit.installOn(\"pub\");\n\n\n// synthetic actions\n\n// actions are attach to their editor,the document object model or fired synthetically\nBigFatRabbit.installAction(\"synthetic-grass\", () =\u003e {\n  console.log(\"grass\");\n});\n\n// tool appears as a button on the toolbar\nBigFatRabbit.installTool(\"custom\", {\n  text: \"grass\",\n  tooling() {\n    BigFatRabbit.fireSyntheticAction(\"synthetic-grass\");\n  },\n});\n```\n\nACTION TYPES includes\n\n- \"input\"\n- \"paste\"\n- \"copy\"\n- \"contextmenu\"\n- \"document-event name\"\n- \"custom synthetic actions\"\n\n# Rabbit is MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodedynasty-dev%2Frabbit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodedynasty-dev%2Frabbit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodedynasty-dev%2Frabbit/lists"}