Kaynağa Gözat

Updated docs

Anatoly Pulyaevskiy 6 yıl önce
ebeveyn
işleme
da33806475
5 değiştirilmiş dosya ile 76 ekleme ve 58 silme
  1. 27
    22
      doc/attributes.md
  2. 18
    12
      doc/data_and_document.md
  3. 6
    6
      doc/faq.md
  4. 14
    14
      doc/heuristics.md
  5. 11
    4
      doc/quick_start.md

+ 27
- 22
doc/attributes.md Dosyayı Görüntüle

@@ -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

+ 18
- 12
doc/data_and_document.md Dosyayı Görüntüle

@@ -1,6 +1,12 @@
1 1
 ## Data Format and Document Model
2 2
 
3
-Zefyr documents are based on Quill.js [Delta][] format. Deltas are
3
+Zefyr document model exists as a separate platform-agnostic library
4
+called Notus. Notus implements all building blocks of a rich text
5
+document and can be used separately from Zefyr on any platform
6
+supported by Dart SDK, e.g. web, desktop or server (macos, windows,
7
+linux) and, of course, mobile (ios, android).
8
+
9
+Notus documents are based on Quill.js [Delta][] format. Deltas are
4 10
 simple and expressive format of describing rich text data, and is also
5 11
 suitable for [Operational transformations][ot]. The format is
6 12
 essentially JSON, and is human readable.
@@ -82,17 +88,18 @@ for more details.
82 88
 
83 89
 ### Document model
84 90
 
85
-Zefyr documents are represented as a tree of nodes. There are 3 main types of
86
-nodes:
91
+Notus documents are represented as a tree of nodes. There are 3 main
92
+types of nodes:
87 93
 
88
-* `Text` - a leaf node which represents a segment of styled text within
89
-  a document.
90
-* `Line` - represents an individual line of text within a document.
94
+* `LeafNode` - a leaf node which represents a segment of styled text
95
+  within a document. There are two kinds of leaf nodes - text and
96
+  embeds.
97
+* `LineNode` - represents an individual line of text within a document.
91 98
   Line nodes are containers for leaf nodes.
92 99
 * `Block` - represents a group of adjacent lines which share the same
93 100
   style. Examples of blocks include lists, quotes or code blocks.
94 101
 
95
-Given above description, here is ASCII-style visualization of a Zefyr
102
+Given above description, here is ASCII-style visualization of a Notus
96 103
 document tree:
97 104
 
98 105
 ```
@@ -112,15 +119,14 @@ root
112 119
 ```
113 120
 
114 121
 It is currently not allowed to nest blocks inside other blocks but this
115
-may change in the future. More node types are likely to be added as well.
116
-For example, another leaf node for embedded content, like images.
122
+may change in the future.
117 123
 
118
-All manipulations of Zefyr documents are designed strictly to match
124
+All manipulations of Notus documents are designed strictly to match
119 125
 semantics of underlying Delta format. As a result the model itself is
120 126
 fairly simple and predictable.
121 127
 
122
-To learn more about consequences of this design read about
123
-[attributes][] and [heuristics][].
128
+Learn more about other building blocks of Notus documents in
129
+documentation for [attributes][] and [heuristics][].
124 130
 
125 131
 [heuristics]: /doc/heuristics.md
126 132
 [attributes]: /doc/attributes.md

+ 6
- 6
doc/faq.md Dosyayı Görüntüle

@@ -1,17 +1,17 @@
1 1
 ## Frequently asked questions
2 2
 
3
-### Are Zefyr documents compatible with Quill documents?
3
+### Are Notus documents compatible with Quill documents?
4 4
 
5
-Short answer is no. Even though Zefyr uses Quill Delta as underlying
5
+Short answer is no. Even though Notus uses Quill Delta as underlying
6 6
 representation for its documents there are at least differences in
7 7
 attribute declarations. For instance heading style in Quill
8
-editor uses "header" as the attribute key, in Zefyr it's "heading".
8
+editor uses "header" as the attribute key, in Notus it's "heading".
9 9
 
10
-There are also semantical differences. In Quill, both list and heading
10
+There are also semantic differences. In Quill, both list and heading
11 11
 styles are treated as block styles. This means applying "heading"
12
-style to a list item removes the item from the list. In Zefyr, heading
12
+style to a list item removes the item from the list. In Notus, heading
13 13
 style is handled separately from block styles like lists and quotes.
14 14
 As a consequence you can have a heading line inside of a quote block.
15 15
 This is intentional and inspired by how Markdown handles such scenarios.
16
-In fact, Zefyr format tries to follow Markdown semantics as close as
16
+In fact, Notus format tries to follow Markdown semantics as close as
17 17
 possible.

+ 14
- 14
doc/heuristics.md Dosyayı Görüntüle

@@ -2,18 +2,18 @@
2 2
 
3 3
 As it turns out, a good rich text editor not only allows the user to
4 4
 manually apply different styles to text in a document. It can also
5
-automatically apply certain styles based on the context of a user
6
-action.
5
+automatically apply certain styles based on the context of user
6
+actions.
7 7
 
8 8
 Some very common examples include autoformatting of links or inserting
9
-a new list item.
9
+a new list item when user presses `Enter` key.
10 10
 
11
-In Zefyr, such rules are called *heuristic rules*. There are two main
12
-purposes for heuritic rules:
11
+In Notus (document model used by Zefyr editor), such rules are called
12
+*heuristic rules*. There are two main purposes for heuristic rules:
13 13
 
14 14
 1. User experience: rules like above-mentioned autoformatting of links
15
-  are here to make editing a nice and pleasant process.
16
-2. Style normalizing: this is mostly invisible for the user but
15
+   are here to make editing a user friendly process.
16
+2. Semantics preservation: this is mostly invisible for the user but
17 17
   is very important nevertheless. There is a set of rules to make sure
18 18
   that a document change conforms to the data format and model
19 19
   semantics.
@@ -35,17 +35,17 @@ var doc = getDocument();
35 35
 var cursorPosition = 8; // after the word "Document"
36 36
 var selectionLength = 0; // selection is collapsed.
37 37
 var change = doc.format(
38
-  cursorPosition, selectionLength, ZefyrAttribute.heading.level2);
38
+  cursorPosition, selectionLength, NotusAttribute.heading.level2);
39 39
 ```
40 40
 
41 41
 If we try to apply this change as-is it would have no effect or, more
42 42
 likely, result in an `AssertionError`. This is why all methods in
43
-`ZefyrDocument` have an extra step which applies heuristic rules to
43
+`NotusDocument` have an extra step which applies heuristic rules to
44 44
 the change (there is one method which skips this step, `compose`,
45 45
 read more on it later) before actually composing it.
46 46
 
47
-The `ZefyrDocument.format` method returns an instance of `Delta` which
48
-was actualy applied to the document. For the above scenario it would
47
+The `NotusDocument.format` method returns an instance of `Delta` which
48
+was actually applied to the document. For the above scenario it would
49 49
 look like this:
50 50
 
51 51
 ```json
@@ -62,7 +62,7 @@ what user intended to do.
62 62
 There are more similar scenarios which are covered by heuristic rules
63 63
 to ensure consistency with the document model and provide better UX.
64 64
 
65
-### `ZefyrDocument.compose()` and skipping heuristic rules.
65
+### `NotusDocument.compose()` and skipping heuristic rules.
66 66
 
67 67
 The `compose()` method is the only method which skips the step of
68 68
 applying heuristic rules and therefore **should be used with great
@@ -84,6 +84,6 @@ This method exists mostly to enable following use cases:
84 84
   before composing.
85 85
 
86 86
 When composing a change which came from a different site or server make
87
-sure to use `ChangeSource.api` when calling `compose()`. This allows
87
+sure to use `ChangeSource.remote` when calling `compose()`. This allows
88 88
 you to distinguish such changes from local changes made by the user
89
-when listening on `ZefyrDocument.changes` stream.
89
+when listening on `NotusDocument.changes` stream.

+ 11
- 4
doc/quick_start.md Dosyayı Görüntüle

@@ -1,5 +1,11 @@
1 1
 ## Quick Start
2 2
 
3
+Zefyr project is split in two main packages:
4
+
5
+1. `zefyr` - Flutter package which provides the UI part
6
+2. `notus` - platform-agnostic package which provides document model
7
+   used by `zefyr` package.
8
+
3 9
 ### Installation
4 10
 
5 11
 Add `zefyr` package as a dependency to your `pubspec.yaml`:
@@ -9,16 +15,17 @@ dependencies:
9 15
   zefyr: ^0.1.0
10 16
 ```
11 17
 
12
-And run `flutter packages get` to install.
18
+And run `flutter packages get` to install. This installs both `zefyr`
19
+and `notus` packages.
13 20
 
14 21
 ### Usage
15 22
 
16 23
 There are 3 main objects you would normally interact with in your code:
17 24
 
18
-* `ZefyrDocument`, represents a rich text document and provides
25
+* `NotusDocument`, represents a rich text document and provides
19 26
   high-level methods for manipulating the document's state, like
20 27
   inserting, deleting and formatting of text.
21
-  Read [documentation][data_and_docs] for more details on Zefyr's
28
+  Read [documentation][data_and_docs] for more details on Notus
22 29
   document model and data format.
23 30
 * `ZefyrEditor`, a Flutter widget responsible for rendering of rich text
24 31
   on the screen and reacting to user actions.
@@ -46,7 +53,7 @@ class MyWidgetState extends State<MyWidget> {
46 53
     super.initState();
47 54
     // Create an empty document or load existing if you have one.
48 55
     // Here we create an empty document:
49
-    final document = new ZefyrDocument();
56
+    final document = new NotusDocument();
50 57
     _controller = new ZefyrController(document);
51 58
     _focusNode = new FocusNode();
52 59
   }