From 28b99d25254ee33f39f4e776362f4c609e674040 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Tue, 3 Oct 2023 14:51:31 +0700
Subject: [PATCH] EZQMS-279: Remove .ProseMirror global css (#3772)

* Remove .ProseMirror global css

Signed-off-by: Anna No <anna.no@xored.com>

* Remove .ProseMirror global css

Signed-off-by: Anna No <anna.no@xored.com>

* Remove .ProseMirror global css

Signed-off-by: Anna No <anna.no@xored.com>

* remove unused css classes

Signed-off-by: Anna No <anna.no@xored.com>

* remove unused css classes

Signed-off-by: Anna No <anna.no@xored.com>

---------

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../components/CollaborationDiffViewer.svelte | 119 +-------------
 .../src/components/CollaboratorEditor.svelte  | 123 +--------------
 .../src/components/StyledTextEditor.svelte    |  15 +-
 .../src/components/TextEditor.svelte          |  50 +-----
 .../src/components/diff/decorations.ts        |   2 +-
 .../src/components/editor/editorProps.ts      |   1 +
 .../text-editor/src/components/imageExt.ts    |   2 +-
 packages/theme/styles/_text-editor.scss       | 148 ++++++++++++++++--
 packages/theme/styles/prose.scss              |   2 +-
 .../src/components/NewMessage.svelte          |   6 -
 .../src/components/NewMessages.svelte         |   6 -
 11 files changed, 157 insertions(+), 317 deletions(-)
 create mode 100644 packages/text-editor/src/components/editor/editorProps.ts

diff --git a/packages/text-editor/src/components/CollaborationDiffViewer.svelte b/packages/text-editor/src/components/CollaborationDiffViewer.svelte
index 84d13c9291..86f6589e4e 100644
--- a/packages/text-editor/src/components/CollaborationDiffViewer.svelte
+++ b/packages/text-editor/src/components/CollaborationDiffViewer.svelte
@@ -15,7 +15,7 @@
 //
 -->
 <script lang="ts">
-  import { Editor, Extension } from '@tiptap/core'
+  import { Editor, Extension, mergeAttributes } from '@tiptap/core'
 
   import { Plugin, PluginKey } from 'prosemirror-state'
   import { onDestroy, onMount } from 'svelte'
@@ -29,6 +29,7 @@
 
   import { calculateDecorations } from './diff/decorations'
   import { defaultExtensions } from './extensions'
+  import { defaultEditorAttributes } from './editor/editorProps'
 
   export let content: Markup
   export let buttonSize: IconSize = 'small'
@@ -79,6 +80,7 @@
 
   onMount(() => {
     editor = new Editor({
+      editorProps: { attributes: mergeAttributes(defaultEditorAttributes, { class: 'flex-grow' }) },
       element,
       content,
       editable: true,
@@ -121,118 +123,3 @@
     <div class="select-text" style="width: 100%;" bind:this={element} />
   </div>
 </div>
-
-<style lang="scss" global>
-  .ProseMirror {
-    flex-grow: 1;
-    overflow: auto;
-    min-height: inherit !important;
-    max-height: inherit !important;
-    outline: none;
-    line-height: 150%;
-    color: var(--theme-caption-color);
-
-    p:not(:last-child) {
-      margin-block-end: 1em;
-    }
-
-    pre {
-      white-space: pre !important;
-    }
-
-    > * + * {
-      margin-top: 0.75em;
-    }
-
-    /* Placeholder (at the top) */
-    p.is-editor-empty:first-child::before {
-      content: attr(data-placeholder);
-      float: left;
-      color: var(--theme-halfcontent-color);
-      pointer-events: none;
-      height: 0;
-    }
-    &:focus-within p.is-editor-empty:first-child::before {
-      color: var(--theme-trans-color);
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--scrollbar-bar-color);
-    }
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: var(--scrollbar-bar-hover);
-    }
-    &::-webkit-scrollbar-corner {
-      background-color: var(--scrollbar-bar-color);
-    }
-    &::-webkit-scrollbar-track {
-      margin: 0;
-    }
-  }
-
-  .lint-icon {
-    display: inline-block;
-    position: absolute;
-    right: 2px;
-    cursor: pointer;
-    border-radius: 100px;
-    // background: #f22;
-    color: white;
-    font-family: times, georgia, serif;
-    font-size: 15px;
-    font-weight: bold;
-    width: 0.7em;
-    height: 0.7em;
-    text-align: center;
-    padding-left: 0.5px;
-    line-height: 1.1em;
-    &.add {
-      background: lightblue;
-    }
-    &.delete {
-      background: orange;
-    }
-  }
-
-  /* Give a remote user a caret */
-  .collaboration-cursor__caret {
-    border-left: 1px solid #0d0d0d;
-    border-right: 1px solid #0d0d0d;
-    margin-left: -1px;
-    margin-right: -1px;
-    pointer-events: none;
-    position: relative;
-    word-break: normal;
-  }
-
-  /* Render the username above the caret */
-  .collaboration-cursor__label {
-    border-radius: 3px 3px 3px 0;
-    color: #0d0d0d;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 600;
-    left: -1px;
-    line-height: normal;
-    padding: 0.1rem 0.3rem;
-    position: absolute;
-    top: -1.4em;
-    user-select: none;
-    white-space: nowrap;
-  }
-
-  cmark {
-    border-top: 1px solid lightblue;
-    border-bottom: 1px solid lightblue;
-    border-radius: 2px;
-  }
-
-  span.insertion {
-    border-top: 1px solid lightblue;
-    border-bottom: 1px solid lightblue;
-    border-radius: 2px;
-  }
-  span.deletion {
-    text-decoration: line-through;
-  }
-</style>
diff --git a/packages/text-editor/src/components/CollaboratorEditor.svelte b/packages/text-editor/src/components/CollaboratorEditor.svelte
index befc3e01e8..e5237a9e51 100644
--- a/packages/text-editor/src/components/CollaboratorEditor.svelte
+++ b/packages/text-editor/src/components/CollaboratorEditor.svelte
@@ -20,7 +20,7 @@
   import { getContext, createEventDispatcher, onDestroy, onMount } from 'svelte'
   import * as Y from 'yjs'
   import { HocuspocusProvider } from '@hocuspocus/provider'
-  import { AnyExtension, Editor, Extension, HTMLContent, getMarkRange } from '@tiptap/core'
+  import { AnyExtension, Editor, Extension, HTMLContent, getMarkRange, mergeAttributes } from '@tiptap/core'
   import Collaboration, { isChangeOrigin } from '@tiptap/extension-collaboration'
   import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
   import Placeholder from '@tiptap/extension-placeholder'
@@ -37,6 +37,7 @@
   import { NodeUuidExtension } from './extension/nodeUuid'
   import StyleButton from './StyleButton.svelte'
   import TextEditorStyleToolbar from './TextEditorStyleToolbar.svelte'
+  import { defaultEditorAttributes } from './editor/editorProps'
 
   export let documentId: string
   export let readonly = false
@@ -57,6 +58,7 @@
   export let autoOverflow = false
   export let initialContent: string | undefined = undefined
   export let textNodeActions: TextNodeAction[] = []
+  export let editorAttributes: { [name: string]: string } = {}
   export let onExtensions: () => AnyExtension[] = () => []
 
   let element: HTMLElement
@@ -200,6 +202,7 @@
       editor = new Editor({
         element,
         editable: true,
+        editorProps: { attributes: mergeAttributes(defaultEditorAttributes, editorAttributes, { class: 'flex-grow' }) },
         extensions: [
           ...defaultExtensions,
           Placeholder.configure({ placeholder: placeHolderStr }),
@@ -336,123 +339,7 @@
   </div>
 {/if}
 
-<style lang="scss" global>
-  .ProseMirror {
-    flex-grow: 1;
-    min-height: inherit !important;
-    max-height: inherit !important;
-    outline: none;
-    line-height: 150%;
-    color: var(--accent-color);
-
-    p:not(:last-child) {
-      margin-block-end: 1em;
-    }
-
-    pre {
-      white-space: pre !important;
-    }
-
-    > * + * {
-      margin-top: 0.75em;
-    }
-
-    /* Placeholder (at the top) */
-    p.is-editor-empty:first-child::before {
-      content: attr(data-placeholder);
-      float: left;
-      color: var(--dark-color);
-      pointer-events: none;
-      height: 0;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--scrollbar-bar-color);
-    }
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: var(--scrollbar-bar-hover);
-    }
-    &::-webkit-scrollbar-corner {
-      background-color: var(--scrollbar-bar-color);
-    }
-    &::-webkit-scrollbar-track {
-      margin: 0;
-    }
-  }
-  /* Placeholder (at the top) */
-  .ProseMirror p.is-editor-empty:first-child::before {
-    color: #adb5bd;
-    content: attr(data-placeholder);
-    float: left;
-    height: 0;
-    pointer-events: none;
-  }
-
-  .lint-icon {
-    display: inline-block;
-    position: absolute;
-    right: 2px;
-    cursor: pointer;
-    border-radius: 100px;
-    // background: #f22;
-    color: white;
-    font-family: times, georgia, serif;
-    font-size: 15px;
-    font-weight: bold;
-    width: 0.7em;
-    height: 0.7em;
-    text-align: center;
-    padding-left: 0.5px;
-    line-height: 1.1em;
-    &.add {
-      background: lightblue;
-    }
-    &.delete {
-      background: orange;
-    }
-  }
-
-  /* Give a remote user a caret */
-  .collaboration-cursor__caret {
-    border-left: 1px solid #0d0d0d;
-    border-right: 1px solid #0d0d0d;
-    margin-left: -1px;
-    margin-right: -1px;
-    pointer-events: none;
-    position: relative;
-    word-break: normal;
-  }
-
-  /* Render the username above the caret */
-  .collaboration-cursor__label {
-    border-radius: 3px 3px 3px 0;
-    color: #0d0d0d;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 600;
-    left: -1px;
-    line-height: normal;
-    padding: 0.1rem 0.3rem;
-    position: absolute;
-    top: -1.4em;
-    user-select: none;
-    white-space: nowrap;
-  }
-
-  cmark {
-    border-top: 1px solid lightblue;
-    border-bottom: 1px solid lightblue;
-    border-radius: 2px;
-  }
-
-  span.insertion {
-    border-top: 1px solid lightblue;
-    border-bottom: 1px solid lightblue;
-    border-radius: 2px;
-  }
-  span.deletion {
-    text-decoration: line-through;
-  }
+<style lang="scss">
   .autoOverflow {
     overflow: auto;
   }
diff --git a/packages/text-editor/src/components/StyledTextEditor.svelte b/packages/text-editor/src/components/StyledTextEditor.svelte
index b5cdf55a7c..38fe91e584 100644
--- a/packages/text-editor/src/components/StyledTextEditor.svelte
+++ b/packages/text-editor/src/components/StyledTextEditor.svelte
@@ -20,7 +20,7 @@
   import textEditorPlugin from '../plugin'
   import { RefInputAction, RefInputActionItem, TextEditorHandler, TextFormatCategory } from '../types'
   import Attach from './icons/Attach.svelte'
-  import { AnyExtension } from '@tiptap/core'
+  import { AnyExtension, mergeAttributes } from '@tiptap/core'
   import StyleButton from './StyleButton.svelte'
   import TextEditor from './TextEditor.svelte'
   import { Node as ProseMirrorNode } from '@tiptap/pm/model'
@@ -40,6 +40,7 @@
   export let autofocus = false
   export let full = false
   export let extensions: AnyExtension[] = []
+  export let editorAttributes: { [name: string]: string } = {}
   export let textFormatCategories: TextFormatCategory[] = [
     TextFormatCategory.Heading,
     TextFormatCategory.TextDecoration,
@@ -148,6 +149,11 @@
     actions = defActions.concat(...cont).sort((a, b) => a.order - b.order)
   })
 
+  const mergedEditorAttributes = mergeAttributes(
+    editorAttributes,
+    full ? { class: 'text-editor-view_full-height' } : { class: 'text-editor-view_compact' }
+  )
+
   const editorHandler: TextEditorHandler = {
     insertText: (text) => {
       textEditor.insertText(text)
@@ -204,6 +210,7 @@
       {#if isScrollable}
         <Scroller>
           <TextEditor
+            editorAttributes={mergedEditorAttributes}
             bind:content
             {placeholder}
             {extensions}
@@ -223,6 +230,7 @@
         </Scroller>
       {:else}
         <TextEditor
+          editorAttributes={mergedEditorAttributes}
           bind:content
           {placeholder}
           {extensions}
@@ -284,11 +292,6 @@
         color: var(--theme-caption-color);
         background-color: transparent;
 
-        :global(.ProseMirror) {
-          min-height: 0;
-          // max-height: 100%;
-          height: 100%;
-        }
         &.scrollable {
           max-height: var(--texteditor-maxheight);
 
diff --git a/packages/text-editor/src/components/TextEditor.svelte b/packages/text-editor/src/components/TextEditor.svelte
index 1924eb43fd..ed83107b38 100644
--- a/packages/text-editor/src/components/TextEditor.svelte
+++ b/packages/text-editor/src/components/TextEditor.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   import { IntlString, translate } from '@hcengineering/platform'
 
-  import { FocusPosition } from '@tiptap/core'
+  import { FocusPosition, mergeAttributes } from '@tiptap/core'
   import { AnyExtension, Editor, Extension, HTMLContent } from '@tiptap/core'
 
   import Placeholder from '@tiptap/extension-placeholder'
@@ -29,6 +29,7 @@
   import TextEditorStyleToolbar from './TextEditorStyleToolbar.svelte'
   import { TextFormatCategory } from '../types'
   import { InlineStyleToolbar } from './extension/inlineStyleToolbar'
+  import { defaultEditorAttributes } from './editor/editorProps'
 
   export let content: string = ''
   export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
@@ -36,6 +37,7 @@
   export let textFormatCategories: TextFormatCategory[] = []
   export let supportSubmit = true
   export let isEmpty = true
+  export let editorAttributes: { [name: string]: string } = {}
 
   let element: HTMLElement
   let editor: Editor
@@ -137,6 +139,7 @@
     ph.then(() => {
       editor = new Editor({
         element,
+        editorProps: { attributes: mergeAttributes(defaultEditorAttributes, editorAttributes) },
         content,
         extensions: [
           ...defaultExtensions,
@@ -221,50 +224,7 @@
 </div>
 <div class="select-text" style="width: 100%;" on:mousedown={onEditorClick} bind:this={element} />
 
-<style lang="scss" global>
-  .ProseMirror {
-    overflow-y: auto;
-    font: inherit;
-    min-height: inherit !important;
-    max-height: inherit !important;
-    outline: none;
-    line-height: 150%;
-    color: var(--theme-caption-color);
-
-    p:not(:last-child) {
-      margin-block-end: 1em;
-    }
-
-    > * + * {
-      margin-top: 0.75em;
-    }
-
-    /* Placeholder (at the top) */
-    p.is-editor-empty:first-child::before {
-      content: attr(data-placeholder);
-      float: left;
-      color: var(--theme-halfcontent-color);
-      pointer-events: none;
-      height: 0;
-    }
-    &:focus-within p.is-editor-empty:first-child::before {
-      color: var(--theme-trans-color);
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--scrollbar-bar-color);
-    }
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: var(--scrollbar-bar-hover);
-    }
-    &::-webkit-scrollbar-corner {
-      background-color: var(--scrollbar-bar-color);
-    }
-    &::-webkit-scrollbar-track {
-      margin: 0;
-    }
-  }
-
+<style lang="scss">
   .formatPanel {
     margin: -0.5rem -0.25rem 0.5rem;
     padding: 0.375rem;
diff --git a/packages/text-editor/src/components/diff/decorations.ts b/packages/text-editor/src/components/diff/decorations.ts
index 220336503f..8a7db952a1 100644
--- a/packages/text-editor/src/components/diff/decorations.ts
+++ b/packages/text-editor/src/components/diff/decorations.ts
@@ -85,7 +85,7 @@ export function calculateDecorations (
 
     function lintIcon (color: string): any {
       const icon = document.createElement('div')
-      icon.className = `lint-icon ${color}`
+      icon.className = `text-editor-lint-icon ${color}`
       return icon
     }
 
diff --git a/packages/text-editor/src/components/editor/editorProps.ts b/packages/text-editor/src/components/editor/editorProps.ts
new file mode 100644
index 0000000000..8762c0a4f3
--- /dev/null
+++ b/packages/text-editor/src/components/editor/editorProps.ts
@@ -0,0 +1 @@
+export const defaultEditorAttributes: { [name: string]: string } = { class: 'text-editor-view' }
diff --git a/packages/text-editor/src/components/imageExt.ts b/packages/text-editor/src/components/imageExt.ts
index 83d48c7973..71ec1488f1 100644
--- a/packages/text-editor/src/components/imageExt.ts
+++ b/packages/text-editor/src/components/imageExt.ts
@@ -135,7 +135,7 @@ export const ImageRef = Node.create<ImageOptions>({
         merged.src = getFileUrl(id, width)
         merged.srcset = getFileUrl(id, width) + ' 1x,' + getFileUrl(id, getIconSize2x(width)) + ' 2x'
       }
-      merged.class = 'textEditorImage'
+      merged.class = 'text-editor-image'
       this.options.reportNode?.(id, node)
     }
     return ['img', merged]
diff --git a/packages/theme/styles/_text-editor.scss b/packages/theme/styles/_text-editor.scss
index 2f01d6468b..66ada28ed6 100644
--- a/packages/theme/styles/_text-editor.scss
+++ b/packages/theme/styles/_text-editor.scss
@@ -1,4 +1,109 @@
-.textEditorImage {
+.ProseMirror {
+  outline: none;
+
+  &.text-editor-view {
+    font: inherit;
+    line-height: 150%;
+  }
+}
+
+.text-editor-view {
+  overflow-y: auto;
+  color: var(--theme-caption-color);
+
+  p:not(:last-child) {
+    margin-block-end: 1em;
+  }
+
+  >*+* {
+    margin-top: 0.75em;
+  }
+
+  /* Placeholder (at the top) */
+  p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: var(--theme-halfcontent-color);
+    pointer-events: none;
+    height: 0;
+  }
+
+  &.text-editor-view_compact {
+    min-height: 0;
+    height: 100%;
+  }
+
+  &.text-editor-view_full-height {
+    min-height: 0;
+    max-height: 100%;
+    height: auto;
+  }
+
+  &:focus-within p.is-editor-empty:first-child::before {
+    color: var(--theme-trans-color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-bar-color);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-bar-hover);
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: var(--scrollbar-bar-color);
+  }
+
+  &::-webkit-scrollbar-track {
+    margin: 0;
+  }
+
+  /* Give a remote user a caret */
+  .collaboration-cursor__caret {
+    border-left: 1px solid #0d0d0d;
+    border-right: 1px solid #0d0d0d;
+    margin-left: -1px;
+    margin-right: -1px;
+    pointer-events: none;
+    position: relative;
+    word-break: normal;
+  }
+
+  /* Render the username above the caret */
+  .collaboration-cursor__label {
+    border-radius: 3px 3px 3px 0;
+    color: #0d0d0d;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    left: -1px;
+    line-height: normal;
+    padding: 0.1rem 0.3rem;
+    position: absolute;
+    top: -1.4em;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  cmark {
+    border-top: 1px solid lightblue;
+    border-bottom: 1px solid lightblue;
+    border-radius: 2px;
+  }
+
+  span.insertion {
+    border-top: 1px solid lightblue;
+    border-bottom: 1px solid lightblue;
+    border-radius: 2px;
+  }
+
+  span.deletion {
+    text-decoration: line-through;
+  }
+}
+
+.text-editor-image {
   cursor: pointer;
   object-fit: contain;
 }
@@ -22,19 +127,28 @@
   z-index: 1;
 }
 
-.proseH1 {
-  margin-block-start: 1.25rem;
-  margin-block-end: 1.25rem;
-  font-weight: 700;
-  font-size: 1.75rem;
-  // line-height: 1.75rem;
-  color: red;
-}
-.proseH2 {
-  margin-block-start: 1rem;
-  margin-block-end: 1.125rem;
-  font-weight: 700;
-  font-size: 1.25rem;
-  // line-height: 1.75rem;
-  color: green;
-}
+.text-editor-lint-icon {
+  display: inline-block;
+  position: absolute;
+  right: 2px;
+  cursor: pointer;
+  border-radius: 100px;
+  // background: #f22;
+  color: white;
+  font-family: times, georgia, serif;
+  font-size: 15px;
+  font-weight: bold;
+  width: 0.7em;
+  height: 0.7em;
+  text-align: center;
+  padding-left: 0.5px;
+  line-height: 1.1em;
+
+  &.add {
+    background: lightblue;
+  }
+
+  &.delete {
+    background: orange;
+  }
+}
\ No newline at end of file
diff --git a/packages/theme/styles/prose.scss b/packages/theme/styles/prose.scss
index 1f66898203..bd655b3642 100644
--- a/packages/theme/styles/prose.scss
+++ b/packages/theme/styles/prose.scss
@@ -74,4 +74,4 @@ pre.proseCodeBlock > code.proseCode {
   border-radius: 0;
 }
 
-.proseHeading { line-height: 110%; }
+.proseHeading { line-height: 110%; }
\ No newline at end of file
diff --git a/plugins/gmail-resources/src/components/NewMessage.svelte b/plugins/gmail-resources/src/components/NewMessage.svelte
index 2fce00edbf..88e0d887bb 100644
--- a/plugins/gmail-resources/src/components/NewMessage.svelte
+++ b/plugins/gmail-resources/src/components/NewMessage.svelte
@@ -245,12 +245,6 @@
     border-radius: 0.25rem;
     caret-color: var(--theme-caret-color);
 
-    :global(.ProseMirror) {
-      min-height: 0;
-      max-height: 100%;
-      height: auto;
-    }
-
     :global(a) {
       font: inherit;
       font-weight: 500;
diff --git a/plugins/gmail-resources/src/components/NewMessages.svelte b/plugins/gmail-resources/src/components/NewMessages.svelte
index bb145f7385..6f3fee6ec1 100644
--- a/plugins/gmail-resources/src/components/NewMessages.svelte
+++ b/plugins/gmail-resources/src/components/NewMessages.svelte
@@ -373,12 +373,6 @@
     margin-bottom: 2rem;
     border-radius: 0.25rem;
 
-    :global(.ProseMirror) {
-      min-height: 0;
-      max-height: 100%;
-      height: auto;
-    }
-
     :global(a) {
       font: inherit;
       font-weight: 500;