huypanha
/
flutter-quill
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve development for web in example, update flutter_quill_extensions

Browse Source
pull/1530/head
Ellet 1 year ago
parent 1df66a8b73
commit eb5efd98fb
No known key found for this signature in database
GPG Key ID: C488CC70BBCEF0D1
13 changed files with 733 additions and 1203 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 494
      example/assets/sample_data.json
  2. 474
      example/assets/sample_data_nomedia.json
  3. 116
      example/assets/sample_data_testing.json
  4. 25
      example/lib/pages/home_page.dart
  5. 293
      example/lib/samples/sample_data.dart
  6. 270
      example/lib/samples/sample_data_nomedia.dart
  7. 83
      example/lib/samples/sample_data_testing.dart
  8. 4
      flutter_quill_extensions/lib/flutter_quill_extensions.dart
  9. 9
      flutter_quill_extensions/lib/presentation/embeds/editor/formula.dart
  10. 59
      flutter_quill_extensions/lib/presentation/embeds/editor/image/image_web.dart
  11. 39
      flutter_quill_extensions/lib/presentation/embeds/editor/video/video.dart
  12. 12
      flutter_quill_extensions/lib/presentation/embeds/editor/video/video_web.dart
  13. 58
      flutter_quill_extensions/lib/presentation/utils/web_utils.dart

494
example/assets/sample_data.json
Unescape View File

@ -1,494 +0,0 @@
[
{
"insert": {
"image": "assets/images/1.png"
},
"attributes": {
"width": "100",
"height": "100",
"style": "width:500px; height:350px;"
}
},
{
"insert": "Flutter Quill"
},
{
"attributes": {
"header": 1
},
"insert": "\n"
},
{
"insert": {
"video": "https://www.youtube.com/watch?v=V4hgdKhIqtc&list=PLbhaS_83B97s78HsDTtplRTEhcFsqSqIK&index=1"
}
},
{
"insert": {
"video": "https://user-images.githubusercontent.com/122956/126238875-22e42501-ad41-4266-b1d6-3f89b5e3b79b.mp4"
}
},
{
"insert": "\nRich text editor for Flutter"
},
{
"attributes": {
"header": 2
},
"insert": "\n"
},
{
"insert": "Quill component for Flutter"
},
{
"attributes": {
"header": 3
},
"insert": "\n"
},
{
"attributes": {
"link": "https://bulletjournal.us/home/index.html"
},
"insert": "Bullet Journal"
},
{
"insert": ":\nTrack personal and group journals (ToDo, Note, Ledger) from multiple views with timely reminders"
},
{
"attributes": {
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "Share your tasks and notes with teammates, and see changes as they happen in real-time, across all devices"
},
{
"attributes": {
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "Check out what you and your teammates are working on each day"
},
{
"attributes": {
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "\nSplitting bills with friends can never be easier."
},
{
"attributes": {
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "Start creating a group and invite your friends to join."
},
{
"attributes": {
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "Create a BuJo of Ledger type to see expense or balance summary."
},
{
"attributes": {
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "\nAttach one or multiple labels to tasks, notes or transactions. Later you can track them just using the label(s)."
},
{
"attributes": {
"blockquote": true
},
"insert": "\n"
},
{
"insert": "\nvar BuJo = 'Bullet' + 'Journal'"
},
{
"attributes": {
"code-block": true
},
"insert": "\n"
},
{
"insert": "\nStart tracking in your browser"
},
{
"attributes": {
"indent": 1
},
"insert": "\n"
},
{
"insert": "Stop the timer on your phone"
},
{
"attributes": {
"indent": 1
},
"insert": "\n"
},
{
"insert": "All your time entries are synced"
},
{
"attributes": {
"indent": 2
},
"insert": "\n"
},
{
"insert": "between the phone apps"
},
{
"attributes": {
"indent": 2
},
"insert": "\n"
},
{
"insert": "and the website."
},
{
"attributes": {
"indent": 3
},
"insert": "\n"
},
{
"insert": "\n"
},
{
"insert": "\nCenter Align"
},
{
"attributes": {
"align": "center"
},
"insert": "\n"
},
{
"insert": "Right Align"
},
{
"attributes": {
"align": "right"
},
"insert": "\n"
},
{
"insert": "Justify Align"
},
{
"attributes": {
"align": "justify"
},
"insert": "\n"
},
{
"insert": "Have trouble finding things? "
},
{
"attributes": {
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "Just type in the search bar"
},
{
"attributes": {
"indent": 1,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "and easily find contents"
},
{
"attributes": {
"indent": 2,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "across projects or folders."
},
{
"attributes": {
"indent": 2,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "It matches text in your note or task."
},
{
"attributes": {
"indent": 1,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "Enable reminders so that you will get notified by"
},
{
"attributes": {
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "email"
},
{
"attributes": {
"indent": 1,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "message on your phone"
},
{
"attributes": {
"indent": 1,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "popup on the web site"
},
{
"attributes": {
"indent": 1,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "Create a BuJo serving as project or folder"
},
{
"attributes": {
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "Organize your"
},
{
"attributes": {
"indent": 1,
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "tasks"
},
{
"attributes": {
"indent": 2,
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "notes"
},
{
"attributes": {
"indent": 2,
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "transactions"
},
{
"attributes": {
"indent": 2,
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "under BuJo "
},
{
"attributes": {
"indent": 3,
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "See them in Calendar"
},
{
"attributes": {
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "or hierarchical view"
},
{
"attributes": {
"indent": 1,
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "this is a check list"
},
{
"attributes": {
"list": "checked"
},
"insert": "\n"
},
{
"insert": "this is a uncheck list"
},
{
"attributes": {
"list": "unchecked"
},
"insert": "\n"
},
{
"insert": "Font "
},
{
"attributes": {
"font": "sans-serif"
},
"insert": "Sans Serif"
},
{
"insert": " "
},
{
"attributes": {
"font": "serif"
},
"insert": "Serif"
},
{
"insert": " "
},
{
"attributes": {
"font": "monospace"
},
"insert": "Monospace"
},
{
"insert": " Size "
},
{
"attributes": {
"size": "small"
},
"insert": "Small"
},
{
"insert": " "
},
{
"attributes": {
"size": "large"
},
"insert": "Large"
},
{
"insert": " "
},
{
"attributes": {
"size": "huge"
},
"insert": "Huge"
},
{
"attributes": {
"size": "15.0"
},
"insert": "font size 15"
},
{
"insert": " "
},
{
"attributes": {
"size": "35"
},
"insert": "font size 35"
},
{
"insert": " "
},
{
"attributes": {
"size": "20"
},
"insert": "font size 20"
},
{
"attributes": {
"token": "built_in"
},
"insert": " diff"
},
{
"attributes": {
"token": "operator"
},
"insert": "-match"
},
{
"attributes": {
"token": "literal"
},
"insert": "-patch"
},
{
"insert": {
"image": "https://user-images.githubusercontent.com/122956/72955931-ccc07900-3d52-11ea-89b1-d468a6e2aa2b.png"
},
"attributes": {
"width": "230",
"style": "display: block; margin: auto; width: 500px;"
}
},
{
"insert": "\n"
}
]

474
example/assets/sample_data_nomedia.json
Unescape View File

@ -1,474 +0,0 @@
[
{
"insert": "Flutter Quill"
},
{
"attributes": {
"header": 1
},
"insert": "\n"
},
{
"insert": "\nRich text editor for Flutter"
},
{
"attributes": {
"header": 2
},
"insert": "\n"
},
{
"insert": "Quill component for Flutter"
},
{
"attributes": {
"color": "rgba(0, 0, 0, 0.847)"
},
"insert": " and "
},
{
"attributes": {
"link": "https://bulletjournal.us/home/index.html"
},
"insert": "Bullet Journal"
},
{
"insert": ":\nTrack personal and group journals (ToDo, Note, Ledger) from multiple views with timely reminders"
},
{
"attributes": {
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "Share your tasks and notes with teammates, and see changes as they happen in real-time, across all devices"
},
{
"attributes": {
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "Check out what you and your teammates are working on each day"
},
{
"attributes": {
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "\nSplitting bills with friends can never be easier."
},
{
"attributes": {
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "Start creating a group and invite your friends to join."
},
{
"attributes": {
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "Create a BuJo of Ledger type to see expense or balance summary."
},
{
"attributes": {
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "\nAttach one or multiple labels to tasks, notes or transactions. Later you can track them just using the label(s)."
},
{
"attributes": {
"blockquote": true
},
"insert": "\n"
},
{
"insert": "\nvar BuJo = 'Bullet' + 'Journal'"
},
{
"attributes": {
"code-block": true
},
"insert": "\n"
},
{
"insert": "\nStart tracking in your browser"
},
{
"attributes": {
"indent": 1
},
"insert": "\n"
},
{
"insert": "Stop the timer on your phone"
},
{
"attributes": {
"indent": 1
},
"insert": "\n"
},
{
"insert": "All your time entries are synced"
},
{
"attributes": {
"indent": 2
},
"insert": "\n"
},
{
"insert": "between the phone apps"
},
{
"attributes": {
"indent": 2
},
"insert": "\n"
},
{
"insert": "and the website."
},
{
"attributes": {
"indent": 3
},
"insert": "\n"
},
{
"insert": "\n"
},
{
"insert": "\nCenter Align"
},
{
"attributes": {
"align": "center"
},
"insert": "\n"
},
{
"insert": "Right Align"
},
{
"attributes": {
"align": "right"
},
"insert": "\n"
},
{
"insert": "Justify Align"
},
{
"attributes": {
"align": "justify"
},
"insert": "\n"
},
{
"insert": "Have trouble finding things? "
},
{
"attributes": {
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "Just type in the search bar"
},
{
"attributes": {
"indent": 1,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "and easily find contents"
},
{
"attributes": {
"indent": 2,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "across projects or folders."
},
{
"attributes": {
"indent": 2,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "It matches text in your note or task."
},
{
"attributes": {
"indent": 1,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "Enable reminders so that you will get notified by"
},
{
"attributes": {
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "email"
},
{
"attributes": {
"indent": 1,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "message on your phone"
},
{
"attributes": {
"indent": 1,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "popup on the web site"
},
{
"attributes": {
"indent": 1,
"list": "ordered"
},
"insert": "\n"
},
{
"insert": "Create a BuJo serving as project or folder"
},
{
"attributes": {
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "Organize your"
},
{
"attributes": {
"indent": 1,
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "tasks"
},
{
"attributes": {
"indent": 2,
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "notes"
},
{
"attributes": {
"indent": 2,
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "transactions"
},
{
"attributes": {
"indent": 2,
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "under BuJo "
},
{
"attributes": {
"indent": 3,
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "See them in Calendar"
},
{
"attributes": {
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "or hierarchical view"
},
{
"attributes": {
"indent": 1,
"list": "bullet"
},
"insert": "\n"
},
{
"insert": "this is a check list"
},
{
"attributes": {
"list": "checked"
},
"insert": "\n"
},
{
"insert": "this is a uncheck list"
},
{
"attributes": {
"list": "unchecked"
},
"insert": "\n"
},
{
"insert": "Font "
},
{
"attributes": {
"font": "sans-serif"
},
"insert": "Sans Serif"
},
{
"insert": " "
},
{
"attributes": {
"font": "serif"
},
"insert": "Serif"
},
{
"insert": " "
},
{
"attributes": {
"font": "monospace"
},
"insert": "Monospace"
},
{
"insert": " Size "
},
{
"attributes": {
"size": "small"
},
"insert": "Small"
},
{
"insert": " "
},
{
"attributes": {
"size": "large"
},
"insert": "Large"
},
{
"insert": " "
},
{
"attributes": {
"size": "huge"
},
"insert": "Huge"
},
{
"attributes": {
"size": "15.0"
},
"insert": "font size 15"
},
{
"insert": " "
},
{
"attributes": {
"size": "35"
},
"insert": "font size 35"
},
{
"insert": " "
},
{
"attributes": {
"size": "20"
},
"insert": "font size 20"
},
{
"attributes": {
"token": "built_in"
},
"insert": " diff"
},
{
"attributes": {
"token": "operator"
},
"insert": "-match"
},
{
"attributes": {
"token": "literal"
},
"insert": "-patch"
},
{
"insert": {
"image": "https://user-images.githubusercontent.com/122956/72955931-ccc07900-3d52-11ea-89b1-d468a6e2aa2b.png"
},
"attributes": {
"width": "230",
"style": "display: block; margin: auto;"
}
},
{
"insert": "\n"
}
]

116
example/assets/sample_data_testing.json
View File

File diff suppressed because one or more lines are too long

25
example/lib/pages/home_page.dart
Unescape View File

@ -20,6 +20,9 @@ import 'package:path/path.dart' as path;
import 'package:path_provider/path_provider.dart'; import 'package:path_provider/path_provider.dart';
import 'package:quill_html_converter/quill_html_converter.dart'; import 'package:quill_html_converter/quill_html_converter.dart';
import '../samples/sample_data.dart';
import '../samples/sample_data_nomedia.dart';
import '../samples/sample_data_testing.dart';
import '../widgets/time_stamp_embed_widget.dart'; import '../widgets/time_stamp_embed_widget.dart';
import 'read_only_page.dart'; import 'read_only_page.dart';
@ -60,14 +63,13 @@ class _HomePageState extends State<HomePage> {
Future<void> _loadFromAssets() async { Future<void> _loadFromAssets() async {
try { try {
final result = final doc = Document.fromJson(sampleDataTesting);
await rootBundle.loadString('assets/sample_data_testing.json');
final doc = Document.fromJson(jsonDecode(result));
_controller = QuillController( _controller = QuillController(
document: doc, document: doc,
selection: const TextSelection.collapsed(offset: 0), selection: const TextSelection.collapsed(offset: 0),
); );
} catch (error) { } catch (error) {
print(error.toString());
final doc = Document() final doc = Document()
..insert(0, 'Error while loading the document: ${error.toString()}'); ..insert(0, 'Error while loading the document: ${error.toString()}');
_controller = QuillController( _controller = QuillController(
@ -195,11 +197,8 @@ class _HomePageState extends State<HomePage> {
final scaffoldMessenger = ScaffoldMessenger.of(context); final scaffoldMessenger = ScaffoldMessenger.of(context);
final navigator = Navigator.of(context); final navigator = Navigator.of(context);
try { try {
final jsonString = await rootBundle.loadString(
'assets/sample_data.json',
);
_controller.document = Document.fromJson( _controller.document = Document.fromJson(
jsonDecode(jsonString), sampleData,
); );
} catch (e) { } catch (e) {
print( print(
@ -221,11 +220,8 @@ class _HomePageState extends State<HomePage> {
final scaffoldMessenger = ScaffoldMessenger.of(context); final scaffoldMessenger = ScaffoldMessenger.of(context);
final navigator = Navigator.of(context); final navigator = Navigator.of(context);
try { try {
final jsonString = await rootBundle.loadString(
'assets/sample_data_nomedia.json',
);
_controller.document = Document.fromJson( _controller.document = Document.fromJson(
jsonDecode(jsonString), sampleDataNoMedia,
); );
} catch (e) { } catch (e) {
print( print(
@ -247,11 +243,8 @@ class _HomePageState extends State<HomePage> {
final scaffoldMessenger = ScaffoldMessenger.of(context); final scaffoldMessenger = ScaffoldMessenger.of(context);
final navigator = Navigator.of(context); final navigator = Navigator.of(context);
try { try {
final jsonString = await rootBundle.loadString(
'assets/sample_data_testing.json',
);
_controller.document = Document.fromJson( _controller.document = Document.fromJson(
jsonDecode(jsonString), sampleDataTesting,
); );
} catch (e) { } catch (e) {
print( print(
@ -543,6 +536,7 @@ class _HomePageState extends State<HomePage> {
configurations: QuillToolbarConfigurations( configurations: QuillToolbarConfigurations(
customButtons: customButtons, customButtons: customButtons,
embedButtons: FlutterQuillEmbeds.toolbarButtons( embedButtons: FlutterQuillEmbeds.toolbarButtons(
formulaButtonOptions: const QuillToolbarFormulaButtonOptions(),
cameraButtonOptions: const QuillToolbarCameraButtonOptions(), cameraButtonOptions: const QuillToolbarCameraButtonOptions(),
imageButtonOptions: QuillToolbarImageButtonOptions( imageButtonOptions: QuillToolbarImageButtonOptions(
imageButtonConfigurations: QuillToolbarImageConfigurations( imageButtonConfigurations: QuillToolbarImageConfigurations(
@ -588,6 +582,7 @@ class _HomePageState extends State<HomePage> {
configurations: QuillToolbarConfigurations( configurations: QuillToolbarConfigurations(
customButtons: customButtons, customButtons: customButtons,
embedButtons: FlutterQuillEmbeds.toolbarButtons( embedButtons: FlutterQuillEmbeds.toolbarButtons(
formulaButtonOptions: const QuillToolbarFormulaButtonOptions(),
cameraButtonOptions: const QuillToolbarCameraButtonOptions(), cameraButtonOptions: const QuillToolbarCameraButtonOptions(),
videoButtonOptions: QuillToolbarVideoButtonOptions( videoButtonOptions: QuillToolbarVideoButtonOptions(
videoConfigurations: QuillToolbarVideoConfigurations( videoConfigurations: QuillToolbarVideoConfigurations(

293
example/lib/samples/sample_data.dart
Unescape View File

@ -0,0 +1,293 @@
const sampleData = [
{
'insert': {'image': 'assets/images/1.png'},
'attributes': {
'width': '100',
'height': '100',
'style': 'width:500px; height:350px;'
}
},
{'insert': 'Flutter Quill'},
{
'attributes': {'header': 1},
'insert': '\n'
},
{
'insert': {
'video':
'https://www.youtube.com/watch?v=V4hgdKhIqtc&list=PLbhaS_83B97s78HsDTtplRTEhcFsqSqIK&index=1'
}
},
{
'insert': {
'video':
'https://user-images.githubusercontent.com/122956/126238875-22e42501-ad41-4266-b1d6-3f89b5e3b79b.mp4'
}
},
{'insert': '\nRich text editor for Flutter'},
{
'attributes': {'header': 2},
'insert': '\n'
},
{'insert': 'Quill component for Flutter'},
{
'attributes': {'header': 3},
'insert': '\n'
},
{
'attributes': {'link': 'https://bulletjournal.us/home/index.html'},
'insert': 'Bullet Journal'
},
{
'insert':
':\nTrack personal and group journals (ToDo, Note, Ledger) from multiple views with timely reminders'
},
{
'attributes': {'list': 'ordered'},
'insert': '\n'
},
{
'insert':
'Share your tasks and notes with teammates, and see changes as they happen in real-time, across all devices'
},
{
'attributes': {'list': 'ordered'},
'insert': '\n'
},
{'insert': 'Check out what you and your teammates are working on each day'},
{
'attributes': {'list': 'ordered'},
'insert': '\n'
},
{'insert': '\nSplitting bills with friends can never be easier.'},
{
'attributes': {'list': 'bullet'},
'insert': '\n'
},
{'insert': 'Start creating a group and invite your friends to join.'},
{
'attributes': {'list': 'bullet'},
'insert': '\n'
},
{'insert': 'Create a BuJo of Ledger type to see expense or balance summary.'},
{
'attributes': {'list': 'bullet'},
'insert': '\n'
},
{
'insert':
'\nAttach one or multiple labels to tasks, notes or transactions. Later you can track them just using the label(s).'
},
{
'attributes': {'blockquote': true},
'insert': '\n'
},
{'insert': "\nvar BuJo = 'Bullet' + 'Journal'"},
{
'attributes': {'code-block': true},
'insert': '\n'
},
{'insert': '\nStart tracking in your browser'},
{
'attributes': {'indent': 1},
'insert': '\n'
},
{'insert': 'Stop the timer on your phone'},
{
'attributes': {'indent': 1},
'insert': '\n'
},
{'insert': 'All your time entries are synced'},
{
'attributes': {'indent': 2},
'insert': '\n'
},
{'insert': 'between the phone apps'},
{
'attributes': {'indent': 2},
'insert': '\n'
},
{'insert': 'and the website.'},
{
'attributes': {'indent': 3},
'insert': '\n'
},
{'insert': '\n'},
{'insert': '\nCenter Align'},
{
'attributes': {'align': 'center'},
'insert': '\n'
},
{'insert': 'Right Align'},
{
'attributes': {'align': 'right'},
'insert': '\n'
},
{'insert': 'Justify Align'},
{
'attributes': {'align': 'justify'},
'insert': '\n'
},
{'insert': 'Have trouble finding things? '},
{
'attributes': {'list': 'ordered'},
'insert': '\n'
},
{'insert': 'Just type in the search bar'},
{
'attributes': {'indent': 1, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'and easily find contents'},
{
'attributes': {'indent': 2, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'across projects or folders.'},
{
'attributes': {'indent': 2, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'It matches text in your note or task.'},
{
'attributes': {'indent': 1, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'Enable reminders so that you will get notified by'},
{
'attributes': {'list': 'ordered'},
'insert': '\n'
},
{'insert': 'email'},
{
'attributes': {'indent': 1, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'message on your phone'},
{
'attributes': {'indent': 1, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'popup on the web site'},
{
'attributes': {'indent': 1, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'Create a BuJo serving as project or folder'},
{
'attributes': {'list': 'bullet'},
'insert': '\n'
},
{'insert': 'Organize your'},
{
'attributes': {'indent': 1, 'list': 'bullet'},
'insert': '\n'
},
{'insert': 'tasks'},
{
'attributes': {'indent': 2, 'list': 'bullet'},
'insert': '\n'
},
{'insert': 'notes'},
{
'attributes': {'indent': 2, 'list': 'bullet'},
'insert': '\n'
},
{'insert': 'transactions'},
{
'attributes': {'indent': 2, 'list': 'bullet'},
'insert': '\n'
},
{'insert': 'under BuJo '},
{
'attributes': {'indent': 3, 'list': 'bullet'},
'insert': '\n'
},
{'insert': 'See them in Calendar'},
{
'attributes': {'list': 'bullet'},
'insert': '\n'
},
{'insert': 'or hierarchical view'},
{
'attributes': {'indent': 1, 'list': 'bullet'},
'insert': '\n'
},
{'insert': 'this is a check list'},
{
'attributes': {'list': 'checked'},
'insert': '\n'
},
{'insert': 'this is a uncheck list'},
{
'attributes': {'list': 'unchecked'},
'insert': '\n'
},
{'insert': 'Font '},
{
'attributes': {'font': 'sans-serif'},
'insert': 'Sans Serif'
},
{'insert': ' '},
{
'attributes': {'font': 'serif'},
'insert': 'Serif'
},
{'insert': ' '},
{
'attributes': {'font': 'monospace'},
'insert': 'Monospace'
},
{'insert': ' Size '},
{
'attributes': {'size': 'small'},
'insert': 'Small'
},
{'insert': ' '},
{
'attributes': {'size': 'large'},
'insert': 'Large'
},
{'insert': ' '},
{
'attributes': {'size': 'huge'},
'insert': 'Huge'
},
{
'attributes': {'size': '15.0'},
'insert': 'font size 15'
},
{'insert': ' '},
{
'attributes': {'size': '35'},
'insert': 'font size 35'
},
{'insert': ' '},
{
'attributes': {'size': '20'},
'insert': 'font size 20'
},
{
'attributes': {'token': 'built_in'},
'insert': ' diff'
},
{
'attributes': {'token': 'operator'},
'insert': '-match'
},
{
'attributes': {'token': 'literal'},
'insert': '-patch'
},
{
'insert': {
'image':
'https://user-images.githubusercontent.com/122956/72955931-ccc07900-3d52-11ea-89b1-d468a6e2aa2b.png'
},
'attributes': {
'width': '230',
'style': 'display: block; margin: auto; width: 500px;'
}
},
{'insert': '\n'}
];

270
example/lib/samples/sample_data_nomedia.dart
Unescape View File

@ -0,0 +1,270 @@
const sampleDataNoMedia = [
{'insert': 'Flutter Quill'},
{
'attributes': {'header': 1},
'insert': '\n'
},
{'insert': '\nRich text editor for Flutter'},
{
'attributes': {'header': 2},
'insert': '\n'
},
{'insert': 'Quill component for Flutter'},
{
'attributes': {'color': 'rgba(0, 0, 0, 0.847)'},
'insert': ' and '
},
{
'attributes': {'link': 'https://bulletjournal.us/home/index.html'},
'insert': 'Bullet Journal'
},
{
'insert':
':\nTrack personal and group journals (ToDo, Note, Ledger) from multiple views with timely reminders'
},
{
'attributes': {'list': 'ordered'},
'insert': '\n'
},
{
'insert':
'Share your tasks and notes with teammates, and see changes as they happen in real-time, across all devices'
},
{
'attributes': {'list': 'ordered'},
'insert': '\n'
},
{'insert': 'Check out what you and your teammates are working on each day'},
{
'attributes': {'list': 'ordered'},
'insert': '\n'
},
{'insert': '\nSplitting bills with friends can never be easier.'},
{
'attributes': {'list': 'bullet'},
'insert': '\n'
},
{'insert': 'Start creating a group and invite your friends to join.'},
{
'attributes': {'list': 'bullet'},
'insert': '\n'
},
{'insert': 'Create a BuJo of Ledger type to see expense or balance summary.'},
{
'attributes': {'list': 'bullet'},
'insert': '\n'
},
{
'insert':
'\nAttach one or multiple labels to tasks, notes or transactions. Later you can track them just using the label(s).'
},
{
'attributes': {'blockquote': true},
'insert': '\n'
},
{'insert': "\nvar BuJo = 'Bullet' + 'Journal'"},
{
'attributes': {'code-block': true},
'insert': '\n'
},
{'insert': '\nStart tracking in your browser'},
{
'attributes': {'indent': 1},
'insert': '\n'
},
{'insert': 'Stop the timer on your phone'},
{
'attributes': {'indent': 1},
'insert': '\n'
},
{'insert': 'All your time entries are synced'},
{
'attributes': {'indent': 2},
'insert': '\n'
},
{'insert': 'between the phone apps'},
{
'attributes': {'indent': 2},
'insert': '\n'
},
{'insert': 'and the website.'},
{
'attributes': {'indent': 3},
'insert': '\n'
},
{'insert': '\n'},
{'insert': '\nCenter Align'},
{
'attributes': {'align': 'center'},
'insert': '\n'
},
{'insert': 'Right Align'},
{
'attributes': {'align': 'right'},
'insert': '\n'
},
{'insert': 'Justify Align'},
{
'attributes': {'align': 'justify'},
'insert': '\n'
},
{'insert': 'Have trouble finding things? '},
{
'attributes': {'list': 'ordered'},
'insert': '\n'
},
{'insert': 'Just type in the search bar'},
{
'attributes': {'indent': 1, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'and easily find contents'},
{
'attributes': {'indent': 2, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'across projects or folders.'},
{
'attributes': {'indent': 2, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'It matches text in your note or task.'},
{
'attributes': {'indent': 1, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'Enable reminders so that you will get notified by'},
{
'attributes': {'list': 'ordered'},
'insert': '\n'
},
{'insert': 'email'},
{
'attributes': {'indent': 1, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'message on your phone'},
{
'attributes': {'indent': 1, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'popup on the web site'},
{
'attributes': {'indent': 1, 'list': 'ordered'},
'insert': '\n'
},
{'insert': 'Create a BuJo serving as project or folder'},
{
'attributes': {'list': 'bullet'},
'insert': '\n'
},
{'insert': 'Organize your'},
{
'attributes': {'indent': 1, 'list': 'bullet'},
'insert': '\n'
},
{'insert': 'tasks'},
{
'attributes': {'indent': 2, 'list': 'bullet'},
'insert': '\n'
},
{'insert': 'notes'},
{
'attributes': {'indent': 2, 'list': 'bullet'},
'insert': '\n'
},
{'insert': 'transactions'},
{
'attributes': {'indent': 2, 'list': 'bullet'},
'insert': '\n'
},
{'insert': 'under BuJo '},
{
'attributes': {'indent': 3, 'list': 'bullet'},
'insert': '\n'
},
{'insert': 'See them in Calendar'},
{
'attributes': {'list': 'bullet'},
'insert': '\n'
},
{'insert': 'or hierarchical view'},
{
'attributes': {'indent': 1, 'list': 'bullet'},
'insert': '\n'
},
{'insert': 'this is a check list'},
{
'attributes': {'list': 'checked'},
'insert': '\n'
},
{'insert': 'this is a uncheck list'},
{
'attributes': {'list': 'unchecked'},
'insert': '\n'
},
{'insert': 'Font '},
{
'attributes': {'font': 'sans-serif'},
'insert': 'Sans Serif'
},
{'insert': ' '},
{
'attributes': {'font': 'serif'},
'insert': 'Serif'
},
{'insert': ' '},
{
'attributes': {'font': 'monospace'},
'insert': 'Monospace'
},
{'insert': ' Size '},
{
'attributes': {'size': 'small'},
'insert': 'Small'
},
{'insert': ' '},
{
'attributes': {'size': 'large'},
'insert': 'Large'
},
{'insert': ' '},
{
'attributes': {'size': 'huge'},
'insert': 'Huge'
},
{
'attributes': {'size': '15.0'},
'insert': 'font size 15'
},
{'insert': ' '},
{
'attributes': {'size': '35'},
'insert': 'font size 35'
},
{'insert': ' '},
{
'attributes': {'size': '20'},
'insert': 'font size 20'
},
{
'attributes': {'token': 'built_in'},
'insert': ' diff'
},
{
'attributes': {'token': 'operator'},
'insert': '-match'
},
{
'attributes': {'token': 'literal'},
'insert': '-patch'
},
{
'insert': {
'image':
'https://user-images.githubusercontent.com/122956/72955931-ccc07900-3d52-11ea-89b1-d468a6e2aa2b.png'
},
'attributes': {'width': '230', 'style': 'display: block; margin: auto;'}
},
{'insert': '\n'}
];

83
example/lib/samples/sample_data_testing.dart
View File

File diff suppressed because one or more lines are too long

4
flutter_quill_extensions/lib/flutter_quill_extensions.dart
Unescape View File

@ -4,6 +4,7 @@ import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter_quill/flutter_quill.dart'; import 'package:flutter_quill/flutter_quill.dart';
import 'package:meta/meta.dart' show immutable; import 'package:meta/meta.dart' show immutable;
import 'presentation/embeds/editor/formula.dart';
import 'presentation/embeds/editor/image/image.dart'; import 'presentation/embeds/editor/image/image.dart';
import 'presentation/embeds/editor/image/image_web.dart'; import 'presentation/embeds/editor/image/image_web.dart';
import 'presentation/embeds/editor/video/video.dart'; import 'presentation/embeds/editor/video/video.dart';
@ -142,6 +143,7 @@ class FlutterQuillEmbeds {
QuillEditorWebVideoEmbedBuilder( QuillEditorWebVideoEmbedBuilder(
configurations: videoEmbedConfigurations, configurations: videoEmbedConfigurations,
), ),
const QuillEditorFormulaEmbedBuilder()
]; ];
} }
@ -214,7 +216,7 @@ class FlutterQuillEmbeds {
// controller: mediaButtonOptions.controller ?? controller, // controller: mediaButtonOptions.controller ?? controller,
// options: mediaButtonOptions, // options: mediaButtonOptions,
// ), // ),
if (formulaButtonOptions != null && !kIsWeb) if (formulaButtonOptions != null)
(controller, toolbarIconSize, iconTheme, dialogTheme) => (controller, toolbarIconSize, iconTheme, dialogTheme) =>
QuillToolbarFormulaButton( QuillToolbarFormulaButton(
controller: formulaButtonOptions.controller ?? controller, controller: formulaButtonOptions.controller ?? controller,

9
flutter_quill_extensions/lib/presentation/embeds/editor/formula.dart
Unescape View File

@ -1,12 +1,13 @@
import 'package:flutter/foundation.dart' show kIsWeb; import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter/services.dart'; import 'package:flutter/services.dart' show SystemChannels;
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
import 'package:flutter_quill/extensions.dart' as base; import 'package:flutter_quill/extensions.dart' as base;
import 'package:flutter_quill/flutter_quill.dart'; import 'package:flutter_quill/flutter_quill.dart'
show BlockEmbed, EmbedBuilder, QuillController;
import 'package:math_keyboard/math_keyboard.dart'; import 'package:math_keyboard/math_keyboard.dart';
class FormulaEmbedBuilder extends EmbedBuilder { class QuillEditorFormulaEmbedBuilder extends EmbedBuilder {
const FormulaEmbedBuilder(); const QuillEditorFormulaEmbedBuilder();
@override @override
String get key => BlockEmbed.formulaType; String get key => BlockEmbed.formulaType;

59
flutter_quill_extensions/lib/presentation/embeds/editor/image/image_web.dart
Unescape View File

@ -6,6 +6,7 @@ import 'package:universal_html/html.dart' as html;
import '../../../models/config/editor/image/image_web.dart'; import '../../../models/config/editor/image/image_web.dart';
import '../../../utils/utils.dart'; import '../../../utils/utils.dart';
import '../../../utils/web_utils.dart';
import '../shims/dart_ui_fake.dart' import '../shims/dart_ui_fake.dart'
if (dart.library.html) '../shims/dart_ui_real.dart' as ui; if (dart.library.html) '../shims/dart_ui_real.dart' as ui;
@ -33,7 +34,7 @@ class QuillEditorWebImageEmbedBuilder extends EmbedBuilder {
) { ) {
assert(kIsWeb, 'ImageEmbedBuilderWeb is only for web platform'); assert(kIsWeb, 'ImageEmbedBuilderWeb is only for web platform');
final (height, width, margin, alignment) = _getImageWebAttributes(node); final (height, width, margin, alignment) = getWebElementAttributes(node);
var imageSource = node.value.data.toString(); var imageSource = node.value.data.toString();
@ -68,59 +69,3 @@ class QuillEditorWebImageEmbedBuilder extends EmbedBuilder {
); );
} }
} }
/// Prefer the width, and height from the css style attribute if exits
/// it can be `auto` or `100px` so it's specific to HTML && CSS
/// if not, we will use the one from attributes which is usually just an double
(
String height,
String width,
String margin,
String alignment,
) _getImageWebAttributes(
Node node,
) {
var height = 'auto';
var width = 'auto';
// TODO: Add support for margin and alignment
const margin = 'auto';
const alignment = 'center';
final cssStyle = node.style.attributes['style'];
// Usually double value
final heightValue = node.style.attributes[Attribute.height.key]?.value;
final widthValue = node.style.attributes[Attribute.width.key]?.value;
if (cssStyle != null) {
final attrs = base.parseKeyValuePairs(cssStyle.value.toString(), {
Attribute.width.key,
Attribute.height.key,
Attribute.margin,
Attribute.alignment,
});
final cssHeightValue = attrs[Attribute.height.key];
if (cssHeightValue != null) {
height = cssHeightValue;
} else {
height = '${heightValue}px';
}
final cssWidthValue = attrs[Attribute.width.key];
if (cssWidthValue != null) {
width = cssWidthValue;
} else if (widthValue != null) {
width = '${widthValue}px';
}
return (height, width, margin, alignment);
}
if (heightValue != null) {
height = '${heightValue}px';
}
if (widthValue != null) {
width = '${widthValue}px';
}
return (height, width, margin, alignment);
}

39
flutter_quill_extensions/lib/presentation/embeds/editor/video/video.dart
Unescape View File

@ -1,9 +1,7 @@
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_quill/extensions.dart' as base; import 'package:flutter_quill/extensions.dart' as base;
import 'package:flutter_quill/flutter_quill.dart'; import 'package:flutter_quill/flutter_quill.dart';
import 'package:math_keyboard/math_keyboard.dart';
import '../../../models/config/editor/video/video.dart'; import '../../../models/config/editor/video/video.dart';
import '../../../utils/utils.dart'; import '../../../utils/utils.dart';
@ -44,38 +42,3 @@ class QuillEditorVideoEmbedBuilder extends EmbedBuilder {
); );
} }
} }
class QuillEditorFormulaEmbedBuilder extends EmbedBuilder {
const QuillEditorFormulaEmbedBuilder();
@override
String get key => BlockEmbed.formulaType;
@override
Widget build(
BuildContext context,
QuillController controller,
base.Embed node,
bool readOnly,
bool inline,
TextStyle textStyle,
) {
assert(!kIsWeb, 'Please provide formula EmbedBuilder for Web');
final mathController = MathFieldEditingController();
return Focus(
onFocusChange: (hasFocus) {
if (hasFocus) {
// If the MathField is tapped, hides the built in keyboard
SystemChannels.textInput.invokeMethod('TextInput.hide');
debugPrint(mathController.currentEditingValue());
}
},
child: MathField(
controller: mathController,
variables: const ['x', 'y', 'z'],
onChanged: (value) {},
onSubmitted: (value) {},
),
);
}
}

12
flutter_quill_extensions/lib/presentation/embeds/editor/video/video_web.dart
Unescape View File

@ -1,4 +1,5 @@
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
import 'package:flutter_quill/extensions.dart' as base;
import 'package:flutter_quill/flutter_quill.dart'; import 'package:flutter_quill/flutter_quill.dart';
import 'package:universal_html/html.dart' as html; import 'package:universal_html/html.dart' as html;
import 'package:youtube_player_flutter/youtube_player_flutter.dart' import 'package:youtube_player_flutter/youtube_player_flutter.dart'
@ -6,6 +7,7 @@ import 'package:youtube_player_flutter/youtube_player_flutter.dart'
import '../../../models/config/editor/video/video_web.dart'; import '../../../models/config/editor/video/video_web.dart';
import '../../../utils/utils.dart'; import '../../../utils/utils.dart';
import '../../../utils/web_utils.dart';
import '../shims/dart_ui_fake.dart' import '../shims/dart_ui_fake.dart'
if (dart.library.html) '../shims/dart_ui_real.dart' as ui; if (dart.library.html) '../shims/dart_ui_real.dart' as ui;
@ -39,15 +41,17 @@ class QuillEditorWebVideoEmbedBuilder extends EmbedBuilder {
} }
} }
final size = MediaQuery.sizeOf(context); final (height, width, margin, alignment) = getWebElementAttributes(node);
ui.PlatformViewRegistry().registerViewFactory( ui.PlatformViewRegistry().registerViewFactory(
videoUrl, videoUrl,
(id) => html.IFrameElement() (id) => html.IFrameElement()
..width = size.width.toString() ..style.width = width
..height = size.height.toString() ..style.height = height
..src = videoUrl ..src = videoUrl
..style.border = 'none', ..style.border = 'none'
..style.margin = margin
..style.alignSelf = alignment,
); );
return SizedBox( return SizedBox(

58
flutter_quill_extensions/lib/presentation/utils/web_utils.dart
Unescape View File

@ -0,0 +1,58 @@
import 'package:flutter_quill/extensions.dart' as base;
import 'package:flutter_quill/flutter_quill.dart' show Attribute, Node;
/// Prefer the width, and height from the css style attribute if exits
/// it can be `auto` or `100px` so it's specific to HTML && CSS
/// if not, we will use the one from attributes which is usually just an double
(
String height,
String width,
String margin,
String alignment,
) getWebElementAttributes(
Node node,
) {
var height = 'auto';
var width = 'auto';
// TODO: Add support for margin and alignment
const margin = 'auto';
const alignment = 'center';
final cssStyle = node.style.attributes['style'];
// Usually double value
final heightValue = node.style.attributes[Attribute.height.key]?.value;
final widthValue = node.style.attributes[Attribute.width.key]?.value;
if (cssStyle != null) {
final attrs = base.parseKeyValuePairs(cssStyle.value.toString(), {
Attribute.width.key,
Attribute.height.key,
Attribute.margin,
Attribute.alignment,
});
final cssHeightValue = attrs[Attribute.height.key];
if (cssHeightValue != null) {
height = cssHeightValue;
} else {
height = '${heightValue}px';
}
final cssWidthValue = attrs[Attribute.width.key];
if (cssWidthValue != null) {
width = cssWidthValue;
} else if (widthValue != null) {
width = '${widthValue}px';
}
return (height, width, margin, alignment);
}
if (heightValue != null) {
height = '${heightValue}px';
}
if (widthValue != null) {
width = '${widthValue}px';
}
return (height, width, margin, alignment);
}
Write Preview
Loading…
Cancel
Save