ed

npm start

élégant

Utilisation de PROSIMROR avec des données de l'API Grid

Demo: the-grid.github.io/ed/, avec luminaire

La démo montre traduit de Prochemirror à l'API de la grille JSON et retour.

but

Prosemirror fournit une interface basée sur un schéma de haut niveau pour interagir avec contenteditable , en prenant soin de cette douleur. Ed se concentre sur:

• Schéma à traduire entre les données de l'API de la grille et le type de doc promemirror
• Widgets de coordination (éditeurs de blocs spécialisés par type) (exemple)

utiliser

En utilisant comme composant React ⚛

ED expose un composant React par défaut.

 import Ed from '@the-grid/ed'

export default class PostEditor extends React . Component {
  render ( ) {
    return (
      < Ed key = 'item-uuid' initialContent = { ... } onChange = { ... } ... / >
    )
  }
} 

En utilisant comme bibliothèque autonome dans iframe ou similaire

Y compris dist/build.js dans votre page expose window.TheGridEd

 < script src =' dist/build.js ' > </ script >

Il existe des méthodes d'aide {mountApp, unmountApp} disponibles à utiliser comme ceci:

  var container = document . querySelector ( '#ed' )
  window . TheGridEd . mountApp ( container , {
    // REQUIRED -- Content array from post
    initialContent : [ ] ,
    // OPTIONAL (default true) enable or disable the default menu
    menuBar : true ,
    // REQUIRED -- Hit on every change
    onChange : function ( ) {
      /* App can show "unsaved changes" in UI */
    } ,
    // REQUIRED
    onShareFile : function ( index ) {
      /* App triggers native file picker */
      /* App calls ed.insertPlaceholders(index, count) and gets array of ids back */
      /* App uploads files and sets status on placeholder blocks with ed.updateProgress */
      /* On upload / measurement finishing, app replaces placeholder blocks with ed.setContent */
    } ,
    // REQUIRED
    onRequestCoverUpload : function ( id ) {
      /* Similar to onShareFile, but hit with block id instead of index */
      /* App uploads files and sets status on blocks with ed.updateProgress */
      /* Once upload is complete, app hits ed.setCoverSrc */
    } ,
    // REQUIRED
    onShareUrl : function ( { block , url } ) {
      /* Ed made the placeholder with block id */
      /* App shares url with given block id */
      /* App updates status on placeholder blocks with ed.updateProgress */
      /* On share / measurement finishing, app replaces placeholder blocks with ed.setContent */
    } ,
    // REQUIRED
    onPlaceholderCancel : function ( id ) {
      /* Ed removed the placeholder if you call ed.getContent() now */
      /* App should cancel the share or upload */
    } ,
    // OPTIONAL
    onRequestLink : function ( value ) {
      /*
        If defined, Ed will _not_ show prompt for link
        If selection is url-like, value will be the selected string
        App can then call `ed.execCommand('link:toggle', {href, title})`
          Note: If that is called while command 'link:toggle' is 'active', it will remove the link, not replace it
      */
    } ,
    // OPTIONAL
    onDropFiles : function ( index , files ) {
      /* App calls ed.insertPlaceholders(index, files.length) and gets array of ids back */
      /* App uploads files and sets status on placeholder blocks with ed.updateProgress */
      /* On upload / measurement finishing, app replaces placeholder blocks with ed.setContent */
    } ,
    // OPTIONAL
    onDropFileOnBlock : function ( id , file ) {
      /* App uploads files and sets status on block with ed.updateProgress */
      /* Once upload is complete, app hits ed.setCoverSrc */
    } ,
    // OPTIONAL
    onMount : function ( mounted ) {
      /* Called once PM and widgets are mounted */
      window . ed = mounted
    } ,
    // OPTIONAL
    onCommandsChanged : function ( commands ) {
      /* Object with commandName keys and one of inactive, active, disabled */
    } ,
    // OPTIONAL -- imgflo image proxy config
    imgfloConfig : {
      server : 'https://imgflo.herokuapp.com/' ,
      key : 'key' ,
      secret : 'secret'
    } ,
    // OPTIONAL -- where iframe widgets live relative to app (or absolute)
    widgetPath : './node_modules/' ,
    // OPTIONAL -- site-wide settings to allow cover filter, crop, overlay; default true
    coverPrefs : {
      filter : false ,
      crop : true ,
      overlay : true
    } ,
    // OPTIONAL -- site or user flags to reduce functionality
    featureFlags : {
      edCta : false ,
      edEmbed : false
    }
  } )
  
  // Returns array of inserted placeholder ids
  ed . insertPlaceholders ( index , count )
  
  // Update placeholder metadata
  // {status (string), progress (number 0-100), failed (boolean)}
  // metadata argument with {progress: null} will remove the progress bar
  ed . updateProgress ( id , metadata )
  
  // Once block cover upload completes
  // `cover` is object with {src, width, height}
  ed . setCover ( id , cover )

  // For placeholder or media block with uploading cover
  // `src` should be blob: or data: url of a
  // sized preview of the local image
  ed . setCoverPreview ( id , src )

  // Returns content array
  // Expensive, so best to debounce and not call this on every change
  // Above the fold block is index 0, and starred
  ed . getContent ( )
  
  // Only inserts/updates placeholder blocks and converts placeholder blocks to media
  ed . setContent ( contentArray )
  
  // Returns true if command applies successfully with current selection
  ed . execCommand ( commandName )

Démo: ./demo/demo.js

commandes

Avec onCommandsChanged Prop, App obtiendra un objet contenant ces clés de nom de commande. Les valeurs seront l'une de ces chaînes: inactive , active , disabled , flagged .

Les applications peuvent appliquer des commandes de formatage / montage avec ed.execCommand(commandName)

Cas spécial: ed.execCommand('link:toggle', {href, title}) (titre facultatif) pour définir le lien de la sélection actuelle.

Clés commandName prises en charge:

 strong:toggle
em:toggle
link:toggle
paragraph:make
heading:make1
heading:make2
heading:make3
bullet_list:wrap
ordered_list:wrap
horizontal_rule:insert
lift
undo
redo
ed_upload_image
ed_add_code
ed_add_location
ed_add_userhtml
ed_add_cta
ed_add_quote

dev

serveur

npm start and Open http: // localhost: 8080 /

En mode développement, WebPack construit et sert les cibles en mémoire de / webpack /

Les modifications déclencheront un rafraîchissement du navigateur.

plugins

Les plugins sont des classes ES2015 avec 2 méthodes requises:

• constructor (ed) {} obtient une référence à l' ed principal, où vous pouvez
  • Écoutez les événements PM: ed.pm.on('draw', ...)
  • et configurer l'interface utilisateur: ed.pluginContainer.appendChild(...)
• teardown () {} où tous les auditeurs et interface utilisateur doivent être supprimés

widgets

Les widgets sont des mini-éditeurs construits pour modifier des types de médias spécifiques

iframe

Exécuter dans iframe et communiquer via le post-message

Exemple: CED - widget pour l'édition de code

indigène

Exemple: WIP

coiffage

1. Primaire: Rebass par défaut et réprimande le thème pour les remplacements mondiaux
2. Secondaire: objets style JS incliné (exemple)
3. Dépréciation: require('./component-name.css') inclut, mais nécessaire pour certains hacks réactifs et remplacements de prosémières

style de code

Feross Standard vérifié par Eslint avec npm test ou npm run lint

• Pas de virgules inutiles
• Pas d'espaces de fuite
• citations uniques

Pour réparer automatiquement des trucs faciles comme un espace de fin: npm run lintfix

test

npm test

Le karma est configuré pour effectuer des tests dans le chrome local et Firefox.

Les tests s'exécuteront également sur des plates-formes mobiles via Browserstack, si ces variables d'environnement sont configurées:

 BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESSKEY

construire

npm run build

Sorts Minifié Dist / Ed.js et copies widgets définis dans package.json.

déploiement

npm version patch - Ajustements de style, corrections de bugs chauds

npm version minor - Ajout de fonctionnalités, modifications compatibles en arrière

npm version major - Suppression des fonctionnalités, modifications non compatibles

Ces raccourcis exécuteront des tests, tag, modifieront la version du package et pousseront les modifications et les balises en GH.

Travis publiera ensuite de nouvelles balises à NPM et construira la démo pour publier sur GH-Pages.