style editor input field

webapp/components/ContributionForm/ContributionForm.vue

@@ -23,7 +23,7 @@
           />
           <small class="smallTag">{{ form.contentLength }}/{{ contentMax }}</small>
         </no-ssr>
-        <ds-space margin-bottom="xxx-large" />
+        <ds-space margin-bottom="small" />
         <hc-categories-select
           model="categoryIds"
           @updateCategories="updateCategories"

webapp/components/Editor/ContextMenu.vue

@@ -8,6 +8,7 @@ export default {
   },
   methods: {
     displayContextMenu(target, content, type) {
+      const placement = type === 'link' ? 'right' : 'top-start'
       const trigger = type === 'link' ? 'click' : 'mouseenter'
       const showOnInit = type !== 'link'
 
@@ -22,7 +23,7 @@ export default {
         duration: [400, 200],
         inertia: true,
         interactive: true,
-        placement: 'top-start',
+        placement,
         showOnInit,
         theme: 'dark',
         trigger,
@@ -58,3 +59,33 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.tippy-tooltip.dark-theme {
+  background-color: $color-neutral-0;
+  padding: 0;
+  font-size: 1rem;
+  text-align: inherit;
+  color: $color-neutral-100;
+  border-radius: 5px;
+  .tippy-backdrop {
+    display: none;
+  }
+
+  .tippy-roundarrow {
+    fill: $color-neutral-0;
+  }
+  .tippy-popper[x-placement^='top'] & .tippy-arrow {
+    border-top-color: $color-neutral-0;
+  }
+  .tippy-popper[x-placement^='bottom'] & .tippy-arrow {
+    border-bottom-color: $color-neutral-0;
+  }
+  .tippy-popper[x-placement^='left'] & .tippy-arrow {
+    border-left-color: $color-neutral-0;
+  }
+  .tippy-popper[x-placement^='right'] & .tippy-arrow {
+    border-right-color: $color-neutral-0;
+  }
+}
+</style>

webapp/components/Editor/Editor.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
     <menu-bar :editor="editor" :toggleLinkInput="toggleLinkInput" />
-    <editor-content ref="editor" :editor="editor" />
+    <editor-content ref="editor" :editor="editor" class="ds-input editor-content" />
     <context-menu ref="contextMenu" />
     <suggestion-list
       ref="suggestions"
@@ -14,7 +14,6 @@
     <link-input
       v-show="isLinkInputActive"
       ref="linkInput"
-      :editor-command="editor.commands.link"
       :toggle-link-input="toggleLinkInput"
       :set-link-url="setLinkUrl"
     />
@@ -281,38 +280,6 @@ export default {
 </script>
 
 <style lang="scss">
-.tippy-tooltip.dark-theme {
-  background-color: $color-neutral-0;
-  padding: 0;
-  font-size: 1rem;
-  text-align: inherit;
-  color: $color-neutral-100;
-  border-radius: 5px;
-  .tippy-backdrop {
-    display: none;
-  }
-
-  .tippy-roundarrow {
-    fill: $color-neutral-0;
-  }
-  .tippy-popper[x-placement^='top'] & .tippy-arrow {
-    border-top-color: $color-neutral-0;
-  }
-  .tippy-popper[x-placement^='bottom'] & .tippy-arrow {
-    border-bottom-color: $color-neutral-0;
-  }
-  .tippy-popper[x-placement^='left'] & .tippy-arrow {
-    border-left-color: $color-neutral-0;
-  }
-  .tippy-popper[x-placement^='right'] & .tippy-arrow {
-    border-right-color: $color-neutral-0;
-  }
-}
-
-.ProseMirror:focus {
-  outline: none;
-}
-
 .editor p.is-empty:first-child::before {
   content: attr(data-empty-text);
   float: left;
@@ -332,74 +299,41 @@ li > p {
 }
 
 .editor {
-  .mention-suggestion {
+  min-height: 200px;
-    color: $color-primary;
+  display: flex;
-  }
+  flex-direction: column;
+
   .hashtag {
     color: $color-primary;
   }
   .hashtag-suggestion {
     color: $color-primary;
   }
-  &__floating-menu {
+  .mention-suggestion {
-    position: absolute;
+    color: $color-primary;
-    margin-top: -0.25rem;
-    margin-left: $space-xx-small;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.2s, visibility 0.2s;
-    background-color: #fff;
-
-    &.is-active {
-      opacity: 1;
-      visibility: visible;
-    }
   }
-  .menububble {
+}
-    position: absolute;
-    // margin-top: -0.5rem;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 200ms, visibility 200ms;
-    // transition-delay: 50ms;
-    transform: translate(-50%, -10%);
 
-    background-color: $background-color-inverse-soft;
+.editor-content {
-    // color: $text-color-inverse;
+  flex-grow: 1;
-    border-radius: $border-radius-base;
+  flex-basis: 100%;
-    padding: $space-xx-small;
+  margin-top: $space-small;
-    box-shadow: $box-shadow-large;
 
-    .ds-button {
+  &:focus-within {
-      color: $text-color-inverse;
+    border-color: $color-primary;
+    background-color: $color-neutral-100;
+  }
+}
 
-      &.ds-button-hover,
+.ProseMirror {
-      &:hover {
+  height: 100%;
-        color: $text-color-base;
-      }
-    }
 
-    &.is-active {
+  &:focus {
-      opacity: 1;
+    outline: none;
-      visibility: visible;
+  }
-    }
 
-    .tooltip-arrow {
+  p {
-      left: calc(50% - 10px);
+    margin: 0 0 $space-x-small;
-    }
-
-    input,
-    button {
-      border: none;
-      border-radius: 2px;
-    }
-
-    .ds-input {
-      height: auto;
-    }
-    input {
-      padding: $space-xx-small $space-x-small;
-    }
   }
 }
 </style>