ed

npm start

إد

باستخدام Prosemirror مع بيانات من واجهة برمجة تطبيقات الشبكة

العرض التوضيحي: the-grid.github.io/ed/ ، مع لاعبا اساسيا

يظهر العرض التوضيحي يترجم من Prosemirror إلى الشبكة API Json والعودة.

غاية

يوفر Prosemirror واجهة عالية المستوى قائمة على المخطط للتفاعل مع contenteditable ، مع رعاية هذا الألم. يركز إد على:

• مخطط للترجمة بين بيانات واجهة برمجة تطبيقات الشبكة ونوع DOC
• تنسيق واجهة المستخدم (محررين بلوك متخصصون حسب النوع) (مثال)

يستخدم

باستخدام مكون رد فعل

يعرض إد مكون رد فعل افتراضيًا.

 import Ed from '@the-grid/ed'

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

باستخدام مكتبة قائمة بذاتها في iframe أو ما شابه ذلك

بما في ذلك dist/build.js في صفحتك يعرض window.TheGridEd

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

هناك أساليب مساعد {mountApp, unmountApp} متاحة لاستخدامها مثل هذا:

  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 )

Demo: ./demo/demo.js

الأوامر

مع onCommandsChanged Prop ، سيحصل التطبيق على كائن يحتوي على مفاتيح اسم الأوامر هذه. ستكون القيم واحدة من هذه الأوتار: inactive ، active ، disabled ، flagged .

يمكن للتطبيقات تطبيق أوامر التنسيق / التحرير مع ed.execCommand(commandName)

الحالة الخاصة: ed.execCommand('link:toggle', {href, title}) (العنوان اختياري) لتعيين رابط التحديد الحالي.

مفاتيح commandName المدعومة:

 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

ديف

الخادم

npm start وفتح http: // localhost: 8080/

في وضع التطوير ، تقوم WebPack بإنشاء وتخدم الأهداف في الذاكرة من /webpack /

ستؤدي التغييرات إلى تحديث المتصفح.

الإضافات

المكونات الإضافية هي فئات ES2015 مع 2 طريقتان مطلوبة:

• يحصل constructor (ed) {} على مرجع إلى ed الرئيسي ، حيث يمكنك
  • استمع إلى أحداث PM: ed.pm.on('draw', ...)
  • و ui: ed.pluginContainer.appendChild(...)
• teardown () {} حيث يجب إزالة جميع المستمعين ووزارة واجهة المستخدم

الحاجيات

الحاجيات مصغرة مصممة لتحرير أنواع وسائط محددة

iframe

ركض في iframe والتواصل عبر postmessage

مثال: CED - عنصر واجهة تحرير الكود

محلي

مثال: WIP

التصميم

1. الابتدائية: Rebass Defults و Rebass-theme للتجاوزات العالمية
2. ثانوية: كائنات style JS مضمّنة (مثال)
3. الإهمال: require('./component-name.css') ، ولكنه مطلوب لبعض الاختراقات المستجيبة وتجاوزات الإضافات

نمط الكود

تم فحص قياسي Feross بواسطة ESLINT مع npm test أو npm run lint

• لا Semicolons غير ضرورية
• لا توجد مساحات زائدة
• اقتباسات واحدة

لإصلاح أشياء سهلة تلقائيًا مثل المسافة البيضاء المتخيل: npm run lintfix

امتحان

npm test

تم إعداد Karma لتشغيل الاختبارات في Chrome و Firefox المحلي.

سيتم أيضًا إجراء الاختبارات في منصات متنقلة عبر BrowserStack ، إذا كان لديك متغيرات البيئة هذه:

 BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESSKEY

يبني

npm run build

مخرجات MINISED DIST/ED.JS و COPIES WILDGETS المحددة في package.json.

النشر

npm version patch - تعديلات النمط ، إصلاحات الأخطاء الساخنة

npm version minor - إضافة ميزات ، تغييرات متوافقة مع الوراء

npm version major -إزالة الميزات ، التغييرات غير المتوافقة مع الخلفية

ستقوم هذه الاختصارات بتشغيل الاختبارات والعلامة وتغيير إصدار الحزمة ودفع التغييرات والعلامات إلى GH.

ستنشر Travis بعد ذلك علامات جديدة إلى NPM وبناء العرض التوضيحي لنشر صفحات GH.