dante2-editor 0.2.0

data/app/styles/layout/scaffold.scss

@@ -0,0 +1,8 @@
+// Set box-sizing globally to handle padding and border widths
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+

data/app/styles/layout/tooltips.scss

@@ -0,0 +1,216 @@
+/**
+ * Tooltips!
+ */
+
+$tooltip-arrow-size: 6px;
+$tooltip-arrow-height: $tooltip-arrow-size * 2;
+
+/* Base styles for the element that has a tooltip */
+[data-tooltip],
+.tooltip {
+  position: relative;
+  cursor: pointer;
+}
+
+/* Base styles for the entire tooltip */
+[data-tooltip]:before,
+[data-tooltip]:after,
+.tooltip:before,
+.tooltip:after {
+  position: absolute;
+  visibility: hidden;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition:
+    opacity 0.2s ease-in-out,
+    visibility 0.2s ease-in-out,
+    -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  -moz-transition:
+    opacity 0.2s ease-in-out,
+    visibility 0.2s ease-in-out,
+    -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  transition:
+    opacity 0.2s ease-in-out,
+    visibility 0.2s ease-in-out,
+    transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform:    translate3d(0, 0, 0);
+  transform:         translate3d(0, 0, 0);
+  pointer-events: none;
+}
+
+/* Show the entire tooltip on hover and focus */
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after,
+[data-tooltip]:focus:before,
+[data-tooltip]:focus:after,
+.tooltip:hover:before,
+.tooltip:hover:after,
+.tooltip:focus:before,
+.tooltip:focus:after {
+  visibility: visible;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+
+/* Base styles for the tooltip's directional arrow */
+.tooltip:before,
+[data-tooltip]:before {
+  z-index: 1001;
+  border: $tooltip-arrow-size solid transparent;
+  background: transparent;
+  content: "";
+}
+
+/* Base styles for the tooltip's content area */
+.tooltip:after,
+[data-tooltip]:after {
+  white-space: nowrap;
+  z-index: 1000;
+  padding: 7px 8px;
+  background-color: #000;
+  background-color: hsla(0, 0%, 20%, 0.9);
+  color: #fff;
+  content: attr(data-tooltip);
+  font-size: 12px;
+  line-height: 1.2;
+  border-radius: 3px;
+}
+
+/* Directions */
+
+/* Top (default) */
+[data-tooltip]:before,
+[data-tooltip]:after,
+.tooltip:before,
+.tooltip:after,
+.tooltip-top:before,
+.tooltip-top:after {
+  bottom: 100%;
+  left: 50%;
+}
+
+[data-tooltip]:before,
+.tooltip:before,
+.tooltip-top:before {
+  margin-left: -$tooltip-arrow-size;
+  margin-bottom: -$tooltip-arrow-height;
+  border-top-color: #000;
+  border-top-color: hsla(0, 0%, 20%, 0.9);
+}
+
+/* Horizontally align top/bottom tooltips */
+[data-tooltip]:after,
+.tooltip:after,
+.tooltip-top:after {
+  margin-left: -80px;
+}
+
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after,
+[data-tooltip]:focus:before,
+[data-tooltip]:focus:after,
+.tooltip:hover:before,
+.tooltip:hover:after,
+.tooltip:focus:before,
+.tooltip:focus:after,
+.tooltip-top:hover:before,
+.tooltip-top:hover:after,
+.tooltip-top:focus:before,
+.tooltip-top:focus:after {
+  -webkit-transform: translateY(-$tooltip-arrow-height);
+  -moz-transform:    translateY(-$tooltip-arrow-height);
+  transform:         translateY(-$tooltip-arrow-height);
+}
+
+/* Left */
+.tooltip-left:before,
+.tooltip-left:after {
+  right: 100%;
+  bottom: 50%;
+  left: auto;
+}
+
+.tooltip-left:before {
+  margin-left: 0;
+  margin-right: -$tooltip-arrow-height;
+  margin-bottom: 0;
+  border-top-color: transparent;
+  border-left-color: #000;
+  border-left-color: hsla(0, 0%, 20%, 0.9);
+}
+
+.tooltip-left:hover:before,
+.tooltip-left:hover:after,
+.tooltip-left:focus:before,
+.tooltip-left:focus:after {
+  -webkit-transform: translateX(-$tooltip-arrow-height);
+  -moz-transform:    translateX(-$tooltip-arrow-height);
+  transform:         translateX(-$tooltip-arrow-height);
+}
+
+/* Bottom */
+.tooltip-bottom:before,
+.tooltip-bottom:after {
+  top: 100%;
+  bottom: auto;
+  left: 50%;
+}
+
+.tooltip-bottom:before {
+  margin-top: -12px;
+  margin-bottom: 0;
+  border-top-color: transparent;
+  border-bottom-color: #000;
+  border-bottom-color: hsla(0, 0%, 20%, 0.9);
+}
+
+.tooltip-bottom:hover:before,
+.tooltip-bottom:hover:after,
+.tooltip-bottom:focus:before,
+.tooltip-bottom:focus:after {
+  -webkit-transform: translateY($tooltip-arrow-height);
+  -moz-transform:    translateY($tooltip-arrow-height);
+  transform:         translateY($tooltip-arrow-height);
+}
+
+/* Right */
+.tooltip-right:before,
+.tooltip-right:after {
+  bottom: 50%;
+  left: 100%;
+}
+
+.tooltip-right:before {
+  margin-bottom: 0;
+  margin-left: -$tooltip-arrow-height;
+  border-top-color: transparent;
+  border-right-color: #000;
+  border-right-color: hsla(0, 0%, 20%, 0.9);
+}
+
+.tooltip-right:hover:before,
+.tooltip-right:hover:after,
+.tooltip-right:focus:before,
+.tooltip-right:focus:after {
+  -webkit-transform: translateX($tooltip-arrow-height);
+  -moz-transform:    translateX($tooltip-arrow-height);
+  transform:         translateX($tooltip-arrow-height);
+}
+
+/* Move directional arrows down a bit for left/right tooltips */
+.tooltip-left:before,
+.tooltip-right:before {
+  top: 50%;
+  margin-top: -$tooltip-arrow-size;
+  bottom: auto;
+}
+
+/* Vertically center tooltip content for left/right tooltips */
+.tooltip-left:after,
+.tooltip-right:after {
+  margin-left: 0;
+  margin-bottom: -16px;
+}

data/app/utils/find_entities.coffee

@@ -0,0 +1,20 @@
+{ Entity } = require('draft-js')
+
+findEntities = (entityType, instance, contentBlock, callback)->
+  #TODO pass editor prop to link!!!!!
+  contentBlock.findEntityRanges (character) =>
+    entityKey = character.getEntity()
+    return (
+      res = entityKey isnt null &&
+      Entity.get(entityKey).getType() is entityType
+      if res 
+        opts =
+          showPopLinkOver: instance.showPopLinkOver 
+          hidePopLinkOver: instance.hidePopLinkOver
+        Entity.mergeData(entityKey, opts)
+      res
+    );
+  ,
+  callback
+
+module.exports = findEntities

data/app/utils/html2content.coffee

@@ -0,0 +1,120 @@
+{ ContentState
+  genKey 
+  Entity 
+  CharacterMetadata
+  ContentBlock
+  convertFromHTML
+  getSafeBodyFromHTML
+}  = require('draft-js')
+
+{ List
+  OrderedSet
+  Repeat
+  fromJS 
+}  = require('immutable')
+
+
+# { compose 
+# }  = require('underscore')
+
+# underscore compose function
+compose = ->
+  args = arguments
+  start = args.length - 1
+  ->
+    i = start
+    result = args[start].apply(this, arguments)
+    while i--
+      result = args[i].call(this, result)
+    result
+
+# from https://gist.github.com/N1kto/6702e1c2d89a33a15a032c234fc4c34e
+
+###
+# Helpers
+###
+
+# Prepares img meta data object based on img attributes
+getBlockSpecForElement = (imgElement)=>
+  contentType: 'image',
+  imgSrc: imgElement.getAttribute('src')
+
+# Wraps meta data in HTML element which is 'understandable' by Draft, I used <blockquote />.
+wrapBlockSpec = (blockSpec)=>
+  if blockSpec == null
+    return null
+  
+  tempEl = document.createElement('blockquote')
+  # stringify meta data and insert it as text content of temp HTML element. We will later extract
+  # and parse it.
+  tempEl.innerText = JSON.stringify(blockSpec)
+  return tempEl
+
+# Replaces <img> element with our temp element
+replaceElement = (oldEl, newEl)=>
+  if !(newEl instanceof HTMLElement)
+    return
+
+  upEl = getUpEl(oldEl)
+  #parentNode = oldEl.parentNode
+  #return parentNode.replaceChild(newEl, oldEl)
+  return upEl.parentNode.insertBefore(newEl, upEl);
+
+getUpEl = (el)=>
+  original_el = el
+  while el.parentNode
+    if el.parentNode.tagName isnt 'BODY'
+      el = el.parentNode 
+    return el if el.parentNode.tagName is 'BODY'
+
+elementToBlockSpecElement = compose(wrapBlockSpec, getBlockSpecForElement)
+
+imgReplacer = (imgElement)=>
+  replaceElement(imgElement, elementToBlockSpecElement(imgElement))
+
+###
+# Main function
+###
+
+# takes HTML string and returns DraftJS ContentState
+customHTML2Content = (HTML, blockRn)->
+  tempDoc = new DOMParser().parseFromString(HTML, 'text/html')
+  # replace all <img /> with <blockquote /> elements
+
+  a = tempDoc.querySelectorAll('img').forEach( (item)->
+    return imgReplacer(item)
+  )
+
+  # use DraftJS converter to do initial conversion. I don't provide DOMBuilder and
+  # blockRenderMap arguments here since it should fall back to its default ones, which are fine
+  console.log tempDoc.body.innerHTML
+  contentBlocks = convertFromHTML(tempDoc.body.innerHTML, 
+        getSafeBodyFromHTML, 
+        blockRn
+  )
+
+  # now replace <blockquote /> ContentBlocks with 'atomic' ones
+  contentBlocks = contentBlocks.map (block)->
+    console.log "CHECK BLOCK", block.getType()
+    if (block.getType() isnt 'blockquote')
+      return block
+
+    json = ""
+    try
+      json = JSON.parse(block.getText())
+    catch
+      return block
+    
+    newBlock = block.merge({
+      type: "image",
+      text: ""
+      data: 
+        url: json.imgSrc
+        forceUpload: true
+    });
+
+  tempDoc = null
+  return ContentState.createFromBlockArray(contentBlocks)
+
+
+module.exports = customHTML2Content

data/app/utils/save_content.coffee

@@ -0,0 +1,63 @@
+axios = require("axios")
+Immutable = require('immutable')
+
+class SaveBehavior 
+  constructor: (options)->
+    @getLocks = options.getLocks
+    @config = options.config
+    @editorContent = options.editorContent
+    @editorState = options.editorState
+
+  handleStore: (ev)->
+    @store()
+
+  store: (content)->
+    return unless @config.data_storage.url
+    return if @getLocks() > 0
+
+    clearTimeout(@timeout)
+    
+    @timeout = setTimeout =>
+      @checkforStore(content)
+    , @config.data_storage.interval
+
+  getTextFromEditor: (content)->
+    content.blocks.map (o)=>
+        o.text
+      .join("\n")
+
+  getUrl: ->
+    url = @config.data_storage.url
+    if typeof(url) is "function" then url() else url
+
+  getMethod: ->
+    method = @config.data_storage.method
+    if typeof(method) is "function" then method() else method
+
+
+  checkforStore: (content)->
+    # ENTER DATA STORE
+    isChanged = !Immutable.is(Immutable.fromJS(@.editorContent), Immutable.fromJS(content))
+    # console.log("CONTENT CHANGED:", isChanged)
+    
+    return unless isChanged
+
+    @config.xhr.before_handler() if @config.xhr.before_handler
+    # console.log "SAVING TO: #{@getMethod()} #{@getUrl()}"
+    
+    axios
+      method: @getMethod()
+      url: @getUrl()
+      data: 
+        editor_content: JSON.stringify(content)
+        text_content: @getTextFromEditor(content)
+    .then (result)=> 
+      # console.log "STORING CONTENT", result
+      @config.data_storage.success_handler(result) if @config.data_storage.success_handler
+      @config.xhr.success_handler(result) if @config.xhr.success_handler
+    .catch (error)=>
+      # console.log("ERROR: got error saving content at #{@config.data_storage.url} - #{error}")
+      @config.xhr.failure_handler(error) if @config.xhr.failure_handler
+
+
+module.exports = SaveBehavior

data/app/utils/selection.js

@@ -0,0 +1,53 @@
+/*
+Returns the `boundingClientRect` of the passed selection.
+*/
+export const getSelectionRect = (selected) => {
+  const _rect = selected.getRangeAt(0).getBoundingClientRect();
+  // selected.getRangeAt(0).getBoundingClientRect()
+  let rect = _rect && _rect.top ? _rect : selected.getRangeAt(0).getClientRects()[0];
+  if (!rect) {
+    if (selected.anchorNode && selected.anchorNode.getBoundingClientRect) {
+      rect = selected.anchorNode.getBoundingClientRect();
+      rect.isEmptyline = true;
+    } else {
+      return null;
+    }
+  }
+  return rect;
+};
+
+/*
+Returns the native selection node.
+*/
+export const getSelection = (root) => {
+  let t = null;
+  if (root.getSelection) {
+    t = root.getSelection();
+  } else if (root.document.getSelection) {
+    t = root.document.getSelection();
+  } else if (root.document.selection) {
+    t = root.document.selection.createRange().text;
+  }
+  return t;
+};
+
+/*
+Recursively finds the DOM Element of the block where the cursor is currently present.
+If not found, returns null.
+*/
+export const getSelectedBlockNode = (root) => {
+  const selection = root.getSelection();
+  if (selection.rangeCount === 0) {
+    return null;
+  }
+  let node = selection.getRangeAt(0).startContainer;
+  // console.log(node);
+  do {
+    if (node.getAttribute && node.getAttribute('data-block') === 'true') {
+      return node;
+    }
+    node = node.parentNode;
+    // console.log(node);
+  } while (node !== null);
+  return null;
+};