From 82b42ceb1d8e450b3697c98c9b8b4a2210beb085 Mon Sep 17 00:00:00 2001 From: Yuriy Demidov Date: Mon, 3 Jun 2024 14:53:34 +0300 Subject: [PATCH] feat: add g-md-editor classname to editor dom elem, change default prefix for internal classnames (#257) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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` --- src/bundle/MarkupEditorView.scss | 6 +++--- src/bundle/WysiwygEditorView.scss | 2 +- src/bundle/YfmEditorView.scss | 4 ++-- .../settings/MarkdownHints/MarkdownHints.scss | 2 +- src/bundle/settings/index.scss | 4 ++-- src/bundle/sticky/sticky.scss | 4 ++-- .../toolbar/ToolbarButtonWithPopupMenu.scss | 2 +- src/bundle/toolbar/ToolbarSelect.scss | 2 +- src/bundle/toolbar/custom/ToolbarColors.scss | 2 +- src/classname.ts | 2 +- src/extensions/base/BaseStyles/index.scss | 6 +++--- src/extensions/base/BaseStyles/index.ts | 2 +- .../behavior/CommandMenu/component.scss | 2 +- src/extensions/behavior/Cursor/gapcursor.scss | 4 ++-- src/extensions/behavior/Cursor/gapcursor.ts | 2 +- src/extensions/behavior/Placeholder/index.scss | 8 ++++---- src/extensions/behavior/Placeholder/index.ts | 2 +- src/extensions/behavior/Selection/selection.scss | 2 +- .../TooltipPlugin/TooltipView.scss | 10 +++++----- .../CodeBlockHighlight/TooltipPlugin/index.tsx | 8 ++++---- .../markdown/Link/PlaceholderWidget/widget.scss | 2 +- src/extensions/yfm/Checkbox/index.scss | 2 +- .../EmojiSuggest/EmojiSuggestComponent.scss | 2 +- .../yfm/ImgSize/ImagePaste/skeleton.scss | 2 +- src/extensions/yfm/ImgSize/ImageWidget/view.scss | 2 +- .../ImgSizeNodeView/ImageForm/ImageForm.scss | 2 +- .../plugins/ImgSizeNodeView/ImgNodeView.scss | 2 +- src/extensions/yfm/Math/view-and-edit.scss | 16 ++++++++-------- .../yfm/Mermaid/MermaidNodeView/Mermaid.scss | 2 +- .../yfm/YfmCut/nodeviews/yfm-cut-title.scss | 2 +- .../yfm/YfmCut/nodeviews/yfm-cut-title.ts | 2 +- src/extensions/yfm/YfmDist/index.ts | 2 +- .../yfm/YfmFile/YfmFilePaste/skeleton.scss | 2 +- .../yfm/YfmFile/YfmFileWidget/view.scss | 2 +- .../plugins/YfmNoteTooltipPlugin/index.scss | 4 ++-- .../plugins/YfmNoteTooltipPlugin/index.tsx | 2 +- .../YfmTable/plugins/YfmTableControls/view.scss | 8 ++++---- .../YfmTableControls/yfmTableCellView.scss | 6 +++--- src/extensions/yfm/YfmTabs/index.scss | 8 ++++---- src/forms/ImageForm.scss | 2 +- src/forms/UrlInputRow.scss | 2 +- src/forms/base/Form.scss | 2 +- src/forms/base/FormFooter.scss | 2 +- src/forms/base/FormLayout.scss | 2 +- src/forms/base/FormRow.scss | 2 +- .../codemirror/files-upload-plugin/widget.scss | 2 +- src/plugins/BaseTooltip/index.scss | 2 +- src/toolbar/FlexToolbar.scss | 2 +- src/toolbar/Toolbar.scss | 2 +- src/toolbar/ToolbarButton.scss | 2 +- src/toolbar/ToolbarGroup.scss | 2 +- src/toolbar/ToolbarListButton.scss | 2 +- 52 files changed, 86 insertions(+), 86 deletions(-) diff --git a/src/bundle/MarkupEditorView.scss b/src/bundle/MarkupEditorView.scss index 6020b452..ca6abc17 100644 --- 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 index 68f92f25..a61dba06 100644 --- 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 index a6dea289..9263a3a3 100644 --- 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 index ade24ea0..74dcb96e 100644 --- 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 index 8bfba8bf..9a654bc7 100644 --- 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 index a81a63b4..91f3897f 100644 --- 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 index c9eed3cc..3a83fd92 100644 --- 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 index 3f0e995c..9e1bad1e 100644 --- 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 index 28eaf4bc..1b573159 100644 --- 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 index dad0e46f..10d987d5 100644 --- 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 index a023baa5..233c8fa3 100644 --- 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 index d3ccf09b..d96566b9 100644 --- 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 index 8b7c35ec..234fcd77 100644 --- 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 index 8fe7ad17..e426a52c 100644 --- 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 index 65b393d1..57bc969f 100644 --- 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 index 3b79c7f9..df72c43d 100644 --- a/src/extensions/behavior/Placeholder/index.scss +++ b/src/extensions/behavior/Placeholder/index.scss @@ -1,4 +1,4 @@ -.ProseMirror .ye-placeholder { +.ProseMirror .g-md-placeholder { display: inline-block; pointer-events: none; @@ -6,7 +6,7 @@ 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 index 34f90f2f..a27f1fec 100644 --- a/src/extensions/behavior/Placeholder/index.ts +++ b/src/extensions/behavior/Placeholder/index.ts @@ -118,7 +118,7 @@ export const Placeholder: ExtensionAuto = (builder, opts) => const attrs: Record = {}; 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 index 5eba8fc8..0d2efc45 100644 --- 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 index b9a8dcb7..5f9ec8f1 100644 --- 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 index 3ef2ba9b..eb0702be 100644 --- 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 = ({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={() => ( -
{i18n('empty_option')}
+
{i18n('empty_option')}
)} /> ); @@ -68,7 +68,7 @@ export const codeLangSelectTooltipViewCreator = ( 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 index d2912a84..b35d3bad 100644 --- 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 index 7ea4e623..861c1768 100644 --- 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 index 3cf5faa3..f1eb614d 100644 --- 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 index f89e1594..1c8969a2 100644 --- 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 index 88d11071..0ce8f750 100644 --- 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 index d5ad6293..b8708ddd 100644 --- 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 index fb894cb6..6f918fab 100644 --- 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 index 914f8379..dafdd4b7 100644 --- 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 index 82b29553..f58dbf8d 100644 --- 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 index 64f6016d..a6fa98e7 100644 --- 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 index bee764db..bb08c02d 100644 --- 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 index d80c407d..eec9d205 100644 --- 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', }, }, }), diff --git a/src/extensions/yfm/YfmFile/YfmFilePaste/skeleton.scss b/src/extensions/yfm/YfmFile/YfmFilePaste/skeleton.scss index a845e4c0..702b68d3 100644 --- a/src/extensions/yfm/YfmFile/YfmFilePaste/skeleton.scss +++ b/src/extensions/yfm/YfmFile/YfmFilePaste/skeleton.scss @@ -1,4 +1,4 @@ -.ye-file-skeleton { +.g-md-file-skeleton { display: inline-flex; align-items: center; diff --git a/src/extensions/yfm/YfmFile/YfmFileWidget/view.scss b/src/extensions/yfm/YfmFile/YfmFileWidget/view.scss index 14beb3f4..2669dc61 100644 --- a/src/extensions/yfm/YfmFile/YfmFileWidget/view.scss +++ b/src/extensions/yfm/YfmFile/YfmFileWidget/view.scss @@ -1,4 +1,4 @@ -.ye-file-placeholder { +.g-md-file-placeholder { margin: 0 4px; pointer-events: none; diff --git a/src/extensions/yfm/YfmNote/plugins/YfmNoteTooltipPlugin/index.scss b/src/extensions/yfm/YfmNote/plugins/YfmNoteTooltipPlugin/index.scss index 282734ab..8adff9da 100644 --- a/src/extensions/yfm/YfmNote/plugins/YfmNoteTooltipPlugin/index.scss +++ b/src/extensions/yfm/YfmNote/plugins/YfmNoteTooltipPlugin/index.scss @@ -1,10 +1,10 @@ @import '~@diplodoc/transform/src/scss/_note.scss'; -.ye-yfm-note-toolbar { +.g-md-yfm-note-toolbar { margin: 2px 8px; } -.ye-toolbar-group__s-button_id_ { +.g-md-toolbar-group__s-button_id_ { ¬e-type-tip { color: $tipColor; } diff --git a/src/extensions/yfm/YfmNote/plugins/YfmNoteTooltipPlugin/index.tsx b/src/extensions/yfm/YfmNote/plugins/YfmNoteTooltipPlugin/index.tsx index fada73de..71e648ff 100644 --- a/src/extensions/yfm/YfmNote/plugins/YfmNoteTooltipPlugin/index.tsx +++ b/src/extensions/yfm/YfmNote/plugins/YfmNoteTooltipPlugin/index.tsx @@ -55,7 +55,7 @@ export const yfmNoteTooltipPlugin = ({actions, schema}: ExtensionDeps) => view.focus()} - className="ye-yfm-note-toolbar" + className="g-md-yfm-note-toolbar" data={[ [ YfmNoteType.info, diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss index 7a6f12de..6a960be2 100644 --- a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss +++ b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss @@ -1,6 +1,6 @@ $buttons-size: 18px; -.ye-table-view { +.g-md-table-view { &__hack-strip { position: absolute; left: -13px; @@ -25,7 +25,7 @@ $buttons-size: 18px; } &__buttons-visible { - .ye-table-view__plus-button-controls { + .g-md-table-view__plus-button-controls { pointer-events: initial; opacity: 1; @@ -88,7 +88,7 @@ $buttons-size: 18px; // In that case butoons do not get cropped with overflow and scroll remains. And we draw a line with big z-index so that // it overlaps content and content doesn't overflow to the left -.ye-table-view.ye-table-view { +.g-md-table-view.g-md-table-view { z-index: unset; display: block; @@ -115,7 +115,7 @@ $buttons-size: 18px; } } -.ye-table-wrapper { +.g-md-table-wrapper { display: inline-block; margin-right: 2px; diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss index 41b72ddf..0bb81c91 100644 --- a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss +++ b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss @@ -1,4 +1,4 @@ -.ye-table-cell-view { +.g-md-table-cell-view { &__left-button { position: absolute; z-index: 110; @@ -40,14 +40,14 @@ } &__upper-visible { - .ye-table-cell-view__upper-button { + .g-md-table-cell-view__upper-button { pointer-events: initial; opacity: 1; } } &__left-visible { - .ye-table-cell-view__left-button { + .g-md-table-cell-view__left-button { pointer-events: initial; opacity: 1; diff --git a/src/extensions/yfm/YfmTabs/index.scss b/src/extensions/yfm/YfmTabs/index.scss index d315eb53..b55a7ebe 100644 --- a/src/extensions/yfm/YfmTabs/index.scss +++ b/src/extensions/yfm/YfmTabs/index.scss @@ -4,7 +4,7 @@ .yfm-tabs { @include mixins.block-border-hover(); } - .ye-yfm-tab { + .g-md-yfm-tab { &__wrapper { position: relative; @@ -64,19 +64,19 @@ border-bottom: none; - .ye-placeholder { + .g-md-placeholder { color: var(--g-color-text-hint); } &[data-diplodoc-is-active='true'] { - .ye-yfm-tab__wrapper { + .g-md-yfm-tab__wrapper { border-bottom-color: #027bf3; } } &:hover, &:last-child { - .ye-yfm-tab__create-button { + .g-md-yfm-tab__create-button { opacity: 1; } } diff --git a/src/forms/ImageForm.scss b/src/forms/ImageForm.scss index 08842438..d36f73cf 100644 --- a/src/forms/ImageForm.scss +++ b/src/forms/ImageForm.scss @@ -1,4 +1,4 @@ -.ye-image-form { +.g-md-image-form { &__input { &_type_width, &_type_height { diff --git a/src/forms/UrlInputRow.scss b/src/forms/UrlInputRow.scss index 0abb235d..4af8f6c8 100644 --- a/src/forms/UrlInputRow.scss +++ b/src/forms/UrlInputRow.scss @@ -1,4 +1,4 @@ -.ye-url-input-row { +.g-md-url-input-row { display: flex; &__button { diff --git a/src/forms/base/Form.scss b/src/forms/base/Form.scss index 230e1917..c24e82b1 100644 --- a/src/forms/base/Form.scss +++ b/src/forms/base/Form.scss @@ -1,4 +1,4 @@ -.ye-form { +.g-md-form { display: flex; flex-direction: column; gap: 20px 0; diff --git a/src/forms/base/FormFooter.scss b/src/forms/base/FormFooter.scss index 694cf955..d5f40734 100644 --- a/src/forms/base/FormFooter.scss +++ b/src/forms/base/FormFooter.scss @@ -1,4 +1,4 @@ -.ye-form-footer { +.g-md-form-footer { display: flex; justify-content: flex-end; gap: 0 8px; diff --git a/src/forms/base/FormLayout.scss b/src/forms/base/FormLayout.scss index 14dd3ac3..2d16225b 100644 --- a/src/forms/base/FormLayout.scss +++ b/src/forms/base/FormLayout.scss @@ -1,4 +1,4 @@ -.ye-form-layout { +.g-md-form-layout { display: flex; flex-direction: column; gap: 8px 0; diff --git a/src/forms/base/FormRow.scss b/src/forms/base/FormRow.scss index 2bf5cdf6..52d59822 100644 --- a/src/forms/base/FormRow.scss +++ b/src/forms/base/FormRow.scss @@ -1,6 +1,6 @@ @import '~@gravity-ui/uikit/styles/mixins'; -.ye-form-row { +.g-md-form-row { display: flex; gap: 0 12px; diff --git a/src/markup/codemirror/files-upload-plugin/widget.scss b/src/markup/codemirror/files-upload-plugin/widget.scss index 13bb27e2..7d90f74d 100644 --- a/src/markup/codemirror/files-upload-plugin/widget.scss +++ b/src/markup/codemirror/files-upload-plugin/widget.scss @@ -1,6 +1,6 @@ @use '~@gravity-ui/uikit/styles/mixins.scss'; -.ye-upload-label { +.g-md-upload-label { &__content { display: flex; align-items: center; diff --git a/src/plugins/BaseTooltip/index.scss b/src/plugins/BaseTooltip/index.scss index 8ece333d..e3e5b61d 100644 --- a/src/plugins/BaseTooltip/index.scss +++ b/src/plugins/BaseTooltip/index.scss @@ -1,4 +1,4 @@ -.ye-base-tooltip { +.g-md-base-tooltip { display: flex; max-width: fit-content; diff --git a/src/toolbar/FlexToolbar.scss b/src/toolbar/FlexToolbar.scss index bd157ca3..75514ee8 100644 --- a/src/toolbar/FlexToolbar.scss +++ b/src/toolbar/FlexToolbar.scss @@ -1,4 +1,4 @@ -.ye-flex-toolbar { +.g-md-flex-toolbar { position: relative; height: 28px; diff --git a/src/toolbar/Toolbar.scss b/src/toolbar/Toolbar.scss index 04c308ec..92a8b233 100644 --- a/src/toolbar/Toolbar.scss +++ b/src/toolbar/Toolbar.scss @@ -1,4 +1,4 @@ -.ye-toolbar { +.g-md-toolbar { display: flex; &__group-separator { diff --git a/src/toolbar/ToolbarButton.scss b/src/toolbar/ToolbarButton.scss index 54f0b5b0..3f438978 100644 --- a/src/toolbar/ToolbarButton.scss +++ b/src/toolbar/ToolbarButton.scss @@ -1,4 +1,4 @@ -.ye-toolbar-button { +.g-md-toolbar-button { &__action-disabled-tooltip { min-height: fit-content; padding: 6px 12px; diff --git a/src/toolbar/ToolbarGroup.scss b/src/toolbar/ToolbarGroup.scss index 1ca5c106..c85f7851 100644 --- a/src/toolbar/ToolbarGroup.scss +++ b/src/toolbar/ToolbarGroup.scss @@ -1,4 +1,4 @@ -.ye-toolbar-group { +.g-md-toolbar-group { display: flex; gap: 0 2px; } diff --git a/src/toolbar/ToolbarListButton.scss b/src/toolbar/ToolbarListButton.scss index 98689ec2..ccea0333 100644 --- a/src/toolbar/ToolbarListButton.scss +++ b/src/toolbar/ToolbarListButton.scss @@ -1,4 +1,4 @@ -.ye-toolbar-list-button { +.g-md-toolbar-list-button { &_arrow { --g-button-icon-offset: 0px; --g-button-padding: 2px;