Ellipsize url to single line with text-overflow (#2082)

Co-authored-by: jbrundige <[email protected]>
Co-authored-by: Raine Revere <[email protected]>

src/App.css

@@ -546,7 +546,7 @@ a.text-link {
 
 .thought,
 .thought-annotation {
-  max-width: calc(100% - 1em); /* expand click area. offset content padding to prevent line break */
+  max-width: 100%;
   /* do not set font-weight or it will override =heading style. */
   margin-top: 0;
   display: inline-block;
@@ -571,6 +571,9 @@ This prevents table cols being rendered as multiline content, which causes inaac
 
 .editable-annotation {
   display: inline-block;
+  width: 100%;
+  padding: 0 0.333em;
+  box-sizing: border-box;
 }
 
 .thought-annotation a {
@@ -581,7 +584,7 @@ This prevents table cols being rendered as multiline content, which causes inaac
 .editable-annotation-text,
 .thought-annotation .breadcrumbs {
   visibility: hidden;
-  /*color: tomato;*/
+  /* color: tomato; */
 }
 
 .subthought-highlight {
@@ -606,15 +609,19 @@ This prevents table cols being rendered as multiline content, which causes inaac
   top: 0.3em;
 }
 
-.child .editable,
-.editable-annotation-text {
+.child .editable {
   /* Add some padding-right for increased click area. */
   /* Add some padding-left otherwise caret is invisible on empty elements. */
   /* Cannot use padding-top on editable, as clicking it causes the selection to go to the beginning. */
   /* Cannot use padding-bottom on editable, as clicking it causes the selection to go to the end. */
   padding: 0 1em 0 0.333em;
+  box-sizing: border-box;
+}
+
+.child .editable,
+.editable-annotation-text {
   /* slide editable up so that it overlaps with the previous thought, ensuring there is no dead click zone from clip-path */
-  margin: -0.5px -1em 0 calc(1em - 18px);
+  margin: -0.5px 0 0 calc(1em - 18px);
   /* create stacking order to position above thought-annotation so that function background color does not mask thought */
   position: relative;
   /* Prevent the selection from being incorrectly set to the beginning of the thought when the top edge is clicked, and the end of the thought when the bottom edge is clicked. Instead, we want the usual behavior of the selection being placed near the click. */
@@ -651,11 +658,6 @@ This prevents table cols being rendered as multiline content, which causes inaac
   /* A small amount of margin-bottom may make multiline thoughts feel less crunched. However, this must be prevented or overridden when the thought has a note, otherwise there will be too much space in between the thought and the note. */
 }
 
-/* padding-top */
-.editable-annotation.multiline.multiline.multiline.multiline {
-  margin-top: calc(-0.12em + 0.33em);
-}
-
 .safari .multiline.multiline.multiline.multiline {
   padding-top: 0.3em;
 }
@@ -1813,6 +1815,38 @@ h1 .num-contexts {
 .popup .modal-actions.modal-actions-stack a.button {
   margin-bottom: 0.5em;
 }
+
+.single-line .thought .editable,
+.single-line .thought-annotation .editable-annotation-text {
+  display: inline-block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.single-line .thought {
+  max-width: calc(100% - 1em);
+}
+
+.single-line .thought-annotation {
+  /* override editable-annotation's single line to have same width with .editable. 100% - 1em since .editable has padding-right 1em */
+  max-width: calc(100% - 2em);
+}
+
+/* Fix a tag position after overflow:hidden applined on span tag. */
+.single-line .thought-annotation .editable-annotation-text + a {
+  position: absolute;
+}
+.single-line .thought-annotation .editable-annotation-text + a + .superscript-container {
+  position: absolute;
+  right: -22px;
+}
+
+.multiline.multiline.multiline.multiline.editable-annotation {
+  padding-right: 1em;
+}
+
 @media screen and (min-width: 480px) {
   .popup .modal-actions.modal-actions-stack {
     display: flex;

src/components/Editable.tsx

@@ -44,7 +44,6 @@ import storageModel from '../stores/storageModel'
 import suppressFocusStore from '../stores/suppressFocus'
 import addEmojiSpace from '../util/addEmojiSpace'
 import ellipsize from '../util/ellipsize'
-import ellipsizeUrl from '../util/ellipsizeUrl'
 import equalPath from '../util/equalPath'
 import head from '../util/head'
 import isDivider from '../util/isDivider'
@@ -581,7 +580,7 @@ const Editable = ({
               ? value
               : childrenLabel
                 ? childrenLabel.value
-                : ellipsizeUrl(value)
+                : value
       }
       placeholder={placeholder}
       // stop propagation to prevent default content onClick (which removes the cursor)

src/components/Thought.tsx

@@ -38,6 +38,7 @@ import isAttribute from '../util/isAttribute'
 import isDescendantPath from '../util/isDescendantPath'
 import isDivider from '../util/isDivider'
 import isRoot from '../util/isRoot'
+import isURL from '../util/isURL'
 import parentOf from '../util/parentOf'
 import publishMode from '../util/publishMode'
 import safeRefMerge from '../util/safeRefMerge'
@@ -409,7 +410,10 @@ const ThoughtContainer = ({
         ) : null}
 
         <div
-          className='thought-container'
+          className={classNames({
+            'thought-container': true,
+            'single-line': !isEditing && isURL(value),
+          })}
           style={{
             // ensure that ThoughtAnnotation is positioned correctly
             position: 'relative',

src/components/ThoughtAnnotation.tsx

@@ -16,7 +16,6 @@ import getContexts from '../selectors/getContexts'
 import getThoughtById from '../selectors/getThoughtById'
 import getUserSetting from '../selectors/getUserSetting'
 import editingValueStore from '../stores/editingValue'
-import ellipsizeUrl from '../util/ellipsizeUrl'
 import equalPath from '../util/equalPath'
 import fastClick from '../util/fastClick'
 import hashPath from '../util/hashPath'
@@ -235,7 +234,7 @@ const ThoughtAnnotation = React.memo(
     const textMarkup = useSelector(state => {
       const labelId = findDescendant(state, head(simplePath), '=label')
       const labelChild = anyChild(state, labelId || undefined)
-      return isEditing ? liveValueIfEditing ?? value : labelChild ? labelChild.value : ellipsizeUrl(value)
+      return isEditing ? liveValueIfEditing ?? value : labelChild ? labelChild.value : value
     })
 
     return (
@@ -247,15 +246,7 @@ const ThoughtAnnotation = React.memo(
             // disable intrathought linking until add, edit, delete, and expansion can be implemented
             // 'subthought-highlight': isEditing && focusOffset != null && subthought.contexts.length > (subthought.text === value ? 1 : 0) && subthoughtUnderSelection() && subthought.text === subthoughtUnderSelection().text
           })}
-          style={{
-            ...styleAnnotation,
-            // Extend background color to the right to match .editable padding-left.
-            // Match .editable-annotation-text padding-left.
-            // Add 0.5em to account for the superscript.
-            // TODO: Add space for dynamic superscript. This is currently only correct for single digit superscript.
-            marginRight: showSuperscript ? '-0.833em' : '-0.333em',
-            paddingRight: showSuperscript ? '0.833em' : '0.333em',
-          }}
+          style={styleAnnotation}
         >
           <span className='editable-annotation-text' style={style} dangerouslySetInnerHTML={{ __html: textMarkup }} />
           {