Skip to content

Commit c8d0bd3

Browse files
authored
fix: Merge multiline text readme to with pre-v11 documentation (#2660)
* fix: Update multiline text readme to include the information currently on devsite * chore: Run Prettier * fix: Run Prettier again
1 parent 8bd1177 commit c8d0bd3

1 file changed

Lines changed: 89 additions & 9 deletions

File tree

plugins/field-multilineinput/README.md

Lines changed: 89 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,21 @@
11
# @blockly/field-multilineinput [![Built on Blockly](https://tinyurl.com/built-on-blockly)](https://github.com/google/blockly)
22

3-
A [Blockly](https://www.npmjs.com/package/blockly) multilineinput field and associated block.
3+
A [Blockly](https://www.npmjs.com/package/blockly) multiline input field and
4+
associated block.
5+
6+
#### Multiline input field
7+
8+
![A block with the label "multiline text input:" and a multiline input field
9+
with the text "default text \n with newline character.](readme-media/on_block.png)
10+
11+
#### Multiline input field with editor open
12+
13+
![The same block with editor open.](readme-media/with_editor.png)
14+
15+
#### Multiline input on collapsed block
16+
17+
![The same block after being collapsed. It has the label "multiline text input:
18+
defau..." and a jagged right edge to show it is collapsed.](readme-media/collapsed.png)
419

520
## Installation
621

@@ -18,17 +33,23 @@ npm install @blockly/field-multilineinput --save
1833

1934
## Usage
2035

21-
### Field
36+
This plugin adds a field of type `FieldMultilineInput` that is registered with
37+
the name `'field_multilinetext'`. It is a subclass of `Blockly.FieldInput`.
2238

23-
This field accepts up to 3 parameters:
39+
This field stores a string as its value and a string as its text. Its value is
40+
always a valid string, while its text could be any string entered into its
41+
editor. Unlike a text input field, this field also supports newline characters
42+
entered in the editor.
2443

25-
- "text" to specify the default text. Defaults to `""`.
26-
- "maxLines" to specify the maximum number of lines displayed before scrolling
27-
functionality is enabled. Defaults to `Infinity`.
28-
- "spellcheck" to specify whether spell checking is enabled. Defaults to
29-
`true`.
44+
The constructor for this field accepts three optional parameters:
3045

31-
The multiline input field is a subclass of Blockly.FieldInput
46+
- `value`: The default text. Defaults to `""`.
47+
- `validator`: A function that is called to validate what the user entered.
48+
- `config`: An object with three optional properties:
49+
- `maxLines`: The maximum number of lines displayed before scrolling
50+
functionality is enabled. Defaults to `Infinity`.
51+
- `spellcheck`: Whether spell checking is enabled. Defaults to `true`.
52+
- `tooltip`: A tooltip.
3253

3354
If you want to use only the field, you must register it with Blockly. You can
3455
do this by calling `registerFieldMultilineInput` before instantiating your
@@ -74,6 +95,65 @@ Blockly.defineBlocksWithJsonArray([
7495
}]);
7596
```
7697

98+
### Customization
99+
100+
#### Spellcheck
101+
102+
The `setSpellcheck` function can be used to set whether the field spellchecks
103+
its input text or not. Spellchecking is on by default.
104+
105+
![An animation showing multiline text input fields with and without
106+
spellcheck.](readme-media/spellcheck.gif)
107+
108+
This applies to individual fields. If you want to modify all fields change the
109+
`Blockly.FieldMultilineInput.prototype.spellcheck_` property.
110+
111+
#### Validation
112+
113+
A multiline text input field's value is a string, so any validators must accept
114+
a string and return a string, `null`, or `undefined`.
115+
116+
Here is an example of a validator that removes all 'a' characters from the
117+
string:
118+
119+
```
120+
function(newValue) {
121+
return newValue.replace(/a/gm, '');
122+
}
123+
```
124+
125+
![An animation showing validation.](readme-media/validator.gif)
126+
127+
### Serialization
128+
129+
#### JSON
130+
131+
The JSON for a multiline text input field looks like so:
132+
133+
```json
134+
{
135+
"fields": {
136+
"FIELDNAME": "line1\nline2"
137+
}
138+
}
139+
```
140+
141+
where `FIELDNAME` is a string referencing a multiline text input field, and the
142+
value is the value to apply to the field. The value follows the same rules as
143+
the constructor value.
144+
145+
#### XML
146+
147+
The XML for a multiline text input field looks like so:
148+
149+
```xml
150+
<field name="FIELDNAME">line1&amp;#10;line2</field>
151+
```
152+
153+
where the field's `name` attribute contains a string referencing a multiline
154+
text input field, and the inner text is the value to apply to the field. The
155+
inner text value follows the same rules as the constructor value.
156+
77157
### Blocks
78158

79159
This package also provides a simple block containing a multiline input

0 commit comments

Comments
 (0)