{"id":23070583,"url":"https://github.com/sametcodes/hone-notion","last_synced_at":"2025-10-04T03:19:29.242Z","repository":{"id":134107245,"uuid":"567823037","full_name":"sametcodes/hone-notion","owner":"sametcodes","description":"A notion-like editor.","archived":false,"fork":false,"pushed_at":"2023-01-23T13:08:30.000Z","size":338,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-30T10:04:37.401Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/sametcodes.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}},"created_at":"2022-11-18T17:00:57.000Z","updated_at":"2024-08-15T13:56:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"2f5f44de-b06e-4413-81cf-e2fbea461f53","html_url":"https://github.com/sametcodes/hone-notion","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/sametcodes/hone-notion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Fhone-notion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Fhone-notion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Fhone-notion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Fhone-notion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sametcodes","download_url":"https://codeload.github.com/sametcodes/hone-notion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametcodes%2Fhone-notion/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278258864,"owners_count":25957367,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","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":[],"created_at":"2024-12-16T06:27:14.930Z","updated_at":"2025-10-04T03:19:29.217Z","avatar_url":"https://github.com/sametcodes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# h-one ― notion-like editor\n\n\u003e This repository was prepared for a task. I'll think on keep developing and maintaining.\n\nThe purpose of the editor is having a notion-like flow and functionality. It uses [`contenteditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable) parameter on elements to display texts as wanted. \n\n## Components\n\n### Editor\n\nHolds the input refs and modal status in a state.\n\nReturns `Flow` and `Modal`.\n\n### Flow\n\nRenders multiple inputs, create new ones or delete according to user's actions. Also it handles focusing on inputs properly if user clicks out of input or input container.\n\nThis component interacts with `Modal` components` to change the type of current focused div.\n\nReturns an array of `Input` component.\n\n### Modal\n\nRenders the given nodes in the configuration props of `Editor` components and filter them out according to the value of user's focused input.\n\nReturns an absoluted div element.\n\n### Input\n\nDisplays contenteditable div elements by rendering a Textarea, which is a styled component. It uses [`as` polymorphic prop](https://styled-components.com/docs/api#as-polymorphic-prop) to render the content in different type of elements, such as h1, h2, etc. The input inside is uncontrolled, and the component re-renders only if the value of the reference object has changed.\n\nHandles `onKeyDown` and `onKeyUp` events to trigger creating new input in case of user presses on `enter` key, or deleting the current input in case of user presses `backspace` key.\n\n## Future ideas\n\n- There is no icon support on the current version, having an icon set and using them would help to improve UI\n- More element support such as image, links, and callouts would make the editor more useful\n- Navigating with arrow keys on the elements of modal would make easier to change the element type of the current input\n- Defining the styled components into seperated files, currently the all defined in one file\n- Rendering images, callout boxes, quotes, alerts as elements\n- Testing for all the components\n- Providing a way for developers to manipulate the default render functions of elements, such as image and links\n- Releasing the editor component as a package after removing the current dependencies on the page\n\n## Known Bugs\n\n- The editor doesn't work properly if user pastes some copied HTML texts from another page. The content comes with additional wrapped `span` or `p` tags. This can be solved by listening `paste` event in the *useEffect* function of `Input` component.\n- If user removes the current line, the cursor jumps to the previous line, but to the beginning of the previous line. It should jump to the end of the line.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsametcodes%2Fhone-notion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsametcodes%2Fhone-notion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsametcodes%2Fhone-notion/lists"}