Compare commits
6 Commits
master
...
feat/rich-
| Author | SHA1 | Date |
|---|---|---|
Ellet
|
d43106b1fe | 9 months ago |
|
Ellet
|
2f0aad214d | 9 months ago |
|
Ellet
|
ef856a7b8f | 9 months ago |
|
Ellet
|
2455ad0102 | 9 months ago |
|
Ellet
|
cb1be99d21 | 9 months ago |
|
Ellet
|
4c64002f14 | 9 months ago |
320 changed files with 4165 additions and 8589 deletions
@ -1 +1 @@ |
||||
blank_issues_enabled: true |
||||
blank_issues_enabled: false |
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,103 +0,0 @@ |
||||
# What is an `Attribute` |
||||
|
||||
An `attribute` is a property or characteristic that can be applied to text or a section of text within the editor to change its appearance or behavior. Attributes allow the user to style the text in various ways. |
||||
|
||||
# How do attributes work? |
||||
|
||||
An Attribute is applied to selected segments of text in the editor. Each attribute has an identifier and a value that determines how it should be applied to the text. For example, to apply bold to a text, an attribute with the identifier "bold" is used. When text is selected and an attribute is applied, the editor updates the visual representation of the text in real time. |
||||
|
||||
# Scope of an `Attribute` |
||||
|
||||
The attributes has an Scope that limit where start and end the `Attribute`. The Scope is called as `AttributeScope`. It has these options to be selected: |
||||
|
||||
```dart |
||||
enum AttributeScope { |
||||
inline, // just the selected text will apply the attribute (like: bold, italic or strike) |
||||
block, // all the paragraph will apply the attribute (like: Header, Alignment or CodeBlock) |
||||
embeds, // the attr will be taked as a different part of any paragraph or line, working as a block (By now not works as an inline) |
||||
ignore, // the attribute can be applied, but on Retain operations will be ignored |
||||
} |
||||
``` |
||||
|
||||
# How looks a `Attribute` |
||||
|
||||
The original `Attribute` class that you need to extend from if you want to create any custom attribute looks like: |
||||
|
||||
```dart |
||||
class Attribute<T> { |
||||
const Attribute( |
||||
this.key, |
||||
this.scope, |
||||
this.value, |
||||
); |
||||
|
||||
/// Unique key of this attribute. |
||||
final String key; |
||||
final AttributeScope scope; |
||||
final T value; |
||||
} |
||||
``` |
||||
|
||||
The key of any `Attribute` must be **unique** to avoid any conflict with the default implementations. |
||||
|
||||
#### Why `Attribute` class contains a **Generic** as a value |
||||
|
||||
This is the same reason why we can create `Block` styles, `Inline` styles and `Custom` styles. Having a **Generic** type value let us define any value as we want to recognize them later and apply it. |
||||
|
||||
### Example of an default attribute |
||||
|
||||
##### Inline Scope: |
||||
```dart |
||||
class BoldAttribute extends Attribute<bool> { |
||||
const BoldAttribute() : super('bold', AttributeScope.inline, true); |
||||
} |
||||
``` |
||||
|
||||
##### Block Scope: |
||||
|
||||
```dart |
||||
class HeaderAttribute extends Attribute<int?> { |
||||
const HeaderAttribute({int? level}) |
||||
: super('header', AttributeScope.block, level); |
||||
} |
||||
``` |
||||
If you want to see an example of an embed implementation you can see it [here](https://github.com/singerdmx/flutter-quill/blob/master/doc/custom_embed_blocks.md) |
||||
|
||||
### Example of a Custom Inline `Attribute` |
||||
|
||||
##### The Attribute |
||||
|
||||
```dart |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
|
||||
const String highlightKey = 'highlight'; |
||||
const AttributeScope highlightScope = AttributeScope.inline; |
||||
|
||||
class HighlightAttr extends Attribute<bool?> { |
||||
HighlightAttr(bool? value) : super(highlightKey, highlightScope, value); |
||||
} |
||||
``` |
||||
|
||||
##### Where should we add this `HighlightAttr`? |
||||
|
||||
On `QuillEditor` or `QuillEditorConfigurations` **doesn't exist** a param that let us pass our `Attribute` implementations. To make this more easy, we can use just `customStyleBuilder` param from `QuillEditorConfigurations`, that let us define a function to return a `TextStyle`. With this, we can define now our `HighlightAttr` |
||||
|
||||
##### The editor |
||||
```dart |
||||
QuillEditor.basic( |
||||
controller: controller, |
||||
configurations: QuillEditorConfigurations( |
||||
customStyleBuilder: (Attribute<dynamic> attribute) { |
||||
if (attribute.key.equals(highlightKey)) { |
||||
return TextStyle(color: Colors.black, backgroundColor: Colors.yellow); |
||||
} |
||||
//default paragraph style |
||||
return TextStyle(); |
||||
}, |
||||
), |
||||
); |
||||
``` |
||||
|
||||
Then, it should look as: |
||||
|
||||
 |
||||
@ -1,68 +0,0 @@ |
||||
# Search |
||||
|
||||
You can search the text of your document using the search toolbar button. |
||||
Enter the text and use the up/down buttons to move to the previous/next selection. |
||||
Use the 3 vertical dots icon to turn on case-sensitivity or whole word constraints. |
||||
|
||||
## Search configuration options |
||||
|
||||
By default, the content of Embed objects are not searched. |
||||
You can enable search by setting the [searchEmbedMode] in searchConfigurations: |
||||
|
||||
```dart |
||||
MyQuillEditor( |
||||
controller: _controller, |
||||
configurations: QuillEditorConfigurations( |
||||
searchConfigurations: const QuillSearchConfigurations( |
||||
searchEmbedMode: SearchEmbedMode.plainText, |
||||
), |
||||
), |
||||
... |
||||
), |
||||
``` |
||||
|
||||
### SearchEmbedMode.none (default option) |
||||
|
||||
Embed objects will not be included in searches. |
||||
|
||||
### SearchEmbedMode.rawData |
||||
|
||||
This is the simplest search option when your Embed objects use simple text that is also displayed to the user. |
||||
This option allows searching within custom Embed objects using the node's raw data [Embeddable.data]. |
||||
|
||||
### SearchEmbedMode.plainText |
||||
|
||||
This option is best for complex Embeds where the raw data contains text that is not visible to the user and/or contains textual data that is not suitable for searching. |
||||
For example, searching for '2024' would not be meaningful if the raw data is the full path of an image object (such as /user/temp/20240125/myimage.png). |
||||
In this case the image would be shown as a search hit but the user would not know why. |
||||
|
||||
This option allows searching within custom Embed objects using an override to the [toPlainText] method. |
||||
|
||||
```dart |
||||
class MyEmbedBuilder extends EmbedBuilder { |
||||
|
||||
@override |
||||
String toPlainText(Embed node) { |
||||
/// Convert [node] to the text that can be searched. |
||||
/// For example: convert to MyEmbeddable and use the |
||||
/// properties to return the searchable text. |
||||
final m = MyEmbeddable(node.value.data); |
||||
return '${m.property1}\t${m.property2}'; |
||||
} |
||||
... |
||||
``` |
||||
If [toPlainText] is not overridden, the base class implementation returns [Embed.kObjectReplacementCharacter] which is not searchable. |
||||
|
||||
### Strategy for mixed complex and simple Embed objects |
||||
|
||||
Select option [SearchEmbedMode.plainText] and override [toPlainText] to provide the searchable text. For your simple Embed objects provide the following override: |
||||
|
||||
```dart |
||||
class MySimpleEmbedBuilder extends EmbedBuilder { |
||||
|
||||
@override |
||||
String toPlainText(Embed node) { |
||||
return node.value.data; |
||||
} |
||||
... |
||||
``` |
||||
@ -1,252 +0,0 @@ |
||||
# What is Delta? |
||||
|
||||
`Delta` is a structured format used to represent text editing operations consistently and efficiently. It is especially useful in collaborative editors where multiple users may be editing the same document simultaneously. |
||||
|
||||
## How does Delta work? |
||||
|
||||
`Delta` consists of a list of operations. Each operation describes a change in the document's content. The operations can be of three types: insertion (`insert`), deletion (`delete`), and retention (`retain`). These operations are combined to describe any change in the document's state. |
||||
|
||||
You can import `Delta` and `Operation` class using: |
||||
|
||||
```dart |
||||
import 'package:flutter_quill/dart_quill_delta.dart'; |
||||
``` |
||||
|
||||
# What is a `Operation`? |
||||
|
||||
Operations are the actions performed on the document to modify its content. Each operation can be an insertion, deletion, or retention, and is executed sequentially to transform the document's state. |
||||
|
||||
## How Do `Operations` Work? |
||||
|
||||
`Operations` are applied in the order they are defined in the `Delta`. Starting with the initial state of the `Document`, the operations are applied one by one, updating the document's state at each step. |
||||
|
||||
Example of a `Operation` Code: |
||||
|
||||
```dart |
||||
[ |
||||
// Adds the text "Hello" to the editor's content |
||||
{ "insert": "Hello" }, |
||||
// Retains the first 5 characters of the existing content, |
||||
// and applies the "bold" attribute to those characters. |
||||
{ "retain": 5, "attributes": { "bold": true } }, |
||||
// Deletes 2 characters starting from the current position in the editor's content. |
||||
{ "delete": 2 } |
||||
] |
||||
``` |
||||
|
||||
# Types of Operations in Delta |
||||
|
||||
## 1. Insertion (`Insert`) |
||||
|
||||
An insertion adds new content to the document. The `Insert` operation contains the text or data being added. |
||||
|
||||
Example of `Insert` operation: |
||||
|
||||
```dart |
||||
import 'package:flutter_quill/dart_quill_delta.dart'; |
||||
|
||||
void main() { |
||||
// Create a Delta with a text insertion |
||||
final delta = Delta() |
||||
..insert('Hello, world!\n') |
||||
..insert('This is an example.\n', {'bold': true}) |
||||
..delete(10); // Remove the first 10 characters |
||||
|
||||
print(delta); // Output: [{insert: "Hello, world!\n"}, {insert: "This is an example.\n", attributes: {bold: true}}, {delete: 10}] |
||||
} |
||||
``` |
||||
|
||||
## 2. Deletion (`Delete`) |
||||
|
||||
In Quill, operations are a way to represent changes to the editor's content. Each operation has a type and a set of properties that indicate what has changed and how.`Delete` operations are a specific type of operation that is used to remove content from the editor. |
||||
|
||||
## Delete Operations |
||||
|
||||
A Delete operation is used to remove a portion of the editor's content. The Delete operation has the following format: |
||||
|
||||
```dart |
||||
Delta() |
||||
..retain(<number>) |
||||
..delete(<number>); |
||||
``` |
||||
|
||||
Where: |
||||
|
||||
- **retain**: (Optional) The number of characters to retain before deletion is performed. |
||||
- **delete**: The number of characters to delete. |
||||
|
||||
Basic example |
||||
|
||||
Let's say you have the following content in the editor: |
||||
|
||||
```Arduino |
||||
"Hello, world!" |
||||
``` |
||||
|
||||
And you want to remove the word "world". The corresponding Delete operation could be: |
||||
|
||||
```dart |
||||
Delta() |
||||
..retain(6) |
||||
..delete(7); |
||||
``` |
||||
|
||||
Here the first **7** characters are being retained ("Hello, ") and then 6 characters are being removed ("world!"). |
||||
|
||||
### Behavior of Delete Operations |
||||
|
||||
**Text Deletion**: The `Delete` operation removes text in the editor document. The characters removed are those that are in the range specified by the operation. |
||||
|
||||
**Combination with retain**: The `Delete` operation is often combined with the retain operation to specify which part of the content should remain intact and which part should be removed. For example, if you want to delete a specific section of text, you can use retain to keep the text before and after the section to be deleted. |
||||
|
||||
**Range Calculation**: When a `Delete` operation is applied, the range of text to be deleted is calculated based on the value of retain and delete. It is important to understand how retain and delete are combined to perform correct deletion. |
||||
|
||||
Example of `Delete` operation using `QuillController` |
||||
|
||||
```dart |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
import 'package:flutter_quill/dart_quill_delta.dart'; |
||||
|
||||
QuillController _quillController = QuillController( |
||||
document: Document.fromJson([{'insert': 'Hello, world!'}]), |
||||
selection: TextSelection.collapsed(offset: 0), |
||||
); |
||||
|
||||
// Create a delta with the retain and delete operations |
||||
final delta = Delta() |
||||
..retain(6) // Retain "Hello, " |
||||
..delete(7); // Delete "world!" |
||||
|
||||
// Apply the delta to update the content of the editor |
||||
_quillController.compose(delta, ChangeSource.local); |
||||
``` |
||||
|
||||
In this example, the current content of the editor is updated to reflect the removal of the word "world." |
||||
|
||||
## 3. Retention (`Retain`) |
||||
|
||||
`Retain` operations are particularly important because they allow you to apply attributes to specific parts of the content without modifying the content itself. A Retain operation consists of two parts: |
||||
|
||||
- **Index**: The length of the content to retain unchanged. |
||||
- **Attributes**: An optional object containing the attributes to apply. |
||||
|
||||
Example of a `Retain` Operation |
||||
|
||||
Suppose we have the following content in an editor: |
||||
|
||||
```arduino |
||||
"Hello world" |
||||
``` |
||||
|
||||
And we want to apply bold formatting to the word "world." The `Retain` operation would be represented in a `Delta` as follows: |
||||
|
||||
```dart |
||||
[ |
||||
{ "insert": "Hello, " }, |
||||
{ "retain": 7 }, |
||||
{ "retain": 5, "attributes": { "bold": true } } |
||||
] |
||||
``` |
||||
|
||||
This Delta is interpreted as follows: |
||||
|
||||
- `{ "retain": 7 }`: Retains the first **7** characters ("Hello, "). |
||||
- `{ "retain": 5, "attributes": { "bold": true } }`: Retains the next **5** characters ("world") and applies the bold attribute. |
||||
|
||||
### Applications of Retain |
||||
|
||||
Retain operations are useful for various tasks in document editing, such as: |
||||
|
||||
- **Text Formatting**: Applying styles (bold, italic, underline, etc.) to specific segments without altering the content. |
||||
- **Annotations**: Adding metadata or annotations to specific sections of text. |
||||
- **Content Preservation**: Ensuring that certain parts of the document remain unchanged during complex editing operations. |
||||
|
||||
Using Directly `Delta` class: |
||||
|
||||
```dart |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
import 'package:flutter_quill/dart_quill_delta.dart'; |
||||
|
||||
void main() { |
||||
// Create a Delta that retains 10 characters |
||||
QuillController _quillController = QuillController( |
||||
document: Document.fromJson([{'insert': 'Hello, world!'}]), |
||||
selection: TextSelection.collapsed(offset: 0), |
||||
); |
||||
|
||||
// Create a delta with the retain and delete operations |
||||
final delta = Delta() |
||||
..retain(6) // Retain "Hello, " |
||||
|
||||
// Apply the delta to update the content of the editor |
||||
_quillController.compose(delta, ChangeSource.local); |
||||
} |
||||
``` |
||||
|
||||
# Transformations |
||||
|
||||
Transformations are used to combine two Deltas and produce a third Delta that represents the combination of both operations. |
||||
|
||||
Example 1: Transformation with Deletions |
||||
|
||||
Deltas to combine: |
||||
|
||||
- **Delta A**: `[{insert: "Flutter"}, {retain: 3}, {insert: "Quill"}]` |
||||
- **Delta B**: `[{retain: 6}, {delete: 4}, {insert: "Editor"}]` |
||||
|
||||
```dart |
||||
|
||||
import 'package:flutter_quill/dart_quill_delta.dart' as quill; |
||||
|
||||
void main() { |
||||
// Defining Delta A |
||||
final deltaA = quill.Delta() |
||||
..insert('Flutter') |
||||
..retain(3) |
||||
..insert('Quill'); |
||||
|
||||
// Defining Delta B |
||||
final deltaB = quill.Delta() |
||||
..retain(7) // retain: Flutter |
||||
..delete(5) // delete: Quill |
||||
..insert('Editor'); |
||||
|
||||
// applying transformation |
||||
final result = deltaA.transform(deltaB); |
||||
|
||||
print(result.toJson()); // output: [{insert: "FlutterEditor"}] |
||||
} |
||||
``` |
||||
|
||||
Example 2: Complex Transformation |
||||
|
||||
Deltas to combine: |
||||
|
||||
- **Delta A**: `[{insert: "Hello World"}]` |
||||
- **Delta B**: `[{retain: 6}, {delete: 5}, {insert: "Flutter"}]` |
||||
|
||||
```dart |
||||
import 'package:flutter_quill/dart_quill_delta.dart' as quill; |
||||
|
||||
void main() { |
||||
|
||||
// Defining Delta A |
||||
final deltaA = quill.Delta() |
||||
..insert('Hello World'); |
||||
|
||||
// Defining Delta B |
||||
final deltaB = quill.Delta() |
||||
..retain(6) // retain: 'Hello ' |
||||
..delete(5) // delete: 'World' |
||||
..insert('Flutter'); |
||||
|
||||
// Applying transformations |
||||
final result = deltaA.transform(deltaB); |
||||
|
||||
print(result.toJson()); // output: [{insert: "Hello Flutter"}] |
||||
} |
||||
``` |
||||
|
||||
# Why Use Delta Instead of Another Format? |
||||
|
||||
Delta offers a structured and efficient way to represent changes in text documents, especially in collaborative environments. Its operation-based design allows for easy synchronization, transformation, and conflict handling, which is essential for real-time text editing applications. Other formats may not provide the same level of granularity and control over edits and transformations. |
||||
@ -1,142 +0,0 @@ |
||||
## Rule |
||||
|
||||
`Rule` in `flutter_quill` is a handler for specific operations within the editor. They define how to apply, modify, or delete content based on user actions. Each Rule corresponds to a type of operation that the editor can perform. |
||||
|
||||
### RuleType |
||||
|
||||
There are three main `RuleTypes` supported in `flutter_quill`, each serving a distinct purpose: |
||||
|
||||
- **insert**: Handles operations related to inserting new content into the editor. This includes inserting text, images, or any other supported media. |
||||
|
||||
- **delete**: Manages operations that involve deleting content from the editor. This can include deleting characters, lines, or entire blocks of content. |
||||
|
||||
- **format**: Deals with operations that apply formatting changes to the content in the editor. This could involve applying styles such as bold, italic, underline, or changing text alignment, among others. |
||||
|
||||
### How Rules Work |
||||
|
||||
When a user interacts with the editor in `flutter_quill`, their actions are translated into one of the predefined `RuleType`. For instance: |
||||
|
||||
- When the user types a new character, an **insert** Rule is triggered to handle the insertion of that character into the editor's content. |
||||
- When the user selects and deletes a block of text, a **delete** Rule is used to remove that selection from the editor. |
||||
- Applying formatting, such as making text bold or italic, triggers a **format** Rule to update the style of the selected text. |
||||
|
||||
`Rule` is designed to be modular and configurable, allowing developers to extend or customize editor behavior as needed. By defining how each RuleType operates, `flutter_quill` ensures consistent and predictable behavior across different editing operations. |
||||
|
||||
|
||||
### Example of a custom `Rule` |
||||
|
||||
In this case, we will use a simple example. We will create a `Rule` that is responsible for detecting any word that is surrounded by "*" just as any `Markdown` editor would do for italics. |
||||
|
||||
In order for it to be detected while the user writes character by character, what we will do is extend the `InsertRule` class that is responsible for being called while the user writes a word character by character. |
||||
|
||||
```dart |
||||
/// Applies italic format to text segment (which is surrounded by *) |
||||
/// when user inserts space character after it. |
||||
class AutoFormatItalicRule extends InsertRule { |
||||
const AutoFormatItalicRule(); |
||||
|
||||
static const _italicPattern = r'\*(.+)\*'; |
||||
|
||||
RegExp get italicRegExp => RegExp( |
||||
_italicPattern, |
||||
caseSensitive: false, |
||||
); |
||||
|
||||
@override |
||||
Delta? applyRule( |
||||
Document document, |
||||
int index, { |
||||
int? len, |
||||
Object? data, |
||||
Attribute? attribute, |
||||
Object? extraData, |
||||
}) { |
||||
// Only format when inserting text. |
||||
if (data is! String) return null; |
||||
|
||||
// Get current text. |
||||
final entireText = document.toPlainText(); |
||||
|
||||
// Get word before insertion. |
||||
final leftWordPart = entireText |
||||
// Keep all text before insertion. |
||||
.substring(0, index) |
||||
// Keep last paragraph. |
||||
.split('\n') |
||||
.last |
||||
// Keep last word. |
||||
.split(' ') |
||||
.last |
||||
.trimLeft(); |
||||
|
||||
// Get word after insertion. |
||||
final rightWordPart = entireText |
||||
// Keep all text after insertion. |
||||
.substring(index) |
||||
// Keep first paragraph. |
||||
.split('\n') |
||||
.first |
||||
// Keep first word. |
||||
.split(' ') |
||||
.first |
||||
.trimRight(); |
||||
|
||||
// Build the segment of affected words. |
||||
final affectedWords = '$leftWordPart$data$rightWordPart'; |
||||
|
||||
// Check for italic patterns. |
||||
final italicMatches = italicRegExp.allMatches(affectedWords); |
||||
|
||||
// If there are no matches, do not apply any format. |
||||
if (italicMatches.isEmpty) return null; |
||||
|
||||
// Build base delta. |
||||
// The base delta is a simple insertion delta. |
||||
final baseDelta = Delta() |
||||
..retain(index) |
||||
..insert(data); |
||||
|
||||
// Get unchanged text length. |
||||
final unmodifiedLength = index - leftWordPart.length; |
||||
|
||||
// Create formatter delta. |
||||
// The formatter delta will include italic formatting when needed. |
||||
final formatterDelta = Delta()..retain(unmodifiedLength); |
||||
|
||||
var previousEndRelativeIndex = 0; |
||||
|
||||
void retainWithAttributes(int start, int end, Map<String, dynamic> attributes) { |
||||
final separationLength = start - previousEndRelativeIndex; |
||||
final segment = affectedWords.substring(start, end); |
||||
formatterDelta |
||||
..retain(separationLength) |
||||
..retain(segment.length, attributes); |
||||
previousEndRelativeIndex = end; |
||||
} |
||||
|
||||
for (final match in italicMatches) { |
||||
final matchStart = match.start; |
||||
final matchEnd = match.end; |
||||
|
||||
retainWithAttributes(matchStart + 1, matchEnd - 1, const ItalicAttribute().toJson()); |
||||
} |
||||
|
||||
// Get remaining text length. |
||||
final remainingLength = affectedWords.length - previousEndRelativeIndex; |
||||
|
||||
// Remove italic from remaining non-italic text. |
||||
formatterDelta.retain(remainingLength); |
||||
|
||||
// Build resulting change delta. |
||||
return baseDelta.compose(formatterDelta); |
||||
} |
||||
} |
||||
``` |
||||
|
||||
To apply any custom `Rule` you can use `setCustomRules` that is exposed on `Document` |
||||
|
||||
```dart |
||||
quillController.document.setCustomRules([const AutoFormatItalicRule()]); |
||||
``` |
||||
|
||||
You can see a example video [here](https://e.pcloud.link/publink/show?code=XZ2NzgZrb888sWjuxFjzWoBpe7HlLymKp3V) |
||||
@ -0,0 +1,12 @@ |
||||
import 'package:cross_file/cross_file.dart' show XFile; |
||||
|
||||
typedef MediaFileUrl = String; |
||||
typedef MediaFilePicker = Future<XFile?> Function(QuillMediaType mediaType); |
||||
typedef MediaPickedCallback = Future<MediaFileUrl> Function(XFile file); |
||||
|
||||
enum QuillMediaType { image, video } |
||||
|
||||
extension QuillMediaTypeX on QuillMediaType { |
||||
bool get isImage => this == QuillMediaType.image; |
||||
bool get isVideo => this == QuillMediaType.video; |
||||
} |
||||
@ -1,7 +1,7 @@ |
||||
import 'package:flutter/material.dart'; |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
|
||||
import 'models/formula_configurations.dart'; |
||||
import '../../../models/config/formula/formula_configurations.dart'; |
||||
|
||||
class QuillToolbarFormulaButton extends StatelessWidget { |
||||
const QuillToolbarFormulaButton({ |
||||
@ -1,8 +1,8 @@ |
||||
import 'package:flutter/widgets.dart' show BuildContext; |
||||
import 'package:meta/meta.dart' show immutable; |
||||
|
||||
import '../../editor/image/image_embed_types.dart'; |
||||
import '../video/models/video.dart'; |
||||
import '../../image/editor/image_embed_types.dart'; |
||||
import '../../video/video.dart'; |
||||
|
||||
enum CameraAction { |
||||
video, |
||||
@ -0,0 +1,277 @@ |
||||
import 'package:flutter/material.dart'; |
||||
import 'package:flutter_quill/flutter_quill.dart' show QuillDialogTheme; |
||||
import 'package:flutter_quill/translations.dart'; |
||||
|
||||
import '../../utils/patterns.dart'; |
||||
|
||||
enum LinkType { |
||||
video, |
||||
image, |
||||
} |
||||
|
||||
class TypeLinkDialog extends StatefulWidget { |
||||
const TypeLinkDialog({ |
||||
required this.linkType, |
||||
this.dialogTheme, |
||||
this.link, |
||||
this.linkRegExp, |
||||
super.key, |
||||
}); |
||||
|
||||
final QuillDialogTheme? dialogTheme; |
||||
final String? link; |
||||
final RegExp? linkRegExp; |
||||
final LinkType linkType; |
||||
|
||||
@override |
||||
TypeLinkDialogState createState() => TypeLinkDialogState(); |
||||
} |
||||
|
||||
class TypeLinkDialogState extends State<TypeLinkDialog> { |
||||
late String _link; |
||||
late TextEditingController _controller; |
||||
RegExp? _linkRegExp; |
||||
|
||||
@override |
||||
void initState() { |
||||
super.initState(); |
||||
_link = widget.link ?? ''; |
||||
_controller = TextEditingController(text: _link); |
||||
|
||||
_linkRegExp = widget.linkRegExp; |
||||
} |
||||
|
||||
@override |
||||
void dispose() { |
||||
_controller.dispose(); |
||||
super.dispose(); |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
return AlertDialog( |
||||
backgroundColor: widget.dialogTheme?.dialogBackgroundColor, |
||||
content: TextField( |
||||
keyboardType: TextInputType.url, |
||||
textInputAction: TextInputAction.done, |
||||
maxLines: null, |
||||
style: widget.dialogTheme?.inputTextStyle, |
||||
decoration: InputDecoration( |
||||
labelText: context.loc.pasteLink, |
||||
hintText: widget.linkType == LinkType.image |
||||
? context.loc.pleaseEnterAValidImageURL |
||||
: context.loc.pleaseEnterAValidVideoURL, |
||||
labelStyle: widget.dialogTheme?.labelTextStyle, |
||||
floatingLabelStyle: widget.dialogTheme?.labelTextStyle, |
||||
), |
||||
autofocus: true, |
||||
onChanged: _linkChanged, |
||||
controller: _controller, |
||||
onEditingComplete: () { |
||||
if (!_canPress()) { |
||||
return; |
||||
} |
||||
_applyLink(); |
||||
}, |
||||
), |
||||
actions: [ |
||||
TextButton( |
||||
onPressed: _canPress() ? _applyLink : null, |
||||
child: Text( |
||||
context.loc.ok, |
||||
style: widget.dialogTheme?.labelTextStyle, |
||||
), |
||||
), |
||||
], |
||||
); |
||||
} |
||||
|
||||
void _linkChanged(String value) { |
||||
setState(() { |
||||
_link = value; |
||||
}); |
||||
} |
||||
|
||||
void _applyLink() { |
||||
Navigator.pop(context, _link.trim()); |
||||
} |
||||
|
||||
RegExp get linkRegExp { |
||||
final customRegExp = _linkRegExp; |
||||
if (customRegExp != null) { |
||||
return customRegExp; |
||||
} |
||||
switch (widget.linkType) { |
||||
case LinkType.video: |
||||
if (youtubeRegExp.hasMatch(_link)) { |
||||
return youtubeRegExp; |
||||
} |
||||
return videoRegExp; |
||||
case LinkType.image: |
||||
return imageRegExp; |
||||
} |
||||
} |
||||
|
||||
bool _canPress() { |
||||
if (_link.isEmpty) { |
||||
return false; |
||||
} |
||||
if (widget.linkType == LinkType.image) {} |
||||
return _link.isNotEmpty && linkRegExp.hasMatch(_link); |
||||
} |
||||
} |
||||
|
||||
// @immutable |
||||
// class ImageVideoUtils { |
||||
// const ImageVideoUtils._(); |
||||
// static Future<MediaPickSetting?> selectMediaPickSetting( |
||||
// BuildContext context, |
||||
// ) => |
||||
// showDialog<MediaPickSetting>( |
||||
// context: context, |
||||
// builder: (ctx) => AlertDialog( |
||||
// contentPadding: EdgeInsets.zero, |
||||
// content: Column( |
||||
// mainAxisSize: MainAxisSize.min, |
||||
// children: [ |
||||
// TextButton.icon( |
||||
// icon: const Icon( |
||||
// Icons.collections, |
||||
// color: Colors.orangeAccent, |
||||
// ), |
||||
// label: Text('Gallery'.i18n), |
||||
// onPressed: () => Navigator.pop(ctx, |
||||
// MediaPickSetting.gallery), |
||||
// ), |
||||
// TextButton.icon( |
||||
// icon: const Icon( |
||||
// Icons.link, |
||||
// color: Colors.cyanAccent, |
||||
// ), |
||||
// label: Text('Link'.i18n), |
||||
// onPressed: () => Navigator.pop(ctx, MediaPickSetting.link), |
||||
// ) |
||||
// ], |
||||
// ), |
||||
// ), |
||||
// ); |
||||
|
||||
// /// For image picking logic |
||||
// static Future<void> handleImageButtonTap( |
||||
// BuildContext context, |
||||
// QuillController controller, |
||||
// ImageSource imageSource, |
||||
// OnImagePickCallback onImagePickCallback, { |
||||
// FilePickImpl? filePickImpl, |
||||
// WebImagePickImpl? webImagePickImpl, |
||||
// }) async { |
||||
// String? imageUrl; |
||||
// if (kIsWeb) { |
||||
// if (webImagePickImpl != null) { |
||||
// imageUrl = await webImagePickImpl(onImagePickCallback); |
||||
// return; |
||||
// } |
||||
// final file = await ImagePicker() |
||||
//.pickImage(source: ImageSource.gallery); |
||||
// imageUrl = file?.path; |
||||
// if (imageUrl == null) { |
||||
// return; |
||||
// } |
||||
// } else if (isMobile()) { |
||||
// imageUrl = await _pickImage(imageSource, onImagePickCallback); |
||||
// } else { |
||||
// assert(filePickImpl != null, 'Desktop must provide filePickImpl'); |
||||
// imageUrl = |
||||
// await _pickImageDesktop |
||||
//(context, filePickImpl!, onImagePickCallback); |
||||
// } |
||||
|
||||
// if (imageUrl == null) { |
||||
// return; |
||||
// } |
||||
|
||||
// controller.insertImageBlock( |
||||
// imageUrl: imageUrl, |
||||
// ); |
||||
// } |
||||
|
||||
// static Future<String?> _pickImage( |
||||
// ImageSource source, |
||||
// OnImagePickCallback onImagePickCallback, |
||||
// ) async { |
||||
// final pickedFile = await ImagePicker().pickImage(source: source); |
||||
// if (pickedFile == null) { |
||||
// return null; |
||||
// } |
||||
|
||||
// return onImagePickCallback(File(pickedFile.path)); |
||||
// } |
||||
|
||||
// static Future<String?> _pickImageDesktop( |
||||
// BuildContext context, |
||||
// FilePickImpl filePickImpl, |
||||
// OnImagePickCallback onImagePickCallback, |
||||
// ) async { |
||||
// final filePath = await filePickImpl(context); |
||||
// if (filePath == null || filePath.isEmpty) return null; |
||||
|
||||
// final file = File(filePath); |
||||
// return onImagePickCallback(file); |
||||
// } |
||||
|
||||
// /// For video picking logic |
||||
// static Future<void> handleVideoButtonTap( |
||||
// BuildContext context, |
||||
// QuillController controller, |
||||
// ImageSource videoSource, |
||||
// OnVideoPickCallback onVideoPickCallback, { |
||||
// FilePickImpl? filePickImpl, |
||||
// WebVideoPickImpl? webVideoPickImpl, |
||||
// }) async { |
||||
// final index = controller.selection.baseOffset; |
||||
// final length = controller.selection.extentOffset - index; |
||||
|
||||
// String? videoUrl; |
||||
// if (kIsWeb) { |
||||
// assert( |
||||
// webVideoPickImpl != null, |
||||
// 'Please provide webVideoPickImpl for Web ' |
||||
// 'in the options of this button', |
||||
// ); |
||||
// videoUrl = await webVideoPickImpl!(onVideoPickCallback); |
||||
// } else if (isMobile()) { |
||||
// videoUrl = await _pickVideo(videoSource, onVideoPickCallback); |
||||
// } else { |
||||
// assert(filePickImpl != null, 'Desktop must provide filePickImpl'); |
||||
// videoUrl = |
||||
// await _pickVideoDesktop(context, filePickImpl!, |
||||
// onVideoPickCallback); |
||||
// } |
||||
|
||||
// if (videoUrl != null) { |
||||
// controller.replaceText(index, length, BlockEmbed.video(videoUrl), |
||||
// null); |
||||
// } |
||||
// } |
||||
|
||||
// static Future<String?> _pickVideo( |
||||
// ImageSource source, OnVideoPickCallback onVideoPickCallback) async { |
||||
// final pickedFile = await ImagePicker().pickVideo(source: source); |
||||
// if (pickedFile == null) { |
||||
// return null; |
||||
// } |
||||
|
||||
// return onVideoPickCallback(File(pickedFile.path)); |
||||
// } |
||||
|
||||
// static Future<String?> _pickVideoDesktop( |
||||
// BuildContext context, |
||||
// FilePickImpl filePickImpl, |
||||
// OnVideoPickCallback onVideoPickCallback) async { |
||||
// final filePath = await filePickImpl(context); |
||||
// if (filePath == null || filePath.isEmpty) return null; |
||||
|
||||
// final file = File(filePath); |
||||
// return onVideoPickCallback(file); |
||||
// } |
||||
// } |
||||
@ -0,0 +1,537 @@ |
||||
// // ignore_for_file: use_build_context_synchronously |
||||
|
||||
// import 'dart:math' as math; |
||||
// import 'dart:ui'; |
||||
|
||||
// import 'package:flutter/foundation.dart'; |
||||
// import 'package:flutter/material.dart'; |
||||
// import 'package:flutter_quill/extensions.dart'; |
||||
// import 'package:flutter_quill/flutter_quill.dart'; |
||||
// import 'package:flutter_quill/translations.dart'; |
||||
// import 'package:image_picker/image_picker.dart'; |
||||
|
||||
// import '../../../models/config/toolbar/buttons/media_button.dart'; |
||||
// import '../../embed_types.dart'; |
||||
// import '../utils/image_video_utils.dart'; |
||||
|
||||
// /// Widget which combines [ImageButton] and [VideButton] widgets. This widget |
||||
// /// has more customization and uses dialog similar to one which is used |
||||
// /// on [http://quilljs.com]. |
||||
// class QuillToolbarMediaButton extends StatelessWidget { |
||||
// QuillToolbarMediaButton({ |
||||
// required this.controller, |
||||
// this.options, |
||||
// super.key, |
||||
// }) : assert(options.type == QuillMediaType.image, |
||||
// 'Video selection is not supported yet'); |
||||
|
||||
// final QuillController controller; |
||||
// final QuillToolbarMediaButtonOptions options; |
||||
|
||||
// double _iconSize(BuildContext context) { |
||||
// final baseFontSize = baseButtonExtraOptions(context).globalIconSize; |
||||
// final iconSize = options.iconSize; |
||||
// return iconSize ?? baseFontSize; |
||||
// } |
||||
|
||||
// VoidCallback? _afterButtonPressed(BuildContext context) { |
||||
// return options.afterButtonPressed ?? |
||||
// baseButtonExtraOptions(context).afterButtonPressed; |
||||
// } |
||||
|
||||
// QuillIconTheme? _iconTheme(BuildContext context) { |
||||
// return options.iconTheme ?? baseButtonExtraOptions(context).iconTheme; |
||||
// } |
||||
|
||||
// QuillToolbarBaseButtonOptions baseButtonExtraOptions( |
||||
//BuildContext context) { |
||||
// return context.requireQuillToolbarBaseButtonOptions; |
||||
// } |
||||
|
||||
// (IconData, String) get _defaultData { |
||||
// switch (options.type) { |
||||
// case QuillMediaType.image: |
||||
// return (Icons.perm_media, 'Photo media button'); |
||||
// case QuillMediaType.video: |
||||
// throw UnsupportedError('The video is not supported yet.'); |
||||
// } |
||||
// } |
||||
|
||||
// IconData _iconData(BuildContext context) { |
||||
// return options.iconData ?? |
||||
// baseButtonExtraOptions(context).iconData ?? |
||||
// _defaultData.$1; |
||||
// } |
||||
|
||||
// String _tooltip(BuildContext context) { |
||||
// return options.tooltip ?? |
||||
// baseButtonExtraOptions(context).tooltip ?? |
||||
// _defaultData.$2; |
||||
// // ('Camera'.i18n); |
||||
// } |
||||
|
||||
// void _sharedOnPressed(BuildContext context) { |
||||
// _onPressedHandler(context); |
||||
// _afterButtonPressed(context); |
||||
// } |
||||
|
||||
// @override |
||||
// Widget build(BuildContext context) { |
||||
// final tooltip = _tooltip(context); |
||||
// final iconSize = _iconSize(context); |
||||
// final iconData = _iconData(context); |
||||
// final childBuilder = |
||||
// options.childBuilder ?? baseButtonExtraOptions(context).childBuilder; |
||||
// final iconTheme = _iconTheme(context); |
||||
|
||||
// if (childBuilder != null) { |
||||
// return childBuilder( |
||||
// QuillToolbarMediaButtonOptions( |
||||
// type: options.type, |
||||
// onMediaPickedCallback: options.onMediaPickedCallback, |
||||
// onImagePickCallback: options.onImagePickCallback, |
||||
// onVideoPickCallback: options.onVideoPickCallback, |
||||
// iconData: iconData, |
||||
// afterButtonPressed: _afterButtonPressed(context), |
||||
// autovalidateMode: options.autovalidateMode, |
||||
// childrenSpacing: options.childrenSpacing, |
||||
// dialogBarrierColor: options.dialogBarrierColor, |
||||
// dialogTheme: options.dialogTheme, |
||||
// filePickImpl: options.filePickImpl, |
||||
// fillColor: options.fillColor, |
||||
// galleryButtonText: options.galleryButtonText, |
||||
// iconTheme: iconTheme, |
||||
// iconSize: iconSize, |
||||
// iconButtonFactor: iconButtonFactor, |
||||
// hintText: options.hintText, |
||||
// labelText: options.labelText, |
||||
// submitButtonSize: options.submitButtonSize, |
||||
// linkButtonText: options.linkButtonText, |
||||
// mediaFilePicker: options.mediaFilePicker, |
||||
// submitButtonText: options.submitButtonText, |
||||
// validationMessage: options.validationMessage, |
||||
// webImagePickImpl: options.webImagePickImpl, |
||||
// webVideoPickImpl: options.webVideoPickImpl, |
||||
// tooltip: options.tooltip, |
||||
// ), |
||||
// QuillToolbarMediaButtonExtraOptions( |
||||
// context: context, |
||||
// controller: controller, |
||||
// onPressed: () => _sharedOnPressed(context), |
||||
// ), |
||||
// ); |
||||
// } |
||||
|
||||
// final theme = Theme.of(context); |
||||
|
||||
// final iconColor = |
||||
// options.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color; |
||||
// final iconFillColor = options.iconTheme?.iconUnselectedFillColor ?? |
||||
// options.fillColor ?? |
||||
// theme.canvasColor; |
||||
|
||||
// return QuillToolbarIconButton( |
||||
// icon: Icon(iconData, size: iconSize, color: iconColor), |
||||
// tooltip: tooltip, |
||||
// highlightElevation: 0, |
||||
// hoverElevation: 0, |
||||
// size: iconSize * iconButtonFactor, |
||||
// fillColor: iconFillColor, |
||||
// borderRadius: iconTheme?.borderRadius ?? 2, |
||||
// onPressed: () => _sharedOnPressed(context), |
||||
// ); |
||||
// } |
||||
|
||||
// Future<void> _onPressedHandler(BuildContext context) async { |
||||
// if (options.onMediaPickedCallback == null) { |
||||
// _inputLink(context); |
||||
// return; |
||||
// } |
||||
// final mediaSource = await showDialog<MediaPickSetting>( |
||||
// context: context, |
||||
// builder: (_) => MediaSourceSelectorDialog( |
||||
// dialogTheme: options.dialogTheme, |
||||
// galleryButtonText: options.galleryButtonText, |
||||
// linkButtonText: options.linkButtonText, |
||||
// ), |
||||
// ); |
||||
// if (mediaSource == null) { |
||||
// return; |
||||
// } |
||||
// switch (mediaSource) { |
||||
// case MediaPickSetting.gallery: |
||||
// await _pickImage(); |
||||
// break; |
||||
// case MediaPickSetting.link: |
||||
// _inputLink(context); |
||||
// break; |
||||
// case MediaPickSetting.camera: |
||||
// await ImageVideoUtils.handleImageButtonTap( |
||||
// context, |
||||
// controller, |
||||
// ImageSource.camera, |
||||
// options.onImagePickCallback, |
||||
// filePickImpl: options.filePickImpl, |
||||
// webImagePickImpl: options.webImagePickImpl, |
||||
// ); |
||||
// break; |
||||
// case MediaPickSetting.video: |
||||
// await ImageVideoUtils.handleVideoButtonTap( |
||||
// context, |
||||
// controller, |
||||
// ImageSource.camera, |
||||
// options.onVideoPickCallback, |
||||
// filePickImpl: options.filePickImpl, |
||||
// webVideoPickImpl: options.webVideoPickImpl, |
||||
// ); |
||||
// break; |
||||
// } |
||||
// } |
||||
|
||||
// Future<void> _pickImage() async { |
||||
// if (!(kIsWeb || isMobile() || isDesktop())) { |
||||
// throw UnsupportedError( |
||||
// 'Unsupported target platform: ${defaultTargetPlatform.name}', |
||||
// ); |
||||
// } |
||||
|
||||
// final mediaFileUrl = await _pickMediaFileUrl(); |
||||
|
||||
// if (mediaFileUrl != null) { |
||||
// final index = controller.selection.baseOffset; |
||||
// final length = controller.selection.extentOffset - index; |
||||
// controller.replaceText( |
||||
// index, |
||||
// length, |
||||
// BlockEmbed.image(mediaFileUrl), |
||||
// null, |
||||
// ); |
||||
// } |
||||
// } |
||||
|
||||
// Future<MediaFileUrl?> _pickMediaFileUrl() async { |
||||
// final mediaFile = await options.mediaFilePicker?.call(options.type); |
||||
// return mediaFile != null |
||||
// ? options.onMediaPickedCallback?.call(mediaFile) |
||||
// : null; |
||||
// } |
||||
|
||||
// void _inputLink(BuildContext context) { |
||||
// showDialog<String>( |
||||
// context: context, |
||||
// builder: (_) => MediaLinkDialog( |
||||
// dialogTheme: options.dialogTheme, |
||||
// labelText: options.labelText, |
||||
// hintText: options.hintText, |
||||
// buttonText: options.submitButtonText, |
||||
// buttonSize: options.submitButtonSize, |
||||
// childrenSpacing: options.childrenSpacing, |
||||
// autovalidateMode: options.autovalidateMode, |
||||
// validationMessage: options.validationMessage, |
||||
// ), |
||||
// ).then(_linkSubmitted); |
||||
// } |
||||
|
||||
// void _linkSubmitted(String? value) { |
||||
// if (value != null && value.isNotEmpty) { |
||||
// final index = controller.selection.baseOffset; |
||||
// final length = controller.selection.extentOffset - index; |
||||
// final data = options.type.isImage |
||||
// ? BlockEmbed.image(value) |
||||
// : BlockEmbed.video(value); |
||||
// controller.replaceText(index, length, data, null); |
||||
// } |
||||
// } |
||||
// } |
||||
|
||||
// /// Provides a dialog for input link to media resource. |
||||
// class MediaLinkDialog extends StatefulWidget { |
||||
// const MediaLinkDialog({ |
||||
// super.key, |
||||
// this.link, |
||||
// this.dialogTheme, |
||||
// this.childrenSpacing = 16.0, |
||||
// this.labelText, |
||||
// this.hintText, |
||||
// this.buttonText, |
||||
// this.buttonSize, |
||||
// this.autovalidateMode = AutovalidateMode.disabled, |
||||
// this.validationMessage, |
||||
// }) : assert(childrenSpacing > 0); |
||||
|
||||
// final String? link; |
||||
// final QuillDialogTheme? dialogTheme; |
||||
|
||||
// /// The margin between child widgets in the dialog. |
||||
// final double childrenSpacing; |
||||
|
||||
// /// The text of label in link add mode. |
||||
// final String? labelText; |
||||
|
||||
// /// The hint text for link [TextField]. |
||||
// final String? hintText; |
||||
|
||||
// /// The text of the submit button. |
||||
// final String? buttonText; |
||||
|
||||
// /// The size of dialog buttons. |
||||
// final Size? buttonSize; |
||||
|
||||
// final AutovalidateMode autovalidateMode; |
||||
// final String? validationMessage; |
||||
|
||||
// @override |
||||
// State<MediaLinkDialog> createState() => _MediaLinkDialogState(); |
||||
// } |
||||
|
||||
// class _MediaLinkDialogState extends State<MediaLinkDialog> { |
||||
// final _linkFocus = FocusNode(); |
||||
// final _linkController = TextEditingController(); |
||||
|
||||
// @override |
||||
// void dispose() { |
||||
// _linkFocus.dispose(); |
||||
// _linkController.dispose(); |
||||
// super.dispose(); |
||||
// } |
||||
|
||||
// @override |
||||
// Widget build(BuildContext context) { |
||||
// final constraints = widget.dialogTheme?.linkDialogConstraints ?? |
||||
// () { |
||||
// final size = MediaQuery.sizeOf(context); |
||||
// final maxWidth = kIsWeb ? size.width / 4 : size.width - 80; |
||||
// return BoxConstraints(maxWidth: maxWidth, maxHeight: 80); |
||||
// }(); |
||||
|
||||
// final buttonStyle = widget.buttonSize != null |
||||
// ? Theme.of(context) |
||||
// .elevatedButtonTheme |
||||
// .style |
||||
// ?.copyWith( |
||||
//fixedSize: MaterialStatePropertyAll(widget.buttonSize)) |
||||
// : widget.dialogTheme?.buttonStyle; |
||||
|
||||
// final isWrappable = widget.dialogTheme?.isWrappable ?? false; |
||||
|
||||
// final children = [ |
||||
// Text(widget.labelText ?? 'Enter media'.i18n), |
||||
// UtilityWidgets.maybeWidget( |
||||
// enabled: !isWrappable, |
||||
// wrapper: (child) => Expanded( |
||||
// child: child, |
||||
// ), |
||||
// child: Padding( |
||||
// padding: EdgeInsets.symmetric(horizontal: widget.childrenSpacing), |
||||
// child: TextFormField( |
||||
// controller: _linkController, |
||||
// focusNode: _linkFocus, |
||||
// style: widget.dialogTheme?.inputTextStyle, |
||||
// keyboardType: TextInputType.url, |
||||
// textInputAction: TextInputAction.done, |
||||
// decoration: InputDecoration( |
||||
// labelStyle: widget.dialogTheme?.labelTextStyle, |
||||
// hintText: widget.hintText, |
||||
// ), |
||||
// autofocus: true, |
||||
// autovalidateMode: widget.autovalidateMode, |
||||
// validator: _validateLink, |
||||
// onChanged: _linkChanged, |
||||
// ), |
||||
// ), |
||||
// ), |
||||
// ElevatedButton( |
||||
// onPressed: _canPress() ? _submitLink : null, |
||||
// style: buttonStyle, |
||||
// child: Text(widget.buttonText ?? 'Ok'.i18n), |
||||
// ), |
||||
// ]; |
||||
|
||||
// return Dialog( |
||||
// backgroundColor: widget.dialogTheme?.dialogBackgroundColor, |
||||
// shape: widget.dialogTheme?.shape ?? |
||||
// DialogTheme.of(context).shape ?? |
||||
// RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)), |
||||
// child: ConstrainedBox( |
||||
// constraints: constraints, |
||||
// child: Padding( |
||||
// padding: |
||||
// widget.dialogTheme?.linkDialogPadding ?? const |
||||
// EdgeInsets.all(16), |
||||
// child: Form( |
||||
// child: isWrappable |
||||
// ? Wrap( |
||||
// alignment: WrapAlignment.center, |
||||
// crossAxisAlignment: WrapCrossAlignment.center, |
||||
// runSpacing: widget.dialogTheme?.runSpacing ?? 0.0, |
||||
// children: children, |
||||
// ) |
||||
// : Row( |
||||
// children: children, |
||||
// ), |
||||
// ), |
||||
// ), |
||||
// ), |
||||
// ); |
||||
// } |
||||
|
||||
// bool _canPress() => _validateLink(_linkController.text) == null; |
||||
|
||||
// void _linkChanged(String value) { |
||||
// setState(() { |
||||
// _linkController.text = value; |
||||
// }); |
||||
// } |
||||
|
||||
// void _submitLink() => Navigator.pop(context, _linkController.text); |
||||
|
||||
// String? _validateLink(String? value) { |
||||
// if ((value?.isEmpty ?? false) || |
||||
// !AutoFormatMultipleLinksRule.oneLineLinkRegExp.hasMatch(value!)) { |
||||
// return widget.validationMessage ?? 'That is not a valid URL'; |
||||
// } |
||||
|
||||
// return null; |
||||
// } |
||||
// } |
||||
|
||||
// /// Media souce selector. |
||||
// class MediaSourceSelectorDialog extends StatelessWidget { |
||||
// const MediaSourceSelectorDialog({ |
||||
// super.key, |
||||
// this.dialogTheme, |
||||
// this.galleryButtonText, |
||||
// this.linkButtonText, |
||||
// }); |
||||
|
||||
// final QuillDialogTheme? dialogTheme; |
||||
|
||||
// /// The text of the gallery button [MediaSourceSelectorDialog]. |
||||
// final String? galleryButtonText; |
||||
|
||||
// /// The text of the link button [MediaSourceSelectorDialog]. |
||||
// final String? linkButtonText; |
||||
|
||||
// @override |
||||
// Widget build(BuildContext context) { |
||||
// final constraints = dialogTheme?.mediaSelectorDialogConstraints ?? |
||||
// () { |
||||
// final size = MediaQuery.sizeOf(context); |
||||
// double maxWidth, maxHeight; |
||||
// if (kIsWeb) { |
||||
// maxWidth = size.width / 7; |
||||
// maxHeight = size.height / 7; |
||||
// } else { |
||||
// maxWidth = size.width - 80; |
||||
// maxHeight = maxWidth / 2; |
||||
// } |
||||
// return BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight); |
||||
// }(); |
||||
|
||||
// final shape = dialogTheme?.shape ?? |
||||
// DialogTheme.of(context).shape ?? |
||||
// RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)); |
||||
|
||||
// return Dialog( |
||||
// backgroundColor: dialogTheme?.dialogBackgroundColor, |
||||
// shape: shape, |
||||
// child: ConstrainedBox( |
||||
// constraints: constraints, |
||||
// child: Padding( |
||||
// padding: dialogTheme?.mediaSelectorDialogPadding ?? |
||||
// const EdgeInsets.all(16), |
||||
// child: Row( |
||||
// mainAxisAlignment: MainAxisAlignment.spaceBetween, |
||||
// children: [ |
||||
// Expanded( |
||||
// child: TextButtonWithIcon( |
||||
// icon: Icons.collections, |
||||
// label: galleryButtonText ?? 'Gallery'.i18n, |
||||
// onPressed: () => |
||||
// Navigator.pop(context, MediaPickSetting.gallery), |
||||
// ), |
||||
// ), |
||||
// const SizedBox(width: 10), |
||||
// Expanded( |
||||
// child: TextButtonWithIcon( |
||||
// icon: Icons.link, |
||||
// label: linkButtonText ?? 'Link'.i18n, |
||||
// onPressed: () => |
||||
// Navigator.pop(context, MediaPickSetting.link), |
||||
// ), |
||||
// ) |
||||
// ], |
||||
// ), |
||||
// ), |
||||
// ), |
||||
// ); |
||||
// } |
||||
// } |
||||
|
||||
// class TextButtonWithIcon extends StatelessWidget { |
||||
// const TextButtonWithIcon({ |
||||
// required this.label, |
||||
// required this.icon, |
||||
// required this.onPressed, |
||||
// this.textStyle, |
||||
// super.key, |
||||
// }); |
||||
|
||||
// final String label; |
||||
// final IconData icon; |
||||
// final VoidCallback onPressed; |
||||
// final TextStyle? textStyle; |
||||
|
||||
// @override |
||||
// Widget build(BuildContext context) { |
||||
// final theme = Theme.of(context); |
||||
// final scale = MediaQuery.maybeOf(context)?.textScaleFactor ?? 1; |
||||
// final gap = scale <= 1 ? 8.0 : lerpDouble(8, 4, math.min(scale - 1, 1))!; |
||||
// final buttonStyle = TextButtonTheme.of(context).style; |
||||
// final shape = buttonStyle?.shape?.resolve({}) ?? |
||||
// const RoundedRectangleBorder( |
||||
// borderRadius: BorderRadius.all( |
||||
// Radius.circular(4), |
||||
// ), |
||||
// ); |
||||
// return Material( |
||||
// shape: shape, |
||||
// textStyle: textStyle ?? |
||||
// theme.textButtonTheme.style?.textStyle?.resolve({}) ?? |
||||
// theme.textTheme.labelLarge, |
||||
// elevation: buttonStyle?.elevation?.resolve({}) ?? 0, |
||||
// child: InkWell( |
||||
// customBorder: shape, |
||||
// onTap: onPressed, |
||||
// child: Padding( |
||||
// padding: const EdgeInsets.all(16), |
||||
// child: Column( |
||||
// mainAxisSize: MainAxisSize.min, |
||||
// children: <Widget>[ |
||||
// Icon(icon), |
||||
// SizedBox(height: gap), |
||||
// Flexible(child: Text(label)), |
||||
// ], |
||||
// ), |
||||
// ), |
||||
// ), |
||||
// ); |
||||
// } |
||||
// } |
||||
|
||||
// /// Default file picker. |
||||
// // Future<QuillFile?> _defaultMediaPicker(QuillMediaType mediaType) async { |
||||
// // final pickedFile = mediaType.isImage |
||||
// // ? await ImagePicker().pickImage(source: ImageSource.gallery) |
||||
// // : await ImagePicker().pickVideo(source: ImageSource.gallery); |
||||
|
||||
// // if (pickedFile != null) { |
||||
// // return QuillFile( |
||||
// // name: pickedFile.name, |
||||
// // path: pickedFile.path, |
||||
// // bytes: await pickedFile.readAsBytes(), |
||||
// // ); |
||||
// // } |
||||
|
||||
// // return null; |
||||
// // } |
||||
@ -1,9 +1,8 @@ |
||||
import 'package:flutter/material.dart'; |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
import 'package:flutter_quill/translations.dart'; |
||||
|
||||
import '../../common/utils/quill_table_utils.dart'; |
||||
import 'models/table_configurations.dart'; |
||||
import '../../../models/config/table/table_configurations.dart'; |
||||
import '../../../utils/quill_table_utils.dart'; |
||||
|
||||
class QuillToolbarTableButton extends StatelessWidget { |
||||
const QuillToolbarTableButton({ |
||||
@ -0,0 +1,19 @@ |
||||
import 'package:flutter/widgets.dart'; |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
|
||||
class QuillEditorUnknownEmbedBuilder extends EmbedBuilder { |
||||
@override |
||||
Widget build( |
||||
BuildContext context, |
||||
QuillController controller, |
||||
Embed node, |
||||
bool readOnly, |
||||
bool inline, |
||||
TextStyle textStyle, |
||||
) { |
||||
return const Text('Unknown embed builder'); |
||||
} |
||||
|
||||
@override |
||||
String get key => 'unknown'; |
||||
} |
||||
@ -1,6 +1,6 @@ |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
|
||||
import '../camera_types.dart'; |
||||
import '../../../embeds/others/camera_button/camera_types.dart'; |
||||
|
||||
class QuillToolbarCameraButtonExtraOptions |
||||
extends QuillToolbarBaseButtonExtraOptions { |
||||
@ -1,7 +1,7 @@ |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
import 'package:meta/meta.dart' show immutable; |
||||
|
||||
import '../../../editor/image/image_embed_types.dart'; |
||||
import '../../../../embeds/image/editor/image_embed_types.dart'; |
||||
|
||||
class QuillToolbarImageButtonExtraOptions |
||||
extends QuillToolbarBaseButtonExtraOptions { |
||||
@ -0,0 +1,71 @@ |
||||
import 'package:flutter/widgets.dart' show AutovalidateMode; |
||||
import 'package:flutter/widgets.dart' show Color, Size; |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
|
||||
import '../../../embeds/embed_types.dart'; |
||||
|
||||
class QuillToolbarMediaButtonExtraOptions |
||||
extends QuillToolbarBaseButtonExtraOptions { |
||||
const QuillToolbarMediaButtonExtraOptions({ |
||||
required super.controller, |
||||
required super.context, |
||||
required super.onPressed, |
||||
}); |
||||
} |
||||
|
||||
class QuillToolbarMediaButtonOptions extends QuillToolbarBaseButtonOptions< |
||||
QuillToolbarMediaButtonOptions, QuillToolbarMediaButtonExtraOptions> { |
||||
const QuillToolbarMediaButtonOptions({ |
||||
required this.type, |
||||
required this.onMediaPickedCallback, |
||||
// required this.onVideoPickCallback, |
||||
this.dialogBarrierColor, |
||||
this.mediaFilePicker, |
||||
this.childrenSpacing = 16.0, |
||||
this.autovalidateMode = AutovalidateMode.disabled, |
||||
super.iconSize, |
||||
this.dialogTheme, |
||||
this.labelText, |
||||
this.hintText, |
||||
this.submitButtonText, |
||||
this.submitButtonSize, |
||||
this.galleryButtonText, |
||||
this.linkButtonText, |
||||
this.validationMessage, |
||||
super.iconData, |
||||
super.afterButtonPressed, |
||||
super.tooltip, |
||||
super.iconTheme, |
||||
super.childBuilder, |
||||
}); |
||||
|
||||
final QuillMediaType type; |
||||
final QuillDialogTheme? dialogTheme; |
||||
final MediaFilePicker? mediaFilePicker; |
||||
final MediaPickedCallback? onMediaPickedCallback; |
||||
final Color? dialogBarrierColor; |
||||
|
||||
/// The margin between child widgets in the dialog. |
||||
final double childrenSpacing; |
||||
|
||||
/// The text of label in link add mode. |
||||
final String? labelText; |
||||
|
||||
/// The hint text for link [TextField]. |
||||
final String? hintText; |
||||
|
||||
/// The text of the submit button. |
||||
final String? submitButtonText; |
||||
|
||||
/// The size of dialog buttons. |
||||
final Size? submitButtonSize; |
||||
|
||||
/// The text of the gallery button [MediaSourceSelectorDialog]. |
||||
final String? galleryButtonText; |
||||
|
||||
/// The text of the link button [MediaSourceSelectorDialog]. |
||||
final String? linkButtonText; |
||||
|
||||
final AutovalidateMode autovalidateMode; |
||||
final String? validationMessage; |
||||
} |
||||
@ -1,6 +1,6 @@ |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
|
||||
import 'video.dart'; |
||||
import '../../../../embeds/video/video.dart'; |
||||
|
||||
class QuillToolbarVideoButtonExtraOptions |
||||
extends QuillToolbarBaseButtonExtraOptions { |
||||
@ -1,122 +0,0 @@ |
||||
import 'package:flutter/material.dart'; |
||||
import 'package:flutter_quill/flutter_quill.dart' show QuillDialogTheme; |
||||
import 'package:flutter_quill/translations.dart'; |
||||
|
||||
import 'utils/patterns.dart'; |
||||
|
||||
enum LinkType { |
||||
video, |
||||
image, |
||||
} |
||||
|
||||
class TypeLinkDialog extends StatefulWidget { |
||||
const TypeLinkDialog({ |
||||
required this.linkType, |
||||
this.dialogTheme, |
||||
this.link, |
||||
this.linkRegExp, |
||||
super.key, |
||||
}); |
||||
|
||||
final QuillDialogTheme? dialogTheme; |
||||
final String? link; |
||||
final RegExp? linkRegExp; |
||||
final LinkType linkType; |
||||
|
||||
@override |
||||
TypeLinkDialogState createState() => TypeLinkDialogState(); |
||||
} |
||||
|
||||
class TypeLinkDialogState extends State<TypeLinkDialog> { |
||||
late String _link; |
||||
late TextEditingController _controller; |
||||
RegExp? _linkRegExp; |
||||
|
||||
@override |
||||
void initState() { |
||||
super.initState(); |
||||
_link = widget.link ?? ''; |
||||
_controller = TextEditingController(text: _link); |
||||
|
||||
_linkRegExp = widget.linkRegExp; |
||||
} |
||||
|
||||
@override |
||||
void dispose() { |
||||
_controller.dispose(); |
||||
super.dispose(); |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
return AlertDialog( |
||||
backgroundColor: widget.dialogTheme?.dialogBackgroundColor, |
||||
content: TextField( |
||||
keyboardType: TextInputType.url, |
||||
textInputAction: TextInputAction.done, |
||||
maxLines: null, |
||||
style: widget.dialogTheme?.inputTextStyle, |
||||
decoration: InputDecoration( |
||||
labelText: context.loc.pasteLink, |
||||
hintText: widget.linkType == LinkType.image |
||||
? context.loc.pleaseEnterAValidImageURL |
||||
: context.loc.pleaseEnterAValidVideoURL, |
||||
labelStyle: widget.dialogTheme?.labelTextStyle, |
||||
floatingLabelStyle: widget.dialogTheme?.labelTextStyle, |
||||
), |
||||
autofocus: true, |
||||
onChanged: _linkChanged, |
||||
controller: _controller, |
||||
onEditingComplete: () { |
||||
if (!_canPress()) { |
||||
return; |
||||
} |
||||
_applyLink(); |
||||
}, |
||||
), |
||||
actions: [ |
||||
TextButton( |
||||
onPressed: _canPress() ? _applyLink : null, |
||||
child: Text( |
||||
context.loc.ok, |
||||
style: widget.dialogTheme?.labelTextStyle, |
||||
), |
||||
), |
||||
], |
||||
); |
||||
} |
||||
|
||||
void _linkChanged(String value) { |
||||
setState(() { |
||||
_link = value; |
||||
}); |
||||
} |
||||
|
||||
void _applyLink() { |
||||
Navigator.pop(context, _link.trim()); |
||||
} |
||||
|
||||
RegExp get linkRegExp { |
||||
final customRegExp = _linkRegExp; |
||||
if (customRegExp != null) { |
||||
return customRegExp; |
||||
} |
||||
switch (widget.linkType) { |
||||
case LinkType.video: |
||||
if (youtubeRegExp.hasMatch(_link)) { |
||||
return youtubeRegExp; |
||||
} |
||||
return videoRegExp; |
||||
case LinkType.image: |
||||
return imageRegExp; |
||||
} |
||||
} |
||||
|
||||
bool _canPress() { |
||||
if (_link.isEmpty) { |
||||
return false; |
||||
} |
||||
if (widget.linkType == LinkType.image) {} |
||||
return _link.isNotEmpty && linkRegExp.hasMatch(_link); |
||||
} |
||||
} |
||||
@ -1 +0,0 @@ |
||||
export 'dart:ui' if (dart.library.js_interop) 'dart:ui_web'; |
||||
@ -1,65 +0,0 @@ |
||||
import 'package:flutter/gestures.dart'; |
||||
import 'package:flutter/material.dart'; |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
import 'package:simple_spell_checker/simple_spell_checker.dart'; |
||||
|
||||
/// SimpleSpellChecker is a simple spell checker for get |
||||
/// all words divide on different objects if them are wrong or not |
||||
class SimpleSpellCheckerService |
||||
extends SpellCheckerService<LanguageIdentifier> { |
||||
SimpleSpellCheckerService({required super.language}) |
||||
: checker = SimpleSpellChecker( |
||||
language: language, |
||||
safeDictionaryLoad: true, |
||||
); |
||||
|
||||
/// [SimpleSpellChecker] comes from the package [simple_spell_checker] |
||||
/// that give us all necessary methods for get our spans with highlighting |
||||
/// where needed |
||||
final SimpleSpellChecker checker; |
||||
|
||||
@override |
||||
List<TextSpan>? checkSpelling( |
||||
String text, { |
||||
LongPressGestureRecognizer Function(String word)? |
||||
customLongPressRecognizerOnWrongSpan, |
||||
}) { |
||||
return checker.check( |
||||
text, |
||||
customLongPressRecognizerOnWrongSpan: |
||||
customLongPressRecognizerOnWrongSpan, |
||||
); |
||||
} |
||||
|
||||
@override |
||||
void toggleChecker() => checker.toggleChecker(); |
||||
|
||||
@override |
||||
bool isServiceActive() => checker.isCheckerActive(); |
||||
|
||||
@override |
||||
void dispose({bool onlyPartial = false}) { |
||||
if (onlyPartial) { |
||||
checker.disposeControllers(); |
||||
return; |
||||
} |
||||
checker.dispose(); |
||||
} |
||||
|
||||
@override |
||||
void addCustomLanguage({required languageIdentifier}) { |
||||
checker |
||||
..registerLanguage(languageIdentifier.language) |
||||
..addCustomLanguage(languageIdentifier); |
||||
} |
||||
|
||||
@override |
||||
void setNewLanguageState({required String language}) { |
||||
checker.setNewLanguageToState(language); |
||||
} |
||||
|
||||
@override |
||||
void updateCustomLanguageIfExist({required languageIdentifier}) { |
||||
checker.updateCustomLanguageIfExist(languageIdentifier); |
||||
} |
||||
} |
||||
@ -0,0 +1 @@ |
||||
export 'dart:ui' if (dart.library.html) 'dart:ui_web'; |
||||
@ -1,10 +1,7 @@ |
||||
library flutter_quill.extensions; |
||||
|
||||
export 'src/common/utils/platform.dart'; |
||||
export 'src/common/utils/string.dart'; |
||||
export 'src/common/utils/widgets.dart'; |
||||
export 'src/document/nodes/leaf.dart'; |
||||
export 'src/rules/delete.dart'; |
||||
export 'src/rules/format.dart'; |
||||
export 'src/rules/insert.dart'; |
||||
export 'src/rules/rule.dart'; |
||||
export 'src/models/documents/nodes/leaf.dart'; |
||||
export 'src/models/rules/insert.dart'; |
||||
export 'src/utils/platform.dart'; |
||||
export 'src/utils/string.dart'; |
||||
export 'src/utils/widgets.dart'; |
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue