Skip to content

Commit

Permalink
Front page & quick start update (#2)
Browse files Browse the repository at this point in the history
* Front page & quick start update

* Update concepts

* Remove obsolete guide to integrate images
amantoux authored May 31, 2023
1 parent 23a2086 commit b48e015
Showing 5 changed files with 106 additions and 268 deletions.
26 changes: 16 additions & 10 deletions content/en/docs/getting-started/concepts/attributes.md
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ toc: true
## Style Attributes

> If you haven't yet, read introduction to Fleather document model called
> Parchment [here](data-and-document.md).
> Parchment [here](../data-and-document).
Style attributes in Parchment documents are simple key-value pairs, where
keys identify the attribute and value describes the style applied, for
@@ -39,14 +39,20 @@ only on the line as a whole.
Below table summarizes information about all currently supported
attributes in Fleather:

| Name | Key | Scope | Type | Valid values |
| ------- | --------- | -------- | -------- | -------------------------------------- |
| Bold | `b` | `inline` | `bool` | `true` |
| Italic | `i` | `inline` | `bool` | `true` |
| Link | `a` | `inline` | `String` | Non-empty string |
| Heading | `heading` | `line` | `int` | `1`, `2` and `3` |
| Block | `block` | `line` | `String` | `"ul"`, `"ol"`, `"code"` and `"quote"` |
| Embed | `embed` | `inline` | `Map` | `"hr"`, `"image"` |
| Name | Key | Scope | Type | Valid values |
| --------------- | ----------- | -------- | -------- | -------------------------------------------- |
| Bold | `b` | `inline` | `bool` | `true` |
| Italic | `i` | `inline` | `bool` | `true` |
| Strikethrough | `s` | `inline` | `bool` | `true` |
| Code | `c` | `inline` | `bool` | `true` |
| Backgound color | `bg` | `inline` | `int` | 32 lower bits of `int` |
| Link | `a` | `inline` | `String` | Non-empty string |
| Heading | `heading` | `line` | `int` | `1`, `2` and `3` |
| Block | `block` | `line` | `String` | `"ul"`, `"ol"`, `"code"`, `"quote"` |
| Direction | `direction` | `line` | `String` | `"rtl"`, `"ltr"` |
| Indentation | `indent` | `line` | `int` | any positive `int` |
| Alignment | `alignment` | `line` | `String` | `"left"`, `"right"`, `"center"`, `"justify"` |
| Embed | `embed` | `inline` | `Map` | `"hr"`, `"image"`, custom embeds |

Removing a specific style is as simple as setting corresponding
attribute to `null`.
@@ -131,4 +137,4 @@ a friendly user experience without this extra level in a document model.
The `block` attribute in Parchment documents is line-scoped. To change a
group of lines from "bullet list" to "number list" we need to update
block style on each of the lines individually. Fleather editor abstracts
away such details with help of [heuristic rules](heuristics.md).
away such details with help of [heuristic rules](../heuristics).
4 changes: 2 additions & 2 deletions content/en/docs/getting-started/concepts/data-and-document.md
Original file line number Diff line number Diff line change
@@ -139,5 +139,5 @@ fairly simple and predictable.
Learn more about other building blocks of Parchment documents in
documentation for [attributes][] and [heuristics][].

[heuristics]: heuristics.md
[attributes]: attributes.md
[heuristics]: ../heuristics
[attributes]: ../attributes
130 changes: 74 additions & 56 deletions content/en/docs/getting-started/quick-start.md
Original file line number Diff line number Diff line change
@@ -39,14 +39,16 @@ see [official documentation](https://flutter.dev/docs/get-started/test-drive).

### Add Fleather to your project

Add `fleather` package as a dependency to `pubspec.yaml` of your new project:
Add `fleather` & `quill_delta` package as a dependency to `pubspec.yaml` of your new project:

```yaml
dependencies:
fleather: [ latest_version ]
quill_delta: [ latest_version ]
```
`quill_delta` provide the tools to create and manipulate `Delta`s, more on this [here](/docs/getting-started/concepts/data-and-document/)

And run `flutter packages get`. This installs [fleather](https://pub.dev/packages/fleather) and all
And run `flutter packages get`. This installs [fleather](https://pub.dev/packages/fleather), [quill_delta](https://pub.dev/packages/quill_delta) and all
required dependencies, including [parchment](https://pub.dev/packages/parchment) package which
implements Fleather's document model.

@@ -62,21 +64,25 @@ app.
Create a new file `lib/src/editor_page.dart` and type in (or paste) the following:

```dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:quill_delta/quill_delta.dart';
import 'package:fleather/fleather.dart';
class EditorPage extends StatefulWidget {
const EditorPage({super.key});
@override
EditorPageState createState() => EditorPageState();
}
class EditorPageState extends State<EditorPage> {
/// Allows to control the editor and the document.
FleatherController _controller;
FleatherController? _controller;
/// Fleather editor like any other input field requires a focus node.
FocusNode _focusNode;
late FocusNode _focusNode;
@override
void initState() {
@@ -89,16 +95,25 @@ class EditorPageState extends State<EditorPage> {
@override
Widget build(BuildContext context) {
// Note that the editor requires special `FleatherScaffold` widget to be
// one of its parents.
// Note that a default tools bar is provided
// Here we decide to position it at the buttom for mobile device and
// at the top for desktops
return Scaffold(
appBar: AppBar(title: Text("Editor page")),
body: FleatherScaffold(
child: FleatherEditor(
padding: EdgeInsets.all(16),
controller: _controller,
focusNode: _focusNode,
),
appBar: AppBar(title: const Text('Editor page')),
body: Column(
children: [
if (!Platform.isAndroid && !Platform.isIOS)
FleatherToolbar.basic(controller: _controller),
Expanded(
child: FleatherEditor(
padding: const EdgeInsets.all(16),
controller: _controller,
focusNode: _focusNode,
),
),
if (Platform.isAndroid || Platform.isIOS)
FleatherToolbar.basic(controller: _controller),
],
),
);
}
@@ -108,8 +123,7 @@ class EditorPageState extends State<EditorPage> {
// For simplicity we hardcode a simple document with one line of text
// saying "Fleather Quick Start".
// (Note that delta must always end with newline.)
final Delta delta = Delta()
..insert("Fleather Quick Start\n");
final Delta delta = Delta()..insert('Fleather Quick Start\n');
return ParchmentDocument.fromDelta(delta);
}
}
@@ -127,31 +141,35 @@ import 'package:flutter/material.dart';
import 'src/editor_page.dart';
void main() {
runApp(QuickStartApp());
runApp(const QuickStartApp());
}
class QuickStartApp extends StatelessWidget {
const QuickStartApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Quick Start',
home: HomePage(),
home: const HomePage(),
routes: {
"/editor": (context) => EditorPage(),
"/editor": (context) => const EditorPage(),
},
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
final navigator = Navigator.of(context);
return Scaffold(
appBar: AppBar(title: Text("Quick Start")),
appBar: AppBar(title: const Text("Quick Start")),
body: Center(
child: FlatButton(
child: Text("Open editor"),
child: TextButton(
child: const Text("Open editor"),
onPressed: () => navigator.pushNamed("/editor"),
),
),
@@ -185,12 +203,15 @@ class EditorPageState extends State<EditorPage> {
void _saveDocument(BuildContext context) {
// Parchment documents can be easily serialized to JSON by passing to
// `jsonEncode` directly
final contents = jsonEncode(_controller.document);
final contents = jsonEncode(_controller!.document);
// For this example we save our document to a temporary file.
final file = File(Directory.systemTemp.path + "/quick_start.json");

final file = File('${Directory.systemTemp.path}/quick_start.json');
// And show a snack bar on success.
file.writeAsString(contents).then((_) {
Scaffold.of(context).showSnackBar(SnackBar(content: Text("Saved.")));
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Saved.')),
);
});
}
}
@@ -204,7 +225,7 @@ Note that `File.writeAsString` is an asynchronous method and returns Dart's
`Future.then`.

One more important bit here is that we pass `BuildContext` argument to
`_saveDocument`. This is required to get access to our page's `Scaffold` state, so that we can show
`_saveDocument`. This is required to get access to our page's `ScaffoldMessenger` state, so that we can show
a `SnackBar`.

Now we just need to add a button to the AppBar, so we need to modify `build`
@@ -224,13 +245,10 @@ class EditorPageState extends State<EditorPage> {
title: Text("Editor page"),
// <<< begin change
actions: <Widget>[
Builder(
builder: (context) =>
IconButton(
icon: Icon(Icons.save),
onPressed: () => _saveDocument(context),
),
)
IconButton(
icon: const Icon(Icons.save),
onPressed: () => _saveDocument(context),
),
],
// end change >>>
),
@@ -246,9 +264,6 @@ class EditorPageState extends State<EditorPage> {
}
```

We have to use `Builder` here for our icon button because we need `BuildContext`
which has access to `Scaffold` widget's state.

Now we can reload our app, hit "Save" button and see the snack bar.

[comment]: <> (<img src="https://github.com/fleather-editor/fleather/raw/master/assets/quick-start-rec-02.gif" width="600">)
@@ -317,32 +332,35 @@ class EditorPageState extends State<EditorPage> {
@override
Widget build(BuildContext context) {
// If _controller is null we show Material Design loader, otherwise
// display Fleather editor.
final Widget body = (_controller == null)
? Center(child: CircularProgressIndicator())
: FleatherrScaffold(
child: FleatherEditor(
padding: EdgeInsets.all(16),
controller: _controller,
focusNode: _focusNode,
),
);
return Scaffold(
appBar: AppBar(
title: Text("Editor page"),
title: const Text('Editor page'),
actions: <Widget>[
Builder(
builder: (context) =>
IconButton(
icon: Icon(Icons.save),
onPressed: () => _saveDocument(context),
),
)
IconButton(
icon: const Icon(Icons.save),
onPressed: () => _saveDocument(context),
),
],
),
body: body,
// Note that the editor requires special `FleatherScaffold` widget to be
// one of its parents.
body: _controller == null
? const Center(child: CircularProgressIndicator())
: Column(
children: [
if (!Platform.isAndroid && !Platform.isIOS)
FleatherToolbar.basic(controller: _controller!),
Expanded(
child: FleatherEditor(
padding: const EdgeInsets.all(16),
controller: _controller!,
focusNode: _focusNode,
),
),
if (Platform.isAndroid || Platform.isIOS)
FleatherToolbar.basic(controller: _controller!),
],
),
);
}
}
186 changes: 0 additions & 186 deletions content/en/docs/how-to/images.md

This file was deleted.

28 changes: 14 additions & 14 deletions layouts/index.html
Original file line number Diff line number Diff line change
@@ -2,8 +2,7 @@
<section class="section container-fluid mt-n3 pb-3">
<div class="row justify-content-center">
<div class="col-lg-12 text-center">
<!-- <h1 class="mt-0">{{ .Title }}</h1> -->
<img src="banner.png">
<img src="banner.png" alt="Fleather banner">
</div>
<div class="col-lg-9 col-xl-8 text-center">
<p class="lead"></p>
@@ -24,31 +23,32 @@ <h2 class="h4">All platforms supported</h2>
<p>Fully functional on iOS, Android, macos, Windows, Linux and Web</p>
</div>
<div class="col-lg-5">
<h2 class="h4">Editor</h2>
<h2 class="h4">Editing</h2>
<p>
<u>Undo/redo</u> functionality.
<u>Images</u> can be embedded as block elements or inline element.
<u>Links</u> can be embedded as inline elements.
Markdown and system <u>shortcuts</u> are supported.
<u>Undo/redo</u> and Markdown & system <u>shortcuts</u> functionalities nativement supported.
<u>Images</u> and <u>linked</u> can be embedded as block elements or inline element.
<br>
Find out <a href="/demo" target="_blank"><strong>more</strong></a>.
</p>
</div>
<div class="col-lg-5">
<h2 class="h4">Formatting</h2>
<p>
Inline attributes such as <strong>bold</strong>, <em>italic</em>, <s>strikethrough</s>, <u>underline</u> and
Text decorations include <strong>bold</strong>, <em>italic</em>, <s>strikethrough</s>,
<u>underline</u> and
<code>code</code>.
Line attributes can be assigned including direction, alignment, heading, indentation, ordered & unordered
list.
Block attributes including code, quote or embeds.
<br>
Supports multi-level 1. ordered/ - unordered list and <input type="checkbox"></input> check list.
<br>
Find out <a href="/demo" target="_blank"><strong>more</strong></a>.
</p>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-lg-5">
<h2 class="h4">Conversion</h2>
<h2 class="h4">Convert</h2>
<p>
<u>Markdown</u> codec enables encoding/decoding <code>Parchment</code> document.
<u>HTML</u> codec is also available
<u>Markdown</u> & <u>HTML</u> documents can be encoded/decoded to editor's native document model
</p>
</div>
<div class="col-lg-5">

0 comments on commit b48e015

Please sign in to comment.