HAR-9647 - improve styles encapsulation

packages/super-editor/src/assets/styles/elements/prosemirror.css

@@ -108,12 +108,12 @@ img.ProseMirror-separator {
   margin: 0 !important;
 }
 
-.ProseMirror .super-doc-tab {
+.ProseMirror .sd-editor-tab {
   display: inline-block;
   vertical-align: text-bottom;
 }
 
-.ProseMirror u .super-doc-tab:not(.pagination-inner .super-doc-tab) {
+.ProseMirror u .sd-editor-tab:not(.pagination-inner .sd-editor-tab) {
   white-space: pre;
   border-bottom: 1px solid #000;
   margin-bottom: 1.5px;
@@ -311,7 +311,7 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
   z-index: -1;
 }
 
-.super-doc-dropcap {
+.sd-editor-dropcap {
   float: left;
   display: flex;
   align-items: baseline;
@@ -323,4 +323,4 @@ https://github.com/ProseMirror/prosemirror-tables/blob/master/demo/index.html
 }
 .ProseMirror-active-search-match {
   background-color: #ff6a0054;
-}
+}

packages/super-editor/src/assets/styles/elements/toolbar-custom.css

@@ -35,8 +35,6 @@
   filter: brightness(1.3);
 } 
 
-
-
 @keyframes aiTextAppear {
   from {
     opacity: 0;

packages/super-editor/src/assets/styles/elements/toolbar.css

@@ -8,7 +8,7 @@
   }
 }
 
-.n-dropdown-option .dropdown-select-icon {
+.sd-editor-toolbar-dropdown .n-dropdown-option .dropdown-select-icon {
   display: flex;
   width: 12px;
   height: 12px;

packages/super-editor/src/assets/styles/extensions/comments.css

@@ -1,7 +1,7 @@
-.comment-highlight {
+.sd-editor-comment-highlight {
   transition: background-color 250ms ease;
 }
 
-.comment-highlight:hover {
+.sd-editor-comment-highlight:hover {
   background-color: #1354FF55;
 }

packages/super-editor/src/assets/styles/extensions/mention.css

@@ -1,4 +1,4 @@
-.super-editor-mention {
+.sd-editor-mention {
   background-color: #1355ff15;
   color: #222;
   font-weight: 400;

packages/super-editor/src/assets/styles/extensions/pagination.css

@@ -45,7 +45,7 @@
 Workaround to display pagination in footer 
 on the right if it is inside shape textbox.
 */
-.pagination-section-footer .pm-shape-container:has(
+.pagination-section-footer .sd-editor-shape-container:has(
   [data-id="auto-page-number"],
   [data-id="auto-total-pages"]
 ) {

packages/super-editor/src/assets/styles/extensions/placeholder.css

@@ -1,4 +1,4 @@
-.super-editor-placeholder::before {
+.sd-editor-placeholder::before {
   content: attr(data-placeholder);
   color: #aaa;
   pointer-events: none;

packages/super-editor/src/assets/styles/extensions/popover.css

@@ -1,4 +1,4 @@
-.popover {
+.sd-editor-popover {
   background-color: #fff;
   border-radius: 8px;
   -webkit-box-shadow: 0px 4px 12px 0px rgba(50, 50, 50, 0.15);
@@ -12,28 +12,24 @@
   z-index: 1000;
 }
 
-.popover-header {
+.sd-editor-popover .popover-header {
   font-weight: bold;
   margin-bottom: 8px;
 }
 
-.tippy-content {
-  padding: 0;
-}
-
-.tippy-box[data-theme~='popover'] {
+.tippy-box[data-theme~='sd-editor-popover'] {
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-  border: none;
+  border: none !important;
+  padding: 0 !important;
 }
 
-.tippy-box[data-theme~='popover'] .tippy-arrow {
+.tippy-box[data-theme~='sd-editor-popover'] .tippy-arrow {
   color: #fff;
   border: 1px solid #dbdbdb;
 }
 
-.tippy-box[data-theme~='popover'] {
-  border: none !important;
-  padding: none !important;
+.tippy-box[data-theme~='sd-editor-popover'] .tippy-content {
+  padding: 0;
 }

packages/super-editor/src/assets/styles/layout/global.css

@@ -1,10 +1,4 @@
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.input-active {
+.sd-input-active {
   border: 1px solid #1355ff !important;
 }
 
@@ -15,4 +9,4 @@
   height: 100%;
   width: 100%;
   outline: none;
-}
+}

packages/super-editor/src/components/toolbar/ButtonGroup.vue

@@ -101,7 +101,7 @@ const handleClickOutside = (e) => {
         :show="item.expand.value"
         size="medium"
         placement="bottom-start"
-        class="toolbar-button toolbar-dropdown"
+        class="toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown"
         @select="(key, option) => handleSelect(item, option)"
         @clickoutside="handleClickOutside"
         :style="item.dropdownStyles.value"
@@ -121,7 +121,7 @@ const handleClickOutside = (e) => {
         </n-tooltip>
       </n-dropdown>
 
-      <n-tooltip trigger="hover" v-else-if="isButton(item)">
+      <n-tooltip trigger="hover" v-else-if="isButton(item)" class="sd-editor-toolbar-tooltip">
         <template #trigger>
           <ToolbarButton
             :toolbar-item="item"
@@ -146,26 +146,26 @@ const handleClickOutside = (e) => {
 </template>
 
 <style lang="postcss">
-.n-dropdown {
+.sd-editor-toolbar-dropdown {
   border-radius: 8px;
   min-width: 80px;
+  cursor: pointer;
 }
-.n-tooltip,
-.n-popover {
-  background-color: #333333 !important;
-  font-size: 14px;
-  border-radius: 8px !important;
-}
-.n-dropdown-option-body {
+
+.sd-editor-toolbar-dropdown .n-dropdown-option-body {
   &:hover {
     &::before,
     &::after {
       background-color: #d8dee5 !important;
     }
   }
 }
-.toolbar-dropdown {
-  cursor: pointer;
+
+.sd-editor-toolbar-tooltip,
+.sd-editor-toolbar-tooltip.n-popover {
+  background-color: #333333 !important;
+  font-size: 14px;
+  border-radius: 8px !important;
 }
 </style>
 

packages/super-editor/src/extensions/ai/ai-marks.js

@@ -10,7 +10,7 @@ export const AiMark = Mark.create({
 
   addOptions() {
     return {
-      htmlAttributes: { class: 'super-editor-ai' },
+      htmlAttributes: { class: 'sd-editor-ai' },
     };
   },
 

packages/super-editor/src/extensions/comment/comments-marks.js

@@ -10,7 +10,7 @@ export const CommentsMark = Mark.create({
 
   addOptions() {
     return {
-      htmlAttributes: { class: 'super-editor-comment' },
+      htmlAttributes: { class: 'sd-editor-comment' },
     };
   },
 

packages/super-editor/src/extensions/comment/comments-plugin.js

@@ -246,7 +246,7 @@ export const CommentsPlugin = Extension.create({
                 const deco = Decoration.inline(pos, pos + node.nodeSize, {
                   style: `background-color: ${color};`,
                   'data-thread-id': threadId,
-                  class: 'comment-highlight',
+                  class: 'sd-editor-comment-highlight',
                 })
 
                 // Ignore inner marks if we need to show an outer active one

packages/super-editor/src/extensions/mention/mention.js

@@ -14,7 +14,7 @@ export const Mention = Node.create({
   addOptions() {
     return {
       htmlAttributes: {
-        class: 'super-editor-mention',
+        class: 'sd-editor-mention',
       },
     };
   },

packages/super-editor/src/extensions/paragraph/paragraph.js

@@ -73,7 +73,7 @@ export const Paragraph = Node.create({
       class: {
         renderDOM: (attributes) => {
           if (attributes.dropcap) {
-            return { class: `super-doc-dropcap`};
+            return { class: `sd-editor-dropcap`};
           }
           return null;
         }

packages/super-editor/src/extensions/placeholder/placeholder.js

@@ -19,7 +19,7 @@ export const Placeholder = Extension.create({
       const { $from } = state.selection;
       const decoration = Decoration.node($from.before(), $from.after(), {
         'data-placeholder': this.options.placeholder,
-        class: 'super-editor-placeholder',
+        class: 'sd-editor-placeholder',
       });
       return DecorationSet.create(state.doc, [decoration]);
     };

packages/super-editor/src/extensions/popover-plugin/popover-plugin.js

@@ -50,7 +50,7 @@ class Popover {
     this.editor = editor;
     this.view = view;
     this.popover = document.createElement('div');
-    this.popover.className = 'popover';
+    this.popover.className = 'sd-editor-popover';
     document.body.appendChild(this.popover);
 
     this.tippyInstance = tippy(this.popover, {
@@ -66,7 +66,7 @@ class Popover {
       onHide: () => {
         this.unbindKeyDownEvents();
       },
-      theme: 'popover',
+      theme: 'sd-editor-popover',
     });
   }
 

packages/super-editor/src/extensions/shape-container/shape-container.js

@@ -12,7 +12,7 @@ export const ShapeContainer = Node.create({
   addOptions() {
     return {
       htmlAttributes: {
-        class: 'pm-shape-container',
+        class: 'sd-editor-shape-container',
       },
     };
   },

packages/super-editor/src/extensions/shape-textbox/shape-textbox.js

@@ -12,7 +12,7 @@ export const ShapeTextbox = Node.create({
   addOptions() {
     return {
       htmlAttributes: {
-        class: 'pm-shape-textbox',
+        class: 'sd-editor-shape-textbox',
       },
     };
   },

packages/super-editor/src/extensions/tab/tab.js

@@ -15,7 +15,7 @@ export const TabNode = Node.create({
   addOptions() {
     return {
       htmlAttributes: {
-        class: 'super-doc-tab',
+        class: 'sd-editor-tab',
         // this works together with content prop:
         // since tab can't have content inside but content prop is defined I have to manually add attribute
         contentEditable: false,
@@ -24,7 +24,7 @@ export const TabNode = Node.create({
   },
 
   parseDOM() {
-    return [{ tag: 'span.super-doc-tab' }];
+    return [{ tag: 'span.sd-editor-tab' }];
   },
 
   renderDOM({ htmlAttributes }) {

packages/superdoc/src/assets/styles/layout/global.css

@@ -1,27 +1,3 @@
-/* General */
-.box-sizing {
-  box-sizing: border-box;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.flex {
-  display: flex;
-}
-
-.flex-column {
-  flex-direction: column;
-}
-
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-/* General - end */
-
 .superdoc *,
 .superdoc ::before,
 .superdoc ::after,
@@ -31,6 +7,14 @@
   box-sizing: border-box;
 }
 
+.superdoc .disabled,
+.super-editor .disabled,
+.superdoc-toolbar .disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .super-editor p {
   padding: 0;
   margin: 0;
@@ -52,28 +36,17 @@
   background-color: #dbdbdb;
 }
 
-.primary {
+.sd-button.primary {
   background-color: #1355ff;
   border: none;
   color: white;
 }
 
-.primary:hover {
+.sd-button.primary:hover {
   background-color: #0d3fcc;
 }
 
-.drawer {
-  display: flex;
-  flex-direction: column;
-  max-width: 320px;
-  min-width: 320px;
-  width: 320px;
-  box-sizing: border-box;
-  flex-grow: 1;
-  padding: 10px;
-}
-
-.comment-box {
+.sd-comment-box {
   width: 300px;
 }
 
@@ -96,7 +69,7 @@
   margin: 0;
 }
 
-.super-editor-placeholder::before {
+.sd-editor-placeholder::before {
   content: attr(data-placeholder);
   color: #aaa;
   pointer-events: none;

packages/superdoc/src/components/CommentsLayer/CommentDialog.vue

@@ -116,7 +116,7 @@ const setFocus = () => {
 
 const handleClickOutside = (e) => {
   if (e.target.classList.contains('n-dropdown-option-body__label')) return;
-  if (e.target.classList.contains('comment-highlight')) return;
+  if (e.target.classList.contains('sd-editor-comment-highlight')) return;
   if (activeComment.value === props.comment.commentId) {
     floatingCommentsOffset.value = 0;
     emit('dialog-exit');