Feature request: Snippet/Function Palette in Visual Editor and Code Editor


A "Snippet palette" where devs can define a piece of markup, give it a title and a programmatic name, thus making this snippet easily available to end users of the Visual Editor. Those users will see a list of snippet titles, typically titled like "Flash movie", "YouTube movie", "Image gallery", "Table for prices", "Stacked boxes", "2 columns layout" (devs control this).

(UPDATED) A snippet can be inserted into the Code Editor at the caret position/selection via "Insert | Feature", this invoke the selection list. In the Visual Editor snippets are shown in the right pane, below the template / place holder selector for where you can single click a snippet title and have it inserted at the caret position/selection. (Visual Editors that don't sport an existing template pane will get a pane introduced by default. Form Markup and Widget functions will get a bool "ShowSnippetPalette" defaulting to true).

Snippet output can be xhtml blocks (like a prepared table, with class's, th's etc. already done) and function markup with some or all params pre-specified. In function situations, if any required params need to get a value, the function call editor dialog is popped.

Packages should also be able to easily introduce snippets when installed.

UPDATE: Rather than just being flat xml documents snippet sources could also be C1 Functions that return markup (XhtmlDocument etc.). When a user choose to insert a snippet - and the source C1 Function has parameters - we pop a "fill in the blanks" dialog where user can override values (like changing a heading text, selecting a specific image, choosing a variant). The function then execute and the resulting markup is inserted. This should enable end-users to realize the desired result in a more structured view (as opposed to pure visual editing) and should allow for more advanced snippets (example is a image parameter, where user select image and the result contains the final resize/crop image url). Idea via @napernik .

UPDATE 2: When registering a snippet you can specify one or more CSS selectors which will restrict or highlight the visibility of the snippet in the Visual Editor (either pushing it to the top of the list, show it as secondary, tertiary or not show it at all). This ability to push most relevant snippets up and hide very specialized and unrelated snippets will allow for more convenient "LEGO building" where an end user - once selecting some container snippet, will see relevant "sub snippets" as the primary elements in the Snippet Palette. If a snippet has no rules on it, it is tertiary. Primary should only be used by devs for very specific css selectors - so most of the time the secondary ones are the important ones. All non-hidden snippets are shown; the primary snippets - if any - are shown first in a slightly more highlighted way, then secondary and tertiary follow in that order, each group with some margin. Example: A "Stacked boxes" snippet which emit HTML: and expect HTML: children - here a specialized "Stack box" snippet would become primary when the selector CSS: div.stackedboxes is active, while hidden for the selectors CSS: *, div.stackedboxes *. The end user would not be bothered by "Stack box", unless a "Stacked boxes" is inserted/focused, in which case "Stack Box" jumps to the top and gets highlighted, helping the end user along.

UPDATE 3: A dev should be able to attach CSS rules to the Visual Editor, making it possible to have things like CSS: div.stackedboxes div.stackbox: border:2px dashed green; margin: 10px inherit; which only affect the Visual Editor. It would be convenient for the end user if there are visual markers on zones that is expected to be filled in. Example is a "Stacked boxes" snippet that emit HTML: - existing site CSS will (like today) ensure that the stacked boxes are rendered with sizing, spacing, coloring etc. in the Visual Editor, but a CSS rule that the snippet attached could ensure the 3 boxes are visually highlighted - for instance with a thick green dashed border. We should provide guidance on visual styling to use. Perhaps a toggle button in the visual editor could turn "snippet CSS" on/off for all snippets, enabling a quick WYSIWYG without the markers.

UPDATE 4: Ability to have declare a feature "as a whole" making it easy to move it around in the content and being able to define html elements be immutable, giving the user access to change content zones inside the element, but not the ability to "break" it. See http://ckeditor.com/demo#widgets . Idea via iamsean.

file attachments

Closed Feb 13 at 9:42 AM by mawtex
Added in version 6.0 - called "Components" see https://github.com/Orckestra/C1-CMS-Foundation/releases/tag/v6.0


oneproton wrote May 5, 2012 at 10:45 PM

This would be a great addition. It's the chief complaint from editors using composite who aren't technology savvy. They want it to be "easy" like Wordpress. Of course, they don't understand that Composite is an entirely different beast, but this small addition would enable developers to allow the editors to stay only in the WYSIWYG.

Another option worth considering is the ability to attach a preview image to the function (set by the developer). This would allow editors to see what the function looks like as a preview window. A title and preview image are set and when the editor inserts it, they see a pictorial representation of what it's going to look like. This is more of a "nice to have" feature though as they can always just hit the preview tab.

burningice wrote May 5, 2012 at 11:21 PM

re: preview image to the function, if you haven't already voted then make sure to do it here http://compositec1.codeplex.com/workitem/810

wrote May 5, 2012 at 11:21 PM

wrote May 6, 2012 at 2:59 PM

wrote May 7, 2012 at 6:00 AM

wrote Jun 13, 2012 at 4:18 PM

wrote Aug 22, 2012 at 5:10 PM

wrote Oct 20, 2012 at 5:37 PM

wrote Oct 22, 2012 at 3:40 AM

wrote Oct 24, 2012 at 3:48 PM

wrote Oct 31, 2012 at 8:47 PM

wrote Jan 8, 2013 at 10:38 PM

wrote Jan 30, 2013 at 4:07 PM

wrote Jan 30, 2013 at 4:08 PM

wrote Jan 30, 2013 at 4:10 PM

wrote Jan 30, 2013 at 4:15 PM

wrote Jan 30, 2013 at 4:23 PM

wrote Jan 30, 2013 at 5:21 PM

wrote Jan 30, 2013 at 5:21 PM

wrote Feb 12, 2013 at 12:47 PM

wrote Feb 12, 2013 at 12:47 PM

jaouw85 wrote Feb 12, 2013 at 12:48 PM

Main complain of our customers. Hope there will be a solution for this soon

wrote Feb 15, 2013 at 2:14 AM

wrote Feb 15, 2013 at 3:08 AM

wrote Feb 15, 2013 at 3:09 AM

wrote Feb 15, 2013 at 3:38 AM

wrote Feb 22, 2013 at 1:21 AM

wrote Mar 26, 2013 at 11:09 PM

wrote Apr 24, 2013 at 12:50 PM

RogroGengu wrote Apr 24, 2013 at 12:51 PM

Something like the screenshot attached?

mawtex wrote Apr 24, 2013 at 1:22 PM

Yes - something like that - something you implemented and have running?

RogroGengu wrote Apr 24, 2013 at 2:02 PM

Yes its currently only running on my laptop and part of a bigger project, but ive spoken about it internally and I am allowed to share it.

Somethings still need rework/cleaning up but the whole basics is working.

burningice wrote Apr 24, 2013 at 4:18 PM

whuuut!! this is sweet %-]

wrote Jul 30, 2013 at 3:19 PM

iaresean wrote Oct 11, 2013 at 2:23 PM

Hi everyone;

Has there been any progress on this?

RogroGengu - you mentioned that you had a semi-similar implementation running, and that you given the approval to share it. Is this available anywhere for us to try?


wrote Nov 19, 2013 at 12:13 PM

wrote Nov 29, 2013 at 2:16 PM

wrote Nov 29, 2013 at 2:17 PM

wrote Apr 21, 2014 at 7:23 PM

wrote Jun 17, 2014 at 4:00 PM

wrote Feb 13 at 9:42 AM