Edit frame component implementation (#1342)

* Added EditFrame for react, vue, angular, nextjs

* Added Styleguide Edit Frame examples for react, vue, angular, nextjs

---------

Co-authored-by: Mike Jarosch <[email protected]>
Co-authored-by: Mike <[email protected]>

packages/create-sitecore-jss/src/templates/angular/data/routes/styleguide/en.yml

@@ -251,3 +251,12 @@ placeholders:
                 - componentName: StyleguideAngularLazyLoading
                   fields:
                     heading: Lazy Loading
+          - componentName: StyleguideSection
+            fields:
+              heading: Editing
+            placeholders:
+              <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
+                - componentName: StyleguideEditFrame
+                  fields:
+                    heading: Edit Frame
+

packages/create-sitecore-jss/src/templates/angular/sitecore/definitions/components/styleguide-edit-frame.sitecore.ts

@@ -0,0 +1,15 @@
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the Styleguide-EditFrame component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.ts) when `jss manifest` is run.
+ */
+export default function StyleguideEditFrame(manifest: Manifest) {
+  manifest.addComponent({
+    name: 'StyleguideEditFrame',
+    icon: SitecoreIcon.DocumentTag,
+    fields: [
+      { name: 'heading', type: CommonFieldTypes.SingleLineText },
+    ],
+  });
+}

packages/create-sitecore-jss/src/templates/angular/src/app/components/styleguide-edit-frame/styleguide-edit-frame.component.html

@@ -0,0 +1,14 @@
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-edit-frame">
+  <sc-edit-frame [dataSource]="editFrameProps.dataSource"
+    [buttons]="editFrameProps.buttons"
+    [title]="editFrameProps.title"
+    [tooltip]="editFrameProps.tooltip"
+    [cssClass]="editFrameProps.cssClass"
+    [parameters]="editFrameProps.parameters"
+    [sitecore]="context">
+    Who framed Roger Rabbit? Hard to say. <br />
+    But JSS now allows to edit frame any piece of content on a page in editing mode. <br />
+    You can add web edit or field edit buttons, modify edit frame style through CSS class and put the frame wherever you need it.
+    <ng-content></ng-content>
+  </sc-edit-frame>
+</app-styleguide-specimen>

packages/create-sitecore-jss/src/templates/angular/src/app/components/styleguide-edit-frame/styleguide-edit-frame.component.ts

@@ -0,0 +1,80 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {
+  ComponentRendering,
+  EditFrameDataSource,
+  FieldEditButton,
+  LayoutServiceContextData,
+  RouteData,
+  WebEditButton
+} from '@sitecore-jss/sitecore-jss-angular';
+import { JssContextService } from '../../jss-context.service';
+
+interface EditFrameProps {
+  dataSource: EditFrameDataSource;
+  buttons: (FieldEditButton | WebEditButton | '|')[];
+  title: string;
+  tooltip: string;
+  cssClass: string;
+  parameters: object;
+}
+
+/**
+ * A sample component to describe Edit Frame usage with JSS.
+ * Edit Frame would simply output child content in normal mode.
+ * In editing mode it will output markup for Edit Frame that will wrap the child content.
+ * Edit buttons, custom CSS and datasource can be applied.
+ */
+@Component({
+  selector: 'app-styleguide-edit-frame',
+  templateUrl: './styleguide-edit-frame.component.html',
+})
+export class StyleguideEditFrameComponent implements OnInit {
+  @Input() rendering: ComponentRendering;
+  context:  LayoutServiceContextData & {
+    route: RouteData<unknown> | null;
+  };
+
+  editFrameProps: EditFrameProps;
+
+  editFrameButtons = [
+    {
+      header: 'WebEditButton',
+      icon: '/~/icon/Office/16x16/document_selection.png',
+      click: 'javascript:alert("An edit frame button was just clicked!")',
+      tooltip: 'Doesnt do much, just a web edit button example',
+    }, // use javascript:, webedit: or chrome: commands for webedit buttons
+    {
+      header: 'FieldEditButton',
+      icon: '/~/icon/Office/16x16/pencil.png',
+      fields: ['heading'],
+      tooltip: 'Allows you to open field editor for specified fields',
+    }, // or use field edit buttons to open Field Editor
+  ];
+
+  constructor(private jssContext: JssContextService) { }
+
+  ngOnInit() {
+    this.jssContext.state.subscribe((state) => {
+      this.context = state.sitecore;
+    });
+    this.editFrameProps = this.getEditFrameProps(this.rendering.dataSource);
+  }
+
+  getEditFrameProps(dataSource?: string) {
+    return {
+      dataSource: dataSource
+        ? {
+            itemId: dataSource,
+            // databaseName: 'web',
+            // language: 'en', // optional params you can also set for datasource
+          }
+        : undefined, // datasource will set the item to be edited by edit frame
+      buttons: this.editFrameButtons, // add custom editing functionality or edit field sets with buttons
+      title: 'JSS edit frame',
+      tooltip: 'Perform editing anywhere while not tied to a rendering, placeholder or field',
+      cssClass: 'jss-edit-frame', // customize edit frame appearance through CSS
+      parameters: {}, // set additional parameters when needed
+      sitecore: this.context,
+    };
+  };
+}

packages/create-sitecore-jss/src/templates/nextjs-styleguide/data/routes/styleguide/en.yml

@@ -240,3 +240,11 @@ placeholders:
                   fields:
                     heading: Translation Patterns
                     sample: This text can be translated in en.yml
+          - componentName: Styleguide-Section
+            fields:
+              heading: Editing
+            placeholders:
+              <%- helper.getAppPrefix(appPrefix, appName) %>jss-styleguide-section:
+                - componentName: Styleguide-EditFrame
+                  fields:
+                    heading: Edit Frame

packages/create-sitecore-jss/src/templates/nextjs-styleguide/sitecore/definitions/components/styleguide/Styleguide-EditFrame.sitecore.ts

@@ -0,0 +1,16 @@
+// eslint-disable-next-line no-unused-vars
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the Styleguide-EditFrame component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.ts) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function StyleguideEditFrame(manifest: Manifest): void {
+  manifest.addComponent({
+    name: 'Styleguide-EditFrame',
+    icon: SitecoreIcon.DocumentTag,
+    fields: [{ name: 'heading', type: CommonFieldTypes.SingleLineText }],
+    templateName: '<%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame',
+  });
+}

packages/create-sitecore-jss/src/templates/nextjs-styleguide/src/components/styleguide/Styleguide-EditFrame.tsx

@@ -0,0 +1,62 @@
+import { Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentProps } from 'lib/component-props';
+import { EditFrame } from '@sitecore-jss/sitecore-jss-nextjs';
+import StyleguideSpecimen from './Styleguide-Specimen';
+
+type StyleguideEditFrameProps = ComponentProps & {
+  fields: {
+    heading: Field<string>;
+  };
+  children: React.ReactNode;
+};
+
+/**
+ * A sample component to describe Edit Frame usage with JSS.
+ * Edit Frame would simply output child content in normal mode.
+ * In editing mode it will output markup for Edit Frame that will wrap the child content.
+ * Edit buttons, custom CSS and datasource can be applied.
+ */
+const StyleguideEditFrame = (props: StyleguideEditFrameProps): JSX.Element => (
+  <StyleguideSpecimen {...props} e2eId="styleguide-editframe">
+    <EditFrame {...getEditFrameProps(props.rendering.dataSource)}>
+      Who framed Roger Rabbit? Hard to say. <br />
+      But JSS now allows to edit frame any piece of content on a page in editing mode. <br />
+      You can add web edit or field edit buttons, modify edit frames style through CSS class and put the frame wherever you need it.
+      {props.children}
+    </EditFrame>
+  </StyleguideSpecimen>
+);
+
+const getEditFrameProps = (dataSource?: string) => {
+  return {
+    dataSource: dataSource
+      ? {
+          itemId: dataSource,
+          // databaseName: 'web',
+          // language: 'en', // optional params you can also set for datasource
+        }
+      : undefined, // datasource will set the item to be edited by edit frame
+    buttons: editFrameButtons, // add custom editing functionality or edit field sets with buttons
+    title: 'JSS edit frame',
+    tooltip: 'Perform editing anywhere while not tied to a rendering, placeholder or field',
+    cssClass: 'jss-edit-frame', // customize edit frame appearance through CSS
+    parameters: {}, // set additional parameters when needed
+  };
+};
+
+const editFrameButtons = [
+  {
+    header: 'WebEditButton',
+    icon: '/~/icon/Office/16x16/document_selection.png',
+    click: 'javascript:alert("An edit frame button was just clicked!")',
+    tooltip: 'Doesnt do much, just a web edit button example',
+  },
+  {
+    header: 'FieldEditButton',
+    icon: '/~/icon/Office/16x16/pencil.png',
+    fields: ['heading'],
+    tooltip: 'Allows you to open field editor for specified fields',
+  },
+];
+
+export default withDatasourceCheck()<StyleguideEditFrameProps>(StyleguideEditFrame);

packages/create-sitecore-jss/src/templates/react/data/routes/styleguide/en.yml

@@ -244,4 +244,12 @@ placeholders:
             fields:
               heading: Translation Patterns
               sample: This text can be translated in en.yml
+      - componentName: Styleguide-Section
+        fields:
+          heading: Editing
+        placeholders:
+          React-jss-styleguide-section:
+          - componentName: Styleguide-EditFrame
+            fields:
+              heading: Edit Frame
 

packages/create-sitecore-jss/src/templates/react/sitecore/definitions/components/Styleguide-EditFrame.sitecore.js

@@ -0,0 +1,15 @@
+// eslint-disable-next-line no-unused-vars
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the StyleguideEditFrame component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function (manifest) {
+  manifest.addComponent({
+    name: 'Styleguide-EditFrame',
+    icon: SitecoreIcon.DocumentTag,
+    fields: [{ name: 'heading', type: CommonFieldTypes.SingleLineText }],
+  });
+}

packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-EditFrame/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { EditFrame } from '@sitecore-jss/sitecore-jss-react';
+import StyleguideSpecimen from '../Styleguide-Specimen';
+
+/**
+ * A sample component to describe Edit Frame usage with JSS.
+ * Edit Frame would simply output child content in normal mode.
+ * In editing mode it will output markup for Edit Frame that will wrap the child content.
+ * Edit buttons, custom CSS and datasource can be applied.
+ */
+const StyleguideEditFrame = (props) => (
+  <StyleguideSpecimen {...props} e2eId="styleguide-editframe">
+    <EditFrame {...getEditFrameProps(props.rendering.dataSource)}>
+      Who framed Roger Rabbit? Hard to say. <br />
+      But JSS now allows to edit frame any piece of content on a page in editing mode. <br />
+      You can add web edit or field edit buttons, modify edit frame style through CSS class and
+      put the frame wherever you need it.
+      {props.children}
+    </EditFrame>
+  </StyleguideSpecimen>
+);
+
+const getEditFrameProps = (dataSource) => {
+  return {
+    dataSource: dataSource
+      ? {
+          itemId: dataSource,
+          // databaseName: 'web',
+          // language: 'en', // optional params you can also set for datasource
+        }
+      : undefined, // datasource will set the item to be edited by edit frame
+    buttons: editFrameButtons, // add custom editing functionality or edit field sets with buttons
+    title: 'JSS edit frame',
+    tooltip: 'Perform editing anywhere while not tied to a rendering, placeholder or field',
+    cssClass: 'jss-edit-frame', // customize edit frame appearance through CSS
+    parameters: {}, // set additional parameters when needed
+  };
+};
+
+const editFrameButtons = [
+  {
+    header: 'WebEditButton',
+    icon: '/~/icon/Office/16x16/document_selection.png',
+    click: 'javascript:alert("An edit frame button was just clicked!")',
+    tooltip: 'Doesnt do much, just a web edit button example',
+  }, // use javascript:, webedit: or chrome: commands for webedit buttons
+  {
+    header: 'FieldEditButton',
+    icon: '/~/icon/Office/16x16/pencil.png',
+    fields: ['heading'],
+    tooltip: 'Allows you to open field editor for specified fields',
+  }, // or use field edit buttons to open Field Editor
+];
+
+export default StyleguideEditFrame;

packages/create-sitecore-jss/src/templates/vue/data/routes/styleguide/en.yml

@@ -245,3 +245,11 @@ placeholders:
                   fields:
                     heading: Translation Patterns
                     sample: This text can be translated in en.yml
+          - componentName: Styleguide-Section
+            fields:
+              heading: Editing
+            placeholders:
+              Vue-jss-styleguide-section:
+                - componentName: Styleguide-EditFrame
+                  fields:
+                    heading: Edit Frame

packages/create-sitecore-jss/src/templates/vue/sitecore/definitions/components/Styleguide-EditFrame.sitecore.js

@@ -0,0 +1,16 @@
+// eslint-disable-next-line no-unused-vars
+import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/**
+ * Adds the Styleguide-EditFrame component to the disconnected manifest.
+ * This function is invoked by convention (*.sitecore.js) when 'jss manifest' is run.
+ * @param {Manifest} manifest Manifest instance to add components to
+ */
+export default function (manifest) {
+  manifest.addComponent({
+    name: 'Styleguide-EditFrame',
+    templateName: 'Vue-Styleguide-EditFrame',
+    icon: SitecoreIcon.DocumentTag,
+    fields: [{ name: 'heading', type: CommonFieldTypes.SingleLineText }],
+  });
+}