From 813b6d9f0df04cab89a43226d7f387be6e4541ee Mon Sep 17 00:00:00 2001
From: oscargross <oscar.gross222@gmail.com>
Date: Tue, 11 Jan 2022 09:06:16 -0300
Subject: [PATCH 1/4] style(preview_onFocus):
 try_add_borders_in_field_preview_when_edit_field_is_onFocus

---
 .../netlify-cms-core/src/actions/entries.ts   | 14 +++++++++++++
 .../src/components/Editor/Editor.js           |  9 +++++++++
 .../Editor/EditorControlPane/EditorControl.js |  3 +++
 .../EditorControlPane/EditorControlPane.js    |  4 +++-
 .../src/components/Editor/EditorInterface.js  |  3 +++
 .../src/reducers/entryDraft.js                | 20 ++++++++++++++++++-
 6 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/netlify-cms@2/packages/netlify-cms-core/src/actions/entries.ts b/netlify-cms@2/packages/netlify-cms-core/src/actions/entries.ts
index 6eaa8d1..172d170 100644
--- a/netlify-cms@2/packages/netlify-cms-core/src/actions/entries.ts
+++ b/netlify-cms@2/packages/netlify-cms-core/src/actions/entries.ts
@@ -69,6 +69,7 @@ export const DRAFT_CREATE_FROM_ENTRY = 'DRAFT_CREATE_FROM_ENTRY';
 export const DRAFT_CREATE_EMPTY = 'DRAFT_CREATE_EMPTY';
 export const DRAFT_DISCARD = 'DRAFT_DISCARD';
 export const DRAFT_CHANGE_FIELD = 'DRAFT_CHANGE_FIELD';
+export const DRAFT_FOCUS_FIELD = 'DRAFT_FOCUS_FIELD';
 export const DRAFT_VALIDATION_ERRORS = 'DRAFT_VALIDATION_ERRORS';
 export const DRAFT_CLEAR_ERRORS = 'DRAFT_CLEAR_ERRORS';
 export const DRAFT_LOCAL_BACKUP_RETRIEVED = 'DRAFT_LOCAL_BACKUP_RETRIEVED';
@@ -433,6 +434,19 @@ export function changeDraftField({
   };
 }
 
+export function focusDraftField({
+  field,
+  value,
+}: {
+  field: EntryField;
+  value: string;
+}) {
+  return {
+    type: DRAFT_FOCUS_FIELD,
+    payload: { field, value },
+  };
+}
+
 export function changeDraftFieldValidation(
   uniquefieldId: string,
   errors: { type: string; parentIds: string[]; message: string }[],
diff --git a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/Editor.js b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/Editor.js
index 47f3ade..24f23d0 100644
--- a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/Editor.js
+++ b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/Editor.js
@@ -15,6 +15,7 @@ import {
   createEmptyDraft,
   discardDraft,
   changeDraftField,
+  focusDraftField,
   changeDraftFieldValidation,
   persistEntry,
   deleteEntry,
@@ -39,6 +40,7 @@ import withWorkflow from './withWorkflow';
 export class Editor extends React.Component {
   static propTypes = {
     changeDraftField: PropTypes.func.isRequired,
+    focusDraftField: PropTypes.func.isRequired,
     changeDraftFieldValidation: PropTypes.func.isRequired,
     collection: ImmutablePropTypes.map.isRequired,
     createDraftDuplicateFromEntry: PropTypes.func.isRequired,
@@ -201,6 +203,11 @@ export class Editor extends React.Component {
     this.props.changeDraftField({ field, value, metadata, entries, i18n });
   };
 
+  handleFocusDraftField = (field, value, metadata, i18n) => {
+    const entries = [this.props.unPublishedEntry, this.props.publishedEntry].filter(Boolean);
+    this.props.focusDraftField({ field, value, metadata, entries, i18n });
+  };
+
   handleChangeStatus = newStatusName => {
     const { entryDraft, updateUnpublishedEntryStatus, collection, slug, currentStatus, t } =
       this.props;
@@ -383,6 +390,7 @@ export class Editor extends React.Component {
         fieldsMetaData={entryDraft.get('fieldsMetaData')}
         fieldsErrors={entryDraft.get('fieldsErrors')}
         onChange={this.handleChangeDraftField}
+        onFocus={this.handleFocusDraftField}
         onValidate={changeDraftFieldValidation}
         onPersist={this.handlePersistEntry}
         onDelete={this.handleDeleteEntry}
@@ -471,6 +479,7 @@ function mapStateToProps(state, ownProps) {
 
 const mapDispatchToProps = {
   changeDraftField,
+  focusDraftField,
   changeDraftFieldValidation,
   loadEntry,
   loadEntries,
diff --git a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
index e3ad8ee..7dea5d8 100644
--- a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
+++ b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
@@ -119,6 +119,7 @@ class EditorControl extends React.Component {
     mediaPaths: ImmutablePropTypes.map.isRequired,
     boundGetAsset: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
     openMediaLibrary: PropTypes.func.isRequired,
     addAsset: PropTypes.func.isRequired,
     removeInsertedMedia: PropTypes.func.isRequired,
@@ -177,6 +178,7 @@ class EditorControl extends React.Component {
       mediaPaths,
       boundGetAsset,
       onChange,
+      onFocus,
       openMediaLibrary,
       clearMediaControl,
       removeMediaControl,
@@ -220,6 +222,7 @@ class EditorControl extends React.Component {
       <ClassNames>
         {({ css, cx }) => (
           <ControlContainer
+            onFocus={() => onFocus(field)}
             className={className}
             css={css`
               ${isHidden && styleStrings.hidden};
diff --git a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
index 8711c87..eb6b603 100644
--- a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
+++ b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
@@ -166,7 +166,7 @@ export default class ControlPane extends React.Component {
   };
 
   render() {
-    const { collection, entry, fields, fieldsMetaData, fieldsErrors, onChange, onValidate, t } =
+    const { collection, entry, fields, fieldsMetaData, fieldsErrors, onChange, onFocus, onValidate, t } =
       this.props;
 
     if (!collection || !fields) {
@@ -227,6 +227,7 @@ export default class ControlPane extends React.Component {
                   console.log('newMeta', newMetadata);
                   onChange(field, newValue, newMetadata, i18n);
                 }}
+                onFocus={(item) => onFocus(item)}
                 onValidate={onValidate}
                 processControlRef={this.controlRef.bind(this)}
                 controlRef={this.controlRef}
@@ -251,5 +252,6 @@ ControlPane.propTypes = {
   fieldsMetaData: ImmutablePropTypes.map.isRequired,
   fieldsErrors: ImmutablePropTypes.map.isRequired,
   onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
   onValidate: PropTypes.func.isRequired,
 };
diff --git a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorInterface.js b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorInterface.js
index 0baefea..d67ea10 100644
--- a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorInterface.js
+++ b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorInterface.js
@@ -209,6 +209,7 @@ class EditorInterface extends Component {
       fieldsMetaData,
       fieldsErrors,
       onChange,
+      onFocus,
       showDelete,
       onDelete,
       onDeleteUnpublishedChanges,
@@ -247,6 +248,7 @@ class EditorInterface extends Component {
       fieldsMetaData,
       fieldsErrors,
       onChange,
+      onFocus,
       onValidate,
     };
 
@@ -405,6 +407,7 @@ EditorInterface.propTypes = {
   fieldsMetaData: ImmutablePropTypes.map.isRequired,
   fieldsErrors: ImmutablePropTypes.map.isRequired,
   onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
   onValidate: PropTypes.func.isRequired,
   onPersist: PropTypes.func.isRequired,
   showDelete: PropTypes.bool.isRequired,
diff --git a/netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js b/netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js
index c82b1ab..54a5918 100644
--- a/netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js
+++ b/netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js
@@ -8,6 +8,7 @@ import {
   DRAFT_CREATE_EMPTY,
   DRAFT_DISCARD,
   DRAFT_CHANGE_FIELD,
+  DRAFT_FOCUS_FIELD,
   DRAFT_VALIDATION_ERRORS,
   DRAFT_CLEAR_ERRORS,
   DRAFT_LOCAL_BACKUP_RETRIEVED,
@@ -117,10 +118,27 @@ function entryDraftReducer(state = Map(), action) {
         state.set(
           'hasChanged',
           !entries.some(e => newData.equals(e.get(...dataPath))) ||
-            !entries.some(e => newMeta.equals(e.get('meta'))),
+          !entries.some(e => newMeta.equals(e.get('meta'))),
         );
       });
     }
+    case DRAFT_FOCUS_FIELD: {
+      return state.withMutations(state => {
+        const { field, value } = action.payload;
+        const name = field.get('name');
+        const meta = field.get('meta');
+
+        if (meta) {
+          state.setIn(['entry', 'meta', name], value);
+          const newData = state.getIn(['entry', ...dataPath]);
+          const newMeta = state.getIn(['entry', 'meta']);
+          state.set(
+            'hasFocused',
+            !entries.some(e => newMeta.equals(e.get('meta'))),
+          );
+        };
+      })
+    }
     case DRAFT_VALIDATION_ERRORS:
       if (action.payload.errors.length === 0) {
         return state.deleteIn(['fieldsErrors', action.payload.uniquefieldId]);

From 5de407ea478b579751efab39d1799ec67cd1352c Mon Sep 17 00:00:00 2001
From: oscargross <oscar.gross222@gmail.com>
Date: Mon, 17 Jan 2022 10:25:01 -0300
Subject: [PATCH 2/4] feat(preview): prop_onFocus_in_all_widgets

---
 netlify-cms@2/dev-test/config.yml             | 18 +++---
 .../netlify-cms-core/src/actions/entries.ts   | 36 +++++++-----
 .../Editor/EditorControlPane/EditorControl.js |  4 +-
 .../EditorControlPane/EditorControlPane.js    |  5 +-
 .../Editor/EditorControlPane/Widget.js        |  4 ++
 .../src/reducers/entryDraft.js                | 29 ++++++----
 .../src/CodeControl.js                        |  1 +
 .../src/CodePreview.js                        |  7 ++-
 .../src/SettingsPane.js                       |  3 +-
 .../src/ColorControl.js                       | 13 ++++-
 .../src/ColorPreview.js                       |  4 +-
 .../src/DateControl.js                        | 17 ++++++
 .../src/DatePreview.js                        |  4 +-
 .../src/DateTimeControl.js                    | 16 ++++++
 .../src/DateTimePreview.js                    |  4 +-
 .../src/FilePreview.js                        |  4 +-
 .../src/ImagePreview.js                       |  4 +-
 .../src/ListControl.js                        | 14 ++++-
 .../src/MarkdownControl/index.js              |  4 ++
 .../src/MarkdownPreview.js                    |  4 +-
 .../src/NumberControl.js                      | 18 +++++-
 .../src/NumberPreview.js                      |  6 +-
 .../src/ObjectControl.js                      |  3 +
 .../src/ObjectPreview.js                      |  4 +-
 .../src/RelationControl.js                    | 56 +++++++++++++++----
 .../src/RelationPreview.js                    |  4 +-
 .../src/SelectControl.js                      | 23 +++++++-
 .../src/SelectPreview.js                      |  8 +--
 .../src/StringControl.js                      | 10 +++-
 .../src/StringPreview.js                      |  6 +-
 .../src/TextControl.js                        |  5 +-
 .../src/TextPreview.js                        |  6 +-
 32 files changed, 257 insertions(+), 87 deletions(-)

diff --git a/netlify-cms@2/dev-test/config.yml b/netlify-cms@2/dev-test/config.yml
index 2ffe504..0e27a13 100644
--- a/netlify-cms@2/dev-test/config.yml
+++ b/netlify-cms@2/dev-test/config.yml
@@ -110,16 +110,16 @@ collections: # A list of collections the CMS should be able to edit
     folder: '_sink'
     create: true
     fields:
-      - label: 'Related Post'
-        name: 'post'
-        widget: 'relationKitchenSinkPost'
-        collection: 'posts'
-        display_fields: ['title', 'date']
-        search_fields: ['title', 'body']
-        value_field: 'title'
+      # - label: 'Related Post'
+      #   name: 'post'
+      #   widget: 'relationKitchenSinkPost'
+      #   collection: 'posts'
+      #   display_fields: ['title', 'date']
+      #   search_fields: ['title', 'body']
+      #   value_field: 'title'
       - { label: 'Title', name: 'title', widget: 'string' }
-      - { label: 'Boolean', name: 'boolean', widget: 'boolean', default: true }
-      - { label: 'Map', name: 'map', widget: 'map' }
+      # - { label: 'Boolean', name: 'boolean', widget: 'boolean', default: true }
+      # - { label: 'Map', name: 'map', widget: 'map' }
       - { label: 'Text', name: 'text', widget: 'text', hint: 'Plain text, not markdown' }
       - { label: 'Number', name: 'number', widget: 'number', hint: 'To infinity and beyond!' }
       - { label: 'Markdown', name: 'markdown', widget: 'markdown' }
diff --git a/netlify-cms@2/packages/netlify-cms-core/src/actions/entries.ts b/netlify-cms@2/packages/netlify-cms-core/src/actions/entries.ts
index 172d170..d5b411a 100644
--- a/netlify-cms@2/packages/netlify-cms-core/src/actions/entries.ts
+++ b/netlify-cms@2/packages/netlify-cms-core/src/actions/entries.ts
@@ -437,13 +437,23 @@ export function changeDraftField({
 export function focusDraftField({
   field,
   value,
+  metadata,
+  entries,
+  i18n,
 }: {
   field: EntryField;
   value: string;
+  metadata: Record<string, unknown>;
+  entries: EntryMap[];
+  i18n?: {
+    currentLocale: string;
+    defaultLocale: string;
+    locales: string[];
+  };
 }) {
   return {
     type: DRAFT_FOCUS_FIELD,
-    payload: { field, value },
+    payload: { field, value, metadata, entries, i18n },
   };
 }
 
@@ -624,7 +634,7 @@ export function loadEntries(collection: Collection, page = 0) {
         entries: EntryValue[];
       } = await (loadAllEntries
         ? // nested collections require all entries to construct the tree
-          provider.listAllEntries(collection).then((entries: EntryValue[]) => ({ entries }))
+        provider.listAllEntries(collection).then((entries: EntryValue[]) => ({ entries }))
         : provider.listEntries(collection, page));
       response = {
         ...response,
@@ -636,10 +646,10 @@ export function loadEntries(collection: Collection, page = 0) {
         // cursor, which behaves identically to no cursor at all.
         cursor: integration
           ? Cursor.create({
-              actions: ['next'],
-              meta: { usingOldPaginationAPI: true },
-              data: { nextPage: page + 1 },
-            })
+            actions: ['next'],
+            meta: { usingOldPaginationAPI: true },
+            data: { nextPage: page + 1 },
+          })
           : Cursor.create(response.cursor),
       };
 
@@ -790,13 +800,13 @@ export function createEmptyDraft(collection: Collection, search: string) {
 
 interface DraftEntryData {
   [name: string]:
-    | string
-    | null
-    | boolean
-    | List<unknown>
-    | DraftEntryData
-    | DraftEntryData[]
-    | (string | DraftEntryData | boolean | List<unknown>)[];
+  | string
+  | null
+  | boolean
+  | List<unknown>
+  | DraftEntryData
+  | DraftEntryData[]
+  | (string | DraftEntryData | boolean | List<unknown>)[];
 }
 
 export function createEmptyDraftData(
diff --git a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
index 7dea5d8..4b6e412 100644
--- a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
+++ b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
@@ -119,7 +119,7 @@ class EditorControl extends React.Component {
     mediaPaths: ImmutablePropTypes.map.isRequired,
     boundGetAsset: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
-    onFocus: PropTypes.func.isRequired,
+    onFocus: PropTypes.func,
     openMediaLibrary: PropTypes.func.isRequired,
     addAsset: PropTypes.func.isRequired,
     removeInsertedMedia: PropTypes.func.isRequired,
@@ -222,7 +222,6 @@ class EditorControl extends React.Component {
       <ClassNames>
         {({ css, cx }) => (
           <ControlContainer
-            onFocus={() => onFocus(field)}
             className={className}
             css={css`
               ${isHidden && styleStrings.hidden};
@@ -293,6 +292,7 @@ class EditorControl extends React.Component {
               mediaPaths={mediaPaths}
               metadata={metadata}
               onChange={(newValue, newMetadata) => onChange(field, newValue, newMetadata)}
+              onFocus={(newValue, newMetadata) => onFocus(field, newValue, newMetadata)}
               onValidate={onValidate && partial(onValidate, this.uniqueFieldId)}
               onOpenMediaLibrary={openMediaLibrary}
               onClearMediaControl={clearMediaControl}
diff --git a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
index eb6b603..308125e 100644
--- a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
+++ b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
@@ -227,7 +227,10 @@ export default class ControlPane extends React.Component {
                   console.log('newMeta', newMetadata);
                   onChange(field, newValue, newMetadata, i18n);
                 }}
-                onFocus={(item) => onFocus(item)}
+                onFocus={(field, newValue, newMetadata) => {
+                  console.log('newMeta', newMetadata);
+                  onFocus(field, newValue, newMetadata, i18n);
+                }}
                 onValidate={onValidate}
                 processControlRef={this.controlRef.bind(this)}
                 controlRef={this.controlRef}
diff --git a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js
index f6093a4..048ac7c 100644
--- a/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js
+++ b/netlify-cms@2/packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js
@@ -43,6 +43,8 @@ export default class Widget extends Component {
     metadata: ImmutablePropTypes.map,
     fieldsErrors: ImmutablePropTypes.map,
     onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
+
     onValidate: PropTypes.func,
     onOpenMediaLibrary: PropTypes.func.isRequired,
     onClearMediaControl: PropTypes.func.isRequired,
@@ -257,6 +259,7 @@ export default class Widget extends Component {
       mediaPaths,
       metadata,
       onChange,
+      onFocus,
       onValidateObject,
       onOpenMediaLibrary,
       onRemoveMediaControl,
@@ -303,6 +306,7 @@ export default class Widget extends Component {
       mediaPaths,
       metadata,
       onChange,
+      onFocus,
       onChangeObject: this.onChangeObject,
       onValidateObject,
       onOpenMediaLibrary,
diff --git a/netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js b/netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js
index 54a5918..5cf4e06 100644
--- a/netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js
+++ b/netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js
@@ -124,20 +124,25 @@ function entryDraftReducer(state = Map(), action) {
     }
     case DRAFT_FOCUS_FIELD: {
       return state.withMutations(state => {
-        const { field, value } = action.payload;
+
+        const { field, value, metadata, entries, i18n } = action.payload;
         const name = field.get('name');
-        const meta = field.get('meta');
+        window.previewStyle = {
+          name: field.get('name'),
+          label: field.get('label'),
+        }
+        const dataPath = (i18n && getDataPath(i18n.currentLocale, i18n.defaultLocale)) || ['data'];
+        state.setIn(['entry', 'meta', name], value);
 
-        if (meta) {
-          state.setIn(['entry', 'meta', name], value);
-          const newData = state.getIn(['entry', ...dataPath]);
-          const newMeta = state.getIn(['entry', 'meta']);
-          state.set(
-            'hasFocused',
-            !entries.some(e => newMeta.equals(e.get('meta'))),
-          );
-        };
-      })
+        state.mergeDeepIn(['fieldsMetaData'], fromJS(metadata));
+        const newData = state.getIn(['entry', ...dataPath]);
+        const newMeta = state.getIn(['entry', 'meta']);
+        state.set(
+          'hasFocused',
+          !entries.some(e => newData.equals(e.get(...dataPath))) ||
+          !entries.some(e => newMeta.equals(e.get('meta'))),
+        );
+      });
     }
     case DRAFT_VALIDATION_ERRORS:
       if (action.payload.errors.length === 0) {
diff --git a/netlify-cms@2/packages/netlify-cms-widget-code/src/CodeControl.js b/netlify-cms@2/packages/netlify-cms-widget-code/src/CodeControl.js
index ad5b0d2..630cde2 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-code/src/CodeControl.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-code/src/CodeControl.js
@@ -64,6 +64,7 @@ export default class CodeControl extends React.Component {
   static propTypes = {
     field: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
     value: PropTypes.node,
     forID: PropTypes.string.isRequired,
     classNameWrapper: PropTypes.string.isRequired,
diff --git a/netlify-cms@2/packages/netlify-cms-widget-code/src/CodePreview.js b/netlify-cms@2/packages/netlify-cms-widget-code/src/CodePreview.js
index 46da098..13a9a27 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-code/src/CodePreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-code/src/CodePreview.js
@@ -16,7 +16,12 @@ function toValue(value, field) {
 
 function CodePreview(props) {
   return (
-    <WidgetPreviewContainer>
+    <WidgetPreviewContainer
+      style={{
+        borderStyle:
+          props?.field.get('name') === window?.previewStyle?.name && props?.field.get('label') === window?.previewStyle?.label
+            ? 'dotted' : 'none'
+      }}>
       <pre>
         <code>{toValue(props.value, props.field)}</code>
       </pre>
diff --git a/netlify-cms@2/packages/netlify-cms-widget-code/src/SettingsPane.js b/netlify-cms@2/packages/netlify-cms-widget-code/src/SettingsPane.js
index c683afd..95f5da6 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-code/src/SettingsPane.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-code/src/SettingsPane.js
@@ -39,7 +39,7 @@ const SettingsSectionTitle = styled.h3`
   }
 `;
 
-function SettingsSelect({ value, options, onChange, forID, type, autoFocus }) {
+function SettingsSelect({ value, options, onChange, forID, type, autoFocus, onFocus }) {
   return (
     <Select
       inputId={`${forID}-select-${type}`}
@@ -50,6 +50,7 @@ function SettingsSelect({ value, options, onChange, forID, type, autoFocus }) {
       menuPlacement="auto"
       captureMenuScroll={false}
       autoFocus={autoFocus}
+      onFocus={opt => onFocus(opt.value)}
     />
   );
 }
diff --git a/netlify-cms@2/packages/netlify-cms-widget-colorstring/src/ColorControl.js b/netlify-cms@2/packages/netlify-cms-widget-colorstring/src/ColorControl.js
index 294134e..cd3d498 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-colorstring/src/ColorControl.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-colorstring/src/ColorControl.js
@@ -79,6 +79,7 @@ const ClickOutsideDiv = styled.div`
 export default class ColorControl extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
     forID: PropTypes.string,
     value: PropTypes.node,
     classNameWrapper: PropTypes.string.isRequired,
@@ -110,8 +111,15 @@ export default class ColorControl extends React.Component {
         : color.hex;
     this.props.onChange(formattedColor);
   };
+  handleFocus = color => {
+    const formattedColor =
+      color.rgb.a < 1
+        ? `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`
+        : color.hex;
+    this.props.onFocus(formattedColor);
+  };
   render() {
-    const { forID, value, field, onChange, classNameWrapper, setActiveStyle, setInactiveStyle } =
+    const { forID, value, field, onChange, onFocus, classNameWrapper, setActiveStyle, setInactiveStyle } =
       this.props;
 
     const allowInput = field.get('allowInput', false);
@@ -144,6 +152,7 @@ export default class ColorControl extends React.Component {
               color={value || ''}
               onChange={this.handleChange}
               disableAlpha={!field.get('enableAlpha', false)}
+              onFocus={this.handleFocus}
             />
           </ColorPickerContainer>
         )}
@@ -154,7 +163,7 @@ export default class ColorControl extends React.Component {
           className={classNameWrapper}
           value={value || ''}
           onChange={e => onChange(e.target.value)}
-          onFocus={setActiveStyle}
+          onFocus={e => { onFocus(e.target.value); this.props.setActiveStyle() }}
           onBlur={setInactiveStyle}
           style={{
             paddingLeft: '75px',
diff --git a/netlify-cms@2/packages/netlify-cms-widget-colorstring/src/ColorPreview.js b/netlify-cms@2/packages/netlify-cms-widget-colorstring/src/ColorPreview.js
index 8ced4f5..6faaa25 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-colorstring/src/ColorPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-colorstring/src/ColorPreview.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
-function ColorPreview({ value }) {
-  return <WidgetPreviewContainer>{value}</WidgetPreviewContainer>;
+function ColorPreview({ value, field }) {
+  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>{value}</WidgetPreviewContainer>;
 }
 
 ColorPreview.propTypes = {
diff --git a/netlify-cms@2/packages/netlify-cms-widget-date/src/DateControl.js b/netlify-cms@2/packages/netlify-cms-widget-date/src/DateControl.js
index 4ca3195..6cb6aed 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-date/src/DateControl.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-date/src/DateControl.js
@@ -22,6 +22,7 @@ export default class DateControl extends React.Component {
     field: PropTypes.object.isRequired,
     forID: PropTypes.string,
     onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
     classNameWrapper: PropTypes.string.isRequired,
     setActiveStyle: PropTypes.func.isRequired,
     setInactiveStyle: PropTypes.func.isRequired,
@@ -101,6 +102,21 @@ export default class DateControl extends React.Component {
       onChange(value);
     }
   };
+  handleFocus = datetime => {
+    if (!this.isValidDate(datetime)) {
+      return;
+    }
+    const { onFocus } = this.props;
+    const { format } = this.formats;
+
+    if (format) {
+      const formattedValue = datetime ? moment(datetime).format(format) : '';
+      onFocus(formattedValue);
+    } else {
+      const value = moment.isMoment(datetime) ? datetime.toDate() : datetime;
+      onFocus(value);
+    }
+  };
 
   onClose = datetime => {
     const { setInactiveStyle } = this.props;
@@ -132,6 +148,7 @@ export default class DateControl extends React.Component {
           timeFormat={timeFormat}
           value={moment(value, format)}
           onChange={this.handleChange}
+          onFocus={this.handleFocus}
           onOpen={setActiveStyle}
           onClose={this.onClose}
           inputProps={{ className: classNameWrapper, id: forID }}
diff --git a/netlify-cms@2/packages/netlify-cms-widget-date/src/DatePreview.js b/netlify-cms@2/packages/netlify-cms-widget-date/src/DatePreview.js
index 6c97679..35efbbb 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-date/src/DatePreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-date/src/DatePreview.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
-function DatePreview({ value }) {
-  return <WidgetPreviewContainer>{value ? value.toString() : null}</WidgetPreviewContainer>;
+function DatePreview({ value, field }) {
+  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>{value ? value.toString() : null}</WidgetPreviewContainer>;
 }
 
 DatePreview.propTypes = {
diff --git a/netlify-cms@2/packages/netlify-cms-widget-datetime/src/DateTimeControl.js b/netlify-cms@2/packages/netlify-cms-widget-datetime/src/DateTimeControl.js
index babebf0..e3261de 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-datetime/src/DateTimeControl.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-datetime/src/DateTimeControl.js
@@ -122,6 +122,21 @@ export default class DateTimeControl extends React.Component {
       onChange(value);
     }
   };
+  handleFocus = datetime => {
+    if (!this.isValidDate(datetime)) {
+      return;
+    }
+
+    const { onFocus } = this.props;
+    const { format } = this.formats;
+    if (format) {
+      const formattedValue = datetime ? moment(datetime).format(format) : '';
+      onFocus(formattedValue);
+    } else {
+      const value = moment.isMoment(datetime) ? datetime.toDate() : datetime;
+      onFocus(value);
+    }
+  };
 
   onClose = datetime => {
     const { setInactiveStyle } = this.props;
@@ -155,6 +170,7 @@ export default class DateTimeControl extends React.Component {
           timeFormat={timeFormat}
           value={moment(value, format)}
           onChange={this.handleChange}
+          onFocus={this.handleFocus}
           onOpen={setActiveStyle}
           onClose={this.onClose}
           inputProps={{ className: classNameWrapper, id: forID }}
diff --git a/netlify-cms@2/packages/netlify-cms-widget-datetime/src/DateTimePreview.js b/netlify-cms@2/packages/netlify-cms-widget-datetime/src/DateTimePreview.js
index 6c97679..35efbbb 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-datetime/src/DateTimePreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-datetime/src/DateTimePreview.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
-function DatePreview({ value }) {
-  return <WidgetPreviewContainer>{value ? value.toString() : null}</WidgetPreviewContainer>;
+function DatePreview({ value, field }) {
+  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>{value ? value.toString() : null}</WidgetPreviewContainer>;
 }
 
 DatePreview.propTypes = {
diff --git a/netlify-cms@2/packages/netlify-cms-widget-file/src/FilePreview.js b/netlify-cms@2/packages/netlify-cms-widget-file/src/FilePreview.js
index fbf2e49..3ebf796 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-file/src/FilePreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-file/src/FilePreview.js
@@ -25,14 +25,14 @@ function FileLinkList({ values, getAsset, field }) {
 function FileContent(props) {
   const { value, getAsset, field } = props;
   if (Array.isArray(value) || List.isList(value)) {
-    return <FileLinkList values={value} getAsset={getAsset} field={field} />;
+    return <FileLinkList style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }} values={value} getAsset={getAsset} field={field} />;
   }
   return <FileLink key={value} path={value} href={getAsset(value, field)} />;
 }
 
 function FilePreview(props) {
   return (
-    <WidgetPreviewContainer>
+    <WidgetPreviewContainer style={{ borderStyle: props?.field?.get('name') === window?.previewStyle?.name && props?.field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>
       {props.value ? <FileContent {...props} /> : null}
     </WidgetPreviewContainer>
   );
diff --git a/netlify-cms@2/packages/netlify-cms-widget-image/src/ImagePreview.js b/netlify-cms@2/packages/netlify-cms-widget-image/src/ImagePreview.js
index 5bef284..1dd9982 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-image/src/ImagePreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-image/src/ImagePreview.js
@@ -11,7 +11,7 @@ const StyledImage = styled(({ src }) => <img src={src || ''} role="presentation"
 `;
 
 function StyledImageAsset({ getAsset, value, field }) {
-  return <StyledImage src={getAsset(value, field)} />;
+  return <StyledImage style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }} src={getAsset(value, field)} />;
 }
 
 function ImagePreviewContent(props) {
@@ -26,7 +26,7 @@ function ImagePreviewContent(props) {
 
 function ImagePreview(props) {
   return (
-    <WidgetPreviewContainer>
+    <WidgetPreviewContainer style={{ borderStyle: props?.field?.get('name') === window?.previewStyle?.name && props?.field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>
       {props.value ? <ImagePreviewContent {...props} /> : null}
     </WidgetPreviewContainer>
   );
diff --git a/netlify-cms@2/packages/netlify-cms-widget-list/src/ListControl.js b/netlify-cms@2/packages/netlify-cms-widget-list/src/ListControl.js
index af2175f..73c939b 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-list/src/ListControl.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-list/src/ListControl.js
@@ -121,6 +121,7 @@ export default class ListControl extends React.Component {
   static propTypes = {
     metadata: ImmutablePropTypes.map,
     onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
     onChangeObject: PropTypes.func.isRequired,
     onValidateObject: PropTypes.func.isRequired,
     validate: PropTypes.func.isRequired,
@@ -221,6 +222,17 @@ export default class ListControl extends React.Component {
 
   handleFocus = () => {
     this.props.setActiveStyle();
+    const { onFocus } = this.props;
+    const oldValue = this.state.value;
+    const newValue = e.target.value.trim();
+    const listValue = newValue ? newValue.split(',') : [];
+    if (newValue.match(/,$/) && oldValue.match(/, $/)) {
+      listValue.pop();
+    }
+
+    const parsedValue = this.valueToString(listValue);
+    this.setState({ value: parsedValue });
+    onFocus(List(listValue.map(val => val.trim())));
   };
 
   handleBlur = e => {
@@ -378,7 +390,7 @@ export default class ListControl extends React.Component {
   handleRemove = (index, event) => {
     event.preventDefault();
     const { itemsCollapsed } = this.state;
-    const { value, metadata, onChange, field, clearFieldErrors } = this.props;
+    const { value, metadata, onChange, field, clearFieldErrors, onFocus} = this.props;
     const collectionName = field.get('name');
     const isSingleField = this.getValueType() === valueTypes.SINGLE;
 
diff --git a/netlify-cms@2/packages/netlify-cms-widget-markdown/src/MarkdownControl/index.js b/netlify-cms@2/packages/netlify-cms-widget-markdown/src/MarkdownControl/index.js
index d89b199..ea9376f 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-markdown/src/MarkdownControl/index.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-markdown/src/MarkdownControl/index.js
@@ -25,6 +25,7 @@ export function getEditorComponents() {
 export default class MarkdownControl extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
     onAddAsset: PropTypes.func.isRequired,
     getAsset: PropTypes.func.isRequired,
     classNameWrapper: PropTypes.string.isRequired,
@@ -70,6 +71,7 @@ export default class MarkdownControl extends React.Component {
   render() {
     const {
       onChange,
+      onFocus,
       onAddAsset,
       getAsset,
       value,
@@ -88,6 +90,7 @@ export default class MarkdownControl extends React.Component {
       <div className="cms-editor-visual" ref={this.processRef}>
         <VisualEditor
           onChange={onChange}
+          onFocus={onFocus}
           onAddAsset={onAddAsset}
           isShowModeToggle={isShowModeToggle}
           onMode={this.handleMode}
@@ -108,6 +111,7 @@ export default class MarkdownControl extends React.Component {
       <div className="cms-editor-raw" ref={this.processRef}>
         <RawEditor
           onChange={onChange}
+          onFocus={onFocus}
           onAddAsset={onAddAsset}
           isShowModeToggle={isShowModeToggle}
           onMode={this.handleMode}
diff --git a/netlify-cms@2/packages/netlify-cms-widget-markdown/src/MarkdownPreview.js b/netlify-cms@2/packages/netlify-cms-widget-markdown/src/MarkdownPreview.js
index 68bf827..867788f 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-markdown/src/MarkdownPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-markdown/src/MarkdownPreview.js
@@ -20,7 +20,9 @@ class MarkdownPreview extends React.Component {
     const html = markdownToHtml(value, { getAsset, resolveWidget }, getRemarkPlugins?.());
     const toRender = field?.get('sanitize_preview', false) ? DOMPurify.sanitize(html) : html;
 
-    return <WidgetPreviewContainer dangerouslySetInnerHTML={{ __html: toRender }} />;
+    return <WidgetPreviewContainer
+      style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}
+      dangerouslySetInnerHTML={{ __html: toRender }} />;
   }
 }
 
diff --git a/netlify-cms@2/packages/netlify-cms-widget-number/src/NumberControl.js b/netlify-cms@2/packages/netlify-cms-widget-number/src/NumberControl.js
index 35606d9..706755b 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-number/src/NumberControl.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-number/src/NumberControl.js
@@ -52,6 +52,7 @@ export default class NumberControl extends React.Component {
   static propTypes = {
     field: ImmutablePropTypes.map.isRequired,
     onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
     classNameWrapper: PropTypes.string.isRequired,
     setActiveStyle: PropTypes.func.isRequired,
     setInactiveStyle: PropTypes.func.isRequired,
@@ -80,6 +81,19 @@ export default class NumberControl extends React.Component {
     }
   };
 
+  handleFocus = e => {
+   this.props.setActiveStyle()
+   const valueType = this.props.field.get('value_type');
+    const { onFocus } = this.props;
+    const value = valueType === 'float' ? parseFloat(e.target.value) : parseInt(e.target.value, 10);
+
+    if (!isNaN(value)) {
+      onFocus(value);
+    } else {
+      onFocus('');
+    }
+}
+
   isValid = () => {
     const { field, value, t } = this.props;
     const hasPattern = !!field.get('pattern', false);
@@ -96,7 +110,7 @@ export default class NumberControl extends React.Component {
   };
 
   render() {
-    const { field, value, classNameWrapper, forID, setActiveStyle, setInactiveStyle } = this.props;
+    const { field, value, classNameWrapper, forID, setActiveStyle, setInactiveStyle, onFocus } = this.props;
     const min = field.get('min', '');
     const max = field.get('max', '');
     const step = field.get('step', field.get('value_type') === 'int' ? 1 : '');
@@ -105,7 +119,7 @@ export default class NumberControl extends React.Component {
         type="number"
         id={forID}
         className={classNameWrapper}
-        onFocus={setActiveStyle}
+        onFocus={this.handleFocus}
         onBlur={setInactiveStyle}
         value={value || (value === 0 ? value : '')}
         step={step}
diff --git a/netlify-cms@2/packages/netlify-cms-widget-number/src/NumberPreview.js b/netlify-cms@2/packages/netlify-cms-widget-number/src/NumberPreview.js
index f1cdd30..0cb501b 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-number/src/NumberPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-number/src/NumberPreview.js
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
-function NumberPreview({ value }) {
-  return <WidgetPreviewContainer>{value}</WidgetPreviewContainer>;
+function NumberPreview({ value, field }) {
+  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>{value}</WidgetPreviewContainer>;
 }
 
 NumberPreview.propTypes = {
diff --git a/netlify-cms@2/packages/netlify-cms-widget-object/src/ObjectControl.js b/netlify-cms@2/packages/netlify-cms-widget-object/src/ObjectControl.js
index e89a50b..b046096 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-object/src/ObjectControl.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-object/src/ObjectControl.js
@@ -26,6 +26,7 @@ export default class ObjectControl extends React.Component {
 
   static propTypes = {
     onChangeObject: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
     onValidateObject: PropTypes.func.isRequired,
     value: PropTypes.oneOfType([PropTypes.node, PropTypes.object, PropTypes.bool]),
     field: PropTypes.object,
@@ -76,6 +77,7 @@ export default class ObjectControl extends React.Component {
     const {
       value,
       onChangeObject,
+      onFocus,
       onValidateObject,
       clearFieldErrors,
       metadata,
@@ -102,6 +104,7 @@ export default class ObjectControl extends React.Component {
         field={field}
         value={fieldValue}
         onChange={onChangeObject}
+        onFocus={onFocus}
         clearFieldErrors={clearFieldErrors}
         fieldsMetaData={metadata}
         fieldsErrors={fieldsErrors}
diff --git a/netlify-cms@2/packages/netlify-cms-widget-object/src/ObjectPreview.js b/netlify-cms@2/packages/netlify-cms-widget-object/src/ObjectPreview.js
index 40847fa..cbfb12e 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-object/src/ObjectPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-object/src/ObjectPreview.js
@@ -4,7 +4,9 @@ import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
 function ObjectPreview({ field }) {
   return (
-    <WidgetPreviewContainer>
+    <WidgetPreviewContainer
+      style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}
+    >
       {(field && field.get('fields')) || field.get('field') || null}
     </WidgetPreviewContainer>
   );
diff --git a/netlify-cms@2/packages/netlify-cms-widget-relation/src/RelationControl.js b/netlify-cms@2/packages/netlify-cms-widget-relation/src/RelationControl.js
index c723421..e36d3df 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-relation/src/RelationControl.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-relation/src/RelationControl.js
@@ -110,6 +110,7 @@ export default class RelationControl extends React.Component {
 
   static propTypes = {
     onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
     forID: PropTypes.string.isRequired,
     value: PropTypes.node,
     field: ImmutablePropTypes.map,
@@ -153,7 +154,7 @@ export default class RelationControl extends React.Component {
     // if the field has a previous value perform an initial search based on the value field
     // this is required since each search is limited by optionsLength so the selected value
     // might not show up on the search
-    const { forID, field, value, query, onChange } = this.props;
+    const { forID, field, value, query, onChange, onFocus } = this.props;
     const collection = field.get('collection');
     const file = field.get('file');
     const initialSearchValues = value && (this.isMultiple() ? getSelectedOptions(value) : [value]);
@@ -189,24 +190,54 @@ export default class RelationControl extends React.Component {
 
   onSortEnd =
     options =>
-    ({ oldIndex, newIndex }) => {
-      const { onChange, field } = this.props;
+      ({ oldIndex, newIndex }) => {
+        const { onChange, field } = this.props;
+        const value = options.map(optionToString);
+        const newValue = arrayMove(value, oldIndex, newIndex);
+        const metadata =
+          (!isEmpty(options) && {
+            [field.get('name')]: {
+              [field.get('collection')]: {
+                [last(newValue)]: last(options).data,
+              },
+            },
+          }) ||
+          {};
+        onChange(fromJS(newValue), metadata);
+      };
+
+  handleChange = selectedOption => {
+    const { onChange, field } = this.props;
+
+    if (this.isMultiple()) {
+      const options = selectedOption;
+      this.setState({ initialOptions: options.filter(Boolean) });
       const value = options.map(optionToString);
-      const newValue = arrayMove(value, oldIndex, newIndex);
       const metadata =
         (!isEmpty(options) && {
           [field.get('name')]: {
             [field.get('collection')]: {
-              [last(newValue)]: last(options).data,
+              [last(value)]: last(options).data,
             },
           },
         }) ||
         {};
-      onChange(fromJS(newValue), metadata);
-    };
+      onChange(fromJS(value), metadata);
+    } else {
+      this.setState({ initialOptions: [selectedOption].filter(Boolean) });
+      const value = optionToString(selectedOption);
+      const metadata = selectedOption && {
+        [field.get('name')]: {
+          [field.get('collection')]: { [value]: selectedOption.data },
+        },
+      };
+      onChange(value, metadata);
+    }
+  };
 
-  handleChange = selectedOption => {
-    const { onChange, field } = this.props;
+  handleFocus = selectedOption => {
+    this.props.setActiveStyle()
+    const { onFocus, field } = this.props;
 
     if (this.isMultiple()) {
       const options = selectedOption;
@@ -221,7 +252,7 @@ export default class RelationControl extends React.Component {
           },
         }) ||
         {};
-      onChange(fromJS(value), metadata);
+      onFocus(fromJS(value), metadata);
     } else {
       this.setState({ initialOptions: [selectedOption].filter(Boolean) });
       const value = optionToString(selectedOption);
@@ -230,7 +261,7 @@ export default class RelationControl extends React.Component {
           [field.get('collection')]: { [value]: selectedOption.data },
         },
       };
-      onChange(value, metadata);
+      onFocus(value, metadata);
     }
   };
 
@@ -255,7 +286,7 @@ export default class RelationControl extends React.Component {
     const displayField = field.get('display_fields') || List([field.get('value_field')]);
     const options = hits.reduce((acc, hit) => {
       const valuesPaths = stringTemplate.expandPath({ data: hit.data, path: valueField });
-      for (let i = 0; i < valuesPaths.length; i++) {
+      for (let i = 0;i < valuesPaths.length;i++) {
         const label = displayField
           .toJS()
           .map(key => {
@@ -319,6 +350,7 @@ export default class RelationControl extends React.Component {
         defaultOptions
         loadOptions={this.loadOptions}
         onChange={this.handleChange}
+        onFocus={this.handleFocus}
         className={classNameWrapper}
         onFocus={setActiveStyle}
         onBlur={setInactiveStyle}
diff --git a/netlify-cms@2/packages/netlify-cms-widget-relation/src/RelationPreview.js b/netlify-cms@2/packages/netlify-cms-widget-relation/src/RelationPreview.js
index da99827..e2d21e4 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-relation/src/RelationPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-relation/src/RelationPreview.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
-function RelationPreview({ value }) {
-  return <WidgetPreviewContainer>{value}</WidgetPreviewContainer>;
+function RelationPreview({ value, field }) {
+  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>{value}</WidgetPreviewContainer>;
 }
 
 RelationPreview.propTypes = {
diff --git a/netlify-cms@2/packages/netlify-cms-widget-select/src/SelectControl.js b/netlify-cms@2/packages/netlify-cms-widget-select/src/SelectControl.js
index 1386a15..20f3409 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-select/src/SelectControl.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-select/src/SelectControl.js
@@ -38,6 +38,7 @@ function getSelectedValue({ value, options, isMultiple }) {
 export default class SelectControl extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
     value: PropTypes.node,
     forID: PropTypes.string.isRequired,
     classNameWrapper: PropTypes.string.isRequired,
@@ -93,6 +94,24 @@ export default class SelectControl extends React.Component {
     }
   };
 
+  handleFocus = selectedOption => {
+    this.props.setActiveStyle()
+    const { onFocus, field } = this.props;
+    const isMultiple = field.get('multiple', false);
+    const isEmpty = isMultiple ? !selectedOption?.length : !selectedOption;
+
+    if (field.get('required') && isEmpty && isMultiple) {
+      onFocus(List());
+    } else if (isEmpty) {
+      onFocus(null);
+    } else if (isMultiple) {
+      const options = selectedOption.map(optionToString);
+      onFocus(fromJS(options));
+    } else {
+      onFocus(optionToString(selectedOption));
+    }
+  };
+
   componentDidMount() {
     const { field, onChange, value } = this.props;
     if (field.get('required') && field.get('multiple')) {
@@ -105,7 +124,7 @@ export default class SelectControl extends React.Component {
   }
 
   render() {
-    const { field, value, forID, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props;
+    const { field, value, forID, classNameWrapper, setActiveStyle, setInactiveStyle, onFocus } = this.props;
     const fieldOptions = field.get('options');
     const isMultiple = field.get('multiple', false);
     const isClearable = !field.get('required', true) || isMultiple;
@@ -123,7 +142,7 @@ export default class SelectControl extends React.Component {
         value={selectedValue}
         onChange={this.handleChange}
         className={classNameWrapper}
-        onFocus={setActiveStyle}
+        onFocus={this.handleFocus}
         onBlur={setInactiveStyle}
         options={options}
         styles={reactSelectStyles}
diff --git a/netlify-cms@2/packages/netlify-cms-widget-select/src/SelectPreview.js b/netlify-cms@2/packages/netlify-cms-widget-select/src/SelectPreview.js
index 17ccac6..01adc37 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-select/src/SelectPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-select/src/SelectPreview.js
@@ -14,11 +14,11 @@ function ListPreview({ values }) {
   );
 }
 
-function SelectPreview({ value }) {
+function SelectPreview(props) {
   return (
-    <WidgetPreviewContainer>
-      {value && (List.isList(value) ? <ListPreview values={value} /> : value)}
-      {!value && null}
+    <WidgetPreviewContainer style={{ borderStyle: props?.field?.get('name') === window?.previewStyle?.name && props?.field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>
+      {props.value && (List.isList(props.value) ? <ListPreview values={props.value} /> : props.value)}
+      {!props.value && null}
     </WidgetPreviewContainer>
   );
 }
diff --git a/netlify-cms@2/packages/netlify-cms-widget-string/src/StringControl.js b/netlify-cms@2/packages/netlify-cms-widget-string/src/StringControl.js
index 1669402..f5cfb52 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-string/src/StringControl.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-string/src/StringControl.js
@@ -40,8 +40,14 @@ export default class StringControl extends React.Component {
     this.props.onChange(e.target.value);
   };
 
+  handleFocus = e => {
+    this.props.setActiveStyle()
+    this._sel = e.target.selectionStart;
+    this.props.onFocus(e.target.value);
+  }
+
   render() {
-    const { forID, value, classNameWrapper, setActiveStyle, setInactiveStyle } = this.props;
+    const { forID, value, classNameWrapper, setActiveStyle, setInactiveStyle, onFocus } = this.props;
 
     return (
       <input
@@ -53,7 +59,7 @@ export default class StringControl extends React.Component {
         className={classNameWrapper}
         value={value || ''}
         onChange={this.handleChange}
-        onFocus={setActiveStyle}
+        onFocus={this.handleFocus}
         onBlur={setInactiveStyle}
       />
     );
diff --git a/netlify-cms@2/packages/netlify-cms-widget-string/src/StringPreview.js b/netlify-cms@2/packages/netlify-cms-widget-string/src/StringPreview.js
index 4e591b0..0998b5e 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-string/src/StringPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-string/src/StringPreview.js
@@ -2,8 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
-function StringPreview({ value }) {
-  return <WidgetPreviewContainer>{value}</WidgetPreviewContainer>;
+function StringPreview({ value, field }) {
+  return <WidgetPreviewContainer
+    style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}
+  >{value}</WidgetPreviewContainer>;
 }
 
 StringPreview.propTypes = {
diff --git a/netlify-cms@2/packages/netlify-cms-widget-text/src/TextControl.js b/netlify-cms@2/packages/netlify-cms-widget-text/src/TextControl.js
index 26cbe44..6f0beba 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-text/src/TextControl.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-text/src/TextControl.js
@@ -5,6 +5,7 @@ import Textarea from 'react-textarea-autosize';
 export default class TextControl extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
     forID: PropTypes.string,
     value: PropTypes.node,
     classNameWrapper: PropTypes.string.isRequired,
@@ -28,7 +29,7 @@ export default class TextControl extends React.Component {
   }
 
   render() {
-    const { forID, value, onChange, classNameWrapper, setActiveStyle, setInactiveStyle } =
+    const { forID, value, onChange, classNameWrapper, setActiveStyle, setInactiveStyle, onFocus } =
       this.props;
 
     return (
@@ -36,7 +37,7 @@ export default class TextControl extends React.Component {
         id={forID}
         value={value || ''}
         className={classNameWrapper}
-        onFocus={setActiveStyle}
+        onFocus={e => { onFocus(e.target.value); this.props.setActiveStyle() }}
         onBlur={setInactiveStyle}
         minRows={5}
         css={{ fontFamily: 'inherit' }}
diff --git a/netlify-cms@2/packages/netlify-cms-widget-text/src/TextPreview.js b/netlify-cms@2/packages/netlify-cms-widget-text/src/TextPreview.js
index ec5fb8f..61098b8 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-text/src/TextPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-text/src/TextPreview.js
@@ -2,8 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
-function TextPreview({ value }) {
-  return <WidgetPreviewContainer>{value}</WidgetPreviewContainer>;
+function TextPreview({ value, field }) {
+  return <WidgetPreviewContainer
+    style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}
+  >{value}</WidgetPreviewContainer>;
 }
 
 TextPreview.propTypes = {

From fd6098cc02bff047d6079162035a61987b638640 Mon Sep 17 00:00:00 2001
From: oscargross <oscar.gross222@gmail.com>
Date: Mon, 17 Jan 2022 10:26:21 -0300
Subject: [PATCH 3/4] feat(preview): prop_onFocus_in_all_widgets

---
 netlify-cms@2/dev-test/config.yml | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/netlify-cms@2/dev-test/config.yml b/netlify-cms@2/dev-test/config.yml
index 0e27a13..2ffe504 100644
--- a/netlify-cms@2/dev-test/config.yml
+++ b/netlify-cms@2/dev-test/config.yml
@@ -110,16 +110,16 @@ collections: # A list of collections the CMS should be able to edit
     folder: '_sink'
     create: true
     fields:
-      # - label: 'Related Post'
-      #   name: 'post'
-      #   widget: 'relationKitchenSinkPost'
-      #   collection: 'posts'
-      #   display_fields: ['title', 'date']
-      #   search_fields: ['title', 'body']
-      #   value_field: 'title'
+      - label: 'Related Post'
+        name: 'post'
+        widget: 'relationKitchenSinkPost'
+        collection: 'posts'
+        display_fields: ['title', 'date']
+        search_fields: ['title', 'body']
+        value_field: 'title'
       - { label: 'Title', name: 'title', widget: 'string' }
-      # - { label: 'Boolean', name: 'boolean', widget: 'boolean', default: true }
-      # - { label: 'Map', name: 'map', widget: 'map' }
+      - { label: 'Boolean', name: 'boolean', widget: 'boolean', default: true }
+      - { label: 'Map', name: 'map', widget: 'map' }
       - { label: 'Text', name: 'text', widget: 'text', hint: 'Plain text, not markdown' }
       - { label: 'Number', name: 'number', widget: 'number', hint: 'To infinity and beyond!' }
       - { label: 'Markdown', name: 'markdown', widget: 'markdown' }

From 696236e021c19d653becf62c80a89f5f8d678cda Mon Sep 17 00:00:00 2001
From: oscargross <oscar.gross222@gmail.com>
Date: Tue, 18 Jan 2022 09:23:46 -0300
Subject: [PATCH 4/4] fix(global_var): change_name_global_var

---
 .../packages/netlify-cms-core/src/reducers/entryDraft.js      | 2 +-
 .../packages/netlify-cms-widget-code/src/CodePreview.js       | 2 +-
 .../netlify-cms-widget-colorstring/src/ColorPreview.js        | 2 +-
 .../packages/netlify-cms-widget-date/src/DatePreview.js       | 2 +-
 .../netlify-cms-widget-datetime/src/DateTimePreview.js        | 2 +-
 .../packages/netlify-cms-widget-file/src/FilePreview.js       | 4 ++--
 .../packages/netlify-cms-widget-image/src/ImagePreview.js     | 4 ++--
 .../netlify-cms-widget-markdown/src/MarkdownPreview.js        | 2 +-
 .../packages/netlify-cms-widget-number/src/NumberPreview.js   | 2 +-
 .../packages/netlify-cms-widget-object/src/ObjectPreview.js   | 2 +-
 .../netlify-cms-widget-relation/src/RelationPreview.js        | 2 +-
 .../packages/netlify-cms-widget-select/src/SelectPreview.js   | 2 +-
 .../packages/netlify-cms-widget-string/src/StringPreview.js   | 2 +-
 .../packages/netlify-cms-widget-text/src/TextPreview.js       | 2 +-
 14 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js b/netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js
index 5cf4e06..2d287df 100644
--- a/netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js
+++ b/netlify-cms@2/packages/netlify-cms-core/src/reducers/entryDraft.js
@@ -127,7 +127,7 @@ function entryDraftReducer(state = Map(), action) {
 
         const { field, value, metadata, entries, i18n } = action.payload;
         const name = field.get('name');
-        window.previewStyle = {
+        window.storefrontCmsFocusField = {
           name: field.get('name'),
           label: field.get('label'),
         }
diff --git a/netlify-cms@2/packages/netlify-cms-widget-code/src/CodePreview.js b/netlify-cms@2/packages/netlify-cms-widget-code/src/CodePreview.js
index 13a9a27..23e19fc 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-code/src/CodePreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-code/src/CodePreview.js
@@ -19,7 +19,7 @@ function CodePreview(props) {
     <WidgetPreviewContainer
       style={{
         borderStyle:
-          props?.field.get('name') === window?.previewStyle?.name && props?.field.get('label') === window?.previewStyle?.label
+          props?.field.get('name') === window?.storefrontCmsFocusField?.name && props?.field.get('label') === window?.storefrontCmsFocusField?.label
             ? 'dotted' : 'none'
       }}>
       <pre>
diff --git a/netlify-cms@2/packages/netlify-cms-widget-colorstring/src/ColorPreview.js b/netlify-cms@2/packages/netlify-cms-widget-colorstring/src/ColorPreview.js
index 6faaa25..43515e4 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-colorstring/src/ColorPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-colorstring/src/ColorPreview.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
 function ColorPreview({ value, field }) {
-  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>{value}</WidgetPreviewContainer>;
+  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.storefrontCmsFocusField?.name && field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }}>{value}</WidgetPreviewContainer>;
 }
 
 ColorPreview.propTypes = {
diff --git a/netlify-cms@2/packages/netlify-cms-widget-date/src/DatePreview.js b/netlify-cms@2/packages/netlify-cms-widget-date/src/DatePreview.js
index 35efbbb..a68edc6 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-date/src/DatePreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-date/src/DatePreview.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
 function DatePreview({ value, field }) {
-  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>{value ? value.toString() : null}</WidgetPreviewContainer>;
+  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.storefrontCmsFocusField?.name && field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }}>{value ? value.toString() : null}</WidgetPreviewContainer>;
 }
 
 DatePreview.propTypes = {
diff --git a/netlify-cms@2/packages/netlify-cms-widget-datetime/src/DateTimePreview.js b/netlify-cms@2/packages/netlify-cms-widget-datetime/src/DateTimePreview.js
index 35efbbb..a68edc6 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-datetime/src/DateTimePreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-datetime/src/DateTimePreview.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
 function DatePreview({ value, field }) {
-  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>{value ? value.toString() : null}</WidgetPreviewContainer>;
+  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.storefrontCmsFocusField?.name && field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }}>{value ? value.toString() : null}</WidgetPreviewContainer>;
 }
 
 DatePreview.propTypes = {
diff --git a/netlify-cms@2/packages/netlify-cms-widget-file/src/FilePreview.js b/netlify-cms@2/packages/netlify-cms-widget-file/src/FilePreview.js
index 3ebf796..2340630 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-file/src/FilePreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-file/src/FilePreview.js
@@ -25,14 +25,14 @@ function FileLinkList({ values, getAsset, field }) {
 function FileContent(props) {
   const { value, getAsset, field } = props;
   if (Array.isArray(value) || List.isList(value)) {
-    return <FileLinkList style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }} values={value} getAsset={getAsset} field={field} />;
+    return <FileLinkList style={{ borderStyle: field?.get('name') === window?.storefrontCmsFocusField?.name && field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }} values={value} getAsset={getAsset} field={field} />;
   }
   return <FileLink key={value} path={value} href={getAsset(value, field)} />;
 }
 
 function FilePreview(props) {
   return (
-    <WidgetPreviewContainer style={{ borderStyle: props?.field?.get('name') === window?.previewStyle?.name && props?.field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>
+    <WidgetPreviewContainer style={{ borderStyle: props?.field?.get('name') === window?.storefrontCmsFocusField?.name && props?.field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }}>
       {props.value ? <FileContent {...props} /> : null}
     </WidgetPreviewContainer>
   );
diff --git a/netlify-cms@2/packages/netlify-cms-widget-image/src/ImagePreview.js b/netlify-cms@2/packages/netlify-cms-widget-image/src/ImagePreview.js
index 1dd9982..c0042bc 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-image/src/ImagePreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-image/src/ImagePreview.js
@@ -11,7 +11,7 @@ const StyledImage = styled(({ src }) => <img src={src || ''} role="presentation"
 `;
 
 function StyledImageAsset({ getAsset, value, field }) {
-  return <StyledImage style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }} src={getAsset(value, field)} />;
+  return <StyledImage style={{ borderStyle: field?.get('name') === window?.storefrontCmsFocusField?.name && field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }} src={getAsset(value, field)} />;
 }
 
 function ImagePreviewContent(props) {
@@ -26,7 +26,7 @@ function ImagePreviewContent(props) {
 
 function ImagePreview(props) {
   return (
-    <WidgetPreviewContainer style={{ borderStyle: props?.field?.get('name') === window?.previewStyle?.name && props?.field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>
+    <WidgetPreviewContainer style={{ borderStyle: props?.field?.get('name') === window?.storefrontCmsFocusField?.name && props?.field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }}>
       {props.value ? <ImagePreviewContent {...props} /> : null}
     </WidgetPreviewContainer>
   );
diff --git a/netlify-cms@2/packages/netlify-cms-widget-markdown/src/MarkdownPreview.js b/netlify-cms@2/packages/netlify-cms-widget-markdown/src/MarkdownPreview.js
index 867788f..bfe23f6 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-markdown/src/MarkdownPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-markdown/src/MarkdownPreview.js
@@ -21,7 +21,7 @@ class MarkdownPreview extends React.Component {
     const toRender = field?.get('sanitize_preview', false) ? DOMPurify.sanitize(html) : html;
 
     return <WidgetPreviewContainer
-      style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}
+      style={{ borderStyle: field?.get('name') === window?.storefrontCmsFocusField?.name && field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }}
       dangerouslySetInnerHTML={{ __html: toRender }} />;
   }
 }
diff --git a/netlify-cms@2/packages/netlify-cms-widget-number/src/NumberPreview.js b/netlify-cms@2/packages/netlify-cms-widget-number/src/NumberPreview.js
index 0cb501b..930c2f0 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-number/src/NumberPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-number/src/NumberPreview.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
 function NumberPreview({ value, field }) {
-  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>{value}</WidgetPreviewContainer>;
+  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.storefrontCmsFocusField?.name && field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }}>{value}</WidgetPreviewContainer>;
 }
 
 NumberPreview.propTypes = {
diff --git a/netlify-cms@2/packages/netlify-cms-widget-object/src/ObjectPreview.js b/netlify-cms@2/packages/netlify-cms-widget-object/src/ObjectPreview.js
index cbfb12e..05007df 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-object/src/ObjectPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-object/src/ObjectPreview.js
@@ -5,7 +5,7 @@ import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 function ObjectPreview({ field }) {
   return (
     <WidgetPreviewContainer
-      style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}
+      style={{ borderStyle: field?.get('name') === window?.storefrontCmsFocusField?.name && field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }}
     >
       {(field && field.get('fields')) || field.get('field') || null}
     </WidgetPreviewContainer>
diff --git a/netlify-cms@2/packages/netlify-cms-widget-relation/src/RelationPreview.js b/netlify-cms@2/packages/netlify-cms-widget-relation/src/RelationPreview.js
index e2d21e4..0a6891b 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-relation/src/RelationPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-relation/src/RelationPreview.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
 function RelationPreview({ value, field }) {
-  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>{value}</WidgetPreviewContainer>;
+  return <WidgetPreviewContainer style={{ borderStyle: field?.get('name') === window?.storefrontCmsFocusField?.name && field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }}>{value}</WidgetPreviewContainer>;
 }
 
 RelationPreview.propTypes = {
diff --git a/netlify-cms@2/packages/netlify-cms-widget-select/src/SelectPreview.js b/netlify-cms@2/packages/netlify-cms-widget-select/src/SelectPreview.js
index 01adc37..2000a11 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-select/src/SelectPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-select/src/SelectPreview.js
@@ -16,7 +16,7 @@ function ListPreview({ values }) {
 
 function SelectPreview(props) {
   return (
-    <WidgetPreviewContainer style={{ borderStyle: props?.field?.get('name') === window?.previewStyle?.name && props?.field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}>
+    <WidgetPreviewContainer style={{ borderStyle: props?.field?.get('name') === window?.storefrontCmsFocusField?.name && props?.field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }}>
       {props.value && (List.isList(props.value) ? <ListPreview values={props.value} /> : props.value)}
       {!props.value && null}
     </WidgetPreviewContainer>
diff --git a/netlify-cms@2/packages/netlify-cms-widget-string/src/StringPreview.js b/netlify-cms@2/packages/netlify-cms-widget-string/src/StringPreview.js
index 0998b5e..bb64617 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-string/src/StringPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-string/src/StringPreview.js
@@ -4,7 +4,7 @@ import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
 function StringPreview({ value, field }) {
   return <WidgetPreviewContainer
-    style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}
+    style={{ borderStyle: field?.get('name') === window?.storefrontCmsFocusField?.name && field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }}
   >{value}</WidgetPreviewContainer>;
 }
 
diff --git a/netlify-cms@2/packages/netlify-cms-widget-text/src/TextPreview.js b/netlify-cms@2/packages/netlify-cms-widget-text/src/TextPreview.js
index 61098b8..deb06e4 100644
--- a/netlify-cms@2/packages/netlify-cms-widget-text/src/TextPreview.js
+++ b/netlify-cms@2/packages/netlify-cms-widget-text/src/TextPreview.js
@@ -4,7 +4,7 @@ import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
 function TextPreview({ value, field }) {
   return <WidgetPreviewContainer
-    style={{ borderStyle: field?.get('name') === window?.previewStyle?.name && field?.get('label') === window?.previewStyle?.label ? 'dotted' : 'none' }}
+    style={{ borderStyle: field?.get('name') === window?.storefrontCmsFocusField?.name && field?.get('label') === window?.storefrontCmsFocusField?.label ? 'dotted' : 'none' }}
   >{value}</WidgetPreviewContainer>;
 }