{"id":23161427,"url":"https://github.com/bowlingx/marklib","last_synced_at":"2025-04-05T01:06:02.810Z","repository":{"id":29022324,"uuid":"32549591","full_name":"BowlingX/marklib","owner":"BowlingX","description":"A small library to wrap serializable TextSelections.","archived":false,"fork":false,"pushed_at":"2023-04-12T06:45:29.000Z","size":3841,"stargazers_count":379,"open_issues_count":7,"forks_count":16,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-29T00:12:48.152Z","etag":null,"topics":["highlighting","selection","serialization"],"latest_commit_sha":null,"homepage":"http://bowlingx.github.io/marklib/","language":"JavaScript","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/BowlingX.png","metadata":{"files":{"readme":"README.markdown","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":"2015-03-19T22:28:26.000Z","updated_at":"2025-02-14T15:52:07.000Z","dependencies_parsed_at":"2024-07-26T20:43:27.980Z","dependency_job_id":"737edc53-5aa7-4a4e-9408-d74e35bccede","html_url":"https://github.com/BowlingX/marklib","commit_stats":{"total_commits":142,"total_committers":4,"mean_commits":35.5,"dds":"0.035211267605633756","last_synced_commit":"d3ea15907cd5021a86348695391e07d554363e70"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BowlingX%2Fmarklib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BowlingX%2Fmarklib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BowlingX%2Fmarklib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BowlingX%2Fmarklib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BowlingX","download_url":"https://codeload.github.com/BowlingX/marklib/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247271528,"owners_count":20911587,"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":["highlighting","selection","serialization"],"created_at":"2024-12-17T23:14:09.737Z","updated_at":"2025-04-05T01:06:02.788Z","avatar_url":"https://github.com/BowlingX.png","language":"JavaScript","readme":"# marklib\n\n[![Circle CI](https://circleci.com/gh/BowlingX/marklib.svg?style=svg)](https://circleci.com/gh/BowlingX/marklib)\n[![Codacy Badge](https://www.codacy.com/project/badge/d31afc00c2f04ba2848f3991d6b17e47)](https://www.codacy.com/app/billing/marklib)\n[![Coverage Status](https://coveralls.io/repos/BowlingX/marklib/badge.svg?branch=master)](https://coveralls.io/r/BowlingX/marklib?branch=master)\n[![npm](https://img.shields.io/npm/v/marklib.svg?style=flat-square)](https://www.npmjs.com/package/marklib)\n[![Join the chat at https://gitter.im/BowlingX/marklib](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/BowlingX/marklib?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nA simple and fast zero-dependencies-library to transform text-selections into serializable markings.\n\n[Demo](http://bowlingx.github.io/marklib/)\n\n![Demo-Gif](https://raw.githubusercontent.com/BowlingX/marklib/master/marklib.gif)\n\n## Install\n\nmarklib can be installed with `npm` or `bower`.\n\n`npm install --save-dev marklib`\n\n`bower install marklib --save`\n\n## Usage\n\n### Render by selection\n\n``` javascript\n\n// obtain a selection from document\nvar selection = document.getSelection();\n\n// create a new rendering based on the current document\nvar renderer = new Marklib.Rendering(document, options, context)\nrenderer.setId('myRenderId') // if an ID is not provided, a autogenerated one will be used\n\n// renders the given selection and returns a result (`RenderResult`).\nvar result = renderer.renderWithRange(selection.getRangeAt(0));\n\n```\n\n**Important**: After a Rendering has been used to render a selection/serialized result, \nit can't be used to render something again. You need to create a new Instance of `Rendering`.\n\n## Options\n\nYou can pass options to each rendering instance, the following shows the default options\n\n```javascript\n\nvar renderer = new Marklib.Rendering(document, {\n            hoverClass: 'marklib--hover',\n            treeClass: 'marklib--tree',\n            // Supports arrays and/or strings\n            className: ['marking']\n});\n\n```\n\n## Events\n\nMarklib triggers events that can be listened to with `instance.on('event-name')`. Events are build with \n`wolfy87-eventemitter` (https://github.com/Olical/EventEmitter). The following Events are available:\n\nBefore you can actually receive events, you need to register the event handler with `registerEvents` (use `import { registerEvents } from 'marklib/src/main/RenderingEvents';` on your application bootstrap code.)\n\n| Event-Name    | Description | Arguments |\n| ------------- |-------------|-------------|\n| `click`         | triggered when clicked on a marking.  | `(originalEvent, instanceHierarchy)`\n| `hover-enter`   | triggered when a pointer-device starts hovering over a marking      | `(originalEvent, instanceHierarchy)`\n| `hover-leave`   | triggered when a pointer-device leaves a marking                    | `(originalEvent, instanceHierarchy)`\n\nAdditionally, marklib will add hover classes to the current hovered marking.\n\n#### Constructor Arguments\n\n- 1) `HTMLDocument` document -\u003e the document instance used\n- 2) `Object` [options], optional -\u003e an object containing setting for marklib (see Options)\n- 3) `HTMLElement` [context], optional -\u003e \n    the context used to serialize / deserialize the rendering, if not given the document instance.\n\n\n### Render by serialized result\n\nA Serialized results consist of 2 strings (start end end) in the following form\n\n```\n\n'body\u003esection;0;1'`\n-▲------------▲-▲ \n\n```\n\n- ▲ The first part defines a css-selector (queryable with document.querySelector).\n- ▲ The second part defines the text-node inside the given selector\n- ▲ The third part defines the string-offset inside this text-node\n\n#### Example\n\n``` javascript\n\n // This is the result we get from `RenderResult#serialize()`\n \n var result = {\n    startContainerPath: 'body\u003esection;0',\n    endContainerPath: 'body\u003esection;1',\n    startOffset: 2,\n    endOffset: 5\n }\n\n var rendering = new Marklib.Rendering(document);\n \n rendering.renderWithResult(result);\n\n```\n\n## Use-Cases\n\n- Annotations\n- Collaboration tools\n- Inline-Commenting (I actually started a project that will do something like this: https://github.com/BowlingX/commentp)\n\n## Develop\n\n`npm run develop` or `npm run tdd` (to start karma in watch mode)\n\n## License\n\nThe MIT License (MIT)\n\nCopyright (c) 2015 David Heidrich\n\nAny contribution is welcome, just issue a pull-request or bug/feature if you found something :)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbowlingx%2Fmarklib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbowlingx%2Fmarklib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbowlingx%2Fmarklib/lists"}