Home

Welcome to the notnotepad wiki!

so... What is NotNotePad

lets take the idea of programming

code (text)=> code interpreter/compiler=> machine code (binary data)

now when trying to improve this process we can encounter a few problems like

1. any changes in the code syntax will require every user to update is interpreter and every program or library to update its code base, witch can result in mostly small or non-breaking changes every generation.
2. sometimes code syntax witch is easy to write can be harder to interpret.
3. for some people coding in general is not the best way to program especially for people in the creative area like designers.

that's why we have tools like:

• bable (code translator)

es6 + jsx=> raw js=> code interpreter

• wix (web builder)

visual editor=> html=> html renderer

• unreal engine blueprints

visual editor=> compiled data=> cpp interpreter

• google blockly

visual editor=> compiled code=> interpreter/compiler

those tools solve this problem by adding an additional layer to this proccess that act like some sort of code translators/generators

NotNotePad design to be a home for all kinds of code translators/generators as long as they can fit as a component in this model :

editor component=> editor data=> code=> interpreter/compiler

hello world

our next step would be to create an hello world editor component

lets start by registering the editor under "project-root/src/config/EditorsConfig.json"

and inside the JSON file under the Editors array we will need to add new editor object like so..

{
name:"helloworld",
logo:"world.svg", //this picture should be located under "project-root/public/media/editors/world.svg"
Languages:{// for each language you will need to add the following
   js:["javascript"], // "file-extension":["array-of-supported-languages-for-this-file-extension",...]
   // "sql": ["sql", "mysql", "pgsql"] would be an example for few languages using the same file extension
   // "handlebars": ["html"] and would be an example for language with different extension but fairly similar syntax
//but for now lets stay with only one language  
}
}

the next step would be to create our react component under "project-root/src/Editor/Code_Editors/helloWorld/helloworld.tsx"

import React from "react";
import CodeEditor from "../../CodeEditor";

export default class HelloWorldEditor extends CodeEditor {
  render() {
    return (
      <div>
        <input
          type="text"
          placeholder="enter you name"
          defaultValue={this.state.editorData}
          onChange={e => {
            const data = e.target.value;
            const code = `alert("hello ${data}")`;
            this.setState({ editorData: data, code: code }, () => {
              this.saveEditorDataFromState();
            });
          }}
        />
      </div>
    );
  }
}

now we will need to tell the editor how to open our comonent for that we will need to go to - "project-root/src/LayoutComponents/Editor/EditorLauncher.tsx" and add this code :

//import our component in the top of the file
import HelloWorldEditor from "../../Editor/Code_Editors/helloWorld/helloworld";

// and inside the render function under "switch (this.state.editor)" add this case to the switch
case "helloworld": {
          return (
            <HelloWorldEditor
              documentName={this.state.document}
              language={this.getEditorLanguage()}
            ></HelloWorldEditor>
          );
        }

now you done lets check out our component just create new file with .js extension and open it with