karan101292 · muditgoel135 · May 30, 2026 · Jun 1, 2026 · Jun 2, 2026 · Jun 3, 2026
diff --git a/README.md b/README.md
@@ -1,18 +1,27 @@
-## Mathquill based WUSIWYG editor
+## MathQuill based WYSIWYG editor
 
-> MathQuill is an awesome formula editor. We have put some effort and made WUSIWUG editor on top of that.
+> MathQuill is an awesome formula editor. We have put some effort and made a WYSIWYG editor on top of that.
 
 ## What is this?
-> This is a javascript library that provides you a simple math editor that you can easily integrate to your webpage.
+> This is a javascript library that provides you a simple math editor that you can easily integrate to your webpage. It supports multi-line, word-processor-style editing — press Enter to add a new line. See [Multi-line editing](#multi-line-editing).
 
 ## Dependencies
 > - [jQuery](https://jquery.com/download/)
 - [MathQuill](https://github.com/mathquill/mathquill)
 
+> ⚠️ **`lib/mathquill.min.js` is a customized build.** Its bracket `reflow()` has
+> been patched so delimiters auto-size to their content (see
+> [Tall expressions & auto-sizing brackets](#tall-expressions--auto-sizing-brackets)).
+> Do **not** replace it with a stock MathQuill download, or that behavior reverts.
+
 ## Getting Started
 Download this package and extract files to your project lib folder.
 
-Include required JS and CSS files to your webpage.
+Include the required JS and CSS files on your webpage. Load `config.js`
+(the toolbar/keyboard configuration — see
+[Configuration files](#configuration-files)) **before** `matheditor.js`. No web
+server is required: because the config is loaded via a `<script>` tag rather than
+fetched, the editor works even when `index.html` is opened directly from `file://`.
 ```
 <html>
 <head>
@@ -21,6 +30,7 @@ Include required JS and CSS files to your webpage.
 
 <script src="./path/to/jquery.js"></script>
 <script src="./path/to/mathquill.min.js"></script>
+<script src="./path/to/config.js"></script>
 <script src="./path/to/matheditor.js"></script>
 </head>
 <body>
@@ -54,12 +64,94 @@ mathEditor.setTemplate('floating-toolbar');
 
 mathEditor.getLatex();
 // It will return letex for input formula.
+// For a multi-line editor, lines are joined with "\\" (the LaTeX newline).
 
 mathEditor.setLatex('\\frac{1}{2}');
 // It will set letex in input area.
-// It accepts any latex string.
+// It accepts any latex string. A "\\"-joined string is split back into lines.
+
+mathEditor.getLines();
+// Returns an array with the latex of each line, e.g. ['x+1', 'y-2'].
+// This is the lossless way to read a multi-line editor.
+
+mathEditor.getValue();
+// Same as getLatex().
+
+mathEditor.getPrintableValue();
+// Returns the latex wrapped for rendering. Single line -> "$$...$$".
+// Multiple lines -> "$$\begin{array}{l} line1 \\ line2 ... \end{array}$$".
 ```
 
+## Methods
+Method | Description
+------ | -----------
+`new MathEditor(id)` | Create an editor in the element with the given `id`.
+`getLatex()` / `getValue()` | Return the content as LaTeX. Multiple lines are joined with `\\` (the LaTeX newline); a single line is returned unchanged.
+`getLines()` | Return an array with the LaTeX of each line, e.g. `['x+1', 'y-2']` — the lossless way to read multi-line content.
+`getPrintableValue()` | Return the LaTeX wrapped for rendering: `"$$...$$"` for one line, `"$$\begin{array}{l} ... \end{array}$$"` for several.
+`setLatex(latex)` | Set the content from a LaTeX string. A `\\`-joined string is split back into lines.
+`addButtons(keys)` | Set the toolbar buttons to the given array of button keys (keys come from `button_meta` in `config.js`).
+`removeButtons(keys)` | Remove the given button keys from the toolbar.
+`styleMe(options)` | Set colors and dimensions — see [Options](#options).
+`setTemplate('floating-toolbar')` | Switch the toolbar to a floating layout.
+`noKeyboard()` | Remove the on-screen (virtual) keyboard.
+
+The line separator used by `getLatex`/`setLatex` is also exposed as the static
+`MathEditor.LINE_SEP` (`"\\"`).
+
+## Multi-line editing
+The editor behaves like a word processor and supports multiple lines:
+
+- Press **Enter** to start a new line. Content to the right of the cursor moves
+  down to the new line (the line is split at the cursor).
+- Navigation is unchanged within a line, and now also crosses between lines:
+  - **Up / Down** move to the line above / below.
+  - **Left** at the start of a line jumps to the end of the previous line;
+    **Right** at the end of a line jumps to the start of the next line.
+  - **Backspace** at the start of a line merges it into the previous line.
+- Lines are shown as one continuous document — there is no border between
+  lines, and the whole editor sits inside a single outer box.
+
+Read and write multi-line content with `getLines()` (an array, recommended),
+or with `getLatex()` / `setLatex()` which join and split lines on `"\\"`. The
+delimiter is exposed as `MathEditor.LINE_SEP` if you need it directly. For a
+single line, all of these return exactly what they did before.
+
+## Tall expressions & auto-sizing brackets
+The editor is sized to fit whatever you type, so tall formulas stay fully visible:
+
+- A line **grows vertically** to contain tall content (stacked fractions, big
+  operators, large brackets) — there is no inner vertical scrollbar and nothing is
+  clipped. A very long *single-line* formula scrolls **horizontally** instead.
+- Brackets (`(`, `[`, `{`, `⟨`, `|`, …) **auto-size to their content**. When you
+  nest them, each level grows by a fixed amount and stays **vertically centered** on
+  its content, so deeply nested expressions render as an even, symmetric shape
+  rather than ballooning in size.
+
+This is implemented by a patched bracket `reflow()` in the customized
+`lib/mathquill.min.js`: it measures each delimiter and reserves its real height as
+layout, then sizes it to *content height + a constant margin* and centers it. The
+matching CSS lives in `lib/matheditor.css` (the `.mq-root-block` overflow rules —
+`overflow-x: auto` for horizontal scroll, `overflow-y: hidden` so the contained
+content never triggers a stray scrollbar). Keep both in mind if you ever upgrade
+MathQuill.
+
+## Configuration files
+The toolbar and virtual keyboard are defined in **`lib/config.js`**, which must be
+loaded (via a `<script>` tag) before `matheditor.js`. It declares four globals:
+
+Global | Purpose
+------ | -------
+`button_meta` | Definition of every toolbar button: `latex` (or `cmd` for bracket commands) inserted on click, `icon` rendered as the button face, optional `moveto`/`movefor` (cursor keystrokes applied after insert), and `tab` (which tab it belongs to).
+`ME_DEFAULT_TOOLBAR_BUTTONS` | The ordered list of button keys shown by default.
+`ME_DEFAULT_TOOLBAR_TABS` | The tab names (`tab: 1` maps to the first name, etc.).
+`keyboard_keys` | The on-screen (mobile) keyboard layout: `letters` and `numbers` arrays of keys, each with `value`, `type` (`write` / `keystroke` / `custom`), `display`, `class`, and `new_line`.
+
+Edit `config.js` to add, remove, restyle, or re-order buttons and keys without
+touching `matheditor.js`. A button's `tab` number must have a corresponding entry
+in `ME_DEFAULT_TOOLBAR_TABS`. Because the config is loaded as a script (not fetched),
+the editor works from `file://` with no web server.
+
 ## Options
 ### styleMe()
 Attribute | Type | Default | Description

diff --git a/contributors.txt b/contributors.txt
@@ -1 +1,2 @@
 Karan Bhutwala
+Mudit Goel
diff --git a/index.html b/index.html
@@ -1,30 +1,23 @@
+<!DOCTYPE html>
 <html>
+
 <head>
-<link href="lib/mathquill.css" rel="stylesheet">
-<link href="lib/matheditor.css" rel="stylesheet">
+	<link href="lib/mathquill.css" rel="stylesheet">
+	<link href="lib/matheditor.css" rel="stylesheet">
 </head>
-<body style="background:#F6F4F4;overflow:hidden">
-  <div id="answer"></div>
-  <br>
-  <br>
-  <br>
-  <br>
-  <div id="answer1"></div>
 
+<body style="background:#F6F4F4; overflow:auto;">
+	<div id="answer"></div>
 </body>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="lib/mathquill.min.js"></script>
+<script src="lib/config.js"></script>
 <script src="lib/matheditor.js"></script>
 <script type="text/javascript">
-  var me = new MathEditor('answer');
-  var me1 = new MathEditor('answer1');
-  // me.removeButtons(['fraction']);
-
-
-  me1.setTemplate('floating-toolbar');
-  me.setTemplate('floating-toolbar',300,300);
-
+	var me = new MathEditor('answer');
+	// me.removeButtons(['fraction']);
+	// me.setTemplate('floating-toolbar');
 </script>
 
 </html>