Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add block menu (#4222)

Browse Source 
* feat: add block menu

* fix: android add block issue
This commit is contained in:
Lucas.Xu 2023-12-28 12:37:10 +08:00 committed by GitHub
parent 1e16168a3d
commit 0b3c904984
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 395 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/appflowy_flutter/android/app/build.gradle
View File

@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
android {
compileSdkVersion 33
compileSdkVersion 34
ndkVersion "24.0.8215888"
compileOptions {

1
frontend/appflowy_flutter/lib/mobile/presentation/mobile_bottom_navigation_bar.dart
View File

@ -19,7 +19,6 @@ class MobileBottomNavigationBar extends StatelessWidget {
final style = Theme.of(context);
return Scaffold(
backgroundColor: Colors.red,
body: navigationShell,
bottomNavigationBar: BottomNavigationBar(
showSelectedLabels: false,

2
frontend/appflowy_flutter/lib/plugins/document/application/doc_bloc.dart
View File

@ -59,7 +59,7 @@ class DocumentBloc extends Bloc<DocumentEvent, DocumentState> {
await _viewListener.stop();
await _subscription?.cancel();
await _documentService.closeDocument(view: view);
state.editorState?.selection = null;
state.editorState?.service.keyboardService?.closeKeyboard();
state.editorState?.dispose();
return super.close();
}

3
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
View File

@ -22,6 +22,7 @@ import 'package:collection/collection.dart';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
final List<CommandShortcutEvent> commandShortcutEvents = [
@ -215,6 +216,8 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
@override
void dispose() {
SystemChannels.textInput.invokeMethod('TextInput.hide');
if (widget.scrollController == null) {
effectiveScrollController.dispose();
}

7
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_item/mobile_add_block_toolbar_item.dart
View File

@ -228,7 +228,7 @@ bool _unSelectable(
return false;
}
extension on EditorState {
extension EditorStateAddBlock on EditorState {
Future<void> insertBlockOrReplaceCurrentBlock(
Selection selection,
Node insertedNode,
@ -257,7 +257,8 @@ extension on EditorState {
..deleteNode(node)
..afterSelection = Selection.collapsed(
Position(path: path, offset: 0),
);
)
..selectionExtraInfo = null;
}
await apply(transaction);
service.keyboardService?.enableKeyBoard(selection);
@ -319,10 +320,10 @@ extension on EditorState {
paragraphNode(),
);
}
transaction.selectionExtraInfo = {};
transaction.afterSelection = Selection.collapsed(
Position(path: insertedPath.next),
);
await apply(transaction);
service.keyboardService?.enableKeyBoard(selection);
}
}

321
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart
View File

@ -1,11 +1,328 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_item/mobile_add_block_toolbar_item.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
import 'package:appflowy/startup/tasks/app_widget.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
final addBlockToolbarItem = AppFlowyMobileToolbarItem(
itemBuilder: (context, editorState, _, __, onAction) {
itemBuilder: (context, editorState, service, __, onAction) {
return AppFlowyMobileToolbarIconItem(
icon: FlowySvgs.m_toolbar_add_s,
onTap: () {},
onTap: () {
final selection = editorState.selection;
service.closeKeyboard();
// delay to wait the keyboard closed.
Future.delayed(const Duration(milliseconds: 100), () async {
editorState.updateSelectionWithReason(
selection,
extraInfo: {
selectionExtraInfoDisableMobileToolbarKey: true,
selectionExtraInfoDisableFloatingToolbar: true,
selectionExtraInfoDoNotAttachTextService: true,
},
);
keepEditorFocusNotifier.increase();
final didAddBlock = await showAddBlockMenu(
AppGlobals.rootNavKey.currentContext!,
editorState: editorState,
selection: selection!,
);
if (didAddBlock != true) {
editorState.updateSelectionWithReason(
selection,
);
}
});
},
);
},
);
Future<bool?> showAddBlockMenu(
BuildContext context, {
required EditorState editorState,
required Selection selection,
}) async {
final theme = ToolbarColorExtension.of(context);
return showMobileBottomSheet<bool>(
context,
showHeader: true,
showCloseButton: true,
showDivider: false,
showDragHandle: true,
barrierColor: Colors.transparent,
backgroundColor: theme.toolbarMenuBackgroundColor,
elevation: 20,
title: LocaleKeys.button_add.tr(),
padding: const EdgeInsets.fromLTRB(16, 4, 16, 0),
builder: (context) {
return Padding(
padding: const EdgeInsets.only(top: 12.0, bottom: 16),
child: _AddBlockMenu(
selection: selection,
editorState: editorState,
),
);
},
);
}
class _AddBlockMenu extends StatelessWidget {
_AddBlockMenu({
required this.selection,
required this.editorState,
});
final Selection selection;
final EditorState editorState;
late final _menuItemData = [
// paragraph
_AddBlockMenuItemData(
blockType: ParagraphBlockKeys.type,
backgroundColor: const Color(0xFFBAC9FF),
text: LocaleKeys.editor_text.tr(),
icon: FlowySvgs.m_add_block_paragraph_s,
onTap: () => _insertBlock(paragraphNode()),
),
// heading 1 - 3
_AddBlockMenuItemData(
blockType: HeadingBlockKeys.type,
backgroundColor: const Color(0xFFBAC9FF),
text: LocaleKeys.editor_heading1.tr(),
icon: FlowySvgs.m_add_block_h1_s,
onTap: () => _insertBlock(headingNode(level: 1)),
),
_AddBlockMenuItemData(
blockType: HeadingBlockKeys.type,
backgroundColor: const Color(0xFFBAC9FF),
text: LocaleKeys.editor_heading2.tr(),
icon: FlowySvgs.m_add_block_h2_s,
onTap: () => _insertBlock(headingNode(level: 2)),
),
_AddBlockMenuItemData(
blockType: HeadingBlockKeys.type,
backgroundColor: const Color(0xFFBAC9FF),
text: LocaleKeys.editor_heading3.tr(),
icon: FlowySvgs.m_add_block_h3_s,
onTap: () => _insertBlock(headingNode(level: 3)),
),
// checkbox
_AddBlockMenuItemData(
blockType: TodoListBlockKeys.type,
backgroundColor: const Color(0xFF91EAF5),
text: LocaleKeys.editor_checkbox.tr(),
icon: FlowySvgs.m_add_block_checkbox_s,
onTap: () => _insertBlock(todoListNode(checked: false)),
),
// list: bulleted, numbered, toggle
_AddBlockMenuItemData(
blockType: BulletedListBlockKeys.type,
backgroundColor: const Color(0xFFFFB9EF),
text: LocaleKeys.editor_bulletedList.tr(),
icon: FlowySvgs.m_add_block_bulleted_list_s,
onTap: () => _insertBlock(bulletedListNode()),
),
_AddBlockMenuItemData(
blockType: NumberedListBlockKeys.type,
backgroundColor: const Color(0xFFFFB9EF),
text: LocaleKeys.editor_numberedList.tr(),
icon: FlowySvgs.m_add_block_numbered_list_s,
onTap: () => _insertBlock(numberedListNode()),
),
_AddBlockMenuItemData(
blockType: ToggleListBlockKeys.type,
backgroundColor: const Color(0xFFFFB9EF),
text: LocaleKeys.document_plugins_toggleList.tr(),
icon: FlowySvgs.m_add_block_toggle_s,
onTap: () => _insertBlock(toggleListBlockNode()),
),
// callout, code, math equation, quote
_AddBlockMenuItemData(
blockType: CalloutBlockKeys.type,
backgroundColor: const Color(0xFFCABDFF),
text: LocaleKeys.document_plugins_callout.tr(),
icon: FlowySvgs.m_add_block_callout_s,
onTap: () => _insertBlock(calloutNode()),
),
_AddBlockMenuItemData(
blockType: CodeBlockKeys.type,
backgroundColor: const Color(0xFFCABDFF),
text: LocaleKeys.document_selectionMenu_codeBlock.tr(),
icon: FlowySvgs.m_add_block_code_s,
onTap: () => _insertBlock(codeBlockNode()),
),
_AddBlockMenuItemData(
blockType: MathEquationBlockKeys.type,
backgroundColor: const Color(0xFFCABDFF),
text: LocaleKeys.document_plugins_mathEquation_name.tr(),
icon: FlowySvgs.m_add_block_formula_s,
onTap: () {
AppGlobals.rootNavKey.currentContext?.pop(true);
Future.delayed(const Duration(milliseconds: 100), () {
editorState.insertMathEquation(selection);
});
},
),
_AddBlockMenuItemData(
blockType: QuoteBlockKeys.type,
backgroundColor: const Color(0xFFFDEDA7),
text: LocaleKeys.editor_quote.tr(),
icon: FlowySvgs.m_add_block_quote_s,
onTap: () => _insertBlock(quoteNode()),
),
// divider,
_AddBlockMenuItemData(
blockType: DividerBlockKeys.type,
backgroundColor: const Color(0xFF98F4CD),
text: LocaleKeys.editor_divider.tr(),
icon: FlowySvgs.m_add_block_divider_s,
onTap: () {
AppGlobals.rootNavKey.currentContext?.pop(true);
Future.delayed(const Duration(milliseconds: 100), () {
editorState.insertDivider(selection);
});
},
),
];
@override
Widget build(BuildContext context) {
return _GridView(
mainAxisSpacing: 20 * context.scale,
itemWidth: 68.0 * context.scale,
crossAxisCount: 4,
children: _menuItemData.map((e) => _AddBlockMenuItem(data: e)).toList(),
);
}
Future<void> _insertBlock(Node node) async {
AppGlobals.rootNavKey.currentContext?.pop(true);
Future.delayed(const Duration(milliseconds: 100), () {
editorState.insertBlockAfterCurrentSelection(
selection,
node,
);
});
}
}
class _AddBlockMenuItemData {
const _AddBlockMenuItemData({
required this.blockType,
required this.backgroundColor,
required this.text,
required this.icon,
required this.onTap,
});
final String blockType;
final Color backgroundColor;
final String text;
final FlowySvgData icon;
final VoidCallback onTap;
}
class _AddBlockMenuItem extends StatelessWidget {
const _AddBlockMenuItem({
required this.data,
});
final _AddBlockMenuItemData data;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: data.onTap,
child: Column(
children: [
Container(
height: 68.0 * context.scale,
width: 68.0 * context.scale,
decoration: ShapeDecoration(
color: data.backgroundColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
padding: const EdgeInsets.all(24),
child: FlowySvg(
data.icon,
color: Colors.black,
),
),
const VSpace(4),
FlowyText(
data.text,
fontSize: 13.0,
),
],
),
);
}
}
class _GridView extends StatelessWidget {
const _GridView({
required this.children,
required this.crossAxisCount,
required this.mainAxisSpacing,
required this.itemWidth,
});
final List<Widget> children;
final int crossAxisCount;
final double mainAxisSpacing;
final double itemWidth;
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
for (var i = 0; i < children.length; i += crossAxisCount)
Padding(
padding: EdgeInsets.only(bottom: mainAxisSpacing),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
for (var j = 0; j < crossAxisCount; j++)
i + j < children.length ? children[i + j] : HSpace(itemWidth),
],
),
),
],
);
}
}
extension on EditorState {
Future<void> insertBlockAfterCurrentSelection(
Selection selection,
Node node,
) async {
final path = selection.end.path.next;
final transaction = this.transaction;
transaction.insertNode(
path,
node,
);
transaction.afterSelection = Selection.collapsed(
Position(path: path, offset: 0),
);
transaction.selectionExtraInfo = {};
await apply(transaction);
}
}

8
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/appflowy_mobile_toolbar.dart
View File

@ -1,4 +1,5 @@
import 'dart:async';
import 'dart:io';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_close_keyboard_or_menu_button.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_toolbar_theme.dart';
@ -8,6 +9,7 @@ import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:collection/collection.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
@ -371,6 +373,12 @@ class _MobileToolbarState extends State<_MobileToolbar>
// close the keyboard and clear the selection
// if the selection is null, the keyboard and the toolbar will be hidden automatically
widget.editorState.selection = null;
// sometimes, the keyboard is not closed after the selection is cleared
if (Platform.isAndroid) {
SystemChannels.textInput
.invokeMethod('TextInput.hide');
}
}
},
),

8
frontend/resources/flowy_icons/16x/m_add_block_bulleted_list.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.0013 8.26628C6.73768 8.26628 7.33464 7.66932 7.33464 6.93294C7.33464 6.19656 6.73768 5.59961 6.0013 5.59961C5.26492 5.59961 4.66797 6.19656 4.66797 6.93294C4.66797 7.66932 5.26492 8.26628 6.0013 8.26628Z" fill="#1F2329"/>
<path d="M10.8902 6.04405C10.3993 6.04405 10.0013 6.44202 10.0013 6.93294C10.0013 7.42386 10.3993 7.82183 10.8902 7.82183H22.4457C22.9367 7.82183 23.3346 7.42386 23.3346 6.93294C23.3346 6.44202 22.9367 6.04405 22.4457 6.04405H10.8902Z" fill="#1F2329"/>
<path d="M10.8902 13.1552C10.3993 13.1552 10.0013 13.5531 10.0013 14.0441C10.0013 14.535 10.3993 14.9329 10.8902 14.9329H22.4457C22.9367 14.9329 23.3346 14.535 23.3346 14.0441C23.3346 13.5531 22.9367 13.1552 22.4457 13.1552H10.8902Z" fill="#1F2329"/>
<path d="M10.0013 21.1552C10.0013 20.6642 10.3993 20.2663 10.8902 20.2663H22.4457C22.9367 20.2663 23.3346 20.6642 23.3346 21.1552C23.3346 21.6461 22.9367 22.0441 22.4457 22.0441H10.8902C10.3993 22.0441 10.0013 21.6461 10.0013 21.1552Z" fill="#1F2329"/>
<path d="M7.33464 14.0441C7.33464 14.7804 6.73768 15.3774 6.0013 15.3774C5.26492 15.3774 4.66797 14.7804 4.66797 14.0441C4.66797 13.3077 5.26492 12.7107 6.0013 12.7107C6.73768 12.7107 7.33464 13.3077 7.33464 14.0441Z" fill="#1F2329"/>
<path d="M6.0013 22.4885C6.73768 22.4885 7.33464 21.8915 7.33464 21.1552C7.33464 20.4188 6.73768 19.8218 6.0013 19.8218C5.26492 19.8218 4.66797 20.4188 4.66797 21.1552C4.66797 21.8915 5.26492 22.4885 6.0013 22.4885Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

5
frontend/resources/flowy_icons/16x/m_add_block_callout.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.9081 5.1333C5.92871 5.1333 5.13477 5.92725 5.13477 6.90663V12.2266C5.13477 13.206 5.92871 14 6.9081 14H21.0948C22.0742 14 22.8681 13.206 22.8681 12.2266V6.90663C22.8681 5.92725 22.0742 5.1333 21.0948 5.1333H6.9081ZM21.0948 6.90663V12.2266H6.9081V6.90663H21.0948Z" fill="#1F2329"/>
<path d="M6.02143 17.5466C6.02143 17.0569 6.41841 16.66 6.9081 16.66H21.0948C21.5845 16.66 21.9814 17.0569 21.9814 17.5466C21.9814 18.0363 21.5845 18.4333 21.0948 18.4333H6.9081C6.41841 18.4333 6.02143 18.0363 6.02143 17.5466Z" fill="#1F2329"/>
<path d="M6.9081 21.0933C6.41841 21.0933 6.02143 21.4903 6.02143 21.98C6.02143 22.4697 6.41841 22.8666 6.9081 22.8666H14.0014C14.4911 22.8666 14.8881 22.4697 14.8881 21.98C14.8881 21.4903 14.4911 21.0933 14.0014 21.0933H6.9081Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 887 B

4
frontend/resources/flowy_icons/16x/m_add_block_checkbox.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.41229 6.80125C6.60255 6.6103 6.86059 6.50303 7.12965 6.50303H17.2746C17.733 6.50303 18.1046 6.13006 18.1046 5.66997C18.1046 5.20989 17.733 4.83691 17.2746 4.83691H7.12965C6.42031 4.83691 5.74002 5.11972 5.23844 5.62313C4.73686 6.12653 4.45508 6.80929 4.45508 7.52121V20.4799C4.45508 21.1918 4.73686 21.8746 5.23844 22.378C5.74002 22.8814 6.42031 23.1642 7.12965 23.1642H20.0414C20.7507 23.1642 21.431 22.8814 21.9326 22.378C22.4342 21.8746 22.7159 21.1918 22.7159 20.4799V14.8336C22.7159 14.3735 22.3443 14.0006 21.8859 14.0006C21.4275 14.0006 21.0559 14.3735 21.0559 14.8336V20.4799C21.0559 20.7499 20.949 21.0089 20.7587 21.1999C20.5685 21.3908 20.3104 21.4981 20.0414 21.4981H7.12965C6.86059 21.4981 6.60255 21.3908 6.41229 21.1999C6.22204 21.0089 6.11516 20.7499 6.11516 20.4799V7.52121C6.11516 7.25117 6.22204 6.99219 6.41229 6.80125Z" fill="#1F2329"/>
<path d="M23.2818 8.78072C23.6177 8.46766 23.6372 7.94056 23.3252 7.60341C23.0133 7.26626 22.4881 7.24674 22.1522 7.55981L13.7781 15.364L11.6612 13.3912C11.3253 13.0781 10.8001 13.0977 10.4882 13.4348C10.1763 13.772 10.1957 14.2991 10.5316 14.6121L13.2133 17.1113C13.5318 17.4081 14.0244 17.4081 14.3429 17.1113L23.2818 8.78072Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

5
frontend/resources/flowy_icons/16x/m_add_block_code.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.1457 3.50661C14.666 3.44772 14.2295 3.78881 14.1706 4.26845L12.0379 21.638C11.979 22.1177 12.3201 22.5542 12.7997 22.6131C13.2794 22.672 13.7159 22.3309 13.7748 21.8513L15.9075 4.48173C15.9664 4.00208 15.6253 3.56551 15.1457 3.50661Z" fill="#1F2329"/>
<path d="M10.6812 7.19113C11.0229 7.53284 11.0229 8.08685 10.6812 8.42856L5.61244 13.4973L10.6812 18.5661C11.0229 18.9078 11.0229 19.4619 10.6812 19.8036C10.3395 20.1453 9.78549 20.1453 9.44378 19.8036L3.75628 14.1161C3.41457 13.7744 3.41457 13.2203 3.75628 12.8786L9.44378 7.19113C9.78549 6.84942 10.3395 6.84942 10.6812 7.19113Z" fill="#1F2329"/>
<path d="M17.3188 7.19113C16.9771 7.53284 16.9771 8.08685 17.3188 8.42856L22.3876 13.4973L17.3188 18.5661C16.9771 18.9078 16.9771 19.4619 17.3188 19.8036C17.6605 20.1453 18.2145 20.1453 18.5562 19.8036L24.2437 14.1161C24.5854 13.7744 24.5854 13.2203 24.2437 12.8786L18.5562 7.19113C18.2145 6.84942 17.6605 6.84942 17.3188 7.19113Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
frontend/resources/flowy_icons/16x/m_add_block_divider.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.39026 13.02C4.86191 13.02 4.43359 13.4483 4.43359 13.9767C4.43359 14.505 4.86191 14.9334 5.39026 14.9334H22.6103C23.1386 14.9334 23.5669 14.505 23.5669 13.9767C23.5669 13.4483 23.1386 13.02 22.6103 13.02H5.39026Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 346 B

3
frontend/resources/flowy_icons/16x/m_add_block_formula.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.39627 8.29966C5.32813 7.52282 5.87763 5.83301 7.19839 5.83301H21.2562C21.7583 5.83301 22.1654 6.24005 22.1654 6.74217C22.1654 7.24428 21.7583 7.65133 21.2562 7.65133H8.59631L15.8305 12.9125C16.5793 13.4572 16.5793 14.5738 15.8305 15.1184L8.59631 20.3796H21.2562C21.7583 20.3796 22.1654 20.7866 22.1654 21.2887C22.1654 21.7909 21.7583 22.1979 21.2562 22.1979H7.19839C5.87763 22.1979 5.32813 20.5081 6.39627 19.7313L14.2555 14.0155L6.39627 8.29966Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 580 B

4
frontend/resources/flowy_icons/16x/m_add_block_h1.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5069 7.19971H19.2669V23.9997H16.5069V16.7277H9.30687V23.9997H6.54688V7.19971H9.30687V14.0877H16.5069V7.19971Z" fill="#1F2329"/>
<path d="M24.065 12.7997H25.985V23.9997H23.777V15.1357L21.665 15.7277L21.121 13.8397L24.065 12.7997Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 363 B

4
frontend/resources/flowy_icons/16x/m_add_block_h2.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4318 6.30029H15.8468V21.0003H13.4318V14.6373H7.1318V21.0003H4.7168V6.30029H7.1318V12.3273H13.4318V6.30029Z" fill="#1F2329"/>
<path d="M17.6932 21.0003V19.5583L21.0392 16.1143C21.7858 15.3303 22.1592 14.677 22.1592 14.1543C22.1592 13.7716 22.0378 13.4636 21.7952 13.2303C21.5618 12.997 21.2585 12.8803 20.8852 12.8803C20.1478 12.8803 19.6018 13.263 19.2472 14.0283L17.6232 13.0763C17.9312 12.4043 18.3745 11.891 18.9532 11.5363C19.5318 11.1816 20.1665 11.0043 20.8572 11.0043C21.7438 11.0043 22.5045 11.2843 23.1392 11.8443C23.7738 12.395 24.0912 13.1416 24.0912 14.0843C24.0912 15.1016 23.5545 16.147 22.4812 17.2203L20.5632 19.1383H24.2452V21.0003H17.6932Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 792 B

4
frontend/resources/flowy_icons/16x/m_add_block_h3.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.3835 5.8501H14.626V19.5001H12.3835V13.5916H6.53352V19.5001H4.29102V5.8501H6.53352V11.4466H12.3835V5.8501Z" fill="#1F2329"/>
<path d="M20.5785 14.0921C21.1938 14.2741 21.6922 14.5948 22.0735 15.0541C22.4635 15.5048 22.6585 16.0508 22.6585 16.6921C22.6585 17.6281 22.3422 18.3604 21.7095 18.8891C21.0855 19.4178 20.3185 19.6821 19.4085 19.6821C18.6978 19.6821 18.0608 19.5218 17.4975 19.2011C16.9428 18.8718 16.5398 18.3908 16.2885 17.7581L17.8225 16.8741C18.0478 17.5761 18.5765 17.9271 19.4085 17.9271C19.8678 17.9271 20.2232 17.8188 20.4745 17.6021C20.7345 17.3768 20.8645 17.0734 20.8645 16.6921C20.8645 16.3194 20.7345 16.0204 20.4745 15.7951C20.2232 15.5698 19.8678 15.4571 19.4085 15.4571H19.0185L18.3295 14.4171L20.1235 12.0771H16.5615V10.4001H22.2815V11.8821L20.5785 14.0921Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 917 B

8
frontend/resources/flowy_icons/16x/m_add_block_numbered_list.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.3094 5.26017C7.3094 4.89219 6.91237 4.66352 6.59748 4.85013L6.16035 5.10912L6.15698 5.11122C6.11104 5.13988 6.0129 5.19965 5.88834 5.27551C5.59058 5.45685 5.14189 5.7301 4.89483 5.88991C4.7486 5.9845 4.66797 6.14638 4.66797 6.31426C4.66797 6.73685 5.14145 6.99237 5.49273 6.77211C5.69015 6.64832 5.897 6.52006 6.05084 6.42594V9.47287C6.05084 9.8229 6.33258 10.1067 6.68012 10.1067C7.02766 10.1067 7.3094 9.8229 7.3094 9.47287V5.26017Z" fill="#1F2329"/>
<path d="M6.52728 11.5049C5.45533 11.5049 4.73934 12.221 4.73934 13.1174C4.73934 13.2387 4.83701 13.3371 4.95748 13.3371H5.73219C5.85642 13.3371 5.95712 13.2357 5.95712 13.1106C5.95712 12.8297 6.15554 12.5945 6.4865 12.5945C6.6462 12.5945 6.77366 12.6461 6.85945 12.726C6.94385 12.8045 6.99889 12.9201 6.99889 13.0729C6.99889 13.3485 6.83486 13.5796 6.53005 13.9038L4.95186 15.6279C4.85235 15.7366 4.79711 15.8791 4.79711 16.0269C4.79711 16.352 5.05878 16.6156 5.38156 16.6156H7.99308C8.29558 16.6156 8.54081 16.3686 8.54081 16.0639C8.54081 15.7592 8.29558 15.5122 7.99308 15.5122H6.58505L7.39655 14.5941C7.92644 14.0229 8.25745 13.6073 8.25745 12.9874C8.25745 12.5544 8.07954 12.1785 7.76798 11.9136C7.45852 11.6506 7.02723 11.5049 6.52728 11.5049Z" fill="#1F2329"/>
<path d="M6.54087 18.014C5.66581 18.014 5.06907 18.4324 4.84834 19.0459C4.78249 19.2288 4.8325 19.4057 4.94143 19.5299C5.04732 19.6506 5.20818 19.723 5.37872 19.723C5.54531 19.723 5.68449 19.6514 5.7942 19.5649C5.90294 19.4793 5.99365 19.3705 6.06608 19.2761C6.14945 19.1675 6.28935 19.0796 6.51029 19.0796C6.69326 19.0796 6.83142 19.1348 6.92113 19.2133C7.00931 19.2905 7.06005 19.3978 7.06005 19.5272L7.06006 19.5288C7.06133 19.6735 7.00723 19.7899 6.91625 19.8719C6.82375 19.9553 6.68218 20.0125 6.4967 20.0125H6.37437C6.08313 20.0125 5.84703 20.2503 5.84703 20.5436C5.84703 20.837 6.08313 21.0747 6.37437 21.0747H6.52048C6.76021 21.0747 6.92816 21.1399 7.03363 21.2305C7.13686 21.3191 7.19467 21.4441 7.19597 21.5991C7.19728 21.7568 7.13919 21.8869 7.03483 21.9796C6.92879 22.0738 6.76132 22.1411 6.52728 22.1411C6.24898 22.1411 6.06801 22.0411 5.96758 21.91C5.89613 21.8167 5.8069 21.7104 5.69965 21.6269C5.59127 21.5426 5.45442 21.4738 5.2909 21.4738C5.1202 21.4738 4.95925 21.5459 4.85259 21.6662C4.74308 21.7897 4.69131 21.9658 4.75335 22.1493C4.96537 22.7768 5.55891 23.217 6.50349 23.217C7.02667 23.217 7.51362 23.0701 7.87299 22.7992C8.2354 22.5261 8.46716 22.1256 8.4613 21.6397C8.45309 21.0359 8.13412 20.6565 7.77133 20.4724C8.06697 20.2701 8.31962 19.9088 8.31178 19.4007C8.29561 18.5577 7.5122 18.014 6.54087 18.014Z" fill="#1F2329"/>
<path d="M10.287 7.18003C10.287 6.69619 10.6764 6.30395 11.1568 6.30395H22.4648C22.9452 6.30395 23.3346 6.69619 23.3346 7.18003C23.3346 7.66387 22.9452 8.05611 22.4648 8.05611H11.1568C10.6764 8.05611 10.287 7.66387 10.287 7.18003Z" fill="#1F2329"/>
<path d="M10.287 14.1886C10.287 13.7048 10.6764 13.3126 11.1568 13.3126H22.4648C22.9452 13.3126 23.3346 13.7048 23.3346 14.1886C23.3346 14.6725 22.9452 15.0647 22.4648 15.0647H11.1568C10.6764 15.0647 10.287 14.6725 10.287 14.1886Z" fill="#1F2329"/>
<path d="M10.287 21.1973C10.287 20.7134 10.6764 20.3212 11.1568 20.3212H22.4648C22.9452 20.3212 23.3346 20.7134 23.3346 21.1973C23.3346 21.6811 22.9452 22.0733 22.4648 22.0733H11.1568C10.6764 22.0733 10.287 21.6811 10.287 21.1973Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

3
frontend/resources/flowy_icons/16x/m_add_block_paragraph.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.48047 5.91493C5.48047 5.4188 5.88611 5.0166 6.3865 5.0166H21.6078C22.1082 5.0166 22.5138 5.4188 22.5138 5.91493V8.13081C22.5138 8.62694 22.1082 9.02914 21.6078 9.02914C21.1074 9.02914 20.7017 8.62694 20.7017 8.13081V6.81327H14.9032V21.1866H17.6212C18.1216 21.1866 18.5272 21.5888 18.5272 22.0849C18.5272 22.5811 18.1216 22.9833 17.6212 22.9833H10.373C9.87259 22.9833 9.46695 22.5811 9.46695 22.0849C9.46695 21.5888 9.87259 21.1866 10.373 21.1866H13.0912V6.81327H7.29253V8.13081C7.29253 8.62694 6.88688 9.02914 6.3865 9.02914C5.88611 9.02914 5.48047 8.62694 5.48047 8.13081V5.91493Z" fill="#333333"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 715 B

4
frontend/resources/flowy_icons/16x/m_add_block_quote.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8267 16.6021C22.4 15.9788 22.75 15.147 22.75 14.2334C22.75 12.3004 21.183 10.7334 19.25 10.7334C17.317 10.7334 15.75 12.3004 15.75 14.2334C15.75 16.0604 17.1498 17.5604 18.9354 17.7195L17.5209 19.7778L18.9632 20.7689L21.8267 16.6021Z" fill="#1F2329"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3267 13.1021C11.9 12.4788 12.25 11.647 12.25 10.7334C12.25 8.8004 10.683 7.2334 8.75 7.2334C6.817 7.2334 5.25 8.8004 5.25 10.7334C5.25 12.5604 6.64982 14.0604 8.43542 14.2195L7.0209 16.2778L8.46316 17.2689L11.3267 13.1021Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 702 B

4
frontend/resources/flowy_icons/16x/m_add_block_toggle.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4.79823" y="4.79921" width="18.4009" height="18.4009" rx="4.24213" stroke="#1F2329" stroke-width="1.43241"/>
<path d="M13.5312 16.4487L10.4606 13.3781C10.0441 12.9616 10.3391 12.2495 10.9281 12.2495H17.0693C17.6583 12.2495 17.9533 12.9616 17.5368 13.3781L14.4662 16.4487C14.208 16.7069 13.7894 16.7069 13.5312 16.4487Z" fill="#1F2329"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 449 B