ten in HTML and Javascript. Mass Edit has a user inter- face for editing text in the web browser, and also offers an. API allowing web application developers to ...
Mass Edit: Simultaneous Editing for the Web Robert C. Miller, David F. Huynh, Nicole Bieber, Greg Little MIT CSAIL Cambridge, MA 02139 USA {rcm,dfhuynh,nbieber,glittle}@mit.edu
ABSTRACT
Simultaneous editing is a technique for repetitive text editing in which a user controls multiple cursors to edit many lines at the same time. We present a new technique for simultaneous editing that uses clustering to automatically classify text lines by their structure, so that different editing can be done on different kinds of lines. Mass Edit is an implementation of this technique for the web browser, written in HTML and Javascript. Mass Edit has a user interface for editing text in the web browser, and also offers an API allowing web application developers to incorporate it as a widget. We demonstrate the API by connecting it to Google Spreadsheets, so that a range of cells can be edited simultaneously. ACM Classification: H5.2 [Information interfaces and presentation]: User Interfaces. - Graphical user interfaces. General terms: Design, Algorithms, Human Factors. Keywords: text editing, pattern matching, simultaneous
editing.
editing tasks, where exactly the same editing operations must be applied to each record. But it performs poorly when the records vary, as in a list of names where some are written “John Smith” and others as “Smith, John” or “J. Smith”. Often, lines that the user wants to edit, such as names, are interspersed with lines that shouldn’t be touched, such as phone numbers, delimiters, or just blank lines. Previous approaches to simultaneous editing left it to the user to separate the wheat from the chaff, so to speak, so that different records would be handled differently. This paper introduces a new technique for simultaneous editing that uses clustering to automatically classify records by their structure. Simultaneous editing is then applied one cluster at a time, so that different editing can be done on different clusters, and outliers stand out as singleton clusters. We have implemented this technique in Mass Edit, a web application written in HTML/Javascript that runs in modern, standards-compliant web browsers, including Firefox, Safari, and Opera. Figure 1 shows Mass Edit in action.
INTRODUCTION
Text editing is full of small repetitive tasks, such as reformatting phone numbers, abbreviating or rearranging names of people, and reformatting lists. Users have a rich basket of tools for automating tasks like these, including find-andreplace, keyboard macros, and scripting. A powerful technique in this basket is simultaneous editing [6], which allows the user to edit with multiple cursors at the same time. Simultaneous editing uses a set of regions in the text file, called the records. Records might be lines, paragraphs, or a more specific pattern. In simultaneous editing mode, whenever the user makes a selection in one record using the mouse or keyboard, the system responds by making an equivalent selection in all other records. Editing operations – such as typing, deleting, and cut-andpaste – affect all records simultaneously, as if the user had applied the operations to each record individually. Simultaneous editing is very effective for homogeneous
Figure 1: Mass Edit editing a list of names. The original list (leftmost column) is split into clusters (other columns) which can be edited all at once.
One interface to the web application is a standalone interface which allows users to paste lines of text from any application and simultaneously edit those lines. The application also offers a Javascript API that other web developers can use to embed Mass Edit in their web applications. As demonstrations, we have embedded it in Google Spreadsheets and in Potluck [3], a data-mashup tool we developed. The contributions of this paper are a new technique that combines multiple-cursor simultaneous editing with clustering, and a simple, fast Javascript implementation of the technique that runs in current web browsers and can be integrated into web applications.
RELATED WORK
Another approach to the problem of repetitive text editing is programming by demonstration (PBD). In PBD, the user demonstrates one or more examples of the transformation in a text editor, and the system generalizes this demonstration into a program that can be applied to the rest of the examples. PBD systems for text editing have included TELS [8], Eager [1], DEED [2], and SmartEDIT [4]. The system that most closely resembles Mass Edit is probably Visual Awk [5]. Visual Awk allows a user to create awklike file transformers interactively. Like awk, Visual Awk’s basic structure consists of lines and words. When the user selects one or more words in a line, the system highlights the words at the same position in all other lines. For other kinds of selections, however, the user must select the appropriate tool: e.g., Cutter selects by character offset, and Matcher selects matches to a regular expression. In contrast, Mass Edit allows selections anywhere, and uses standard editing commands like cut and paste. We have previously used clustering in the context of find and replace [7]. Pattern matches are organized into clusters based on similarity of structure and similarity of context, allowing the user to examine and replace whole clusters at a time while considering outliers individually. Mass Edit’s clustering was inspired by this technique, but uses a different, much simpler algorithm, and applies it to simultaneous editing instead of find and replace.
Figure 2: Edits to any line of a cluster are automatically generalized to other lines.
A toolbar provides other common editing operations that need to be generalized differently for different lines. To Uppercase and To Lowercase perform alphabetic case conversion. The Fill command is used to align the cursors for all lines in the column. It duplicates the character just before the cursor until every line’s cursor has the same offset. Figure 3 shows the effect of applying the Fill command to insert a row of dots. Once Fill has aligned the cursors, dots may be added or removed by typing or deleting. The Fill command can be used with any characters, including spaces and tabs.
USER INTERFACE
The starting interface is a text box where the user pastes the lines to be edited. Clicking the Mass Edit button enters simultaneous editing mode. In simultaneous editing mode, the lines of text are clustered by structural similarity. Each cluster of lines is displayed in a separate column (Figure 1). Clicking on a line places the text cursor in it, and also places a cursor at the corresponding position of every other line in the same column. (More details about how the cursor position is generalized are provided in the next section.) Moving the text cursor with the keyboard arrows, or selecting a range of text, likewise generalizes to corresponding selections in the rest of the column. When the user types new text, the typed characters are inserted at the cursor position of every line in the column. Similarly, deletions are repeated for all lines. Clipboard operations (cut, copy, and paste) are handled differently depending on whether the clipboard text comes from a selection made in the same line or from an external source. Text from an external source is treated as if it were typed, so that the same string is inserted into each line. Text copied and pasted within the same line, however, is generalized to do the corresponding copy and paste in the other lines in the column. For example (Figure 2), to switch the order of last names and first names, the user can cut “Collins” and paste it in front of “Michael”, and the system will generalize appropriately to the rest of the column.
Figure 3: The Fill command inserts enough characters into each line so that all cursors are aligned.
Sometimes the user needs to temporarily suspend simultaneous editing to fix an error in a single line. Mass Edit supports this with a checkbox that floats at the end of the current line. Checking the box removes all the other cursors, so that only the current line is edited. Unchecking it, or clicking on any other line, resumes editing with multiple cursors. When the user is done editing simultaneously, clicking the Done button returns to the text box, which now contains the updated text (with the edited lines put back in the proper order). The user can select this text and paste it back into the application or file from which it came. We have experimented with integrating simultaneous editing into other web applications, starting with Potluck [3] and Google Spreadsheets. Potluck is a data mashup tool, which displays data from one or more sources in tabular form, and allows the user to apply Mass Edit to the values in any column. Similarly, in Google Spreadsheets, the user can select a range of cells (which might be a row, a col-
umn, or an arbitrary selection) and select the Mass Edit tab to pop up a simultaneous editing window for all the selected cells (Figure 4). When the user presses Done to stop mass editing, the edited values are written back to the appropriate cells of the spreadsheet.
digit runs (such as 728), alphanumeric runs (such as Tomaso), whitespace runs (including tabs and spaces), and individual punctuation characters. For example, the line UBD_NAME--55 is converted into the structural sequence alphanumerics, punctuation, alphanumerics, punctuation, punctuation, digits. The lines are then clustered using the edit distance between their structural sequences as the distance metric. Clusters are generated greedily by choosing an arbitrary line as a seed for the cluster, ranking the remaining lines by structural edit distance, and then scanning the ranked list for a sufficiently large gap between two lines. A gap is considered large if it exceeds the average gap in a nearby window by more than a threshold. Lines closer than this gap are clustered with the seed line, and the remaining lines are recursively clustered in the same way, until the entire set of lines has been clustered.
Figure 4: Google Spreadsheets augmented with a Mass Edit tab (behind), which starts Mass Edit on the selected cells (front). DEVELOPER API
Mass Edit provides a Javascript API that allows a web application like Google Spreadsheets to embed simultaneous editing functionality. The API is included in an HTML page with the following tag: The API has a single entry point: massEdit(div, data,callback). The div parameter specifies an HTML element in which Mass Edit should display its user interface. This element may be integrated into the web application’s layout or overlaid on top. The data parameter specifies either a string (which is split into records on line boundaries) or an array of strings (which are used as records directly). The callback parameter is a function that is called when the user leaves simultaneous editing, passing the edited data so that it can be incorporated back into the application’s own data structures. Calling the massEdit() function creates the Mass Edit user interface in the specified div element, initialized with the provided data. Pressing Done or Cancel removes the Mass Edit interface and calls the callback function. IMPLEMENTATION
The implementation of simultaneous editing used in Mass Edit is substantially simpler than previous implementations [6,Error! Reference source not found.], in order to make it run efficiently in Javascript. The algorithm has three parts: detecting the structure of each text line, clustering lines by structural similarity, and generalizing cursor positions and selections to all the lines in a cluster. Each part is described below. When Mass Edit starts, it scans each text line to extract its structure. The structure of a line consists of a sequence of
When the user places the text cursor in a line, Mass Edit must generalize that cursor position to the other lines in its cluster. This is done by generalizing the cursor position into a pair, (segment, character), which identifies a structural segment and a character position within that segment. Positive segment and character positions are offsets from the start, while negative positions are counted from the end (as in Python sequence indexing); the generalization algorithm uses whichever direction produces a smaller number, seeking a minimum description. The resulting (segment, character) pair is the generalized cursor position, which is applied to the other lines in the cluster. For example, if the cursor is placed as shown in Toma|so Poggio, then it is generalized to (0,-2), indicating the 0th segment (Tomaso) and the 2nd character from the end of that segment. Applying this generalized position to Patrick Winston produces Patri|ck Winston. The system may be unable to apply the generalized position to all the lines, if the user clicks in a place where the lines differ too much in structure. In this case, the system highlights the offending lines in red and disables editing with the selection. Text lines are normally displayed as uneditable HTML elements. When the user clicks on a line to give it keyboard focus, Mass Edit converts the line into an editable text field, and attaches listeners to the text field for selection and change events. Whenever the user moves the cursor or changes the selection, Mass Edit generalizes the selection across the other lines in the cluster and highlights them appropriately. Whenever a change event occurs, Mass Edit compares the old value of the text field to its new value to determine whether text was inserted or deleted, and then generalizes the end points of the change to the other lines in the cluster and inserts or deletes text appropriately. One challenge with implementing simultaneous editing in a web browser is that we cannot directly observe clipboard operations. Clipboard contents are off-limits to browser Javascript for security reasons, and Cut, Copy, and Paste commands do not produce unique events that can be cap-
tured by an event listener. Our current implementation uses a trick to detect cut and paste operations. Every string deleted from a line is recorded as long as the line has the focus. If a deleted string reappears in a subsequent insertion, then we assume that the user did a cut and paste operation within the line, and generalize the operation to the other lines in the cluster by using their corresponding deleted strings. This technique can be misled, however, and it also cannot detect Copy operations, since the Copy command has no visible effect on the text field. We are exploring alternative solutions, including recording all selections ever made (not just deletions), and watching for keyboard shortcuts (such as Control-C or Command-C). Despite being implemented in HTML and Javascript, performance of Mass Edit is sufficient for interactive editing. On a 2GHz laptop running Windows XP and Firefox 2, the time to startup Mass Edit and do the clustering is less than 500 ms for 100 lines of text, and 5-15 seconds for 1000 lines. Making a selection takes roughly 100 ms for a 100line cluster, and about 1 s for a 1000-line cluster. DISCUSSION
This section discusses some of the new directions we are looking at for Mass Edit: (1) new editing tools, (2) improvements to clustering and selection generalization, (3) richer spreadsheet integration, and (4) more API capabilities for web application developers. Implementing Mass Edit in the web browser opens up new possibilities for integrating web services as editing tools. Possible examples include converting a US postal code into city and state; a street address into latitude/longitude coordinates; a telephone code into a time zone; and a person’s into an email address or phone number. By hooking up web services like these as tools in the Mass Edit toolbar, like To Uppercase and To Lowercase, we can apply them during editing. Because different applications may need different tools, we plan to open up the API further to allow application developers to define their own tools.
cursor position, so that, e.g., names written like “John Doe” could be split into two spreadsheet columns, “John” and “Doe.” This approach would use Mass Edit to discover the structure inside spreadsheet cells and expose it to other spreadsheet operations (sorting, filtering, rearranging columns, etc.). Mass Edit clustering could also be useful for selecting cells with similar structure and using the selection for other operations, such as changing the background color of cells that contain names with middle initials. Finally, we are looking at extending the API to allow web application developers to customize the Mass Edit interface. For example, Google Spreadsheet cells are not just plain text, but can include formatting and formula information. The API should allow the spreadsheet to provide its own custom editor for each record, in place of Mass Edit’s default plain text field, and hooks for displaying records in a custom way, locating selections in a record, and specifying new editing commands. CONCLUSION
Mass Edit is a web interface and API for simultaneous editing, using automatic clustering to allow different lines to be edited differently, and realized by a simple, fast Javascript implementation. Mass Edit is available for public use at http://uid.csail.mit.edu/mass-edit. ACKNOWLEDGMENTS
We thank members of the UID group who provided valuable feedback on the ideas in this paper. This work was supported in part by the National Science Foundation under award number IIS-0447800, and by Quanta Computer under the T-Party project. Any opinions, findings, conclusions or recommendations expressed in this publication are those of the authors and do not necessarily reflect the views of the sponsors. REFERENCES 1. Cypher, A. Eager: Programming repetitive tasks by demonstration. In A. Cypher, Ed., Watch What I Do: Programming by Demonstration, MIT Press, 1993, 205-218.
Automatic clustering generally helps separate different kinds of records that need to be edited differently, but it isn’t perfect. Sometimes it creates more clusters than needed, because the differences in structure aren’t important to the user’s particular editing task. For example, if the user only needs to edit near the end of each line, then differences at the start of the line are largely irrelevant, and it isn’t necessary to split based on those differences. Conversely, sometimes the clustering isn’t fine enough, leaving heterogeneous clusters that must be edited one line at a time. One solution to this problem would be to let the user rearrange the clustering manually, perhaps using drag-anddrop to merge and split clusters. Clustering and selection generalization would also be improved by recognizing common text structure like URLs, filenames, email addresses, dates, times, etc.
2. Fujishima, Y. Demonstrational automation of text editing tasks involving multiple focus points and conversions. In Proc. IUI ’98, 101-108.
The integration between Mass Edit and Google Spreadsheets suggests new ways to do spreadsheet editing. One possibility is a command for splitting cells at the current
8. Witten, I.H. and Mo, D. TELS: Learning text editing tasks
3. Huynh, D. F., Miller, R. C., and Karger, D. Potluck: data mash-up tool for casual users. In Proc. ISWC 2007, 239-252. 4. Lau, T., Wolfman, S., Domingos, P., and Weld, D.S. Learning repetitive text-editing procedures with SMARTedit. In H. Lieberman, Ed., Your Wish Is My Command: Giving Users the Power to Instruct Their Software, Morgan Kaufmann, 2001, 209–226. 5. Landauer, J. and Hirakawa, M. Visual AWK: a model for text processing by demonstration. In Proc. VL 1995, 267–274. 6. Miller, R.C. and Myers, B.A. Interactive simultaneous editing of multiple text regions. In Proc. USENIX 2001, 161-174. 7. Miller, R. C. and Marshall, A. A. Cluster-based find & replace. In Proc. CHI 2004, 57-64. from examples. In A. Cypher, Ed., Watch What I Do: Programming by Demonstration, MIT Press, 1993, 205–218.
