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.
editor.insertTextNode(text, attributes: {
StyleKey.subtype: StyleKey.heading,
StyleKey.heading: StyleKey.h1,
BuiltInAttributeKey.subtype: BuiltInAttributeKey.heading,
BuiltInAttributeKey.heading: BuiltInAttributeKey.h1,
});
// Insert our text with the bulleted list style and the bold style.
@ -31,10 +31,10 @@ editor.insertTextNode(text, attributes: {
editor.insertTextNode(
'',
attributes: {
StyleKey.subtype: StyleKey.bulletedList,
BuiltInAttributeKey.subtype: BuiltInAttributeKey.bulletedList,
},
delta: Delta([
TextInsert(text, {StyleKey.bold: true}),
TextInsert(text, {BuiltInAttributeKey.bold: true}),
]),
);
```

View file

@ -21,6 +21,10 @@ class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: const [
AppFlowyEditorLocalizations.delegate,
],
supportedLocales: AppFlowyEditorLocalizations.delegate.supportedLocales,
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
@ -40,7 +44,9 @@ class MyHomePage extends StatefulWidget {
class _MyHomePageState extends State<MyHomePage> {
int _pageIndex = 0;
late EditorState _editorState;
EditorState? _editorState;
bool darkMode = false;
EditorStyle _editorStyle = EditorStyle.defaultStyle();
Future<String>? _jsonString;
@override
@ -78,24 +84,29 @@ class _MyHomePageState extends State<MyHomePage> {
return FutureBuilder<String>(
future: jsonString,
builder: (_, snapshot) {
if (snapshot.hasData) {
_editorState = EditorState(
if (snapshot.hasData &&
snapshot.connectionState == ConnectionState.done) {
_editorState ??= EditorState(
document: StateTree.fromJson(
Map<String, Object>.from(
json.decode(snapshot.data!),
),
),
);
_editorState.logConfiguration
_editorState!.logConfiguration
..level = LogLevel.all
..handler = (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,
child: AppFlowyEditor(
editorState: _editorState,
editorStyle: const EditorStyle.defaultStyle(),
editorState: _editorState!,
editorStyle: _editorStyle,
shortcutEvents: [
underscoreToItalicEvent,
],
@ -127,12 +138,26 @@ class _MyHomePageState extends State<MyHomePage> {
onPressed: () => _switchToPage(2),
),
ActionButton(
icon: const Icon(Icons.print),
onPressed: () => {_exportDocument(_editorState)}),
icon: const Icon(Icons.print),
onPressed: () => _exportDocument(_editorState!),
),
ActionButton(
icon: const Icon(Icons.import_export),
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) {
if (pageIndex != _pageIndex) {
setState(() {
_editorState = null;
_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/shortcut_event.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