accordproject / web-components

React Components for Accord Project

Accord Project Web Components

This repository contains a library of user interface components that can be used to create web-applications based on Accord Project technology. The components use the React ( JavaScript library )

Repository Structure

This repository is a monorepo, built using lerna. Each package is published as an independent npm module.

• Markdown Editor: A WYSIWYG editor based on Slate for markdown that conforms to the CommonMark specification.
• Contract Editor: An editor based on our Markdown Editor for handling smart legal contracts.
• Concerto UI: React components for models written in the Concerto Modeling Language.
• Web Components: Tools for implementing React components in your contract editing studio.
• Storybook: A React Storybook, and contains all the stories for all the sub-packages.

Netlify is used to automatically publish the static site generated by Storybook.

Use the interactive Storybook to discover the components and their properties.

View the Live Storybook Demo or Run Locally

Sample Project

To use these components refer to: https://github.com/accordproject/web-components-starter If you are not already using semantic-ui-react in your project, be sure to include import 'semantic-ui-css/semantic.min.css' in the entry point of your react app.

Run Locally

npm install -g lerna
lerna clean && lerna bootstrap && lerna run build
cd packages/storybook
npm i
npm run storybook

User Interaction Testing (e2e tests)

Install cypress app on your local system: https://download.cypress.io/desktop

Check if the system requirements are matched: https://docs.cypress.io/guides/getting-started/installing-cypress.html#System-requirements

Start the storybook

cd packages/storybook
npm run storybook

Execute the following script to start e2e tesing

cd packages/storybook
npm run test:e2e

If you are writing the tests and want to see the tests in a browser, then do the following

cd packages/storybook
npx cypress open

---

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

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 Discord 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](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).

Copyright 2018-2019 Clause, Inc. All trademarks are the property of their respective owners. See LF Projects Trademark Policy.

web-components's Issues

Hyperlink Modal Disrupts History

Describe the bug
A user cannot undo a link if forwarding through a hyperlink modal in history

To Reproduce
Steps to reproduce the behavior:

1. Go to the live demo
2. Create new empty paragraph
3. Select hyperlink, type in a word and a hyperlink
4. Navigate back in history
5. Navigate forward, see hyperlink modal appear, navigate forward again
6. Cannot navigate backward in history anymore

Expected behavior
History should not be interrupted by the hyperlink modal

Add Husky and Lint Staged

Is your feature request related to a problem? Please describe.
Sometimes the developer commit consist of linting error

Describe the solution you'd like
It will automatically fix the linting error and don't let the developer commit without fixing the lint error

Additional context
I would like to work on it

Editing for nested quotes and lists

Is your feature request related to a problem? Please describe.
Markdown can support nested quotes and lists. Those seem to be properly imported in the editor, but one cannot edit those or create them directly using the toolbar.

Describe the solution you'd like
It would be nice to be able to create a quote containing a list or a list containing a quote, or a quote containing a list containing a quote. This might require some thinking about the scope for the toolbar buttons.

Reduce Prop Reliance

We should not be in the habit of relying on a lot of styling props for individual fields. This practice has gotten out of hand:

ContractEditor
  clauseProps = {
    BODY_FONT (string),
    CLAUSE_BACKGROUND (string),
    CLAUSE_BORDER (string),
    CLAUSE_ICONS (string),
    COMPUTED_COLOR (string),
    HEADER_FONT (string),
    VARIABLE_COLOR (string),
    CONDITIONAL_COLOR (string),
};
  editorProps = {
    BUTTON_BACKGROUND_INACTIVE (string),
    BUTTON_BACKGROUND_ACTIVE (string),
    BUTTON_SYMBOL_INACTIVE (string),
    BUTTON_SYMBOL_ACTIVE (string),
    DROPDOWN_COLOR (string),
    EDITOR_BORDER (string),
    EDITOR_BORDER_RADIUS (string),
    EDITOR_HEIGHT (string),
    EDITOR_MARGIN (string),
    EDITOR_SHADOW (string),
    EDITOR_WIDTH (string),
    TOOLBAR_BACKGROUND (string),
    TOOLTIP_BACKGROUND (string),
    TOOLTIP (string),
    TOOLBAR_SHADOW (string),
};


ErrorLogger
  errorsPropsObject = {
    ERRORS_HEADER_BACKGROUND (string),
    ERRORS_HEADER_BACKGROUND_HOVER (string),
    ERRORS_HEADER_EXPAND_ARROW (string),
    ERRORS_HEADER_BORDER_TOP (string),
    ERRORS_HEADER_SHADOW (string),
    ERRORS_DISPLAY_BACKGROUND (string),
    ERRORS_DISPLAY_SHADOW (string),
    ERRORS_DISPLAY_Z_INDEX (string),
    ERROR_BORDER_BOTTOM (string),
    ERROR_EXPAND_ARROW (string),
    ERROR_FILE (string),
    ERROR_FILE_HOVER (string),
    ERROR_TYPE (string),
    ERROR_FULL_MESSAGE (string),
    ERROR_SHORT_MESSAGE (string),
};


Navigation
  navigationProps = {
    NAVIGATE_SWITCH_TITLE_ACTIVE_COLOR (string),
    NAVIGATE_SWITCH_TITLE_INACTIVE_COLOR (string),
    NAVIGATE_SWITCH_TITLE_FONT_FAMILY (string),
    NAVIGATION_POSITION (string),
    NAVIGATION_TOP_VALUE (string),
    NAVIGATION_MAX_HEIGHT (string),
    NAVIGATION_WIDTH (string),
    NAVIGATION_BACKGROUND_COLOR (string),
    CONTRACT_NAVIGATION_HEADER_COLOR (string),
    CONTRACT_NAVIGATION_CLAUSE_COLOR (string),
    CONTRACT_NAVIGATION_CLAUSE_HEADER_COLOR (string),
    CLAUSE_NAVIGATION_TITLE_COLOR (string),
    CLAUSE_NAVIGATION_TITLE_HOVER_COLOR (string),
    CLAUSE_NAVIGATION_EXPANSION_ARROW_COLOR (string),
    CLAUSE_NAVIGATION_EXPANSION_ARROW_HOVER_COLOR (string),
    CLAUSE_NAVIGATION_FILE_DELETE_COLOR (string),
    CLAUSE_NAVIGATION_FILE_DELETE_HOVER_COLOR (string),
    CLAUSE_NAVIGATION_FILE_ADD_COLOR (string),
    CLAUSE_NAVIGATION_FILE_ADD_HOVER_COLOR (string),
};


TemplateLibrary
  libraryPropsObject = {
    ACTION_BUTTON (string),
    ACTION_BUTTON_BG (string),
    ACTION_BUTTON_BORDER (string),
    HEADER_TITLE (string),
    SEARCH_COLOR (string),
    TEMPLATE_BACKGROUND (string),
    TEMPLATE_DESCRIPTION (string),
    TEMPLATE_TITLE (string),
};

All of these should be removed and we should instead rely on a strong system of structured class names. This will allow users to handle what these props currently do via overriding the CSS.

Related Issue:

• accordproject/markdown-editor#255

Optionally render a gutter with line numbers

For some users a gutter area that renders line numbers would be useful.

Support Nested Lists

Is your feature request related to a problem? Please describe.
The editor should support nested lists with a keyboard handle for SHIFT + ENTER and toolbar buttons for indent and outdent

Describe the solution you'd like
Design from @Michael-Grover, this should wrap a list in a further list if it is a descendent of a list

Describe alternatives you've considered
Further work can be done on indenting paragraphs in the future

Additional context
Lists in the schema should support other lists

• Issue accordproject/markdown-editor#192
• PR accordproject/markdown-editor#194

Account for the commented out underline code

• Issue accordproject/markdown-editor#97
• PR accordproject/markdown-editor#99

Component: Model Editor

Is your feature request related to a problem? Please describe.
Provide a specific editor to handle the model files

Describe the solution you'd like
Inspiration could be taken from the #59 Logic Editor

Describe alternatives you've considered
N/A

Additional context
N/A

SHIFT+Enter Inside Variable

Describe the bug
A user can create a new paragraph within a variable

To Reproduce
Steps to reproduce the behavior:

1. Go to the demo
2. Click anywhere in "Party A" in the first line
3. Press SHIFT + Enter
4. See new paragraph created

Expected behavior
This should be restricted

Component: Concerto (Model) Text Editor

• Build a new LSP implementation for Concerto, based on https://github.com/hyperledger/composer-vscode-plugin/blob/master/server/src/server.ts
• Use Monaco to edit CTO files

Dynamic Toolbar Styling

Is your feature request related to a problem? Please describe.
The Toolbar should accept props to render certain buttons. It should therefore also render well no matter which buttons are toggled on.

Describe the solution you'd like
This could possibly have a minimum cap, such as Styles, bold, italic, and underline. Input would be helpful (@Michael-Grover)

Describe alternatives you've considered
css-grid may not actually be the best solution here, feel free to explore other options

Additional context
This relates to Issue accordproject/markdown-editor#35

Component: Concerto (Model) Form-based Editor

• Viewer/editor for Concerto models as a set of class declarations, with properties specified using actions and forms (Add Concept, Add Transaction etc).

Pop-up Variable Editors

Providing a modal pop-up to edit variables would be useful as it would constrain users from entering bad data. The variables could be rendered as links in the contract text, and clicking on a variable should open the appropriate pop-up. See designs from @Michael-Grover.

• String variable: unconstrained text input
• String variable with regex in model: constrain text input based on a regex
• Integer/Long variable: whole numbers only (including negative numbers)
• Float/Double variable: floating point numbers only (including negative numbers)
• Numeric variable with range validation: constrain numeric variable based on upper and lower range
• DataTime variable: calendar pop up (allowing user to enter Date, Time or DateTime), along with a timezone
• Monetary Amount
• Temporal Duration
• Temporal Period
• Boolean variable: a drop down with true/false (or similar)
• Anything else : unconstrained text input

Describe the solution you'd like

We should ensure that we don't duplicate the logic in the concerto-ui React form component, which can create React forms for Concerto types. The pop-ups will want to delegate to concerto-ui to ensure consistency.

Note that the concept of Variable is defined by the Contract Editor via a plugin, here:
https://github.com/accordproject/web-components/blob/master/packages/ui-contract-editor/src/components/Variable/index.js

When variables are clicked we should open a modal to edit them. Conceptually this is similar to how links are handled in the base markdown editor, so that can be used as a reference. We will want any code that handles variables to be in the contract-editor.
https://github.com/accordproject/web-components/blob/master/packages/ui-markdown-editor/src/FormattingToolbar/index.js#L51

sample Data invalid when using range validator

Describe the bug
When using concerto-ui with models which are using range validators in their Models, Sample Data isn't provided correctly

To Reproduce
Steps to reproduce the behavior:

1. Go to https://concerto-ui.netlify.com/
2. Change the 'FragileGoodsClause' to i.e.

asset FragileGoodsClause extends AccordContract {
  o AccordParty buyer
  o AccordParty seller
  o MonetaryAmount deliveryPrice
  o Double accelerationMin range=[0.0,10.0]
  o Double accelerationMax
  o MonetaryAmount accelerationBreachPenalty
  o Duration deliveryLimitDuration
  o MonetaryAmount lateDeliveryPenalty
}

3. Select FragileGoodsClause in the Declaration Selection
4. Inspect the form and its default Values

Expected behavior
Default Values which fit the validators OR at least default values in all fields without validators

Screenshots

Desktop (please complete the following information):

• Browser Firefox
• Version 74.0

Additional Context
The console shows an error similar to the following one:
Error: "Validator error for field org.accordproject.cicero.contract.AccordParty#6280 io.clause.demo.fragileGoods.FragileGoodsClause.accelerationMin: Value is outside upper bound 207.253"

Line Break not preserved on paste

Describe the bug
When copying multiple lines and then pasting them, the line breaks are not preserved.

To Reproduce
Steps to reproduce the behavior:

1. Go to the demo
2. Select "This is a
   hard break."
3. Press Mod+C to copy
4. Select somewhere in the middle of "This is a
   hard break."
5. Press Mod+P to paste
6. See that the line break from the copied text has not been preserved.

Expected behavior
The line break should be preserved, such that there are now three lines in the section.

See Loom video
https://www.loom.com/share/cf0dd7088d964e9a93a5259deccfd190

Extend the support for logo in Template Library

Is your feature request related to a problem? Please describe.
We can add the support for the logo in the TemplateLibrary Component since accordproject/template-archive#533 is merged.

Describe the solution you'd like
I am actually not sure how we can extend the support here 😓 @irmerk @DianaLease I would need your suggestions. 😅

Underline Text in List

The underline style can not be applied to text in an ordered or unordered list. The bold, italic, and code styles work for text in a list.

Example of a real contract where parts of an ordered list are underlined, which currently isn't possible in our editor:

Markdown support: HTML blocks

Is your feature request related to a problem? Please describe.
Html blocks are a markdown feature that the editor currently does not support

Describe the solution you'd like
The ability to create/edit/delete html blocks.

May need to think about security risk!

User Interaction Testing

This issue will track the tests which need to be implemented in order to increase stability of this codebase. Please feel free to add suggestions.

MASTER_TOOLBAR:

• Heading 1, 2, 3
• Keyboard Shortcuts
• bold
• italic
• hyperlink
• code
• > block_quote
• ol_list
• ul_list

MASTER_HISTORY_CHECK:

• Undo
• Redo

Contract Editor

Clause Templates

• Clause template actions
  • Delete clause template (actually remove)
    • MASTER_HISTORY_CHECK
  • Edit clause template (function call)
  • Test clause template (function call)
• Add clause template
  • MASTER_HISTORY_CHECK
• lockText checks
  • Paste, cut inside
  • MASTER_TOOLBAR
• Copy paste clause template

Variables

• Cannot be removed (quotation marks should remain)
• Conditional
  • Toggle roundtrip
  • Hover tooltip

Template Library

Error Logger

Navigation

Custom dialogs to edit links and images

The toolbar allows inserting both links and images. Both would benefit from a custom dialog to insert new links or to edit existing links.

Formulae UI

Add support for computed variables in the Cicero UI.
Contact @Michael-Grover with your email address to get access to the clickable prototype on invision
https://projects.invisionapp.com/d/main#/console/16741009/406893195/preview

---

https://projects.invisionapp.com/d/main#/console/16741009/406893195/preview

---

https://projects.invisionapp.com/d/main#/console/16741009/406893196/preview

---

https://projects.invisionapp.com/d/main#/console/16741009/406893194/preview

---

https://projects.invisionapp.com/d/main#/console/16741009/406893193/preview

---

https://projects.invisionapp.com/d/main#/console/16741009/406893192/preview

Connect Parameter Button with Variables

Related Issues

• Issue accordproject/markdown-editor#42

Tasks

• Render button responsively with a variable being selected
• Pressing the button should turn the selection into a variable

Dragging Image Duplicates

Describe the bug
Selecting and dragging an image within the Editor duplicates it.

To Reproduce
Steps to reproduce the behavior:

1. Go to the demo
2. Click on the Concerto Model Image or insert a new one
3. Drag it to a new position
4. The image is duplicated

Expected behavior
Only the position of the image should be changed.

Screenshots

Use of JavaScript Date should probably be switched to Moment

Both for stability and consistency with the rest of the Accord Project stack, it might be preferable to use moment for date creation rather than the custom use of the JavaScript Date() call.

This is notably affects code here: https://github.com/accordproject/concerto-ui/blob/f8b533d2e93d8526aa0bab708dcd0721f367c8ba/packages/concerto-ui-react/src/reactformvisitor.js#L243
or
here: https://github.com/accordproject/concerto-ui/blob/f8b533d2e93d8526aa0bab708dcd0721f367c8ba/packages/concerto-ui-react/src/reactformvisitor.js#L504-L520

Also creation of dates in local timezone cannot be easily tested.

Markdown support: Code blocks

Is your feature request related to a problem? Please describe.
Code blocks are a useful markdown feature. It would be nice if the editor supports them.

Describe the solution you'd like
The ability to create/edit/delete code blocks.

Maybe the ability to turn into a selection into a code block would be nice as well/

Initial Linebreak not Preserved on Paste

Describe the bug
Copy/paste within the editor doesn't preserve a linebreak if it is the beginning of the copy.

To Reproduce
Steps to reproduce the behavior:

1. Go to the live demo
2. Select This is ***bold and italic*** text., and select up to the end of the previous paragraph
3. Press CTRL-C to copy
4. Press CTRL-V to paste
5. Note that the linebreak is not preserved

Expected behavior
Entire selection should be used in copy/paste

Library Details button serves modal

Related Issues

• Issue accordproject/cicero-ui#6
• Issue #24 in TSv2

Tasks

• Create functionality to serve up specific template in a details modal.

Creating code blocks unexpectedly creates (nested) code inlines

Describe the bug
Creating a code block does not create a code block but different levels of code inlines.

To Reproduce
Steps to reproduce the behavior:

1. Go to the markdown editor
2. Select a paragraph
3. Click on 'code' button
4. It does not create a code block, but some code inlines

Expected behavior
Selecting a paragraph (or multiple paragraphs) and clicking code should create a code block.

Screenshots

Input field needs validation

Describe the bug
Input fields need validation on the client-side, many fields are showing ambiguous behaviour,

To Reproduce
Steps to reproduce the behaviour:

1. Open Safari or Firefox browser.
2. Go to form and choose any Declaration Selection
3. Click on any field they can accept any value irrespective of what defined
4. See Error

Expected behaviour
It should prompt the user with a warning as a label

Screenshots

Desktop (please complete the following information):

• OS: MacOS Catalina
• Browser : [safari, firefox]

Note: This is a browser-specific issue hence a strict validation needs to be done

Here's a portion of it is being discussed, https://github.com/accordproject/concerto-ui/issues/24#issuecomment-589997344 but since Safari/Firefox doesn't enforce the user to enter 'typed' data validation needs to be done on almost all of the fields.

Contract-level Variables

Is your feature request related to a problem? Please describe.
Parameter support (contract editor)

Describe the solution you'd like
Example of these variables are parties

Describe alternatives you've considered
N/A

Additional context
Related issues:

• Cicero 394

Component: Ergo (Logic) Editor

• Based on https://github.com/react-monaco-editor/react-monaco-editor
• We should refactor the VSCode plugin to share the same Language Server and use it with the Monaco editor. https://github.com/TypeFox/monaco-languageclient
• https://langserver.org
• Existing LSP: https://github.com/accordproject/ergo-vscode-plugin/blob/master/server/src/server.ts

User Interaction Testing

This issue will track the tests which need to be implemented in order to increase stability of this codebase. Please feel free to add suggestions.

MASTER_MARK_LIST: (@RiverceeBontu)

• bold, italic, hyperlink, code
• bold+italic, bold+hyperlink, bold+code
• italic+hyperlink, italic+code
• code+hyperlink
• bold+italic+hyperlink, bold+italic+code
• italic+code+hyperlink, italic+code+bold
• bold+italic+hyperlink+code

MASTER_BLOCK_TRANSFORM:

• block_quote to ul_list
• ul_list to block_quote
• block_quote to ol_list
• ol_list to block_quote
• ul_list to ol_list
• ol_list to ul_list

MASTER_HISTORY_CHECK:

• Undo
• Redo

Toolbar

Headings (@sanketshevkar)

• Selecting a paragraph and changing to header 1, 2, 3
  • MASTER_HISTORY_CHECK
• Selecting a word in paragraph and changing to header 1, 2, 3
  • MASTER_HISTORY_CHECK
• Placing cursor in paragraph and changing to header 1, 2, 3
  • MASTER_HISTORY_CHECK
• Switching header 1 to header 2, 3, paragraph
  • MASTER_HISTORY_CHECK
• Switching header 2 to header 1, 3, paragraph
  • MASTER_HISTORY_CHECK
• Switching header 3 to header 1, 2, paragraph
  • MASTER_HISTORY_CHECK
• Switching paragraph to header 1, 2, 3
  • MASTER_HISTORY_CHECK
• Switching paragraph with all combinations to header 1, 2, 3
  • MASTER_HISTORY_CHECK
  • MASTER_MARK_LIST
  • MASTER_HISTORY_CHECK
• Make a block_quote into header 1, 2, 3
  • MASTER_HISTORY_CHECK
• Make a list_item in ul_list into header 1, 2, 3
  • MASTER_HISTORY_CHECK
• Make a list_item in ol_list into header 1, 2, 3
  • MASTER_HISTORY_CHECK
• Make entire ul_list into header 1, 2, 3
  • MASTER_HISTORY_CHECK
• Make entire ol_list into header 1, 2, 3
  • MASTER_HISTORY_CHECK

Marks (@Cronus1007)

Bold

• Make all combinations bold
  • Paragraph
  • Text in paragraph
  • Text in word
  • Heading 1, 2, 3
  • italic, italic+code, code
  • ul_list and ol_list with MASTER_MARK_LIST
  • MASTER_HISTORY_CHECK
• Undo bold
• Enable bold and type more characters
  • MASTER_HISTORY_CHECK

Italic

• Make all combinations italic
  • Paragraph
  • Text in paragraph
  • Text in word
  • Heading 1, 2, 3
  • bold, bold+code, code
  • ul_list and ol_list with MASTER_MARK_LIST
  • MASTER_HISTORY_CHECK
• Undo italic
• Enable italic and type more characters
  • MASTER_HISTORY_CHECK

Code

• Make all combinations code
  • Paragraph
  • Text in paragraph
  • Text in word
  • Heading 1, 2, 3
  • italic, italic+bold, bold
  • ul_list and ol_list with MASTER_MARK_LIST
  • MASTER_HISTORY_CHECK
• Undo code
• Enable code and type more characters
  • MASTER_HISTORY_CHECK

Blocks

• Swap block types
  • MASTER_BLOCK_TRANSFORM
  • MASTER_HISTORY_CHECK
• Add mark to block
  • MASTER_MARK_LIST
  • Heading 1, 2, 3
  • MASTER_HISTORY_CHECK
• Add hyperlink to block
  • MASTER_HISTORY_CHECK

Hyperlink

• Add hyperlink to MASTER_MARK_LIST text
  • MASTER_HISTORY_CHECK
• Add hyperlink to blocks
  • MASTER_BLOCK_TRANSFORM
  • MASTER_HISTORY_CHECK

Images

• Add image
  • MASTER_HISTORY_CHECK
• Remove image (backspace)
  • MASTER_HISTORY_CHECK
• Transform and ensure image remains untouched
  • All headings
  • All marks
  • All blocks
  • Hyperlink

Rendering

Breaks

• Softbreak
• Linebreak

Actions

Shortcuts

• Marks
  • MASTER_HISTORY_CHECK
• Blocks
  • MASTER_HISTORY_CHECK
• Hyperlink
  • MASTER_HISTORY_CHECK

Filter Templates by Cicero Version

Is your feature request related to a problem? Please describe.
The Library component should have the capability to filter by cicero version

Describe the solution you'd like
If the templates passed to the component do not all have the same Cicero version, we should display a dropdown with the versions represented. Selecting a version from the dropdown should filter the templates by that version.

Describe alternatives you've considered
Open to input

Additional context
N/A

SHIFT+Enter in Blockquote

Describe the bug
A user cannot create a line break within a blockquote.

To Reproduce
Steps to reproduce the behavior:

1. Go to the live demo
2. Click at the end of the first paragraph
3. Press Enter and type something
4. Format as a blockquote with the toolbar
5. Press SHIFT + Enter
6. A new blockquote is made

Expected behavior
Pressing SHIFT + Enter inside a block quote should create a new line within the blockquote

Library supports drag-and-drop functionality

Related Issues

• Issue accordproject/cicero-ui#6
• Issue #61
• Issue #21 in TSv2

Tasks

• Research this functionality

Some Possible Improvements to Redo/Undo

A few things do not feel entirely natural with the current Undo/Redo behaviour:

1. Sometimes it takes several clicks for a change to be undone/redone. I think because it tracks selection or cursor position changes. I'm not sure what the usual/expected behaviour for editor is, but it felt a little cumbersome
2. the above issue is compounded by the fact that you don't always have a visual hint (undo after a selection + change does not always show the previous step in the usual "blue" selected area)
3. it would be really nice if the redo/undo buttons in the toolbar would be shaded differently when reaching the beginning or end of the history (i.e., when there is no more redo or undo available)

Clause Component Error UI

The clause component should also have an indication of an error, not just the ErrorLogger

ContractEditor supports drag-and-drop functionality

Related Issues

• Issue accordproject/cicero-ui#1
• Issue accordproject/cicero-ui#31
• Issue #21 in TSv2

Tasks

• Research this functionality

Better editor for linked data

Provide a better editor experience to edit links. E.g. see what Google Docs does, or other comparable editors.

This should be pluggable so that the user can define a custom editor for dates/times etc.

Add support for tables

Many markdown files contain tables. It would be very useful for the editor to support these files.

Describe the solution you'd like
UI to render and edit tables.

Additional context

We will need to extendsaccordproject/markdown-common and the CommonMark DOM to represent tables, as well as the other transforms to support them.

Slate tables demo: https://www.slatejs.org/examples/tables
Table in commonmark discussion: https://talk.commonmark.org/t/tables-in-pure-markdown/81/9
GFM: https://github.github.com/gfm/#tables-extension-

Handle Underline in Markdown

To Be Done Instead of OR After Issue #27

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.

We can then experiment with using html tags for underline.

Models and Logic Components should handle adding/removing files

Potential solution mockup from @Michael-Grover-C from accordproject/template-studio#83

https://invis.io/GNQDQ9HZ5QE#/345313118_no_Template

Quoting in Cicero UI doesn't seem to handle nested structures as the Md editor

Quoting in the markdown editor properly preserves the structure of the selected part of the document:

It seems to lose the structure when quoting in Cicero UI:

It could be an artefact of the demo, but might be useful to investigate.

User interface to insert a thematic break

Markdown supports the concept of a thematic break which markdown-pdf interprets as a page break (--- in markdown). Having a toolbar item to insert a thematic break in the markdown editor would allow users to control where page breaks occur in PDFs that are generated from the contents of the editor.

The thematic break should be rendered in Slate to indicate that a page break will occur. E.g.

---- page break ---- 

Or similar.

In CommonMark this is represented by an org.accordproject.commonmark.ThematicBreak node. See:
https://models.accordproject.org/markdown/[email protected]

Component: Concerto (Model) Graphical Editor

• Viewer/editor for Concerto models as interactive UML style diagram, using https://github.com/projectstorm/react-diagrams

References:

• https://www.eclipse.org/modeling/emf/docs/1.x/tutorials/glibmod/glibmod_emf1.1.html
• https://eclipsesource.com/blogs/tutorials/emf-forms-editors/
• https://www.eclipse.org/emfcloud/

Component: Package.json Editor

• Based on Monaco JSON file support

Component: Template Execution & Testing

Execution & Test component

• Provide the ability to execute template logic on a given request, for a given state
• Allow to set the current time
• Allow to select tests based on template's Cucumber tests
• Allow to save a new test into the template

Copy Paste Lists doesn't Wrap First List Item

Describe the bug
Copy/Paste List Items doesn't wrap the first Item in the List.

To Reproduce
Steps to reproduce the behavior:

1. Go to the demo
2. Select the existing list in the editor
3. Press CtrlC to Copy
4. Press CtrlV to Paste
5. The first Item of the list is not wrapped within the list

Expected behavior
All the items should be wrapped within the list.

Screenshots

Additional context
Please note that an Ordered List on Copy/Paste also changes to Unordered List in markdown.

Component: Clause Template Editor

Is your feature request related to a problem? Please describe.
Provide a specific editor to handle the clause templates

Describe the solution you'd like
This likely will happen within the ContractEditor and will edit a clause template with rich text formatting

Describe alternatives you've considered
N/A

Additional context
N/A

Component: Clause Plugin

• A plugin for the contract editor that knows how to both Edit and Design AP Clauses https://github.com/accordproject/contract-editor/blob/master/src/plugins/clausePlugin.js
• In Edit mode only variable values can be supplied
• In Design mode the grammar text can be edited, variables inserted and their types specified

Can type letters into a number field

Describe the bug
The form field created for numeric fields allows the user to type letters.

To Reproduce
Steps to reproduce the behavior:

1. Open a form on a CTO model that contains a numeric field
2. Note that the field has the up and down spinner to change the number
3. Type a letter into the field
4. See error

Expected behavior
Letters should be prevented?

Desktop (please complete the following information):

• OS: Mac OS
• Browser Safari
• Version Latest