Giter Club home page Giter Club logo

dsm's Introduction

Document Sources Model

About

Model for Quill Embeds that have to be indexed and may reference to some same source. A Module base class is also provided to implement and model blots with diferent HTML content (e.g., headers, images, tables, figures, formulas)

Model

It makes an imaginary two dimensional matrix where:

  • one dimesion i represents the diferents Sources of a Document (DSM/DocumentSourcesModel.js)
  • other dimension j represents the diferents References in the document to the same Source. (DSM/SourceReferencesModel.js)
  • Each Reference (DSM/Referenece.js) is an interface to a SourceBlot (quill/blots/source.js) in Quills document. Each SourceBlot is a Quill's interface to a HTML node.
  • Each Model of Sources, model certain SourcesTypes (DSM/SourceTypes.js). For each source type, each source is identified by an arbitrary string key thant could be anything as a tipical integer ID, or some Tag (e.g., surname2020).

It keeps the i dimension ordered in accordance to the position of the first ocurrence of a Reference of such source. The first sources in appear, are ordered before the others.

Sources Quill Modules

It is implemented as a Quill module. Citations is a basic module that can be easily extended to make more complex types of sources (images, tables, links, headers, anything that could be of interest in to be indexed).

The implementation of Citation is very basic and actually it is meant to be used by the module configuration of quill.

For example:

import {SourceTypes} from 'dsm/DSM/SourceTypes';
import Quill from 'quill'

import SourceBlot from 'dsm/quill/blots/source';
import Citations from 'dsm/quill/modules/Citations'

// Blot para referencias
Quill.register(SourceBlot);
// Módulo de citaciones
Quill.register('modules/citation', Citations);



const quillOptions = {
    placeholder: 'Make something epic..',
    theme: 'bubble',
    modules: {
        citation: {
            type: SourceTypes.CITATION_DOCUMENT,
            class: 'citation',
            handlers: {
                create: function (node, data, controller) {
                    node.setAttribute('title', data.key)
                }
            }
        }
    },
}
                    
const quill = new Quill(quillContainer, quillOptions);

// Gets the module
const citations = quill.getModule('citation');

// Ads a citation to the source identified with the 'gus2020' key, 
// in the current location of the cursor
citations.put('gus2020'); 

dsm's People

Contributors

agustavo87 avatar

Watchers

 avatar

dsm's Issues

BUG: Adding same reference as first make it it render without an index "n" number

Wen using Citations in Quill, I add some reference with some key "x", then I add that same key before, it renders without a number, in HTML without a data-n value, so it displays no number.

<span class="ed-source" data-key="x" data-type="citation-document" contenteditable="false" data-id="1">
    <span contenteditable="false" class="citation" data-n="" title="x"></span>
</span>

image

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.