Skip to content
Markdown editor based on Slate.js
JavaScript Shell HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github docs(github): implement pr and issue templates - I55 Jun 21, 2019
.travis (fix) Correct github deploy key May 7, 2019
assets
examples/src fix(*): fix toggling style, remove NoEdit, refactor code Nov 8, 2019
public feat(assets): install ap logo - I55 Jun 19, 2019
scripts (chore) Add travis configuration and deploy scripts May 7, 2019
src fix(SlateAsInputEditor): disallow cut functionality if in uneditable … Nov 19, 2019
.babelrc added jest tests Feb 22, 2019
.eslintrc.json
.gitignore chore(gitignore): add thumbs.db (#140) Oct 19, 2019
.npmignore publish to npm Jan 11, 2019
.travis.yml (fix) Wrong repo name in .travis.yml May 7, 2019
CHARTER.md docs(README): point readme to charter - I55 Jul 9, 2019
CONTRIBUTING.md docs(CONTRIBUTING): fix broken coc link - I257 Oct 19, 2019
DEVELOPERS.md fix(docs): typo in git upstream link - I151 (#153) Oct 24, 2019
LICENSE Initial commit Jan 7, 2019
README.md docs(README): add peer deps to README Nov 7, 2019
markdown.png feat(*): update example images - I43 May 31, 2019
overview.png (docs) update jsdoc, readme, images Jun 4, 2019
package-lock.json fix(SlateAsInputEditor): disallow cut functionality if in uneditable … Nov 19, 2019
package.json Automatic version bump to 0.7.5 Nov 19, 2019
webpack.config.js (chore) update to use markdown-transform Oct 3, 2019
webpack.config.prod.js (fix) update prod webpack config to ignore fs Oct 3, 2019

README.md

Markdown Editor

Netlify Status Build Status npm version downloads GitHub license Join the Accord Project Slack

This repo contains two React-based editors:

  1. A WYSIWYG Slate-based editor that edits rich text and calls an onChange callback with the modified Slate DOM.
  2. A TextArea-based markdown editor that edits markdown text and calls an onChange callback with the modified markdown text.

The demo editor uses the markdown-transform package to transform Slate DOM to/from markdown text.

Using these editors you could allow people to either edit rich formatted text using markdown (and provide a WYSIWYG preview), or allow them to edit using a WYSIWYG editor and use markdown for persistence.

The editor includes a formatting toolbar.

This component is Apache-2 licensed Open Source. Contributors welcome!

Demo

Usage

npm install @accordproject/markdown-editor

You'll also need to be sure to install this package's peer dependencies:

npm install react react-dom slate slate-react styled-components
import { SlateAsInputEditor } from '@accordproject/markdown-editor';
import List from '@accordproject/markdown-editor/dist/plugins/list';
import Video from '@accordproject/markdown-editor/dist/plugins/video';
import { SlateTransformer } from '@accordproject/markdown-slate';

const plugins = [List()];
const slateTransformer = new SlateTransformer();

function storeLocal(slateValue) {
  const markdown = slateTransformer.toMarkdown(slateValue);
  localStorage.setItem('markdown-editor', markdown);
}

ReactDOM.render(<SlateAsInputEditor plugins={plugins} lockText={false} onChange={storeLocal}/>
, document.getElementById('root'));

Example

For an example React App see the ./examples/ folder.

A TextArea containing CommonMark synchronized with a MarkdownEditor component, rendered using Slate.

overview image

In order to run an isolated local development example, run npm run dev and then navigate to: http://localhost:3001/examples

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app in the development mode.
Open http://localhost:3001/examples to view it in the browser.

The page will reload if you make edits.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Styling

You can style the toolbar of this component, as well as the width of the editor:

editorProps

This is an object with the following possible css inputs as strings:

  • BUTTON_BACKGROUND_INACTIVE
  • BUTTON_BACKGROUND_ACTIVE
  • BUTTON_SYMBOL_INACTIVE
  • BUTTON_SYMBOL_ACTIVE
  • DROPDOWN_COLOR
  • TOOLBAR_BACKGROUND
  • EDITOR_BORDER_RADIUS
  • EDITOR_SHADOW
  • EDITOR_BORDER
  • TOOLTIP_BACKGROUND
  • TOOLTIP
  • TOOLBAR_SHADOW
  • WIDTH

Accord Project Logo

Accord Project is an open source, non-profit, initiative working to transform contract management and contract automation by digitizing contracts. Accord Project operates under the umbrella of the Linux Foundation. The technical charter for the Accord Project can be found here.

Learn More About Accord Project

Overview

Documentation

Ecosystem

Core libraries:

Projects Package name Version Description
Cicero cicero-core npm version Templates Core
cicero-cli npm version Cicero CLI
cicero-engine npm version Node.js VM based implementation of Accord Protcol Template Specification execution
cicero-server npm version Wraps the Cicero Engine and exposes it as a RESTful service
cicero-test npm version Testing support for Cicero based on cucumber
cicero-tools npm version Cicero Tools
generator-cicero-template npm version Code generator for a Cicero Template
Concerto concerto-core npm version Core Implementation for the Concerto Modeling Language
concerto-tools npm version Tools for the Concerto Modeling Language
concerto-cli npm version command-line interface for Concerto
Ergo ergo-cli npm version Ergo CLI
ergo-compiler npm version Ergo compiler
ergo-test npm version Ergo test
ergo-engine npm version Ergo engine
Markdown markdown-common npm version A framework for transforming markdown
markdown-slate npm version Transform markdown to/from CommonMark DOM
markdown-cli npm version CLI for markdown transformations.
markdown-cicero npm version CiceroDOM: Markdown extensions for contracts, clauses, variables etc.
markdown-html npm version Transform CiceroDOM to HTML

UI Components:

Projects Package name Version Description
Markdown Editor markdown-editor npm version WYSIWYG rich text web editor that persists text as markdown. Based on Slate.js
Cicero UI cicero-ui npm version WYSIWYG contract editor, template libary browser, error panel component
Concerto UI concerto-ui npm version Dynamic web forms generated from Concerto models

Template Editors:

Projects Cicero ver. Description
Template Studio v1 0.13.4 Web UI for creating, editing and testing Accord Project templates
Template Studio v2 0.13.4 Web UI for creating, editing and testing Accord Project templates
VSCode Extension 0.13.4 VS Code extension for editing Cicero templates and Ergo logic

Public templates and models:

Projects Description
Models Accord Project Model Library
Template Library Accord Project Template Library

Documentation:

Project Repo
Documentation techdocs

Contributing

The Accord Project technology is being developed as open source. All the software packages are being actively maintained on GitHub and we encourage organizations and individuals to contribute requirements, documentation, issues, new templates, and code.

Find out what’s coming on our blog.

Join the Accord Project Technology Working Group Slack channel to get involved!

For code contributions, read our CONTRIBUTING guide and information for DEVELOPERS.

License

Accord Project source code files are made available under the Apache License, Version 2.0. Accord Project documentation files are made available under the Creative Commons Attribution 4.0 International License (CC-BY-4.0).

You can’t perform that action at this time.