displaying extra websites as urls

app/scripts/views/details/details-fields.js

@@ -240,18 +240,30 @@ function createDetailsFields(detailsView) {
                 }
             } else {
                 const isUrl = field.startsWith(ExtraUrlFieldName);
-                fieldViews.push(
+                if (isUrl) {
-                    new FieldViewCustom({
+                    fieldViews.push(
-                        name: '$' + field,
+                        new FieldViewUrl({
-                        title: isUrl ? StringFormat.capFirst(Locale.website) : field,
+                            name: '$' + field,
-                        multiline: !isUrl,
+                            title: StringFormat.capFirst(Locale.website),
-                        titleEditable: !isUrl,
+                            value() {
-                        value() {
+                                return model.fields[field];
-                            return model.fields[field];
+                            },
-                        },
+                            sequence: `{S:${field}}`
-                        sequence: `{S:${field}}`
+                        })
-                    })
+                    );
-                );
+                } else {
+                    fieldViews.push(
+                        new FieldViewCustom({
+                            name: '$' + field,
+                            title: field,
+                            multiline: true,
+                            value() {
+                                return model.fields[field];
+                            },
+                            sequence: `{S:${field}}`
+                        })
+                    );
+                }
             }
         }
     }
@@ -259,4 +271,31 @@ function createDetailsFields(detailsView) {
     return { fieldViews, fieldViewsAside };
 }
 
-export { createDetailsFields };
+function createNewCustomField(newFieldTitle, newFieldOptions, model) {
+    const isUrl = newFieldTitle.startsWith(ExtraUrlFieldName);
+
+    if (isUrl) {
+        return new FieldViewUrl(
+            {
+                name: '$' + newFieldTitle,
+                title: StringFormat.capFirst(Locale.website),
+                newField: newFieldTitle,
+                value: () => model.fields[newFieldTitle]
+            },
+            newFieldOptions
+        );
+    } else {
+        return new FieldViewCustom(
+            {
+                name: '$' + newFieldTitle,
+                title: newFieldTitle,
+                newField: newFieldTitle,
+                multiline: true,
+                value: () => ''
+            },
+            newFieldOptions
+        );
+    }
+}
+
+export { createDetailsFields, createNewCustomField };

app/scripts/views/details/details-view.js

@@ -22,7 +22,7 @@ import { DetailsAutoTypeView } from 'views/details/details-auto-type-view';
 import { DetailsHistoryView } from 'views/details/details-history-view';
 import { DetailsIssuesView } from 'views/details/details-issues-view';
 import { DropdownView } from 'views/dropdown-view';
-import { createDetailsFields } from 'views/details/details-fields';
+import { createDetailsFields, createNewCustomField } from 'views/details/details-fields';
 import { FieldViewCustom } from 'views/fields/field-view-custom';
 import { IconSelectView } from 'views/icon-select-view';
 import { isEqual } from 'util/fn';
@@ -30,8 +30,6 @@ import template from 'templates/details/details.hbs';
 import emptyTemplate from 'templates/details/details-empty.hbs';
 import groupTemplate from 'templates/details/details-group.hbs';
 import { Launcher } from 'comp/launcher';
-import { ExtraUrlFieldName } from 'models/entry-model';
-import { StringFormat } from '../../util/formatting/string-format';
 
 class DetailsView extends View {
     parent = '.app__details';
@@ -212,21 +210,12 @@ class DetailsView extends View {
             }
         }
 
-        const isUrl = newFieldTitle.startsWith(ExtraUrlFieldName);
+        const fieldView = createNewCustomField(
-        const fieldView = new FieldViewCustom(
+            newFieldTitle,
-            {
-                name: '$' + newFieldTitle,
-                title: isUrl ? StringFormat.capFirst(Locale.website) : newFieldTitle,
-                newField: newFieldTitle,
-                multiline: !isUrl,
-                titleEditable: !isUrl,
-                value() {
-                    return '';
-                }
-            },
             {
                 parent: this.$el.find('.details__body-fields')[0]
-            }
+            },
+            this.model
         );
 
         fieldView.on('change', this.fieldChanged.bind(this));

app/scripts/views/fields/field-view-custom.js

@@ -38,7 +38,7 @@ class FieldViewCustom extends FieldViewText {
     endEdit(newVal, extra) {
         this.$el.removeClass('details__field--can-edit-title');
         extra = { ...extra };
-        if (this.model.titleChanged || this.model.newField) {
+        if (this.model.titleChanged) {
             extra.newField = this.model.title;
         }
         if (!this.editing) {
@@ -97,9 +97,9 @@ class FieldViewCustom extends FieldViewText {
     fieldLabelClick(e) {
         e.stopImmediatePropagation();
 
-        if (this.model.titleEditable && this.model.newField) {
+        if (this.model.newField) {
             this.startEditTitle(true);
-        } else if (this.model.titleEditable && this.editing) {
+        } else if (this.editing) {
             this.startEditTitle();
         } else {
             super.fieldLabelClick.call(this, e);

app/scripts/views/fields/field-view.js

@@ -188,6 +188,10 @@ class FieldView extends View {
         }
         const protectedEqual =
             (newVal && newVal.isProtected) === (this.value && this.value.isProtected);
+        if (!extra?.newField && this.model.newField) {
+            extra ??= {};
+            extra.newField = this.model.newField;
+        }
         const nameChanged = extra && extra.newField;
         let arg;
         if (newVal !== undefined && (!textEqual || !protectedEqual || nameChanged)) {