{"id":19164666,"url":"https://github.com/publiclab/inline-markdown-editor","last_synced_at":"2025-06-29T18:35:39.664Z","repository":{"id":17918395,"uuid":"82995829","full_name":"publiclab/inline-markdown-editor","owner":"publiclab","description":"An inline wysiwyg markdown document editor based on replacing string subsections. WYSIWYG possible via woofmark.","archived":false,"fork":false,"pushed_at":"2023-02-28T07:36:15.000Z","size":5513,"stargazers_count":31,"open_issues_count":41,"forks_count":37,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-04-19T22:02:01.098Z","etag":null,"topics":["editor","javascript","markdown","wiki","wysiwyg"],"latest_commit_sha":null,"homepage":"https://publiclab.github.io/inline-markdown-editor/examples/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/publiclab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2017-02-24T03:09:35.000Z","updated_at":"2024-08-24T13:55:22.000Z","dependencies_parsed_at":"2024-06-21T14:23:45.236Z","dependency_job_id":"eaf5274a-bf7a-45f8-87a3-2036f220054a","html_url":"https://github.com/publiclab/inline-markdown-editor","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/publiclab%2Finline-markdown-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/publiclab%2Finline-markdown-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/publiclab%2Finline-markdown-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/publiclab%2Finline-markdown-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/publiclab","download_url":"https://codeload.github.com/publiclab/inline-markdown-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252874205,"owners_count":21817780,"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":["editor","javascript","markdown","wiki","wysiwyg"],"created_at":"2024-11-09T09:23:21.933Z","updated_at":"2025-05-07T12:21:32.226Z","avatar_url":"https://github.com/publiclab.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# inline-markdown-editor\n\n[![Build Status](https://travis-ci.org/publiclab/inline-markdown-editor.svg)](https://travis-ci.org/publiclab/inline-markdown-editor) ![Code Climate](https://codeclimate.com/github/publiclab/inline-markdown-editor/badges/gpa.svg)\n\nAn inline wysiwyg markdown document editor based on replacing string subsections. WYSIWYG possible via the [woofmark](https://github.com/bevacqua/woofmark)-based [PublicLab.Editor](https://github.com/publiclab/PublicLab.Editor).\n\n## Basics\n\n`inline-markdown-editor` splits up a Markdown-containing string by double newlines into sections, and parses each into HTML, which it displays. \n\nIt then adds an \"edit button\" beneath each section, which expands a nice form for editing that section either as Markdown or in rich text with a WYSIWYG editor.\n\nUpon submitting the form, an asynchronous AJAX post request is made to the specified server with parameters `before` and `after`, containing the original subsection markdown and its replacement. The form listens for a `true` or `false` response and updates the section's displayed HTML accordingly. \n\nFor a demo, see:\n\nhttps://publiclab.github.io/inline-markdown-editor/examples/\n                                                           \nhttps://publiclab.github.io/inline-markdown-editor/examples/wysiwyg\n\n\n## Usage\n\nFor an easy start, you can begin using `inline-markdown-editor` by pointing it at a markdown-containing element by its selector, and specifying a URL to send changes to.\n\n```js\ninlineMarkdownEditor({\n  replaceUrl: '/wiki/replace/',\n  selector: '.markdown'\n});\n```\n\nYou can also specify filters to run on the raw original markdown before display, and afterwards upon the displayed DOM element, as well as override several other defaults:\n\n```js\ninlineMarkdownEditor({\n  replaceUrl: '/wiki/replace/' + wiki_id,\n  selector: '.markdown',\n  preProcessor: function preProcessMarkdown(markdown) {\n    // do things to markdown here before it's used to construct the form\n    return markdown\n  },\n  postProcessor: function postProcessContent(element) {\n    // do things to element here after the section has been converted to HTML and displayed\n  },\n  defaultMarkdown: function(markdown) {}, // a markdown parser\n  buildSectionForm: function() {}, // return a string containing the form element\n  onComplete: function(response, markdown, html, el, uniqueId, form, o) {}, // run on completing AJAX post\n  isEditable: function(markdown) {}, // returns boolean; whether a given subsection should get an inline form; default skips HTML and horizontal rules\n  extraButtons: { 'fa-icon-name': function(element) {} }, // object with keys of icon names for additional buttons with associated actions for each; returns jQuery element upon construction\n  submitSectionForm: function(event, before, after, options) {}, // optional, to override the form submission handling for each subsection; before/after represent the text diff\n  editorOptions: {} // any options to pass to the built-in PublicLab.Editor instance\n});\n```\n\n## Contributing\n\nTo install this library for development, you'll need [NodeJS](https://nodejs.org). You can get the detailed instruction on installing node and npm in its official [documentation](https://docs.npmjs.com/getting-started/installing-node).\n\nAfter installing node and npm run `npm install` from the root directory.\n\n`inline-markdown-editor` uses grunt - the JavaScript task runner - for compilation of the modules. To install grunt run `npm install -g grunt-cli`. You may have to use `sudo` for root privileges.\n\nMake changes to the files in the `/src/` directory, then run `grunt build` to compile into `/dist/inlineMarkdownEditor.js`. This will use `grunt-browserify` to concatenate and include any node modules named in `require()` statements. You'll then be able to try it out in `/examples/index.html`. Run `grunt` and leave it running to build as you go.\n\n## Installation Guide\n\n### Pre-requisites\n* A Laptop :)\n* NodeJS\n\n - Install [NodeJS](https://nodejs.org). \n\n - Instructions for installing node and npm  available in the [documentation](https://nodejs.org/en/docs/).\n\n- After installing nodejs, then comes running and installation of Grunt. \n- Use this command\n- npm run `npm install` from root directory :)\n\nThis repository `inline-markdown-editor` uses grunt - the JavaScript task runner - for compilation of the modules.\n\n- Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file (known as a Gruntfile). Grunt was created by Ben Alman and is written in Node.js. It is distributed via npm. As of September 2016, there were more than 5,000 plugins available in the Grunt ecosystem.\n\n### Grunt Installation\n\n- To install grunt run `npm install -g grunt-cli`. You may have to use `sudo` for root privileges.\n- Make changes to the files in the `/src/` directory.\n- Run `grunt build` to compile into `/dist/inlineMarkdownEditor.js`.\n- This will use `grunt-browserify` to concatenate and include any node modules named in `require()` statements.\n- You can try out in `/examples/index.html`.\n- Run `grunt`. \n - You are all set. Happy contributing :)\n\n\n\n\n\n## Tests\n\nTests are set up with Jasmine, and can be run with `npm test`.\n\n## Goals\n\n* configurable editors\n  * plan for swappable editors; will need to specify both constructor and onEditorSubmit in processSection\n* better modularization of processSection.js\n* more tests\n\n## Tests we want\n\n* defaultMarkdown\n* preProcessor\n* postProcessor\n* insertForm: look for the form, the button\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpubliclab%2Finline-markdown-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpubliclab%2Finline-markdown-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpubliclab%2Finline-markdown-editor/lists"}