VisualEditor

rangefix is a workaround for known bugs in various browser implementations of Range.prototype.getClientRects and Range.prototype.getBoundingClientRect.

Use it if you need to support:

• Chrome <= 54: Selections spanning multiple nodes return rectangles for all parents of the endContainer.
• Chrome 55: Images wrapped in a node return no rectangle when selected across.
• Safari: Similar to Chrome <= 54, triggered near block node edges or programmatically near inline nodes.
• Firefox: Similar to Chrome <= 54, triggered near inline node edges.
• IE <= 10: Incorrect rectangle scaling when using browser zoom.
• Chrome/Firefox: Bounding rectangles failing to cover all individual rectangles when a selection spans two lines (including spaces or text on the next line).

Note: There are no known issues in Chrome >= 56, Edge, and IE >= 11. In these browsers, rangefix will fall through to native behavior.

For very large files (e.g., > 100K lines), it is recommended to perform the diff calculation on a Python server to avoid browser performance issues. Because jsdifflib's API matches Python's difflib.SequenceMatcher exactly, you can compute the opcodes in Python and send them to the client.

Server-side (Python) requirement: Your backend should use Python's difflib.SequenceMatcher to generate opcodes and return a JSON object containing:

• baseTextLines: The original lines.
• newTextLines: The new lines.
• opcodes: The result of SequenceMatcher(a, b).get_opcodes().
• baseTextName: Title for the base text.
• newTextName: Title for the new text.

Client-side (JavaScript) requirement: Once the JSON data is received, pass it directly into diffview.buildView().

// Example Python backend logic (conceptual)
@jsonify
def diff (self, baseText, newText, baseTextName="Base Text", newTextName="New Text"):
    opcodes = SequenceMatcher(isjunk, baseText, newText).get_opcodes()
    return dict(baseTextLines=baseText, newTextLines=newText, opcodes=opcodes,
                baseTextName=baseTextName, newTextName=newTextName)

// Example Client-side consumption
// Assuming 'data' is the JSON response from the server
// data = { baseTextLines: [...], newTextLines: [...], opcodes: [...], ... }
// 
// $(

jQuery.i18n supports two primary JSON-based localization formats:

1. Per-language files (Recommended)

Create a folder (e.g., i18n/) containing one JSON file per locale named after its ISO 639 language code (e.g., en.json, fr.json). This is best for scalability and collaboration.

2. Single message file

For smaller applications, use one JSON file where top-level keys are language codes. Values can be either an object of messages or a string pointing to an external file path.

Metadata and Keys

• @metadata: A special top-level key used to store non-message data like authors, last-updated, or locale.
• Message Keys: It is recommended to use a namespace prefix (e.g., appname-title) and use lowercase words separated by hyphens.

// Example: Single file format with external path reference
{
	"@metadata": { "locale": "en" },
	"en": {
		"appname-title": "Example Application"
	},
	"ml": "path/to/ml.json"
}

To perform a diff entirely in the browser, follow these steps:

1. Convert your input strings into arrays of lines using difflib.stringAsLines().
2. Create a new difflib.SequenceMatcher instance passing the base and new line arrays.
3. Call .get_opcodes() on the matcher instance to retrieve a list of 3-tuples describing the changes.
4. Use diffview.buildView() to generate the visual DOM elements for the diff.

diffview.buildView() accepts a configuration object with the following keys:

• baseTextLines: Array of lines from the original text.
• newTextLines: Array of lines from the modified text.
• opcodes: The list of opcodes generated by SequenceMatcher.
• baseTextName: String for the display title of the base text.
• newTextName: String for the display title of the new text.
• contextSize: Number of lines of context to show around changes.
• viewType: Integer determining the view mode (e.g., 1 for inline, 0 for side-by-side).

function diffUsingJS() {
    // 1. Prepare lines
    var base = difflib.stringAsLines($("baseText").value);
    var newtxt = difflib.stringAsLines($("newText").value);

    // 2. Create SequenceMatcher
    var sm = new difflib.SequenceMatcher(base, newtxt);

    // 3. Get opcodes
    var opcodes = sm.get_opcodes();

    // 4. Build and append the view
    var diffoutputdiv = $("diffoutput");
    diffoutputdiv.appendChild(diffview.buildView({
        baseTextLines: base,
        newTextLines: newtxt,
        opcodes: opcodes,
        baseTextName: "Base Text",
        newTextName: "New Text",
        contextSize: null,
        viewType: 1 // inline
    }));
}