|
@@ -1,12 +1,14 @@
|
1
|
1
|
## Style Attributes
|
2
|
2
|
|
3
|
|
-Style attributes in Zefyr documents are simple key-value pairs, where
|
|
3
|
+> If you haven't yet, read introduction to Zefyr document model called
|
|
4
|
+> Notus [here][data_and_document];
|
|
5
|
+
|
|
6
|
+Style attributes in Notus documents are simple key-value pairs, where
|
4
|
7
|
keys identify the attribute and value describes the style applied, for
|
5
|
8
|
instance, `{ "heading": 1 }` defines heading style for a line of
|
6
|
9
|
text with value `1` (equivalent of `h1` in HTML).
|
7
|
10
|
|
8
|
|
-It is important to note
|
9
|
|
-that one attribute can describe multiple different styles depending
|
|
11
|
+Note that one attribute can describe multiple different styles depending
|
10
|
12
|
on the current value. E.g. attribute with key "heading" can be set to values
|
11
|
13
|
`1`, `2` or `3`, equivalents of `h1`, `h2` and `h3` in HTML. This prevents
|
12
|
14
|
a line of text from being formatted as `h1` and `h2` heading at the same time,
|
|
@@ -15,7 +17,7 @@ which is intentional.
|
15
|
17
|
Additionally, each attribute gets assigned one of two scopes. An
|
16
|
18
|
attribute can be either *inline-scoped* or *line-scoped*, but not both.
|
17
|
19
|
A good example of an inline-scoped attribute is "bold" attribute. Bold
|
18
|
|
-style can be applied to any character within a line, but not the the
|
|
20
|
+style can be applied to any character within a line, but not to the
|
19
|
21
|
line itself. Similarly "heading" style is line-scoped and has effect
|
20
|
22
|
only on the line as a whole.
|
21
|
23
|
|
|
@@ -29,6 +31,7 @@ attributes in Zefyr:
|
29
|
31
|
| Link | `a` | `inline` | `String` | Non-empty string |
|
30
|
32
|
| Heading | `heading` | `line` | `int` | `1`, `2` and `3` |
|
31
|
33
|
| Block | `block` | `line` | `String` | `"ul"`, `"ol"`, `"code"` and `"quote"` |
|
|
34
|
+| Embed | `embed` | `inline` | `Map` | `"hr"`, `"image"` |
|
32
|
35
|
|
33
|
36
|
Removing a specific style is as simple as setting corresponding
|
34
|
37
|
attribute to `null`.
|
|
@@ -36,35 +39,35 @@ attribute to `null`.
|
36
|
39
|
Here is an example of applying some styles to a document:
|
37
|
40
|
|
38
|
41
|
```dart
|
39
|
|
-import 'package:zefyr/zefyr.dart';
|
|
42
|
+import 'package:notus/notus.dart';
|
40
|
43
|
|
41
|
|
-void makeItPretty(ZefyrDocument document) {
|
42
|
|
- /// All attributes can be accessed through [ZefyrAttribute] class.
|
|
44
|
+void makeItPretty(NotusDocument document) {
|
|
45
|
+ /// All attributes can be accessed through [NotusAttribute] class.
|
43
|
46
|
|
44
|
47
|
// Format 5 characters starting at index 0 as bold.
|
45
|
|
- document.format(0, 5, ZefyrAttribute.bold);
|
|
48
|
+ document.format(0, 5, NotusAttribute.bold);
|
46
|
49
|
|
47
|
50
|
// Similarly for italic.
|
48
|
|
- document.format(0, 5, ZefyrAttribute.italic);
|
|
51
|
+ document.format(0, 5, NotusAttribute.italic);
|
49
|
52
|
|
50
|
53
|
// Format the first line as a heading (level 1).
|
51
|
54
|
// Note that there is no need to specify character range of the whole
|
52
|
55
|
// line. Simply set index position to anywhere within the line and
|
53
|
56
|
// length to 0.
|
54
|
|
- document.format(0, 0, ZefyrAttribute.heading.level1);
|
|
57
|
+ document.format(0, 0, NotusAttribute.heading.level1);
|
55
|
58
|
|
56
|
59
|
// Add a link:
|
57
|
|
- document.format(10, 15, ZefyrAttribute.link.fromString('https://github.com'));
|
|
60
|
+ document.format(10, 15, NotusAttribute.link.fromString('https://github.com'));
|
58
|
61
|
|
59
|
62
|
// Format a line as code block. Similarly to heading styles there is no need
|
60
|
63
|
// to specify the whole character range of the line. In following example:
|
61
|
64
|
// whichever line is at character index 23 in the document will get
|
62
|
65
|
// formatted as code block.
|
63
|
|
- document.format(23, 0, ZefyrAttribute.block.code);
|
|
66
|
+ document.format(23, 0, NotusAttribute.block.code);
|
64
|
67
|
|
65
|
68
|
// Remove heading style from the first line. All attributes
|
66
|
69
|
// have `unset` property which can be used the same way.
|
67
|
|
- document.format(0, 0, ZefyrAttribute.heading.unset);
|
|
70
|
+ document.format(0, 0, NotusAttribute.heading.unset);
|
68
|
71
|
}
|
69
|
72
|
```
|
70
|
73
|
|
|
@@ -74,21 +77,21 @@ As mentioned previously a document delta consists of a sequence of `insert`
|
74
|
77
|
operations. Attributes (if any) are stored as metadata on each of the
|
75
|
78
|
operations.
|
76
|
79
|
|
77
|
|
-One important detail here is how line and inline-scoped attributes are
|
|
80
|
+There is a difference in how line and inline-scoped attributes are
|
78
|
81
|
handled. Since Deltas are essentially a flat data structure there is
|
79
|
82
|
nothing in the format itself to represent a line of text, which is
|
80
|
83
|
required to allow storing line-scoped style attributes.
|
81
|
84
|
|
82
|
|
-To solve this issue Zefyr (similarly to Quill.js) reserves the
|
|
85
|
+To solve this issue Notus document (similarly to Quill.js) reserves the
|
83
|
86
|
**newline** character (aka `\n` and `0x0A`) as storage for line-scoped
|
84
|
87
|
styles.
|
85
|
88
|
|
86
|
|
-Zefyr's document model is designed to enforce this rule and
|
|
89
|
+Notus document model is designed to enforce this rule and
|
87
|
90
|
prevents malformed changes from being composed into a document. For
|
88
|
91
|
instance, an attempt to apply "bold" style to a newline character
|
89
|
92
|
will have no effect.
|
90
|
93
|
|
91
|
|
-Below is an example of Zefyr document's Delta with two lines of text.
|
|
94
|
+Below is an example of Notus document's Delta with two lines of text.
|
92
|
95
|
The first line is formatted as an `h1` heading and on the second line
|
93
|
96
|
there is bold-styled word "Flutter":
|
94
|
97
|
|
|
@@ -110,10 +113,10 @@ already reserved newline character for line styles.
|
110
|
113
|
As it turns out, this is not a big issue and it is possible to achieve
|
111
|
114
|
a friendly user experience without this extra level in a document model.
|
112
|
115
|
|
113
|
|
-The `block` attribute in Zefyr is line-scoped. To change a group of
|
114
|
|
-lines from "bullet list" to "number list" we need to update block
|
115
|
|
-style on each of the lines individually. Zefyr editor abstracts away
|
116
|
|
-such details with help of [heuristic rules][heuristics].
|
|
116
|
+The `block` attribute in Notus documents is line-scoped. To change a
|
|
117
|
+group of lines from "bullet list" to "number list" we need to update
|
|
118
|
+block style on each of the lines individually. Zefyr editor abstracts
|
|
119
|
+away such details with help of [heuristic rules][heuristics].
|
117
|
120
|
|
118
|
121
|
### Next up
|
119
|
122
|
|
|
@@ -123,4 +126,6 @@ such details with help of [heuristic rules][heuristics].
|
123
|
126
|
|
124
|
127
|
### Previous
|
125
|
128
|
|
126
|
|
-* [Data Format and Document Model](/doc/data_and_document.md)
|
|
129
|
+* [Data Format and Document Model][data_and_document]
|
|
130
|
+
|
|
131
|
+[data_and_document]: /doc/data_and_document.md
|