@atlaskit/editor-plugin-selection-extension 3.3.1 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 3.4.0
+
+### Minor Changes
+
+- [#193092](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/193092)
+  [`1e21bb09f7d00`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1e21bb09f7d00) -
+  new api to insert ADF at the bottom of document
+
 ## 3.3.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/actions/insertAdfAtEndOfDoc.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertAdfAtEndOfDoc = void 0;
+var _model = require("@atlaskit/editor-prosemirror/model");
+var insertAdfAtEndOfDoc = exports.insertAdfAtEndOfDoc = function insertAdfAtEndOfDoc(nodeAdf) {
+  return function (state, dispatch) {
+    var tr = state.tr,
+      schema = state.schema;
+    try {
+      var docEnd = state.doc.content.size;
+      var modifiedNode = _model.Node.fromJSON(schema, nodeAdf);
+      modifiedNode.check();
+      tr.insert(tr.mapping.map(docEnd), modifiedNode).scrollIntoView();
+      dispatch(tr);
+      return {
+        status: 'success'
+      };
+    } catch (error) {
+      return {
+        status: 'failed'
+      };
+    }
+  };
+};

package/dist/cjs/pm-plugins/actions/replaceWithAdf.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.replaceWithAdf = void 0;
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _types = require("../../types");
+var _main = require("../main");
+var replaceWithAdf = exports.replaceWithAdf = function replaceWithAdf(nodeAdf) {
+  return function (state, dispatch) {
+    var _selectionExtensionPl;
+    var tr = state.tr,
+      schema = state.schema;
+
+    // we need to track if any changes were made since user click the toolbar button
+    var docChangedAfterClick = ((_selectionExtensionPl = _main.selectionExtensionPluginKey.getState(state)) === null || _selectionExtensionPl === void 0 ? void 0 : _selectionExtensionPl.docChangedAfterClick) || false;
+    tr.setMeta(_main.selectionExtensionPluginKey, {
+      type: _types.SelectionExtensionActionTypes.START_TRACK_CHANGES,
+      startTrackChanges: false // Reset the flag when starting to track changes
+    });
+    if (docChangedAfterClick) {
+      dispatch(tr);
+      return {
+        status: 'document-changed'
+      };
+    }
+    try {
+      var _selectionExtensionPl2, _selectionExtensionPl3;
+      var selectedNode = (_selectionExtensionPl2 = _main.selectionExtensionPluginKey.getState(state)) === null || _selectionExtensionPl2 === void 0 ? void 0 : _selectionExtensionPl2.selectedNode;
+      var nodePos = (_selectionExtensionPl3 = _main.selectionExtensionPluginKey.getState(state)) === null || _selectionExtensionPl3 === void 0 ? void 0 : _selectionExtensionPl3.nodePos;
+      if (!selectedNode || nodePos === undefined) {
+        throw new Error('No selected node or node position found');
+      }
+      var endPos = selectedNode.nodeSize + nodePos;
+      var modifiedNode = _model.Node.fromJSON(schema, nodeAdf);
+      modifiedNode.check();
+      tr.replaceWith(nodePos, endPos, modifiedNode).scrollIntoView();
+      dispatch(tr);
+      return {
+        status: 'success'
+      };
+    } catch (error) {
+      dispatch(tr);
+      return {
+        status: 'failed-to-replace'
+      };
+    }
+  };
+};

package/dist/cjs/selectionExtensionPlugin.js

@@ -11,6 +11,8 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = require("./pm-plugins/actions");
+var _insertAdfAtEndOfDoc2 = require("./pm-plugins/actions/insertAdfAtEndOfDoc");
+var _replaceWithAdf2 = require("./pm-plugins/actions/replaceWithAdf");
 var _main = require("./pm-plugins/main");
 var _utils = require("./pm-plugins/utils");
 var _types = require("./types");
@@ -64,6 +66,28 @@ var selectionExtensionPlugin = exports.selectionExtensionPlugin = function selec
           state = _editorViewRef$curren.state,
           dispatch = _editorViewRef$curren.dispatch;
         return (0, _actions.insertSmartLinks)(linkInsertionOptions, selectedNodeAdf)(state, dispatch);
+      },
+      replaceWithAdf: function replaceWithAdf(nodeAdf) {
+        if (!editorViewRef.current) {
+          return {
+            status: 'failed-to-replace'
+          };
+        }
+        var _editorViewRef$curren2 = editorViewRef.current,
+          state = _editorViewRef$curren2.state,
+          dispatch = _editorViewRef$curren2.dispatch;
+        return (0, _replaceWithAdf2.replaceWithAdf)(nodeAdf)(state, dispatch);
+      },
+      insertAdfAtEndOfDoc: function insertAdfAtEndOfDoc(nodeAdf) {
+        if (!editorViewRef.current) {
+          return {
+            status: 'failed'
+          };
+        }
+        var _editorViewRef$curren3 = editorViewRef.current,
+          state = _editorViewRef$curren3.state,
+          dispatch = _editorViewRef$curren3.dispatch;
+        return (0, _insertAdfAtEndOfDoc2.insertAdfAtEndOfDoc)(nodeAdf)(state, dispatch);
       }
     },
     contentComponent: function contentComponent(_ref4) {

package/dist/es2019/pm-plugins/actions/insertAdfAtEndOfDoc.js

@@ -0,0 +1,21 @@
+import { Node } from '@atlaskit/editor-prosemirror/model';
+export const insertAdfAtEndOfDoc = nodeAdf => (state, dispatch) => {
+  const {
+    tr,
+    schema
+  } = state;
+  try {
+    const docEnd = state.doc.content.size;
+    const modifiedNode = Node.fromJSON(schema, nodeAdf);
+    modifiedNode.check();
+    tr.insert(tr.mapping.map(docEnd), modifiedNode).scrollIntoView();
+    dispatch(tr);
+    return {
+      status: 'success'
+    };
+  } catch (error) {
+    return {
+      status: 'failed'
+    };
+  }
+};

package/dist/es2019/pm-plugins/actions/replaceWithAdf.js

@@ -0,0 +1,44 @@
+import { Node } from '@atlaskit/editor-prosemirror/model';
+import { SelectionExtensionActionTypes } from '../../types';
+import { selectionExtensionPluginKey } from '../main';
+export const replaceWithAdf = nodeAdf => (state, dispatch) => {
+  var _selectionExtensionPl;
+  const {
+    tr,
+    schema
+  } = state;
+
+  // we need to track if any changes were made since user click the toolbar button
+  const docChangedAfterClick = ((_selectionExtensionPl = selectionExtensionPluginKey.getState(state)) === null || _selectionExtensionPl === void 0 ? void 0 : _selectionExtensionPl.docChangedAfterClick) || false;
+  tr.setMeta(selectionExtensionPluginKey, {
+    type: SelectionExtensionActionTypes.START_TRACK_CHANGES,
+    startTrackChanges: false // Reset the flag when starting to track changes
+  });
+  if (docChangedAfterClick) {
+    dispatch(tr);
+    return {
+      status: 'document-changed'
+    };
+  }
+  try {
+    var _selectionExtensionPl2, _selectionExtensionPl3;
+    const selectedNode = (_selectionExtensionPl2 = selectionExtensionPluginKey.getState(state)) === null || _selectionExtensionPl2 === void 0 ? void 0 : _selectionExtensionPl2.selectedNode;
+    const nodePos = (_selectionExtensionPl3 = selectionExtensionPluginKey.getState(state)) === null || _selectionExtensionPl3 === void 0 ? void 0 : _selectionExtensionPl3.nodePos;
+    if (!selectedNode || nodePos === undefined) {
+      throw new Error('No selected node or node position found');
+    }
+    const endPos = selectedNode.nodeSize + nodePos;
+    const modifiedNode = Node.fromJSON(schema, nodeAdf);
+    modifiedNode.check();
+    tr.replaceWith(nodePos, endPos, modifiedNode).scrollIntoView();
+    dispatch(tr);
+    return {
+      status: 'success'
+    };
+  } catch (error) {
+    dispatch(tr);
+    return {
+      status: 'failed-to-replace'
+    };
+  }
+};

package/dist/es2019/selectionExtensionPlugin.js

@@ -3,6 +3,8 @@ import { selectionExtensionMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { insertSmartLinks } from './pm-plugins/actions';
+import { insertAdfAtEndOfDoc } from './pm-plugins/actions/insertAdfAtEndOfDoc';
+import { replaceWithAdf } from './pm-plugins/actions/replaceWithAdf';
 import { createPlugin, selectionExtensionPluginKey } from './pm-plugins/main';
 import { getSelectionInfo } from './pm-plugins/utils';
 import { SelectionExtensionActionTypes } from './types';
@@ -56,6 +58,30 @@ export const selectionExtensionPlugin = ({
           dispatch
         } = editorViewRef.current;
         return insertSmartLinks(linkInsertionOptions, selectedNodeAdf)(state, dispatch);
+      },
+      replaceWithAdf: nodeAdf => {
+        if (!editorViewRef.current) {
+          return {
+            status: 'failed-to-replace'
+          };
+        }
+        const {
+          state,
+          dispatch
+        } = editorViewRef.current;
+        return replaceWithAdf(nodeAdf)(state, dispatch);
+      },
+      insertAdfAtEndOfDoc: nodeAdf => {
+        if (!editorViewRef.current) {
+          return {
+            status: 'failed'
+          };
+        }
+        const {
+          state,
+          dispatch
+        } = editorViewRef.current;
+        return insertAdfAtEndOfDoc(nodeAdf)(state, dispatch);
       }
     },
     contentComponent: ({

package/dist/esm/pm-plugins/actions/insertAdfAtEndOfDoc.js

@@ -0,0 +1,21 @@
+import { Node } from '@atlaskit/editor-prosemirror/model';
+export var insertAdfAtEndOfDoc = function insertAdfAtEndOfDoc(nodeAdf) {
+  return function (state, dispatch) {
+    var tr = state.tr,
+      schema = state.schema;
+    try {
+      var docEnd = state.doc.content.size;
+      var modifiedNode = Node.fromJSON(schema, nodeAdf);
+      modifiedNode.check();
+      tr.insert(tr.mapping.map(docEnd), modifiedNode).scrollIntoView();
+      dispatch(tr);
+      return {
+        status: 'success'
+      };
+    } catch (error) {
+      return {
+        status: 'failed'
+      };
+    }
+  };
+};

package/dist/esm/pm-plugins/actions/replaceWithAdf.js

@@ -0,0 +1,44 @@
+import { Node } from '@atlaskit/editor-prosemirror/model';
+import { SelectionExtensionActionTypes } from '../../types';
+import { selectionExtensionPluginKey } from '../main';
+export var replaceWithAdf = function replaceWithAdf(nodeAdf) {
+  return function (state, dispatch) {
+    var _selectionExtensionPl;
+    var tr = state.tr,
+      schema = state.schema;
+
+    // we need to track if any changes were made since user click the toolbar button
+    var docChangedAfterClick = ((_selectionExtensionPl = selectionExtensionPluginKey.getState(state)) === null || _selectionExtensionPl === void 0 ? void 0 : _selectionExtensionPl.docChangedAfterClick) || false;
+    tr.setMeta(selectionExtensionPluginKey, {
+      type: SelectionExtensionActionTypes.START_TRACK_CHANGES,
+      startTrackChanges: false // Reset the flag when starting to track changes
+    });
+    if (docChangedAfterClick) {
+      dispatch(tr);
+      return {
+        status: 'document-changed'
+      };
+    }
+    try {
+      var _selectionExtensionPl2, _selectionExtensionPl3;
+      var selectedNode = (_selectionExtensionPl2 = selectionExtensionPluginKey.getState(state)) === null || _selectionExtensionPl2 === void 0 ? void 0 : _selectionExtensionPl2.selectedNode;
+      var nodePos = (_selectionExtensionPl3 = selectionExtensionPluginKey.getState(state)) === null || _selectionExtensionPl3 === void 0 ? void 0 : _selectionExtensionPl3.nodePos;
+      if (!selectedNode || nodePos === undefined) {
+        throw new Error('No selected node or node position found');
+      }
+      var endPos = selectedNode.nodeSize + nodePos;
+      var modifiedNode = Node.fromJSON(schema, nodeAdf);
+      modifiedNode.check();
+      tr.replaceWith(nodePos, endPos, modifiedNode).scrollIntoView();
+      dispatch(tr);
+      return {
+        status: 'success'
+      };
+    } catch (error) {
+      dispatch(tr);
+      return {
+        status: 'failed-to-replace'
+      };
+    }
+  };
+};

package/dist/esm/selectionExtensionPlugin.js

@@ -4,6 +4,8 @@ import { selectionExtensionMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { insertSmartLinks as _insertSmartLinks } from './pm-plugins/actions';
+import { insertAdfAtEndOfDoc as _insertAdfAtEndOfDoc } from './pm-plugins/actions/insertAdfAtEndOfDoc';
+import { replaceWithAdf as _replaceWithAdf } from './pm-plugins/actions/replaceWithAdf';
 import { createPlugin, selectionExtensionPluginKey } from './pm-plugins/main';
 import { getSelectionInfo } from './pm-plugins/utils';
 import { SelectionExtensionActionTypes } from './types';
@@ -57,6 +59,28 @@ export var selectionExtensionPlugin = function selectionExtensionPlugin(_ref) {
           state = _editorViewRef$curren.state,
           dispatch = _editorViewRef$curren.dispatch;
         return _insertSmartLinks(linkInsertionOptions, selectedNodeAdf)(state, dispatch);
+      },
+      replaceWithAdf: function replaceWithAdf(nodeAdf) {
+        if (!editorViewRef.current) {
+          return {
+            status: 'failed-to-replace'
+          };
+        }
+        var _editorViewRef$curren2 = editorViewRef.current,
+          state = _editorViewRef$curren2.state,
+          dispatch = _editorViewRef$curren2.dispatch;
+        return _replaceWithAdf(nodeAdf)(state, dispatch);
+      },
+      insertAdfAtEndOfDoc: function insertAdfAtEndOfDoc(nodeAdf) {
+        if (!editorViewRef.current) {
+          return {
+            status: 'failed'
+          };
+        }
+        var _editorViewRef$curren3 = editorViewRef.current,
+          state = _editorViewRef$curren3.state,
+          dispatch = _editorViewRef$curren3.dispatch;
+        return _insertAdfAtEndOfDoc(nodeAdf)(state, dispatch);
       }
     },
     contentComponent: function contentComponent(_ref4) {

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { selectionExtensionPlugin } from './selectionExtensionPlugin';
 export type { SelectionExtensionPlugin } from './selectionExtensionPluginType';
-export type { SelectionExtensionComponentProps, SelectionExtensionPluginOptions, SelectionExtension, LinkInsertionOption, SelectionExtensionPluginState, SelectionExtensionSelectionInfo, DynamicSelectionExtension, } from './types';
+export type { SelectionExtensionComponentProps, SelectionExtensionPluginOptions, SelectionExtension, LinkInsertionOption, SelectionExtensionPluginState, SelectionExtensionSelectionInfo, DynamicSelectionExtension, ReplaceWithAdfResult, InsertAdfAtEndOfDocResult, } from './types';

package/dist/types/pm-plugins/actions/insertAdfAtEndOfDoc.d.ts

@@ -0,0 +1,5 @@
+import { type ADFEntity } from '@atlaskit/adf-utils/types';
+import type { CommandDispatch } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type InsertAdfAtEndOfDocResult } from '../../types';
+export declare const insertAdfAtEndOfDoc: (nodeAdf: ADFEntity) => (state: EditorState, dispatch: CommandDispatch) => InsertAdfAtEndOfDocResult;

package/dist/types/pm-plugins/actions/replaceWithAdf.d.ts

@@ -0,0 +1,5 @@
+import { type ADFEntity } from '@atlaskit/adf-utils/types';
+import type { CommandDispatch } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type ReplaceWithAdfResult } from '../../types';
+export declare const replaceWithAdf: (nodeAdf: ADFEntity) => (state: EditorState, dispatch: CommandDispatch) => ReplaceWithAdfResult;

package/dist/types/selectionExtensionPluginType.d.ts

@@ -3,7 +3,7 @@ import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
-import type { DynamicSelectionExtension, LinkInsertionOption, SelectionExtension, SelectionExtensionPluginOptions, SelectionExtensionPluginState, SelectionExtensionSelectionInfo } from './types';
+import type { DynamicSelectionExtension, InsertAdfAtEndOfDocResult, LinkInsertionOption, ReplaceWithAdfResult, SelectionExtension, SelectionExtensionPluginOptions, SelectionExtensionPluginState, SelectionExtensionSelectionInfo } from './types';
 export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
     pluginConfiguration: SelectionExtensionPluginOptions | undefined;
     dependencies: [
@@ -24,5 +24,7 @@ export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
             status: 'success' | 'error';
             message?: string;
         };
+        replaceWithAdf: (nodeAdf: ADFEntity) => ReplaceWithAdfResult;
+        insertAdfAtEndOfDoc: (nodeAdf: ADFEntity) => InsertAdfAtEndOfDocResult;
     };
 }>;

package/dist/types/types/index.d.ts

@@ -110,4 +110,11 @@ export type SelectionExtensionPluginState = {
     startTrackChanges?: boolean;
     docChangedAfterClick?: boolean;
 };
+export type ReplaceWithAdfStatus = 'success' | 'document-changed' | 'failed-to-replace';
+export type ReplaceWithAdfResult = {
+    status: ReplaceWithAdfStatus;
+};
+export type InsertAdfAtEndOfDocResult = {
+    status: 'success' | 'failed';
+};
 export {};

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1,3 @@
 export { selectionExtensionPlugin } from './selectionExtensionPlugin';
 export type { SelectionExtensionPlugin } from './selectionExtensionPluginType';
-export type { SelectionExtensionComponentProps, SelectionExtensionPluginOptions, SelectionExtension, LinkInsertionOption, SelectionExtensionPluginState, SelectionExtensionSelectionInfo, DynamicSelectionExtension, } from './types';
+export type { SelectionExtensionComponentProps, SelectionExtensionPluginOptions, SelectionExtension, LinkInsertionOption, SelectionExtensionPluginState, SelectionExtensionSelectionInfo, DynamicSelectionExtension, ReplaceWithAdfResult, InsertAdfAtEndOfDocResult, } from './types';

package/dist/types-ts4.5/pm-plugins/actions/insertAdfAtEndOfDoc.d.ts

@@ -0,0 +1,5 @@
+import { type ADFEntity } from '@atlaskit/adf-utils/types';
+import type { CommandDispatch } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type InsertAdfAtEndOfDocResult } from '../../types';
+export declare const insertAdfAtEndOfDoc: (nodeAdf: ADFEntity) => (state: EditorState, dispatch: CommandDispatch) => InsertAdfAtEndOfDocResult;

package/dist/types-ts4.5/pm-plugins/actions/replaceWithAdf.d.ts

@@ -0,0 +1,5 @@
+import { type ADFEntity } from '@atlaskit/adf-utils/types';
+import type { CommandDispatch } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type ReplaceWithAdfResult } from '../../types';
+export declare const replaceWithAdf: (nodeAdf: ADFEntity) => (state: EditorState, dispatch: CommandDispatch) => ReplaceWithAdfResult;

package/dist/types-ts4.5/selectionExtensionPluginType.d.ts

@@ -3,7 +3,7 @@ import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
-import type { DynamicSelectionExtension, LinkInsertionOption, SelectionExtension, SelectionExtensionPluginOptions, SelectionExtensionPluginState, SelectionExtensionSelectionInfo } from './types';
+import type { DynamicSelectionExtension, InsertAdfAtEndOfDocResult, LinkInsertionOption, ReplaceWithAdfResult, SelectionExtension, SelectionExtensionPluginOptions, SelectionExtensionPluginState, SelectionExtensionSelectionInfo } from './types';
 export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
     pluginConfiguration: SelectionExtensionPluginOptions | undefined;
     dependencies: [
@@ -24,5 +24,7 @@ export type SelectionExtensionPlugin = NextEditorPlugin<'selectionExtension', {
             status: 'success' | 'error';
             message?: string;
         };
+        replaceWithAdf: (nodeAdf: ADFEntity) => ReplaceWithAdfResult;
+        insertAdfAtEndOfDoc: (nodeAdf: ADFEntity) => InsertAdfAtEndOfDocResult;
     };
 }>;

package/dist/types-ts4.5/types/index.d.ts

@@ -110,4 +110,11 @@ export type SelectionExtensionPluginState = {
     startTrackChanges?: boolean;
     docChangedAfterClick?: boolean;
 };
+export type ReplaceWithAdfStatus = 'success' | 'document-changed' | 'failed-to-replace';
+export type ReplaceWithAdfResult = {
+    status: ReplaceWithAdfStatus;
+};
+export type InsertAdfAtEndOfDocResult = {
+    status: 'success' | 'failed';
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-extension",
-	"version": "3.3.1",
+	"version": "3.4.0",
 	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,10 +42,10 @@
 		"@atlaskit/editor-plugin-selection-toolbar": "^4.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^27.7.0",
+		"@atlaskit/icon": "^27.8.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.10.0",
-		"@atlaskit/tmp-editor-statsig": "^9.16.0",
+		"@atlaskit/primitives": "^14.11.0",
+		"@atlaskit/tmp-editor-statsig": "^9.17.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
 		"react-intl-next": "npm:react-intl@^5.18.1",