### Basic Highlight.js Setup

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/README.md

Demonstrates the minimal setup required to use Highlight.js on a web page. It involves linking the library and a stylesheet, then calling the `highlightAll()` function to process code within `<pre><code>` tags.

```html
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
```

--------------------------------

### Install Highlight.js NPM Package

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/README.md

Commands to install the Highlight.js library using either npm or yarn package managers. This makes the library available for use in Node.js projects or for bundling with tools like Webpack.

```bash
npm install highlight.js
```

```bash
yarn add highlight.js
```

--------------------------------

### Page Initialization and Resize Handling

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/message/viewSubmission.html

Handles the initial setup of the page, including setting the document domain, loading content on window load, and dynamically adjusting the height of the main content area on window resize. It also formats and displays submission data.

```javascript
try {
  var domain = getParameter("domain");
  if(domain) {
    document.domain = domain;
  }
} catch (e) {
  opener.WebSquare.exception.printStackTrace(e);
}

window.onload = function () {
  if (doInit) {
    setTimeout(doInit,300);
  }
};

window.onresize = function() {
  var height = (document.documentElement.clientHeight - 125);
  if( height < 200 ) {
    height = 200;
  }
  document.getElementById("main").style.height = height + "px";
};

function doInit() {
  var titleStr = "<img src='images/bullet_info.gif' style='vertical-align:middle; margin-right:5px' />";
  titleStr += "<b>"+opener.WebSquare.language.getMessage("E_viewSubmission_title")+"</b>";
  var height = (document.documentElement.clientHeight - 125);
  if( height < 200 ) {
    height = 200;
  }
  document.getElementById("main").style.height = height + "px";
  _safeInnerHTML(document.getElementById("title"), titleStr);
  update();
}
```

--------------------------------

### CKEditor Initialization with Export PDF Plugin

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/externalJS/editor4.22.1/plugins/exportpdf/tests/manual/wrongendpoint.html

Initializes CKEditor instances with custom configurations for the export PDF plugin. It demonstrates setting up plugins and service URLs for PDF generation.

```javascript
exportPdfUtils.initManualTest();
CKEDITOR.replace( 'editor1', exportPdfUtils.getDefaultConfig( 'manual', { extraPlugins: 'exportpdf', exportPdf_service: 'https://cksource.com' } ) );
```

```javascript
CKEDITOR.replace( 'editor2', exportPdfUtils.getDefaultConfig( 'manual', { removePlugins: 'notification', exportPdf_service: 'https://cksource.com' } ) );
```

--------------------------------

### Initialize Manual Test for Export PDF Utilities

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/externalJS/editor4.22.1/plugins/exportpdf/tests/manual/stylesheets.html

Initializes the manual testing utilities for the export PDF functionality. This function is typically called to set up the testing environment before running editor tests.

```javascript
exportPdfUtils.initManualTest();
```

--------------------------------

### Document Domain and Initialization Setup

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/message/debugMsg.html

This script snippet handles setting the document's domain based on a URL parameter and configures the window's onload event to call an `init` function after a short delay. It also sets up global event handlers for focus and blur.

```javascript
try {
  var domain = getParameter("domain");
  if(domain) {
    document.domain = domain;
  }
} catch (e) {
  opener.WebSquare.exception.printStackTrace(e);
}
window.onload = function () {
  if (init) {
    setTimeout(init,300);
  }
};
window.document.onclick=flagCheck;
window.onblur=flagCount;
var flag = 0;
function flagCount() {
  flag += 2;
}
function flagCheck() {
  flag = 10;
}
function callFocus() {
  if( flag++ < 6 ) {
    focus();
    window.setTimeout("callFocus();", 1);
  }
}
```

--------------------------------

### Log Viewer Initialization and Layout

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/message/logMsg.html

Handles the initial setup of the log viewer, including setting the document domain, making the title, and adjusting the layout based on window dimensions. It ensures the main log display area resizes correctly.

```javascript
var domain = getParameter("domain");
if(domain) {
  document.domain = domain;
}

window.onload = function () {
  if (doInit) {
    setTimeout(doInit, 300);
  }
};

window.onresize = function() {
  var height = (document.documentElement.clientHeight - 85);
  if( height < 200 ) {
    height = 200;
  }
  document.getElementById("main").style.height = height + "px";
};

function doInit() {
  makeTitle();
  init();
  var height = (document.documentElement.clientHeight - 85);
  if( height < 200 ) {
    height = 200;
  }
  document.getElementById("main").style.height = height + "px";
}
```

--------------------------------

### Initialize WebSquare 1.0 Application

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/debug.html

This snippet demonstrates the standard method for initializing a WebSquare 1.0 application. It ensures the application starts only after the entire page has loaded. The WebSquare library must be available in the global scope for `WebSquare.startApplication()` to function.

```javascript
window.onload = init;
function init(){
  WebSquare.startApplication();
}
```

--------------------------------

### Node.js Highlighting (All Languages)

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/README.md

Shows how to use Highlight.js in a Node.js environment by requiring the library and using highlightAuto to get formatted HTML output. It emphasizes using the '.value' property for the highlighted string.

```javascript
// require the highlight.js library, including all languages
const hljs = require('./highlight.js');
const highlightedCode = hljs.highlightAuto('<span>Hello World!</span>').value
```

--------------------------------

### Initialize Divarea CKEditor with Export PDF

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/externalJS/editor4.22.1/plugins/exportpdf/tests/manual/stylesheets.html

Configures and initializes a Divarea CKEditor instance for the element with ID 'editor2'. It leverages `exportPdfUtils.getDefaultConfig` to set up export PDF features, specifying Bootstrap CSS and 'divarea', 'exportpdf' plugins.

```javascript
CKEDITOR.replace( 'editor2', exportPdfUtils.getDefaultConfig( 'manual', {
    exportPdf_stylesheets: [
        'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
    ],
    extraPlugins: 'divarea,exportpdf',
    allowedContent: true
} ) );
```

--------------------------------

### ES6 Modules Highlighting (All Languages)

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/README.md

Provides an example of importing Highlight.js using ES6 modules, where the default import includes all languages. It suggests importing only necessary languages for better performance.

```javascript
import hljs from 'highlight.js';
```

--------------------------------

### Initialize Classic CKEditor with Export PDF

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/externalJS/editor4.22.1/plugins/exportpdf/tests/manual/stylesheets.html

Configures and initializes a classic CKEditor instance for the element with ID 'editor1'. It uses `exportPdfUtils.getDefaultConfig` to apply common settings, including Bootstrap CSS for stylesheets and the 'wysiwygarea', 'exportpdf' plugins.

```javascript
CKEDITOR.replace( 'editor1', exportPdfUtils.getDefaultConfig( 'manual', {
    exportPdf_stylesheets: [
        'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
    ],
    extraPlugins: 'wysiwygarea,exportpdf',
    allowedContent: true
} ) );
```

--------------------------------

### WebSquare File Upload Component API

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/full.html

Documentation for the _cm_udc_fileMultiUpload component, covering its methods for managing file uploads, including setting options, starting uploads, and retrieving file status. It also details parameters and return values for each method.

```APIDOC
Component: _cm_udc_fileMultiUpload

Properties:
  - fileGrpSeq: Sequence number for file group management.
  - filter: File filter setting (e.g., "*.jpg,*.png,*.gif"). Empty string means all files (*.*).
  - id: Component identifier.
  - maxFileCount: Maximum number of files that can be uploaded.
  - maxFileSize: Size of individual files to upload (must not exceed websquare.xml's maxUploadSize).
  - style: Styling description.
  - subDir: Subdirectory path for saving files. If not set, files are saved in websquare.xml's baseDir.
  - totalFileSize: Total size of files to upload.

Events:
  - onFileUploadDone(isSuccess): Event triggered upon completion of file upload. 'isSuccess' (boolean) indicates if any file failed to upload (returns false if at least one file failed).

Methods:
  - getUpdatedFile(): Returns updated file information.
    Returns:
      - option (string): File upload options.

  - isModified(): Checks if there are files to add or delete.
    Returns:
      - status (boolean): File modification status (true: modified files exist, false: no modified files).

  - setDataSeq(dataSeq):
    Sets the data sequence and displays previously uploaded files.
    Parameters:
      - dataSeq (string, required): Data sequence number.

  - setFileSelectingButtonDisabled(status):
    Controls the state of the file selection button.
    Parameters:
      - status (boolean, required): Button state (true: enabled, false: disabled).

  - setFileUpload(option):
    Sets file upload options.
    Parameters:
      - option (string, required): File upload options.
    Example:
      // Initial configuration options for attached file upload module
      // - option.maxFileCount: Maximum number of attached files that can be uploaded
      // - option.totalFileSize: Total size of attached files that can be uploaded (individual file size is set by the server framework)
      // - option.fileGrpSeq: File group ID (set to "" for new registration screens, or existing file group ID for modification screens)
      var option = {
          maxFileCount : 3,
          totalFileSize : 209715200,
          policy : "templates",
          fileGrpSeq : "23",
          filter : "*.jpg,*.png,*.gif"
      };
      // Initialize attached file upload module
      // - fileUploadFrame: File Upload WFrame object
      // - option: File Upload option information
      com.setFileUpload(option);

  - startFileUpload(): Executes the file upload.

  - undoFileUpload(dataSeq):
    Reverts the file add & delete status.
    Parameters:
      - dataSeq (string, required): Data sequence number.
```

--------------------------------

### Initialize CKEditor with ExportPDF Plugin

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/externalJS/editor4.22.1/plugins/exportpdf/tests/manual/integrations/easyimage.html

This snippet demonstrates how to initialize CKEditor with the 'exportpdf' and 'easyimage' plugins. It configures CKEditor with default settings, including upload URLs, and sets up an event listener to capture the export PDF token.

```javascript
exportPdfUtils.initManualTest();
var editor = CKEDITOR.replace( 'editor', exportPdfUtils.getDefaultConfig( 'manual', { extraPlugins: 'easyimage,exportpdf',
    cloudServices_uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/',
    cloudServices_tokenUrl: 'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt'
} ) );
editor.on( 'instanceReady', function() {
    if ( !CKEDITOR.config.exportPdf_tokenUrl ) {
        bender.ignore();
    }
} );
editor.on( 'exportPdf', function( evt ) {
    var value = CKEDITOR.document.findOne( '#tokenValue' );
    value.setHtml( evt.data.token );
}, null, null, 17 );
```

--------------------------------

### Initialize Inline CKEditor with Export PDF

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/externalJS/editor4.22.1/plugins/exportpdf/tests/manual/stylesheets.html

Configures and initializes an Inline CKEditor instance for the element with ID 'editor3'. This setup includes Bootstrap CSS for styling and the 'floatingspace', 'exportpdf' plugins via `exportPdfUtils.getDefaultConfig`.

```javascript
CKEDITOR.inline( 'editor3', exportPdfUtils.getDefaultConfig( 'manual', {
    exportPdf_stylesheets: [
        'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
    ],
    extraPlugins: 'floatingspace,exportpdf',
    allowedContent: true
} ) );
```

--------------------------------

### Build Tool Hotfix: Installation Prevention

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/CHANGES.md

A hotfix was released that prevented highlight.js from installing. This indicates a critical issue that was resolved to allow proper installation.

```build-tool
🔥 Hot fix that was preventing highlight.js from installing.
```

--------------------------------

### Install Export to PDF Plugin via npm

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/externalJS/editor4.22.1/plugins/exportpdf/README.md

Provides the command to install the CKEditor 4 Export to PDF plugin using npm, a package manager for Node.js.

```bash
npm i ckeditor4-plugin-exportpdf
```

--------------------------------

### File Upload Initialization (doInit)

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/uiplugin/grid/upload/advancedMultiUpload.html

Handles the initialization process for file uploads, including setting up domain, resizing windows, parsing upload configurations from the opener window, and retrieving language-specific messages. It configures various upload parameters and event listeners.

```javascript
var osName = "";
var domain = "";
var processMsg = "";
var maxFileSize = -1;
var vappend;
var useModalDisable = "";
var useMaxByteLength = "";
var delim = "";
var uploadType;
var dataListStatus;
var columnIds;
var gridID;
var dataList;
var wframeId;
var callbackFunction = "";
var scopeId = "";
var loadingMode = "";
var multiIndex = 0;
var Upload_ignore_spaces = "";
var Upload_include_spaces = "";
var Upload_advanced = "";
var Upload_include = "";
var Upload_not_include = "";
var Upload_fill_hidden = "";
var Upload_sheet_no = "";
var Upload_starting_row = "";
var Upload_starting_col = "";
var Upload_header = "";
var Upload_footer = "";
var Upload_file = "";
var Upload_file_header = "";
var Upload_file_choose = "";
var Upload_file_span = "";
var Upload_pwd = "";
var Upload_msg2 = "";
var Upload_msg3 = "";
var Upload_msg4 = "";
var Upload_msg5 = "";
var Upload_msg8 = "";
var Upload_msg9 = "";
var Upload_msg10 = "";
var Upload_msg11 = "";
var Upload_msg12 = "";
var Upload_msg13 = "";
var Upload_msg14 = "";
var Upload_msg15 = "";
var Upload_msg16 = "";
var Upload_msg17 = "";
var Grid_warning9 = "";

window.onload = doInit;
window.onbeforeunload = doFinish;

function doInit() {
    var uploadInfo;
    try {
        domain = getParameter("domain");
        if( domain ) {
            document.domain = domain;
        }
        if(navigator.userAgent.indexOf("Windows") != -1) {
            osName = "window";
        } else if(navigator.userAgent.indexOf("Macintosh") != -1) {
            osName = "mac";
        }
        var sizeInfo = crossBrowserSize();
        window.resizeTo( sizeInfo.width, sizeInfo.height );
        multi = getParameter("multi");
        document.__uploadForm__.multi.value = multi;
        uploadInfo = opener.JSON.parse( opener.WebSquare._excelMultiInfo );
        if (uploadInfo.postMsg && uploadInfo.postMsg == "true") {
            if (window.addEventListener) {
                window.addEventListener("message", receiveMessage, false);
            } else {
                if (window.attachEvent) {
                    window.attachEvent("onmessage", receiveMessage);
                }
            }
        }
        if(uploadInfo.useModalDisable == "true") {
            opener.WebSquare.layer.showModal();
            useModalDisable = "true";
        }
        vappend = uploadInfo.append;
        var actionUrl = uploadInfo.action;
        processMsg = opener.WebSquare.text.BASE64URLDecoder(uploadInfo.processMsg);
        delim = uploadInfo.delim;
        dataListStatus = uploadInfo.status;
        uploadType = uploadInfo.uploadType;
        columnIds = uploadInfo.columnIds;
        gridID = uploadInfo.gridID;
        dataList = uploadInfo.dataList;
        wframeId = uploadInfo.wframeId;
        callbackFunction = uploadInfo.callbackFunction;
        scopeId = uploadInfo.scopeId;
        loadingMode = uploadInfo.loadingMode;
        Upload_ignore_spaces = opener.WebSquare.language.getMessage( "Upload_ignore_spaces" ) || "Ignore blank spaces";
        Upload_include_spaces = opener.WebSquare.language.getMessage( "Upload_include_spaces" ) || "Include blank spaces";
        Upload_advanced = opener.WebSquare.language.getMessage( "Upload_advanced" ) || "Advanced";
        Upload_hidden_values = opener.WebSquare.language.getMessage( "Upload_hidden_values" ) || "Hidden values";
        Upload_include = opener.WebSquare.language.getMessage( "Upload_include" ) || "Include";
        Upload_not_include = opener.WebSquare.language.getMessage( "Upload_not_include" ) || "Not include";
        Upload_fill_hidden = opener.WebSquare.language.getMessage( "Upload_fill_hidden" ) || "Fill Hidden";
        Upload_sheet_no = opener.WebSquare.language.getMessage( "Upload_sheet_no" ) || "Sheet No";
        Upload_starting_row = opener.WebSquare.language.getMessage( "Upload_starting_row" ) || "Start row";
        Upload_starting_col = opener.WebSquare.language.getMessage( "Upload_starting_col" ) || "Start col";
        Upload_header = opener.WebSquare.language.getMessage( "Upload_header" ) || "Header";
        Upload_footer = opener.WebSquare.language.getMessage( "Upload_footer" ) || "Footer";
        Upload_file = opener.WebSquare.language.getMessage( "Upload_file" ) || "File Upload";
        Upload_file_header = opener.WebSquare.language.getMessage( "Upload_file_header" ) || "File Upload";
        Upload_file_choose = opener.WebSquare.language.getMessage( "Upload_file_choose" ) || "Choose File";
        Upload_file_span = opener.WebSquare.language.getMessage( "Upload_file_span" ) || "File Span";
        Upload_pwd = opener.WebSquare.language.getMessage( "Upload_pwd" ) || "Password";
        Upload_msg2 = opener.WebSquare.language.getMessage( "Upload_msg2" ) || "";
        Upload_msg3 = opener.WebSquare.language.getMessage( "Upload_msg3" ) || "";
        Upload_msg4 = opener.WebSquare.language.getMessage( "Upload_msg4" ) || "";
        Upload_msg5 = opener.WebSquare.language.getMessage( "Upload_msg5" ) || "";
        Upload_msg8 = opener.WebSquare.language.getMessage( "Upload_msg8" ) || "";
        Upload_msg9 = opener.WebSquare.language.getMessage( "Upload_msg9" ) || "";
        Upload_msg10 = opener.WebSquare.language.getMessage( "Upload_msg10" ) || "";
        Upload_msg11 = opener.WebSquare.language.getMessage( "Upload_msg11" ) || "";
        Upload_msg12 = opener.WebSquare.language.getMessage( "Upload_msg12" ) || "";
        Upload_msg13 = opener.WebSquare.language.getMessage( "Upload_msg13" ) || "";
        Upload_msg14 = opener.WebSquare.language.getMessage( "Upload_msg14" ) || "";
        Upload_msg15 = opener.WebSquare.language.getMessage( "Upload_msg15" ) || "";
        Upload_msg16 = opener.WebSquare.language.getMessage( "Upload_msg16" ) || "";
        Upload_msg17 = opener.WebSquare.language.getMessage( "Upload_msg17" ) || "";
        Grid_warning9 = opener.WebSquare.language.getMessage( "Grid_warning9" ) || "";
    } catch (e) {
        opener.WebSquare.exception.printStackTrace(e);
    }
}
```

--------------------------------

### Fix: `endWithParent` in `starts`

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/CHANGES.md

Ensures that `endWithParent` works correctly when used inside `starts`. This fix addresses a specific scenario in parsing logic where nested structures might not be terminated properly.

```logic
fix: `endWithParent` inside `starts` now always works (#2201)
```

--------------------------------

### JavaScript Set Timeout Example

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/message/debugMsg.html

Demonstrates setting a timeout to execute a function after a specified delay. This is a common pattern for asynchronous operations in JavaScript.

```javascript
title1"), strTitle); window.setTimeout("callFocus();", 1); }
```

--------------------------------

### Page Initialization (doInit)

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/uiplugin/grid/upload/fileUpload.html

Initializes the page by parsing URL parameters for domain, header, column information, action URLs, and delimiters. It then populates form fields and adjusts window size for Safari.

```javascript
function doInit() {
  try {
    domain = getParameter("domain");
    if(domain) {
      document.domain = domain;
    }
  } catch (e) {
    opener.WebSquare.exception.printStackTrace(e);
  }
  // header, append, hidden, columnNum, hiddenColumns, action
  vheader = getParameter("header");
  vappend = getParameter("append");
  vhidden = getParameter("hidden");
  vcolumnNum = getParameter("columnNum");
  vhiddenColumns = getParameter("hiddenColumns");
  vheaderRows = getParameter("headerRows");
  actionUrl = getParameter("action");
  delim = getParameter("delim");
  gridID = getParameter("gridID");
  fillHidden = getParameter("fillHidden");
  gridStartRow = getParameter("gridStartRow");
  expressionColumns = getParameter("expressionColumns");
  type = getParameter("type");
  document.getElementById("header").value = vheader;
  document.getElementById("columnNum").value = vcolumnNum;
  document.getElementById("hiddenColumns").value = vhiddenColumns;
  document.getElementById("headerRows").value = vheaderRows;
  document.getElementById("hidden").value = vhidden;
  document.getElementById("delim").value = delim;
  document.getElementById("fillHidden").value = fillHidden;
  document.getElementById("gridStartRow").value = gridStartRow;
  document.getElementById("expressionColumns").value = expressionColumns;
  document.getElementById("domain").value = domain;
  with( document.__uploadForm__ ) {
    action = actionUrl;
  }
  if(isSafari) {
    setTimeout(function() {
      var bottomMargin = parseInt(document.height - document.documentElement.offsetHeight, 10) * -1||0;
      if( bottomMargin != 0 ) {
        self.resizeBy(0, bottomMargin);
      }
    }, 1);
  }
}
```

--------------------------------

### WebSquare UI Initialization and Resizing

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/message/viewCollection.html

Handles the initialization of the WebSquare UI, including setting the page title and populating data collection dropdowns. It also manages the dynamic resizing of the main content area based on the browser window height.

```javascript
function _safeInnerHTML(elem, str) {
  try {
    if (!elem || typeof elem.textContent !== "string") {
      return;
    }
    if (typeof str !== "string") {
      str = "";
    }
    if (str.indexOf("<") >= 0) {
      elem.textContent = "";
      var pattern1 = /<\s*script/ig;
      var pattern2 = /\s*\/\s*script\s*> /ig;
      var safeElem = "wq-safescr";
      str = str.replace(pattern1, "<" + safeElem).replace(pattern2, "/" + safeElem + ">");
      if (location.hostname !== window.document.domain) {
        var tempDiv = document.createElement("div");
        tempDiv.innerHTML = str;
        while (tempDiv.firstChild) {
          elem.appendChild(tempDiv.firstChild);
        }
      } else {
        var parser = new DOMParser();
        var bodyContent = parser.parseFromString(str, "text/html").body;
        for (var i = 0; i < bodyContent.childNodes.length; i++) {
          var node = bodyContent.childNodes[i];
          if (node.nodeType !== 1 || node.tagName.toUpperCase() !== "SCRIPT") {
            elem.appendChild(node.cloneNode(true));
          }
        }
      }
    } else {
      elem.textContent = str;
    }
  } catch (e) {
    opener.WebSquare.exception.printStackTrace(e);
  }
}

try {
  var domain = getParameter("domain");
  if(domain) {
    document.domain = domain;
  }
} catch (e) {
  opener.WebSquare.exception.printStackTrace(e);
}

window.onload = function () {
  if (doInit) {
    setTimeout(doInit,300);
  }
};

window.onresize = function() {
  var height = (document.documentElement.clientHeight - 135);
  if( height < 200 ) {
    height = 200;
  }
  document.getElementById("main").style.height = height + "px";
};

function doInit() {
  var titleStr = "<img src='images/bullet_info.gif' style='vertical-align:middle; margin-right:5px' />";
  titleStr += "<b>"+opener.WebSquare.language.getMessage("E_viewCollection_title")+"</b>";
  var height = (document.documentElement.clientHeight - 135);
  if( height < 200 ) {
    height = 200;
  }
  document.getElementById("main").style.height = height + "px";
  _safeInnerHTML(document.getElementById("title"), titleStr);
  var scopeStr = getParameter("scope");
  var scopeComp = null;
  if(scopeStr) {
    scopeComp = opener.WebSquare.idCache[scopeStr];
  }
  var comp = document.getElementById( "collection");
  for( var i in opener.WebSquare.DataCollection.comp ) {
    var collections = opener.WebSquare.DataCollection.comp[i];
    if( collections.initializeType ) {
      if( collections.initializeType == "dataList" || collections.initializeType == "dataMap" || collections.initializeType == "linkedDataList" ) {
        var realId = collections.id;
        if(scopeComp != null) {
          if(collections.scope_obj !== scopeComp ) {
            continue;
          }
          if (collections.options._empty) {
            continue;
          }
          realId = collections.org_id || collections.id;
        } else if(collections.scope_obj) {
          continue;
        }
        var op = new Option();
        op.value = collections.id;
        op.text = realId;
        comp.options.add(op);
      }
    }
  }
}
```

--------------------------------

### Build Tool Hotfix: Reverted CLI

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/CHANGES.md

A hotfix was applied to revert the highlight.js CLI build tool. This was necessary because the CLI tool was causing installation issues.

```build-tool
🔥 Hot fix: reverted hljs cli build tool, as it was causing issues with install.
```

--------------------------------

### JavaScript for WebSquare Device Preview Initialization

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/devicePreview.html

Initializes the WebSquare device preview by retrieving the w2xPath and desired dimensions from URL parameters. It dynamically sets the size of the preview container and the iframe, then loads the specified WebSquare application. It also includes logic to append device size information and handle window resize events.

```JavaScript
window.onload = init;

var websquareEntryPoint = "";
var webSquareIFrame;
var panelTable;
var width = 0;
var height = 0;

function init() {
  var w2xPath = WebSquare.net.getParameter("w2xPath");
  width = parseInt(WebSquare.net.getParameter("width"), 10) || 0;
  height = parseInt(WebSquare.net.getParameter("height"), 10) || 0;

  if (!width) width = 1024;
  if (!height) height = 768;
  if (width < 300) width = 300;
  if (height < 150) height = 150;

  websquareEntryPoint = "/websquare/websquare.html?w2xPath=" + w2xPath;
  webSquareIFrame = document.getElementById("websquareFrame");
  panelTable = document.getElementById("panelTable");

  var resizeObject = {};
  if (width) resizeObject.width = (width + 108) + "";
  if (height) resizeObject.height = (height + 133) + "";

  panelTable.style.width = panelTable.offsetWidth + "px";
  panelTable.style.height = panelTable.offsetHeight + "px";

  WebSquare.style.animate(panelTable, resizeObject, {
    key: webSquareIFrame.id + "_resizeAnimation",
    easing: "ease-out",
    duration: 1000,
    complete: function() {
      webSquareIFrame.style.width = parseInt(width, 10) + "px";
      webSquareIFrame.style.height = parseInt(height, 10) + "px";
      webSquareIFrame.src = websquareEntryPoint;
      appendDeviectSize(width, height);
    }
  });
}

function appendDeviectSize(width, height) {
  var element = document.createElement("div");
  var deviceImage = document.getElementById("deviceImage");
  var top = WebSquare.style.getAbsoluteTop(deviceImage) + 33;
  var limitRight = webSquareIFrame.offsetLeft + webSquareIFrame.offsetWidth;
  var left = limitRight - 120;

  element.innerHTML = "(" + width + "px * " + height + "px" + ")";
  element.style.position = "absolute";
  element.id = "deviceTitle";
  element.style.top = top + "px";
  element.style.width = "120px";
  element.style.left = left + "px";
  element.style.fontSize = "7pt";
  element.style.fontWeight = "bold";
  element.style.color = "#535353";
  document.body.appendChild(element);
}

var resizeTimer;
window.onresize = function() {
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    var deviceTitle = document.getElementById("deviceTitle");
    if (deviceTitle) deviceTitle.parentElement.removeChild(deviceTitle);
    appendDeviectSize(width, height);
  }, 100);
};

```

--------------------------------

### Swift Numeric Literals and Keywords

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/CHANGES.md

The Swift grammar has been updated to match numeric literals per the language reference. Additionally, it now correctly handles keywords starting with `#` and the `@main` attribute.

```swift
// Example of Swift numeric literals and keywords
let decimal = 100
let hex = 0xFF
let float = 3.14
let scientific = 1.2e3

#warning("This is a warning")
@main
struct MyProgram {
    static func main() {
        print("Hello, world!")
    }
}
```

--------------------------------

### Initialize and Display Source Code

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/message/viewSource.html

Handles the initialization of the source code display, including setting the page title, dynamically adjusting the main content area height, fetching source code using WebSquare utilities, and managing the display format (preformatted or normal). It also includes logic for toggling source highlighting.

```javascript
function _safeInnerHTML(elem, str) { try { if (!elem || typeof elem.textContent !== "string") { return; } if (typeof str !== "string") { str = ""; } if (str.indexOf("<") >= 0) { elem.textContent = ""; var pattern1 = /<\s*script/ig; var pattern2 = /\s*\/\s*script\s*>/ig; var safeElem = "wq-safescr"; str = str.replace(pattern1, "<" + safeElem).replace(pattern2, "/" + safeElem + ">"); if (location.hostname !== window.document.domain) { var tempDiv = document.createElement("div"); tempDiv.innerHTML = str; while (tempDiv.firstChild) { elem.appendChild(tempDiv.firstChild); } } else { var parser = new DOMParser(); var bodyContent = parser.parseFromString(str, "text/html").body; for (var i = 0; i < bodyContent.childNodes.length; i++) { var node = bodyContent.childNodes[i]; if (node.nodeType !== 1 || node.tagName.toUpperCase() !== "SCRIPT") { elem.appendChild(node.cloneNode(true)); } } } } else { elem.textContent = str; } } catch (e) { opener.WebSquare.exception.printStackTrace(e); } }
try { var domain = getParameter("domain"); if(domain) { document.domain = domain; } } catch (e) { opener.WebSquare.exception.printStackTrace(e); }
window.onload = function () { if (doInit) { setTimeout(doInit,300); } };
window.onresize = function() { var height = (document.documentElement.clientHeight - 95); //-title, sub if( height < 200 ) { height = 200; } document.getElementById("main").style.height = height + "px"; };
async function doInit() { var height = (document.documentElement.clientHeight - 95); //-title, sub if( height < 200 ) { height = 200; } document.getElementById("main").style.height = height + "px"; 
_safeInnerHTML(document.getElementById("title"), "<img src='images/bullet_info.gif' style='vertical-align:middle; margin-right:5px' /><b>" + opener.WebSquare.language.getMessage( "E_viewSource_title" ) + "</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color='#000'><input type='checkbox' id='highlight' onclick='reloadSource()'> <label for='highlight'>SourceHighlight</label></font>");
var str = await opener.WebSquare.util.getSource('text', getParameter("scope"));
document.getElementById("main").style.whiteSpace="pre";
if( document.getElementById("main").innerText ) { document.getElementById("main").innerText = str; } else { document.getElementById("main").textContent = str; }
}

async function reloadSource() {
  if( document.getElementById("highlight").checked ) {
    var str = await opener.WebSquare.util.getSource(undefined, getParameter("scope"));
    document.getElementById("main").style.whiteSpace="normal";
    _safeInnerHTML(document.getElementById("main"), str);
  } else {
    var str = await opener.WebSquare.util.getSource('text', getParameter("scope"));
    document.getElementById("main").style.whiteSpace="pre";
    if( document.getElementById("main").innerText ) { document.getElementById("main").innerText = str; } else { document.getElementById("main").textContent = str; }
  }
}
```

--------------------------------

### JavaScript: Instance Display and Window Resizing

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/message/viewInstance.html

Manages the initialization and dynamic resizing of the instance display area. It sets the height of the main content based on the viewport and handles the display of instance text, including pre-formatted or highlighted source code. It relies on the 'WebSquare' framework for language messages and instance data retrieval.

```javascript
function _safeInnerHTML(elem, str) { try { if (!elem || typeof elem.textContent !== "string") { return; } if (typeof str !== "string") { str = ""; } if (str.indexOf("<") >= 0) { elem.textContent = ""; var pattern1 = /<\s*script/ig; var pattern2 = /\s*\/\s*script\s*>/ig; var safeElem = "wq-safescr"; str = str.replace(pattern1, "<" + safeElem).replace(pattern2, "/" + safeElem + ">"); if (location.hostname !== window.document.domain) { var tempDiv = document.createElement("div"); tempDiv.innerHTML = str; while (tempDiv.firstChild) { elem.appendChild(tempDiv.firstChild); } } else { var parser = new DOMParser(); var bodyContent = parser.parseFromString(str, "text/html").body; for (var i = 0; i < bodyContent.childNodes.length; i++) { var node = bodyContent.childNodes[i]; if (node.nodeType !== 1 || node.tagName.toUpperCase() !== "SCRIPT") { elem.appendChild(node.cloneNode(true)); } } } } else { elem.textContent = str; } } catch (e) { opener.WebSquare.exception.printStackTrace(e); } }
try { var domain = getParameter("domain"); if(domain) { document.domain = domain; } } catch (e) { opener.WebSquare.exception.printStackTrace(e); }
window.onload = function () { if (doInit) { setTimeout(doInit,300); } };
window.onresize = function() { var height = (document.documentElement.clientHeight - 95); //-title, sub if( height < 200 ) { height = 200; } document.getElementById("main").style.height = height + "px"; };
function doInit() { var height = (document.documentElement.clientHeight - 95); //-title, sub if( height < 200 ) { height = 200; } document.getElementById("main").style.height = height + "px"; 
_safeInnerHTML(document.getElementById("title"), "<img src='images/bullet_info.gif' style='vertical-align:middle; margin-right:5px' /><b>" + opener.WebSquare.language.getMessage( "E_viewInstance_title" ) + "</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color='#000'><input type='checkbox' id='highlight' onclick='reloadInstance()'> <label for='highlight'>SourceHighlight</label></font>");
var str = opener.WebSquare.util.getInstance('text');
document.getElementById("main").style.whiteSpace="pre";
if( document.getElementById("main").innerText ) { document.getElementById("main").innerText = str; } else { document.getElementById("main").textContent = str; }
}
function reloadInstance() { if( document.getElementById("highlight").checked ) { var str = opener.WebSquare.util.getInstance(); document.getElementById("main").style.whiteSpace="normal"; 
_safeInnerHTML(document.getElementById("main"), str);
} else { var str = opener.WebSquare.util.getInstance('text'); document.getElementById("main").style.whiteSpace="pre"; if( document.getElementById("main").innerText ) { document.getElementById("main").innerText = str; } else { document.getElementById("main").textContent = str; }
}
}
```

--------------------------------

### Parser Engine: Callbacks for Mode Begin/End

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/CHANGES.md

Adds `on:begin` and `on:end` callbacks for modes, enabling custom logic to be executed when a specific parsing mode starts or finishes. This allows for more dynamic parsing behavior.

```javascript
(enh) Added `on:begin` callback for modes (#2261)
```

```javascript
(enh) Added `on:end` callback for modes (#2261)
```

--------------------------------

### Get Text Node Value Utility

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/uiplugin/grid/upload/advancedMultiUpload.html

A helper function to extract the text content from a DOM element. It iterates through the element's child nodes and concatenates the values of all text nodes found.

```javascript
function getTextNodeValue(element) {
  var returnValue = null;
  var retValue = "";
  for (var child = element.firstChild; child != null; child = child.nextSibling) {
    if (child.nodeType == 3) {
      retValue += child.nodeValue;
    }
  }
  if (retValue != "") {
    returnValue = retValue;
  }
  return returnValue;
}
```

--------------------------------

### Build Highlight.js with Almond (r.js)

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/README.md

Command to build Highlight.js for Almond using the r.js optimizer. This process requires the r.js tool and specifies the module name and path for the build output.

```bash
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js
```

--------------------------------

### Build Highlight.js for Node.js (CLI)

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/README.md

Command to build a Node.js-specific package of Highlight.js from source using the build script. This is for server-side usage or integration into Node.js build processes.

```bash
node tools/build.js -t node
```

--------------------------------

### Highlighting Custom HTML Elements (JS & CSS)

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/README.md

Provides examples for highlighting code blocks that do not use the standard <pre><code> structure, such as divs. It includes JavaScript to select and highlight these blocks and CSS to preserve line breaks.

```javascript
// first, find all the div.code blocks
document.querySelectorAll('div.code').forEach(block => {
  // then highlight each
  hljs.highlightBlock(block);
});
```

```css
div.code {
  white-space: pre;
}
```

--------------------------------

### Build Highlight.js for Browser (CLI)

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/README.md

Command to build a browser-specific package of Highlight.js from source using the build script. The ':common' argument specifies a common build configuration.

```bash
node tools/build.js -t browser :common
```

--------------------------------

### Loading Indicator Initialization and Management

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/message/processMsg.html

Initializes the loading indicator UI, sets up button visibility and text based on language settings, and manages a color-changing effect for the loading message. It also handles abort and hide triggers for the process.

```JavaScript
function init(){
    try {
        var prsMsg = parent.WebSquare.layer.processMsg;
        _safeInnerHTML(document.getElementById("processMsgLayer"), prsMsg);
        var abortBtn = document.getElementById("abortButton");
        var hideBtn = document.getElementById("hideButton");
        abortBtn.style.display = "none";
        hideBtn.style.display = "none";
        var abortBtnMsg = parent.WebSquare.language.getMessage("Window_close") || "Close";
        var hideBtnMsg = parent.WebSquare.language.getMessage("Window_cancel") || "Cancel";
        abortBtn.value = abortBtnMsg;
        hideBtn.value = hideBtnMsg;
        if( window.processKey ) {
            clearInterval( window.processKey );
        }
        window.processKey = setInterval( function(){
            setColor()
        } , 500 );
        var hideTrigger = parent.WebSquare.layer.hideTrigger;
        if(hideTrigger === "true"){
            hideBtn.style.display = "block";
            hideBtn.onclick = function(){
                parent.WebSquare.layer.hideProcessMessage();
            }
        }
        // WEF-125
        var abortTrigger = parent.WebSquare.layer.abortTrigger;
        if(abortTrigger === "true"){
            abortBtn.style.display = "block";
            abortBtn.onclick = function(){
                var t_submissionIDQueue = [];
                for(var i = 0;i < parent.WebSquare.layer.submissionIDQueue.length;i++){
                    t_submissionIDQueue.push(parent.WebSquare.layer.submissionIDQueue[i]);
                }
                for(var i = 0;i < t_submissionIDQueue.length;i++){
                    parent.WebSquare.ModelUtil.abort(t_submissionIDQueue[i]);
                }
            };
        }
    } catch(e) {
        parent.WebSquare && parent.WebSquare.exception && parent.WebSquare.exception.printStackTrace(e, null , this);
    }
}
window.onload = init;
```

--------------------------------

### Add Properties File Support

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/CHANGES.md

Introduces syntax highlighting for .properties files, commonly used for configuration in Java applications. This improves the readability of property files.

```.properties
New language: .properties by [bostko] and [Egor Rogov]
```

--------------------------------

### Include Highlight.js via CDN (jsdelivr)

Source: https://github.com/inswave/wrm-public/blob/main/WebSquare Docs/docs/highlight/README.md

HTML snippet to include Highlight.js and its CSS from the jsdelivr CDN. It demonstrates linking the main library, a default stylesheet, and an optional language file.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/languages/go.min.js"></script>
```

--------------------------------

### Grid Data and Style Retrieval

Source: https://github.com/inswave/wrm-public/blob/main/WebContent/websquare/_websquare_/uiplugin/grid/upload/csvfileUpload.html

Retrieves and sets grid-related information such as header rows, body rows, start row, and grid style (XML or JSON format). It accesses elements from an opener window's grid component.

```javascript
document.getElementById("headerRows").value = vheaderRows;
var el = opener.WebSquare.Elem.api.getElementsByTagName(opener[gridID].element, "w2:gBody");
var rows =opener.WebSquare.Elem.api.getElementsByTagName(el[0],"w2:row");
var myrows = rows.length;
document.getElementById("bodyRows").value = myrows;
document.getElementById("gridStartRow").value = gridStartRow;
//document.getElementById("gridStartCol").value = gridStartCol;
//document.getElementById("gridEndCol").value = gridEndCol;
var elemType = opener[gridID].element._elementType;
var gridStyle = "";
if (elemType === "json") {
    gridStyle = opener.WebSquare.xmljs.json2xml(opener[gridID].element._element, { "changeKey" : { "w2:select" : "w2:column" } });
} else {
    gridStyle = opener.WebSquare.xml.noNameSpaceSerialize(opener[gridID].element._element);
}
document.getElementById("gridStyle").value = gridStyle;
document.getElementById("expression").value = expression;
document.getElementById("optionParam").value = optionParam;
document.getElementById("columnOrder").value = columnOrder;
document.getElementById("useXHR").value = useXHR;
document.getElementById("filePath").value = filePath;
document.getElementById("useDialog").value = useDialog;
document.getElementById("msaName").value = msaName;
document.getElementById("trim").value = trimFlag;
with( document.__uploadForm__ ) {
    action = actionUrl;
}
```