written 0.0.5 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0d2af27e114cad6a824e7f2c2201ae14845c0349
-  data.tar.gz: 69cae4da7a9f399e5446a2cd73363fdbee7c5569
+  metadata.gz: 7ba35767946cb9b007468b0ba15fcd1d154f627b
+  data.tar.gz: 7bc3ccaab8687dc4a17bc52322d088a75af27fe6
 SHA512:
-  metadata.gz: 91130fcec0ee2203c6b204266a3c744aed82ca80695d4fcf18b4084c63f937d6c4f172045b6474d1d31b46e6c336ac6db83ae19daafea5e02df54f4a91b66434
-  data.tar.gz: cfe89593f4956402fd8db8e36f4fbcf77cfcbb859f0e5cf5259d845cc0d79ffc8042de5694641b7fb3b3ea84cb250d8003c425776fabe8f153850b0dabc0134c
+  metadata.gz: f19e09c7f1fd9f2993231535a1bdf10119c4a412950cb0152992366385a4294220b674aed556708cfca13ae895744876451eb617aaf2ff3b9691647df624f468
+  data.tar.gz: 421434a2a0bfb187357ec99aa9c14be898921137218971015552291d283cd4e610896ecdc316e7d24cf07ec705afb09abe727cd9ec33cdcee5d7c3c7c1907393

data/.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 tmp/
+secrets.*
 *.log

data/LICENSE

@@ -0,0 +1,8 @@
+Copyright (c) 2016- Pier-Olivier Thibault
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,63 @@
+# Written
+
+Written is an easy to use, customizable WYSIWYG markdown editor. Built for evergreen browsers, it is a standalone editor with **zero dependency**. Based on the idea of [iA Writer](https://ia.net/writer/mac/), this editor uses HTML to render your text as it should look.
+
+As you type, your text is parsed and the document take shapes. Making you look at your draft like you would on the final product. Because Markdown you *type* the style of your text, you can start your text on a different editor and copy/paste it into Written. The style will always carry over.
+
+### Easy to style
+
+Paragraphs are paragraphs, lists are lists and headers are... you got it, headers. This allows you to easily include Written in your project and style it very quickly to its surrounding. Ease of customization is one of the thing that drove the creation of Written.
+
+The editor also allows you to cherry-pick the markdown feature you wish to support on your site. You can also create your own parser if you need something very specific that doesn't come out of the box.
+
+
+### How to use
+
+To start using Written, you just have to create a new editor.
+
+~~~javascript
+var editor = new Written(document.querySelector('#Editor'))
+editor.initialize()
+~~~
+
+You can retrieve the document either as a markdown text, or a HTML string. For storage purposes, you might want to store the HTML string from the current document
+
+~~~javascript
+var html = document.querySelector('#Editor').instance.history.current.toHTMLString()
+var markdown = document.querySelector('#Editor').instance.history.current.toString()
+~~~
+
+### Enable the parsers you need
+
+Written allows you to enable the parsers you wish. The parsers are split into two categories: Inline and Block parsers. If you don't specify any parser during the initialization, Written, will enable all the feature by default.
+
+The editor needs to be configured before it is initialized. Here's how you customize the parsers.
+
+~~~javascript
+var editor = new Written(document.querySelector('#Editor'))
+editor.parsers.use('block', ['Header', 'Code', 'UList', 'OList'])
+editor.parsers.use('inline', 'all')
+editor.initialize()
+~~~
+
+You can specify ~~~ 'all'~~~ if you wish to use all the available parsers for a given type.
+
+### Document
+
+Based on the document system described in [Trix](https://github.com/basecamp/trix), a document is created whenever the text is modified in the editor. Document's job is to store the cursor position as well as the HTML elements rendered by the parser.
+
+This means that Written can render text from a document and also position the cursor at the right place.
+
+Those documents are then stored in a history that Written then use to implement the undo/redo feature.
+
+### On Change Events
+
+Written dispatch an event whenever text changes on the Editor. To receive update when the editor change, just add an event listener to ~~~written:changed~~~ event.
+
+~~~javascript
+  document.addEventListener('written:changed', function(event) {
+    let document = event.detail.document
+    document.toHTMLString() // HTML version
+    document.toString() // Markdown version
+  })
+~~~

data/Rakefile

@@ -6,33 +6,6 @@ task default: %w[test]
 
 
 namespace :test do
-  desc 'Run Javascript tests'
-  task :javascript do
-    require 'rails'
-    require 'written'
-    require 'sprockets'
-    require 'tempfile'
-    environment = Sprockets::Environment.new
-    ThoughtJS::Railtie.instance.paths['app/assets'].existent.each do |path|
-      environment.append_path path
-    end
-
-    environment.append_path 'test/javascript'
-
-    test = Tempfile.new 'test.js'
-    test.write environment['test.js']
-    test.rewind
-
-    runner = Tempfile.new 'runner.js'
-    runner.write environment['runner.js']
-    runner.rewind
-
-    # Use system so it's possible to know if the tests were successful
-    # based on the return value
-    system("phantomjs #{runner.path} #{test.path}")
-    test.close
-    runner.close
-  end
 
   Rake::TestTask.new do |t|
     t.name = 'ruby'
@@ -81,3 +54,20 @@ task :server do
     server.start
   end
 end
+
+desc 'Compile assets for release'
+task :compile do
+  require 'bundler/setup'
+  ENV['RAILS_ENV'] ||= 'development'
+  Bundler.require(:default, ENV['RAILS_ENV'])
+  
+  environment = Sprockets::Environment.new
+
+  environment.append_path 'lib/written/app/assets/javascripts'
+  environment.append_path 'lib/written/app/assets/stylesheets'
+
+  manifest = Sprockets::Manifest.new(environment, 'build/manifest.json')
+  manifest.compile('written.*')
+
+
+end

data/lib/written.rb

@@ -1,12 +1,4 @@
 module Written
-  autoload :Document, 'written/document'
-  autoload :Version,  'written/version'
-
-  def self.parse(str)
-    document = Document.new(str)
-    document.parse!
-    document
-  end
 end
 
 if defined?(Rails)

data/lib/written/app/assets/javascripts/written.coffee

@@ -1,2 +1,4 @@
+#= require ./written/polyfills/base
 #= require_tree ./written/core
 #= require_tree ./written/parsers
+#= require_tree ./written/uploaders

data/lib/written/app/assets/javascripts/written/core/content.coffee

@@ -5,72 +5,89 @@ class @Written
     @element = ->
       return el
 
+    text = @toString()
+    @element().textContent = ''
+
     @observer = new Written.Observer(@element(), @changed)
-    @observer.pause @initialize
+    @initialize = @initialize.bind(this, text)
+
+    @element().addEventListener 'dragover', @over
+    @element().addEventListener('drop', @preventDefaults)
 
     @element().addEventListener('keypress', @linefeed)
     @element().addEventListener('keydown', @undo)
     @element().addEventListener('keydown', @redo)
+    @element().addEventListener('keydown', @cursor)
 
 
-  initialize: =>
-    if @parsers?
-      return
+  preventDefaults: (e) ->
+    e.preventDefault()
+
+  initialize: (text, parsers) ->
+    @observer.pause()
+    if !parsers?
+      parsers = Written.Parsers.default()
+
+    @parsers = parsers
 
-    Written.Parsers.freeze()
+    if @element().contentEditable != 'true'
+      @element().contentEditable = 'true'
 
-    document = new Written.Document(@toString())
+    @parsers.freeze()
+
+    document = new Written.Document(text, @parsers)
     cursor = new Written.Cursor(@element(), window.getSelection())
     document.cursor = cursor
 
-    @history = new Written.History(document)
     
-    node = @history.current.head
+    @update(document)
+    document.cursor.focus(document.toString().length)
 
-    @element().textContent = ''
+    @history = new Written.History(document)
+
+    @dispatch('written:initialized')
+    @observer.resume()
 
-    while node
-      @element().appendChild(node.cloneNode(true))
-      node = node.nextDocumentNode
 
-    document.cursor.focus(0, @element())
+  dispatch: (name, data = {}) =>
+    event = new CustomEvent(name, bubbles: true, detail: data)
+    @element().dispatchEvent(event)
 
+  changeTo: (text) =>
+    @update(new Written.Document(text, @parsers))
 
   changed: (e) =>
     oldDocument = @history.current
-    newDocument = new Written.Document(@toString())
+    newDocument = new Written.Document(@toString(), @parsers)
     newDocument.cursor = new Written.Cursor(@element(), window.getSelection())
     if @element().children.length > 0 && oldDocument.toString().localeCompare(newDocument.toString()) == 0
       return
 
     @update(newDocument)
     @history.push(newDocument)
+    @dispatch('written:changed', document: newDocument)
+
+  cursor: =>
+    @history.current.cursor = new Written.Cursor(@element(), window.getSelection())
 
   update: (document) =>
-    node = document.head
-    cursor = document.cursor
-    current = @element().firstElementChild
+    elements = Array.prototype.slice.call(@element().children)
 
-    while node 
-      if !current?
-        @element().appendChild(node.cloneNode(true))
-      else if node.outerHTML.localeCompare(current.outerHTML) != 0
-        clonedNodeDocument = node.cloneNode(true)
-        @element().replaceChild(clonedNodeDocument, current)
-        current = clonedNodeDocument
+    for block, index in document.blocks
+      node = block.markdown()
+      element = elements[index]
 
-      node = node.nextDocumentNode
-      if current?
-        current = current.nextElementSibling
+      if element?
+        if !block.identical(element, node)
+          @element().replaceChild(node, element)
+      else
+        @element().appendChild(node)
 
-    if current?
-      node = current
-      while node
-        nextNode = node.nextElementSibling
-        node.remove()
-        node = nextNode
+    if elements.length > index
+      for i in [index..elements.length - 1]
+        elements[i].remove()
 
-    cursor.focus()
+    document.cursor.focus()
 
 
   linefeed: (e) =>
@@ -95,7 +112,7 @@ class @Written
         lines.push('')
         cursor.offset += 1
 
-      document = new Written.Document(lines.join('\n'))
+      document = new Written.Document(lines.join('\n'), @parsers)
       document.cursor = cursor
       if cursor.offset < document.toString().length
         cursor.offset += 1
@@ -135,3 +152,4 @@ class @Written
     texts.join '\n'
 
 
+Written.Uploaders = {}

data/lib/written/app/assets/javascripts/written/core/cursor.coffee

@@ -12,11 +12,14 @@ class Written.Cursor
       parent = node.parentElement
 
       if parent
-        for child in (parent.childNodes || [])
-          if child == node
-            break
-          else
-            @offset += child.toString().length
+        child = node.previousSibling
+
+        while child
+          @offset += Written.Stringify(child).length
+          child = child.previousSibling
+
+        if node instanceof HTMLLIElement
+          this.offset += Array.prototype.indexOf.call(parent.children, node)
 
       node = parent
 
@@ -24,7 +27,7 @@ class Written.Cursor
     for child in @element().children
       if child == node
         break
-      @offset += child.toString().length
+      @offset += Written.Stringify(child).length
       @offset += 1
 
     @currentNode = ->
@@ -36,7 +39,7 @@ class Written.Cursor
 
     element = @element().firstElementChild
     while element && element != node
-      offset -= element.toString().length
+      offset -= Written.Stringify(element).length
       element = element.nextElementSibling
 
     offset
@@ -44,16 +47,34 @@ class Written.Cursor
   focus: (offset, node) =>
     if offset is undefined
       offset = @offset
+    else
+      @offset = offset
 
     if node is undefined
       node = @element().firstElementChild
 
-    while node.nextElementSibling && node.toString().length < offset
-      offset -= node.toString().length + 1
+    while node.nextElementSibling && Written.Stringify(node).length < offset
+      offset -= Written.Stringify(node).length + 1
       node = node.nextElementSibling
 
 
-    range = node.getRange(Math.min(offset, node.toString().length), document.createTreeWalker(node, NodeFilter.SHOW_TEXT))
-    @selection.removeAllRanges()
-    @selection.addRange(range)
+    range = node.getRange(Math.min(offset, Written.Stringify(node).length), document.createTreeWalker(node, NodeFilter.SHOW_TEXT))
+
+    if @offsetDiffersBetween(@selection, range)
+      @selection.removeAllRanges()
+      @selection.addRange(range)
+      if !@inViewport(node)
+        node.scrollIntoView()
+
+  offsetDiffersBetween: (selection, range) ->
+    selection.focusNode != range.startContainer ||
+    selection.focusOffset != range.startOffset
+
+  inViewport: (node) ->
+    bounding = node.getBoundingClientRect()
+
+    bounding.top >= 0 &&
+    bounding.left >= 0 &&
+    bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
 

data/lib/written/app/assets/javascripts/written/core/document.coffee

@@ -1,20 +1,25 @@
 #= require ../parsers/parsers
 
-Written.Document = class
-  constructor: (textContent) ->
-    @texts = new Array()
+class Written.Document
+  constructor: (textContent, parsers) ->
+    @markdown = textContent
 
-    @head = Written.Parsers.Block.parse(textContent.split('\n').reverse())
+    @blocks = parsers.block.parse(textContent.split('\n').reverse())
 
-    node = @head
+    @blocks.forEach (block) =>
+      block.processContent(parsers.inline.parse.bind(parsers.inline))
 
-    while node
-      Written.Parsers.Inline.parse(node)
-      text = node.toString()
-      @texts.push(text)
-      node = node.nextDocumentNode
+  freeze: =>
+    Object.freeze(@blocks)
+    Object.freeze(@cursor)
 
+  toHTMLString: =>
+    text = ''
 
+    @blocks.forEach (node) ->
+      text += node.html().outerHTML + "\n"
+
+    text
 
   toString: =>
-    @texts.join('\n')
+    @markdown

data/lib/written/app/assets/javascripts/written/core/extensions/string.coffee

@@ -0,0 +1,9 @@
+String::toHTML = ->
+  el = document.createElement('div')
+  el.innerHTML = this
+  if el.children.length > 1
+    el.children
+  else
+    el.children[0]
+
+

data/lib/written/app/assets/javascripts/written/core/extensions/text.coffee

@@ -0,0 +1,2 @@
+Text::toString = ->
+  @textContent

data/lib/written/app/assets/javascripts/written/core/history.coffee

@@ -1,5 +1,6 @@
 Written.History = class History
   constructor: (document) ->
+    document.freeze()
     @current = document
 
   push: (document) =>
@@ -8,6 +9,7 @@ Written.History = class History
     previousDocument.nextDocument = document
     document.previousDocument = previousDocument
 
+    document.freeze()
     @limit()
 
   previous: =>