feat: implement theme customizer

This commit is contained in:
Lucas.Xu 2022-09-15 21:27:49 +08:00
commit a908340e8b
81 changed files with 2970 additions and 853 deletions

View file

@ -22,8 +22,8 @@ editor.insertTextNode(text);
// Insert the same text, but with the heading style. // Insert the same text, but with the heading style.
editor.insertTextNode(text, attributes: { editor.insertTextNode(text, attributes: {
StyleKey.subtype: StyleKey.heading, BuiltInAttributeKey.subtype: BuiltInAttributeKey.heading,
StyleKey.heading: StyleKey.h1, BuiltInAttributeKey.heading: BuiltInAttributeKey.h1,
}); });
// Insert our text with the bulleted list style and the bold style. // Insert our text with the bulleted list style and the bold style.
@ -31,10 +31,10 @@ editor.insertTextNode(text, attributes: {
editor.insertTextNode( editor.insertTextNode(
'', '',
attributes: { attributes: {
StyleKey.subtype: StyleKey.bulletedList, BuiltInAttributeKey.subtype: BuiltInAttributeKey.bulletedList,
}, },
delta: Delta([ delta: Delta([
TextInsert(text, {StyleKey.bold: true}), TextInsert(text, {BuiltInAttributeKey.bold: true}),
]), ]),
); );
``` ```

View file

@ -21,6 +21,10 @@ class MyApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
localizationsDelegates: const [
AppFlowyEditorLocalizations.delegate,
],
supportedLocales: AppFlowyEditorLocalizations.delegate.supportedLocales,
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
theme: ThemeData( theme: ThemeData(
primarySwatch: Colors.blue, primarySwatch: Colors.blue,
@ -40,7 +44,9 @@ class MyHomePage extends StatefulWidget {
class _MyHomePageState extends State<MyHomePage> { class _MyHomePageState extends State<MyHomePage> {
int _pageIndex = 0; int _pageIndex = 0;
late EditorState _editorState; EditorState? _editorState;
bool darkMode = false;
EditorStyle _editorStyle = EditorStyle.defaultStyle();
Future<String>? _jsonString; Future<String>? _jsonString;
@override @override
@ -78,24 +84,29 @@ class _MyHomePageState extends State<MyHomePage> {
return FutureBuilder<String>( return FutureBuilder<String>(
future: jsonString, future: jsonString,
builder: (_, snapshot) { builder: (_, snapshot) {
if (snapshot.hasData) { if (snapshot.hasData &&
_editorState = EditorState( snapshot.connectionState == ConnectionState.done) {
_editorState ??= EditorState(
document: StateTree.fromJson( document: StateTree.fromJson(
Map<String, Object>.from( Map<String, Object>.from(
json.decode(snapshot.data!), json.decode(snapshot.data!),
), ),
), ),
); );
_editorState.logConfiguration _editorState!.logConfiguration
..level = LogLevel.all ..level = LogLevel.all
..handler = (message) { ..handler = (message) {
debugPrint(message); debugPrint(message);
}; };
return SizedBox( _editorState!.operationStream.listen((event) {
debugPrint('Operation: ${event.toJson()}');
});
return Container(
color: darkMode ? Colors.black : Colors.white,
width: MediaQuery.of(context).size.width, width: MediaQuery.of(context).size.width,
child: AppFlowyEditor( child: AppFlowyEditor(
editorState: _editorState, editorState: _editorState!,
editorStyle: const EditorStyle.defaultStyle(), editorStyle: _editorStyle,
shortcutEvents: [ shortcutEvents: [
underscoreToItalicEvent, underscoreToItalicEvent,
], ],
@ -127,12 +138,26 @@ class _MyHomePageState extends State<MyHomePage> {
onPressed: () => _switchToPage(2), onPressed: () => _switchToPage(2),
), ),
ActionButton( ActionButton(
icon: const Icon(Icons.print), icon: const Icon(Icons.print),
onPressed: () => {_exportDocument(_editorState)}), onPressed: () => _exportDocument(_editorState!),
),
ActionButton( ActionButton(
icon: const Icon(Icons.import_export), icon: const Icon(Icons.import_export),
onPressed: () => _importDocument(), onPressed: () => _importDocument(),
), ),
ActionButton(
icon: const Icon(Icons.color_lens),
onPressed: () {
setState(() {
_editorStyle = _editorStyle.copyWith(
textStyle: darkMode
? BuiltInTextStyle.builtIn()
: BuiltInTextStyle.builtInDarkMode(),
);
darkMode = !darkMode;
});
},
),
], ],
); );
} }
@ -166,6 +191,7 @@ class _MyHomePageState extends State<MyHomePage> {
void _switchToPage(int pageIndex) { void _switchToPage(int pageIndex) {
if (pageIndex != _pageIndex) { if (pageIndex != _pageIndex) {
setState(() { setState(() {
_editorState = null;
_pageIndex = pageIndex; _pageIndex = pageIndex;
}); });
} }

View file

@ -26,3 +26,5 @@ export 'src/service/input_service.dart';
export 'src/service/shortcut_event/keybinding.dart'; export 'src/service/shortcut_event/keybinding.dart';
export 'src/service/shortcut_event/shortcut_event.dart'; export 'src/service/shortcut_event/shortcut_event.dart';
export 'src/service/shortcut_event/shortcut_event_handler.dart'; export 'src/service/shortcut_event/shortcut_event_handler.dart';
export 'src/extensions/attributes_extension.dart';
export 'src/l10n/l10n.dart';

View file

@ -0,0 +1,35 @@
{
"@@locale": "ca",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "de-DE",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "en",
"bold": "Bold",
"@bold": {},
"bulletedList": "Bulleted List",
"@bulletedList": {},
"checkbox": "Checkbox",
"@checkbox": {},
"embedCode": "Embed Code",
"@embedCode": {},
"heading1": "H1",
"@heading1": {},
"heading2": "H2",
"@heading2": {},
"heading3": "H3",
"@heading3": {},
"highlight": "Highlight",
"@highlight": {},
"image": "Image",
"@image": {},
"italic": "Italic",
"@italic": {},
"link": "Link",
"@link": {},
"numberedList": "Numbered List",
"@numberedList": {},
"quote": "Quote",
"@quote": {},
"strikethrough": "Strikethrough",
"@strikethrough": {},
"text": "Text",
"@text": {},
"underline": "Underline",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "es-VE",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "fr-CA",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "fr-FR",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "hu-HU",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "id-ID",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "it-IT",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "ja-JP",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "pl-PL",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "pt-BR",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "pt-PT",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "ru-RU",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "tr-TR",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "zh-CN",
"bold": "加粗",
"@bold": {},
"bulletedList": "无序列表",
"@bulletedList": {},
"checkbox": "复选框",
"@checkbox": {},
"embedCode": "内嵌代码",
"@embedCode": {},
"heading1": "标题 1",
"@heading1": {},
"heading2": "标题 2",
"@heading2": {},
"heading3": "标题 3",
"@heading3": {},
"highlight": "高亮",
"@highlight": {},
"image": "图片",
"@image": {},
"italic": "斜体",
"@italic": {},
"link": "链接",
"@link": {},
"numberedList": "有序列表",
"@numberedList": {},
"quote": "引用",
"@quote": {},
"strikethrough": "删除线",
"@strikethrough": {},
"text": "文字",
"@text": {},
"underline": "下划线",
"@underline": {}
}

View file

@ -0,0 +1,35 @@
{
"@@locale": "zh-TW",
"bold": "",
"@bold": {},
"bulletedList": "",
"@bulletedList": {},
"checkbox": "",
"@checkbox": {},
"embedCode": "",
"@embedCode": {},
"heading1": "",
"@heading1": {},
"heading2": "",
"@heading2": {},
"heading3": "",
"@heading3": {},
"highlight": "",
"@highlight": {},
"image": "",
"@image": {},
"italic": "",
"@italic": {},
"link": "",
"@link": {},
"numberedList": "",
"@numberedList": {},
"quote": "",
"@quote": {},
"strikethrough": "",
"@strikethrough": {},
"text": "",
"@text": {},
"underline": "",
"@underline": {}
}

Some files were not shown because too many files have changed in this diff Show more