Table of Contents
- MotorCortex-Code-Typing
- Intro / Features
- Getting Started
- Creating Incidents
- Adding Incidents in your clip
- Contributing
- License
- Sponsored by
MotorCortex-Code-Typing is the right plugin to make coding clips. It renders your clip as a code editor.
The Plugin exposes two Incidents in total:
- the CodeEditor Clip
- the WriteCode Incident
$ npm install --save @donkeyclip/motorcortex-code-typing
# OR
$ yarn add @donkeyclip/motorcortex-code-typing
import { loadPlugin } from "@donkeyclip/motorcortex";
import MCCodeTyping from "@donkeyclip/motorcortex-code-typing";
const CodeTypingPlugin = loadPlugin(MCCodeTyping);
The Clip is used to create a new Code Editor and the parameters it accepts a number of parameters:
const CodeEditor = new CodeTypingPlugin.Clip({
darkTheme: true,
lineNumbers: true,
readOnly: false
}, {
host: document.getElementById('clip-container'),
containerParams: { width: '800px', height: '800px' }
});
Name | Are | Values |
---|---|---|
darkTheme | set to true the Editor renders in dark mode, otherwise it renders in the default light theme (optional, defaults to false) | boolean |
lineNumbers | set to true if you want the editor to show line numbers (optional, defaults to false) | boolean |
readOnly | set to true if you want the editor to render on read only mode (optional, defaults to false) | boolean |
The WriteCode Incident is used to write code on a Code Editor
const CodeEditor = new CodeTypingPlugin.Clip({
darkTheme: true,
lineNumbers: true,
readOnly: false
}, {
host: document.getElementById('clip-container'),
containerParams: { width: '800px', height: '800px' }
});
const WriteSthg = new CodeTypingPlugin.WriteCode({
animatedAttrs: {
code: code
}
}, {
duration: 12000,
selector: "!#editor"
});
Name | Are | Values |
---|---|---|
code | the code which is going to be typed on the Code Editor | srting |
The selector should always be "!#editor".
CodeEditorIncident.addIncident(WriteCodeIncident, startTime);
In general, we follow the "fork-and-pull" Git workflow, so if you want to submit patches and additions you should follow the next steps:
- Fork the repo on GitHub
- Clone the project to your own machine
- Commit changes to your own branch
- Push your work back up to your fork
- Submit a Pull request so that we can review your changes