feat: add g-md-editor classname to editor dom elem, change default pr…

…efix for internal classnames (#257) - changed editor's classname `yfm-editor` -> `g-md-editor` - added `yfm-editor` classname to editor in `YfmDist` extension - changed prefix of class name (`ye-` -> `g-md-`) when creating class names using helper from `src/classname` - rename css variable: `--ye-toolbar-sticky-offset` ––> `--g-md-toolbar-sticky-offset` - rename math css variables: - `--ye-math-back-color` ––> `--g-md-math-back-color` - `--ye-math-hover-color` ––> `--g-md-math-hover-color`
gravity-ui · Jun 3, 2024 · 82b42ce · 82b42ce
1 parent a294398
commit 82b42ce
Show file tree

Hide file tree

Showing 52 changed files with 86 additions and 86 deletions.
diff --git a/src/bundle/MarkupEditorView.scss b/src/bundle/MarkupEditorView.scss
@@ -3,8 +3,8 @@
 $selection-color: rgba(98, 146, 255, 0.2);
 $toolbar-height: 28px;
 
-.ye-markup-editor,
-.ye-markup-preview {
+.g-md-markup-editor,
+.g-md-markup-preview {
     display: flex;
     flex: 1 0 0;
     flex-direction: column;
@@ -115,7 +115,7 @@ $toolbar-height: 28px;
     }
 }
 
-.ye-markup-preview {
+.g-md-markup-preview {
     &__outer {
         overflow-y: auto;
         flex: 1 0 0;

diff --git a/src/bundle/WysiwygEditorView.scss b/src/bundle/WysiwygEditorView.scss
@@ -1,4 +1,4 @@
-.ye-wysiwyg-editor {
+.g-md-wysiwyg-editor {
     display: flex;
     flex-direction: column;
 

diff --git a/src/bundle/YfmEditorView.scss b/src/bundle/YfmEditorView.scss
@@ -1,4 +1,4 @@
-.ye-editor-component {
+.g-md-editor-component {
     display: flex;
 
     height: 100%;
@@ -57,7 +57,7 @@
         background: var(--g-color-line-generic);
     }
 
-    .ye-toolbar-list-button_arrow {
+    .g-md-toolbar-list-button_arrow {
         --g-button-icon-offset: 0px;
         --g-button-padding: 2px;
         width: 42px;

diff --git a/src/bundle/settings/MarkdownHints/MarkdownHints.scss b/src/bundle/settings/MarkdownHints/MarkdownHints.scss
@@ -1,4 +1,4 @@
-.ye-markdown-hints {
+.g-md-markdown-hints {
     min-width: 210px;
 
     line-height: var(--g-text-code-1-line-height);

diff --git a/src/bundle/settings/index.scss b/src/bundle/settings/index.scss
@@ -1,6 +1,6 @@
 @import '~@gravity-ui/uikit/styles/mixins';
 
-.ye-editor-settings {
+.g-md-editor-settings {
     display: flex;
     flex-wrap: nowrap;
 
@@ -21,7 +21,7 @@
     }
 }
 
-.ye-settings-content {
+.g-md-settings-content {
     width: 300px;
 
     &__mode-help {

diff --git a/src/bundle/sticky/sticky.scss b/src/bundle/sticky/sticky.scss
@@ -1,6 +1,6 @@
 @use '../../styles/zindex' as zIndexVars;
 
-$block: 'ye-editor-sticky';
+$block: 'g-md-editor-sticky';
 
 .#{$block} {
     display: grid;
@@ -9,7 +9,7 @@ $block: 'ye-editor-sticky';
 
     &_sticky {
         position: sticky;
-        top: calc(var(--ye-toolbar-sticky-offset, 0px) + 8px);
+        top: calc(var(--g-md-toolbar-sticky-offset, 0px) + 8px);
     }
 
     &_sticky-active:not(.#{$block}_clear) {

diff --git a/src/bundle/toolbar/ToolbarButtonWithPopupMenu.scss b/src/bundle/toolbar/ToolbarButtonWithPopupMenu.scss
@@ -1,6 +1,6 @@
 @import '~@gravity-ui/uikit/styles/mixins';
 
-.ye-toolbar-button-with-popup-menu {
+.g-md-toolbar-button-with-popup-menu {
     --g-button-icon-offset: 0px;
     --g-button-padding: 2px;
     width: 42px;

diff --git a/src/bundle/toolbar/ToolbarSelect.scss b/src/bundle/toolbar/ToolbarSelect.scss
@@ -1,4 +1,4 @@
-.ye-toolbar-select {
+.g-md-toolbar-select {
     &__item {
         display: flex;
         align-items: center;

diff --git a/src/bundle/toolbar/custom/ToolbarColors.scss b/src/bundle/toolbar/custom/ToolbarColors.scss
@@ -1,6 +1,6 @@
 $colors: ('gray', 'yellow', 'orange', 'red', 'green', 'blue', 'violet');
 
-.ye-toolbar-colors {
+.g-md-toolbar-colors {
     @each $name in $colors {
         &__item-icon_color_#{$name} {
             color: var(--yfm-colorify-#{$name});

diff --git a/src/classname.ts b/src/classname.ts
@@ -1,6 +1,6 @@
 import {withNaming} from '@bem-react/classname';
 
-export const cn = withNaming({n: 'ye-', e: '__', m: '_', v: '_'});
+export const cn = withNaming({n: 'g-md-', e: '__', m: '_', v: '_'});
 
 export interface ClassNameProps {
     className?: string;

diff --git a/src/extensions/base/BaseStyles/index.scss b/src/extensions/base/BaseStyles/index.scss
@@ -10,7 +10,7 @@
     border: none;
 }
 
-.yfm-editor.ProseMirror-focused {
+.g-md-editor.ProseMirror-focused {
     .ProseMirror-selectednode {
         outline: 2px solid #8cf;
     }
@@ -20,8 +20,8 @@
     }
 }
 
-.yfm-editor.ProseMirror,
-.yfm-editor .ProseMirror {
+.g-md-editor.ProseMirror,
+.g-md-editor .ProseMirror {
     &:focus {
         outline: none;
     }

diff --git a/src/extensions/base/BaseStyles/index.ts b/src/extensions/base/BaseStyles/index.ts
@@ -10,7 +10,7 @@ export const BaseStyles: ExtensionAuto = (builder) => {
             new Plugin({
                 props: {
                     attributes: {
-                        class: 'yfm-editor',
+                        class: 'g-md-editor',
                     },
                 },
             }),

diff --git a/src/extensions/behavior/CommandMenu/component.scss b/src/extensions/behavior/CommandMenu/component.scss
@@ -3,7 +3,7 @@
 $itemHeight: 28px;
 $listWidth: 312px;
 
-.ye-command-menu {
+.g-md-command-menu {
     &__list.g-list {
         width: $listWidth;
 

diff --git a/src/extensions/behavior/Cursor/gapcursor.scss b/src/extensions/behavior/Cursor/gapcursor.scss
@@ -17,12 +17,12 @@
     }
 }
 
-.ye-gapcursor {
+.g-md-gapcursor {
     cursor: text;
 
     // override placeholder's fake cursor for FF
     // see src/extensions/Placeholder/index.scss
-    .ye-placeholder::before {
+    .g-md-placeholder::before {
         display: none;
     }
 

diff --git a/src/extensions/behavior/Cursor/gapcursor.ts b/src/extensions/behavior/Cursor/gapcursor.ts
@@ -60,7 +60,7 @@ const toDOM: WidgetConstructor = (view, getPos) => {
     const element = DOMSerializer.fromSchema(view.state.schema).serializeNode(node);
     const placeholderDOM = createPlaceholder(node, null, true);
     if (placeholderDOM) element.appendChild(placeholderDOM);
-    (element as Element).classList.add('ye-gapcursor');
+    (element as Element).classList.add('g-md-gapcursor');
     (element as HTMLElement).addEventListener('mousedown', () => {
         const pos = getPos();
         if (pos !== undefined) {

diff --git a/src/extensions/behavior/Placeholder/index.scss b/src/extensions/behavior/Placeholder/index.scss
@@ -1,12 +1,12 @@
-.ProseMirror .ye-placeholder {
+.ProseMirror .g-md-placeholder {
     display: inline-block;
 
     pointer-events: none;
 
     color: var(--g-color-text-secondary);
 }
 
-.ProseMirror.yfm-editor-hidecursor {
+.ProseMirror.g-md-editor-hidecursor {
     caret-color: transparent;
 }
 
@@ -22,11 +22,11 @@
     }
 }
 
-.ye-placeholder {
+.g-md-placeholder {
     caret-color: transparent;
 
     .ProseMirror-focused &_focus {
-        .ye-placeholder__cursor {
+        .g-md-placeholder__cursor {
             position: relative;
             z-index: 1;
 

diff --git a/src/extensions/behavior/Placeholder/index.ts b/src/extensions/behavior/Placeholder/index.ts
@@ -118,7 +118,7 @@ export const Placeholder: ExtensionAuto<PlaceholderOptions> = (builder, opts) =>
                         const attrs: Record<string, string> = {};
                         if (pluginKey.getState(state)!.hasFocus) {
                             // hide native cursor
-                            attrs.class = 'yfm-editor-hidecursor';
+                            attrs.class = 'g-md-editor-hidecursor';
                         }
                         return attrs;
                     },

diff --git a/src/extensions/behavior/Selection/selection.scss b/src/extensions/behavior/Selection/selection.scss
@@ -1,3 +1,3 @@
-.yfm-editor.ProseMirror-focused .pm-node-selected {
+.g-md-editor.ProseMirror-focused .pm-node-selected {
     box-shadow: var(--g-color-text-info) 0 0 0 1px;
 }
diff --git a/src/extensions/markdown/CodeBlock/CodeBlockHighlight/TooltipPlugin/TooltipView.scss b/src/extensions/markdown/CodeBlock/CodeBlockHighlight/TooltipPlugin/TooltipView.scss
@@ -1,14 +1,14 @@
-.ye-code-block-toolbar {
+.g-md-code-block-toolbar {
     margin: 2px 8px;
 }
 
-.ye-code-tooltip-menu {
+.g-md-code-tooltip-menu {
     min-width: 150px;
 
     border-radius: 4px;
 }
 
-.ye-code-block__select-popup {
+.g-md-code-block__select-popup {
     width: 175px;
     max-height: 200px;
 
@@ -20,11 +20,11 @@
         }
     }
 
-    .ye-code-block__select-empty {
+    .g-md-code-block__select-empty {
         margin-left: 4px;
     }
 }
 
-.ye-code-block__select-button {
+.g-md-code-block__select-button {
     margin: auto 0;
 }
diff --git a/src/extensions/markdown/CodeBlock/CodeBlockHighlight/TooltipPlugin/index.tsx b/src/extensions/markdown/CodeBlock/CodeBlockHighlight/TooltipPlugin/index.tsx
@@ -46,10 +46,10 @@ const CodeMenu: React.FC<CodeMenuProps> = ({view, pos, node, selectItems, mappin
             options={selectItems}
             filterable
             filterPlaceholder={i18nPlaceholder('select_filter')}
-            popupClassName="ye-code-block__select-popup"
-            className="ye-code-block__select-button"
+            popupClassName="g-md-code-block__select-popup"
+            className="g-md-code-block__select-button"
             renderEmptyOptions={() => (
-                <div className="ye-code-block__select-empty">{i18n('empty_option')}</div>
+                <div className="g-md-code-block__select-empty">{i18n('empty_option')}</div>
             )}
         />
     );
@@ -68,7 +68,7 @@ export const codeLangSelectTooltipViewCreator = (
             <Toolbar
                 editor={{}}
                 focus={() => view.focus()}
-                className="ye-code-block-toolbar"
+                className="g-md-code-block-toolbar"
                 data={[
                     [
                         {

diff --git a/src/extensions/markdown/Link/PlaceholderWidget/widget.scss b/src/extensions/markdown/Link/PlaceholderWidget/widget.scss
@@ -1,4 +1,4 @@
-.ye-link-placeholder-widget {
+.g-md-link-placeholder-widget {
     margin: 0 2px;
 
     pointer-events: none;

diff --git a/src/extensions/yfm/Checkbox/index.scss b/src/extensions/yfm/Checkbox/index.scss
@@ -1,4 +1,4 @@
-.ye-checkbox {
+.g-md-checkbox {
     display: flex;
     align-items: center;
 

diff --git a/src/extensions/yfm/Emoji/EmojiSuggest/EmojiSuggestComponent.scss b/src/extensions/yfm/Emoji/EmojiSuggest/EmojiSuggestComponent.scss
@@ -3,7 +3,7 @@
 $itemHeight: 28px;
 $listWidth: 256px;
 
-.ye-emoji-suggest {
+.g-md-emoji-suggest {
     &__list.g-list {
         width: $listWidth;
 

diff --git a/src/extensions/yfm/ImgSize/ImagePaste/skeleton.scss b/src/extensions/yfm/ImgSize/ImagePaste/skeleton.scss
@@ -1,4 +1,4 @@
-.ye-image-skeleton {
+.g-md-image-skeleton {
     $width: min(calc(var(--img-skeleton-width) * 1px), 100%);
     $height: min(calc(var(--img-skeleton-height) * 1px), 700px);
     vertical-align: middle;

diff --git a/src/extensions/yfm/ImgSize/ImageWidget/view.scss b/src/extensions/yfm/ImgSize/ImageWidget/view.scss
@@ -1,6 +1,6 @@
 @import '~@gravity-ui/uikit/styles/mixins';
 
-.ye-image-placeholder {
+.g-md-image-placeholder {
     display: inline-flex;
     align-items: center;
     column-gap: 8px;

diff --git a/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImageForm/ImageForm.scss b/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImageForm/ImageForm.scss
@@ -1,4 +1,4 @@
-.ye-image-tooltip-form {
+.g-md-image-tooltip-form {
     &__input {
         &_type_width,
         &_type_height {

diff --git a/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgNodeView.scss b/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgNodeView.scss
@@ -1,4 +1,4 @@
-.ye-img-size-node-view {
+.g-md-img-size-node-view {
     &__wrapper {
         position: relative;
 

diff --git a/src/extensions/yfm/Math/view-and-edit.scss b/src/extensions/yfm/Math/view-and-edit.scss
@@ -34,14 +34,14 @@
 }
 
 .math-container:not(.math-active) {
-    --ye-math-back-color: transparent;
-    --ye-math-hover-color: var(--g-color-base-simple-hover);
+    --g-md-math-back-color: transparent;
+    --g-md-math-hover-color: var(--g-color-base-simple-hover);
 
     position: relative;
 
     &.math-container-error {
-        --ye-math-back-color: var(--g-color-base-danger-light);
-        --ye-math-hover-color: var(--g-color-base-danger-light-hover);
+        --g-md-math-back-color: var(--g-color-base-danger-light);
+        --g-md-math-hover-color: var(--g-color-base-danger-light-hover);
     }
 
     &::before {
@@ -52,7 +52,7 @@
         content: '';
 
         border-radius: var(--g-border-radius-s);
-        background-color: var(--ye-math-back-color);
+        background-color: var(--g-md-math-back-color);
 
         transition: background-color 0.15s linear;
     }
@@ -61,7 +61,7 @@
         cursor: pointer;
 
         &::before {
-            background-color: var(--ye-math-hover-color);
+            background-color: var(--g-md-math-hover-color);
         }
     }
 
@@ -75,12 +75,12 @@
         opacity: 0;
     }
 
-    .ye-MathHint {
+    .g-md-MathHint {
         display: none;
     }
 }
 
-.ye-MathHint_view {
+.g-md-MathHint_view {
     &_block {
         float: right;
     }

diff --git a/src/extensions/yfm/Mermaid/MermaidNodeView/Mermaid.scss b/src/extensions/yfm/Mermaid/MermaidNodeView/Mermaid.scss
@@ -1,4 +1,4 @@
-.ye-Mermaid {
+.g-md-Mermaid {
     display: flex;
     justify-content: space-between;
 

diff --git a/src/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.scss b/src/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.scss
@@ -1,3 +1,3 @@
-.yfm-cut-title .ye-yfm-cut-title-inner {
+.yfm-cut-title .g-md-yfm-cut-title-inner {
     cursor: text;
 }
diff --git a/src/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.ts b/src/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.ts
@@ -15,7 +15,7 @@ export class YfmCutTitleNodeView implements NodeView {
         this.dom = document.createElement('div');
         this.dom.classList.add('yfm-cut-title');
         this.dom.replaceChildren((this.contentDOM = document.createElement('div')));
-        this.contentDOM.classList.add('ye-yfm-cut-title-inner');
+        this.contentDOM.classList.add('g-md-yfm-cut-title-inner');
         this.contentDOM.addEventListener('click', (e) => {
             // ignore clicking on the title content
             // you can open/close yfm-cut by clicking on the arrow icon

diff --git a/src/extensions/yfm/YfmDist/index.ts b/src/extensions/yfm/YfmDist/index.ts
@@ -17,7 +17,7 @@ export const YfmDist: ExtensionAuto = (builder) => {
             new Plugin({
                 props: {
                     attributes: {
-                        class: 'yfm yfm_no-list-reset',
+                        class: 'yfm yfm_no-list-reset yfm-editor',
                     },
                 },
             }),