Giter VIP home page Giter VIP logo

lens's Introduction

No longer maintained. Use http://github.com/substance/texture instead.

Lens (editable edition)

This is an evolution of eLife Lens, developed by Substance. It comes with a Writer component for web-based authoring and a new Reader component for displaying of scientific content.

Read about the backgrounds of this project:

Important note: This project is at an experimental state. It is also not compatible with JATS/NLM at this stage, as it reads a simplified custom XML format. We will add support for JATS import + export at a later time.

Install dev version

Clone the repository.

$ git clone https://github.com/substance/lens.git

Navigate to the source directory.

$ cd lens

Install dependencies via npm

$ npm install

Start the dev server

$ npm run start

And navigate to http://localhost:5000

To create a new demo bundle do this:

$ npm run bundle

Usage

To embed Lens Reader:

var LensReader = require('lens/LensReader');
var LensArticle = require('lens/model/LensArticle');
var Component = require('substance/ui/component');
var $$ = Component.$$;

var doc = LensArticle.fromXml(LENS_XML);

Component.mount($$(LensReader, {
  doc: doc
}), document.body);

To embed Lens Writer:

var LensWriter = require('lens/LensWriter');
var LensArticle = require('lens/model/LensArticle');
var Component = require('substance/ui/component');
var $$ = Component.$$;

var doc = LensArticle.fromXml(LENS_XML);

Component.mount($$(LensWriter, {
  doc: doc,
  onUploadFile: function(file, cb) {
    console.log('custom file upload handler in action...');
    var fileUrl = window.URL.createObjectURL(file);
    cb(null, fileUrl);  
  },
  onSave: function(doc, changes, cb) {
    console.log('custom save handler in action...', doc.toXml());
    cb(null);
  }
}), document.body);

Make sure to also include the stylesheets into your app. We provide entry points at styles/lens-writer.sass and styles/lens-reader.sass. Lens requires a module bundler, such as Browserify or Webpack.

lens's People

Contributors

jure avatar obuchtala avatar oliver7654 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lens's Issues

Insert figure is broken

Uncaught TypeError: editor._insertNode is not a function. Because of our transformations refactorings.

Macros

I think the killer feature for managing citations would be macros. E.g. typing @ brings a small dropdown showing most recent bib items. By typing ahead you filter. e.g. you can easily type the name of an author and you'll find the entry very fast. Same would work with figures and tables of course:

@table 1 ENTER.

Write proper selection handling code

As here:
https://github.com/substance/science-writer/blob/2d906772519e939bbaf665e1617cd818fcc84715/src/state_handlers.js#L20

It is not a sufficient treatment of selections.
There are now 4 categories:
sel.isNull()
sel.isPropertySelection()
sel.isContainerSelection()
sel.isTableSelection()

As in the above case, the code suggests that you want to have property selections only.
A good way is to do either

if (sel.isPropertySelection()) {
...
} else {
 ...
}

or using a guard:

if (!sel.isPropertySelection()) {
  return;
}

Wrong labels for bib citations

image

This is a screenshot of the first paragraph. We should have [1], [2-4] here. I suppose this is a regression of the numerical-addressing iteration.

Find a better solution to update the contextId prop of the Scrollbar

Currently we solve it like this:

In lens_writer.js:

  this.handleStateUpdate = function(newState) {
    // var oldState = this.state;
    var doc = this.getDocument();

    function getActiveNodes(state) {
      if (state.citationId) {
        var targets = doc.get(state.citationId).targets;
        return [ state.citationId ].concat(targets);
      }
      return [];
    }

    var activeAnnos = getActiveNodes(newState);
    // HACK: updates the highlights when state
    // transition has finished
    setTimeout(function() {
      doc.setHighlights(activeAnnos);  
    }, 0);
  };

And in content_panel.js it's also a bit smelly:

  this.onHighlightsUpdated = function(highlights) {
    var controller = this.context.controller;

    // Triggers a rerender
    this.refs.scrollbar.extendProps({
      highlights: highlights,
      contextId: controller.state.contextId
    });
  };

We do this just to reach some proper coloring of the scrollbar according to the current context. Maybe we find better solution.

Edit citation dialog: improve item order for usability sake

Here it would be good to order by selected in the first place, label in second place and alphabetically when there's no label.

Currently you have to scroll around to find the selected items for a citation. Now if we apply the sorting all the time we would have the problem that the interface jumps. I think what we should do is only refreshing the order when the dialog is opened the next time.

Initial label is wrong

E.g. when i insert a new table before the existing table it gets labeled Table 2, when it should be one. Same happens with image-figures. The labels get corrected as soon as I start the cite workflow.

Bring back figure insertion

Creating a new figure should be possible again. Will realize this with a command, so you can trigger figure insertion with a keybinding as well.

Selection improvements

When double clicking on a paragraph i would expect that all text gets selected. Currently those citation islands which are not editable are blocking the selection to be expaned, and also causing some unexpected behavior when selecting with the keyboard combos (alt+shift+left/right etc.). We should think of how this could be improved, maybe we can leave the citations editable but correct the selection manually.

Bibliography Manager in side panel

I'd like to try how it feels to have the bib manager implemented as a resource panel, rather then using popup. Everybody ok with that?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.