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