<commit_before><!DOCTYPE html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
 href="https://fonts.googleapis.com/css?family=Roboto|Droid+Sans+Mono">
<link rel="stylesheet" href="../note_expander/note_expander.css">
<link rel="stylesheet" href="demo.css">

<script src="../cursor_maintainer.js"></script>
<script src="../note_expander/note_expander.js"></script>
<script src="demo.js"></script>

<title> Cursor maintenance demos </title>

</head>
<body>

<div id="wrapper">


<h1> Cursor-maintenance demos </h1>

<div class="notes">

<p> This page demonstrates two approaches to maintaining cursor position
in a text input field that formats its contents in real time. Whenever
a formatting operation alters the text, the cursor position must be
reconsidered. The goal of cursor maintenance is to place the cursor in
a position that minimizes user surprise.

<p> The problem of cursor maintenance is discussed in an
<a href="">article</a>. Source code is available in a <a
href="">repository</a>.

</div>



<h2> Meta approach </h2>

<div class="notes">

<p> In the meta approach, we reimplement a text formatting operation by
applying elementary operations to a text-with-cursor object. The object
moves the cursor in a predictable manner for each elementary operation.

<p> Below we demonstrate the meta approach with two formatting operations,
<em>commatize</em> and <em>trimify</em>.

<p> Commatize is defined for text consisting of digits and commas. Input
strings containing other characters are rejected by a validation
function that runs before the formatting operation. Commatize displays
a non-negative integer with commas separating groups of three digits.

<p> Trimify is applicable to any text. The input is not validated before
formatting. Trimify removes whitespace from the beginning of the text,
then condenses all other whitespace sequences to one space each.

</div>


<h3> commatize </h3>

<input id="commatizeInput" spellcheck="false">


<h3> trimify </h3>

<textarea id="trimifyInput" spellcheck="false" class="text"></textarea>



<h2> Retrospective approach </h2>

<div class="notes">

<p> In retrospective cursor maintenance, we calculate a cursor position by
comparing the formatted text to the original text and cursor position. We
only consider the current instance of text formatting. Thus, there is
no need to modify the formatting operation or even to know what it does
in general.

<p> You can define a formatting operation to be used in the following
input field by inserting a JavaScript function into the editable code
box below. To serve as a formatting operation, the function must take
a string argument and return a string.

<p> The retrospective scoring formula used here is called <em>balanced
frequencies</em>. It computes the ratios of individual character
frequencies to the left and right of the cursor in the original text,
then tries to achieve similar ratios in the formatted text using a
least-squares fit.

</div>


<h3> user-defined </h3>

<textarea id="retrospectiveInput" spellcheck="false" class="text"></textarea>

<textarea id="retrospectiveCode" spellcheck="false" class="code"></textarea>



<h2> Layer approach </h2>

<div class="notes">

<p> In the layer approach, we define one or more character layers. Given
a layer and a piece of text, we count the number of characters in the
text that belong to the layer. For a given cursor position, we count<commit_msg>Use new format terminology on demo page<commit_after><!DOCTYPE html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
 href="https://fonts.googleapis.com/css?family=Roboto|Droid+Sans+Mono">
<link rel="stylesheet" href="../note_expander/note_expander.css">
<link rel="stylesheet" href="demo.css">

<script src="../cursor_maintainer.js"></script>
<script src="../note_expander/note_expander.js"></script>
<script src="demo.js"></script>

<title> Cursor maintenance demos </title>

</head>
<body>

<div id="wrapper">


<h1> Cursor-maintenance demos </h1>

<div class="notes">

<p> This page demonstrates three approaches to maintaining cursor position
in a text input field that formats its contents in real time. Whenever
the text is formatted, the cursor position must be reconsidered. The
goal of cursor maintenance is to place the cursor in a position that
minimizes user surprise.

<p> The problem of cursor maintenance is discussed in an
<a href="">article</a>. Source code is available in a <a
href="">repository</a>.

</div>



<h2> Meta approach </h2>

<div class="notes">

<p> In the meta approach, we reimplement a format by applying elementary
operations to a text-with-cursor object. The object moves the cursor in
a predictable manner for each elementary operation.

<p> Below we demonstrate the meta approach with two formats,
<em>commatize</em> and <em>trimify</em>.

<p> Commatize is defined for text consisting of digits and commas. Input
strings containing other characters are rejected by a validation function
that runs before the formatter. Commatize displays a non-negative integer
with commas separating groups of three digits.

<p> Trimify is applicable to any text. The input is not validated before
formatting. Trimify removes whitespace from the beginning of the text,
then condenses all other whitespace sequences to one space each.

</div>


<h3> commatize </h3>

<input id="commatizeInput" spellcheck="false">


<h3> trimify </h3>

<textarea id="trimifyInput" spellcheck="false" class="text"></textarea>



<h2> Retrospective approach </h2>

<div class="notes">

<p> In retrospective cursor maintenance, we calculate a cursor position by
comparing the formatted text to the original text and cursor position. We
only consider the current instance of formatting. Thus, there is no need
to modify the formatter or even to know what it does in general.

<p> You can define a format to be used in the following input field by
inserting a JavaScript function into the editable code box below. To
serve as a formatter, the function must take a string argument and return
a string.

<p> The retrospective scoring formula used here is called <em>balanced
frequencies</em>. It computes the ratios of individual character
frequencies to the left and right of the cursor in the original text,
then tries to achieve similar ratios in the formatted text using a
least-squares fit.

</div>


<h3> user-defined </h3>

<textarea id="retrospectiveInput" spellcheck="false" class="text"></textarea>

<textarea id="retrospectiveCode" spellcheck="false" class="code"></textarea>



<h2> Layer approach </h2>

<div class="notes">

<p> In the layer approach, we define one or more character layers. Given
a layer and a piece of text, we count the number of characters in the
text that belong to the layer. For a given cursor position, we count
{'fraction_non_alphanumeric': 0.09303669459693731, 'fraction_numerical': 0.004622941346431667, 'mean_word_length': 5.0462882096069865, 'pattern_counts': {'":': 0, '<': 135, '<?xml version=': 0, '>': 135, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4004235', 'n_tokens_mistral': 1997, 'n_tokens_neox': 1887, 'n_words': 903}