husseyexplores/markdown-editor

Markdown editor based on Slate.js

Markdown Editor

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

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.

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 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

• Accord Project
• Accord Project News
• Accord Project Blog
• Accord Project Slack
• Accord Project Technical Documentation
• Accord Project GitHub

Documentation

• Getting Started with Accord Project
• Concepts and High-level Architecture
• How to use the Cicero Templating System
• How to Author Accord Project Templates
• Ergo Language Guide

Ecosystem

Core libraries:

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

UI Components:

Projects	Package name	Version	Description
Markdown Editor	markdown-editor		WYSIWYG rich text web editor that persists text as markdown. Based on Slate.js
Cicero UI	cicero-ui		WYSIWYG contract editor, template libary browser, error panel component
Concerto UI	concerto-ui		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).