grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding

BSD-3-CLAUSE License

Downloads
163.7K
Stars
22.2K
Committers
205
View Code on GitHub Visit Website View on X
Ecosystems: TypeScript

Bot releases are hidden (Show)

grapesjs - v0.16.12

Published by artf over 4 years ago

Added

  • Added Brazilian Portuguese language https://github.com/artf/grapesjs/pull/2653
  • Added closestType and empty methods to Component API
  • Added disable property to the Block
  • Added module aliases to the Editor object
    DomComponents -> Components
    LayerManager -> Layers
    CssComposer -> Css
    StorageManager -> Storage
    AssetManager -> Assets
    BlockManager -> Blocks
    TraitManager -> Traits
    SelectorManager -> Selectors
    StyleManager -> Styles
    DeviceManager -> Devices

Changed

  • Customize Sorter placeholder color via CSS https://github.com/artf/grapesjs/pull/2662
  • Add a default limit (500) of maximum steps in UndoManager
    Can be changed by config.undoManager.maximumStackLength option on init

Fixed

grapesjs - v0.16.3

Published by artf over 4 years ago

Added

Fixed

  • Escape selectors in CSS code #2624
  • Fix custom panels not hidden in preview mode #2636
  • Avoid multiple change events on style property change
grapesjs - v0.16.2

Published by artf over 4 years ago

Added

Changed

Fixed

  • Check property visibility on render https://github.com/artf/grapesjs/pull/2497
  • Fix Selector Manager styles for Firefox/IE/Edge #2490
  • Update video attributes on render #2501
  • Avoid useless attributes on nodes inside text components #2508
  • Avoid 404 requests on background property change #2538
  • Update style on block drop in absolute mode
  • Check visibility borders on preview stop https://github.com/artf/grapesjs/pull/2589
  • Preserve the display value on layer hide #2571
  • Check for the href value in appendStyles to avoid 404 errors #2605
  • Fix ComponentImage's default src not being base64 encoded #2619
grapesjs - v0.15.10

Published by artf almost 5 years ago

Added

Changed

  • Escape HTML characters when converting text node to HTML. Thanks @mcammisa https://github.com/artf/grapesjs/pull/2446
  • Use custom-name property on layer name edit
  • Update layers view when component prop layerable changes #2433

Fixed

  • Export correctly <body> when config.exportWrapper option is used #2096
  • Fixed empty text after a drag of a component in editing mode #2452
  • Destroy RTE module when editor.destroy is called #2469
  • Calibrate the coordinates on toolbar click https://github.com/artf/grapesjs/pull/2375
  • Avoid dragging methods when no target is found #2478
grapesjs - v0.15.9

Published by artf almost 5 years ago

Docs

Changed

Added

  • I18n module

Fixed

  • Fixed text component issue on toolbar commands execution #2294
  • Fixed Firefox bug with label editing #2332
  • Fixed issues in absolute mode and components with scripts #2359
  • Fixed body counter in Layers #2413
  • Make integer property extendable #2360
  • Fixed issue on component drag in absolute mode https://github.com/artf/grapesjs/pull/2371
  • Preserve selection after canvas:drop #2396
  • Remove empty value from target trait #2411
grapesjs - v0.15.8

Published by artf about 5 years ago

Changed

  • Make config.avoidInlineStyle true by default
    We actually gonna stop to support the old inline-style method so this option will be removed soon
  • Guarantee the uniqueness of components id
    Now if you update the component with the id attribute that already exists, it will rollback to the previous one

Added

  • Added config.styleManager.textLayer option #2246

Fixed

  • Remove undefined titles in StyleManager #2248
  • Fix errors in IE11 #2247
  • Update component CSS rule selectors on id change #2249
grapesjs - v0.15.5

Published by artf about 5 years ago

⚠️ POSSIBLY BREAKING CHANGE

Docs

  • Update docs for richTextEditor config #2241

Changed

Added

Fixed

  • Fix image resize issue #2002
  • Fix text component issues in Safari/Firefox #2210
  • Fix style properties with undefined #2206
  • Fix drag issue with text components
grapesjs - v0.15.3

Published by artf about 5 years ago

⚠️ POSSIBLY BREAKING CHANGE

Docs

Changed

  • ⚠️ editor.addComponents now returns always an array of added components. So, if you ever used its result like this: 
    const component = editor.addComponents('<div>...');
    now it should be 
    const component = editor.addComponents('<div>...')[0];
  • ⚠️ Updated traits layout. If you've ever customized the CSS of your traits you might see something broken
  • Upgrade to Babel 7
  • Recreate view element on script prop update
  • Log a warning in case no sector, in StyleManager, is found #2068

Added

  • Added support for components generated from JSX (React preset).
    In this way, you can use editor.addComponents(<div>Hello JSX</div>) to add components. JSX helps the editor in performances as it skips the parsing of an HTML string but keeps the readability of your code.
    If you work in a different framework environment with JSX support (eg. writing JSX in Vue SFC generates another kind of objects) you can use a custom processor callback function as an option in the DomComponent module to transform those objects (quick example from the code).
  • Added the possibility to specify the position on sector add via API #2094
  • Added draggableComponents option (default true) in DomComponents. This allows moving
    components by dragging the component itself (not only by the move icon in the toolbar)
  • Allow dropping blocks absolutely when the absolute mode is active
  • Added script-export property to Component (check the API Reference of the property)
  • Added escapeName option and method in SelectorManager #1703
    With this option you can now set a custom name escape strategy on selectors (eg. classes) 
    grapesjs.init({
    ...
    selectorManager: {
      escapeName: name => name.replace(' ', '___'),
    },
});
  • Added props method in Trait and Component
  • Added new [API for extending Traits] (https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type)
  • Added new Drag Mode API for changing drag modes of components in canvas
    • config.dragMode - The initial configuration for the global drag mode
    • editor.setDragMode - change the global drag mode of components
    • component.setDragMode - change the drag mode of a single component

Fixed

  • Update defaults on top/right/bottom/left properties #2091
  • Fix autoscroll on dragging components in absolute mode
  • Update border-radius ordering in Style Manager #2105
  • Use stopCommand in Preview command #2174
  • Canvas Touch Support iOS #2175
  • Fixed issues around Drag Mode API
grapesjs - v0.14.62

Published by artf over 5 years ago

Changed

  • Avoid the default form behavior on submit
  • Prefer target value first in Select trait
  • Remove traits information from component JSON
  • Update icon styles in layers and component name editing
  • Trigger component:add also on inner added components

Added

  • Added media option to blocks (for icons)
  • Added removeType method in DomComponents module

Fixed

  • Update sortMediaObject to sort CSS correctly also in the mobile first approach #1996
  • Fix regression with textable components
  • Render attributes for temporary components. Fixes #2010
  • Fix drag and drop from outside of the canvas
  • Avoid fetchFile in temporary image components
  • Fix unit change in Style manager #2028
  • Avoid errors on class status toggle. Closes #2035
  • Fix position of the toolbar when is outside of the canvas
  • Propagate the extension of new commands to old. #2054
grapesjs - v0.14.61

Published by artf over 5 years ago

Docs

Changed

  • Avoid scrollIntoView if the element isn't found
  • Clean JS from script on component remove
  • Print a warning when trying to use not existing component type

Added

  • Added Comment component
  • Added textable property #481 example
  • Added stopCommand method to all commands
  • Added extend method to the Commands module
  • Added findType, removeTrait, addTrait, updateTrait and getTraitIndex methods to Component
    For more details about those methods check the Component API Reference
  • Added options argument to Editor.select method
    The only available option for now is scroll, which allows you to scroll the canvas
    to the selected component: editor.select(component, { scroll: true })
  • Added appendOnClick option (default false) to Blocks module #1951
    This would allow appending blocks also on click, not only by drag & drop
  • Enable the possibility to accept components as a function
    You can easily create components with dynamic default templates 
    domc.addType('some-type', {
  model: {
    defaults: {
  	label: 'Value for some custom prop',
  	// You can return an HTML string, Component object or 
  	// an array which mixes all of them
  	components: component => `<div class="something">
  		${this.get('label')}
  	</div>`,
    }
  }
});
  • Improved addType in Components module. Added extendFn and extendFnView options.
    When you need to reuse functions, of the parent you're extending, generally what you do is this: 
    domc.addType('new-type', {
  extend: 'parent-type',
  model: {
    init() {
      domc.getType('parent-type').model.prototype.init.apply(this, arguments);
      // do something;
    },
  }
});
    Now you can do it faster by doing: 
    domc.addType('new-type', {
  extend: 'parent-type',
  extendFn: ['init'], // array of model functions to extend
  model: {
    init() {
      // do something;
    },
  }
});
    The same would be for the view by using extendFnView

Fixed

  • Scroll the RTE toolbar if the text component is bigger than the view. Closes #1980
  • Fix autosave issue in remote storage. Closes #1985
  • Avoid moving styles from Components to Rules. Fixes #1978
  • Store the last return of the stateful command
  • Make Layers more reliable and generally more aware of textnodes #1949
  • Skip rendering for temporary components #1941
  • Avoid undefined value in select traits
  • Avoid the default link behavior in the canvas
  • Avoid showing in layers not layerable components

Removed

  • Removed old deprecated commands: CreateComponent, DeleteComponent, SelectParent
grapesjs - v0.14.57

Published by artf over 5 years ago

Changed

  • Force stop commands in Panels/ButtonView
  • Refactor preview command
  • Make modal:open/modal:close events more reliable
  • Remove related CSS rules of a removed component
  • Update the textnode component and make it more compliant to other components
  • Refactor DomComponents.clear method

Added

  • Added run and stop events for Commands
  • Add onceClose/onceOpen methods in Modal module
  • Add strict option in Command module configs #1881
  • Add fetchOptions for the RemoteStorage. Closes #1885

Fixed

  • Refactor buttons and adjust run command order
  • Update the global list once a component is removed #1875
  • Reset src in the Map Component. Closes #1903
  • Fix extendProperties in Sector. Closes #1913
grapesjs - v0.14.55

Published by artf over 5 years ago

⚠️ POSSIBLY BREAKING CHANGE

Changed

  • Allow default as a function in component addType
  • Add the possibility to preventDefault from add method, in Keymaps module
  • ⚠️ Commands run/stop can't be executed many times in the same state.
    So if the command is already active, calling it via editor.runCommand will
    not trigger that command again. But in case you need to run the command, in any
    way, you can force its execution with force:
    editor.runCommand('CMD', { force: 1 });
  • Avoid duplicate IDs on components
  • Refactor TraitSelectVIew and listen options changes
  • Ensure default units for devices
  • Move ratioDefault option from the Resize command to image component
  • Accept classes as a string in Component
  • Refactor @utils/Resizer and update its container on text component change
  • Improve the recognition of stateless commands
  • Merge element content in text components before toHTML. Closes #1767

Added

  • Added model and property value to the trigger of change:attributes:ATTR event
  • Added the possibility to disable StorageManger with storageManager: false (any falsy value is ok)
  • Custom tag for buttons in Panels module. Closes #1787
  • Added the possibility to zoom the canvas via editor.Canvas.setZoom(VALUE_FROM_0_TO_100)
  • Added custom render for blocks. Now you can pass a render callback function when you create blocks (Blocks docs updated)
  • Added fallback property to Image component and its default placeholder images
  • Added component:type:add and component:type:update events to track changes on component types
  • Added update event to generally listen any change to the template (HTML/CSS)

Fixed

  • Fixed not working toolbar buttons with Text components. #1567 by @arthuralmeidap
  • Ensure default CSS block container. Fixes #1829
  • Avoid property breaking in StyleManager without property. Fixes #1830
  • Reset upload input file in AssetManager. Closes #1816
  • Fix empty provider select in the video component traits
  • Check protected attribute before removing a tag #1857 by @WebEtSolutions
  • Fix scrollIntoView issue in Layers. Closes #1865

Removed

  • Removed old commands: image-comp, text-comp, insert-custom
grapesjs - v0.14.52 ⚠️

Published by artf over 5 years ago

⚠️ - POSSIBLY BREAKING CHANGE

Docs

  • Update broken link in Components. Closes #1689

Changed

  • ⚠️ Set contentTypeJson default to true (RemoteStorage)
  • Added <a> to default notTextable option in the Canvas configuration. Closes #1699
  • Updated add and get methods in Selector module, now they can receive an array of selectors to add/get
  • Allow to render blocks container outside by using external option. #1716
  • Agjust justify-content in traits style. Closes #1726
  • Adjust component toolbar positioning. #1728 by @arthuralmeidap
  • Pass the Editor instance on load event
  • Update classes in SectorView to allow an easier customization. Closes #1753

Added

  • Added autoscrollLimit option in the Canvas module
  • Added credentials option in the Storage module (for the RemoteStorage) by @arthuralmeidap
  • Added modal:open and modal:close events in the Modal module. Closes #1717
  • Added setRule and getRule in CssComposer module
  • Added ignoreCategories option to the render method in BlockManager module
  • Added customFetch option in AssetManager module

Fixed

  • Avoid updating frame offset on Layer click. Fixes #1711
  • Fixed UndoManager in components with scripts. Closes #1512 by @thinkanymore
grapesjs - v0.14.50

Published by artf almost 6 years ago

Docs

Changed

  • Improved the extension of components via DomComponents.addType
    Read more about this here
  • In isComponent is not necessary anymore to return the object with its type to accept it, any truthy value is enough.
// Before
isComponent: el => {
	if (el.tagName === 'SOME-TAG') {
		return { type: 'my-component' };
	}
}
// After
isComponent: el => el.tagName === 'SOME-TAG'
  • Add default attributes in the creation of new components
  • Emit component:clone event on the component which was cloned
  • Clear old attributes in updateAttributes
  • Don't trigger component hooks for temporary components
  • Improved the parserHtml

Added

  • Added getTypes method in DomComponents
grapesjs - v0.14.49

Published by artf almost 6 years ago

Import correctly ItemView. Fixes #1672

grapesjs - v0.14.48

Published by artf almost 6 years ago

Changed

  • Rename the event component:clone in PasteComponent to component:paste and add component:clone
    to the clone method in Component

Added

  • Added index method to the Component API
  • Make work the visible property in Panels. Closes #1602 by @arthuralmeidap
  • Add new hook methods to Component, updated and removed

Fixed

  • Avoid the delete of inputs on canc key. Fixes #1606
  • Take care of parenthesis when split CSS style values. Fixes #1579
  • Adjust the sorter placeholder when the parent has flex direction as column. Fixes #1626
  • Clear properly composite style properties. Fixes #1613
  • Check if fullscreen is active before running exitFullscreen. Fixes #1667
grapesjs - v0.14.43

Published by artf almost 6 years ago

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
grapesjs - v0.14.40

Published by artf almost 6 years ago

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
grapesjs - v0.14.33

Published by artf about 6 years ago

Changed

  • Improved the Text component. Fixes #1394
  • Improved the Resizer, make it understand auto values. https://github.com/artf/grapesjs/pull/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))

Fixed

  • Fixed default types in open-assets command. Closes #1411
  • Don't mess with onbeforeunload unless user wants to. https://github.com/artf/grapesjs/pull/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
grapesjs - v0.14.29

Published by artf about 6 years ago

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
Package Rankings
Top 0.7% on Npmjs.org
Top 17.26% on Repo1.maven.org
Badges
Extracted from project README
Build Status Chat CDNJS npm PayPalMe Bitcoin BrowserStack
Related Projects
tui.grid

🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!

27 May 2015 2,418
web-garden

Building blocks for making progressive and future-proof websites. Components collection features ...

18 Jun 2022 156