Minor enhancements to the text color feature (#8551)

Signed-off-by: Victor Ilyushchenko <alt13ri@gmail.com>

packages/text/src/marks/colors.ts

@@ -135,7 +135,7 @@ export const TextColor = Extension.create<TextColorOptions>({
       unsetTextColor:
         () =>
           ({ chain }) => {
-            return chain().setMark('textStyle', { color: null }).removeEmptyTextStyle().run()
+            return chain().unsetMark('textStyle').run()
           }
     }
   }

packages/ui/src/popups.ts

@@ -92,12 +92,13 @@ export function showPopup (
     overlay: boolean
     fixed?: boolean
     refId?: string
+    id?: string
   } = {
     category: 'popup',
     overlay: true
   }
 ): PopupResult {
-  const id = `${popupId++}`
+  const id = options?.id ?? `${popupId++}`
   const closePopupOp = (): void => {
     modalStore.update((popups) => {
       const pos = popups.findIndex((p) => (p as CompAndProps).id === id && p.type === 'popup')
@@ -107,6 +108,7 @@ export function showPopup (
       return popups
     })
   }
+  closePopupOp()
   const _element = element instanceof HTMLElement ? getPopupPositionElement(element) : element
   const data: Omit<CompAndProps, 'is'> = {
     id,

plugins/text-editor-resources/src/components/extension/colors.ts

@@ -50,7 +50,7 @@ const palette = {
     colorSpec('red', 'bg')
   ],
   text: [
-    { color: 'var(--theme-text-color-primary)' },
+    { color: 'var(--theme-text-primary-color)' },
     colorSpec('gray'),
     colorSpec('brown'),
     colorSpec('orange'),
@@ -65,33 +65,55 @@ const palette = {
 
 export async function openBackgroundColorOptions (editor: Editor, event: MouseEvent): Promise<void> {
   await new Promise<void>((resolve) => {
-    showPopup(ColorPicker, { palette: palette.background }, getEventPositionElement(event), (val) => {
-      const color: string | undefined = val?.color
-      if (color === undefined) return
+    showPopup(
+      ColorPicker,
+      { palette: palette.background, id: 'text-editor-background-color-picker' },
+      getEventPositionElement(event),
+      (val) => {
+        const color: string | undefined = val?.color
+        if (color === undefined) return
 
-      if (color === 'transparent') {
-        editor.commands.unsetBackgroundColor()
-      } else {
-        editor.commands.setBackgroundColor(color)
+        if (color === 'transparent') {
+          editor.commands.unsetBackgroundColor()
+        } else {
+          editor.commands.setBackgroundColor(color)
+        }
+        resolve()
+      },
+      undefined,
+      {
+        id: 'text-editor-background-color-picker',
+        category: 'popup',
+        overlay: true
       }
-      resolve()
-    })
+    )
   })
 }
 
 export async function openTextColorOptions (editor: Editor, event: MouseEvent): Promise<void> {
   await new Promise<void>((resolve) => {
-    showPopup(ColorPicker, { palette: palette.text }, getEventPositionElement(event), (val) => {
-      const color: string | undefined = val?.color
-      if (color === undefined) return
+    showPopup(
+      ColorPicker,
+      { palette: palette.text, letters: true },
+      getEventPositionElement(event),
+      (val) => {
+        const color: string | undefined = val?.color
+        if (color === undefined) return
 
-      if (color === 'var(--theme-text-color-primary)') {
-        editor.commands.unsetTextColor()
-      } else {
-        editor.commands.setTextColor(color)
+        if (color === 'var(--theme-text-primary-color)') {
+          editor.commands.unsetTextColor()
+        } else {
+          editor.commands.setTextColor(color)
+        }
+        resolve()
+      },
+      undefined,
+      {
+        id: 'text-editor-text-color-picker',
+        category: 'popup',
+        overlay: true
       }
-      resolve()
-    })
+    )
   })
 }
 

plugins/text-editor-resources/src/components/extension/popups/ColorPicker.svelte

@@ -17,6 +17,7 @@
   import { Card } from '@hcengineering/presentation'
 
   export let palette: Array<{ color: string, preview?: string }> = [{ color: 'transparent' }]
+  export let letters: boolean = false
 
   const dispatch = createEventDispatcher()
 
@@ -32,11 +33,15 @@
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
         class="colorBox"
-        style:background-color={k.preview ?? k.color}
+        class:letters
+        class:solid={!letters}
+        style:--color={k.preview ?? k.color}
         on:click={() => {
           handleSubmit(k)
         }}
-      />
+      >
+        {#if letters}A{/if}
+      </div>
     {/each}
   </div>
 </div>
@@ -61,6 +66,20 @@
     height: 1.5rem;
     border-radius: 0.25rem;
     cursor: pointer;
+  }
+
+  .solid {
+    background-color: var(--color);
     box-shadow: var(--text-editor-color-picker-outline) 0px 0px 0px 1px inset;
   }
+
+  .letters {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    border: 1px solid var(--color);
+    color: var(--color);
+    font-weight: bold;
+  }
 </style>