     # Initialize quill.
     @quill = new Quill @$('.writing-area')[0]
 
+    @quill.on 'text-change', (delta, oldDelta, source) =>
+      # Update total pages count.
+      @updatePagesCount()
+
+  updatePagesCount: ->
+    # See how far the last item in the editor appears.
+    lastChild = @$('.ql-editor > *:last-child')
+
+    unless lastChild.length
+      # We have no elements yet.
+      @pagesCount 0
+      return
+
+    scale = @display.scale()
+    lastLeft = lastChild.position().left / scale
+
+    options = @journalDesign.writingAreaOptions()
+    pageWidth = options.width + options.gap
+
+    lastPageLocation = lastLeft / pageWidth
+    lastPageIndex = Math.floor lastPageLocation
+
+    @pagesCount lastPageIndex + 1
+
   previousPage: ->
     options = @journalDesign.writingAreaOptions()
     @currentPageIndex Math.max 0, @currentPageIndex() - options.pagesPerViewport

  onScrollEntryEditor: (event) ->
    # Calculate which page we should be on.
    scrollLeft = event.target.scrollLeft
    scale = LOI.adventure.interface.display.scale()

    options = @journalDesign.writingAreaOptions()
    viewportWidth = options.pagesPerViewport * (options.width + options.gap)

  onCreated: ->
    super

    @display = LOI.adventure.interface.display

    @currentPageIndex = new ReactiveField 0
    @pagesCount = new ReactiveField 0

  onRendered: ->
    super

