MotorCortex-Code-Typing

Table of Contents

• MotorCortex-Code-Typing
  • Demo
• Intro / Features
• Getting Started
  • Installation
  • Importing and Loading
• Creating Incidents
  • CodeEditor Clip
  • WriteCode
• Adding Incidents in your clip
• Contributing
• License
• Sponsored by

Demo

Check it out here

Intro / Features

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

Getting Started

Installation

$ npm install --save @donkeyclip/motorcortex-code-typing
# OR
$ yarn add @donkeyclip/motorcortex-code-typing

Importing and loading

import { loadPlugin } from "@donkeyclip/motorcortex";
import MCCodeTyping from "@donkeyclip/motorcortex-code-typing";
const CodeTypingPlugin = loadPlugin(MCCodeTyping);

Creating Incidents

CodeEditor Clip

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' }
});

CodeEditor Clip Attrs

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

WriteCode

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"
});

WriteCode Attrs

| Name | Are | Values | | -------| :-------------------------------------------------------: | ------: | | code | the code which is going to be typed on the Code Editor | srting |

IMPORTANT

The selector should always be "!#editor".

Adding Incidents in your clip

CodeEditorIncident.addIncident(WriteCodeIncident, startTime);

Contributing

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:

1. Fork the repo on GitHub
2. Clone the project to your own machine
3. Commit changes to your own branch
4. Push your work back up to your fork
5. Submit a Pull request so that we can review your changes

License

MIT License

Sponsored by