Other Components

This page provides information about components that are not covered in any other chapter of the documentation.

Highlight Box

HighlightBox represents a highlight in CodeView. It is returned when you add a new highlight using the addHighlight method, or you can retrieve it using the getHighlightBoxes method. The following example demonstrates its usage.

<pre id="MyCodeView"><code>let x = 1;
let y = 2;

let result = x + y;

console.log("result: " + result);</code></pre>

import { CodeView } from "@jirkasa/code-box";

const codeView = new CodeView(document.getElementById("MyCodeView"));

const highlightBox = codeView.addHighlight("1");
highlightBox.setRange(4, 6);

let x = 1;
let y = 2;

let result = x + y;

console.log("result: " + result);

Methods

getStart

getStart(): number

Returns start line of highlight.

Returns

getEnd

getEnd(): number

Returns end line of highlight.

Returns

setRange

setRange(start: number, end: number = start): void

Sets new range for highlight.

Params

remove

remove(): void

Removes highlight.

Code View Memento

CodeViewMemento represents saved state of a CodeView. You can create a memento using the createMemento method and then apply it using the applyMemento method as demonstrated in the following example. This allows you to save the current state of the code view and easily restore it later.

<pre id="MyCodeView"><code>let x = 1;
let y = 2;

let result = x + y;

console.log("result: " + result);</code></pre>

import { CodeView } from "@jirkasa/code-box";

const codeView = new CodeView(document.getElementById("MyCodeView"));

// create memento (saved state of code view)
const codeViewMemento = codeView.createMemento();

// do some changes
codeView.addHighlight("4");

// apply memento (restore to the saved state of code view)
codeView.applyMemento(codeViewMemento);

let x = 1;
let y = 2;

let result = x + y;

console.log("result: " + result);

Alternatively, you can apply a memento by calling its apply method and passing the code view as a parameter.

const codeViewMemento = codeView.createMemento();

codeViewMemento.apply(codeView);

Code Box Memento

CodeBoxMemento represents saved state of a CodeBox. You can create a memento using the createMemento method and then apply it using the applyMemento method as demonstrated in the following example. This allows you to save the current state of the code box and easily restore it later.

<div id="MyCodeBox">
    <pre data-cb-name="addition" data-cb-active><code>let x = 1;
let y = 2;

console.log("result: " + (x + y));</code></pre>
    <pre data-cb-name="connecting strings"><code>let string1 = "This is";
let string2 = " string.";

console.log(string1 + string2);</code></pre>
</div>

import { TabCodeBox } from "@jirkasa/code-box";

const codeBox = new TabCodeBox(document.getElementById("MyCodeBox"), {
    lazyInit: false,
    svgSpritePath: "./img/icon-sprite.svg",
    svgSpriteIcons: {
        codeFile: "file",
        file: "file-2",
        download: "download"
    }
});

// create memento (saved state of code box)
const codeBoxMemento = codeBox.createMemento();

// do some changes
codeBox.removeCodeView("addition");

// apply memento (restore to the saved state of code box)
codeBox.applyMemento(codeBoxMemento);

let x = 1;
let y = 2;

console.log("result: " + (x + y));

let string1 = "This is";
let string2 = " string.";

console.log(string1 + string2);

Alternatively, you can apply a memento by calling its apply method and passing the code box as a parameter.

const codeBoxMemento = codeBox.createMemento();

codeBoxMemento.apply(codeBox);

Code Box Code View

CodeBoxCodeView represents a CodeView within a CodeBox. It internally uses a CodeView, retaining most of its methods while adding a few additional ones specific to CodeBox.

The following example demonstrates how you can obtain an instance of CodeBoxCodeView using the getCodeView method.

const codeView = codeBox.getCodeView("main.js");

Properties

CodeBoxCodeView has a few readonly properties. Do not change them when using plain JavaScript.

Methods

getIdentifier

getIdentifier(): string | null

Returns identifier of code view.

Returns

changeIdentifier

changeIdentifier(newIdentifier: string): boolean

Changes identifier of code view.

Params

Returns

setAsActive

setAsActive(): void

Sets code view as active (displays it in code box).

remove

remove(): void

Removes code view from code box.

reset

reset(): void

Resets code view to its initial state.

createMemento

createMemento(): CodeViewMemento

Creates memento (saved state of code view).

Returns

applyMemento

applyMemento(memento: CodeViewMemento): void

Applies memento (sets code view to the state defined by the provided memento).

Params

clone

clone(): CodeView

Creates a copy of code view. The copy reflects the state after initialization with the original options and does not include any changes made by subsequent method calls.

Returns

addHighlight

addHighlight(start: number, end: number = start): HighlightBox

Adds new highlight.

Params

Returns

removeHighlights

removeHighlights(start: number | null = null, end: number | null = start): void

Removes highlights based on provided range (all intersecting highlights are removed). If no parameters are provided, all highlights are removed.

Params

getHighlightBoxes

getHighlightBoxes(start: number | null = null, end: number | null = start): HighlightBox[]

Returns all highlight boxes (which represent highlights) in provided range. If no parameters are provided, all highlight boxes are returned.

Params

Returns

showGutter

showGutter(): void

Shows gutter (the area where line numbers appear).

hideGutter

hideGutter(): void

Hides gutter (the area where line numbers appear).

isGutterVisible

isGutterVisible(): boolean

Checks whether gutter (the area where line numbers appear) is visible.

Returns

showLineNumbers

showLineNumbers(): void

Shows line numbers.

hideLineNumbers

hideLineNumbers(): void

Hides line numbers.

areLineNumbersVisible

areLineNumbersVisible(): boolean

Checks whether line numbers are visible.

Returns

getCode

getCode(): string

Returns displayed code.

Returns

Tab Code Box Code View

TabCodeBoxCodeView is a type of CodeBoxCodeView used within a TabCodeBox. It includes additional methods to set and get the position of its code view button.

Methods

getButtonPosition

getButtonPosition(): number | null

Returns position of code view button.

Returns

setButtonPosition

setButtonPosition(position: number): boolean

Changes position of code view button by swapping it with different code view or file button.

Params

Returns

Project Code Box Code View

ProjectCodeBoxCodeView is a type of CodeBoxCodeView used within a ProjectCodeBox. It includes additional methods related to ProjectCodeBox.

Methods

getFolderPath

getFolderPath(): string | null

Returns path to folder in which the code view is located.

Returns

moveToFolder

moveToFolder(folderPath: string): boolean

Moves code view to folder. If folder does not exist, it is created. Package is not changed.

Params

Returns

getFileName

getFileName(): string | null

Returns file name of code view.

Returns

changeFileName

changeFileName(newName: string): boolean

Changes file name of code view.

Params

Returns

getPackage

getPackage(): string | null | undefined

Returns package of code view.

Returns

changePackage

changePackage(packageName: string | null, keepFolderPath: boolean): boolean

Changes package of code view.

Params

Returns

removePackage

removePackage(): void

Removes code view from package.

Code Box File

CodeBoxFile represents a file within a CodeBox. The following example demonstrates how you can obtain an instance of CodeBoxFile using the getFile method.

const file = codeBox.getFile("image.png");

Methods

getIdentifier

getIdentifier(): string | null

Returns identifier of file.

Returns

changeIdentifier

changeIdentifier(newIdentifier: string): boolean

Changes identifier of file.

Params

Returns

remove

remove(): void

Removes file from code box.

getDownloadLink

getDownloadLink(): string | null

Returns download link of file.

Returns

setDownloadLink

setDownloadLink(downloadLink: string | null): void

Changes download link of file or sets it as non-downloadable.

Params

Tab Code Box File

TabCodeBoxFile is a type of CodeBoxFile used within a TabCodeBox. It includes additional methods to set and get the position of its file button.

Methods

getButtonPosition

getButtonPosition(): number | null

Returns position of file button.

Returns

setButtonPosition

setButtonPosition(position: number): boolean

Changes position of file button by swapping it with different code view or file button.

Params

Returns

Project Code Box File

ProjectCodeBoxFile is a type of CodeBoxFile used within a ProjectCodeBox. It includes additional methods related to ProjectCodeBox.

Methods

getFolderPath

getFolderPath(): string | null

Returns path to folder in which the file is located.

Returns

moveToFolder

moveToFolder(folderPath: string): boolean

Moves file to folder. If folder does not exist, it is created. Package is not changed.

Params

Returns

getFileName

getFileName(): string | null

Returns name of file

Returns

changeFileName

changeFileName(newName: string): boolean

Changes name of file.

Params

Returns

getPackage

getPackage(): string | null | undefined

Returns package of file.

Returns

changePackage

changePackage(packageName: string | null, keepFolderPath: boolean): boolean

Changes package of file.

Params

Returns

removePackage

removePackage(): void

Removes file from package.

Code View Creator Entry

When you invoke the getCreatedCodeViews method of CodeViewCreator, it returns an array of CodeViewCreatorEntry objects. CodeViewCreatorEntry object has the following properties:

Code Box Creator Entry

When you invoke the getCreatedCodeBoxes method of CodeBoxCreator, it returns an array of CodeBoxCreatorEntry objects. CodeBoxCreatorEntry object has the following properties (type of codeBox property depends on specific type of creator):