Soft and gentle rich text editing for Flutter applications

Overview

Soft and gentle rich text editing for Flutter applications.

Zefyrka is a fork of Zefyr package with the following improvements:

  • support Flutter 2.0
  • opt-in the null safety
  • added the extended attributes:
    • text color
    • background color
    • paragraph alignment
    • paragraph indentation

For documentation see https://github.com/gkynskyi/zefyrka.

zefyrka screenshot

Usage

See the example directory for a minimal example of how to use Zefyrka. You typically just need to instantiate a controller:

ZefyrController _controller = ZefyrController();

and then embed the toolbar and the editor, within your app. For example:

Column(
  children: [
    ZefyrToolbar.basic(controller: _controller),
    Expanded(
      child: ZefyrEditor(
        controller: _controller,
      ),
    ),
  ],
)

Check out Sample Page for advanced usage.

Installation

Official releases of Zefyrka can be installed from Dart's Pub package repository.

Note that versions from Pub track stable channel of Flutter.

To install Zefyrka from Pub add zefyrka package as a dependency to your pubspec.yaml:

dependencies:
  zefyrka: [latest_version]

And run flutter packages get.

Continue to https://github.com/glynskyi/zefyrka/blob/main/doc/quick-start.md to learn more about Zefyrka and how to use it in your projects.

Comments
  • Build fail on: The non-abstract class 'RawEditorState' is missing implementations for these members

    Build fail on: The non-abstract class 'RawEditorState' is missing implementations for these members

    ../flutter/.pub-cache/hosted/pub.dartlang.org/zefyrka-1.0.9/lib/src/widgets/editor.dart:722:7: Error: The non-abstract class 'RawEditorState' is missing implementations for these members: - TextSelectionDelegate.copySelection - TextSelectionDelegate.cutSelection - TextSelectionDelegate.pasteText - TextSelectionDelegate.selectAll Try to either - provide an implementation, - inherit an implementation from a superclass or mixin, - mark the class as abstract, or - provide a 'noSuchMethod' implementation.

    class RawEditorState extends EditorState
          ^^^^^^^^^^^^^^
    ../../../../flutter/packages/flutter/lib/src/services/text_input.dart:948:8: Context: 'TextSelectionDelegate.copySelection' is defined here.
      void copySelection(SelectionChangedCause cause) {
           ^^^^^^^^^^^^^
    ../../../../flutter/packages/flutter/lib/src/services/text_input.dart:872:8: Context: 'TextSelectionDelegate.cutSelection' is defined here.
      void cutSelection(SelectionChangedCause cause) {
           ^^^^^^^^^^^^
    ../../../../flutter/packages/flutter/lib/src/services/text_input.dart:900:16: Context: 'TextSelectionDelegate.pasteText' is defined here.
      Future<void> pasteText(SelectionChangedCause cause) async {
                   ^^^^^^^^^
    ../../../../flutter/packages/flutter/lib/src/services/text_input.dart:928:8: Context: 'TextSelectionDelegate.selectAll' is defined here.
      void selectAll(SelectionChangedCause cause) {
           ^^^^^^^^^
    
    opened by FelixYew 4
  • Embeded content not interative

    Embeded content not interative

    I have a embed node with a button, but the button not receiver the click This issue is also reported here: https://github.com/memspace/zefyr/issues/426

    bug 
    opened by d3roch4 3
  • Missing implementation 'insertTextPlaceholder' (Flutter 3.0)

    Missing implementation 'insertTextPlaceholder' (Flutter 3.0)

    Try to compile with flutter 3.0 and you'll get the following error:

    ../../../../Software/flutter/.pub-cache/hosted/pub.dartlang.org/zefyrka-1.1.1/lib/src/widgets/editor.dart:722:7: Error: The non-abstract class 'RawEditorState' is missing implementations for these members:
     - TextInputClient.insertTextPlaceholder
     - TextInputClient.removeTextPlaceholder
    Try to either
     - provide an implementation,
     - inherit an implementation from a superclass or mixin,
     - mark the class as abstract, or
     - provide a 'noSuchMethod' implementation.
    class RawEditorState extends EditorState
          ^^^^^^^^^^^^^^
    ../../../../Software/flutter/packages/flutter/lib/src/services/text_input.dart:1124:8: Context: 'TextInputClient.insertTextPlaceholder' is defined here.
      void insertTextPlaceholder(Size size) {}
           ^^^^^^^^^^^^^^^^^^^^^
    ../../../../Software/flutter/packages/flutter/lib/src/services/text_input.dart:1127:8: Context: 'TextInputClient.removeTextPlaceholder' is defined here.
      void removeTextPlaceholder() {}
           ^^^^^^^^^^^^^^^^^^^^^
    ../../../../Software/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_quill-4.1.3/lib/src/widgets/raw_editor.dart:233:7: Error: The non-abstract class 'RawEditorState' is missing implementations for these members:
     - TextInputClient.insertTextPlaceholder
     - TextInputClient.removeTextPlaceholder
    Try to either
     - provide an implementation,
     - inherit an implementation from a superclass or mixin,
     - mark the class as abstract, or
     - provide a 'noSuchMethod' implementation.
    
    opened by Albert-Jan 2
  • Package version 1.1.1 not installing ...

    Package version 1.1.1 not installing ...

    My pubspec.yaml defines sdk: ">=2.15.0-144.0.dev <3.0.0" but cannot install the package:

    Running "flutter pub get" in myapp...
    The current Dart SDK version is 2.15.0-144.0.dev.

    Because myapp depends on zefyrka >=1.1.0 which requires SDK version >=2.15.0 <3.0.0, version solving failed. pub get failed (1; Because myapp depends on zefyrka >=1.1.0 which requires SDK version >=2.15.0 <3.0.0, version solving failed.)

    opened by saguado69 2
  • Allow shortcut handling

    Allow shortcut handling

    This is a one-line change (plus updated comment) that allows the consuming flutter app to handle keyboard shortcuts as intended while the focus is on the text editor. If the particular key combination is not handled by zefyrka, it propagates to other keyboard handlers and lets them handle it as desired.

    For example, in my macOS desktop flutter app, I have keyboard shortcuts (which are uniform for every screen of the app) where cmd+[ is "back" and cmd+] is "forward". This works elsewhere but does not work while the zefyrka editor is active because the zefyrka code was KeyEventResult.skipRemainingHandlers when it should be KeyEventResult.ignored. In both cases, the key event will be ignored by zefyrka if it's not an event zefyrka is listening to, but with this change it can now be properly intercepted outside of zefyrka if desired.

    opened by jason-downs 2
  • added top and bottom widgets

    added top and bottom widgets

    Sometimes you want to wrap the ZefyrEditor in a Column together with other widgets but that's not currently possible not without having 2 scrollable widgets. This is an attempt to fix that.

    opened by nelsonweze 2
  • Notus to HTML converter

    Notus to HTML converter

    Is there a project similar to https://github.com/JacobWrenn/notustohtml/blob/master/lib/notustohtml.dart that will allow for delta to HTML conversion for this new Delta object created in Zefyrka?

    question 
    opened by dumilonz 2
  • Can't install the zefyrka dependency.

    Can't install the zefyrka dependency.

    [baatdilki] flutter pub get Running "flutter pub get" in baatdilki...
    Because every version of flutter_test from sdk depends on meta 1.3.0 and zefyrka >=1.0.2 depends on meta ^1.4.0, flutter_test from sdk is incompatible with zefyrka >=1.0.2. So, because baatdilki depends on both zefyrka ^1.0.2+1 and flutter_test any from sdk, version solving failed. pub get failed (1; So, because baatdilki depends on both zefyrka ^1.0.2+1 and flutter_test any from sdk, version solving failed.) exit code 1

    bug 
    opened by darkworld000999 2
  • Can't run flutter pub get

    Can't run flutter pub get

    Hello, I got the following error when I try to run flutter pub get

    Because every version of flutter_test from sdk depends on meta 1.3.0 and zefyrka >=1.0.2 depends on meta ^1.4.0, flutter_test from sdk is incompatible with zefyrka >=1.0.2.

    Any solution regarding this matter? Thank you

    bug 
    opened by antonygunawan94 2
  • How do I get the real-time height of ZefyrField?

    How do I get the real-time height of ZefyrField?

    Hi, I need to dynamically control the height of the parent container, ZefyrField does not have an onChange callback? I need to get the RenderBox in the onChange method to calculate the height. Is there any other way to get the height change of ZefyrField? Thanks.

    opened by jihchao 1
  • Can't change text color and background color

    Can't change text color and background color

    When the app is in dark-mode, everything is okay but when in light-mode the text color still remains white and I can't seem to find a way of changing the text color to black.

    opened by bettkipronoh 1
  • Getting Bad State no element found

    Getting Bad State no element found

    In Editor.dart line 579 child.getPositionForOffset(localOffset); throws the exception. Looks like the underlying text field isn't getting a size properly. I've tried to put the ZefyrField into Columns, Expanded, Container, etc and it still throws this problem. I've even copied the example code and it gives me the same problems.

    opened by flosketch 0
  • A TextField Widget that allow how to convert easily what's in the TextField to with custom texteditor toolbar?

    A TextField Widget that allow how to convert easily what's in the TextField to with custom texteditor toolbar?

    A TextField Widget that allow how to convert easily what's in the TextField to with custom texteditor toolbar how to do this package give sample code for this question

    opened by DazzlingCVa 0
  • support callback when type @ to @someone? support custom emoji image? support type **text** auto change to bold text?

    support callback when type @ to @someone? support custom emoji image? support type **text** auto change to bold text?

    1. support callback when type @ to @someone? support @someone style? support callback when hover @someone?
    2. support custom emoji image?
    3. Can I input: **some text**, and it auto changes to some text in bold?
    opened by SteveCruise 0
  • Hand cursor on link hover

    Hand cursor on link hover

    On web, when hovering over the links, it doesn't show the hand cursor to indicate it is a clickable element. However, it is clickable with the editing cursor.

    opened by aliasgarlabs 0
Owner
null
Rich Text renderer that parses Contentful Rich Text JSON object and returns a renderable Flutter widget

Contentful Rich Text Renderer for Flutter Rich Text renderer that parses Contentful Rich Text field JSON output and produces a Flutter Widget tree tha

Kumanu 45 Nov 10, 2022
A powerful extended official text for Flutter, which supports Speical Text(Image,@somebody), Custom Background, Custom overFlow, Text Selection.

Extended official text to build special text like inline image or @somebody quickly,it also support custom background,custom over flow and custom selection toolbar and handles.

FlutterCandies 509 Jan 4, 2023
A Flutter package to parse text and make them into linkified text widget

?? Flutter Parsed text A Flutter package to parse text and extract parts using predefined types like url, phone and email and also supports Regex. Usa

Fayeed Pawaskar 213 Dec 27, 2022
Rich coin project of flutter

rich_coin flutter实现RichCoin项目。 Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

null 0 Nov 27, 2021
Text Editor in Flutter for Android and iOS to help free write WYSIWYG HTML code

Flutter Summernote Text Editor in Flutter for Android and iOS to help free write WYSIWYG HTML code based on Summernote 0.8.18 javascript wrapper. NOTI

Chandra Abdul Fattah 41 Sep 12, 2022
A masked text for Flutter.

flutter_masked_text Masked text input for flutter. Alert Hi guys! Unfortunately, I'm not developing mobile anymore. This repo will not receive updates

Ben-hur Santos Ott 264 Dec 21, 2022
Flutter widget that automatically resizes text to fit perfectly within its bounds.

Flutter widget that automatically resizes text to fit perfectly within its bounds. Show some ❤️ and star the repo to support the project Resources: Do

Simon Leier 1.8k Jan 3, 2023
A simple Flutter package that makes turning a FAB into a text field easy.

flutter_text_field_fab A simple Flutter widget that makes turning a FAB into a text field easy.

Haefele Software 4 Jan 18, 2022
Arc Text Widget for Flutter

Flutter Arc Text Renders text along the arc. See demo. The story behind the plugin is here. Basic usage class MyApp extends StatelessWidget

Kirill Bubochkin 15 Oct 18, 2021
A Tricky Solution for Implementing Inline-Image-In-Text Feature in Flutter.

A Tricky Solution for Implementing Inline-Image-In-Text Feature in Flutter.

Bytedance Inc. 646 Dec 29, 2022
A customizable code text field supporting syntax highlighting

CodeField A customizable code text field supporting syntax highlighting Live demo A live demo showcasing a few language / themes combinaisons Showcase

Bertrand 162 Dec 23, 2022
Statistics Dart package for easy and efficient data manipulation with many built-in functions and units.

statistics Statistics package for easy and efficient data manipulation with many built-in mathematical functions and units. Usage Numeric extension: i

Graciliano Monteiro Passos 13 Nov 7, 2022
A Flutter Package to render Mathematics, Physics and Chemistry Equations based on LaTeX

flutter_tex Contents About Demo Video Screenshots How to use? Android iOS Web Examples Quick Example TeXView Document TeXView Markdown TeXView Quiz Te

Shahzad Akram 219 Jan 5, 2023
Flutter textfield validation lets you validate different textform fields in your Flutter app

Flutter textfield validation lets you validate different textform fields in your Flutter app

World-Package 2 Sep 15, 2022
A markdown renderer for Flutter.

Flutter Markdown A markdown renderer for Flutter. It supports the original format, but no inline HTML. Overview The flutter_markdown package renders M

Flutter 828 Aug 12, 2021
flutter 中文排版,支持分页上下对齐 两端对齐 翻页动画

text_composition flutter 中文排版 分页 上下对齐 两端对齐 多栏布局 弃用richText,使用Canvas,精确定位绘图位置,消除字体对排版影响 视频与截图 demo https://github.com/mabDc/text_composition/releases/t

西红柿大芝麻 50 Nov 3, 2022
Flutter Tutorial - PDF Viewer - Asset, File, Network & Firebase

Flutter Tutorial - PDF Viewer - Asset, File, Network & Firebase Use the Flutter PDF Viewer to download PDF documents and display them within your Flut

Johannes Milke 36 Dec 9, 2022
Create an AutoComplete TextField to search JSON data based on suggestions in Flutter.

Flutter Tutorial - AutoComplete TextField & AutoComplete Search Create an AutoComplete TextField to search JSON data based on suggestions in Flutter.

Johannes Milke 32 Oct 23, 2022
Flutter phone number input

phone_form_field Flutter phone input integrated with flutter internationalization Features Totally cross platform, this is a dart only package / depen

cedvdb 38 Dec 31, 2022