Structured Editing for All: Deriving Usable Structured Editors From Grammars

Title of the Paper

Structured Editing for All: Deriving Usable Structured Editors from Grammars

Paper Information

• Domain: Software Engineering, Design of Programming Language Editing Tools
• Keywords: Structured editing, grammar, text-like editing, user study, Clojure, JavaScript, regular expressions, Tree-sitter, automatic generation, input reconciliation
• Conference: CHI 2023
• Authors: Tom Beckmann, Patrick Rein, Stefan Ramson, Joana Bergsiek, Robert Hirschfeld
• Affiliation: Hasso Plattner Institute, University of Potsdam, Germany

Research Background and Problem Statement

• Identified Problems:

  • Structured editors provide significant benefits in programming tools, such as improved learnability, editing efficiency, and tool integration. However, developing general-purpose and usable structured editors is costly and complex, with existing work often requiring custom interaction designs for each language.
  • Some automatically generated editors lack interactivity and offer an editing experience less natural than traditional text editors, particularly for complex programming languages like Rust and TypeScript.

• Significance:

  • Structured editors can consistently maintain program syntax validity, offer syntax guidance, simplify the development of combined languages, and support innovative tool integration.
  • Combining the fluid input advantages of text editors can significantly lower the barrier to entry, enabling developers of various languages to use structured editors.

• Motivation and Related Work:

  • Existing tools face significant trade-offs between editor usability and language compatibility (Usability vs. Availability).
  • Previous work has demonstrated some effective structured editors, such as Lamdu and GrammarCells, but these are often not extensible to general-purpose languages or require extensive manual annotations of grammar.
  • The authors propose leveraging language grammar engines (e.g., Tree-sitter) to automatically derive general editing operations, aiming for a consistent user experience.

Solution

• Proposed Method or Solution:

  • A system named Sandblocks is introduced, which automatically generates fluid structured editors from arbitrary grammars (e.g., Tree-sitter grammar format).
  • A novel input reconciliation process is designed to map user keyboard inputs to syntax trees in real-time, generating corresponding interface interactions.

• Innovations:

  • Proposes an editing generation process that does not require manual grammar annotations, allowing real-time reconciliation with syntax trees to create intuitive structures during user input.
  • Supports flexible, text-like editing operations without losing traditional advantages such as automatic syntax validation.

• Implementation Steps and Key Techniques:

  1. Grammar Import: Extract and refine rules from Tree-sitter grammars, converting them into editable UI data structures.
  2. Input Reconciliation: Dynamically map user text operations into syntax-driven input logic based on three key design principles:
     • Navigation follows the visual layout of the text interface.
     • Character input behaves like text manipulation, buffered until fully parsed.
     • Deletion operations adopt minimally disruptive methods, explicitly capturing context.
  3. Interface Generation and Interactive Design: Generate an editing interface organized around block-level syntax tree elements, supporting insertion pop-ups and real-time error mechanisms.

Research Outcomes

• Key Results:

  • Developed the open-source tool Sandblocks, which successfully auto-generates structured editors for multiple common languages (e.g., JavaScript, Clojure, Python, TypeScript).
  • The proposed editing model ensures compatibility with new languages and provides consistent interaction behavior.

• Advantages over Existing Solutions:

  • Compared to tools that only support domain-specific languages, Sandblocks offers higher generality.
  • User studies indicate the system has a low learning curve, with user experience close to that of text editors.

• Experiments and Evaluation Results:

  1. User Experience:
     • Conducted a user study (N=18), with participants rating the naturalness of the editing experience at 6/7 (median score), though deletion and navigation received slightly lower scores.
     • Minimal differences in cognitive load compared to traditional text editors (measured using the NASA TLX scale).
  2. Learning Transferability:
     • A tutorial based on a single language (Python) enabled users to successfully complete tasks in other languages (e.g., JavaScript, Clojure, and Regex), demonstrating cross-language consistency.
  3. Editing Efficiency:
     • Overall, editing was 20%-95% slower than in text editors. Efficiency losses were more pronounced for Regex tasks, while JavaScript and Clojure tasks showed only a 1.2-1.3x slowdown.
  4. Program Reproduction Capability:
     • Successfully re-entered 250 open-source project syntax targets with a 96% accuracy rate. Failures were primarily due to specific syntax features like template strings.

• Limitations and Future Directions:

  • Limitations:
    • The pop-up mechanism for resolving input ambiguities confused some users.
    • High padding and uneven layout increased the learning curve for navigation operations.
    • While advertised as "supporting any grammar," customized characters (e.g., omitted commas) led to varying user perceptions and errors.
  • Future Directions:
    • Improve error recovery mechanisms to reduce large-scale rollback operations.
    • Optimize interactive editing experiences, such as cursor movement, and enhance alignment strategies for large nested blocks.
    • Explore integration of pop-ups into tree structures to further validate seamless transitions in editing.