Tools - Jirashi/Textacular GitHub Wiki

🛠️ Tools

Wiki page explaining all the tools and how to use them

:open_file_folder: File tools

New file

Use:
The new file tool creates a new file (as well as a new tab).

Functionality:
The function itself is pretty simple, it takes the parameter of (file) type. function newFile(type)

The actual function just calls the addTab function. addTab(config["defaultFileName"], type);

Configurability:
The "defaultFileName" key in the config file should be one of the 4 supported file types. txt, html, css or js.

Open file

Use:
The open file tool prompts a file upload window which you can then choose a file to open, (if the file type is supported).

Functionality:
The open file function uses a FileReader() which reads the file as text. Once the file is read, addTab is called with the name, content and type of the tab being the file's attributes.

Save file/Save file as...

Use:
Both the save and save as tools download the content of the current tab to the users computer.

Functionality:
The save function converts the content of the current tab into a blob. It then navigates the window to the object url of the blob.
The save as function opens a menu, once the "export" button is clicked, the save function is called.

Email file

Use:
The email file tool is used for emailing the content of the current tab.

Functionality:
The email file function is simple, first it prompts you to enter an email address. Once entered it will open a mail window with the recipient being the email you just entered, the subject being the file name and the body being the current tab's content

:scissors: Edit tools

These tools may not be supported on your browser

Undo/Redo

Use:
Undo or Redo your last action on the page.

Functionality:
Uses the Undo() and Redo() commands, which may not supported on some browsers. (Substitute with ctrl+z and ctrl+y)

Copy/Cut/Paste

Use:
Copy/Cut selection to clipboard. Paste selection to text editor.

Functionality:
Copy and Cut both use the Copy() and Cut() commands, which may not supported on some browsers. (Substitute with ctrl+c and ctrl+x)

Paste uses the navigator.clipboard.readText(). This is because when you press the paste button, your current selection is cleared. By using navigator.clipboard.readText() it can paste the same string multiple times. This tool may not supported on some browsers. (Substitute with ctrl+v)

Select all/Delete all

Use:
Select/delete all text in current text editor.

Functionality:
Select all uses textEditor.select();. Delete all sets the text editor value to "".

While it sets the text editor value, the tab data wont change unless you switch tabs. If you accidentally delete all, you can open up the console and copy the text from the tabs table.

:gear: Settings tools

Zoom in/out

Use:
Increase or decrease the text editor font size.

Functionality:
Increase/Decreases the text editor font size by 2px.

Preferences

Use:
Opens up the preferences menu.

Configurability:
The "lineNumsEnabled" and "tabsEnabled" located in the config file should be set to either true or false.

The "fontLibrary" table located in the config file holds all the fonts you can choose from. The format goes as follows:
Font name -> "Arial": -> Font family "Arial, Helvetica, sans-serif".

When adding fonts, make sure they actually exist! All the fonts listed are web safe, or have been imported through a link.

:eye: View tools

Theme

Use:
Change the theme or upload one.

Functionality:
Opens up the theme menu.

Configurability:
The "themeLibrary" table located in the config file holds all the themes you can choose from. The format goes as follows:
Theme name -> "default-light": [ Theme colors -> ["#a5a7a2", "#ffffff", "#f7f9fa", "#f3f3f3", "#373b3d", "#369ada"], Theme type -> "light"],

More info on themes can be found on the themes wiki page

HTML Output

Use:
Change the HTML Output visibility.

Help tools are self-explanatory and are therefore not included on this page.