Work in progress on non-scrollable read-only Zefyr view

packages/zefyr/example/lib/main.dart

@@ -4,6 +4,7 @@
 import 'package:flutter/material.dart';
 import 'src/form.dart';
 import 'src/full_page.dart';
+import 'src/view.dart';
 
 void main() {
   runApp(new ZefyrApp());
@@ -20,6 +21,7 @@ class ZefyrApp extends StatelessWidget {
       routes: {
         "/fullPage": buildFullPage,
         "/form": buildFormPage,
+        "/view": buildViewPage,
       },
     );
   }
@@ -31,6 +33,10 @@ class ZefyrApp extends StatelessWidget {
   Widget buildFormPage(BuildContext context) {
     return FormEmbeddedScreen();
   }
+
+  Widget buildViewPage(BuildContext context) {
+    return ViewScreen();
+  }
 }
 
 class HomePage extends StatelessWidget {
@@ -59,6 +65,12 @@ class HomePage extends StatelessWidget {
             color: Colors.lightBlue,
             textColor: Colors.white,
           ),
+          FlatButton(
+            onPressed: () => nav.pushNamed('/view'),
+            child: Text('Read-only embeddable view'),
+            color: Colors.lightBlue,
+            textColor: Colors.white,
+          ),
           Expanded(child: Container()),
         ],
       ),

packages/zefyr/example/lib/src/view.dart

@@ -0,0 +1,86 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:quill_delta/quill_delta.dart';
+import 'package:zefyr/zefyr.dart';
+
+import 'full_page.dart';
+
+class ViewScreen extends StatefulWidget {
+  @override
+  _ViewScreen createState() => new _ViewScreen();
+}
+
+final doc =
+    r'[{"insert":"Zefyr"},{"insert":"\n","attributes":{"heading":1}},{"insert":"Soft and gentle rich text editing for Flutter applications.","attributes":{"i":true}},{"insert":"\n"},{"insert":"​","attributes":{"embed":{"type":"image","source":"asset://images/breeze.jpg"}}},{"insert":"\n"},{"insert":"Photo by Hiroyuki Takeda.","attributes":{"i":true}},{"insert":"\nZefyr is currently in "},{"insert":"early preview","attributes":{"b":true}},{"insert":". If you have a feature request or found a bug, please file it at the "},{"insert":"issue tracker","attributes":{"a":"https://github.com/memspace/zefyr/issues"}},{"insert":'
+    r'".\nDocumentation"},{"insert":"\n","attributes":{"heading":3}},{"insert":"Quick Start","attributes":{"a":"https://github.com/memspace/zefyr/blob/master/doc/quick_start.md"}},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"Data Format and Document Model","attributes":{"a":"https://github.com/memspace/zefyr/blob/master/doc/data_and_document.md"}},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"Style Attributes","attributes":{"a":"https://github.com/memspace/zefyr/blob/master/doc/attr'
+    r'ibutes.md"}},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"Heuristic Rules","attributes":{"a":"https://github.com/memspace/zefyr/blob/master/doc/heuristics.md"}},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"FAQ","attributes":{"a":"https://github.com/memspace/zefyr/blob/master/doc/faq.md"}},{"insert":"\n","attributes":{"block":"ul"}},{"insert":"Clean and modern look"},{"insert":"\n","attributes":{"heading":2}},{"insert":"Zefyr’s rich text editor is built with simplicity and fle'
+    r'xibility in mind. It provides clean interface for distraction-free editing. Think Medium.com-like experience.\nMarkdown inspired semantics"},{"insert":"\n","attributes":{"heading":2}},{"insert":"Ever needed to have a heading line inside of a quote block, like this:\nI’m a Markdown heading"},{"insert":"\n","attributes":{"block":"quote","heading":3}},{"insert":"And I’m a regular paragraph"},{"insert":"\n","attributes":{"block":"quote"}},{"insert":"Code blocks"},{"insert":"\n","attributes":{"headin'
+    r'g":2}},{"insert":"Of course:\nimport ‘package:flutter/material.dart’;"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"import ‘package:zefyr/zefyr.dart’;"},{"insert":"\n\n","attributes":{"block":"code"}},{"insert":"void main() {"},{"insert":"\n","attributes":{"block":"code"}},{"insert":" runApp(MyZefyrApp());"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"}"},{"insert":"\n","attributes":{"block":"code"}},{"insert":"\n\n\n"}]';
+
+Delta getDelta() {
+  return Delta.fromJson(json.decode(doc));
+}
+
+class _ViewScreen extends State<ViewScreen> {
+  final doc = NotusDocument.fromDelta(getDelta());
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = new ZefyrThemeData(
+      toolbarTheme: ZefyrToolbarTheme.fallback(context).copyWith(
+        color: Colors.grey.shade800,
+        toggleColor: Colors.grey.shade900,
+        iconColor: Colors.white,
+        disabledIconColor: Colors.grey.shade500,
+      ),
+    );
+    return Scaffold(
+      resizeToAvoidBottomPadding: true,
+      appBar: AppBar(
+        elevation: 1.0,
+        backgroundColor: Colors.grey.shade200,
+        brightness: Brightness.light,
+        title: ZefyrLogo(),
+      ),
+      body: ZefyrTheme(
+        data: theme,
+        child: ListView(
+          children: <Widget>[
+            SizedBox(height: 16.0),
+            ListTile(
+              leading: Icon(Icons.info),
+              title: Text('ZefyrView inside ListView'),
+              subtitle: Text('Allows embedding Notus documents in custom scrollables'),
+              trailing: Icon(Icons.keyboard_arrow_down),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: ZefyrView(
+                document: doc,
+                imageDelegate: new CustomImageDelegate(),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Custom image delegate used by this example to load image from application
+/// assets.
+///
+/// Default image delegate only supports [FileImage]s.
+class CustomImageDelegate extends ZefyrDefaultImageDelegate {
+  @override
+  Widget buildImage(BuildContext context, String imageSource) {
+    // We use custom "asset" scheme to distinguish asset images from other files.
+    if (imageSource.startsWith('asset://')) {
+      final asset = new AssetImage(imageSource.replaceFirst('asset://', ''));
+      return new Image(image: asset);
+    } else {
+      return super.buildImage(context, imageSource);
+    }
+  }
+}

packages/zefyr/lib/src/widgets/common.dart

@@ -11,6 +11,7 @@ import 'horizontal_rule.dart';
 import 'image.dart';
 import 'rich_text.dart';
 import 'theme.dart';
+import 'view.dart';
 
 /// Raw widget representing a single line of rich text document in Zefyr editor.
 ///
@@ -43,36 +44,49 @@ class _RawZefyrLineState extends State<RawZefyrLine> {
 
   @override
   Widget build(BuildContext context) {
-    ensureVisible(context);
+    ZefyrViewState view = ZefyrView.of(context);
+    ZefyrEditableTextScope editable;
+    if (view == null) {
+      editable = ZefyrEditableText.of(context);
+    }
+
+    final isEditable = editable != null;
+
+    if (isEditable) {
+      ensureVisible(context);
+    }
     final theme = ZefyrTheme.of(context);
-    final editable = ZefyrEditableText.of(context);
 
     Widget content;
     if (widget.node.hasEmbed) {
-      content = buildEmbed(context);
+      content = buildEmbed(context, view, editable);
     } else {
       assert(widget.style != null);
 
-      final text = new EditableRichText(
+      final text = EditableRichText(
         node: widget.node,
         text: buildText(context),
       );
-      content = new EditableBox(
-        child: text,
-        node: widget.node,
-        layerLink: _link,
-        renderContext: editable.renderContext,
-        showCursor: editable.showCursor,
-        selection: editable.selection,
-        selectionColor: theme.selectionColor,
-      );
+      if (isEditable) {
+        content = EditableBox(
+          child: text,
+          node: widget.node,
+          layerLink: _link,
+          renderContext: editable.renderContext,
+          showCursor: editable.showCursor,
+          selection: editable.selection,
+          selectionColor: theme.selectionColor,
+        );
+        content = CompositedTransformTarget(link: _link, child: content);
+      } else {
+        content = text;
+      }
     }
 
-    final result = new CompositedTransformTarget(link: _link, child: content);
     if (widget.padding != null) {
-      return new Padding(padding: widget.padding, child: result);
+      return Padding(padding: widget.padding, child: content);
     }
-    return result;
+    return content;
   }
 
   void ensureVisible(BuildContext context) {
@@ -136,36 +150,40 @@ class _RawZefyrLineState extends State<RawZefyrLine> {
     return result;
   }
 
-  Widget buildEmbed(BuildContext context) {
+  Widget buildEmbed(BuildContext context, ZefyrViewState view,
+      ZefyrEditableTextScope editable) {
+    final isEditable = editable != null;
+
     final theme = ZefyrTheme.of(context);
-    final editable = ZefyrEditableText.of(context);
 
     EmbedNode node = widget.node.children.single;
     EmbedAttribute embed = node.style.get(NotusAttribute.embed);
 
+    Widget result;
     if (embed.type == EmbedType.horizontalRule) {
-      final hr = new ZefyrHorizontalRule(node: node);
-      return new EditableBox(
-        child: hr,
-        node: widget.node,
-        layerLink: _link,
-        renderContext: editable.renderContext,
-        showCursor: editable.showCursor,
-        selection: editable.selection,
-        selectionColor: theme.selectionColor,
-      );
+      result = ZefyrHorizontalRule(node: node);
     } else if (embed.type == EmbedType.image) {
-      return new EditableBox(
-        child: ZefyrImage(node: node, delegate: editable.imageDelegate),
-        node: widget.node,
-        layerLink: _link,
-        renderContext: editable.renderContext,
-        showCursor: editable.showCursor,
-        selection: editable.selection,
-        selectionColor: theme.selectionColor,
-      );
+      if (isEditable) {
+        result = ZefyrImage(node: node, delegate: editable.imageDelegate);
+      } else {
+        result = ZefyrImage(node: node, delegate: view.imageDelegate);
+      }
     } else {
       throw new UnimplementedError('Unimplemented embed type ${embed.type}');
     }
+
+    if (!isEditable) {
+      return result;
+    }
+
+    return new EditableBox(
+      child: result,
+      node: widget.node,
+      layerLink: _link,
+      renderContext: editable.renderContext,
+      showCursor: editable.showCursor,
+      selection: editable.selection,
+      selectionColor: theme.selectionColor,
+    );
   }
 }

packages/zefyr/lib/src/widgets/view.dart

@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+import 'package:notus/notus.dart';
+
+import 'code.dart';
+import 'common.dart';
+import 'image.dart';
+import 'list.dart';
+import 'paragraph.dart';
+import 'quote.dart';
+import 'theme.dart';
+
+class _ZefyrViewAccess extends InheritedWidget {
+  final ZefyrViewState state;
+
+  _ZefyrViewAccess({Key key, @required this.state, Widget child})
+      : super(key: key, child: child);
+
+  @override
+  bool updateShouldNotify(_ZefyrViewAccess oldWidget) {
+    return state != oldWidget.state;
+  }
+}
+
+/// Non-scrollable read-only view of a Notus rich text document.
+class ZefyrView extends StatefulWidget {
+  final NotusDocument document;
+  final ZefyrImageDelegate imageDelegate;
+
+  const ZefyrView({Key key, this.document, this.imageDelegate})
+      : super(key: key);
+
+  static ZefyrViewState of(BuildContext context) {
+    final _ZefyrViewAccess widget =
+        context.inheritFromWidgetOfExactType(_ZefyrViewAccess);
+    if (widget == null) return null;
+    return widget.state;
+  }
+
+  @override
+  ZefyrViewState createState() => ZefyrViewState();
+}
+
+class ZefyrViewState extends State<ZefyrView> {
+  ZefyrThemeData _themeData;
+
+  ZefyrImageDelegate get imageDelegate => widget.imageDelegate;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    final parentTheme = ZefyrTheme.of(context, nullOk: true);
+    final fallbackTheme = ZefyrThemeData.fallback(context);
+    _themeData = (parentTheme != null)
+        ? fallbackTheme.merge(parentTheme)
+        : fallbackTheme;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ZefyrTheme(
+      data: _themeData,
+      child: _ZefyrViewAccess(
+        state: this,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: _buildChildren(context),
+        ),
+      ),
+    );
+  }
+
+  List<Widget> _buildChildren(BuildContext context) {
+    final result = <Widget>[];
+    for (var node in widget.document.root.children) {
+      result.add(_defaultChildBuilder(context, node));
+    }
+    return result;
+  }
+
+  Widget _defaultChildBuilder(BuildContext context, Node node) {
+    if (node is LineNode) {
+      if (node.hasEmbed) {
+        return new RawZefyrLine(node: node);
+      } else if (node.style.contains(NotusAttribute.heading)) {
+        return new ZefyrHeading(node: node);
+      }
+      return new ZefyrParagraph(node: node);
+    }
+
+    final BlockNode block = node;
+    final blockStyle = block.style.get(NotusAttribute.block);
+    if (blockStyle == NotusAttribute.block.code) {
+      return new ZefyrCode(node: node);
+    } else if (blockStyle == NotusAttribute.block.bulletList) {
+      return new ZefyrList(node: node);
+    } else if (blockStyle == NotusAttribute.block.numberList) {
+      return new ZefyrList(node: node);
+    } else if (blockStyle == NotusAttribute.block.quote) {
+      return new ZefyrQuote(node: node);
+    }
+
+    throw new UnimplementedError('Block format $blockStyle.');
+  }
+}

packages/zefyr/lib/zefyr.dart

@@ -25,3 +25,4 @@ export 'src/widgets/scaffold.dart';
 export 'src/widgets/selection.dart' hide SelectionHandleDriver;
 export 'src/widgets/theme.dart';
 export 'src/widgets/toolbar.dart';
+export 'src/widgets/view.dart';