{"id":13554507,"url":"https://github.com/smolijar/emily-editor","last_synced_at":"2025-10-13T13:35:27.635Z","repository":{"id":132747090,"uuid":"107108488","full_name":"smolijar/emily-editor","owner":"smolijar","description":"React editor component for LMLs, like Markup or Asciidoc. The focus of the project is to provide fluent efficient interface for advanced users, who are familliar with using IDE or coding text editors.","archived":false,"fork":false,"pushed_at":"2018-05-08T23:54:12.000Z","size":813,"stargazers_count":8,"open_issues_count":10,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-23T22:08:59.430Z","etag":null,"topics":["asciidoc","component","document","editor","lightweight-markup-language","livepreview","lml","markdown","markup","modular","outline","react","synchronized-scrolling"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smolijar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2017-10-16T09:45:19.000Z","updated_at":"2022-09-02T20:42:00.000Z","dependencies_parsed_at":"2023-12-04T15:15:10.856Z","dependency_job_id":null,"html_url":"https://github.com/smolijar/emily-editor","commit_stats":null,"previous_names":["smolijar/emily-editor"],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/smolijar/emily-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smolijar%2Femily-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smolijar%2Femily-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smolijar%2Femily-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smolijar%2Femily-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smolijar","download_url":"https://codeload.github.com/smolijar/emily-editor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smolijar%2Femily-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279014662,"owners_count":26085554,"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-13T02:00:06.723Z","response_time":61,"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":["asciidoc","component","document","editor","lightweight-markup-language","livepreview","lml","markdown","markup","modular","outline","react","synchronized-scrolling"],"created_at":"2024-08-01T12:02:49.248Z","updated_at":"2025-10-13T13:35:27.613Z","avatar_url":"https://github.com/smolijar.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","markdown"],"sub_categories":[],"readme":"![Emily](https://i.imgur.com/WxZEIli.png)\n\n[![Travis build](https://travis-ci.org/grissius/emily-editor.svg?branch=master)](https://travis-ci.org/grissius/emily-editor)\n[![Dependencies Status](https://david-dm.org/grissius/emily-editor/status.svg)](https://david-dm.org/grissius/emily-editor)\n[![Dev-dependencies Status](https://david-dm.org/grissius/emily-editor/dev-status.svg)](https://david-dm.org/grissius/emily-editor?type=dev)\n[![npm version](https://badge.fury.io/js/emily-editor.svg)](https://www.npmjs.com/package/emily-editor/)\n\nEmily is a React editor component for [LML](https://en.wikipedia.org/wiki/Lightweight_markup_language)s, like Markdown or Asciidoc.\nThe focus of the project is to provide fluent efficient interface for advanced users, who are familliar with using IDE or coding text editors.\n\n# About Emily\n\nEmily is an editor for LML document formats, currently supporting few languages.\nEditor works with a document-format abstraction and new modules can be added to make use of existing features:\n\n- Syntax highlight\n    - Emily uses [Ace](https://ace.c9.io/) editor under the hood, see [supported languages](https://docs.c9.io/docs/supported-languages)\n- Live document preview\n    - Review the result as you type in split screen view or just browse the preview\n- Outline preview\n    - Section lookup in source code\n    - Section reordering -- drag \u0026 drop whole sections\n- Command palette\n    - Make use of a command palette you know from coding editors\n- Autosave\n    - Session is stored in localStorage, retrieved when lost.\n\nEmily editor is part of an implementation for the [Git-based Wiki System](https://github.com/grissius/gitwiki-thesis) and its UI for the prototype has been [developed](https://github.com/grissius/markup-editor-ui) in cource _UI Design_ on the faculty.\n\n# Install\n\n```\nnpm install --save emily-editor\n```\n\n# Usage\n\n1. Include `node_modules/emily-editor/dist/style.css`\n2. Include `node_modules/emily-editor/dist/script.js`\n3. Use component:\n\n```js\nimport Emily from 'emily-editor'\n// ...\n\nReactDOM.render(\n  \u003cEmily /\u003e,\n  document.getElementById('container')\n);\n```\n\nFor examples, see [pages](./pages)\n\n## Props\n\n### `content`\nInitial content of the editor\n\n### `language`\nLanguage mode object.\nYou can use [`generateMode`](#-generatemode-) to create a mode from existing modules.\n\n```js\nimport Emily, { generateMode } from 'emily-editor'\n// ...\n\nReactDOM.render(\n  \u003cEmily language={generateMode(/*...*/)} /\u003e,\n  document.getElementById('container')\n);\n```\n\n### `listFiles(pfx)`\nList available relative files with path prefix `pfx`.\nReturns a `Array\u003cString\u003e` in a Promise.\n\nThis can be used for autosuggestions by a mode.\n\n### `width`\nLock editor's width and vorbid it to fill the container.\n\n### `height`\nLock editor's height and vorbid it to fill the container.\n\n## Methods\n\n### `getValue`\nReturn current value of the editor.\n\n## `generateMode(input)`\n\nInput can be either:\n\n - name of the mode, e.g. `asciidoc`\n - any file path, e.g. `foo/bar/baz.adoc`\n\nAs a result a language mode is generated.\n\n1. If the name or the extension matches an existing LML mode, a proper full-featured mode is generated.\n2. If the name or the extension matches a mode supported by Ace editor, no special features for LML are provided, but editor features syntax highlight.\n3. Otherwise a plaintext editor is delivered. No syntax highlight.\n\n### Examples\nHere are some examples of using the editor with `generateMode` function.\n```js\n// asciidoc mode\n\u003cEmily language={generateMode('x.adoc')}\u003e\n\u003cEmily language={generateMode('asciidoc')}\u003e\n\u003cEmily language={generateMode('/xxx/weee.adoc')}\u003e\n\n// markdown mode\n\u003cEmily language={generateMode('markdown')}\u003e\n\u003cEmily language={generateMode('a/b/c/d/foo.md')}\u003e\n\n// (unsupported) js mode\n// only syntax highlight, missing features\n\u003cEmily language={generateMode('javascript')}\u003e\n\u003cEmily language={generateMode('test.js')}\u003e\n\n// unrecognized mode\n// working in plaintext mode\n\u003cEmily language={generateMode('foo/bar/baz')}\u003e\n\u003cEmily language={generateMode('thisisnotanameofanymode')}\u003e\n```\n\n## Language modes\nTake a look at [asciidoc mode](./src/modes/asciidoc.js) example.\n\n`name` (string)\n- name of the mode\n\n`convert` (func)\n- converting function to html from the raw markup\n\n`lineSafeInsert` (func)\n- insert content in the line of markup without distorting the markup\n- the more lines you can cover the better\n- it is necessary to cover heading lines\n\n`postProcess` (func)\n- modify preview DOM before render\n\n`renderJsxStyle` (func)\n- add styles for preview\n\n`excludeOutlineItem` (func)\n- exclude DOM Element from the outline\n\n`previewClassName` (string)\n- set the CSS classname for the prevew container\n\n\n# Online demo\n\nhttps://emily-editor.herokuapp.com/\n\n\n# License\n\nEmily editor is licenced under the [BSD License](./LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmolijar%2Femily-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmolijar%2Femily-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmolijar%2Femily-editor/lists"}