@artf artf released this Nov 21, 2018 · 28 commits to dev since this release

Assets 2

Changed

  • Changed the method name in ComponentTextView: enableEditing -> onActive
  • Update Property (Style Manager), make the toRequire option, work also with IDs of the property

Added

  • Added target option in fullscreen command. Closes #1526 by @mcsekar12
  • Create PropertySelect in styleManager
  • Added component:create and component:mount events
  • Added removeAll method in Keymaps module

Fixed

  • Fix highlightable property in canvas
  • Load traits only if are not instance of Traits. Fixes #1563
  • Pass the correct model to component:styleUpdate event. Fixes #1575
  • Update correctly the text component on content change. Fixes #1511
  • Sort media queries in export code. Fixes #1506
  • Update how TextComponent handle children on change. Fixes #1593
  • Unbind all key shortcuts on destroy. Fixes #1501

Docs

  • Fix links in Blocks. Closes #1559

@artf artf released this Oct 30, 2018 · 67 commits to dev since this release

Assets 2

Changed

  • Allow strings in upload function of component image #1462
  • Append external styles inside head instead of body #1473
  • Improved Style Manager for a better extensibility
  • Avoid adding styles for temporary components (eg. created when you drag blocks around the canvas)

Added

  • Accepts strings as argument for the assets callback in Style Manager. Closes #1457
  • Added valueTrue and valueFalse options to trait checkbox type. Closes #1424
    This feature allows you to customize the boolean attribute on components
    Example:
traits: [{
  type: 'checkbox',
  label: 'Show Name',
  name: 'show-name',
  valueTrue: 'TRUE-value',
  valueFalse: 'FALSE-value',
  // For default values you have to specify same true/false values
  // You can add `value` in trait or on your components
  value: 'FALSE-value',
}]
  • Added ComponentStyleClear command and style-signature option in Component
  • Added setTarget method in StyleManager
  • Added button trait type
  • Added styleManager:update:target event to track target changes (Component or CSSRule) in Style Manager
  • Added getTrait(traitName) method in Component
  • Added new methods in Editor: once, getWrapper
  • Added log option to the main config object

Fixed

  • Avoid removing component on selector editing
  • Store the wrapper if avoidInlineStyle is false #TODO issue in project
  • Return body selector, instead of #wrapper, for the wrapper when requested
  • Run npm start cross-platform. Closes #1456
  • Improve hover in SelectComponent command. Fixes #1448
  • Avoid errors in case of textnode selection
  • Fix duplicated CSS rules with at-rules. Closes #1513
  • Update traits when a component is removed. Fixes #1535

@artf artf released this Sep 20, 2018 · 142 commits to dev since this release

Assets 2

Changed

  • Improved the Text component. Fixes #1394
  • Improved the Resizer, make it understand auto values. #1415 by @nojacko
  • Re-render buttons on change of any of its properties
  • Re-render blocks on change of any of its properties

Added

  • Added remove method in Component API
  • Added ComponentWrapper which might be used to help identify the wrapper via [data-gjs-type=wrapper]
  • Added component:update:components event, which allows listen to inner components changes. Closes #1409
  • Added the possibility to add custom CSS parsers, this will help to avoid inconsistency with built-in browser parsers.
  editor.setCustomParserCss(css => {
   const result = [];
   // ... parse the CSS string
   result.push({
     atRule: 'media',
     params: 'screen and (min-width: 480px)',
     selectors: '.someclass:hover, div .otherclass',
     style: { color: 'red' }
   })
   // ...
   return result;
  });

For an overview on how to built correctly rule objects check the guide here

  • Implemented a simple event-based log system, eg:
editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });
// This will trigger following events
// `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`
// Callbacks of those events will always receive the message and
// options, as arguments, eg:
// editor.on('log:info', (msg, opts) => console.info(msg, opts))
  • Enable the possibility to remove the selected link in RTE #1437 by @tabaliov

Fixed

  • Fixed default types in open-assets command. Closes #1411
  • Don't mess with onbeforeunload unless user wants to. #1417 by @dsgh
  • Fixed the class for disabled state of panel buttons. Closes #1421
  • Fixed the loading of component, accept also arrays and objects. Closes #1429
  • Fixed the initialization of checkbox traits. #1435
  • Fix name editing of layers, which was deleting components

@artf artf released this Sep 2, 2018 · 192 commits to dev since this release

Assets 2

Added

  • Added touch support.
    In order to make it work properly on all touch devices, you have to use grapesjs-touch plugin, which just includes some essential polyfills (eg. native drag & drop). Big thanks go to @saltyfoam for funding this feature and @Unsigno who actually made the work. There are still few issues regarding some devices (probably not even related to the feature itself), but we hope to fix them soon

@artf artf released this Aug 26, 2018 · 207 commits to dev since this release

Assets 2

Docs

Changed

  • Replace isInputFocused with isEditing in UndoManager
  • Clear traits values on init in Components
  • Now command's state (active or not) is tracked.
      const cm = editor.Commands;
      cm.run('preview');
      cm.isActive('preview');
      // -> true
      cm.stop('preview');
      cm.isActive('preview');
      // -> false

Added

  • Added the possibility to use plugins assigned in window. More on this
  • Added new methods to Commands API: getAll, isActive, getActive

Fixed

  • Fix the count of children in Layers
  • Pass always a numeric value to the slider property #1346
  • Don't display drop placeholder when no target #1361 (Thanks to @dsgh)
  • Adjust few commands for being traceable

@artf artf released this Jul 26, 2018 · 239 commits to dev since this release

Assets 2

Bug fixes and API improvements

Changed

  • Adjust toolbar positioning on component change

Added

  • Added onActive method in ComponentView which executes on active event
  • Added the possibility to open the modal with title and content via options
    eg. editor.Modal.open({ title: 'Title', content: 'Content' })
  • Added the possibility to append label on component toolbar buttons
  • Added run and stop methods in Commands module

Fixed

  • Ensure the trait gets the initial value. Fixes #1290
  • Avoid canvas focus check in ComponentDelete command. Fixes #1298
  • Fix the open-assets call in Style Manager input (file type). Closes #1241

@artf artf released this Jul 15, 2018 · 261 commits to dev since this release

Assets 2

Changed

  • Switched to Webpack v4, ⚠️ run npm i if you develop on GrapesJS
  • Don't output style declaration without value
  • Refactored Modal view

Added

  • Added core:component-delete to the keymap module
  • Added togglable option to Buttons, if it's false you can't turn off the button once enabled
  • Added documentation files in docs
  • Added youtube-nocookie.com as video provider #1270

Fixed

  • Show the id attribute for inline styled components. Fixes #1246
  • Call command events also when executed from buttons
  • Fixed IE11 blank page due to Array.from #1253

@artf artf released this Jun 24, 2018 · 315 commits to dev since this release

Assets 2

Changed

  • Listen for content changes inside ComponentView
  • Enabled block:drag:* events when HTML5 Drag&Drop is used

Added

  • Added setOptions, addOption and getOptions to select property in Style Manager #1215
  • Added the possibility to output custom attributes in toHTML method
  • Added the possibility to avoid clearing styles in CSS export
  • Added stopPropagation in ComponentTextView on dblclick event
  • Added activate and select options to Block models
  • Added onAll method to Component model. Executes a callback on any inner component
  • Added resetId method on Component and resetId propperty on Block model
    This allows to reset id of the component and its binded css rules.
    This comes handy when you use ids inside you blocks
    <div id="some-id"></div>
    <style>
      #some-id {
        ...
      }
    </style>
    Technically speaking, Blocks are reusable and IDs are not, so this will cause a problem.
    So with this new option, IDs will be changed automatically inside all dropped components
    blockManager.add('some-block', {
      resetId: true,
      content: `<div>...`
    })

Fixed

  • Trigger end move for all dropped models. Closes #1196
  • Don't trigger component:remove when a component is just deselected. Fixes #1219

@artf artf released this Jun 10, 2018 · 336 commits to dev since this release

Assets 2

This release mainly brings 2 new features:

  • Multiple Component Selection
    mult-sel

    This is the first version of this feature and allows the user, at first, organize faster the structure of the template.
    The feature is enabled by default but you can disable it by passing multipleSelection: false to GrapesJS init function. To start multiple selection just press CTRL ( for Mac users) and click on any additional component. When multiple components are selected you can't style them (at least, not yet) but you can move, copy and delete them. You can also select a range of multiple components of the same collection/list by pressing ⇧ Shift and clicking on start and end component.

  • Dynamic Layers Root
    With Dynamic Layers Root you can change the default wrapper/body root with any other component inside your template.
    On initialization:

    const editor = grapesjs.init({
      container: '#gjs',
      layerManager: {
        root: '#my-root',
        showWrapper: false,
      },
      // ...
    })

    or via API

    editor.LayerManager.setRoot('#other-root');
    // or via Component
    editor.LayerManager.setRoot(editor.getSelected());

Changed

  • Don't remove classes starting with {PREFIX}-

Added

  • Added destroy() method
  • Added setRoot, getRoot methods in Layers, for Dynamic Layers Root
  • Added root option to config.LayerManager
  • Added multipleSelection option
  • Added selectAdd, selectRemove, selectToggle methods in Editor, for Multiple Component Selection feature
  • Added new commands and their relative keymaps for easy navigation through the structure
    • core:component-prev (w)
    • core:component-next (s)
    • core:component-enter (d)
    • core:component-exit (a)

Fixed

  • Parse important declarations in style properties #1179

Removed

  • Replaced change:selectedComponent events with component:toggled

@artf artf released this May 31, 2018 · 377 commits to dev since this release

Assets 2

Changed

  • Improved toJSON method of CSSRule
  • Try to find a closest model when an element, without it, is selected

Added

  • Highlight components in canvas when hovered in Layers #423
  • Added scrollTo method to the Canvas module
  • Added scrollCanvas, scrollLayers and highlightHover options to Layers module
  • Add component's type to its view via data-gjs-type attribute
  • Added jest for tests

Fixed

  • Trigger change for empty value in traits #270
  • Fixed <label> with for attributes #316
  • Fixed issues with color traits #1104
  • Added remove listener on Panel items #1081
  • Update toolbars position when text components are updated #1136
  • Fix duplicated edit buttons on component cloning #1129