GithubHelp home page GithubHelp logo

markdown-editor's Introduction

❗---❗---❗---❗DEPRECATED❗---❗---❗---❗

This repository has been moved to https://github.com/accordproject/web-components

Markdown Editor

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

A React-and-Slate-based WYSIWYG editor that edits rich text based on CommonMark.

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

The editor includes a formatting toolbar.

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

preview image

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

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app in the development mode.
Open http://localhost:3001/ 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!


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.

README Badge

Using Accord Project? Add a README badge to let everyone know: accord project

[![accord project](https://img.shields.io/badge/powered%20by-accord%20project-19C6C8.svg)](https://www.accordproject.org/)

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

markdown-editor's People

Contributors

98lenvi avatar ajmeraharsh avatar algomaster99 avatar arteevraina avatar cmccandless avatar daniloff200 avatar debsubhro avatar dianalease avatar distributedlock avatar dselman avatar elit-altum avatar husseyexplores avatar ian-yy avatar irmerk avatar jeromesimeon avatar joeheyming avatar mbtamuli avatar michizhou avatar mttrbrts avatar nik72619c avatar parikshit-hooda avatar pramodrhegde avatar pseudonerd avatar qualitymanifest avatar rustygloves avatar sachdeva-shrey avatar sahalsaad avatar sgbj avatar sidhyatikku avatar sumitkharche avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

markdown-editor's Issues

Hyperlink Tooltip

Is your feature request related to a problem? Please describe.
We need to style hyperlink text in the document, as well as create a popup tooltip for setting the link.

Describe the solution you'd like
There should be a popup tooltip similar to the one used in Google Docs. Use this as a vague reference, we are not looking to exactly copy it.

Screen Shot 2019-10-03 at 15 17 51 PM

Describe alternatives you've considered
N/A

Additional context
The tooltip that pops up for buttons in the toolbar currently were implemented in PR #66

Slate: onEnter inside block quote

When typing text and pressing enter inside a block quote a newline is added to the block quote, however the MD that renders doesn't include the additional text.

Inline Hyperlink Tooltip

Is your feature request related to a problem? Please describe.
The hyperlink tooltip should stem from the highlighted text inline which is being selected to convert into a hyperlink.

Describe the solution you'd like
Would it be possible for this UI to be placed above or below the text, so that it is easier for the user to tell which text is becoming a Hyperlink?

Describe alternatives you've considered
This will require investigation of SlateJS

Additional context
Related Issues:

Screenshots:

Screen Shot 2019-10-03 at 15 17 51 PM

image

New Line Support

Current Behavior

  • Commonmark.js parser enters a </html> tag inside a block when a linbreak is added. The end of the block (</clause>) is then treated as a standalone <html></html> block.

commonmark

Tasks

  • Ensure every code block (example: <clause></clause>) is treated as existing inside the overall html block once.

Related Issues:

  • N/A

Handle Duplicate clauseId from Copy/Paste

Linked Isues:

- CUI 134

- TSv2 82


Is your feature request related to a problem? Please describe.
Currently, a uuidv4 is assigned to each clause template added into the markdown of the contract. Copying and pasting should recognize that as already existing and create a new uuidv4

Describe the solution you'd like
When a clause template is pasted, TSv2 should check to see if a clause template exists in the pasted text. If so, check if that clause template is already in the contract. If so, assign a new uuidv4 to this clause template.

Describe alternatives you've considered
A good starting point should be SlateJS's onPaste plugin
Already in the code here

Additional context
N/A

List Blocks Register as Hyperlink

Describe the bug
Creating a bulleted list marks a block as a hyperlink

To Reproduce
Steps to reproduce the behavior:

  1. Go to TSv2
  2. Note that the hyperlink and list toolbar icons are not highlighted
  3. Select text, click on bulleted list
  4. Note the bulleted list and hyperlink icons are highlighted now

Expected behavior
Hyperlink should be separate from list nodes

Screenshots
Before:
Screen Shot 2019-08-28 at 10 17 47 AM
After:
Screen Shot 2019-08-28 at 10 18 58 AM

Desktop (please complete the following information):

  • OS: macOS
  • Chrome and Safari

Additional context
N/A

Disallow H1 -> H3 -> H2

Is your feature request related to a problem? Please describe.
We should have a restriction for creating out of order heading trees

Describe the solution you'd like
There should be some check on attempt to create a header which finds the nearest header above and below. If one of these results in nothing, allow. If they both exist, measure if they violate order.

This will likely involve code changes in cicero-ui and/or template-studio-v2

Describe alternatives you've considered
Open to input

Additional context
Currently allowed:
Screen Shot 2019-10-17 at 1 52 47 PM

Toolbar Parameter Button

Tasks

  • Remove this button in the short term until we have parameter support. This can be commenting or conditional logic.

Related Issues:

Polish Editor Border and Shadow

Is your feature request related to a problem? Please describe.
The editor should have some styling to appear more professional

Describe the solution you'd like
We should have smaller borders, no border radius, and a slight drop shadow.

Describe alternatives you've considered
A reference point is Google Docs

Current state:
Screen Shot 2019-10-16 at 4 10 09 PM

Google Docs (example):
Screen Shot 2019-10-16 at 4 11 56 PM

Additional context
Further input by @Michael-Grover

Code Block Styling

Is your feature request related to a problem? Please describe.
We need to style monospace or code block text in the document

Describe the solution you'd like
There should be the ability to style the monospace text via a prop

Describe alternatives you've considered
If possible, we should support block quotes and not just monospace text.

Additional context
A starting point for related code is in PR #65 and #66

`lockText` not working as expected

Describe the bug
Non-variable text is still editable when setting lockText to true.

To Reproduce
Steps to reproduce the behavior:

  1. Set lockText to true on the SlateAsInputEditor
  2. Edit non-variable text
  3. See text change

Expected behavior
Non-variable text should not be editable when lockText is true.

Set Container and Text Width

The text should be such that there are about 90 characters in one line. Currently in TSv2 there are about 75.

Let's do this by making the font size 14px instead of 16px, the padding 15px instead of 25px, and the width 620px instead of 600px.

Make the text container a fixed width, so that text line length never changes. Line breaks always stay in the same place. In the future, we will want to make the text page go behind the right pane when the screen is too narrow to accommodate both

image

Copy + Paste Works in lockText Mode

Describe the bug
Copy and pasting inside a clause template is currently being allowed during lockText

To Reproduce
Steps to reproduce the behavior:

  1. Run locally within cicero-ui
    a. Download both markdown-editor and cicero-ui
    b. Run in markdown-editor
    • npm install
    • npm run build
    • npm run transpile
    • npm link
      c. Run in cicero-ui:
    • npm install
    • rm -rf node_modules/\@accordproject/markdown-editor
    • npm link @accordproject/markdown-editor
    • npm run start
  2. Go to http://localhost:8080/
  3. Ensure the lockText prop in cicero-ui being passed down to the ContractEditor is true.
  4. Highlight text outside a clause (not a variable), and try pasting inside the clause.

Expected behavior
lockText should prevent any edits to text within a clause - except for variables

Additional context
Related to #122

Display Selected Text Style

Is your feature request related to a problem? Please describe.
The Style section of the toolbar should show what the selected text style is.

Describe the solution you'd like
The Style section of the toolbar should show what the selected header is if it is a heading, otherwise remain as Normal Text

This will require adapting the spacing of the toolbar to accommodate Normal Text and Heading 1

Also hovering should result in a tooltip saying Text Style, and clicking should drop down the menu which currently opens on hover.

Describe alternatives you've considered
This could be H1, H2, and H3 to prevent it being longer than Style and messing with formatting

Open to input

Additional context

Current state:

Screen Shot 2019-10-17 at 1 42 50 PM

Current state on hover:

Screen Shot 2019-10-17 at 1 43 00 PM

Update README

Related Issues

Tasks

  • Add badges from Netlify and npm
  • Update reference images
  • Tighten instructions

Polish Indentation of Block Quotes

Is your feature request related to a problem? Please describe.
Block quotes should have customizable indentation.

Describe the solution you'd like
Allow for props to dictate the indentation of the block quotes.

Describe alternatives you've considered
Open to input.

Additional context
More input by @mttrbrts, referenced in #124

toMarkdown.recursive() not working when node contains child node of type `variable`

Describe the bug
toMarkdown.recursive() not working when node contains child node of type variable

To Reproduce
Steps to reproduce the behavior:

  1. Call toMarkdown.recursive on a clause node that contains child nodes of type variable
    For example...
{
   "object":"block",
   "type":"clause",
   "data":{
      "tag":"clause",
      "attributes":{
         "src":"ap://[email protected]#b8eae2fb3c2571284b4dcfc1fc348d8234d0c5db158962043720828be2eb9085",
         "clauseid":"d3cdb02e-6982-47a1-9ba3-350d46212b63"
      },
      "attributeString":"src = \"ap://[email protected]#b8eae2fb3c2571284b4dcfc1fc348d8234d0c5db158962043720828be2eb9085\"clauseid = \"d3cdb02e-6982-47a1-9ba3-350d46212b63\"",
      "content":"",
      "closed":false
   },
   "nodes":[
      {
         "object":"block",
         "type":"paragraph",
         "data":{

         },
         "nodes":[
            {
               "object":"block",
               "type":"paragraph",
               "data":{

               },
               "nodes":[
                  {
                     "object":"text",
                     "text":"Acceptance of Delivery. ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"shipper",
                           "value":"%22Party%20A%22"
                        },
                        "attributeString":"id = \"shipper\"value = \"%22Party%20A%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party A\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" will be deemed to have completed its delivery obligations if in ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"receiver",
                           "value":"%22Party%20B%22"
                        },
                        "attributeString":"id = \"receiver\"value = \"%22Party%20B%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party B\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":"'s opinion, the ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"deliverable",
                           "value":"%22Widgets%22"
                        },
                        "attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Widgets\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" satisfies the Acceptance Criteria, and ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"receiver",
                           "value":"%22Party%20B%22"
                        },
                        "attributeString":"id = \"receiver\"value = \"%22Party%20B%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party B\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" notifies ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"shipper",
                           "value":"%22Party%20A%22"
                        },
                        "attributeString":"id = \"shipper\"value = \"%22Party%20A%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party A\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" in writing that it is accepting the ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"deliverable",
                           "value":"%22Widgets%22"
                        },
                        "attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Widgets\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":".",
                     "marks":[

                     ]
                  }
               ]
            },
            {
               "object":"block",
               "type":"paragraph",
               "data":{

               },
               "nodes":[
                  {
                     "object":"text",
                     "text":"Inspection and Notice. ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"receiver",
                           "value":"%22Party%20B%22"
                        },
                        "attributeString":"id = \"receiver\"value = \"%22Party%20B%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party B\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" will have ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"businessDays",
                           "value":"10"
                        },
                        "attributeString":"id = \"businessDays\"value = \"10\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"10",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" Business Days' to inspect and evaluate the ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"deliverable",
                           "value":"%22Widgets%22"
                        },
                        "attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Widgets\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" on the delivery date before notifying ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"shipper",
                           "value":"%22Party%20A%22"
                        },
                        "attributeString":"id = \"shipper\"value = \"%22Party%20A%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party A\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" that it is either accepting or rejecting the ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"deliverable",
                           "value":"%22Widgets%22"
                        },
                        "attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Widgets\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":".",
                     "marks":[

                     ]
                  }
               ]
            },
            {
               "object":"block",
               "type":"paragraph",
               "data":{

               },
               "nodes":[
                  {
                     "object":"text",
                     "text":"Acceptance Criteria. The \"Acceptance Criteria\" are the specifications the ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"deliverable",
                           "value":"%22Widgets%22"
                        },
                        "attributeString":"id = \"deliverable\"value = \"%22Widgets%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Widgets\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" must meet for the ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"shipper",
                           "value":"%22Party%20A%22"
                        },
                        "attributeString":"id = \"shipper\"value = \"%22Party%20A%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Party A\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":" to comply with its requirements and obligations under this agreement, detailed in ",
                     "marks":[

                     ]
                  },
                  {
                     "object":"inline",
                     "type":"variable",
                     "data":{
                        "tag":"variable",
                        "attributes":{
                           "id":"attachment",
                           "value":"%22Attachment%20X%22"
                        },
                        "attributeString":"id = \"attachment\"value = \"%22Attachment%20X%22\"",
                        "content":"",
                        "closed":true
                     },
                     "nodes":[
                        {
                           "object":"text",
                           "text":"\"Attachment X\"",
                           "marks":[

                           ]
                        }
                     ]
                  },
                  {
                     "object":"text",
                     "text":", attached to this agreement.",
                     "marks":[

                     ]
                  }
               ]
            }
         ]
      }
   ]
}
  1. Note the output:
Acceptance of Delivery.  will be deemed to have completed its delivery obligations if in 's opinion, the  satisfies the Acceptance Criteria, and  notifies  in writing that it is accepting the .

Inspection and Notice.  will have  Business Days' to inspect and evaluate the  on the delivery date before notifying  that it is either accepting or rejecting the .

Acceptance Criteria. The "Acceptance Criteria" are the specifications the  must meet for the  to comply with its requirements and obligations under this agreement, detailed in , attached to this agreement.

Expected behavior
Expect the output to contain the variables.
For example...

Acceptance of Delivery. <variable id="shipper" value="%22Party%20A%22"/> will be deemed to have completed its delivery obligations if in <variable id="receiver" value="%22Party%20B%22"/>'s opinion, the <variable id="deliverable" value="%22Widgets%22"/> satisfies the Acceptance Criteria, and <variable id="receiver" value="%22Party%20B%22"/> notifies <variable id="shipper" value="%22Party%20A%22"/> in writing that it is accepting the <variable id="deliverable" value="%22Widgets%22"/>.

Inspection and Notice. <variable id="receiver" value="%22Party%20B%22"/> will have <variable id="businessDays" value="10"/> Business Days' to inspect and evaluate the <variable id="deliverable" value="%22Widgets%22"/> on the delivery date before notifying <variable id="shipper" value="%22Party%20A%22"/> that it is either accepting or rejecting the <variable id="deliverable" value="%22Widgets%22"/>.

Acceptance Criteria. The "Acceptance Criteria" are the specifications the <variable id="deliverable" value="%22Widgets%22"/> must meet for the <variable id="shipper" value="%22Party%20A%22"/> to comply with its requirements and obligations under this agreement, detailed in <variable id="attachment" value="%22Attachment%20X%22"/>, attached to this agreement.
historian.ts:245 clause text Acceptance of Delivery. <variable id="shipper" value="%22Party%20A%22"/> will be deemed to have completed its delivery obligations if in <variable id="receiver" value="%22Party%20B%22"/>'s opinion, the <variable id="deliverable" value="%22Widgets%22"/> satisfies the Acceptance Criteria, and <variable id="receiver" value="%22Party%20B%22"/> notifies <variable id="shipper" value="%22Party%20A%22"/> in writing that it is accepting the <variable id="deliverable" value="%22Widgets%22"/>.

Inspection and Notice. <variable id="receiver" value="%22Party%20B%22"/> will have <variable id="businessDays" value="10"/> Business Days' to inspect and evaluate the <variable id="deliverable" value="%22Widgets%22"/> on the delivery date before notifying <variable id="shipper" value="%22Party%20A%22"/> that it is either accepting or rejecting the <variable id="deliverable" value="%22Widgets%22"/>.

Acceptance Criteria. The "Acceptance Criteria" are the specifications the <variable id="deliverable" value="%22Widgets%22"/> must meet for the <variable id="shipper" value="%22Party%20A%22"/> to comply with its requirements and obligations under this agreement, detailed in <variable id="attachment" value="%22Attachment%20X%22"/>, attached to this agreement.

Unit tests

We need unit tests for the JSON <-> MD conversion

Toolbar has rendering and functional issues on Safari

Describe the bug
The toolbar icons seem to be a little mis-aligned on Safari
Some of the toolbar buttons don't seem to always work on Safari, depending on the selection in the document.

To Reproduce

  1. Run using the latest Safari on Mac OS X

Expected behavior
Toolbar should work.

Screenshots

Desktop (please complete the following information):

  • OS: Mac OS
  • Browser Safari
  • Version Latest

First Keypress in lockText Mode Executes

Describe the bug
Text formatting is currently being allowed during lockText

To Reproduce
Steps to reproduce the behavior:

  1. Run locally within cicero-ui
    a. Download both markdown-editor and cicero-ui
    b. Run in markdown-editor
    • npm install
    • npm run build
    • npm run transpile
    • npm link
      c. Run in cicero-ui:
    • npm install
    • rm -rf node_modules/\@accordproject/markdown-editor
    • npm link @accordproject/markdown-editor
    • npm run start
  2. Go to http://localhost:8080/
  3. Ensure the lockText prop in cicero-ui being passed down to the ContractEditor is true.
  4. Place selection within a clause, start typing. Notice the FIRST character key press executes.

Expected behavior
lockText should prevent any edits to text within a clause - except for variables

Additional context
N/A

Double Enter Does Not Leave List

Describe the bug
When writing in a numbered or bulleted list, pressing Enter twice does not escape the list.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the Netlify deployed demo
  2. Click on three or peaches in the lists
  3. Press Enter twice
  4. See two bullets/numbers instead of escaping to a new paragraph line.

Expected behavior
Pressing enter twice at the end of a list should escape.

Additional context
N/A

Reimplement formatting toolbar

The existing floating toolbar has been disabled during the port to the latest version of React. We should implement a static formatting toolbar that can be attached to the top of the editor.

Support readOnly prop Dictating Toolbar Rendering

Is your feature request related to a problem? Please describe.
This component should accept an optional prop readOnly which toggles the toolbar rendering or not

Describe the solution you'd like
Conditionally render the toolbar based on the readOnly prop

Describe alternatives you've considered
N/A

Additional context
This relates to:

  • Issue #35
  • Issue #78

Block Quote Styling

Is your feature request related to a problem? Please describe.
We need to style block quote text in the document

Describe the solution you'd like
There should be the ability to style the block quote text via a prop

Describe alternatives you've considered
N/A

Additional context
A starting point for related code is in PR #65 and #66

Fail to add clause to contract when headings exist

Describe the bug
When drafting a contract in Template Studio v2 (TSv2), adding a clause to a contract with any plain text in a heading state (heading_one, heading_two, heading_three) will result in an error.

A error modal pops up (TypeError) with the message of:

Failed to add clause to contract
e.nodes.get is not a function.

Along with no error in the console. This error is generated by this code in TSv2.

In Safari, an expanded error is shown:

Failed to add clause to contract
e.nodes.get is not a function. (In 'e.nodes.get(0)', 'e.nodes.get' is undefined)

To Reproduce
Steps to reproduce the behavior:

  1. Open TSv2 in Netlify
  2. Select the default text already in the contract
  3. Hover over Style in the toolbar to select any heading style
  4. Select + Add to contract for any clause in the template library on the right

Expected behavior
The clause should be added without error.

Screenshots
A demonstration of the process is shown in this Loom recording, which first shows that the error does not occur when no heading exists, but then does occur when a heading exists.

Desktop:

  • OS: iOS
  • Browser: Chrome & Safari

Additional context
N/A

Demo not working

Describe the bug
After the yarn start and navigating to localhost:3001/examples, a blank screen is presented.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'localhost:3001'

Expected behavior
The posted screenshot in README.md

Screenshots
image

Desktop (please complete the following information):

  • OS: [MacOS]
  • Browser [chrome]
  • Version [76]

Font size toolbar buttons

The toolbar buttons for font size need to increase or decrease the font size from normal to h1, h2 etc.

We also need better icons for these buttons (see Medium for example).

Remove Underline Button from Toolbar

Since transitioning to utilize the markdown-transform, we will need to take a step back from supporting underline for the time being. Markdown doesn't natively support underline, so we need to rethink how we serialise this.

Remove the underline option for now

We can then experiment with using html tags for underline.

Related issues:

  • #81

Toolbar Buttons Work in lockText Mode

Describe the bug
Text formatting is currently being allowed during lockText

To Reproduce
Steps to reproduce the behavior:

  1. Run locally within cicero-ui
    a. Download both markdown-editor and cicero-ui
    b. Run in markdown-editor
    • npm install
    • npm run build
    • npm run transpile
    • npm link
      c. Run in cicero-ui:
    • npm install
    • rm -rf node_modules/\@accordproject/markdown-editor
    • npm link @accordproject/markdown-editor
    • npm run start
  2. Go to http://localhost:8080/
  3. Ensure the lockText prop in cicero-ui being passed down to the ContractEditor is true.
  4. Highlight text within a clause (not a variable), and try bolding or italicizing text.

Expected behavior
lockText should prevent any edits to text within a clause - except for variables

Additional context
N/A

Slate: onEnter inside list

When adding a list item using the Slate editor and then pressing enter to add a new item a new line is added, but no bullet or number is displayed.

README Typos

I am going through the readme and found some necessary punctuation additions, typo fixes and refactors. will raise the PR referencing this issue.
This is part of hacktoberfest!

Toolbar Responsive Design

Related Issues

Tasks

  • Render static toolbar responsively, currently bugs with being embedded and width lowered.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.