├── .babelrc ├── .eslintrc.json ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── custom-issue.md │ └── feature_request.md └── pull_request_template.md ├── .gitignore ├── .npmignore ├── .travis.yml ├── .travis ├── base.sh ├── build.cfg ├── deploy.sh ├── fix_github_https_repo.sh ├── github_deploy_key.enc ├── stable.sh └── unstable.sh ├── CHARTER.md ├── CONTRIBUTING.md ├── DEVELOPERS.md ├── LICENSE ├── README.md ├── assets └── APLogo.png ├── examples └── src │ ├── index.css │ ├── index.html │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js ├── package-lock.json ├── package.json ├── public ├── APLogo.png ├── favicon.ico ├── index.html ├── manifest.json └── preview.png ├── scripts ├── depcheck.js ├── manualrelease.sh ├── pkgbump.js ├── pkgcheck.js ├── pkgset.js ├── pkgstamp.js └── scan-all-modules.sh ├── src ├── MarkdownTextEditor │ └── index.js ├── RichTextEditor │ ├── FormattingToolbar │ │ ├── FormatButton.js │ │ ├── HistoryButton.js │ │ ├── HyperlinkButton.js │ │ ├── HyperlinkModal.js │ │ ├── StyleFormat │ │ │ ├── Item.js │ │ │ └── index.js │ │ ├── ToolbarMenu.js │ │ └── index.js │ ├── components │ │ ├── Button.js │ │ ├── Leaf.js │ │ ├── Node │ │ │ ├── Heading.js │ │ │ └── index.js │ │ ├── Portal.js │ │ ├── Span │ │ │ ├── HorizontalRule.js │ │ │ └── index.js │ │ ├── icons │ │ │ ├── bold.js │ │ │ ├── code.js │ │ │ ├── copy.js │ │ │ ├── delete.js │ │ │ ├── image.js │ │ │ ├── index.js │ │ │ ├── italic.js │ │ │ ├── link.js │ │ │ ├── olist.js │ │ │ ├── open.js │ │ │ ├── quote.js │ │ │ ├── redo.js │ │ │ ├── separator.js │ │ │ ├── ulist.js │ │ │ └── undo.js │ │ └── index.js │ ├── index.js │ ├── plugins │ │ ├── withHtml.js │ │ ├── withImages.js │ │ ├── withLinks.js │ │ └── withLists.js │ ├── tests │ │ ├── __snapshots__ │ │ │ └── index.test.js.snap │ │ └── index.test.js │ └── utilities │ │ ├── constants.js │ │ ├── generateId.js │ │ ├── hotkeys.js │ │ ├── schema.js │ │ ├── toolbarHelpers.js │ │ └── tooltipHelpers.js └── styles.css ├── webpack.config.js └── webpack.config.prod.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["@babel/plugin-transform-runtime"], 3 | "presets": ["@babel/preset-env", "@babel/preset-react"], 4 | "env": { 5 | "test": { 6 | "plugins": ["@babel/plugin-transform-modules-commonjs"] 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@clausehq/eslint-config"], 3 | "parser": "babel-eslint", 4 | "settings": { 5 | "import/resolver": { 6 | "node": { 7 | "paths": ["src"], 8 | "extensions": [".js", ".jsx", ".ts", ".tsx"] 9 | } 10 | }, 11 | "react": { 12 | "version": "detect" 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom-issue.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue 3 | about: Describe this issue's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | # Issue # 2 | 3 | 4 | ### Changes 5 | - 6 | - 7 | - 8 | 9 | ### Flags 10 | - 11 | 12 | ### Related Issues 13 | - Issue # 14 | - Pull Request # -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (https://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # TypeScript v1 declaration files 43 | typings/ 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # Yarn Integrity file 58 | .yarn-integrity 59 | 60 | # dotenv environment variables file 61 | .env 62 | 63 | # next.js build output 64 | .next 65 | 66 | # windows junk 67 | thumbs.db 68 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | examples 3 | .babelrc 4 | .gitignore 5 | webpack.config.js -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '8' 4 | dist: trusty 5 | before_install: | 6 | set -e 7 | export PATH="./$HOME/node_modules/.bin:$PATH" 8 | npm install -g @alrra/travis-scripts 9 | date 10 | install: | 11 | set -e 12 | date 13 | npm install 14 | date 15 | script: npm run build && npm run test 2>&1 16 | deploy: 17 | provider: script 18 | script: 19 | - if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then bash ./.travis/deploy.sh; fi 20 | skip_cleanup: true 21 | on: 22 | all_branches: true 23 | repo: accordproject/markdown-editor 24 | after_failure: tail -n +1 -- /home/travis/.npm/_logs/*-debug.log 25 | after_success: 26 | cache: 27 | directories: 28 | - node_modules 29 | services: 30 | -------------------------------------------------------------------------------- /.travis/base.sh: -------------------------------------------------------------------------------- 1 | # 2 | # Licensed under the Apache License, Version 2.0 (the "License"); 3 | # you may not use this file except in compliance with the License. 4 | # You may obtain a copy of the License at 5 | # 6 | # http://www.apache.org/licenses/LICENSE-2.0 7 | # 8 | # Unless required by applicable law or agreed to in writing, software 9 | # distributed under the License is distributed on an "AS IS" BASIS, 10 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 11 | # See the License for the specific language governing permissions and 12 | # limitations under the License. 13 | # 14 | 15 | ## this is a script soley for inclusion in the main build scripts. 16 | ## Common functions that are executed both all types of builds 17 | 18 | ME=`basename "$0"` 19 | echo "-->-- Starting ${ME}" 20 | echo "--I-- ${TRAVIS_TAG} ${TRAVIS_BRANCH}" 21 | 22 | function _exit(){ 23 | printf "%s Exiting %s because %s exit code:%s\n" "--<--" "${ME}" "$1" "$2" 24 | exit $2 25 | } 26 | 27 | function _abortBuild(){ 28 | echo "ABORT_BUILD=true" > ${DIR}/build.cfg 29 | echo "ABORT_CODE=$1" >> ${DIR}/build.cfg 30 | echo "BUILD_FOCUS=${BUILD_FOCUS}" >> ${DIR}/build.cfg 31 | echo "BUILD_RELEASE=${BUILD_RELEASE}" >> ${DIR}/build.cfg 32 | } 33 | 34 | #check to see if the build.cfg file (that holds state between scripts) 35 | if [ ! -f ${DIR}/build.cfg ]; then 36 | 37 | echo "ABORT_BUILD=false" > ${DIR}/build.cfg 38 | echo "ABORT_CODE=0" >> ${DIR}/build.cfg 39 | ## determine the build type here 40 | if [ -z "${TRAVIS_TAG}" ]; then 41 | BUILD_RELEASE="unstable" 42 | BUILD_FOCUS="latest" 43 | else 44 | BUILD_RELEASE="stable" 45 | BUILD_FOCUS="latest" 46 | fi 47 | 48 | echo "BUILD_FOCUS=${BUILD_FOCUS}" >> ${DIR}/build.cfg 49 | echo "BUILD_RELEASE=${BUILD_RELEASE}" >> ${DIR}/build.cfg 50 | fi 51 | 52 | source ${DIR}/build.cfg 53 | 54 | echo "--I-- Build focus is ${BUILD_FOCUS}" 55 | echo "--I-- Build release is ${BUILD_RELEASE}" 56 | 57 | if [ "${ABORT_BUILD}" == "true" ]; then 58 | _exit "exiting early from" ${ABORT_CODE} 59 | fi -------------------------------------------------------------------------------- /.travis/build.cfg: -------------------------------------------------------------------------------- 1 | # 2 | # Licensed under the Apache License, Version 2.0 (the "License"); 3 | # you may not use this file except in compliance with the License. 4 | # You may obtain a copy of the License at 5 | # 6 | # http://www.apache.org/licenses/LICENSE-2.0 7 | # 8 | # Unless required by applicable law or agreed to in writing, software 9 | # distributed under the License is distributed on an "AS IS" BASIS, 10 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 11 | # See the License for the specific language governing permissions and 12 | # limitations under the License. 13 | # 14 | 15 | ABORT_BUILD=true -------------------------------------------------------------------------------- /.travis/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | # 15 | 16 | # Script for the deploy phase, to push NPM modules, docker images and 17 | # cloud playground images 18 | 19 | # Exit on first error, print all commands. 20 | set -ev 21 | set -o pipefail 22 | 23 | # Bring in the standard set of script utilities 24 | DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )/.." && pwd )" 25 | source ${DIR}/.travis/base.sh 26 | 27 | # ---- 28 | 29 | # Check that this is the main repository. 30 | if [[ "${TRAVIS_REPO_SLUG}" != accordproject* ]]; then 31 | _exit "Skipping deploy; wrong repository slug." 0 32 | fi 33 | 34 | ## Start of release process 35 | 36 | # Set the NPM access token we will use to publish. 37 | npm config set registry https://registry.npmjs.org/ 38 | npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN} 39 | 40 | # Set the GitHub deploy key we will use to publish. 41 | set-up-ssh --key "$encrypted_23fcd5f88f34_key" \ 42 | --iv "$encrypted_23fcd5f88f34_iv" \ 43 | --path-encrypted-key ".travis/github_deploy_key.enc" 44 | 45 | # Change from HTTPS to SSH. 46 | ./.travis/fix_github_https_repo.sh 47 | 48 | # Test the GitHub deploy key. 49 | git ls-remote 50 | 51 | # Determine the details of the suffixes NPM tags 52 | if [[ "${BUILD_RELEASE}" == "unstable" ]]; then 53 | 54 | # Set the prerelease version. 55 | npm run pkgstamp 56 | 57 | TAG="unstable" 58 | elif [[ "${BUILD_RELEASE}" == "stable" ]]; then 59 | TAG="latest" 60 | else 61 | _exit "Unknown build focus" 1 62 | fi 63 | 64 | ## Stable releases only; both latest and next then clean up git, and bump version number 65 | if [[ "${BUILD_RELEASE}" = "stable" ]]; then 66 | 67 | # Configure the Git repository and clean any untracked and unignored build files. 68 | git config user.name "${GH_USER_NAME}" 69 | git config user.email "${GH_USER_EMAIL}" 70 | git checkout -b master 71 | git reset --hard 72 | git clean -d -f 73 | 74 | # Set the version number. 75 | npm run pkgset ${TRAVIS_TAG} 76 | export NEW_VERSION=$(node -e "console.log(require('${DIR}/package.json').version)") 77 | 78 | # Add the version number changes and push them to Git. 79 | git add . 80 | git commit -m "Automatic version bump to ${NEW_VERSION}" 81 | git push origin master 82 | 83 | fi 84 | 85 | # Hold onto the version number 86 | export VERSION=$(node -e "console.log(require('${DIR}/package.json').version)") 87 | 88 | # Publish with tag 89 | echo "Pushing with tag ${TAG}" 90 | npm publish --tag="${TAG}" 2>&1 91 | 92 | # Check that all required modules have been published to npm and are retrievable 93 | for j in ${NPM_MODULES}; do 94 | # check the next in the list 95 | while ! npm view ${j}@${VERSION} | grep dist-tags > /dev/null 2>&1; do 96 | sleep 10 97 | done 98 | done 99 | 100 | 101 | 102 | _exit "All complete" 0 103 | -------------------------------------------------------------------------------- /.travis/fix_github_https_repo.sh: -------------------------------------------------------------------------------- 1 | #/bin/bash 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | # 15 | 16 | #-- Script to automate https://help.github.com/articles/why-is-git-always-asking-for-my-password 17 | 18 | REPO_URL=`git remote -v | grep -m1 '^origin' | sed -Ene's#.*(https://[^[:space:]]*).*#\1#p'` 19 | if [ -z "$REPO_URL" ]; then 20 | echo "-- ERROR: Could not identify Repo url." 21 | echo " It is possible this repo is already using SSH instead of HTTPS." 22 | exit 23 | fi 24 | 25 | USER=`echo $REPO_URL | sed -Ene's#https://github.com/([^/]*)/(.*).git#\1#p'` 26 | if [ -z "$USER" ]; then 27 | echo "-- ERROR: Could not identify User." 28 | exit 29 | fi 30 | 31 | REPO=`echo $REPO_URL | sed -Ene's#https://github.com/([^/]*)/(.*).git#\2#p'` 32 | if [ -z "$REPO" ]; then 33 | echo "-- ERROR: Could not identify Repo." 34 | exit 35 | fi 36 | 37 | NEW_URL="git@github.com:$USER/$REPO.git" 38 | echo "Changing repo url from " 39 | echo " '$REPO_URL'" 40 | echo " to " 41 | echo " '$NEW_URL'" 42 | echo "" 43 | 44 | CHANGE_CMD="git remote set-url origin $NEW_URL" 45 | `$CHANGE_CMD` 46 | 47 | echo "Success" -------------------------------------------------------------------------------- /.travis/github_deploy_key.enc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accordproject/markdown-editor/5ac41e1d76055bdaab735bb14256e10e755f2cb2/.travis/github_deploy_key.enc -------------------------------------------------------------------------------- /.travis/stable.sh: -------------------------------------------------------------------------------- 1 | # 2 | # Licensed under the Apache License, Version 2.0 (the "License"); 3 | # you may not use this file except in compliance with the License. 4 | # You may obtain a copy of the License at 5 | # 6 | # http://www.apache.org/licenses/LICENSE-2.0 7 | # 8 | # Unless required by applicable law or agreed to in writing, software 9 | # distributed under the License is distributed on an "AS IS" BASIS, 10 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 11 | # See the License for the specific language governing permissions and 12 | # limitations under the License. 13 | # 14 | 15 | # Exit on first error, print all commands. 16 | set -ev 17 | date 18 | echo "Tag is " $1 19 | echo "NPM_TOKEN " ${NPM_TOKEN} 20 | 21 | # Set the NPM access token we will use to publish. 22 | npm config set registry https://registry.npmjs.org/ 23 | npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN} 24 | 25 | npm publish --tag="${NPM_TAG}" 2>&1 26 | echo "Published to npm." 27 | -------------------------------------------------------------------------------- /.travis/unstable.sh: -------------------------------------------------------------------------------- 1 | # 2 | # Licensed under the Apache License, Version 2.0 (the "License"); 3 | # you may not use this file except in compliance with the License. 4 | # You may obtain a copy of the License at 5 | # 6 | # http://www.apache.org/licenses/LICENSE-2.0 7 | # 8 | # Unless required by applicable law or agreed to in writing, software 9 | # distributed under the License is distributed on an "AS IS" BASIS, 10 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 11 | # See the License for the specific language governing permissions and 12 | # limitations under the License. 13 | # 14 | 15 | # Exit on first error, print all commands. 16 | set -ev 17 | date 18 | echo "Tag is " $1 19 | echo "NPM_TOKEN " ${NPM_TOKEN} 20 | 21 | # Set the NPM access token we will use to publish. 22 | npm config set registry https://registry.npmjs.org/ 23 | npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN} 24 | 25 | npm publish --tag="${NPM_TAG}" 2>&1 26 | echo "Published to npm." 27 | -------------------------------------------------------------------------------- /CHARTER.md: -------------------------------------------------------------------------------- 1 | # Technical Charter (the “Charter”) 2 | ## for 3 | # Accord Project a Series of LF Projects, LLC 4 | # Adopted 14 May 2019 5 | 6 | This charter (the “Charter”) sets forth the responsibilities and procedures for technical contribution to, and oversight of, the Accord Project community, which has been established as Accord Project a Series of LF Projects, LLC (the “Project”). LF Projects, LLC (“LF Projects”) is a Delaware series limited liability company. All contributors (including committers, maintainers, and other technical positions) and other participants in the Project (collectively, “Collaborators”) must comply with the terms of this Charter. 7 | 8 | ## 1. Mission and Scope of the Project 9 | a. The mission of the Project is to develop open source software tools for legally enforceable smart contracts. 10 | 11 | b. The scope of the Project includes collaborative development under the Project License (as defined herein) supporting the mission, including documentation, testing, integration and the creation of other artifacts that aid the development, deployment, operation or adoption of the open source project. 12 | 13 | ## 2. Technical Steering Committee 14 | a. The Technical Steering Committee (the “TSC”) will be responsible for all technical oversight of the open source Project. 15 | 16 | b. The TSC voting members are initially the Project’s Committers. At the inception of the project, the Committers of the Project will be as set forth within the “CONTRIBUTING” file within the Project’s code repository. The TSC may choose an alternative approach for determining the voting members of the TSC, and any such alternative approach will be documented in the CONTRIBUTING file. Any meetings of the Technical Steering Committee are intended to be open to the public, and can be conducted electronically, via teleconference, or in person. 17 | 18 | c. TSC projects generally will involve Contributors and Committers. The TSC may adopt or modify roles so long as the roles are documented in the CONTRIBUTING file. Unless otherwise documented: 19 | 20 | i. Contributors include anyone in the technical community that contributes code, documentation, or other technical artifacts to the Project; 21 | 22 | ii. Committers are Contributors who have earned the ability to modify (“commit”) source code, documentation or other technical artifacts in a project’s repository; and 23 | 24 | iii. A Contributor may become a Committer by a majority approval of the existing Committers. A Committer may be removed by a majority approval of the other existing Committers. 25 | 26 | d. Participation in the Project through becoming a Contributor and Committer is open to anyone so long as they abide by the terms of this Charter. 27 | 28 | e. The TSC may (1) establish work flow procedures for the submission, approval, and closure/archiving of projects, (2) set requirements for the promotion of Contributors to Committer status, as applicable, and (3) amend, adjust, refine and/or eliminate the roles of Contributors, and Committers, and create new roles, and publicly document any TSC roles, as it sees fit. 29 | 30 | f. The TSC may elect a TSC Chair, who will preside over meetings of the TSC and will serve until their resignation or replacement by the TSC. 31 | 32 | g. Responsibilities: The TSC will be responsible for all aspects of oversight relating to the Project, which may include: 33 | 34 | i. coordinating the technical direction of the Project; 35 | 36 | ii. approving, modifying and disbanding Working Groups and sub-projects; 37 | 38 | iii. creating sub-committees to focus on cross-project issues and requirements; 39 | 40 | iv. appointing representatives to work with other open source or open standards communities; 41 | 42 | v. establishing meeting procedures, community norms, workflows, issuing releases, and security issue reporting policies; 43 | 44 | vi. approving and implementing policies and processes for contributing (to be published in the CONTRIBUTING file) and coordinating with the series manager of the Project (as provided for in the Series Agreement, the “Series Manager”) to resolve matters or concerns that may arise as set forth in Section 7 of this Charter; 45 | 46 | vii. discussions, seeking consensus, and where necessary, voting on technical matters relating to the code base that affect multiple projects; and 47 | 48 | viii.coordinating any marketing, events, or communications regarding the Project. 49 | 50 | ## 3. TSC Voting 51 | a. While the Project aims to operate as a consensus-based community, if any TSC decision requires a vote to move the Project forward, the voting members of the TSC will vote on a one vote per voting member basis. 52 | 53 | b. Quorum for TSC meetings requires at least fifty percent of all voting members of the TSC to be present. The TSC may continue to meet if quorum is not met but will be prevented from making any decisions at the meeting. 54 | 55 | c. Except as provided in Section 7.c. and 8.a, decisions by vote at a meeting require a majority vote of those in attendance, provided quorum is met. Decisions made by electronic vote without a meeting require a majority vote of all voting members of the TSC. 56 | 57 | d. In the event a vote cannot be resolved by the TSC, any voting member of the TSC may refer the matter to the Series Manager for assistance in reaching a resolution. 58 | 59 | ## 4. Compliance with Policies 60 | a. This Charter is subject to the Series Agreement for the Project and the Operating Agreement of LF Projects. Contributors will comply with the policies of LF Projects as may be adopted and amended by LF Projects, including, without limitation the policies listed at https://lfprojects.org/policies/. 61 | 62 | b. The TSC may adopt a code of conduct (“CoC”) for the Project, which is subject to approval by the Series Manager. In the event that a Project-specific CoC has not been approved, the LF Projects Code of Conduct listed at https://lfprojects.org/policies will apply for all Collaborators in the Project. 63 | 64 | c. When amending or adopting any policy applicable to the Project, LF Projects will publish such policy, as to be amended or adopted, on its web site at least 30 days prior to such policy taking effect; provided, however, that in the case of any amendment of the Trademark Policy or Terms of Use of LF Projects, any such amendment is effective upon publication on LF Project’s web site. 65 | 66 | d. All Collaborators must allow open participation from any individual or organization meeting the requirements for contributing under this Charter and any policies adopted for all Collaborators by the TSC, regardless of competitive interests. Put another way, the Project community must not seek to exclude any participant based on any criteria, requirement, or reason other than those that are reasonable and applied on a non-discriminatory basis to all Collaborators in the Project community. 67 | 68 | e. The Project will operate in a transparent, open, collaborative, and ethical manner at all times. The output of all Project discussions, proposals, timelines, decisions, and status should be made open and easily visible to all. Any potential violations of this requirement should be reported immediately to the Series Manager. 69 | 70 | ## 5. Community Assets 71 | a. LF Projects will hold title to all trade or service marks used by the Project (“Project Trademarks”), whether based on common law or registered rights. Project Trademarks will be transferred and assigned to LF Projects to hold on behalf of the Project. Any use of any Project Trademarks by Collaborators in the Project will be in accordance with the license from LF Projects and inure to the benefit of LF Projects. 72 | 73 | b. The Project will, as permitted and in accordance with such license from LF Projects, develop and own all Project GitHub and social media accounts, and domain name registrations created by the Project community. 74 | 75 | c. Under no circumstances will LF Projects be expected or required to undertake any action on behalf of the Project that is inconsistent with the tax-exempt status or purpose, as applicable, of LFP, Inc. or LF Projects, LLC. 76 | 77 | ## 6. General Rules and Operations. 78 | a. The Project will: 79 | 80 | i. engage in the work of the Project in a professional manner consistent with maintaining a cohesive community, while also maintaining the goodwill and esteem of LF Projects, LFP, Inc. and other partner organizations in the open source community; and 81 | 82 | ii. respect the rights of all trademark owners, including any branding and trademark usage guidelines. 83 | 84 | ## 7. Intellectual Property Policy 85 | a. Collaborators acknowledge that the copyright in all new contributions will be retained by the copyright holder as independent works of authorship and that no contributor or copyright holder will be required to assign copyrights to the Project. 86 | 87 | b. Except as described in Section 7.c., all contributions to the Project are subject to the following: 88 | 89 | i. All new inbound code contributions to the Project must be made using the Apache License, Version 2.0, available at https://www.apache.org/licenses/LICENSE-2.0 (the “Project License”). 90 | 91 | ii. All new inbound code contributions must also be accompanied by a Developer Certificate of Origin (http://developercertificate.org) sign-off in the source code system that is submitted through a TSC-approved contribution process which will bind the authorized contributor and, if not self-employed, their employer to the applicable license; 92 | 93 | iii. All outbound code will be made available under the Project License. 94 | 95 | iv. Documentation will be received and made available by the Project under the Creative Commons Attribution 4.0 International License (available at http://creativecommons.org/licenses/by/4.0/). 96 | 97 | v. To the extent a contribution includes or consists of data, any rights in such data shall be made available under the CDLA-Permissive 1.0 License. 98 | 99 | vi. The Project may seek to integrate and contribute back to other open source projects (“Upstream Projects”). In such cases, the Project will conform to all license requirements of the Upstream Projects, including dependencies, leveraged by the Project. Upstream Project code contributions not stored within the Project’s main code repository will comply with the contribution process and license terms for the applicable Upstream Project. 100 | 101 | c. The TSC may approve the use of an alternative license or licenses for inbound or outbound contributions on an exception basis. To request an exception, please describe the contribution, the alternative open source license(s), and the justification for using an alternative open source license for the Project. License exceptions must be approved by a two-thirds vote of the entire TSC. 102 | 103 | d. Contributed files should contain license information, such as SPDX short form identifiers, indicating the open source license or licenses pertaining to the file. 104 | 105 | ## 8. Amendments 106 | a. This charter may be amended by a two-thirds vote of the entire TSC and is subject to approval by LF Projects. 107 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Accord Project Markdown-Editor Contribution Guide 2 | 3 | ## ❗ Accord Project Contribution Guide ❗ 4 | We'd love for you to contribute to our source code and to make Accord Project Markdown-Editor technology even better than it is today! Please refer to the [Accord Project Contribution guidelines][apcontribute] we'd like you to follow. 5 | 6 | [apcontribute]: https://github.com/accordproject/techdocs/blob/master/CONTRIBUTING.md -------------------------------------------------------------------------------- /DEVELOPERS.md: -------------------------------------------------------------------------------- 1 | # Markdown-Editor Development Guide 2 | 3 | ## ❗ Accord Project Development Guide ❗ 4 | We'd love for you to help develop improvements to Accord Project Markdown-Editor technology! Please refer to the [Accord Project Development guidelines][apdev] we'd like you to follow. 5 | 6 | [apdev]: https://github.com/accordproject/techdocs/blob/master/DEVELOPERS.md -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ❗---❗---❗---❗DEPRECATED❗---❗---❗---❗ 2 | 3 | This repository has been moved to https://github.com/accordproject/web-components 4 | 5 |

6 | Markdown Editor 7 |

8 | 9 |

10 | 11 | 12 | Netlify Status 13 | 14 | 15 | Build Status 16 | 17 | 18 | 19 | npm version 20 | 21 | 22 | 23 | downloads 24 | 25 | 26 | 27 | GitHub license 28 | 29 | 30 | 31 | Join the Accord Project Slack 32 | 33 | 34 |

35 | 36 | A React-and-[Slate][slate]-based WYSIWYG editor that edits rich text based on [CommonMark](https://commonmark.org/). 37 | 38 | The demo editor uses the [`markdown-transform`](https://github.com/accordproject/markdown-transform/) package to transform Slate DOM to markdown text. 39 | 40 | The editor includes a formatting toolbar. 41 | 42 | ### [Demo](https://accordproject-markdown-editor.netlify.com/) 43 | 44 | ## Usage 45 | 46 | ``` 47 | npm install @accordproject/markdown-editor 48 | ``` 49 | 50 | You'll also need to be sure to install this package's peer dependencies: 51 | ``` 52 | npm install react react-dom slate slate-react styled-components 53 | ``` 54 | 55 | ``` 56 | import { SlateAsInputEditor } from '@accordproject/markdown-editor'; 57 | import List from '@accordproject/markdown-editor/dist/plugins/list'; 58 | import Video from '@accordproject/markdown-editor/dist/plugins/video'; 59 | import { SlateTransformer } from '@accordproject/markdown-slate'; 60 | 61 | const plugins = [List()]; 62 | const slateTransformer = new SlateTransformer(); 63 | 64 | function storeLocal(slateValue) { 65 | const markdown = slateTransformer.toMarkdown(slateValue); 66 | localStorage.setItem('markdown-editor', markdown); 67 | } 68 | 69 | ReactDOM.render( 70 | , document.getElementById('root')); 71 | ``` 72 | 73 | ### Example 74 | 75 | For an example React App see the `./examples/` folder. 76 | 77 | A `TextArea` containing [CommonMark][CommonMark] synchronized with a `MarkdownEditor` component, rendered using [Slate][slate]. 78 | 79 | ![preview image](public/preview.png) 80 | 81 | In order to run an isolated local development example, run `npm run dev` and then navigate to: http://localhost:3001/ 82 | 83 | ## Available Scripts 84 | 85 | In the project directory, you can run: 86 | 87 | #### `npm run dev` 88 | 89 | Runs the app in the development mode.
90 | Open [http://localhost:3001/](http://localhost:3001/) to view it in the browser. 91 | 92 | The page will reload if you make edits.
93 | 94 | #### `npm run build` 95 | 96 | Builds the app for production to the `build` folder.
97 | It correctly bundles React in production mode and optimizes the build for the best performance. 98 | 99 | The build is minified and the filenames include the hashes.
100 | Your app is ready to be deployed! 101 | 102 | --- 103 | 104 |

105 | 106 | Accord Project Logo 107 | 108 |

109 | 110 | 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][linuxfound]. The technical charter for the Accord Project can be found [here][charter]. 111 | 112 | ## Learn More About Accord Project 113 | 114 | ### Overview 115 | * [Accord Project][apmain] 116 | * [Accord Project News][apnews] 117 | * [Accord Project Blog][apblog] 118 | * [Accord Project Slack][apslack] 119 | * [Accord Project Technical Documentation][apdoc] 120 | * [Accord Project GitHub][apgit] 121 | 122 | 123 | ### Documentation 124 | * [Getting Started with Accord Project][docwelcome] 125 | * [Concepts and High-level Architecture][dochighlevel] 126 | * [How to use the Cicero Templating System][doccicero] 127 | * [How to Author Accord Project Templates][docstudio] 128 | * [Ergo Language Guide][docergo] 129 | 130 | ### Ecosystem 131 | 132 | 133 | #### Core libraries: 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 |
ProjectsPackage nameVersionDescription
Cicero cicero-core npm versionTemplates Core
cicero-cli npm version Cicero CLI
cicero-engine npm versionNode.js VM based implementation of Accord Protcol Template Specification execution
cicero-server npm versionWraps the Cicero Engine and exposes it as a RESTful service 164 |
cicero-test npm version Testing support for Cicero based on cucumber
cicero-tools npm versionCicero Tools
generator-cicero-template npm versionCode generator for a Cicero Template
Concertoconcerto-core npm version Core Implementation for the Concerto Modeling Language
concerto-tools npm version Tools for the Concerto Modeling Language
concerto-cli npm versioncommand-line interface for Concerto
Ergoergo-clinpm versionErgo CLI
ergo-compilernpm versionErgo compiler
ergo-testnpm versionErgo test
ergo-enginenpm versionErgo engine
Markdownmarkdown-commonnpm versionA framework for transforming markdown
markdown-slatenpm versionTransform markdown to/from CommonMark DOM
markdown-cli npm version CLI for markdown transformations.
markdown-ciceronpm versionCiceroDOM: Markdown extensions for contracts, clauses, variables etc.
markdown-htmlnpm versionTransform CiceroDOM to HTML
257 | 258 | #### UI Components: 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 |
ProjectsPackage nameVersionDescription
Markdown Editormarkdown-editor 271 | npm versionWYSIWYG rich text web editor that persists text as markdown. Based on Slate.js
Cicero UIcicero-ui npm versionWYSIWYG contract editor, template libary browser, error panel component
Concerto UIconcerto-ui npm versionDynamic web forms generated from Concerto models
287 | 288 | 289 | #### Template Editors: 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 |
ProjectsCicero ver.Description
Template Studio v1 0.13.4Web UI for creating, editing and testing Accord Project templates
Template Studio v2 0.13.4Web UI for creating, editing and testing Accord Project templates
VSCode Extension0.13.4VS Code extension for editing Cicero templates and Ergo logic
313 | 314 | 315 | #### Public templates and models: 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 |
ProjectsDescription
ModelsAccord Project Model Library
Template LibraryAccord Project Template Library
332 | 333 | 334 | #### Documentation: 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 |
ProjectRepo
Documentationtechdocs
346 | 347 | ## Contributing 348 | 349 | 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. 350 | 351 | Find out what’s coming on our [blog][apblog]. 352 | 353 | Join the Accord Project Technology Working Group [Slack channel][apslack] to get involved! 354 | 355 | For code contributions, read our [CONTRIBUTING guide][contributing] and information for [DEVELOPERS][developers]. 356 | 357 | ### README Badge 358 | 359 | 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/) 360 | 361 | ``` 362 | [![accord project](https://img.shields.io/badge/powered%20by-accord%20project-19C6C8.svg)](https://www.accordproject.org/) 363 | ``` 364 | 365 | ## License 366 | 367 | Accord Project source code files are made available under the [Apache License, Version 2.0][apache]. 368 | Accord Project documentation files are made available under the [Creative Commons Attribution 4.0 International License][creativecommons] (CC-BY-4.0). 369 | 370 | [CommonMark]: https://commonmark.org 371 | [slate]: https://docs.slatejs.org/ 372 | 373 | [linuxfound]: https://www.linuxfoundation.org 374 | [charter]: https://github.com/accordproject/markdown-editor/blob/master/CHARTER.md 375 | [apmain]: https://accordproject.org/ 376 | [apworkgroup]: https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=MjZvYzIzZHVrYnI1aDVzbjZnMHJqYmtwaGlfMjAxNzExMTVUMjEwMDAwWiBkYW5AY2xhdXNlLmlv&tmsrc=dan%40clause.io 377 | [apblog]: https://medium.com/@accordhq 378 | [apnews]: https://www.accordproject.org/news/ 379 | [apgit]: https://github.com/accordproject/ 380 | [apdoc]: https://docs.accordproject.org/ 381 | [apslack]: https://accord-project-slack-signup.herokuapp.com 382 | 383 | [docspec]: https://docs.accordproject.org/docs/spec-overview.html 384 | [docwelcome]: https://docs.accordproject.org/docs/accordproject.html 385 | [dochighlevel]: https://docs.accordproject.org/docs/spec-concepts.html 386 | [docergo]: https://docs.accordproject.org/docs/logic-ergo.html 387 | [docstart]: https://docs.accordproject.org/docs/accordproject.html 388 | [doccicero]: https://docs.accordproject.org/docs/basic-use.html 389 | [docstudio]: https://docs.accordproject.org/docs/advanced-latedelivery.html 390 | 391 | [contributing]: https://github.com/accordproject/markdown-editor/blob/master/CONTRIBUTING.md 392 | [developers]: https://github.com/accordproject/markdown-editor/blob/master/DEVELOPERS.md 393 | 394 | [apache]: https://github.com/accordproject/markdown-editor/blob/master/LICENSE 395 | [creativecommons]: http://creativecommons.org/licenses/by/4.0/ 396 | -------------------------------------------------------------------------------- /assets/APLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accordproject/markdown-editor/5ac41e1d76055bdaab735bb14256e10e755f2cb2/assets/APLogo.png -------------------------------------------------------------------------------- /examples/src/index.css: -------------------------------------------------------------------------------- 1 | 2 | code { 3 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; 4 | } 5 | 6 | pre { 7 | padding: 10px; 8 | background-color: #eee; 9 | white-space: pre-wrap; 10 | } 11 | 12 | :not(pre)>code { 13 | font-family: monospace; 14 | background-color: #eee; 15 | padding: 3px; 16 | } 17 | 18 | html { 19 | height: 100%; 20 | } 21 | 22 | .doc { 23 | margin: 20px; 24 | height: calc(100vh - 40px); 25 | display: flex; 26 | flex-direction: row; 27 | background-color: #fff; 28 | } 29 | 30 | .doc .doc-inner { 31 | width: 50%; 32 | border: 1px solid rgba(0, 0, 0, 0.3); 33 | padding: 20px; 34 | overflow: auto; 35 | } 36 | 37 | blockquote { 38 | width: 80%; 39 | margin: 10px auto; 40 | padding: 1.0em 10px 1.2em 15px; 41 | border-left: 3px solid #484848; 42 | line-height: 1; 43 | position: relative; 44 | } 45 | 46 | a { 47 | color: #9d7ff2; 48 | } 49 | 50 | blockquote::before { 51 | font-family: Arial; 52 | content: '\201C'; 53 | font-size: 1em; 54 | position: absolute; 55 | left: 5px; 56 | top: 5px; 57 | } 58 | 59 | blockquote::after { 60 | content: ''; 61 | } 62 | 63 | blockquote span { 64 | margin-top: 1em; 65 | } 66 | 67 | .App { 68 | color: rgb(17, 17, 17); 69 | max-width: 740px; 70 | background-color: rgb(255, 255, 255); 71 | box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px; 72 | padding: 40px; 73 | margin: 65px auto 45px; 74 | border-radius: 4.5px; 75 | } 76 | 77 | .markdown-box { 78 | width: 100%; 79 | border: none; 80 | height: 100%; 81 | outline: none; 82 | } 83 | 84 | .heading { 85 | font-size: 18px; 86 | text-align: center; 87 | position: relative; 88 | text-transform: uppercase; 89 | } 90 | -------------------------------------------------------------------------------- /examples/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Markdown Editor 11 | 12 |
13 |
14 | 15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /examples/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useCallback } from 'react'; 2 | import { 3 | Divider, Grid, Segment 4 | } from 'semantic-ui-react'; 5 | 6 | import ReactDOM from 'react-dom'; 7 | import { SlateTransformer } from '@accordproject/markdown-slate'; 8 | 9 | import './index.css'; 10 | import MarkdownTextEditor from '../../src/MarkdownTextEditor'; 11 | import RichTextEditor from '../../src/RichTextEditor'; 12 | 13 | import * as serviceWorker from './serviceWorker'; 14 | import 'semantic-ui-css/semantic.min.css'; 15 | 16 | const slateTransformer = new SlateTransformer(); 17 | 18 | const defaultMarkdown = `# My Heading 19 | 20 | This is text. This is *italic* text. This is **bold** text. This is a [link](https://clause.io). This is \`inline code\`. 21 | 22 | This is ***bold and italic*** text. 23 | 24 | ## Breaks 25 | This is a 26 | hard break. 27 | 28 | This is a 29 | softbreak. 30 | 31 | --- 32 | 33 | This ^^^^ is a thematic break 34 | 35 | ![ap_logo](https://docs.accordproject.org/docs/assets/020/template.png "AP triangle") 36 | 37 | > This is a quote. 38 | ## Heading Two 39 | This is more text. 40 | 41 | Below is a code block: 42 | 43 | \`\`\` javascript 44 | this is my great 45 | code 46 | \`\`\` 47 | 48 | Ordered lists: 49 | 50 | 1. one 51 | 1. two 52 | 1. three 53 | 54 | Or: 55 | 56 | * apples 57 | * pears 58 | * peaches 59 | 60 | ### Sub heading 61 | 62 | This is more text. 63 | 64 | 65 | This is an html block. 66 | 67 | 68 | And this is an HTML inline. 69 | 70 | # H1 71 | ## H2 72 | ### H3 73 | #### H4 74 | #### H5 75 | ##### H6 76 | 77 | Fin. 78 | `; 79 | 80 | 81 | /** 82 | * Simple demo component that shows markdown and rich text side by side 83 | */ 84 | function Demo() { 85 | const [slateValue, setSlateValue] = useState(() => { 86 | const slate = slateTransformer.fromMarkdown(defaultMarkdown); 87 | console.log(slate); 88 | return slate.document.children; 89 | }); 90 | const [markdown, setMarkdown] = useState(defaultMarkdown); 91 | 92 | const onMarkdownChange = useCallback((markdown) => { 93 | localStorage.setItem('markdown-editor', markdown); 94 | }, []); 95 | 96 | const onSlateValueChange = useCallback((slateChildren) => { 97 | localStorage.setItem('slate-editor-value', JSON.stringify(slateChildren)); 98 | const slateValue = { 99 | document: { 100 | children: slateChildren 101 | } 102 | }; 103 | const markdown = slateTransformer.toMarkdown(slateValue); 104 | setSlateValue(slateValue.document.children); 105 | setMarkdown(markdown); 106 | }, []); 107 | 108 | return ( 109 |
110 | 111 | 112 | 113 |

Markdown

114 | 119 | 120 | 121 | 122 |

Preview

123 | 128 | 129 | 130 | 131 | 132 |
133 | ); 134 | } 135 | 136 | ReactDOM.render(, document.getElementById('root')); 137 | 138 | // If you want your app to work offline and load faster, you can change 139 | // unregister() to register() below. Note this comes with some pitfalls. 140 | // Learn more about service workers: http://bit.ly/CRA-PWA 141 | serviceWorker.unregister(); 142 | -------------------------------------------------------------------------------- /examples/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read http://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' 15 | // [::1] is the IPv6 localhost address. 16 | || window.location.hostname === '[::1]' 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | || window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/, 20 | ), 21 | ); 22 | 23 | function registerValidSW(swUrl, config) { 24 | navigator.serviceWorker 25 | .register(swUrl) 26 | .then((registration) => { 27 | registration.onupdatefound = () => { 28 | const installingWorker = registration.installing; 29 | if (installingWorker == null) { 30 | return; 31 | } 32 | installingWorker.onstatechange = () => { 33 | if (installingWorker.state === 'installed') { 34 | if (navigator.serviceWorker.controller) { 35 | // At this point, the updated precached content has been fetched, 36 | // but the previous service worker will still serve the older 37 | // content until all client tabs are closed. 38 | console.log( 39 | 'New content is available and will be used when all ' 40 | + 'tabs for this page are closed. See http://bit.ly/CRA-PWA.', 41 | ); 42 | 43 | // Execute callback 44 | if (config && config.onUpdate) { 45 | config.onUpdate(registration); 46 | } 47 | } else { 48 | // At this point, everything has been precached. 49 | // It's the perfect time to display a 50 | // "Content is cached for offline use." message. 51 | console.log('Content is cached for offline use.'); 52 | 53 | // Execute callback 54 | if (config && config.onSuccess) { 55 | config.onSuccess(registration); 56 | } 57 | } 58 | } 59 | }; 60 | }; 61 | }) 62 | .catch((error) => { 63 | console.error('Error during service worker registration:', error); 64 | }); 65 | } 66 | 67 | function checkValidServiceWorker(swUrl, config) { 68 | // Check if the service worker can be found. If it can't reload the page. 69 | fetch(swUrl) 70 | .then((response) => { 71 | // Ensure service worker exists, and that we really are getting a JS file. 72 | const contentType = response.headers.get('content-type'); 73 | if ( 74 | response.status === 404 75 | || (contentType != null && contentType.indexOf('javascript') === -1) 76 | ) { 77 | // No service worker found. Probably a different app. Reload the page. 78 | navigator.serviceWorker.ready.then((registration) => { 79 | registration.unregister().then(() => { 80 | window.location.reload(); 81 | }); 82 | }); 83 | } else { 84 | // Service worker found. Proceed as normal. 85 | registerValidSW(swUrl, config); 86 | } 87 | }) 88 | .catch(() => { 89 | console.log( 90 | 'No internet connection found. App is running in offline mode.', 91 | ); 92 | }); 93 | } 94 | 95 | export function register(config) { 96 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 97 | // The URL constructor is available in all browsers that support SW. 98 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 99 | if (publicUrl.origin !== window.location.origin) { 100 | // Our service worker won't work if PUBLIC_URL is on a different origin 101 | // from what our page is served on. This might happen if a CDN is used to 102 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 103 | return; 104 | } 105 | 106 | window.addEventListener('load', () => { 107 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 108 | 109 | if (isLocalhost) { 110 | // This is running on localhost. Let's check if a service worker still exists or not. 111 | checkValidServiceWorker(swUrl, config); 112 | 113 | // Add some additional logging to localhost, pointing developers to the 114 | // service worker/PWA documentation. 115 | navigator.serviceWorker.ready.then(() => { 116 | console.log( 117 | 'This web app is being served cache-first by a service ' 118 | + 'worker. To learn more, visit http://bit.ly/CRA-PWA', 119 | ); 120 | }); 121 | } else { 122 | // Is not localhost. Just register service worker 123 | registerValidSW(swUrl, config); 124 | } 125 | }); 126 | } 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then((registration) => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@accordproject/markdown-editor", 3 | "version": "0.9.17", 4 | "description": "A rich text editor that can read and write markdown text. Based on Slate.js.", 5 | "main": "dist/index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/accordproject/markdown-editor.git" 9 | }, 10 | "scripts": { 11 | "test": "jest", 12 | "dev": "webpack-dev-server --mode development --config webpack.config.js", 13 | "transpile": "babel src -d dist --copy-files", 14 | "prepublishOnly": "npm run transpile", 15 | "build": "webpack --mode production --config webpack.config.prod.js", 16 | "build:dev": "webpack --config webpack.config.js", 17 | "lint": "npm run lint:js && npm run lint:stylus", 18 | "lint:js": "eslint --ext .js --ext .jsx --ignore-path .gitignore .", 19 | "lint:js:fix": "eslint --ext .js --ext .jsx --ignore-path .gitignore --fix .", 20 | "lint:stylus": "stylint --config .stylintrc ./src/stylesheets", 21 | "pkgcheck": "node ./scripts/pkgcheck.js", 22 | "pkgstamp": "node ./scripts/pkgstamp.js", 23 | "pkgbump": "node ./scripts/pkgbump.js && node ./scripts/pkgcheck.js --fix", 24 | "pkgset": "node ./scripts/pkgset.js", 25 | "depcheck": "node ./scripts/depcheck.js" 26 | }, 27 | "jest": { 28 | "transform": { 29 | "^.+\\.jsx?$": "babel-jest" 30 | }, 31 | "moduleNameMapper": { 32 | "\\.(css|less)$": "identity-obj-proxy" 33 | }, 34 | "collectCoverageFrom": [ 35 | "src/SlateAsInputEditor/*.js", 36 | "!**/node_modules/**", 37 | "!**/travis/**" 38 | ] 39 | }, 40 | "keywords": [ 41 | "accord", 42 | "markdown", 43 | "slate.js", 44 | "rich text" 45 | ], 46 | "author": "accordproject.org", 47 | "license": "Apache-2.0", 48 | "bugs": { 49 | "url": "https://github.com/accordproject/markdown-editor/issues" 50 | }, 51 | "homepage": "https://github.com/accordproject/markdown-editor", 52 | "peerDependencies": { 53 | "react": ">= 16.13.0", 54 | "react-dom": ">= 16.13.0", 55 | "slate": "0.57.x", 56 | "slate-react": "0.57.x", 57 | "styled-components": ">= 4" 58 | }, 59 | "devDependencies": { 60 | "@babel/cli": "^7.8.4", 61 | "@babel/core": "^7.8.7", 62 | "@babel/plugin-transform-modules-commonjs": "^7.8.3", 63 | "@babel/plugin-transform-runtime": "^7.8.3", 64 | "@babel/preset-env": "^7.8.7", 65 | "@babel/preset-react": "^7.8.3", 66 | "@babel/register": "^7.8.6", 67 | "@clausehq/eslint-config": "^0.1.8", 68 | "babel-jest": "^24.9.0", 69 | "babel-loader": "^8.0.6", 70 | "css-loader": "^3.4.2", 71 | "enzyme": "^3.11.0", 72 | "enzyme-adapter-react-16": "^1.15.2", 73 | "enzyme-to-json": "^3.4.4", 74 | "eslint": "^5.16.0", 75 | "eslint-config-airbnb": "^17.1.1", 76 | "eslint-config-loopback": "^13.1.0", 77 | "eslint-plugin-import": "^2.20.1", 78 | "eslint-plugin-jest": "^22.21.0", 79 | "eslint-plugin-jsx-a11y": "^6.2.3", 80 | "eslint-plugin-react": "^7.19.0", 81 | "eslint-plugin-react-hooks": "^1.7.0", 82 | "html-webpack-plugin": "^3.2.0", 83 | "jest": "^24.9.0", 84 | "moment-mini": "2.22.1", 85 | "react": "^16.13.0", 86 | "react-dom": "^16.13.0", 87 | "react-scripts": "^3.4.0", 88 | "semver": "6.1.1", 89 | "slate": "^0.57.1", 90 | "slate-react": "^0.57.1", 91 | "style-loader": "^1.1.3", 92 | "styled-components": "^4.4.1", 93 | "webpack": "^4.42.0", 94 | "webpack-cli": "^3.3.11", 95 | "webpack-dev-server": "^3.10.3" 96 | }, 97 | "eslintConfig": { 98 | "extends": "react-app" 99 | }, 100 | "browserslist": [ 101 | ">0.2%", 102 | "not dead", 103 | "not ie <= 11", 104 | "not op_mini all" 105 | ], 106 | "dependencies": { 107 | "@accordproject/markdown-html": "^0.11.2", 108 | "@accordproject/markdown-slate": "^0.11.2", 109 | "@babel/runtime": "^7.8.7", 110 | "@material-ui/core": "^4.9.5", 111 | "@material-ui/icons": "^4.9.1", 112 | "image-extensions": "^1.1.0", 113 | "is-hotkey": "^0.1.6", 114 | "is-url": "^1.2.4", 115 | "prop-types": "^15.7.2", 116 | "react-textarea-autosize": "^7.1.2", 117 | "semantic-ui-css": "^2.4.1", 118 | "semantic-ui-react": "^0.88.2", 119 | "slate-history": "^0.57.1", 120 | "slate-hyperscript": "^0.57.1" 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /public/APLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accordproject/markdown-editor/5ac41e1d76055bdaab735bb14256e10e755f2cb2/public/APLogo.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accordproject/markdown-editor/5ac41e1d76055bdaab735bb14256e10e755f2cb2/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | Markdown Editor 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Markdown Editor", 3 | "name": "Markdown Editor", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /public/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accordproject/markdown-editor/5ac41e1d76055bdaab735bb14256e10e755f2cb2/public/preview.png -------------------------------------------------------------------------------- /scripts/depcheck.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* 3 | * Licensed under the Apache License, Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | 'use strict'; 17 | 18 | const colors = require('colors'); 19 | const fs = require('fs'); 20 | const path = require('path'); 21 | 22 | const packages = {}; 23 | 24 | const npmDirectory = path.resolve('.'); 25 | 26 | const masterPackageFile = path.resolve(npmDirectory, 'package.json'); 27 | const masterPackage = require(masterPackageFile); 28 | packages['package.json'] = masterPackage; 29 | 30 | -------------------------------------------------------------------------------- /scripts/manualrelease.sh: -------------------------------------------------------------------------------- 1 | # 2 | # Licensed under the Apache License, Version 2.0 (the "License"); 3 | # you may not use this file except in compliance with the License. 4 | # You may obtain a copy of the License at 5 | # 6 | # http://www.apache.org/licenses/LICENSE-2.0 7 | # 8 | # Unless required by applicable law or agreed to in writing, software 9 | # distributed under the License is distributed on an "AS IS" BASIS, 10 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 11 | # See the License for the specific language governing permissions and 12 | # limitations under the License. 13 | # 14 | 15 | # This script assumes that 16 | # - the remote origin is set to a fork of the repo 17 | # - the remote upstream is set to the original repo 18 | 19 | # Exit on first error, print all commands. 20 | set -ev 21 | set -o pipefail 22 | 23 | # Make sure we have the latest code from origin/master on our fork 24 | git fetch --all --prune 25 | git checkout master 26 | git merge --ff-only upstream/master 27 | git pull origin master 28 | 29 | # Increase the version number 30 | npm run pkgbump 31 | TARGET_VERSION=$( jq -r '.version' package.json ) 32 | git add package.json 33 | git commit -m "chore(release): Bump Markdown Editor source version" -s 34 | 35 | # Publish each package to NPM registry. Generate changelog and update package.json files 36 | npm publish --tag="${TARGET_VERSION}" 2>&1 37 | 38 | # Fix DCO sign-off 39 | git commit --amend -s --no-edit 40 | git push -f origin master 41 | 42 | # Merge into upstream/master 43 | echo "Publish of ${TARGET_VERSION} successful." 44 | echo "Now open a pull request to merge origin/master into upstream/master." 45 | -------------------------------------------------------------------------------- /scripts/pkgbump.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* 3 | * Licensed under the Apache License, Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | 'use strict'; 17 | 18 | const fs = require('fs'); 19 | const path = require('path'); 20 | const semver = require('semver'); 21 | 22 | const npmDirectory = path.resolve('.'); 23 | const npmConfigFile = path.resolve(npmDirectory, 'package.json'); 24 | const npmConfig = require(npmConfigFile); 25 | const targetVersion = semver.inc(npmConfig.version, 'patch'); 26 | npmConfig.version = targetVersion; 27 | fs.writeFileSync(npmConfigFile, JSON.stringify(npmConfig, null, 2), 'utf8'); -------------------------------------------------------------------------------- /scripts/pkgcheck.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* 3 | * Licensed under the Apache License, Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | 'use strict'; 17 | 18 | const child_process = require('child_process'); 19 | const colors = require('colors'); 20 | const fs = require('fs'); 21 | const path = require('path'); 22 | const semver = require('semver') 23 | 24 | const packages = {}; 25 | const fix = (process.argv.indexOf('--fix') !== -1); 26 | 27 | const npmDirectory = path.resolve('.'); 28 | const npmConfigFile = path.resolve(npmDirectory, 'package.json'); 29 | const npmConfig = require(npmConfigFile); 30 | const targetVersion = npmConfig.version; 31 | const targetDependency = `${targetVersion}`; 32 | packages['package.json'] = npmConfig; 33 | 34 | if (!semver.valid(targetVersion)) { 35 | console.error(`Error: the version "${targetVersion}" in "${npmConfigFile}" is invalid!`); 36 | process.exit(1); 37 | } 38 | 39 | const masterPackageFile = path.resolve(npmDirectory, 'package.json'); 40 | const masterPackage = require(masterPackageFile); 41 | packages['package.json'] = masterPackage; 42 | 43 | -------------------------------------------------------------------------------- /scripts/pkgset.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* 3 | * Licensed under the Apache License, Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | 'use strict'; 17 | 18 | const fs = require('fs'); 19 | const path = require('path'); 20 | const semver = require('semver') 21 | 22 | const npmDirectory = path.resolve('.'); 23 | const npmConfigFile = path.resolve(npmDirectory, 'package.json'); 24 | const npmConfig = require(npmConfigFile); 25 | npmConfig.version.replace(/-.*/, ''); 26 | const targetVersion = semver.clean(process.argv[2]); 27 | npmConfig.version = targetVersion; 28 | fs.writeFileSync(npmConfigFile, JSON.stringify(npmConfig, null, 2), 'utf8'); 29 | 30 | -------------------------------------------------------------------------------- /scripts/pkgstamp.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* 3 | * Licensed under the Apache License, Version 2.0 (the "License"); 4 | * you may not use this file except in compliance with the License. 5 | * You may obtain a copy of the License at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * Unless required by applicable law or agreed to in writing, software 10 | * distributed under the License is distributed on an "AS IS" BASIS, 11 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | * See the License for the specific language governing permissions and 13 | * limitations under the License. 14 | */ 15 | 16 | 'use strict'; 17 | 18 | const fs = require('fs'); 19 | const moment = require('moment-mini'); 20 | const path = require('path'); 21 | const semver = require('semver'); 22 | 23 | const timestamp = moment().format('YYYYMMDDHHmmss'); 24 | 25 | const npmDirectory = path.resolve('.'); 26 | const npmConfigFile = path.resolve(npmDirectory, 'package.json'); 27 | const npmConfig = require(npmConfigFile); 28 | npmConfig.version.replace(/-.*/, ''); 29 | const targetVersion = semver.inc(npmConfig.version, 'patch') + '-' + timestamp; 30 | npmConfig.version = targetVersion; 31 | fs.writeFileSync(npmConfigFile, JSON.stringify(npmConfig, null, 2), 'utf8'); 32 | 33 | -------------------------------------------------------------------------------- /scripts/scan-all-modules.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | # 15 | 16 | # find . -maxdepth 2 -name package.json | xargs jq -s 'reduce .[] as $item ({} ; . + {($item.name): {dependencies:$item.dependencies,devDependencies:$item.devDependencies }} )' | prettyoutput --indent 3 17 | # Exit on first error, print all commands. 18 | set -e 19 | 20 | # Grab the parent (root) directory. 21 | DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )/.." && pwd )" 22 | 23 | BIN=${DIR}/node_modules/.bin 24 | 25 | echo "Scanning all the node modules starting at "${DIR} 26 | #echo "Needs to have had npm install -g npm -g install licensecheck" 27 | 28 | rm -f "${DIR}/license-raw.txt" 29 | touch "${DIR}/license-raw.txt" 30 | rm -f "${DIR}/license-full.txt" 31 | touch "${DIR}/license-full.txt" 32 | 33 | 34 | 35 | ls -d "${DIR}"/packages/* | while read dirname 36 | do 37 | cd "${dirname}" 38 | ${BIN}/licensecheck --tsv >> "${DIR}/license-raw.txt" 39 | ${BIN}/licensecheck >> "${DIR}/license-full.txt" 40 | echo "-------------------------------------------" >> "${DIR}/license-full.txt" 41 | 42 | done 43 | 44 | exit -------------------------------------------------------------------------------- /src/MarkdownTextEditor/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Licensed under the Apache License, Version 2.0 (the "License"); 3 | * you may not use this file except in compliance with the License. 4 | * You may obtain a copy of the License at 5 | * 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Unless required by applicable law or agreed to in writing, software 9 | * distributed under the License is distributed on an "AS IS" BASIS, 10 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 11 | * See the License for the specific language governing permissions and 12 | * limitations under the License. 13 | */ 14 | 15 | import React from 'react'; 16 | import { Card } from 'semantic-ui-react'; 17 | 18 | import TextareaAutosize from 'react-textarea-autosize'; 19 | import PropTypes from 'prop-types'; 20 | 21 | import '../styles.css'; 22 | 23 | /** 24 | * A Markdown editor that can convert the markdown contents 25 | * for a Slate DOM for WYSIWYG preview. 26 | * 27 | * @param {*} props the props for the component. See the declared PropTypes 28 | * for details. 29 | */ 30 | function MarkdownTextEditor(props) { 31 | /** 32 | * Destructure props for efficiency 33 | */ 34 | const { 35 | onChange 36 | } = props; 37 | 38 | const onChangeHandler = (evt) => { 39 | onChange(evt.target.value); 40 | }; 41 | 42 | /** 43 | * Render the component, based on showSlate 44 | */ 45 | const card = 46 | 47 | 56 | 57 | ; 58 | 59 | return ( 60 |
61 | 62 | {card} 63 | 64 |
65 | ); 66 | } 67 | 68 | /** 69 | * The property types for this component 70 | */ 71 | MarkdownTextEditor.propTypes = { 72 | /** 73 | * Initial contents for the editor (markdown text) 74 | */ 75 | markdown: PropTypes.string, 76 | 77 | /** 78 | * A callback that receives the markdown text 79 | */ 80 | onChange: PropTypes.func.isRequired, 81 | 82 | /** 83 | * Boolean to make editor read-only (uneditable) or not (editable) 84 | */ 85 | readOnly: PropTypes.bool, 86 | }; 87 | 88 | /** 89 | * The default property values for this component 90 | */ 91 | MarkdownTextEditor.defaultProps = { 92 | value: 'Welcome! Edit this text to begin.', 93 | readOnly: false, 94 | }; 95 | 96 | export default MarkdownTextEditor; 97 | -------------------------------------------------------------------------------- /src/RichTextEditor/FormattingToolbar/FormatButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { useSlate } from 'slate-react'; 4 | import { Popup } from 'semantic-ui-react'; 5 | import { BUTTON_COLORS, POPUP_STYLE } from '../utilities/constants'; 6 | import Button from '../components/Button'; 7 | 8 | const FormatButton = ({ 9 | toggleFunc, 10 | activeFunc, 11 | type, 12 | label, 13 | icon, 14 | canBeFormatted, 15 | ...props 16 | }) => { 17 | const editor = useSlate(); 18 | const handleMouseDown = (e) => { 19 | e.preventDefault(); 20 | if (!canBeFormatted(editor)) return; 21 | toggleFunc(editor, type); 22 | }; 23 | const isActive = activeFunc(editor, type); 24 | const iconColor = isActive 25 | ? BUTTON_COLORS.SYMBOL_ACTIVE 26 | : BUTTON_COLORS.SYMBOL_INACTIVE; 27 | const backgroundColor = isActive 28 | ? BUTTON_COLORS.BACKGROUND_ACTIVE 29 | : BUTTON_COLORS.BACKGROUND_INACTIVE; 30 | 31 | return ( 32 | 44 | {icon(iconColor)} 45 | 46 | } 47 | /> 48 | ); 49 | }; 50 | 51 | FormatButton.propTypes = { 52 | toggleFunc: PropTypes.func, 53 | activeFunc: PropTypes.func, 54 | canBeFormatted: PropTypes.func, 55 | icon: PropTypes.func, 56 | type: PropTypes.string, 57 | label: PropTypes.string, 58 | }; 59 | 60 | export default FormatButton; 61 | -------------------------------------------------------------------------------- /src/RichTextEditor/FormattingToolbar/HistoryButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { useSlate } from 'slate-react'; 4 | import { Popup } from 'semantic-ui-react'; 5 | import { BUTTON_COLORS, POPUP_STYLE } from '../utilities/constants'; 6 | import Button from '../components/Button'; 7 | 8 | const FormatButton = ({ 9 | toggleFunc, 10 | type, 11 | label, 12 | icon, 13 | ...props 14 | }) => { 15 | const editor = useSlate(); 16 | const handleMouseDown = (e) => { 17 | e.preventDefault(); 18 | toggleFunc(editor, type); 19 | }; 20 | 21 | return ( 22 | 33 | {icon(BUTTON_COLORS.SYMBOL_INACTIVE)} 34 | 35 | } 36 | /> 37 | ); 38 | }; 39 | 40 | FormatButton.propTypes = { 41 | toggleFunc: PropTypes.func, 42 | activeFunc: PropTypes.func, 43 | icon: PropTypes.func, 44 | type: PropTypes.string, 45 | label: PropTypes.string, 46 | }; 47 | 48 | export default FormatButton; 49 | -------------------------------------------------------------------------------- /src/RichTextEditor/FormattingToolbar/HyperlinkButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Popup } from 'semantic-ui-react'; 4 | import { useEditor } from 'slate-react'; 5 | import { BUTTON_COLORS, POPUP_STYLE } from '../utilities/constants'; 6 | import Button from '../components/Button'; 7 | 8 | 9 | const HyperlinkButton = ({ 10 | showLinkModal, 11 | setShowLinkModal, 12 | type, 13 | label, 14 | icon, 15 | canBeFormatted, 16 | ...props 17 | }) => { 18 | const isActive = showLinkModal; 19 | const iconColor = isActive 20 | ? BUTTON_COLORS.HYPERLINK_ACTIVE 21 | : BUTTON_COLORS.SYMBOL_INACTIVE; 22 | const backgroundColor = isActive 23 | ? BUTTON_COLORS.BACKGROUND_ACTIVE 24 | : BUTTON_COLORS.BACKGROUND_INACTIVE; 25 | 26 | const editor = useEditor(); 27 | const onMouseDown = () => { 28 | if (!canBeFormatted(editor)) return; 29 | if (editor.selection) setShowLinkModal(true); 30 | }; 31 | 32 | return ( 33 | 45 | {icon(iconColor)} 46 | 47 | } 48 | /> 49 | ); 50 | }; 51 | 52 | HyperlinkButton.displayName = 'HyperlinkButton'; 53 | 54 | HyperlinkButton.propTypes = { 55 | showLinkModal: PropTypes.bool, 56 | setShowLinkModal: PropTypes.func, 57 | icon: PropTypes.func, 58 | type: PropTypes.string, 59 | label: PropTypes.string, 60 | ref: PropTypes.any, 61 | canBeFormatted: PropTypes.func, 62 | }; 63 | 64 | export default HyperlinkButton; 65 | -------------------------------------------------------------------------------- /src/RichTextEditor/FormattingToolbar/HyperlinkModal.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | useState, useRef, useEffect, useCallback 3 | } from 'react'; 4 | import PropTypes from 'prop-types'; 5 | import { ReactEditor, useEditor } from 'slate-react'; 6 | import { 7 | Editor, Transforms, Node 8 | } from 'slate'; 9 | import styled from 'styled-components'; 10 | import { Form, Input, Popup } from 'semantic-ui-react'; 11 | 12 | import { insertLink, isSelectionLink, unwrapLink } from '../plugins/withLinks'; 13 | import Portal from '../components/Portal'; 14 | 15 | import CopyIcon from '../components/icons/copy'; 16 | import OpenIcon from '../components/icons/open'; 17 | import DeleteIcon from '../components/icons/delete'; 18 | 19 | const HyperlinkWrapper = styled.div` 20 | position: absolute; 21 | z-index: 3000; 22 | top: -10000px; 23 | left: -10000px; 24 | margin-top: -6px; 25 | opacity: 0; 26 | background-color: #FFFFFF; 27 | border: 1px solid #d4d4d5; 28 | border-radius: .3rem; 29 | transition: opacity 0.75s; 30 | 31 | min-width: min-content; 32 | line-height: 1.4285em; 33 | max-width: 250px; 34 | padding: .833em 1em; 35 | font-weight: 400; 36 | font-style: normal; 37 | color: rgba(0,0,0,.87); 38 | box-shadow: 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15); 39 | & > * { 40 | display: inline-block; 41 | } 42 | `; 43 | const HyperlinkCaret = styled.div` 44 | position: absolute; 45 | z-index: 4000; 46 | left: calc(50% - 5px); 47 | top: -10px; 48 | height: 0; 49 | width: 0; 50 | border-left: 5px solid transparent; 51 | border-right: 5px solid transparent; 52 | border-bottom: 10px solid #d4d4d5; 53 | transition: opacity 0.75s; 54 | `; 55 | 56 | const LinkIconHolder = styled.div` 57 | cursor: pointer; 58 | width: 25px; 59 | height: 25px; 60 | border-radius: 3px; 61 | display: flex; 62 | justify-content: center; 63 | align-items: flex-end; 64 | padding: -2px 3px; 65 | margin: 0 3px; 66 | &:hover { 67 | background-color: #eee; 68 | } 69 | `; 70 | 71 | const InlineFormField = styled(Form.Field)` 72 | display: flex; 73 | flex-direction: row; 74 | `; 75 | 76 | const InputFieldWrapper = styled.div` 77 | width: 270px; 78 | display: flex; 79 | flex-direction: column; 80 | `; 81 | 82 | const InputFieldLabel = styled.label` 83 | font-weight: bold; 84 | font-size: 12px; 85 | `; 86 | 87 | const InlineFormButton = styled.button` 88 | margin-left: 10px; 89 | align-self: flex-end; 90 | height: 38px; 91 | width: 90px; 92 | border: none; 93 | color: #fff; 94 | border-radius: 3px; 95 | background-color: #0043BA; 96 | &:hover { 97 | background-color: #265FC4; 98 | } 99 | `; 100 | 101 | const popupStyles = { 102 | padding: '0.2em 0.5em 0.2em 0.5em', 103 | zIndex: '9999' 104 | }; 105 | 106 | const HyperlinkMenu = React.forwardRef( 107 | ({ ...props }, ref) => 108 | ); 109 | 110 | HyperlinkMenu.displayName = 'HyperlinkMenu'; 111 | 112 | const HyperlinkModal = React.forwardRef(({ ...props }, ref) => { 113 | const refHyperlinkTextInput = useRef(); 114 | const editor = useEditor(); 115 | const [originalSelection, setOriginalSelection] = useState(null); 116 | const [canApply, setApplyStatus] = useState(false); 117 | 118 | const handleClick = useCallback((e) => { 119 | if (ref.current && !ref.current.contains(e.target)) { 120 | props.setShowLinkModal(false); 121 | } 122 | }, [props, ref]); 123 | 124 | useEffect(() => { 125 | document.addEventListener('mousedown', handleClick); 126 | return () => { 127 | document.removeEventListener('mousedown', handleClick); 128 | }; 129 | }, [handleClick]); 130 | 131 | const defaultTextValue = React.useMemo(() => { 132 | try { 133 | if (isSelectionLink(editor)) { 134 | const linkNode = Node.parent(editor, editor.selection.focus.path); 135 | return Editor.string(editor, ReactEditor.findPath(editor, linkNode)); 136 | } 137 | return Editor.string(editor, editor.selection); 138 | } catch (err) { 139 | return ''; 140 | } 141 | }, [editor]); 142 | 143 | const defaultLinkValue = (editor.selection && isSelectionLink(editor)) 144 | ? Node.parent(editor, editor.selection.focus.path).data.href 145 | : ''; 146 | 147 | useEffect(() => { 148 | // If the form is just opened, focus the Url input field 149 | if (props.showLinkModal) { 150 | setOriginalSelection(editor.selection); 151 | setApplyStatus(!!refHyperlinkTextInput.current.props.defaultValue); 152 | const x = window.scrollX; 153 | const y = window.scrollY; 154 | refHyperlinkTextInput.current.focus(); 155 | window.scrollTo(x, y); 156 | } 157 | }, [editor, props.showLinkModal]); 158 | 159 | const removeLink = () => { 160 | Transforms.select(editor, originalSelection); 161 | unwrapLink(editor); 162 | Transforms.deselect(editor); 163 | ReactEditor.focus(editor); 164 | props.setShowLinkModal(false); 165 | }; 166 | 167 | const validateUrl = (url) => { 168 | const isUrlInvalid = !(url.startsWith('http://') || url.startsWith('https://')); 169 | if (isUrlInvalid) { 170 | return `https://${url}`; 171 | } 172 | return url; 173 | }; 174 | 175 | const applyLink = (event) => { 176 | const newUrl = validateUrl(event.target.url.value); 177 | Transforms.select(editor, originalSelection); 178 | insertLink(editor, newUrl, event.target.text.value); 179 | Transforms.collapse(editor, { edge: 'end' }); 180 | ReactEditor.focus(editor); 181 | props.setShowLinkModal(false); 182 | }; 183 | 184 | const handleUrlInput = (event) => { 185 | Transforms.select(editor, originalSelection); 186 | setApplyStatus(!!event.target.value); 187 | }; 188 | 189 | const copyLink = () => { 190 | const inputLink = refHyperlinkTextInput.current.inputRef.current.value; 191 | const listener = (e) => { 192 | e.clipboardData.setData('text/plain', inputLink); 193 | e.preventDefault(); 194 | }; 195 | 196 | document.addEventListener('copy', listener); 197 | document.execCommand('copy'); 198 | document.removeEventListener('copy', listener); 199 | }; 200 | 201 | const openLink = () => { 202 | const inputLink = refHyperlinkTextInput.current.inputRef.current.value; 203 | if (inputLink) { 204 | window.open(inputLink, '_blank'); 205 | } 206 | }; 207 | 208 | return ( 209 | 210 | 211 | 212 |
213 | 214 | Link Text 215 | 218 | 219 | 220 | 221 | Link URL 222 | 229 | 230 | 234 | Apply 235 | 236 | 237 | 238 | 244 | 245 | 246 | } 247 | content="Copy hyperlink text" 248 | inverted 249 | position='bottom left' 250 | style={popupStyles} 251 | /> 252 | 258 | 259 | 260 | } 261 | content="Remove hyperlink" 262 | inverted 263 | position='bottom left' 264 | style={popupStyles} 265 | /> 266 | 272 | 273 | 274 | } 275 | content="Open link in a new tab" 276 | inverted 277 | position='bottom left' 278 | style={popupStyles} 279 | /> 280 | 281 |
282 | 283 | 284 | ); 285 | }); 286 | 287 | HyperlinkModal.displayName = 'HyperlinkModal'; 288 | 289 | HyperlinkModal.propTypes = { 290 | setShowLinkModal: PropTypes.func, 291 | showLinkModal: PropTypes.bool 292 | }; 293 | 294 | export default HyperlinkModal; 295 | -------------------------------------------------------------------------------- /src/RichTextEditor/FormattingToolbar/StyleFormat/Item.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Dropdown } from 'semantic-ui-react'; 4 | import { BLOCK_STYLE } from '../../utilities/constants'; 5 | import { toggleBlock } from '../../utilities/toolbarHelpers'; 6 | 7 | const StyleDropdownItem = ({ 8 | editor, type, style, canBeFormatted 9 | }) => ( 10 | { 14 | event.preventDefault(); 15 | if (!canBeFormatted(editor)) return; 16 | toggleBlock(editor, type); 17 | }} 18 | /> 19 | ); 20 | 21 | StyleDropdownItem.propTypes = { 22 | editor: PropTypes.object, 23 | type: PropTypes.string, 24 | style: PropTypes.object, 25 | canBeFormatted: PropTypes.func 26 | }; 27 | 28 | export default StyleDropdownItem; 29 | -------------------------------------------------------------------------------- /src/RichTextEditor/FormattingToolbar/StyleFormat/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import PropTypes from 'prop-types'; 4 | import { Node } from 'slate'; 5 | import { useSlate } from 'slate-react'; 6 | import { Dropdown } from 'semantic-ui-react'; 7 | import StyleDropdownItem from './Item'; 8 | import { 9 | BLOCK_STYLE, 10 | DROPDOWN_STYLE, 11 | DROPDOWN_STYLE_H1, 12 | DROPDOWN_STYLE_H2, 13 | DROPDOWN_STYLE_H3 14 | } from '../../utilities/constants'; 15 | import { 16 | PARAGRAPH, H1, H2, H3 17 | } from '../../utilities/schema'; 18 | 19 | const StyleDropdown = ({ canBeFormatted }) => { 20 | const editor = useSlate(); 21 | const currentBlock = (editor && editor.selection) 22 | ? BLOCK_STYLE[Node.parent(editor, editor.selection.focus.path).type] 23 | : 'Style'; 24 | return ( 25 | 31 | 32 | 38 | 44 | 50 | 56 | 57 | ); 58 | }; 59 | 60 | StyleDropdown.propTypes = { 61 | canBeFormatted: PropTypes.func 62 | }; 63 | 64 | 65 | export default StyleDropdown; 66 | -------------------------------------------------------------------------------- /src/RichTextEditor/FormattingToolbar/ToolbarMenu.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const Menu = styled.div` 5 | position: sticky; 6 | top: 0; 7 | width: 100%; 8 | background-color: #FFF; 9 | padding: 15px; 10 | z-index: 10; 11 | display: flex; 12 | align-content: space-evenly; 13 | justify-content: center; 14 | margin-bottom: 20px; 15 | & > * { 16 | display: inline-block; 17 | } 18 | & > * + * { 19 | margin-left: 15px; 20 | } 21 | `; 22 | 23 | const ToolbarMenu = React.forwardRef( 24 | ({ ...props }, ref) => () 25 | ); 26 | 27 | ToolbarMenu.displayName = 'ToolbarMenu'; 28 | 29 | export default ToolbarMenu; 30 | -------------------------------------------------------------------------------- /src/RichTextEditor/FormattingToolbar/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { ReactEditor, useEditor } from 'slate-react'; 4 | 5 | import { InsertImageButton } from '../plugins/withImages'; 6 | import ToolbarMenu from './ToolbarMenu'; 7 | import FormatButton from './FormatButton'; 8 | import HistoryButton from './HistoryButton'; 9 | import HyperlinkButton from './HyperlinkButton'; 10 | import StyleDropdown from './StyleFormat'; 11 | import HyperlinkModal from './HyperlinkModal'; 12 | import { 13 | toggleBlock, isBlockActive, 14 | toggleMark, isMarkActive, 15 | toggleHistory 16 | } from '../utilities/toolbarHelpers'; 17 | import { 18 | bold, italic, code, 19 | quote, olist, ulist, 20 | image, link, undo, redo, 21 | Separator 22 | } from '../components/icons'; 23 | 24 | const mark = { toggleFunc: toggleMark, activeFunc: isMarkActive }; 25 | const block = { toggleFunc: toggleBlock, activeFunc: isBlockActive }; 26 | const history = { toggleFunc: toggleHistory }; 27 | 28 | const FormattingToolbar = ({ canBeFormatted, showLinkModal, setShowLinkModal }) => { 29 | const editor = useEditor(); 30 | const linkModalRef = useRef(); 31 | 32 | const linkProps = { 33 | showLinkModal, 34 | setShowLinkModal 35 | }; 36 | 37 | useEffect(() => { 38 | if (showLinkModal) { 39 | const el = linkModalRef.current; 40 | const domRange = ReactEditor.toDOMRange(editor, editor.selection); 41 | const rect = domRange.getBoundingClientRect(); 42 | const CARET_TOP_OFFSET = 15; 43 | el.style.opacity = 1; 44 | el.style.top = `${rect.top + rect.height + window.pageYOffset + CARET_TOP_OFFSET}px`; 45 | el.style.left = `${rect.left 46 | + window.pageXOffset 47 | - el.offsetWidth / 2 48 | + rect.width / 2}px`; 49 | } 50 | }, [editor, showLinkModal]); 51 | 52 | 53 | return ( 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 73 | 74 | { showLinkModal && } 75 | 76 | ); 77 | }; 78 | 79 | FormattingToolbar.propTypes = { 80 | canBeFormatted: PropTypes.func, 81 | showLinkModal: PropTypes.bool, 82 | setShowLinkModal: PropTypes.func, 83 | }; 84 | 85 | 86 | export default FormattingToolbar; 87 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/Button.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { BUTTON_COLORS } from '../utilities/constants'; 3 | 4 | const Button = styled.svg` 5 | place-self: center; 6 | user-select: none !important; 7 | width: ${props => props.width}; 8 | height: ${props => props.height}; 9 | padding: ${props => props.padding}; 10 | background-color: ${props => props.background}; 11 | border-radius: 5px; 12 | cursor: pointer; 13 | &:hover { 14 | background-color: ${BUTTON_COLORS.BACKGROUND_ACTIVE}; 15 | } 16 | `; 17 | 18 | export default Button; 19 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/Leaf.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | /* eslint no-param-reassign: 0 */ 5 | const Leaf = ({ attributes, children, leaf }) => { 6 | if (leaf.bold) { 7 | children = {children}; 8 | } 9 | 10 | if (leaf.code) { 11 | children = {children}; 12 | } 13 | 14 | if (leaf.italic) { 15 | children = {children}; 16 | } 17 | 18 | return {children}; 19 | }; 20 | 21 | Leaf.propTypes = { 22 | children: PropTypes.node, 23 | leaf: PropTypes.object, 24 | attributes: PropTypes.any 25 | }; 26 | 27 | export default Leaf; 28 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/Node/Heading.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import PropTypes from 'prop-types'; 3 | import * as SCHEMA from '../../utilities/schema'; 4 | 5 | const Heading = styled.div` 6 | font-family: serif; 7 | `; 8 | 9 | Heading.propTypes = { 10 | type: PropTypes.oneOf(SCHEMA.HEADINGS), 11 | }; 12 | 13 | export default Heading; 14 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/Node/index.js: -------------------------------------------------------------------------------- 1 | import Heading from './Heading'; 2 | 3 | export { 4 | Heading, 5 | }; 6 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/Portal.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | 3 | const Portal = ({ children }) => ReactDOM.createPortal(children, document.body); 4 | 5 | export default Portal; 6 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/Span/HorizontalRule.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const HorizontalRule = styled.div` 4 | overflow: visible; /* For IE */ 5 | padding: 0; 6 | border: none; 7 | border-top: medium double #333; 8 | color: #333; 9 | text-align: center; 10 | `; 11 | 12 | export default HorizontalRule; 13 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/Span/index.js: -------------------------------------------------------------------------------- 1 | import HorizontalRule from './HorizontalRule'; 2 | 3 | export { 4 | HorizontalRule, 5 | }; 6 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/bold.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MOD } from '../../utilities/tooltipHelpers'; 3 | 4 | const icon = fillColor => ( 5 | 14 | 15 | 16 | 17 | B 18 | 19 | 20 | 21 | 22 | ); 23 | 24 | const bold = { 25 | type: 'bold', 26 | label: `Bold (${MOD()}+B)`, 27 | height: '25px', 28 | width: '25px', 29 | padding: '5px 7px', 30 | viewBox: '0 0 11 13', 31 | icon, 32 | }; 33 | 34 | export default bold; -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/code.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MOD } from '../../utilities/tooltipHelpers'; 3 | 4 | const icon = fillColor => ( 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | 20 | const code = { 21 | type: 'code', 22 | label: `Code (${MOD()}+Shift+9)`, 23 | height: '25px', 24 | width: '25px', 25 | padding: '6px 2px 4px', 26 | viewBox: '0 0 20 12', 27 | icon, 28 | }; 29 | 30 | export default code; -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/copy.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // eslint-disable-next-line react/display-name 4 | export default () => ( 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | ); 20 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/delete.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // eslint-disable-next-line react/display-name 4 | export default () => ( 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | ); 26 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/image.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { MOD } from '../../utilities/tooltipHelpers' 4 | 5 | const icon = () => ( 6 | 7 | 13 | 14 | ); 15 | 16 | const image = { 17 | type: 'image', 18 | label: `Insert Image (${MOD()}+Shift+G)`, 19 | height: '18px', 20 | width: '18px', 21 | viewBox: '0 0 18 18', 22 | icon, 23 | }; 24 | 25 | export default image; 26 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/index.js: -------------------------------------------------------------------------------- 1 | import bold from './bold'; 2 | import italic from './italic'; 3 | import code from './code'; 4 | import quote from './quote'; 5 | import olist from './olist'; 6 | import ulist from './ulist'; 7 | import image from './image'; 8 | import link from './link'; 9 | import undo from './undo'; 10 | import redo from './redo'; 11 | import Separator from './separator'; 12 | 13 | export { 14 | bold, 15 | italic, 16 | code, 17 | quote, 18 | olist, 19 | ulist, 20 | image, 21 | link, 22 | undo, 23 | redo, 24 | Separator 25 | }; 26 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/italic.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MOD } from '../../utilities/tooltipHelpers'; 3 | 4 | const icon = fillColor => ( 5 | 15 | 16 | 17 | 18 | I 19 | 20 | 21 | 22 | 23 | ); 24 | 25 | const italic = { 26 | type: 'italic', 27 | label: `Italic (${MOD()}+I)`, 28 | height: '25px', 29 | width: '25px', 30 | padding: '5px 7px', 31 | viewBox: '0 0 10 13', 32 | icon, 33 | }; 34 | 35 | export default italic; -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/link.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MOD } from '../../utilities/tooltipHelpers'; 3 | 4 | const icon = fillColor => ( 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | const link = { 20 | type: 'link', 21 | label: `Hyperlink (${MOD()}+K)`, 22 | height: '25px', 23 | width: '25px', 24 | padding: '5px', 25 | viewBox: '0 0 14 14', 26 | icon, 27 | }; 28 | 29 | export default link; 30 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/olist.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { OL_LIST } from '../../utilities/schema'; 3 | import { identifyBlock } from '../../utilities/tooltipHelpers'; 4 | 5 | const icon = fillColor => ( 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | 21 | const olist = { 22 | type: OL_LIST, 23 | label: identifyBlock(OL_LIST), 24 | height: '25px', 25 | width: '25px', 26 | padding: '6px 3px 4px', 27 | viewBox: '0 0 17 14', 28 | icon, 29 | }; 30 | 31 | export default olist; 32 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/open.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // eslint-disable-next-line react/display-name 4 | export default () => ( 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | ); 20 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/quote.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BLOCK_QUOTE } from '../../utilities/schema'; 3 | import { identifyBlock } from '../../utilities/tooltipHelpers'; 4 | 5 | const icon = fillColor => ( 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | 20 | const quote = { 21 | type: BLOCK_QUOTE, 22 | label: identifyBlock(BLOCK_QUOTE), 23 | height: '25px', 24 | width: '25px', 25 | padding: '7px 3px 5px', 26 | viewBox: '0 0 18 13', 27 | icon, 28 | }; 29 | 30 | export default quote; 31 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/redo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MOD } from '../../utilities/tooltipHelpers'; 3 | import { BUTTON_COLORS } from '../../utilities/constants'; 4 | 5 | const icon = () => ( 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | const redo = { 20 | type: 'redo', 21 | label: `Redo (${MOD()}+Shift+Z)`, 22 | height: '25px', 23 | width: '25px', 24 | padding: '6px 4px', 25 | viewBox: '0 0 16 11', 26 | icon, 27 | }; 28 | 29 | export default redo; 30 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/separator.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Separator = styled.div` 4 | box-sizing: border-box; 5 | height: 23px; 6 | width: 1px; 7 | border: 1px solid #EFEFEF; 8 | `; 9 | 10 | export default Separator; 11 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/ulist.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { UL_LIST } from '../../utilities/schema'; 3 | import { identifyBlock } from '../../utilities/tooltipHelpers'; 4 | 5 | const icon = fillColor => ( 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | 21 | const ulist = { 22 | type: UL_LIST, 23 | label: identifyBlock(UL_LIST), 24 | height: '25px', 25 | width: '25px', 26 | padding: '6px 3px 4px', 27 | viewBox: '0 0 16 14', 28 | icon, 29 | }; 30 | 31 | export default ulist; 32 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/icons/undo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MOD } from '../../utilities/tooltipHelpers'; 3 | import { BUTTON_COLORS } from '../../utilities/constants'; 4 | 5 | const icon = () => ( 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | const undo = { 20 | type: 'undo', 21 | label: `Undo (${MOD()}+Z)`, 22 | height: '25px', 23 | width: '25px', 24 | padding: '6px 4px', 25 | viewBox: '0 0 16 11', 26 | icon, 27 | }; 28 | 29 | export default undo; 30 | -------------------------------------------------------------------------------- /src/RichTextEditor/components/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import ImageElement from '../plugins/withImages'; 4 | import { Heading } from './Node'; 5 | import { HorizontalRule } from './Span'; 6 | import { 7 | PARAGRAPH, LINK, IMAGE, H1, H2, H3, H4, H5, H6, HR, 8 | CODE_BLOCK, HTML_BLOCK, BLOCK_QUOTE, UL_LIST, OL_LIST, LIST_ITEM, 9 | HTML_INLINE, SOFTBREAK, LINEBREAK, HEADINGS 10 | } from '../utilities/schema'; 11 | import generateId from '../utilities/generateId'; 12 | 13 | const Element = (props) => { 14 | const { 15 | attributes, children, element, customElements 16 | } = props; 17 | const { type, data } = element; 18 | const headingId = HEADINGS.includes(type) ? generateId(element) : null; 19 | const baseElementRenderer = { 20 | [PARAGRAPH]: () => (

{children}

), 21 | [H1]: () => ({children}), 22 | [H2]: () => ({children}), 23 | [H3]: () => ({children}), 24 | [H4]: () => ({children}), 25 | [H5]: () => ({children}), 26 | [H6]: () => ({children}), 27 | [SOFTBREAK]: () => ( {children}), 28 | [LINEBREAK]: () => (
), 29 | [LINK]: () => ({children}), 30 | [HTML_BLOCK]: () => (
{children}
), 31 | [CODE_BLOCK]: () => (
{children}
), 32 | [BLOCK_QUOTE]: () => (
{children}
), 33 | [OL_LIST]: () => (
    {children}
), 34 | [UL_LIST]: () => (
    {children}
), 35 | [LIST_ITEM]: () => (
  • {children}
    • ), 36 | [IMAGE]: () => (), 37 | [HR]: () => ({children}), 38 | [HTML_INLINE]: () => ({data.content}{children}), 39 | default: () => { 40 | console.log(`Didn't know how to render ${JSON.stringify(element, null, 2)}`); 41 | return

    {children}

    ; 42 | } 43 | }; 44 | const elementRenderer = customElements 45 | ? { ...baseElementRenderer, ...customElements(attributes, children, element) } 46 | : baseElementRenderer; 47 | return (elementRenderer[type] || elementRenderer.default)(); 48 | }; 49 | 50 | Element.propTypes = { 51 | children: PropTypes.node, 52 | element: PropTypes.shape({ 53 | data: PropTypes.object, 54 | type: PropTypes.string 55 | }), 56 | attributes: PropTypes.any 57 | }; 58 | 59 | export default Element; 60 | -------------------------------------------------------------------------------- /src/RichTextEditor/index.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | useCallback, useMemo, useState 3 | } from 'react'; 4 | import { CiceroMarkTransformer } from '@accordproject/markdown-cicero'; 5 | import { HtmlTransformer } from '@accordproject/markdown-html'; 6 | import { SlateTransformer } from '@accordproject/markdown-slate'; 7 | import isHotkey from 'is-hotkey'; 8 | import { Editable, withReact, Slate } from 'slate-react'; 9 | import { 10 | Editor, Range, Node, createEditor 11 | } from 'slate'; 12 | import { withHistory } from 'slate-history'; 13 | import PropTypes from 'prop-types'; 14 | import HOTKEYS, { formattingHotKeys } from './utilities/hotkeys'; 15 | import withSchema from './utilities/schema'; 16 | import Element from './components'; 17 | import Leaf from './components/Leaf'; 18 | import { toggleMark, toggleBlock } from './utilities/toolbarHelpers'; 19 | import { withImages, insertImage } from './plugins/withImages'; 20 | import { withLinks, isSelectionLinkBody } from './plugins/withLinks'; 21 | import { withHtml } from './plugins/withHtml'; 22 | import { withLists } from './plugins/withLists'; 23 | import FormatBar from './FormattingToolbar'; 24 | 25 | const RichTextEditor = (props) => { 26 | const { 27 | canCopy, 28 | canKeyDown, 29 | augmentEditor, 30 | isEditable, 31 | canBeFormatted 32 | } = props; 33 | const [showLinkModal, setShowLinkModal] = useState(false); 34 | const editor = useMemo(() => { 35 | if (augmentEditor) { 36 | return augmentEditor( 37 | withLists(withLinks(withHtml(withImages( 38 | withSchema(withHistory(withReact(createEditor()))) 39 | )))) 40 | ); 41 | } 42 | return withLists(withLinks(withHtml(withImages( 43 | withSchema(withHistory(withReact(createEditor()))) 44 | )))); 45 | // eslint-disable-next-line react-hooks/exhaustive-deps 46 | }, []); 47 | 48 | const renderElement = useCallback((slateProps) => { 49 | const elementProps = { ...slateProps, customElements: props.customElements }; 50 | return (); 51 | }, [props.customElements]); 52 | const renderLeaf = useCallback(props => , []); 53 | 54 | const hotkeyActions = { 55 | mark: code => toggleMark(editor, code), 56 | block: code => toggleBlock(editor, code), 57 | image: () => { 58 | const url = window.prompt('Enter the URL of the image:'); 59 | if (url) { 60 | insertImage(editor, url); 61 | } 62 | }, 63 | special: (code) => { 64 | if (code === 'undo') return editor.undo(); 65 | return editor.redo(); 66 | }, 67 | link: () => { 68 | setShowLinkModal(true); 69 | }, 70 | }; 71 | 72 | const onKeyDown = useCallback((event) => { 73 | if (!canKeyDown(editor, event)) { 74 | event.preventDefault(); 75 | return; 76 | } 77 | const isFormatEvent = () => formattingHotKeys.some(hotkey => isHotkey(hotkey, event)); 78 | if (!canBeFormatted(editor) && isFormatEvent()) { 79 | event.preventDefault(); 80 | return; 81 | } 82 | 83 | const hotkeys = Object.keys(HOTKEYS); 84 | hotkeys.forEach((hotkey) => { 85 | if (isHotkey(hotkey, event)) { 86 | event.preventDefault(); 87 | const { code, type } = HOTKEYS[hotkey]; 88 | hotkeyActions[type](code); 89 | } 90 | }); 91 | }, [canBeFormatted, canKeyDown, editor, hotkeyActions]); 92 | 93 | const onBeforeInput = useCallback((event) => { 94 | const canEdit = isEditable(editor, event); 95 | if (!canEdit) { 96 | event.preventDefault(); 97 | } 98 | }, [editor, isEditable]); 99 | 100 | const handleCopyOrCut = useCallback((event, cut) => { 101 | event.preventDefault(); 102 | if (!canCopy(editor)) return; 103 | const slateTransformer = new SlateTransformer(); 104 | const htmlTransformer = new HtmlTransformer(); 105 | const ciceroMarkTransformer = new CiceroMarkTransformer(); 106 | const SLATE_CHILDREN = Node.fragment(editor, editor.selection); 107 | const SLATE_DOM = { 108 | object: 'value', 109 | document: { 110 | object: 'document', 111 | data: {}, 112 | children: SLATE_CHILDREN 113 | } 114 | }; 115 | const CICERO_MARK_DOM = slateTransformer.toCiceroMark(SLATE_DOM); 116 | const HTML_DOM = htmlTransformer.toHtml(CICERO_MARK_DOM); 117 | const MARKDOWN_TEXT = ciceroMarkTransformer.toMarkdown(CICERO_MARK_DOM); 118 | 119 | event.clipboardData.setData('text/html', HTML_DOM); 120 | event.clipboardData.setData('text/plain', MARKDOWN_TEXT); 121 | 122 | if (cut && editor.selection && Range.isExpanded(editor.selection)) { 123 | Editor.deleteFragment(editor); 124 | } 125 | }, [canCopy, editor]); 126 | 127 | const onChange = (value) => { 128 | if (props.readOnly) return; 129 | props.onChange(value, editor); 130 | const { selection } = editor; 131 | if (selection && isSelectionLinkBody(editor)) { 132 | setShowLinkModal(true); 133 | } 134 | }; 135 | 136 | return ( 137 | 138 | { !props.readOnly 139 | && } 144 | handleCopyOrCut(event, true)} 156 | /> 157 | 158 | ); 159 | }; 160 | 161 | /** 162 | * The property types for this component 163 | */ 164 | RichTextEditor.propTypes = { 165 | /* Initial contents for the editor (markdown text) */ 166 | value: PropTypes.array.isRequired, 167 | /* A callback that receives the markdown text */ 168 | onChange: PropTypes.func.isRequired, 169 | /* Boolean to make editor read-only (uneditable) or not (editable) */ 170 | readOnly: PropTypes.bool, 171 | /* Higher order function to augment the editor methods */ 172 | augmentEditor: PropTypes.func, 173 | /* Function for extending elements rendered by editor */ 174 | customElements: PropTypes.func, 175 | /* A method that determines if current edit should be allowed */ 176 | isEditable: PropTypes.func, 177 | /* A method that determines if current formatting change should be allowed */ 178 | canBeFormatted: PropTypes.func, 179 | /* A method that determines if current selection copy should be allowed */ 180 | canCopy: PropTypes.func, 181 | /* A method that determines if current key event should be allowed */ 182 | canKeyDown: PropTypes.func, 183 | /* Placeholder text when the editor is blank */ 184 | placeholder: PropTypes.string, 185 | }; 186 | 187 | RichTextEditor.defaultProps = { 188 | isEditable: () => true, 189 | canBeFormatted: () => true, 190 | canCopy: () => true, 191 | canKeyDown: () => true, 192 | }; 193 | 194 | 195 | export default RichTextEditor; 196 | -------------------------------------------------------------------------------- /src/RichTextEditor/plugins/withHtml.js: -------------------------------------------------------------------------------- 1 | import { Transforms } from 'slate'; 2 | import { CiceroMarkTransformer } from '@accordproject/markdown-cicero'; 3 | import { HtmlTransformer } from '@accordproject/markdown-html'; 4 | import { SlateTransformer } from '@accordproject/markdown-slate'; 5 | 6 | /* eslint no-param-reassign: 0 */ 7 | export const withHtml = (editor) => { 8 | const { insertData } = editor; 9 | 10 | editor.insertData = (data) => { 11 | const HTML_DOM = data.getData('text/html'); 12 | const PLAIN_DOM = data.getData('text/plain'); 13 | if (HTML_DOM || PLAIN_DOM) { 14 | try { 15 | const htmlTransformer = new HtmlTransformer(); 16 | const slateTransformer = new SlateTransformer(); 17 | const ciceroMarkTransformer = new CiceroMarkTransformer(); 18 | 19 | const SLATE_DOM = HTML_DOM 20 | ? slateTransformer 21 | .fromCiceroMark(htmlTransformer.toCiceroMark(HTML_DOM)) 22 | : slateTransformer 23 | .fromCiceroMark(ciceroMarkTransformer.fromMarkdown(PLAIN_DOM)); 24 | 25 | Transforms.insertFragment(editor, SLATE_DOM.document.children); 26 | } catch (err) { 27 | console.error(err); 28 | } 29 | return; 30 | } 31 | 32 | insertData(data); 33 | }; 34 | 35 | return editor; 36 | }; 37 | 38 | export default withHtml; 39 | -------------------------------------------------------------------------------- /src/RichTextEditor/plugins/withImages.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import imageExtensions from 'image-extensions'; 4 | import styled from 'styled-components'; 5 | import { Popup } from 'semantic-ui-react'; 6 | import isUrl from 'is-url'; 7 | import { Transforms } from 'slate'; 8 | import { 9 | useEditor, 10 | useSelected, 11 | useFocused 12 | } from 'slate-react'; 13 | import { POPUP_STYLE } from '../utilities/constants'; 14 | 15 | import Button from '../components/Button'; 16 | 17 | const StyledImage = styled.img` 18 | display: block; 19 | max-width: 100%; 20 | max-height: 20em; 21 | box-shadow: ${props => (props.shadow ? '0 0 0 3px #B4D5FF' : 'none')}; 22 | `; 23 | 24 | export const insertImage = (editor, url) => { 25 | const text = { text: '' }; 26 | const image = { type: 'image', data: { href: url, title: url }, children: [text] }; 27 | Transforms.insertNodes(editor, image); 28 | }; 29 | 30 | const isImageUrl = (url) => { 31 | if (!url) return false; 32 | if (!isUrl(url)) return false; 33 | const ext = new URL(url).pathname.split('.').pop(); 34 | return imageExtensions.includes(ext); 35 | }; 36 | 37 | /* eslint no-param-reassign: 0 */ 38 | /* eslint no-restricted-syntax: 0 */ 39 | export const withImages = (editor) => { 40 | const { insertData, isVoid } = editor; 41 | 42 | editor.isVoid = element => (element.type === 'image' ? true : isVoid(element)); 43 | 44 | editor.insertData = (data) => { 45 | const text = data.getData('text/plain'); 46 | const { files } = data; 47 | 48 | if (files && files.length > 0) { 49 | for (const file of files) { 50 | const reader = new FileReader(); 51 | const [mime] = file.type.split('/'); 52 | 53 | if (mime === 'image') { 54 | reader.addEventListener('load', () => { 55 | const url = reader.result; 56 | insertImage(editor, url); 57 | }); 58 | 59 | reader.readAsDataURL(file); 60 | } 61 | } 62 | } else if (isImageUrl(text)) { 63 | insertImage(editor, text); 64 | } else { 65 | insertData(data); 66 | } 67 | }; 68 | 69 | return editor; 70 | }; 71 | 72 | /* eslint no-alert: 0 */ 73 | export const InsertImageButton = ({ 74 | // toggleFunc, 75 | // activeFunc, 76 | type, 77 | label, 78 | icon, 79 | canBeFormatted, 80 | ...props 81 | }) => { 82 | const editor = useEditor(); 83 | const handleMouseDown = (e) => { 84 | e.preventDefault(); 85 | if (!canBeFormatted(editor)) return; 86 | const url = window.prompt('Enter the URL of the image:'); 87 | if (!url) return; 88 | insertImage(editor, url); 89 | }; 90 | return ( 91 | 101 | {icon()} 102 | 103 | } 104 | /> 105 | ); 106 | }; 107 | 108 | InsertImageButton.propTypes = { 109 | icon: PropTypes.func, 110 | type: PropTypes.string, 111 | label: PropTypes.string, 112 | canBeFormatted: PropTypes.func 113 | }; 114 | 115 | const ImageElement = (({ attributes, children, element }) => { 116 | const selected = useSelected(); 117 | const focused = useFocused(); 118 | return ( 119 | 120 | 121 | 122 | 123 | {children} 124 | 125 | ); 126 | }); 127 | 128 | ImageElement.displayName = 'ImageElement'; 129 | 130 | ImageElement.propTypes = { 131 | children: PropTypes.node, 132 | element: PropTypes.shape({ 133 | data: PropTypes.shape({ 134 | href: PropTypes.string 135 | }) 136 | }), 137 | attributes: PropTypes.any 138 | }; 139 | 140 | export default ImageElement; 141 | -------------------------------------------------------------------------------- /src/RichTextEditor/plugins/withLinks.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | import { 3 | Transforms, Node, Editor, Range 4 | } from 'slate'; 5 | 6 | import { ReactEditor } from 'slate-react'; 7 | 8 | export const isSelectionLink = editor => Node.parent(editor, editor.selection.focus.path).type === 'link'; 9 | 10 | const atEnd = (editor) => { 11 | const textLength = Node.get(editor, editor.selection.focus.path).text.length; 12 | return textLength === editor.selection.focus.offset; 13 | }; 14 | 15 | // checks if selection is in the body of the link and not at the end 16 | export const isSelectionLinkBody = editor => isSelectionLink(editor) && !atEnd(editor); 17 | 18 | // checks if selection is at the end of a link 19 | export const isSelectionLinkEnd = editor => isSelectionLink(editor) && atEnd(editor); 20 | 21 | export const unwrapLink = (editor) => { 22 | Transforms.unwrapNodes(editor, { match: n => n.type === 'link' }); 23 | }; 24 | 25 | const wrapLink = (editor, url, text) => { 26 | const link = { 27 | type: 'link', 28 | data: { 29 | href: url 30 | }, 31 | children: text ? [{ text }] : [{ text: url }], 32 | }; 33 | const isCollapsed = editor.selection && Range.isCollapsed(editor.selection); 34 | if (isCollapsed && isSelectionLink(editor)) { 35 | const linkNodePath = ReactEditor.findPath( 36 | editor, Node.parent(editor, editor.selection.focus.path) 37 | ); 38 | if (text !== Editor.string(editor, linkNodePath)) { 39 | Transforms.insertText(editor, text, { at: linkNodePath }); 40 | } 41 | Transforms.select(editor, linkNodePath); 42 | unwrapLink(editor); 43 | Transforms.wrapNodes(editor, link, { split: true }); 44 | return; 45 | } 46 | if (isCollapsed) { 47 | Transforms.insertNodes(editor, link); 48 | return; 49 | } 50 | unwrapLink(editor); 51 | Transforms.wrapNodes(editor, link, { split: true }); 52 | }; 53 | 54 | export const insertLink = (editor, url, text) => { 55 | if (editor.selection) { 56 | wrapLink(editor, url, text); 57 | } 58 | }; 59 | 60 | export const withLinks = (editor) => { 61 | const { isInline, insertBreak } = editor; 62 | 63 | editor.isInline = element => (element.type === 'link' ? true : isInline(element)); 64 | 65 | editor.insertBreak = () => { 66 | if (isSelectionLinkEnd(editor)) { 67 | const point = Editor.after(editor, editor.selection.focus.path); 68 | Transforms.setSelection(editor, { 69 | anchor: point, 70 | focus: point, 71 | }); 72 | insertBreak(); 73 | } else { 74 | insertBreak(); 75 | } 76 | }; 77 | 78 | return editor; 79 | }; 80 | -------------------------------------------------------------------------------- /src/RichTextEditor/plugins/withLists.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | import { Transforms, Node } from 'slate'; 3 | import { ENTER_BLOCK, ENTER_LIST } from '../utilities/hotkeys'; 4 | import { LIST_ITEM, PARAGRAPH } from '../utilities/schema'; 5 | 6 | export const withLists = (editor) => { 7 | const { insertBreak } = editor; 8 | 9 | editor.insertBreak = () => { 10 | const currNode = Node.get(editor, editor.selection.focus.path); 11 | if (currNode.object === 'text' && currNode.text === '') { 12 | // eslint-disable-next-line no-restricted-syntax 13 | for (const [n] of Node.ancestors(editor, editor.selection.focus.path, { reverse: true })) { 14 | if (ENTER_BLOCK[n.type]) { 15 | if (ENTER_LIST[n.type]) { 16 | Transforms.unwrapNodes(editor, { match: n => n.type === LIST_ITEM, split: true }); 17 | } 18 | Transforms.unwrapNodes(editor, { match: n => ENTER_BLOCK[n.type], split: true }); 19 | return; 20 | } 21 | } 22 | } 23 | // eslint-disable-next-line no-restricted-syntax 24 | for (const [currNode] of Node.ancestors( 25 | editor, 26 | editor.selection.focus.path, 27 | { reverse: true } 28 | )) { 29 | if (currNode.type === LIST_ITEM) { 30 | const block = { 31 | type: LIST_ITEM, 32 | children: [{ 33 | object: 'block', 34 | type: PARAGRAPH, 35 | children: [{ object: 'text', text: '' }], 36 | data: {} 37 | }], 38 | data: { tight: true } 39 | }; 40 | 41 | Transforms.insertNodes(editor, block, { match: n => n.type === LIST_ITEM }); 42 | return; 43 | } 44 | } 45 | insertBreak(); 46 | }; 47 | 48 | return editor; 49 | }; 50 | -------------------------------------------------------------------------------- /src/RichTextEditor/tests/__snapshots__/index.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` on initialization renders page correctly 1`] = ` 4 | 490 | This is an html block. 491 | ", 492 | }, 493 | ], 494 | "data": Object {}, 495 | "object": "block", 496 | "type": "paragraph", 497 | }, 498 | ], 499 | "data": Object {}, 500 | "object": "block", 501 | "type": "html_block", 502 | }, 503 | Object { 504 | "children": Array [ 505 | Object { 506 | "object": "text", 507 | "text": "And this is ", 508 | }, 509 | Object { 510 | "children": Array [ 511 | Object { 512 | "object": "text", 513 | "text": "", 514 | }, 515 | ], 516 | "data": Object { 517 | "content": "", 518 | }, 519 | "object": "inline", 520 | "type": "html_inline", 521 | }, 522 | Object { 523 | "object": "text", 524 | "text": "an HTML inline", 525 | }, 526 | Object { 527 | "children": Array [ 528 | Object { 529 | "object": "text", 530 | "text": "", 531 | }, 532 | ], 533 | "data": Object { 534 | "content": "", 535 | }, 536 | "object": "inline", 537 | "type": "html_inline", 538 | }, 539 | Object { 540 | "object": "text", 541 | "text": ".", 542 | }, 543 | ], 544 | "data": Object {}, 545 | "object": "block", 546 | "type": "paragraph", 547 | }, 548 | Object { 549 | "children": Array [ 550 | Object { 551 | "object": "text", 552 | "text": "H1", 553 | }, 554 | ], 555 | "data": Object {}, 556 | "object": "block", 557 | "type": "heading_one", 558 | }, 559 | Object { 560 | "children": Array [ 561 | Object { 562 | "object": "text", 563 | "text": "H2", 564 | }, 565 | ], 566 | "data": Object {}, 567 | "object": "block", 568 | "type": "heading_two", 569 | }, 570 | Object { 571 | "children": Array [ 572 | Object { 573 | "object": "text", 574 | "text": "H3", 575 | }, 576 | ], 577 | "data": Object {}, 578 | "object": "block", 579 | "type": "heading_three", 580 | }, 581 | Object { 582 | "children": Array [ 583 | Object { 584 | "object": "text", 585 | "text": "H4", 586 | }, 587 | ], 588 | "data": Object {}, 589 | "object": "block", 590 | "type": "heading_four", 591 | }, 592 | Object { 593 | "children": Array [ 594 | Object { 595 | "object": "text", 596 | "text": "H5", 597 | }, 598 | ], 599 | "data": Object {}, 600 | "object": "block", 601 | "type": "heading_four", 602 | }, 603 | Object { 604 | "children": Array [ 605 | Object { 606 | "object": "text", 607 | "text": "H6", 608 | }, 609 | ], 610 | "data": Object {}, 611 | "object": "block", 612 | "type": "heading_five", 613 | }, 614 | Object { 615 | "children": Array [ 616 | Object { 617 | "object": "text", 618 | "text": "Fin.", 619 | }, 620 | ], 621 | "data": Object {}, 622 | "object": "block", 623 | "type": "paragraph", 624 | }, 625 | ] 626 | } 627 | > 628 | 633 | 646 | 647 | `; 648 | -------------------------------------------------------------------------------- /src/RichTextEditor/tests/index.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Enzyme, { shallow } from 'enzyme'; 3 | import toJson from 'enzyme-to-json'; 4 | import Adapter from 'enzyme-adapter-react-16'; 5 | import { SlateTransformer } from '@accordproject/markdown-slate'; 6 | import RichTextEditor from '../index'; 7 | 8 | const slateTransformer = new SlateTransformer(); 9 | Enzyme.configure({ adapter: new Adapter() }); 10 | const defaultMarkdown = `# My Heading 11 | 12 | This is text. This is *italic* text. This is **bold** text. This is a [link](https://clause.io). This is \`inline code\`. 13 | 14 | This is ***bold and italic*** text. 15 | 16 | ## Breaks 17 | This is a 18 | hard break. 19 | 20 | This is a 21 | softbreak. 22 | 23 | --- 24 | 25 | This ^^^^ is a thematic break 26 | 27 | ![ap_logo](https://docs.accordproject.org/docs/assets/020/template.png "AP triangle") 28 | 29 | > This is a quote. 30 | ## Heading Two 31 | This is more text. 32 | 33 | Below is a code block: 34 | 35 | \`\`\` javascript 36 | this is my great 37 | code 38 | \`\`\` 39 | 40 | Ordered lists: 41 | 42 | 1. one 43 | 1. two 44 | 1. three 45 | 46 | Or: 47 | 48 | * apples 49 | * pears 50 | * peaches 51 | 52 | ### Sub heading 53 | 54 | This is more text. 55 | 56 | 57 | This is an html block. 58 | 59 | 60 | And this is an HTML inline. 61 | 62 | # H1 63 | ## H2 64 | ### H3 65 | #### H4 66 | #### H5 67 | ##### H6 68 | 69 | Fin. 70 | `; 71 | const mockOnChange = jest.fn(); 72 | 73 | describe('', () => { 74 | describe('on initialization', () => { 75 | it('renders page correctly', () => { 76 | const slate = slateTransformer.fromMarkdown(defaultMarkdown); 77 | 78 | const component = shallow( 79 | 85 | ); 86 | const tree = toJson(component); 87 | expect(tree).toMatchSnapshot(); 88 | }); 89 | }); 90 | }); 91 | -------------------------------------------------------------------------------- /src/RichTextEditor/utilities/constants.js: -------------------------------------------------------------------------------- 1 | const MISC_CONSTANTS = { 2 | DROPDOWN_COLOR: '#122330', 3 | DROPDOWN_WEIGHT: 'bold', 4 | DROPDOWN_NORMAL: 'Normal' 5 | }; 6 | 7 | export const BUTTON_COLORS = { 8 | BACKGROUND_INACTIVE: '#FFFFFF', 9 | BACKGROUND_ACTIVE: '#F0F0F0', 10 | SYMBOL_INACTIVE: '#949CA2', 11 | SYMBOL_ACTIVE: '#414F58', 12 | HYPERLINK_ACTIVE: '#2587DA', 13 | TOOLTIP_BACKGROUND: '#FFFFFF', 14 | TOOLTIP: '#000000', 15 | }; 16 | 17 | export const BLOCK_STYLE = { 18 | paragraph: MISC_CONSTANTS.DROPDOWN_NORMAL, 19 | heading_one: 'Heading 1', 20 | heading_two: 'Heading 2', 21 | heading_three: 'Heading 3', 22 | block_quote: MISC_CONSTANTS.DROPDOWN_NORMAL, 23 | list_item: MISC_CONSTANTS.DROPDOWN_NORMAL, 24 | link: MISC_CONSTANTS.DROPDOWN_NORMAL, 25 | }; 26 | 27 | export const DROPDOWN_STYLE = { 28 | color: BUTTON_COLORS.SYMBOL_ACTIVE, 29 | alignSelf: 'center', 30 | width: '100px', 31 | }; 32 | 33 | export const DROPDOWN_STYLE_H1 = { 34 | fontSize: '25px', 35 | lineHeight: '23px', 36 | fontWeight: MISC_CONSTANTS.DROPDOWN_WEIGHT, 37 | color: MISC_CONSTANTS.DROPDOWN_COLOR, 38 | }; 39 | 40 | export const DROPDOWN_STYLE_H2 = { 41 | fontSize: '20px', 42 | lineHeight: '20px', 43 | fontWeight: MISC_CONSTANTS.DROPDOWN_WEIGHT, 44 | color: MISC_CONSTANTS.DROPDOWN_COLOR, 45 | }; 46 | 47 | export const DROPDOWN_STYLE_H3 = { 48 | fontSize: '16px', 49 | lineHeight: '16px', 50 | fontWeight: MISC_CONSTANTS.DROPDOWN_WEIGHT, 51 | color: MISC_CONSTANTS.DROPDOWN_COLOR, 52 | }; 53 | 54 | export const POPUP_STYLE = { 55 | borderRadius: '5px', 56 | backgroundColor: BUTTON_COLORS.TOOLTIP_BACKGROUND, 57 | color: BUTTON_COLORS.TOOLTIP, 58 | }; 59 | -------------------------------------------------------------------------------- /src/RichTextEditor/utilities/generateId.js: -------------------------------------------------------------------------------- 1 | // https://github.com/thlorenz/anchor-markdown-header/blob/87e4cca4618271e363f4af9697df0f73f23b3d3f/anchor-markdown-header.js#L20 2 | const generateId = element => element.children[0].text.replace(/ /g, '-') 3 | // escape codes 4 | .replace(/%([abcdef]|\d){2,2}/ig, '') 5 | // single chars that are removed 6 | .replace(/[\/?!:\[\]`.,()*"';{}+=<>~\$|#@&–—]/g, '') 7 | // CJK punctuations that are removed 8 | .replace(/[。？！，、；：“”【】（）〔〕［］﹃﹄“ ”‘’﹁﹂—…－～《》〈〉「」]/g, ''); 9 | 10 | export default generateId; 11 | -------------------------------------------------------------------------------- /src/RichTextEditor/utilities/hotkeys.js: -------------------------------------------------------------------------------- 1 | import { 2 | LINK, IMAGE, BLOCK_QUOTE, UL_LIST, OL_LIST, 3 | MARK_BOLD, MARK_ITALIC, MARK_CODE 4 | } from './schema'; 5 | 6 | const HOTKEYS = { 7 | 'mod+b': { 8 | type: 'mark', 9 | code: MARK_BOLD, 10 | }, 11 | 'mod+i': { 12 | type: 'mark', 13 | code: MARK_ITALIC, 14 | }, 15 | 'mod+shift+9': { 16 | type: 'mark', 17 | code: MARK_CODE, 18 | }, 19 | 'mod+shift+7': { 20 | type: 'block', 21 | code: OL_LIST, 22 | }, 23 | 'mod+shift+8': { 24 | type: 'block', 25 | code: UL_LIST, 26 | }, 27 | 'mod+shift+.': { 28 | type: 'block', 29 | code: BLOCK_QUOTE, 30 | }, 31 | 'mod+shift+g': { 32 | type: 'image', 33 | code: IMAGE, 34 | }, 35 | 'mod+z': { 36 | type: 'special', 37 | code: 'undo', 38 | }, 39 | 'mod+shift+z': { 40 | type: 'special', 41 | code: 'redo', 42 | }, 43 | 'mod+k': { 44 | type: 'link', 45 | code: LINK, 46 | } 47 | }; 48 | 49 | export const ENTER_LIST = { 50 | [OL_LIST]: true, 51 | [UL_LIST]: true, 52 | }; 53 | 54 | export const ENTER_BLOCK = { 55 | [BLOCK_QUOTE]: true, 56 | ...ENTER_LIST 57 | }; 58 | 59 | export const formattingHotKeys = ['mod+b', 'mod+i', 'mod+shift+7', 'mod+shift+8', 'mod+shift+9', 'mod+shift+.', 'mod+shift+g', 'mod+k']; 60 | 61 | export const ENTER = 'enter'; 62 | export const ENTER_SHIFT = 'shift+enter'; 63 | 64 | export default HOTKEYS; 65 | -------------------------------------------------------------------------------- /src/RichTextEditor/utilities/schema.js: -------------------------------------------------------------------------------- 1 | export const OL_LIST = 'ol_list'; 2 | export const UL_LIST = 'ul_list'; 3 | export const LIST_ITEM = 'list_item'; 4 | export const LIST_TYPES = [OL_LIST, UL_LIST]; 5 | 6 | export const BLOCK_QUOTE = 'block_quote'; 7 | export const PARAGRAPH = 'paragraph'; 8 | export const HTML_BLOCK = 'html_block'; 9 | export const CODE_BLOCK = 'code_block'; 10 | 11 | export const H1 = 'heading_one'; 12 | export const H2 = 'heading_two'; 13 | export const H3 = 'heading_three'; 14 | export const H4 = 'heading_four'; 15 | export const H5 = 'heading_five'; 16 | export const H6 = 'heading_six'; 17 | export const HEADINGS = [H1, H2, H3, H4, H5, H6]; 18 | 19 | export const MARK_BOLD = 'bold'; 20 | export const MARK_ITALIC = 'italic'; 21 | export const MARK_CODE = 'code'; 22 | export const MARK_HTML = 'html'; 23 | export const MARKS = [MARK_BOLD, MARK_ITALIC, MARK_CODE, MARK_HTML]; 24 | 25 | export const HR = 'horizontal_rule'; 26 | export const SOFTBREAK = 'softbreak'; 27 | export const LINEBREAK = 'linebreak'; 28 | export const LINK = 'link'; 29 | export const IMAGE = 'image'; 30 | export const HTML_INLINE = 'html_inline'; 31 | 32 | const INLINES = { 33 | [LINEBREAK]: true, 34 | [SOFTBREAK]: true, 35 | [HTML_INLINE]: true, 36 | [LINK]: true, 37 | [IMAGE]: true, 38 | }; 39 | const VOIDS = { 40 | [LINEBREAK]: true, 41 | [SOFTBREAK]: true, 42 | [IMAGE]: true, 43 | [HR]: true, 44 | }; 45 | 46 | /* eslint no-param-reassign: 0 */ 47 | const withSchema = (editor) => { 48 | const { isVoid, isInline } = editor; 49 | editor.isInline = element => (INLINES[element.type] || isInline(editor)); 50 | editor.isVoid = element => (VOIDS[element.type] || isVoid(editor)); 51 | 52 | return editor; 53 | }; 54 | 55 | export default withSchema; 56 | -------------------------------------------------------------------------------- /src/RichTextEditor/utilities/toolbarHelpers.js: -------------------------------------------------------------------------------- 1 | import { Node, Editor, Transforms } from 'slate'; 2 | import { 3 | LIST_ITEM, BLOCK_QUOTE, LIST_TYPES, PARAGRAPH 4 | } from './schema'; 5 | 6 | export const isBlockActive = (editor, format) => { 7 | const [match] = Editor.nodes(editor, { 8 | match: n => n.type === format, 9 | }); 10 | 11 | return !!match; 12 | }; 13 | 14 | export const isMarkActive = (editor, format) => { 15 | const marks = Editor.marks(editor); 16 | return marks ? marks[format] === true : false; 17 | }; 18 | 19 | export const toggleBlock = (editor, format) => { 20 | const isActive = isBlockActive(editor, format); 21 | const isList = input => LIST_TYPES.includes(input); 22 | const isQuote = input => input === BLOCK_QUOTE; 23 | const isListItem = input => input === LIST_ITEM; 24 | 25 | /* Clear selection of block types */ 26 | Transforms.unwrapNodes(editor, { match: n => isQuote(n.type), split: true }); 27 | Transforms.unwrapNodes(editor, { match: n => isListItem(n.type), split: true }); 28 | Transforms.unwrapNodes(editor, { match: n => LIST_TYPES.includes(n.type), split: true }); 29 | 30 | if (format === 'paragraph' || format.startsWith('heading')) { 31 | Transforms.setNodes(editor, { type: format }); 32 | return; 33 | } 34 | 35 | if (!isActive) { 36 | const formattedBlock = { 37 | type: format, children: [], data: (isQuote(format) ? {} : { tight: true }) 38 | }; 39 | Transforms.wrapNodes(editor, formattedBlock); 40 | 41 | if (isList(format)) { 42 | const listItemBlock = { type: LIST_ITEM, children: [], data: { tight: true } }; 43 | // eslint-disable-next-line no-restricted-syntax 44 | for (const [node, path] of Node.descendants( 45 | editor, 46 | { from: editor.selection.anchor.path, to: editor.selection.focus.path } 47 | )) { 48 | if (node.type === PARAGRAPH) { 49 | Transforms.wrapNodes(editor, listItemBlock, { at: path }); 50 | } 51 | } 52 | } 53 | } 54 | }; 55 | 56 | export const toggleMark = (editor, format) => { 57 | const isActive = isMarkActive(editor, format); 58 | 59 | if (isActive) { 60 | Editor.removeMark(editor, format); 61 | } else { 62 | Editor.addMark(editor, format, true); 63 | } 64 | }; 65 | 66 | export const toggleHistory = (editor, format) => { 67 | if (format === 'undo') { 68 | editor.undo(); 69 | } else { editor.redo(); } 70 | }; 71 | -------------------------------------------------------------------------------- /src/RichTextEditor/utilities/tooltipHelpers.js: -------------------------------------------------------------------------------- 1 | /* ************ INTERNAL METHODS *************** */ 2 | 3 | /* Methods for conversion to strings and further manipulation */ 4 | const capitalizeFirst = word => word.toString().charAt(0).toUpperCase(); 5 | 6 | const sliceWord = word => word.toString().slice(1); 7 | 8 | const firstTwoLetters = word => word.toString().slice(0, 2); 9 | 10 | 11 | /* Function to determine OS and MOD command of user */ 12 | export const MOD = () => { 13 | const { platform } = window.navigator; 14 | 15 | const macosPlatforms = { 16 | Macintosh: true, 17 | MacIntel: true, 18 | MacPPC: true, 19 | Mac68K: true 20 | }; 21 | 22 | if (macosPlatforms[platform]) return '⌘'; 23 | return 'Ctrl'; 24 | }; 25 | 26 | /* ************* EXTERNAL METHODS *************** */ 27 | 28 | /* Converts an input into a string, capitalizes the first letter, and returns string */ 29 | export const capitalizeWord = word => capitalizeFirst(word) + sliceWord(word); 30 | 31 | /* Checks the beginning of a block type to determine the string to return */ 32 | export const identifyBlock = (block) => { 33 | const typeBeginning = firstTwoLetters(block); 34 | if (typeBeginning === 'bl') return `Quote (${MOD()}+Shift+. )`; 35 | if (typeBeginning === 'ul') return `Bulleted List (${MOD()}+Shift+8)`; 36 | if (typeBeginning === 'ol') return `Numbered List (${MOD()}+Shift+7)`; 37 | return null; 38 | }; 39 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /*** src/styles.css ***/ 2 | #ap-markdown-editor .hr { 3 | overflow: visible; /* For IE */ 4 | padding: 0; 5 | border: none; 6 | border-top: medium double #333; 7 | color: #333; 8 | text-align: center; 9 | } 10 | 11 | #ap-markdown-editor a{ 12 | cursor: pointer; 13 | } 14 | 15 | #ap-markdown-editor .textarea { 16 | font-family: monospace; 17 | height: 100%; 18 | width: 100%; 19 | border: 0; 20 | resize: none; 21 | } 22 | 23 | #ap-markdown-editor .error { 24 | color: red; 25 | } 26 | 27 | #ap-markdown-editor .html_inline { 28 | color: rgb(0, 60, 255); 29 | } 30 | 31 | #ap-markdown-editor #slate-toolbar-wrapper-id { 32 | display: grid; 33 | grid-template-columns: 3% auto 3%; 34 | grid-template-rows: 100%; 35 | } 36 | 37 | a { 38 | cursor: pointer; 39 | } 40 | 41 | #ap-rich-text-editor { 42 | padding: 20px; 43 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /** * webpack.config.js ** */ 2 | const path = require('path'); 3 | const webpack = require('webpack'); 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | 6 | const htmlWebpackPlugin = new HtmlWebpackPlugin({ 7 | template: path.join(__dirname, 'examples/src/index.html'), 8 | filename: 'index.html', 9 | }); 10 | module.exports = { 11 | entry: path.join(__dirname, 'examples/src/index.js'), 12 | output: { 13 | path: path.join(__dirname, 'examples/dist'), 14 | filename: 'bundle.js', 15 | }, 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.(js|jsx)$/, 20 | use: 'babel-loader', 21 | exclude: /node_modules/, 22 | }, 23 | { 24 | test: /\.css$/, 25 | use: ['style-loader', 'css-loader'], 26 | }, 27 | { 28 | test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], 29 | loader: require.resolve('url-loader'), 30 | options: { 31 | limit: 10000, 32 | name: 'static/media/[name].[hash:8].[ext]', 33 | }, 34 | }, 35 | { 36 | test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/], 37 | loader: require.resolve('file-loader'), 38 | options: { 39 | name: 'static/media/[name].[hash:8].[ext]', 40 | }, 41 | }, 42 | ], 43 | }, 44 | node: { 45 | fs: 'empty' 46 | }, 47 | plugins: [ 48 | htmlWebpackPlugin, 49 | new webpack.IgnorePlugin(/jsdom$/) 50 | ], 51 | resolve: { 52 | extensions: ['.js', '.jsx'], 53 | }, 54 | devServer: { 55 | port: 3001, 56 | }, 57 | }; 58 | -------------------------------------------------------------------------------- /webpack.config.prod.js: -------------------------------------------------------------------------------- 1 | /** * webpack.config.js ** */ 2 | const path = require('path'); 3 | const webpack = require('webpack'); 4 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | 6 | const htmlWebpackPlugin = new HtmlWebpackPlugin({ 7 | template: path.join(__dirname, 'examples/src/index.html'), 8 | filename: 'examples/index.html', 9 | }); 10 | module.exports = { 11 | entry: path.join(__dirname, 'examples/src/index.js'), 12 | externals: { 13 | 'styled-components': { 14 | commonjs: 'styled-components', 15 | commonjs2: 'styled-components', 16 | amd: 'styled-components', 17 | }, 18 | }, 19 | output: { 20 | path: path.join(__dirname, 'examples/dist'), 21 | filename: 'bundle.js', 22 | }, 23 | module: { 24 | rules: [ 25 | { 26 | test: /\.(js|jsx)$/, 27 | use: 'babel-loader', 28 | exclude: /node_modules/, 29 | }, 30 | { 31 | test: /\.css$/, 32 | use: ['style-loader', 'css-loader'], 33 | }, 34 | { 35 | test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], 36 | loader: require.resolve('url-loader'), 37 | options: { 38 | limit: 10000, 39 | name: 'static/media/[name].[hash:8].[ext]', 40 | }, 41 | }, 42 | { 43 | test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/], 44 | loader: require.resolve('file-loader'), 45 | options: { 46 | name: 'static/media/[name].[hash:8].[ext]', 47 | }, 48 | }, 49 | ], 50 | }, 51 | node: { 52 | fs: 'empty' 53 | }, 54 | plugins: [htmlWebpackPlugin, 55 | new webpack.IgnorePlugin(/jsdom$/)], 56 | resolve: { 57 | extensions: ['.js', '.jsx'], 58 | }, 59 | devServer: { 60 | port: 3001, 61 | }, 62 | }; 63 | --------------------------------------------------------------------------------