v0.14.40

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

v0.14.33

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

v0.14.29

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

v0.14.27

Docs

• Added Canvas module API https://grapesjs.com/docs/api/canvas.html
• Added Component API https://grapesjs.com/docs/api/component.html

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

v0.14.25

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

v0.14.23

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

v0.14.21

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

v0.14.20

This release mainly brings 2 new features:

• Multiple Component Selection
  

  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

v0.14.17

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

0.14.15

This version brings up few updates over the Storage module

Changed

• Improve storage:error event

Added

• Added getDirtyCount method to the Editor API
• Add 2 more store events: storage:error:load, storage:error:store
• Add replaceWith method to Component