{"id":24625383,"url":"https://github.com/mo-movia/licit","last_synced_at":"2025-04-06T08:13:01.088Z","repository":{"id":37374299,"uuid":"296964937","full_name":"MO-Movia/licit","owner":"MO-Movia","description":"LICIT is a feature rich editor based on ProseMirror and an initial foundation of CZI code that was shared with the community.  It is React at the core, but there are examples of integrating this with Angular. There is a link in the Readme file to an Angular test app that embeds the editor component. ","archived":false,"fork":false,"pushed_at":"2024-10-29T12:55:51.000Z","size":20711,"stargazers_count":35,"open_issues_count":25,"forks_count":10,"subscribers_count":11,"default_branch":"main","last_synced_at":"2024-10-29T15:22:37.243Z","etag":null,"topics":["editor","gui","javascript","json","prosemirror","react","rechtexteditor","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MO-Movia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-19T22:57:43.000Z","updated_at":"2024-09-11T17:35:26.000Z","dependencies_parsed_at":"2024-02-01T15:58:26.844Z","dependency_job_id":"28194747-9264-4ff0-ae47-de1b62b98da6","html_url":"https://github.com/MO-Movia/licit","commit_stats":{"total_commits":1245,"total_committers":29,"mean_commits":42.93103448275862,"dds":"0.43614457831325304","last_synced_commit":"7be6908278aa13b1af0ef16816ab8ef27b007883"},"previous_names":[],"tags_count":60,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MO-Movia%2Flicit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MO-Movia%2Flicit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MO-Movia%2Flicit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MO-Movia%2Flicit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MO-Movia","download_url":"https://codeload.github.com/MO-Movia/licit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247451665,"owners_count":20940944,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","gui","javascript","json","prosemirror","react","rechtexteditor","wysiwyg-editor"],"created_at":"2025-01-25T04:33:32.358Z","updated_at":"2025-04-06T08:13:01.066Z","avatar_url":"https://github.com/MO-Movia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003ch1 align=\"center\"\u003eLicit Editor\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eWYSIWYG editor based on ProseMirror \u0026 React\u003c/strong\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  Includes significant text markup including size, face, color, line spacing, strikethrough, bold, italic, etc.; multi-level bullet/number lists; images with text wrapping and resizing; and a powerful table (with images and markup within table)\n\u003c/div\u003e\n\u0026nbsp;\n\u003cdiv align=\"center\"\u003e\n\n![Build Status](https://github.com/MO-Movia/licit/workflows/build/badge.svg?branch=main)\n![GitHub last commit](https://img.shields.io/github/last-commit/MO-Movia/licit)\n[![codecov](https://codecov.io/gh/MO-Movia/licit/branch/main/graph/badge.svg?token=33EHFUZOGL)](https://codecov.io/gh/MO-Movia/licit)\n![Website](https://img.shields.io/website?down_color=red\u0026down_message=Offline\u0026up_color=green\u0026up_message=Online\u0026url=http://www.greathints.com)\n\u003c!-- ![Dependencies](https://david-dm.org/MO-Movia/licit.svg) --\u003e\n![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://github.com/MO-Movia/licit/wiki\"\u003eWiki\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"http://greathints.com/licit\"\u003eDemo\n    \u003c/a\u003e\n    \u003cspan\u003e | \u003c/span\u003e\n    \u003ca href=\"https://prosemirror.net/\"\u003eBased on...\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\u003c/div\u003e\n\n## Getting Started\n\n### Getting repository\n\n```\ngit clone https://github.com/MO-Movia/licit.git\n```\n### Install Prerequisite\n```\nMake(0.8.1)\nPython(3.8.2)\n```\n\n### Install dependencies\n\n Pack [licit-ui-components](https://github.com/MO-Movia/licit-ui-components/tree/initial) and copy _modusoperandi-licit-ui-commands-0.0.1.tgz_ to the root folder.\n```\ncd licit\nnpm install\n```\n\nIn order to upload image work correctly, \"images\" folder is expected outside the root folder 'licit'.\n\n\n### Start the collaboration server\n```\nIn Windows\nTo build collab server:\npy build_collab_server.py\n\nTo run collab server:\npy run_collab_server.py\n\nIn MacOS/Linux\nTo build collab server:\npython build_collab_server.py\n\nTo run collab server:\npython run_collab_server.py\n```\n### Start the custom style server\n```\nIn Windows\nTo build customstyle server:\npy build_customstyle_server.py\n\nTo run customstyle server:\npy run_customstyle_server.py\n\nIn MacOS/Linux\nTo build customstyle server:\npython build_customstyle_server.py\n\nTo run customstyle server:\npython run_customstyle_server.py\n```\nTo save custom styles in server \"customstyles\" folder is expected outside the root folder 'licit'.\n\n### Start the image server for Upload image\n```\nIn Windows\npy run_image_server.py\n\nIn MacOS/Linux\npython run_image_server.py\n```\n### Start the style service for Custom Styles\n```\ngit clone https://github.com/MO-Movia/licit-style-service.git\nFollow the README.md file to run the service.\n\n```\n\n### Start the web server\n\n```\nIn Windows\npy run_web_server.py\n\nIn MacOS/Linux\npython run_web_server.py\n```\nTest http://localhost:3001/ from your browser.\n\n### Build the distribution files\n```\n# At the working directory `licit`\nnpm run build:dist\n```\n## Use Licit as a component\n\nFor using licit in your project you should follow these steps:\n\n To build the licit pack, run the below commands:\n```\n# At the working directory `licit`\nnpm pack\n```\n\nNow you will find a *modusoperandi-licit-0.0.2.tgz* file in the licit directory.\n\nAdd this *.tgz* file to your own angular project and install it using the below command:\n```\n# At your angular working directory\nnpm install ./modusoperandi-licit-0.0.2.tgz\n```\n\n**After this you can import licit component in your application like:**\n```\nimport { Licit } from '@modusoperandi/licit';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\n// To create multiple instances:\nReactDOM.render(\u003cLicit docID={1}/\u003e, document.getElementById('root'));\nReactDOM.render(\u003cLicit docID={1}/\u003e, document.getElementById('root2'));\nReactDOM.render(\u003cLicit docID={2}/\u003e, document.getElementById('root3'));\nReactDOM.render(\u003cLicit docID={3}/\u003e, document.getElementById('root4'));\n\n// OR\nReactDOM.render(React.createElement(Licit, {docID:1}), document.getElementById(\"root\"));\nReactDOM.render(React.createElement(Licit, {docID:2}), document.getElementById(\"root2\"));\n\n ```\n By default, the *collaboration* and the *prosemirror dev tool* are disabled for the editor.\n set  *docID* to *\"0\"* for disable the collaboration.\n User can enable the same using the below configuration:\n ```\n ReactDOM.render(React.createElement(Licit, {docID: 1, debug: true}), document.getElementById('root'));\n```\n**To use Custom run time in your component :**\n ```\n Use the below imports for access the image and style API\n\nimport type {ImageLike, StyleProps} from '@modusoperandi/licit';\nimport {POST, GET, DELETE, PATCH} from '@modusoperandi/licit';\nimport {setStyles} from '@modusoperandi/licit';\n```\n\nPlease refer *licit\\client\\index.js* for getting more detailed idea on passing properties and fires events.\n\n|Property Name| Description|Default Value|\n|--|--|--|\n| docID  |Id of the collaborative document. *docID* empty means collaboration disabled. Based on the value of *docID* decides the collaboration communication |\n| collabServiceURL|URL of the collaboration service.|\n| debug|Show/hide prosemirror dev tools|false\n| width|Width of the editor|100%\n| height|Height of the editor|100%\n| readOnly |To enable/disable editing mode|false\n| data |Document JSON/HTML data to be loaded into the editor|null\n| dataType |Document data type - JSON/HTML|JSON\n| disabled|To disable the editor|false\n| embedded|To disable/enable inline behavior of the editor|false\n| fitToContent|To disable/enable fit to content behavior of the editor|false\n| runtime|To pass runtime to the editor. No value means default EditorRuntime | Expects a post method '*saveimage?fn=*' in the server with input parameters *File name and File object*, and this post method parse the form data and return response in JSON format (*{id: string, height: \u003c height of the image\u003e, src: \u003crelative/full_path_of_the_image\u003e, width: \u003c width_of_the_image\u003e}*). Please refer *licit\\utils\\build_web_server.js* for '*saveimage*' method sample.To configure style service to licit expects methods to saveStyle(),getStyles(),renameStyle() and removeStyle(). Please refer *licit\\src\\client\\LicitRuntime.js* for getting more detailed idea.\n| plugins| Array of prosemirror plugin object to pass external prosemirror plugins to the editor. No value means no external plugins | Expects a method '*getEffectiveSchema*' in the prosemirror plugin object that returns new schema object which is the effective schema modified with the current editor schema, that is passed as the input parameter to this method. Also must follow a order for adding  the plugins in the plugin array. And the order is the licit-plugin-contrib-styles plugin and objectId plugin should be the last items in that pluigin array.The reason for this is: Style should be handled after all the other plugins handle their own rendering. And ObjectID is required for all artifacts.\n\n|Event Name| Description|Parameter|\n|--|--|--|\n|onChange | Fires after each significant change |\u003cul\u003e\u003cli\u003edata: document JSON\u003c/li\u003e\u003cli\u003eisEmpty: true when empty\u003c/li\u003e\u003cli\u003eview: prosemirror view\u003c/li\u003e\u003c/ul\u003e\n|onReady| Fires once when the editor is ready |licit reference\n\n|Method Name| Description|Parameter|\n|--|--|--|\n|setProps | Update properties of the editor using an editor instance |\u003cul\u003e\u003cli\u003eprops: Licit properties' object\u003c/li\u003e\u003c/ul\u003e\n|insertJSON | Insert node at the current cursor position |\u003cul\u003e\u003cli\u003ejson: Node\u003c/li\u003e\u003c/ul\u003e\n|gotoEnd | Return focus to the editor with cursor at end of document  |\u003c/li\u003e\u003c/ul\u003e\n\nTo set data to editor: \n\n\u003e function setData() { \tconst props = {};\n\u003e     Object.assign(props, this.props);\n\u003e     // here the *this.props* is the *ref* input from the onReadyCB(ref) (Please refer *licit\\client\\index.js* for onReadyCB(ref) method)\n\u003e \tprops.data = {\n\u003e \"type\":\"doc\",\"attrs\":{\"layout\":null,\"padding\":null,\"width\":null,\"counterFlags\":null},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"align\":null,\"color\":null,\"id\":null,\"indent\":null,\"lineSpacing\":null,\"paddingBottom\":null,\"paddingTop\":null},\"content\":[{\"type\":\"text\",\"text\":\"Hello\n\u003e World!!!\"}]}]};\n\u003e    this.setProps(props); }\n\nTo load the styles:\nEither in *angular.json*, add\n *\"styles\": [\n \"node_modules/@modusoperandi/licit/styles.css\",\n]*\nOR\nin the default global CSS file *src\\styles.scss*, add\n*@import  \"@modusoperandi/licit/styles.css\"*\n\n\nRun *npm start* to see the licit editor inside the angular application.\n\nNote: there is a nice Angular test app designed to test the component interface of licit here: https://github.com/melgish/licit-playground - which also allows you to load and save the JSON file.\n\n## Use it for your own project\n\nFor using licit in your project you should follow these steps:\n\nFor example (in an Angular app):\n\n```\n# At the working directory `licit`\nnpm run build:licit\n```\n\nNow you will find a new directory (*bin*) with *licit.bundle.js* file.\n\nAdd this *bin* folder to your own project and also include the *licit.bundle.js* file in the scripts array of *angular.json* file as follows:\n\n\"scripts\": [\n\"src/bin/licit.bundle.js\"\n]\n\nTo start the collaboration server, follow the steps below:\n\nRun the Collaborative server in licit/servers directory using following command:\n\n```\nnode run_licit_collab_server.bundle.js PORT='\u003cyourPort\u003e' IP='\u003cyourIP/Hostname\u003e'\n```\n\nNOTE: In case if you are hosting collab server in a different location or machine then you need to change the host name and port number in *licit\\src\\client\\CollabConnector.js* accordingly.\n```\nconst url = \u003cyourLocationProtocol\u003e + '\\/\\/' +\n\u003cyourIP/Hostname\u003e+ ':\u003cyourPort\u003e/docs/' +\ndocID;\n```\nRun *ng serve* to see the collaborative licit editor inside the angular application.\n\n**To deploy LICIT in a server:**\n```\n# At the working directory `licit`\nnpm install\nnpm run build:licit\n```\nNow you will find a *bin* directory, copy the files from bin to the server to run the *Licit* as a standalone application.\n\n**You can install licit using the commit hash to include in your own `package.json`.**\n\n\nFor install the latest commit on master branch:\n```\nnpm install --save \"MO-Movia/licit\"\n```\nFor install a specific commit:\n```\nnpm install --save \"MO-Movia/licit#3de185eaccdfd745bc567d5358cf3281472d8df8\"\n```\nYou may find the latest commit hash at https://github.com/MO-Movia/licit/commits/master\n\n## Windows Specific\n\nUse Git bash or Windows Power Shell to install build and run the project\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmo-movia%2Flicit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmo-movia%2Flicit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmo-movia%2Flicit/lists"}