cubetiq/rich_editor
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: added font size dialog and icon tooltip

Browse Source
This commit is contained in:
jideguru 2021-05-29 18:02:50 +01:00
parent 25c6c39e1b
commit 758a107ed3
7 changed files with 144 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
assets/editor/index.html
View File

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Spoon-Knife</title>
<LINK href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="forkit.gif" id="octocat" alt="" />
<!-- Feel free to change this text here -->
<p>
Fork me? Fork you, @octocat!
</p>
<p>
Sean made a change
</p>
</body>
</html>

4
lib/rich_editor.dart
View File

@ -1,3 +1,5 @@
library rich_editor;
export 'package:rich_editor/src/rendering/rich_editor.dart';
export 'src/rendering/rich_editor.dart';
export 'src/widgets/tabs.dart';
export 'src/widgets/tab_button.dart';

33
lib/src/widgets/font_size_dialog.dart Normal file
View File

@ -0,0 +1,33 @@
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
class FontSizeDialog extends StatelessWidget {
List formats = [
{'id': '1', 'title': '<small><small><small>Teeny</small></small></small>'},
{'id': '2', 'title': '<small><small>Very small</small></small>'},
{'id': '3', 'title': '<small>Small</small>'},
{'id': '4', 'title': 'Medium'},
{'id': '5', 'title': '<big>Large</big>'},
{'id': '6', 'title': '<big><big>Very large</big></big>'},
{'id': '7', 'title': '<big><big><big>Huge</big></big></big>'},
];
@override
Widget build(BuildContext context) {
return AlertDialog(
content: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
for (Map format in formats)
InkWell(
child: Html(data: format['title']),
onTap: () => Navigator.pop(context, format['id']),
)
],
),
),
);
}
}

24
lib/src/widgets/fonts_dialog.dart
View File

@ -15,16 +15,20 @@ class FontsDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
for (Map font in fonts)
InkWell(
child: Html(data: font['title']),
onTap: () => Navigator.pop(context, font['id']),
)
],
return AlertDialog(
content: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
for (Map font in fonts)
InkWell(
child: Html(data: font['title']),
onTap: () => Navigator.pop(context, font['id']),
)
],
),
),
);
}
}

24
lib/src/widgets/heading_dialog.dart
View File

@ -19,16 +19,20 @@ class HeadingDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
for (Map format in formats)
InkWell(
child: Html(data: format['title']),
onTap: () => Navigator.pop(context, format['id']),
)
],
return AlertDialog(
content: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
for (Map format in formats)
InkWell(
child: Html(data: format['title']),
onTap: () => Navigator.pop(context, format['id']),
)
],
),
),
);
}
}

44
lib/src/widgets/tab_button.dart
View File

@ -3,33 +3,37 @@ import 'package:flutter/material.dart';
class TabButton extends StatelessWidget {
final IconData? icon;
final Function? onTap;
final String tooltip;
TabButton({this.icon, this.onTap});
TabButton({this.icon, this.onTap, this.tooltip = ''});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 5.0),
child: Container(
height: 45.0,
width: 45.0,
decoration: BoxDecoration(
// color: Color(0xff212121),
borderRadius: BorderRadius.all(
Radius.circular(5.0),
child: Tooltip(
message: '$tooltip',
child: Container(
height: 45.0,
width: 45.0,
decoration: BoxDecoration(
// color: Color(0xff212121),
borderRadius: BorderRadius.all(
Radius.circular(5.0),
),
),
),
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
onTap: () => onTap!(),
child: Center(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Icon(
icon,
// color: Theme.of(context).accentColor,
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
onTap: () => onTap!(),
child: Center(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Icon(
icon,
// color: Theme.of(context).accentColor,
),
),
),
),

63
lib/src/widgets/tabs.dart
View File

@ -8,6 +8,7 @@ import 'package:rich_editor/src/widgets/tab_button.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'color_picker_dialog.dart';
import 'font_size_dialog.dart';
import 'heading_dialog.dart';
class GroupedTab extends StatelessWidget {
@ -34,20 +35,24 @@ class GroupedTab extends StatelessWidget {
scrollDirection: Axis.horizontal,
children: [
TabButton(
tooltip: 'Bold',
icon: Icons.format_bold,
onTap: () async {
await javascriptExecutorBase.setBold();
},
),
TabButton(
tooltip: 'Italic',
icon: Icons.format_italic,
onTap: () async {
await javascriptExecutorBase.setItalic();
},
),
TabButton(
tooltip: 'Insert Link',
icon: Icons.link,
onTap: () async {
_closeKeyboard();
var link = await showDialog(
context: context,
barrierDismissible: false,
@ -60,8 +65,10 @@ class GroupedTab extends StatelessWidget {
},
),
TabButton(
tooltip: 'Insert Image',
icon: Icons.image,
onTap: () async {
_closeKeyboard();
var link = await showDialog(
context: context,
barrierDismissible: false,
@ -78,59 +85,68 @@ class GroupedTab extends StatelessWidget {
},
),
TabButton(
tooltip: 'Underline',
icon: Icons.format_underline,
onTap: () async {
await javascriptExecutorBase.setUnderline();
},
),
TabButton(
tooltip: 'Strike through',
icon: Icons.format_strikethrough,
onTap: () async {
await javascriptExecutorBase.setStrikeThrough();
},
),
TabButton(
tooltip: 'Superscript',
icon: Icons.superscript,
onTap: () async {
await javascriptExecutorBase.setSuperscript();
},
),
TabButton(
tooltip: 'Subscript',
icon: Icons.subscript,
onTap: () async {
await javascriptExecutorBase.setSubscript();
},
),
TabButton(
tooltip: 'Clear format',
icon: Icons.format_clear,
onTap: () async {
await javascriptExecutorBase.removeFormat();
},
),
TabButton(
tooltip: 'Undo',
icon: Icons.undo,
onTap: () async {
await javascriptExecutorBase.undo();
},
),
TabButton(
tooltip: 'Redo',
icon: Icons.redo,
onTap: () async {
await javascriptExecutorBase.redo();
},
),
TabButton(
tooltip: 'Blockquote',
icon: Icons.format_quote,
onTap: () async {
await javascriptExecutorBase.setBlockQuote();
},
),
TabButton(
tooltip: 'Font format',
icon: Icons.text_format,
onTap: () async {
var command = await showModalBottomSheet(
isScrollControlled: true,
_closeKeyboard();
var command = await showDialog(
// isScrollControlled: true,
context: context,
builder: (_) {
return HeadingDialog();
@ -151,10 +167,12 @@ class GroupedTab extends StatelessWidget {
},
),
TabButton(
tooltip: 'Font face',
icon: Icons.font_download,
onTap: () async {
var command = await showModalBottomSheet(
isScrollControlled: true,
_closeKeyboard();
var command = await showDialog(
// isScrollControlled: true,
context: context,
builder: (_) {
return FontsDialog();
@ -166,13 +184,25 @@ class GroupedTab extends StatelessWidget {
),
TabButton(
icon: Icons.format_size,
tooltip: 'Font Size',
onTap: () async {
await javascriptExecutorBase.setFontSize(7);
_closeKeyboard();
String? command = await showDialog(
// isScrollControlled: true,
context: context,
builder: (_) {
return FontSizeDialog();
},
);
if (command != null)
await javascriptExecutorBase.setFontSize(int.tryParse(command)!);
},
),
TabButton(
tooltip: 'Text Color',
icon: Icons.format_color_text,
onTap: () async {
_closeKeyboard();
var color = await showDialog(
context: context,
builder: (BuildContext context) {
@ -184,8 +214,10 @@ class GroupedTab extends StatelessWidget {
},
),
TabButton(
tooltip: 'Background Color',
icon: Icons.format_color_fill,
onTap: () async {
_closeKeyboard();
var color = await showDialog(
context: context,
builder: (BuildContext context) {
@ -198,56 +230,66 @@ class GroupedTab extends StatelessWidget {
},
),
TabButton(
tooltip: 'Increase Indent',
icon: Icons.format_indent_increase,
onTap: () async {
await javascriptExecutorBase.setIndent();
},
),
TabButton(
tooltip: 'Decrease Indent',
icon: Icons.format_indent_decrease,
onTap: () async {
await javascriptExecutorBase.setOutdent();
},
),
TabButton(
tooltip: 'Align Left',
icon: Icons.format_align_left_outlined,
onTap: () async {
await javascriptExecutorBase.setJustifyLeft();
},
),
TabButton(
tooltip: 'Align Center',
icon: Icons.format_align_center,
onTap: () async {
await javascriptExecutorBase.setJustifyCenter();
},
),
TabButton(
tooltip: 'Align Right',
icon: Icons.format_align_right,
onTap: () async {
await javascriptExecutorBase.setJustifyRight();
},
),
TabButton(
tooltip: 'Justify',
icon: Icons.format_align_justify,
onTap: () async {
await javascriptExecutorBase.setJustifyFull();
},
),
TabButton(
tooltip: 'Bullet List',
icon: Icons.format_list_bulleted,
onTap: () async {
await javascriptExecutorBase.insertBulletList();
},
),
TabButton(
tooltip: 'Numbered List',
icon: Icons.format_list_numbered,
onTap: () async {
await javascriptExecutorBase.insertNumberedList();
},
),
TabButton(
tooltip: 'Checkbox',
icon: Icons.check_box_outlined,
onTap: () async {
_closeKeyboard();
var text = await showDialog(
context: context,
builder: (BuildContext context) {
@ -255,11 +297,12 @@ class GroupedTab extends StatelessWidget {
},
);
print(text);
if(text != null)
if (text != null)
await javascriptExecutorBase.insertCheckbox(text);
},
),
TabButton(
tooltip: 'Search',
icon: Icons.search,
onTap: () async {
// await javascriptExecutorBase.insertNumberedList();
@ -272,4 +315,10 @@ class GroupedTab extends StatelessWidget {
),
);
}
// Hide the keyboard using JavaScript since it's being opened in a WebView
// https://stackoverflow.com/a/8263376/10835183
_closeKeyboard() async {
// controller!.evaluateJavascript('document.activeElement.blur();');
}
}