Labs/Jetpack/Reboot/JEP/111: Difference between revisions

From MozillaWiki
< Labs‎ | Jetpack‎ | Reboot‎ | JEP
Jump to navigation Jump to search
(basic selection JEP)
 
(12 intermediate revisions by 3 users not shown)
Line 2: Line 2:


* Champion: Myk Melez <myk@mozilla.org>
* Champion: Myk Melez <myk@mozilla.org>
* Status: Accepted/In-Queue
* Status: Under Review
* Bug Ticket:
* Bug Ticket: {{bug|547092}}
* Type: API
* Type: API


= Introduction =
= Introduction =


Jetpacks should be able to set, get, and listen for selection events.
Jetpack extensions should be able to get and set the current text selection and observe select events.


= selection Module =
= Use Cases =
* Look-up information depending on what is selected
** onSelect or sometime afterward
* Retrieving selected content
* Applying changes to the selection


The <code>selection</code> module gives extensions access to the selection.
= Implementation =


The module defines two properties, <code>text</code> and <code>html</code>, which represent plaintext and HTML versions of the selection:
== Module ==
 
The <code>selection</code> module gives extensions access to the selection. Importing the module returns a singleton.


  let selection = require("selection");
  let selection = require("selection");
selection.text; // the text version
selection.html; // the HTML version


Neither property is guaranteed to be defined, as there may not be a selection, and a selection may not have an HTML version.
=== Properties ===


= Getting the Selection =
; text: String; the text version of the selection, if any
; html: String; the HTML version of the selection, if any
; onSelect: Function; a callback function to call when some text is selected
; contiguous: Boolean; whether or not the selection is contiguous (see [[#Discontiguous Selections]])


Extensions get the selection by accessing the module's <code>text</code> or <code>html</code> properties:
If there is a selection:
* getting the <code>text</code> property returns the text value of the selection;
* getting the <code>html</code> property returns the HTML value of the selection, if any, otherwise <code>undefined</code>;
* setting the <code>text</code> property replaces the selection with the value to which the property is set and sets the <code>html</code> property to the same value to which the <code>text</code> property is being set;
* setting the <code>html</code> property replaces the selection with the value to which the property is set and sets the <code>text</code> property to the text version of the HTML value.


let text = selection.text;
If there is not a selection:
let html = selection.html;
* getting either property returns <code>undefined</code>;
* setting either property has no effect.


= Setting the Selection =
=== Discontiguous Selections ===


Extensions set the selection by setting the module's <code>text</code> or <code>html</code> properties:
Discontiguous selections can be accessed by iterating the selection singleton, which returns Selection objects with the same properties as the selection singleton:


  selection.text = "Hello";
  let selection = require("selection");
  selection.html = "&lt;b>Hello&lt;/b>";
  for each (let subselection in selection) {
  console.log(subselection.text);
}


Setting the <code>text</code> property automatically updates the <code>html</code> property to be undefined. Setting the <code>html</code> property automatically updates the <code>text</code> property to be the plaintext version of the HTML to which the <code>html</code> property was set.
To determine whether or not the selection is discontiguous, check its contiguous property, e.g.:


= onSelect =
let sel = require("selection");
if (sel.contiguous)
  console.log("The selection is: " + sel.text);
else
  console.log("The selections are: " + [s.text for each (s in sel)].join(","));


The onSelect method enables registration of a callback to be notified when the user makes a selection.
= Examples =


selection.onSelect(callback);
Log the current selection:


''Arguments''
let selection = require("selection");
if (selection.text)
  console.log(selection.text);


* '''callback''': Is the function to be called when a selection is made. It receives no arguments.
Surround HTML selections with delimiters:


To remove an event handler is done the normal Jetpack way:
let selection = require("selection");
 
  selection.onSelect = function() {
  selection.onSelect.unbind( callback );
  if (selection.html)
 
    selection.html = "\\\\\\" + selection.html + "///";
''Arguments''
};
 
* '''callback''': A pointer to the event handler to be unbound.


= Example =
= Issues =


let selection = require("selection");
* What happens when the selection changes programmatically? Does onSelect still get called?
selection.onSelect(function() {
* If there is no selection, what should the contiguous property return--false, undefined, something else?
  let html = selection.html;
* If contiguous is true but the API user calls the text and html getter properties, what is returned? The text or html of the first selection? undefined?
  selection.html = ">>>" + html + "<<<";
* What happens if the contiguous selections change while they are being iterated? In java-land, we would throw a [http://java.sun.com/j2se/1.5.0/docs/api/java/util/ConcurrentModificationException.html ConcurrentModificationException].
});


= References =
= References =


* [[Labs/Jetpack/JEP/12]]
* [[Labs/Jetpack/JEP/12]]

Latest revision as of 00:23, 1 May 2010

JEP 111 - Selection

  • Champion: Myk Melez <myk@mozilla.org>
  • Status: Under Review
  • Bug Ticket: bug 547092
  • Type: API

Introduction

Jetpack extensions should be able to get and set the current text selection and observe select events.

Use Cases

  • Look-up information depending on what is selected
    • onSelect or sometime afterward
  • Retrieving selected content
  • Applying changes to the selection

Implementation

Module

The selection module gives extensions access to the selection. Importing the module returns a singleton.

let selection = require("selection");

Properties

text
String; the text version of the selection, if any
html
String; the HTML version of the selection, if any
onSelect
Function; a callback function to call when some text is selected
contiguous
Boolean; whether or not the selection is contiguous (see #Discontiguous Selections)

If there is a selection:

  • getting the text property returns the text value of the selection;
  • getting the html property returns the HTML value of the selection, if any, otherwise undefined;
  • setting the text property replaces the selection with the value to which the property is set and sets the html property to the same value to which the text property is being set;
  • setting the html property replaces the selection with the value to which the property is set and sets the text property to the text version of the HTML value.

If there is not a selection:

  • getting either property returns undefined;
  • setting either property has no effect.

Discontiguous Selections

Discontiguous selections can be accessed by iterating the selection singleton, which returns Selection objects with the same properties as the selection singleton:

let selection = require("selection");
for each (let subselection in selection) {
  console.log(subselection.text);
}

To determine whether or not the selection is discontiguous, check its contiguous property, e.g.:

let sel = require("selection");
if (sel.contiguous)
  console.log("The selection is: " + sel.text);
else
  console.log("The selections are: " + [s.text for each (s in sel)].join(","));

Examples

Log the current selection:

let selection = require("selection");
if (selection.text)
  console.log(selection.text);

Surround HTML selections with delimiters:

let selection = require("selection");
selection.onSelect = function() {
  if (selection.html)
    selection.html = "\\\\\\" + selection.html + "///";
};

Issues

  • What happens when the selection changes programmatically? Does onSelect still get called?
  • If there is no selection, what should the contiguous property return--false, undefined, something else?
  • If contiguous is true but the API user calls the text and html getter properties, what is returned? The text or html of the first selection? undefined?
  • What happens if the contiguous selections change while they are being iterated? In java-land, we would throw a ConcurrentModificationException.

References