UBER-802: support underline formatting (#3636)

Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>
2024-12-23 11:31:57 +03:00 · 2023-08-25 18:16:46 +05:00 · 2023-08-25 18:16:46 +05:00 · 9a161ed71b
commit 9a161ed71b
parent 70837d9f9e
8 changed files with 51 additions and 4 deletions
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@ -250,6 +250,7 @@ specifiers:
  '@tiptap/extension-task-item': ^2.0.3
  '@tiptap/extension-task-list': ^2.0.3
  '@tiptap/extension-typography': ^2.0.3
+  '@tiptap/extension-underline': ^2.0.4
  '@tiptap/html': ^2.0.3
  '@tiptap/pm': ^2.0.3
  '@tiptap/prosemirror-tables': ^1.1.4
@ -647,6 +648,7 @@ dependencies:
  '@tiptap/extension-task-item': 2.0.3_fc2f730f0ef238c57ef10dc1abce4607
  '@tiptap/extension-task-list': 2.0.3_@tiptap+core@2.0.3
  '@tiptap/extension-typography': 2.0.3_@tiptap+core@2.0.3
+  '@tiptap/extension-underline': 2.1.7_@tiptap+core@2.0.3
  '@tiptap/html': 2.1.6_fc2f730f0ef238c57ef10dc1abce4607
  '@tiptap/pm': 2.0.3_@tiptap+core@2.0.3
  '@tiptap/prosemirror-tables': 1.1.4_a7abb371f17d2bc77abec7bc53398db5
@ -6591,6 +6593,14 @@ packages:
      '@tiptap/core': 2.0.3_@tiptap+pm@2.0.3
    dev: false

+  /@tiptap/extension-underline/2.1.7_@tiptap+core@2.0.3:
+    resolution: {integrity: sha512-mL95afyEJvg+C2yrTVn7QltfyE9ja1+94+OUkRBbB8PN3N6HvfSL4K/QSqecOLQ38bSQm/6ZGPkBLDkDGhGPdw==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0
+    dependencies:
+      '@tiptap/core': 2.0.3_@tiptap+pm@2.0.3
+    dev: false
+
  /@tiptap/html/2.1.6_fc2f730f0ef238c57ef10dc1abce4607:
    resolution: {integrity: sha512-/7PcivMMty2Xw8oNEOqRi1W4WlD9afrmA3vlgNYGnO+knmwG5VzyhYV+oDlKAWvYqfrPxtfGnhNEQywzyHKbBg==}
    peerDependencies:
@ -22078,7 +22088,7 @@ packages:
    dev: false

  file:projects/text-editor.tgz_1e646fd62a3adc9d0b41f256dafe3d38:
-    resolution: {integrity: sha512-Omwv7uuoSX4eicxv4jQUEegyhpg0QWeFuCr+DxCR3j7yfsFfF5mUCleLcX7LWh+M9EXbdldBdcHE3OriJg5ECQ==, tarball: file:projects/text-editor.tgz}
+    resolution: {integrity: sha512-mZ+9T1R2k5X+qEj4fXliwEVDzmBbGEggRReeFSTver56sVbuZQrbnAeeHEa1kMX6rD/O5kKTn8Bwk+S97y3jkw==, tarball: file:projects/text-editor.tgz}
    id: file:projects/text-editor.tgz
    name: '@rush-temp/text-editor'
    version: 0.0.0
@ -22102,6 +22112,7 @@ packages:
      '@tiptap/extension-task-item': 2.0.3_fc2f730f0ef238c57ef10dc1abce4607
      '@tiptap/extension-task-list': 2.0.3_@tiptap+core@2.0.3
      '@tiptap/extension-typography': 2.0.3_@tiptap+core@2.0.3
+      '@tiptap/extension-underline': 2.1.7_@tiptap+core@2.0.3
      '@tiptap/pm': 2.0.3_@tiptap+core@2.0.3
      '@tiptap/prosemirror-tables': 1.1.4_a7abb371f17d2bc77abec7bc53398db5
      '@tiptap/starter-kit': 2.0.3_@tiptap+pm@2.0.3
--- a/packages/text-editor/package.json
+++ b/packages/text-editor/package.json
@ -77,6 +77,7 @@
    "@tiptap/extension-table-header": "^2.0.3",
    "@tiptap/extension-table-row": "^2.0.3",
    "@tiptap/extension-code": "^2.0.3",
-    "@tiptap/extension-bubble-menu": "^2.0.4"
+    "@tiptap/extension-bubble-menu": "^2.0.4",
+    "@tiptap/extension-underline": "^2.0.4"
  }
 }
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@ -47,6 +47,7 @@
  import RILink from './icons/RILink.svelte'
  import RIMention from './icons/RIMention.svelte'
  import RIStrikethrough from './icons/RIStrikethrough.svelte'
+  import Underline from './icons/Underline.svelte'
  import Send from './icons/Send.svelte'

  const dispatch = createEventDispatcher()
@ -222,6 +223,14 @@
      showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
      on:click={getToggler(textEditor.toggleStrike)}
    />
+    <Button
+      icon={Underline}
+      kind={'ghost'}
+      size={'small'}
+      selected={activeModes.has('underline')}
+      showTooltip={{ label: textEditorPlugin.string.Underlined }}
+      on:click={getToggler(textEditor.toggleUnderline)}
+    />
    <Button
      icon={RILink}
      kind={'ghost'}
--- a/packages/text-editor/src/components/StyledTextEditor.svelte
+++ b/packages/text-editor/src/components/StyledTextEditor.svelte
@ -42,7 +42,7 @@
  import RIItalic from './icons/RIItalic.svelte'
  import RILink from './icons/RILink.svelte'
  import RIStrikethrough from './icons/RIStrikethrough.svelte'
-  // import RIMention from './icons/RIMention.svelte'
+  import Underline from './icons/Underline.svelte'
  import { AnyExtension } from '@tiptap/core'
  import AddColAfter from './icons/table/AddColAfter.svelte'
  import AddColBefore from './icons/table/AddColBefore.svelte'
@ -435,6 +435,13 @@
      showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
      on:click={getToggler(textEditor.toggleStrike)}
    />
+    <StyleButton
+      icon={Underline}
+      size={formatButtonSize}
+      selected={activeModes.has('underline')}
+      showTooltip={{ label: textEditorPlugin.string.Underlined }}
+      on:click={getToggler(textEditor.toggleUnderline)}
+    />
    <StyleButton
      icon={RILink}
      size={formatButtonSize}
--- a/packages/text-editor/src/components/TextEditor.svelte
+++ b/packages/text-editor/src/components/TextEditor.svelte
@ -83,6 +83,9 @@
  export function toggleStrike () {
    editor.commands.toggleStrike()
  }
+  export function toggleUnderline () {
+    editor.commands.toggleUnderline()
+  }
  export function getLink () {
    return editor.getAttributes('link').href
  }
--- a/packages/text-editor/src/components/extensions.ts
+++ b/packages/text-editor/src/components/extensions.ts
@ -9,6 +9,7 @@ import TaskList from '@tiptap/extension-task-list'
 import { Level } from '@tiptap/extension-heading'
 import Highlight from '@tiptap/extension-highlight'
 import StarterKit from '@tiptap/starter-kit'
+import Underline from '@tiptap/extension-underline'

 import Gapcursor from '@tiptap/extension-gapcursor'

@ -65,6 +66,7 @@ export const defaultExtensions: AnyExtension[] = [
  Highlight.configure({
    multicolor: false
  }),
+  Underline.configure({}),
  Typography.configure({}),
  Gapcursor,
  Link.configure({
--- a/packages/text-editor/src/components/icons/Underline.svelte
+++ b/packages/text-editor/src/components/icons/Underline.svelte
@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path
+    d="M10 17V8C10 7.44772 9.55228 7 9 7C8.44772 7 8 7.44772 8 8V17C8 21.4183 11.5817 25 16 25H17V24.9381C20.9463 24.446 24 21.0796 24 17V8C24 7.44772 23.5523 7 23 7C22.4477 7 22 7.44772 22 8V17C22 20.3137 19.3137 23 16 23C12.6863 23 10 20.3137 10 17Z"
+  />
+  <path
+    d="M8 27C7.44772 27 7 27.4477 7 28C7 28.5523 7.44772 29 8 29H24C24.5523 29 25 28.5523 25 28C25 27.4477 24.5523 27 24 27H8Z"
+  />
+</svg>
--- a/packages/text-editor/src/types.ts
+++ b/packages/text-editor/src/types.ts
@ -41,7 +41,8 @@ export const FORMAT_MODES = [
  'code',
  'codeBlock',
  'heading',
-  'table'
+  'table',
+  'underline'
 ] as const

 /**