ed

npm start

edición

Uso de prosemirror con datos de la API de la cuadrícula

Demo: The Grid.github.io/ed/, con accesorio

La demostración muestra la traducción del prosemirror al API de la cuadrícula JSON y VELVER.

objetivo

Prosemirror proporciona una interfaz basada en esquemas de alto nivel para interactuar con contenteditable , cuidando ese dolor. Ed se centra en:

• Esquema para traducir entre los datos de la API de la cuadrícula y el tipo de documento de prosemirror
• Widgets de coordinación (editores de bloques especializados por tipo) (ejemplo)

usar

Usando como componente React ⚛

ED expone un componente React por defecto.

 import Ed from '@the-grid/ed'

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

Usar como una biblioteca independiente en iframe o similar

Incluyendo dist/build.js en window.TheGridEd de exposición de su página.

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

Hay {mountApp, unmountApp} métodos auxiliares disponibles para usar así:

  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 )

Demostración: ./demo/demo.js

comandos

Con onCommandsChanged Prop, APP obtendrá un objeto que contenga estas teclas de nombre de comando. Los valores serán una de estas cadenas: inactive , active , disabled , flagged .

Las aplicaciones pueden aplicar comandos de formateo / edición con ed.execCommand(commandName)

Caso especial: ed.execCommand('link:toggle', {href, title}) (Title Opcional) para establecer el enlace de la selección actual.

Teclas commandName compatibles:

 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

enchufe

servidor

npm start y abre http: // localhost: 8080/

En el modo de desarrollo, Webpack construye y sirve los objetivos en la memoria de /webpack /

Los cambios activarán una actualización de un navegador.

complementos

Los complementos son clases ES2015 con 2 métodos requeridos:

• constructor (ed) {} Obtiene una referencia a la ed principal, donde pueda
  • Escuche los eventos de PM: ed.pm.on('draw', ...)
  • y configurar UI: ed.pluginContainer.appendChild(...)
• teardown () {} donde se deben eliminar todos los oyentes y la interfaz de usuario

widgets

Los widgets son mini editores construidos para editar tipos de medios específicos

influencia

Ejecutar en iframe y comunicarse a través de PostMessage

Ejemplo: CED - widget para edición de código

nativo

Ejemplo: WIP

estilo

1. Primario: Reborsos predeterminados y el tema de rebajes para las anulaciones globales
2. Secundario: Objetos style JS en inscripción (ejemplo)
3. Deprecing: require('./component-name.css') El estilo incluye, pero es necesario para algunos hacks receptivos y anulaciones de prosemirror

estilo de código

Estándar de Feross verificado por Eslint con npm test o npm run lint

• No hay semicolones innecesarios
• No hay espacios finales
• citas individuales

Para arreglar automáticamente cosas fáciles como el espacio en blanco: npm run lintfix

prueba

npm test

El karma está configurado para ejecutar pruebas en Chrome y Firefox locales.

Las pruebas también se ejecutarán en plataformas móviles a través de Browserstack, si tiene estas variables de entorno configuradas:

 BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESSKEY

construir

npm run build

Salidas Dist/ed.js y copias widgets definidos en paquete.json.

despliegue

npm version patch - Tweaks de estilo, correcciones de insectos en caliente

npm version minor : agregar características, cambios compatibles con retroceso

npm version major : eliminación de funciones, cambios no compatibles con retroceso

Estos atajos ejecutarán pruebas, etiqueta, cambiarán la versión del paquete y empujarán los cambios y etiquetas a GH.

Travis luego publicará nuevas etiquetas a NPM y creará la demostración para publicar a GH-PAGE.